Islamic Date and Month Today

Islamic Date Pakistan & World :root { --islamic-green: #0b8d4b; --deep-gold: #b8860b; --text-main: #2d3436; --bg-soft: #f8faf9; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Poppins', sans-serif; background-color: var(--bg-soft); color: var(--text-main); padding: 15px; font-size: 13px; /* Professional small font size */ } .wrapper { max-width: 550px; margin: 0 auto; } header { text-align: center; margin-bottom: 25px; padding-top: 10px; } h1 { color: var(--islamic-green); font-size: 24px; font-weight: 600; letter-spacing: -0.5px; } .subtitle { font-size: 11px; color: #7f8c8d; text-transform: uppercase; letter-spacing: 1px; } /* Block Element Layout */ .block-container { display: flex; flex-direction: column; gap: 15px; margin-bottom: 30px; } .date-block { background: #ffffff; padding: 20px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); border-left: 5px solid var(--islamic-green); display: flex; flex-direction: column; align-items: center; /* Centering content */ text-align: center; } .date-block.world { border-left-color: var(--deep-gold); } .date-block span { font-size: 10px; font-weight: 600; color: #95a5a6; text-transform: uppercase; margin-bottom: 5px; } .date-block .value { font-size: 16px; font-weight: 600; color: var(--text-main); line-height: 1.4; } /* Professional Table */ .table-section { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); margin-bottom: 30px; } table { width: 100%; border-collapse: collapse; } th { background-color: #f1f3f2; padding: 12px; font-size: 11px; color: #636e72; text-align: center; border-bottom: 1px solid #edf2f0; } td { padding: 15px; text-align: center; font-size: 13px; border-bottom: 1px solid #edf2f0; } .row-pak { background-color: #f0fdf4; color: var(--islamic-green); font-weight: 600; } /* Month List */ .month-list { background: #fff; border-radius: 16px; padding: 15px; } .month-item { display: flex; justify-content: space-between; padding: 10px 15px; border-radius: 10px; margin-bottom: 4px; font-size: 12px; } .active { background-color: var(--islamic-green); color: white; font-weight: 500; } /* Responsive adjustments */ @media (max-width: 400px) { h1 { font-size: 20px; } .date-block .value { font-size: 14px; } } Islamic Date Today Gregorian Calendar -- World Islamic Date -- Pakistan Islamic Date -- Region Current Hijri Date Global/Saudi -- Pakistan -- Islamic Months const today = new Date(); const months = [ "Muharram", "Safar", "Rabi al-Awwal", "Rabi al-Thani", "Jumada al-Awwal", "Jumada al-Thani", "Rajab", "Sha'ban", "Ramadan", "Shawwal", "Dhul Qidah", "Dhul Hijjah" ]; // Reference: May 12, 2026 is 24 Dhul Qidah (Pakistan) and 25 Dhul Qidah (World) const refDate = new Date(2026, 4, 12); const diffDays = Math.round((today - refDate) / (1000 * 60 * 60 * 24)); function calculateHijri(baseDay, diff) { let d = baseDay + diff; let mIdx = 10; // Dhul Qidah let y = 1447; while(d > 30) { d -= 30; mIdx++; if(mIdx > 11) { mIdx = 0; y++; } } while(d { const item = document.createElement('div'); item.className = 'month-item' + (index === pakistan.mIdx ? ' active' : ''); item.innerHTML = `${index + 1}. ${name}${index === pakistan.mIdx ? 'Current' : ''}`; monthBox.appendChild(item); });