<!-- wp:html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Islamic Date Pakistan & World</title> <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet"> <style> :root{ --green:#0b8d4b; --gold:#b8860b; --text:#2d3436; --bg:#f8faf9; } *{ margin:0; padding:0; box-sizing:border-box; } body{ font-family:'Poppins',sans-serif; background:var(--bg); color:var(--text); padding:15px; font-size:13px; } .wrapper{ max-width:560px; margin:auto; } header{ text-align:center; margin-bottom:25px; } h1{ color:var(--green); font-size:24px; font-weight:600; } .subtitle{ font-size:11px; color:#7f8c8d; text-transform:uppercase; letter-spacing:1px; } .block-container{ display:flex; flex-direction:column; gap:15px; margin-bottom:25px; } .date-block{ background:#fff; padding:20px; border-radius:16px; box-shadow:0 4px 15px rgba(0,0,0,.04); border-left:5px solid var(--green); text-align:center; } .date-block.world{ border-left-color:var(--gold); } .date-block span{ display:block; font-size:10px; color:#95a5a6; font-weight:600; margin-bottom:6px; text-transform:uppercase; } .value{ font-size:16px; font-weight:600; line-height:1.5; } .table-section{ background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 4px 15px rgba(0,0,0,.04); margin-bottom:25px; } table{ width:100%; border-collapse:collapse; } th{ background:#f1f3f2; padding:12px; font-size:11px; color:#636e72; text-align:center; } td{ padding:14px; text-align:center; border-top:1px solid #edf2f0; font-size:12px; } .row-pak{ background:#f0fff4; color:var(--green); font-weight:600; } .month-list{ background:#fff; border-radius:16px; padding:15px; box-shadow:0 4px 15px rgba(0,0,0,.04); } .month-title{ color:var(--green); font-size:14px; font-weight:600; margin-bottom:12px; } .month-item{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px; border-radius:10px; margin-bottom:5px; background:#f8faf9; font-size:12px; } .month-item.active{ background:var(--green); color:#fff; font-weight:500; } .footer{ text-align:center; margin-top:18px; font-size:10px; color:#95a5a6; } @media(max-width:400px){ h1{ font-size:20px; } .value{ font-size:14px; } } </style> </head> <body> <div class="wrapper"> <header> <div class="subtitle" id="live-time">---</div> <h1>Islamic Date Today</h1> </header> <div class="block-container"> <div class="date-block"> <span>Gregorian Calendar</span> <div class="value" id="greg-val">--</div> </div> <div class="date-block world"> <span>World Islamic Date</span> <div class="value" id="world-val">--</div> </div> <div class="date-block"> <span>Pakistan Islamic Date</span> <div class="value" id="pak-val">--</div> </div> </div> <div class="table-section"> <table> <thead> <tr> <th>Region</th> <th>Current Hijri Date</th> </tr> </thead> <tbody> <tr> <td>Global / Saudi</td> <td id="t-world">--</td> </tr> <tr class="row-pak"> <td>Pakistan</td> <td id="t-pak">--</td> </tr> </tbody> </table> </div> <div class="month-list"> <div class="month-title"> List of Islamic Months </div> <div id="month-box"></div> </div> <div class="footer"> </div> </div> <script> const islamicMonths = [ "Muharram", "Safar", "Rabi al-Awwal", "Rabi al-Thani", "Jumada al-Awwal", "Jumada al-Thani", "Rajab", "Sha'ban", "Ramadan", "Shawwal", "Dhu al-Qi'dah", "Dhu al-Hijjah" ]; // Dynamically calculates length of a specific Hijri month using the standard 30-year tabular model function getDaysInHijriMonth(monthIndex, year) { // Months 1, 3, 5, 7, 9, 11 have 30 days. Even months have 29 days. if ((monthIndex + 1) % 2 !== 0) { return 30; } // Dhu al-Hijjah (index 11) has 30 days in leap years if (monthIndex === 11) { const leapYears = [2, 5, 7, 10, 13, 16, 18, 21, 24, 26, 29]; const cycleYear = year % 30; if (leapYears.includes(cycleYear)) { return 30; } } return 29; } // Master Engine to parse dates and adjust increments automatically function calculateHijri(today, dayOffset = 0) { // Core Reference Anchor: May 18, 2026 = 1 Dhu al-Hijjah 1447 AH const refDate = new Date(2026, 4, 18); // Day calculation calculation logic const diffTime = today.getTime() - refDate.getTime(); let diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)) + dayOffset; let day = 1; let monthIndex = 11; // Dhu al-Hijjah let year = 1447; day += diffDays; // Forward processing logic while (day > getDaysInHijriMonth(monthIndex, year)) { day -= getDaysInHijriMonth(monthIndex, year); monthIndex++; if (monthIndex > 11) { monthIndex = 0; year++; } } // Backward processing logic while (day <= 0) { monthIndex--; if (monthIndex < 0) { monthIndex = 11; year--; } day += getDaysInHijriMonth(monthIndex, year); } return { day: day, month: islamicMonths[monthIndex], year: year, monthIndex: monthIndex }; } function updateDashboard() { const today = new Date(); // Pakistan & Global both map cleanly to 3 Dhul Hijjah 1447 AH on May 20, 2026 // If you need to introduce regional moon sight offsets manually later, adjust the numerical arguments below. const worldHijri = calculateHijri(today, 0); const pakistanHijri = calculateHijri(today, 0); // Format outputs const worldString = `${worldHijri.day} ${worldHijri.month} ${worldHijri.year} AH`; const pakistanString = `${pakistanHijri.day} ${pakistanHijri.month} ${pakistanHijri.year} AH`; const gregorianString = today.toLocaleDateString('en-PK', { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' }); // DOM UI Injection document.getElementById('greg-val').textContent = gregorianString; document.getElementById('world-val').textContent = worldString; document.getElementById('pak-val').textContent = pakistanString; document.getElementById('t-world').textContent = worldString; document.getElementById('t-pak').textContent = pakistanString; document.getElementById('live-time').textContent = today.toLocaleTimeString('en-PK', { hour: '2-digit', minute: '2-digit', second: '2-digit' }); // Render registry items safely const monthBox = document.getElementById('month-box'); if (monthBox) { monthBox.innerHTML = ""; islamicMonths.forEach((month, index) => { const item = document.createElement('div'); item.className = index === pakistanHijri.monthIndex ? 'month-item active' : 'month-item'; item.innerHTML = ` <span>${index + 1}. ${month}</span> <span>${index === pakistanHijri.monthIndex ? 'Current' : ''}</span> `; monthBox.appendChild(item); }); } } // Autochange execution loop: Initial run + check every 1 second updateDashboard(); setInterval(updateDashboard, 1000); </script> </body> </html> <!-- /wp:html --> <!-- wp:html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Daily Quran & Hadith Reflection</title> <!-- High-quality Google Fonts for professional print-book aesthetics --> <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;700&family=Amiri:ital,wght@0,400;0,700;1,400&family=Noto+Nastaliq+Urdu:wght@400;700&family=Plus+Jakarta+Sans:wght@400;500;600&display=swap" rel="stylesheet"> <style> :root { --primary-book: #064e3b; /* Deep Islamic green */ --primary-light: #f0fdf4; /* Soft ivory-green page tint */ --accent-gold: #b45309; /* Classical book gold tint */ --accent-gold-light: #fef3c7; /* Light gold background framing */ --text-dark: #1e293b; /* Charcoal body text */ --text-muted: #64748b; /* Subtle slate for metadata */ --border-color: #cbd5e1; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: #f8fafc; background-image: radial-gradient(#e2e8f0 1px, transparent 1px); background-size: 20px 20px; font-family: 'Plus Jakarta Sans', sans-serif; color: var(--text-dark); padding: 20px 12px; line-height: 1.6; } .container { max-width: 720px; margin: auto; } /* Professional Header Design */ header { text-align: center; margin-bottom: 35px; position: relative; padding-bottom: 15px; } header::after { content: "❖ ❖ ❖"; display: block; font-size: 10px; color: var(--accent-gold); letter-spacing: 4px; margin-top: 8px; } .main-title { font-family: 'Cinzel', serif; font-size: 22px; font-weight: 700; color: var(--primary-book); letter-spacing: 0.5px; } .date-badge { display: inline-block; font-size: 11px; background: var(--accent-gold-light); color: var(--accent-gold); padding: 4px 14px; border-radius: 50px; font-weight: 600; margin-top: 6px; border: 1px solid #fde68a; text-transform: uppercase; } /* Classical Literary Book Layout Pattern */ .book-card { background: #ffffff; border: 1px solid #e2e8f0; border-top: 5px solid var(--primary-book); border-radius: 12px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05); margin-bottom: 30px; overflow: hidden; } .book-card.hadith-card { border-top-color: var(--accent-gold); } .card-meta { display: flex; justify-content: space-between; align-items: center; background: #fafafa; padding: 12px 20px; border-bottom: 1px solid #f1f5f9; } .chapter-tag { font-weight: 600; font-size: 12px; color: var(--primary-book); text-transform: uppercase; } .book-card.hadith-card .chapter-tag { color: var(--accent-gold); } .source-ref { font-size: 11px; font-weight: 500; color: var(--text-muted); background: #f1f5f9; padding: 2px 8px; border-radius: 4px; } /* Text Blocks Layout */ .verse-unit { padding: 24px 20px; border-bottom: 1px solid #f1f5f9; } .verse-unit:last-child { border-bottom: none; } .index-indicator { font-size: 10px; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; color: var(--accent-gold); margin-bottom: 8px; display: block; } /* Arabic typography configurations */ .arabic-text { font-family: 'Amiri', serif; font-size: 24px; line-height: 2.3; color: #0f172a; direction: rtl; text-align: right; margin-bottom: 16px; font-weight: 400; } /* Urdu Typography Nastaliq Engine styling rules */ .urdu-translation { font-family: 'Noto Nastaliq Urdu', serif; font-size: 16px; line-height: 2.8; color: #1e293b; direction: rtl; text-align: right; margin-bottom: 16px; padding-right: 10px; border-right: 3px solid #e2e8f0; } /* English Translation text blocks */ .english-translation { font-size: 13.5px; line-height: 1.7; color: #334155; text-align: left; font-weight: 400; } footer { text-align: center; font-size: 11px; color: var(--text-muted); margin-top: 40px; padding: 20px 0; border-top: 1px solid #e2e8f0; } @media (max-width: 600px) { .arabic-text { font-size: 21px; line-height: 2.1; } .urdu-translation { font-size: 14px; line-height: 2.6; } .english-translation { font-size: 12.5px; } .main-title { font-size: 18px; } } </style> </head> <body> <div class="container"> <header> <h1 class="main-title">Daily Reflection</h1> <div class="date-badge" id="current-date">-- -- ----</div> </header> <!-- Target Output Container Zones --> <div id="quran-container"></div> <div id="hadith-container"></div> <footer> </footer> </div> <script> // Structural Data Collections (Original Dataset + requested extensions) const quranDatabase = [ { metaTitle: "Surah Al-Baqarah", reference: "Surah Al-Baqarah (2:9-12)", verses: [ { label: "Ayat 9", arabic: "يُخَادِعُونَ اللَّهَ وَالَّذِينَ آمَنُوا وَمَا يَخْدَعُونَ إِلَّا أَنفُسَهُمْ وَمَا يَشْعُرُونَ", urdu: "وہ اللہ اور ایمان والوں کو دھوکہ دینا چاہتے ہیں، حالانکہ وہ اپنے آپ ہی کو دھوکہ دے رہے ہیں اور انہیں شعور نہیں۔", english: "They [think to] deceive Allah and those who believe, but they deceive not except themselves and perceive [it] not." }, { label: "Ayat 10", arabic: "فِي قُلُوبِهِم مَّرَضٌ فَزَادَهُمُ اللَّهُ مَرَضًا ۖ وَلَهُمْ عَذَابٌ أَلِيمٌ بِمَا كَانُوا يَكْذِبُونَ", urdu: "ان کے دلوں میں بیماری ہے، تو اللہ نے ان کی بیماری اور بڑھا دی، اور ان کے لیے دردناک عذاب ہے کیونکہ وہ جھوٹ بولتے تھے۔", english: "In their hearts is disease, so Allah has increased their disease; and for them is a painful punishment because they [habitually] used to lie." }, { label: "Ayat 11", arabic: "وَإِذَا قِيلَ لَهُمْ لَا تُفْسِدُوا فِي الْأَرْضِ قَالُوا إِنَّمَا نَحْنُ مُصْلِحُونَ", urdu: "اور جب ان سے کہا جاتا ہے کہ زمین میں فساد نہ کرو، تو کہتے ہیں کہ ہم تو صرف اصلاح کرنے والے ہیں۔", english: "And when it is said to them, “Do not cause corruption on the earth,” they say, “We are but reformers.”" }, { label: "Ayat 12", arabic: "أَلَا إِنَّهُمْ هُمُ الْمُفْسِدُونَ وَلَٰكِن لَّا يَشْعُرُونَ", urdu: "خبردار! بے شک یہی لوگ فساد کرنے والے ہیں لیکن انہیں شعور نہیں۔", english: "Unquestionably, it is they who are the corrupters, but they perceive [it] not." } ] }, { metaTitle: "Surah Al-Baqarah", reference: "Surah Al-Baqarah (2:13-16)", verses: [ { label: "Ayat 13", arabic: "وَإِذَا قِيلَ لَهُمْ آمِنُوا كَمَا آمَنَ النَّاسُ قَالُوا أَنُؤْمِنُ كَمَا آمَنَ السُّفَهَاءُ ۗ أَلَا إِنَّهُمْ هُمُ السُّفَهَاءُ وَلَٰكِن لَّا يَعْلَمُونَ", urdu: "اور جب ان سے کہا جاتا ہے کہ تم بھی اسی طرح ایمان لاؤ جیسے دوسرے لوگ ایمان لائے ہیں، تو کہتے ہیں کیا ہم اس طرح ایمان لائیں جس طرح بیوقوف ایمان لائے ہیں؟ سن لو! یقیناً یہی لوگ بیوقوف ہیں لیکن وہ نہیں جانتے۔", english: "And when it is said to them, \"Believe as the people have believed,\" they say, \"Should we believe as the foolish have believed?\" Unquestionably, it is they who are the foolish, but they know not." }, { label: "Ayat 14", arabic: "وَإِذَا لَقُوا الَّذِينَ آمَنُوا قَالُوا آمَنَّا وَإِذَا خَلَوْا إِلَىٰ شَيَاطِينِهِمْ قَالُوا إِنَّا مَعَكُمْ إِنَّمَا نَحْنُ مُسْتَهْزِئُونَ", urdu: "اور جب یہ ایمان والوں سے ملتے ہیں تو کہتے ہیں ہم ایمان لا چکے، اور جب اپنے شیطانوں کے پاس تنہائی میں جاتے ہیں تو کہتے ہیں کہ ہم تمہارے ساتھ ہیں، ہم تو صرف مذاق اڑا رہے ہیں۔", english: "And when they meet those who believe, they say, \"We believe\"; but when they are alone with their evil ones, they say, \"Indeed, we are with you; we were only mockers.\"" }, { label: "Ayat 15", arabic: "اللَّهُ يَسْتَهْزِئُ بِهِمْ وَيَمُدُّهُمْ فِي طُغْيَانِهِمْ يَعْمَهُونَ", urdu: "اللہ ان سے مذاق کرتا ہے اور انہیں ان کی سرکشی میں ڈھیل دیتا ہے کہ وہ بھٹکتے پھریں۔", english: "Allah mocks them and prolongs them in their transgression [while] they wander blindly." }, { label: "Ayat 16", arabic: "أُولَٰئِكَ الَّذِينَ اشْتَرَوُا الضَّلَالَةَ بِالْهُدَىٰ فَمَا رَبِحَت تِّجَارَتُهُمْ وَمَا كَانُوا مُهْتَدِينَ", urdu: "یہ وہ لوگ ہیں جنہوں نے ہدایت کے بدلے گمراہی خریدی، پس نہ تو ان کی تجارت نے نفع دیا اور نہ ہی وہ ہدایت پانے والے ہوئے۔", english: "Those are the ones who have purchased error [in exchange] for guidance, so their transaction has brought no profit, nor were they guided." } ] } ]; const hadithDatabase = [ { metaTitle: "Sahih al-Bukhari", reference: "Hadith No. 5", arabic: "بَدَأَ الْوَحْيُ إِلَى رَسُولِ اللَّهِ ﷺ بِالرُّؤْيَا الصَّالِحَةِ فِي النَّوْمِ، فَكَانَ لَا يَرَى رُؤْيَا إِلَّا جَاءَتْ مِثْلَ فَلَقِ الصُّبْحِ", urdu: "رسول اللہ ﷺ پر وحی کی ابتدا سچے خوابوں سے ہوئی، جو صبح کی روشنی کی طرح واضح سچ ثابت ہوتے تھے۔", english: "The commencement of the Divine Inspiration to Allah’s Messenger (ﷺ) was in the form of good dreams which came true like bright daylight." }, { metaTitle: "Sahih al-Bukhari", reference: "Hadith No. 6", arabic: "كَانَ رَسُولُ اللَّهِ ﷺ أَجْوَدَ النَّاسِ، وَكَانَ أَجْوَدُ مَا يَكُونُ فِي رَمَضَانَ حِينَ يَلْقَاهُ جِبْرِيلُ", urdu: "رسول اللہ ﷺ تمام انسانوں سے زیادہ سخی تھے، اور رمضان میں جب جبرائیل علیہ السلام آپ سے ملتے تو آپ کی سخاوت اور بھی بڑھ جاتی تھی۔", english: "Allah's Messenger (ﷺ) was the most generous of all the people, and he used to reach the peak of generosity in the month of Ramadan when Jibril met him." } ]; // Calculation engine for predictable rotational sequence logic tracking day progression function getDeterministicIndex(modulusLength) { const today = new Date(); // Anchor point date: January 1, 2026 const anchorDate = new Date(2026, 0, 1); // Convert mathematical timestamp discrepancies into pure absolute days const diffTime = Math.abs(today - anchorDate); const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)); return diffDays % modulusLength; } function renderDailyContent() { const today = new Date(); // Set formatted human header timestamp display string document.getElementById('current-date').innerText = today.toLocaleDateString('en-US', { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }); // Acquire calculated rotational dynamic matching pointers const quranIdx = getDeterministicIndex(quranDatabase.length); const hadithIdx = getDeterministicIndex(hadithDatabase.length); const activeQuran = quranDatabase[quranIdx]; const activeHadith = hadithDatabase[hadithIdx]; // Assembly Matrix — Quran UI Building Loop let quranHTML = ` <div class="book-card"> <div class="card-meta"> <span class="chapter-tag">📖 ${activeQuran.metaTitle}</span> <span class="source-ref">${activeQuran.reference}</span> </div> `; activeQuran.verses.forEach(v => { quranHTML += ` <div class="verse-unit"> <span class="index-indicator">${v.label}</span> <div class="arabic-text">${v.arabic}</div> <div class="urdu-translation">${v.urdu}</div> <div class="english-translation">${v.english}</div> </div> `; }); quranHTML += `</div>`; // Assembly Matrix — Hadith UI Building Loop let hadithHTML = ` <div class="book-card hadith-card"> <div class="card-meta"> <span class="chapter-tag">🕌 ${activeHadith.metaTitle}</span> <span class="source-ref">${activeHadith.reference}</span> </div> <div class="verse-unit"> <div class="arabic-text">${activeHadith.arabic}</div> <div class="urdu-translation">${activeHadith.urdu}</div> <div class="english-translation">${activeHadith.english}</div> </div> </div> `; // Atomic Insertion Strategy execution run elements execution document.getElementById('quran-container').innerHTML = quranHTML; document.getElementById('hadith-container').innerHTML = hadithHTML; } // Runtime Initialisation execution setup matrix blocks execution paths renderDailyContent(); // Cross-boundary execution observer framework checking for day transformation intervals setInterval(() => { const now = new Date(); if(now.getHours() === 0 && now.getMinutes() === 0 && now.getSeconds() === 0) { renderDailyContent(); } }, 1000); </script> </body> </html> <!-- /wp:html -->
