ali963git · ali963git · Jul 17, 2026 · sourcery-ai · Jul 17, 2026 · sourcery-ai
diff --git a/app.js b/app.js
@@ -0,0 +1,48 @@
+const $ = (selector) => document.querySelector(selector);
+const modal = $('#modal');
+const showModal = (title, message) => { $('#modalContent').innerHTML = `<h2>${title}</h2><p>${message}</p>`; modal.showModal(); };
+$('.close').onclick = () => modal.close();
+
+const readers = [
+  ['مشاري راشد العفاسي', 'ar.alafasy'], ['ياسر الدوسري', 'ar.abdulbasitmurattal'],
+  ['سعد الغامدي', 'ar.husary'], ['عبدالرحمن السديس', 'ar.minshawi']
+];
-const readers = [
-  ['مشاري راشد العفاسي', 'ar.alafasy'], ['ياسر الدوسري', 'ar.abdulbasitmurattal'],
-  ['سعد الغامدي', 'ar.husary'], ['عبدالرحمن السديس', 'ar.minshawi']
-];
+const readers = [
+  ['مشاري راشد العفاسي', 'ar.alafasy'], ['ياسر الدوسري', 'ar.yasseraldosri'],
+  ['سعد الغامدي', 'ar.saoodshuraym'], ['عبدالرحمن السديس', 'ar.abdurrahmaansudais']
+];
-const readers = [
-  ['مشاري راشد العفاسي', 'ar.alafasy'], ['ياسر الدوسري', 'ar.abdulbasitmurattal'],
-  ['سعد الغامدي', 'ar.husary'], ['عبدالرحمن السديس', 'ar.minshawi']
-];
+const readers = [
+  ['مشاري راشد العفاسي', 'ar.alafasy'], ['عبدالباسط عبدالصمد', 'ar.abdulbasitmurattal'],
+  ['محمود خليل الحصري', 'ar.husary'], ['محمد صديق المنشاوي', 'ar.minshawi']
+];
-const readers = [
-  ['مشاري راشد العفاسي', 'ar.alafasy'], ['ياسر الدوسري', 'ar.abdulbasitmurattal'],
-  ['سعد الغامدي', 'ar.husary'], ['عبدالرحمن السديس', 'ar.minshawi']
-];
+const readers = [
+  ['مشاري راشد العفاسي', 'ar.alafasy'], ['ياسر الدوسري', 'ar.yasseraldosri'],
+  ['سعد الغامدي', 'ar.saoodshuraym'], ['عبدالرحمن السديس', 'ar.abdurrahmaansudais']
+];
-const readers = [
-  ['مشاري راشد العفاسي', 'ar.alafasy'], ['ياسر الدوسري', 'ar.abdulbasitmurattal'],
-  ['سعد الغامدي', 'ar.husary'], ['عبدالرحمن السديس', 'ar.minshawi']
-];
+const readers = [
+  ['مشاري راشد العفاسي', 'ar.alafasy'], ['عبدالباسط عبدالصمد', 'ar.abdulbasitmurattal'],
+  ['محمود خليل الحصري', 'ar.husary'], ['محمد صديق المنشاوي', 'ar.minshawi']
+];
+$('#readersList').innerHTML = readers.map(([name, edition], index) => `<div class="reader"><img src="https://i.pravatar.cc/80?img=${index + 12}" alt="${name}"><div><strong>${name}</strong><small>القرآن الكريم</small></div><button class="play" data-edition="${edition}" aria-label="استمع إلى ${name}">▶</button></div>`).join('');
+
+let verse = { number: 53, audio: '' };
+async function loadVerse() {
+  try {
+    const response = await fetch('https://api.alquran.cloud/v1/ayah/53:49/editions/ar.alafasy,ar.abdulbasitmurattal');
+    if (!response.ok) throw new Error('Quran API unavailable');
+    const { data } = await response.json();
+    const textEdition = data[0];
+    verse = { number: textEdition.number, audio: data[1]?.audio || textEdition.audio };
-    verse = { number: textEdition.number, audio: data[1]?.audio || textEdition.audio };
+    verse = { number: textEdition.number, audio: data[0]?.audio || textEdition.audio };
-    verse = { number: textEdition.number, audio: data[1]?.audio || textEdition.audio };
+    verse = { number: textEdition.number, audio: data[0]?.audio || textEdition.audio };
+    $('#quranText').textContent = textEdition.text;
+    $('#quranRef').textContent = `سورة ${textEdition.surah.name} — آية ${textEdition.numberInSurah}`;
+  } catch (error) { console.warn(error); }
+}
+async function loadPrayerTimes() {
+  const list = $('#prayerList');
+  try {
+    const response = await fetch('https://api.aladhan.com/v1/timingsByCity?city=Riyadh&country=Saudi%20Arabia&method=4');
+    if (!response.ok) throw new Error('Prayer API unavailable');
+    const { data } = await response.json();
+    const labels = { Fajr: 'الفجر', Dhuhr: 'الظهر', Asr: 'العصر', Maghrib: 'المغرب', Isha: 'العشاء' };
+    list.innerHTML = Object.entries(labels).map(([key, label]) => `<li><span>${label}</span><time>${data.timings[key]}</time></li>`).join('');
+    $('#hijriDate').textContent = `${data.date.hijri.weekday.ar}، ${data.date.hijri.day} ${data.date.hijri.month.ar} ${data.date.hijri.year} هـ`;
+  } catch (error) { $('#hijriDate').textContent = 'تعذر تحديث المواقيت حالياً'; console.warn(error); }
+}
+function playAudio(edition = 'ar.alafasy') {
+  const audio = $('#recitation');
+  const source = edition === 'ar.alafasy' ? verse.audio : `https://cdn.islamic.network/quran/audio/128/${edition}/${verse.number}.mp3`;
+  if (!source) return showModal('التلاوة', 'تجري تهيئة التلاوة، حاول مرة أخرى بعد لحظات.');
+  audio.src = source; audio.play().catch(() => showModal('التلاوة', 'يتطلب المتصفح تفاعلاً إضافياً لتشغيل الصوت.'));
+}
-let verse = { number: 53, audio: '' };
-async function loadVerse() {
-  try {
-    const response = await fetch('https://api.alquran.cloud/v1/ayah/53:49/editions/ar.alafasy,ar.abdulbasitmurattal');
-    if (!response.ok) throw new Error('Quran API unavailable');
-    const { data } = await response.json();
-    const textEdition = data[0];
-    verse = { number: textEdition.number, audio: data[1]?.audio || textEdition.audio };
-    $('#quranText').textContent = textEdition.text;
-    $('#quranRef').textContent = `سورة ${textEdition.surah.name} — آية ${textEdition.numberInSurah}`;
-  } catch (error) { console.warn(error); }
-}
-async function loadPrayerTimes() {
-  const list = $('#prayerList');
-  try {
-    const response = await fetch('https://api.aladhan.com/v1/timingsByCity?city=Riyadh&country=Saudi%20Arabia&method=4');
-    if (!response.ok) throw new Error('Prayer API unavailable');
-    const { data } = await response.json();
-    const labels = { Fajr: 'الفجر', Dhuhr: 'الظهر', Asr: 'العصر', Maghrib: 'المغرب', Isha: 'العشاء' };
-    list.innerHTML = Object.entries(labels).map(([key, label]) => `<li><span>${label}</span><time>${data.timings[key]}</time></li>`).join('');
-    $('#hijriDate').textContent = `${data.date.hijri.weekday.ar}، ${data.date.hijri.day} ${data.date.hijri.month.ar} ${data.date.hijri.year} هـ`;
-  } catch (error) { $('#hijriDate').textContent = 'تعذر تحديث المواقيت حالياً'; console.warn(error); }
-}
-function playAudio(edition = 'ar.alafasy') {
-  const audio = $('#recitation');
-  const source = edition === 'ar.alafasy' ? verse.audio : `https://cdn.islamic.network/quran/audio/128/${edition}/${verse.number}.mp3`;
-  if (!source) return showModal('التلاوة', 'تجري تهيئة التلاوة، حاول مرة أخرى بعد لحظات.');
-  audio.src = source; audio.play().catch(() => showModal('التلاوة', 'يتطلب المتصفح تفاعلاً إضافياً لتشغيل الصوت.'));
-}
+let verse = { number: null, audio: '' };
+async function loadVerse() {
+  try {
+    const response = await fetch('https://api.alquran.cloud/v1/ayah/53:49/editions/ar.alafasy,ar.abdulbasitmurattal');
+    if (!response.ok) throw new Error('Quran API unavailable');
+    const { data } = await response.json();
+    const textEdition = data[0];
+    verse = { number: textEdition.number, audio: data[1]?.audio || textEdition.audio };
+    $('`#quranText`').textContent = textEdition.text;
+    $('`#quranRef`').textContent = `سورة ${textEdition.surah.name} — آية ${textEdition.numberInSurah}`;
+  } catch (error) { console.warn(error); }
+}
+async function loadPrayerTimes() {
+  const list = $('`#prayerList`');
+  try {
+    const response = await fetch('https://api.aladhan.com/v1/timingsByCity?city=Riyadh&country=Saudi%20Arabia&method=4');
+    if (!response.ok) throw new Error('Prayer API unavailable');
+    const { data } = await response.json();
+    const labels = { Fajr: 'الفجر', Dhuhr: 'الظهر', Asr: 'العصر', Maghrib: 'المغرب', Isha: 'العشاء' };
+    list.innerHTML = Object.entries(labels).map(([key, label]) => `<li><span>${label}</span><time>${data.timings[key]}</time></li>`).join('');
+    $('`#hijriDate`').textContent = `${data.date.hijri.weekday.ar}، ${data.date.hijri.day} ${data.date.hijri.month.ar} ${data.date.hijri.year} هـ`;
+  } catch (error) { $('`#hijriDate`').textContent = 'تعذر تحديث المواقيت حالياً'; console.warn(error); }
+}
+function playAudio(edition = 'ar.alafasy') {
+  if (!verse.number) return showModal('التلاوة', 'تجري تهيئة التلاوة، حاول مرة أخرى بعد لحظات.');
+  const audio = $('`#recitation`');
+  const source = edition === 'ar.alafasy' ? verse.audio : `https://cdn.islamic.network/quran/audio/128/${edition}/${verse.number}.mp3`;
+  if (!source) return showModal('التلاوة', 'تجري تهيئة التلاوة، حاول مرة أخرى بعد لحظات.');
+  audio.src = source; audio.play().catch(() => showModal('التلاوة', 'يتطلب المتصفح تفاعلاً إضافياً لتشغيل الصوت.'));
+}
-let verse = { number: 53, audio: '' };
-async function loadVerse() {
-  try {
-    const response = await fetch('https://api.alquran.cloud/v1/ayah/53:49/editions/ar.alafasy,ar.abdulbasitmurattal');
-    if (!response.ok) throw new Error('Quran API unavailable');
-    const { data } = await response.json();
-    const textEdition = data[0];
-    verse = { number: textEdition.number, audio: data[1]?.audio || textEdition.audio };
-    $('#quranText').textContent = textEdition.text;
-    $('#quranRef').textContent = `سورة ${textEdition.surah.name} — آية ${textEdition.numberInSurah}`;
-  } catch (error) { console.warn(error); }
-}
-async function loadPrayerTimes() {
-  const list = $('#prayerList');
-  try {
-    const response = await fetch('https://api.aladhan.com/v1/timingsByCity?city=Riyadh&country=Saudi%20Arabia&method=4');
-    if (!response.ok) throw new Error('Prayer API unavailable');
-    const { data } = await response.json();
-    const labels = { Fajr: 'الفجر', Dhuhr: 'الظهر', Asr: 'العصر', Maghrib: 'المغرب', Isha: 'العشاء' };
-    list.innerHTML = Object.entries(labels).map(([key, label]) => `<li><span>${label}</span><time>${data.timings[key]}</time></li>`).join('');
-    $('#hijriDate').textContent = `${data.date.hijri.weekday.ar}، ${data.date.hijri.day} ${data.date.hijri.month.ar} ${data.date.hijri.year} هـ`;
-  } catch (error) { $('#hijriDate').textContent = 'تعذر تحديث المواقيت حالياً'; console.warn(error); }
-}
-function playAudio(edition = 'ar.alafasy') {
-  const audio = $('#recitation');
-  const source = edition === 'ar.alafasy' ? verse.audio : `https://cdn.islamic.network/quran/audio/128/${edition}/${verse.number}.mp3`;
-  if (!source) return showModal('التلاوة', 'تجري تهيئة التلاوة، حاول مرة أخرى بعد لحظات.');
-  audio.src = source; audio.play().catch(() => showModal('التلاوة', 'يتطلب المتصفح تفاعلاً إضافياً لتشغيل الصوت.'));
-}
+let verse = { number: null, audio: '' };
+async function loadVerse() {
+  try {
+    const response = await fetch('https://api.alquran.cloud/v1/ayah/53:49/editions/ar.alafasy,ar.abdulbasitmurattal');
+    if (!response.ok) throw new Error('Quran API unavailable');
+    const { data } = await response.json();
+    const textEdition = data[0];
+    verse = { number: textEdition.number, audio: data[1]?.audio || textEdition.audio };
+    $('`#quranText`').textContent = textEdition.text;
+    $('`#quranRef`').textContent = `سورة ${textEdition.surah.name} — آية ${textEdition.numberInSurah}`;
+  } catch (error) { console.warn(error); }
+}
+async function loadPrayerTimes() {
+  const list = $('`#prayerList`');
+  try {
+    const response = await fetch('https://api.aladhan.com/v1/timingsByCity?city=Riyadh&country=Saudi%20Arabia&method=4');
+    if (!response.ok) throw new Error('Prayer API unavailable');
+    const { data } = await response.json();
+    const labels = { Fajr: 'الفجر', Dhuhr: 'الظهر', Asr: 'العصر', Maghrib: 'المغرب', Isha: 'العشاء' };
+    list.innerHTML = Object.entries(labels).map(([key, label]) => `<li><span>${label}</span><time>${data.timings[key]}</time></li>`).join('');
+    $('`#hijriDate`').textContent = `${data.date.hijri.weekday.ar}، ${data.date.hijri.day} ${data.date.hijri.month.ar} ${data.date.hijri.year} هـ`;
+  } catch (error) { $('`#hijriDate`').textContent = 'تعذر تحديث المواقيت حالياً'; console.warn(error); }
+}
+function playAudio(edition = 'ar.alafasy') {
+  if (!verse.number) return showModal('التلاوة', 'تجري تهيئة التلاوة، حاول مرة أخرى بعد لحظات.');
+  const audio = $('`#recitation`');
+  const source = edition === 'ar.alafasy' ? verse.audio : `https://cdn.islamic.network/quran/audio/128/${edition}/${verse.number}.mp3`;
+  if (!source) return showModal('التلاوة', 'تجري تهيئة التلاوة، حاول مرة أخرى بعد لحظات.');
+  audio.src = source; audio.play().catch(() => showModal('التلاوة', 'يتطلب المتصفح تفاعلاً إضافياً لتشغيل الصوت.'));
+}
+$('#listenButton').onclick = () => playAudio();
+document.addEventListener('click', (event) => { if (event.target.matches('.play')) playAudio(event.target.dataset.edition); });
+$('#refreshPrayer').onclick = loadPrayerTimes;
+$('#dhikrButton').onclick = () => showModal('أذكار اليوم', 'سبحان الله، والحمد لله، ولا إله إلا الله، والله أكبر. اجعل لسانك رطباً بذكر الله.');
+$('#zakatButton').onclick = () => showModal('حاسبة الزكاة', 'تجب الزكاة عند بلوغ النصاب وحولان الحول، ومقدارها ٢.٥٪ من المال الزكوي. استشر جهة إفتاء موثوقة للحالات الخاصة.');
+$('#qiblaButton').onclick = () => { window.open('https://qiblafinder.withgoogle.com/intl/ar/desktop', '_blank', 'noopener'); };
+$('#subscribeForm').onsubmit = (event) => { event.preventDefault(); event.target.reset(); showModal('تم الاشتراك', 'شكراً لك، سيصلك التذكير والمحتوى المفيد إلى بريدك قريباً.'); };
+loadVerse(); loadPrayerTimes();
diff --git a/index.html b/index.html
@@ -0,0 +1,55 @@
+<!doctype html>
+<html lang="ar" dir="rtl">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="theme-color" content="#061712" />
+  <title>الذاكرون | منصة إسلامية</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cairo:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="style.css" />
+</head>
+<body>
+  <div class="page-glow"></div>
+  <header class="topbar wrap">
+    <a class="brand" href="#home"><span class="brand-mark">۞</span><span>الذّاكِرون<small>منصة إسلامية عصرية هادفة</small></span></a>
+    <nav aria-label="التنقل الرئيسي"><a class="active" href="#home">الرئيسية</a><a href="#quran">القرآن الكريم</a><a href="#adhkar">الأذكار</a><a href="#prayer">مواقيت الصلاة</a><a href="#qibla">القبلة</a><a href="#articles">المقالات</a></nav>
+    <div class="header-actions"><button class="icon-button" aria-label="بحث">⌕</button><button class="language">العربية ◉</button></div>
+  </header>
+
+  <main id="home">
+    <section class="hero wrap">
+      <div class="hero-art" aria-label="مصحف وفانوس تحت هلال"><div class="moon"></div><div class="arch"></div><div class="lantern">✦</div><div class="quran-book">۞</div></div>
+      <div class="hero-copy">
+        <p class="eyebrow">بِسْمِ اللهِ الرَّحْمٰنِ الرَّحِيمِ</p>
+        <h1>الذّاكِرون</h1><h2>صدقة جارية مباركة</h2>
+        <p class="hero-verse" id="heroVerse">مَثَلُ الَّذِينَ يُنفِقُونَ أَمْوَالَهُمْ فِي سَبِيلِ اللَّهِ كَمَثَلِ حَبَّةٍ أَنْبَتَتْ سَبْعَ سَنَابِلَ</p>
+        <p class="verse-source" id="heroSource">سورة البقرة — ٢٦١</p>
+        <div class="hero-buttons"><a class="button gold" href="#donate">♡ ادعم بصدقة جارية</a><a class="button green" href="#quran">استكشف المزيد ۞</a></div>
+      </div>
+      <aside class="goodness-card"><span class="sprout">♧</span><h3>ساهم في نشر الخير</h3><p>كن سبباً في هداية قلب أو علمٍ ينتفع به، وهو صدقة جارية لا تنقطع بإذن الله.</p><a href="#donate">تعرّف على مشاريعنا</a></aside>
+    </section>
+
+    <section class="feature-strip wrap" aria-label="أقسام المنصة"><a href="#quran">▣<span>نشر القرآن</span></a><a href="#donate">♜<span>دعم المشاريع</span></a><a href="#donate">♧<span>كفالة المحتاجين</span></a><a href="#donate">♧<span>بناء المستقبل</span></a><a href="#articles">▤<span>نشر العلم</span></a></section>
+
+    <section class="dashboard wrap">
+      <article class="card readers"><div class="card-title"><h2>أشهر القراء</h2><a href="#quran">عرض الكل ‹</a></div><div id="readersList"></div></article>
+      <article class="card quran-card" id="quran"><div class="quran-cover">۞</div><div><h2>القرآن الكريم <span>▣</span></h2><blockquote id="quranText">وَأَنَّهُ هُوَ رَبُّ الشِّعْرَىٰ</blockquote><p id="quranRef">سورة النجم — ٤٩</p><div class="quran-actions"><button class="button gold" id="listenButton">▶ استمع للآية</button><a class="button ghost" target="_blank" rel="noreferrer" href="https://quran.com">المصحف كامل</a></div></div></article>
+      <article class="card prayer-card" id="prayer"><div class="card-title"><h2>مواقيت الصلاة</h2><span class="location" id="prayerLocation">الرياض، السعودية</span></div><div class="date" id="hijriDate">جاري التحديث…</div><ul id="prayerList"><li><span>الفجر</span><time>--:--</time></li><li><span>الظهر</span><time>--:--</time></li><li><span>العصر</span><time>--:--</time></li><li><span>المغرب</span><time>--:--</time></li><li><span>العشاء</span><time>--:--</time></li></ul><button class="full-link" id="refreshPrayer">↻ تحديث المواقيت</button></article>
+    </section>
+
+    <section class="tiles wrap" id="articles">
+      <article class="tile article"><span class="tile-visual">✒</span><div><h2>المقالات</h2><p>مقالات إسلامية مفيدة لتنير قلبك وعقلك</p><a class="button green" href="https://islamqa.info/ar" target="_blank" rel="noreferrer">قراءة المقالات</a></div></article>
+      <article class="tile qibla" id="qibla"><span class="tile-visual">⌁</span><div><h2>القبلة</h2><p>حدد اتجاه القبلة بدقة أينما كنت</p><button class="button green" id="qiblaButton">عرض القبلة ◉</button></div></article>
+      <article class="tile adhkar" id="adhkar"><span class="tile-visual">◌</span><div><h2>الأذكار</h2><p>أذكار الصباح والمساء والأذكار اليومية</p><button class="button green" id="dhikrButton">استعرض الأذكار</button></div></article>
+      <article class="tile charity" id="donate"><span class="tile-visual">♧</span><div><h2>الزكاة والصدقة</h2><p>احسب زكاتك وتبرع بسهولة للمشاريع الخيرية الموثوقة</p><button class="button green" id="zakatButton">احسب الزكاة</button></div></article>
+    </section>
+
+    <section class="newsletter wrap"><div class="mail">✉</div><div><h2>اشترك في نشرتنا البريدية</h2><p>احصل على آيات يومية وأحاديث وتذكير بمحتوى إسلامي مفيد</p></div><form id="subscribeForm"><input required type="email" aria-label="بريدك الإلكتروني" placeholder="أدخل بريدك الإلكتروني"><button class="button gold">اشترك الآن</button></form></section>
+  </main>
+  <footer class="wrap"><div class="footer-brand brand"><span class="brand-mark">۞</span><span>الذّاكِرون<small>منصة إسلامية تهدف إلى نشر الذكر وتعليم القرآن ودعم المشاريع الخيرية</small></span></div><div><h3>المشاريع</h3><a href="#donate">المشاريع الحالية</a><a href="#donate">تقارير المشاريع</a><a href="#donate">كن شريكاً</a></div><div><h3>روابط سريعة</h3><a href="#quran">القرآن الكريم</a><a href="#adhkar">الأذكار</a><a href="#prayer">مواقيت الصلاة</a></div><div><h3>المزيد</h3><a href="#home">عن الذاكرون</a><a href="#articles">اتصل بنا</a><a href="#articles">سياسة الخصوصية</a></div><p class="copyright">جميع الحقوق محفوظة © ٢٠٢۶ الذّاكرون ♥</p></footer>
+  <dialog id="modal"><button class="close" aria-label="إغلاق">×</button><div id="modalContent"></div></dialog><audio id="recitation" preload="none"></audio>
+  <script src="app.js"></script>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "aldhakiroun",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": { "start": "vite --host 0.0.0.0", "build": "vite", "preview": "vite preview --host 0.0.0.0" },
-  "scripts": { "start": "vite --host 0.0.0.0", "build": "vite", "preview": "vite preview --host 0.0.0.0" },
+  "scripts": { "start": "vite --host 0.0.0.0", "build": "vite build", "preview": "vite preview --host 0.0.0.0" },
-  "scripts": { "start": "vite --host 0.0.0.0", "build": "vite", "preview": "vite preview --host 0.0.0.0" },
+  "scripts": { "start": "vite --host 0.0.0.0", "build": "vite build", "preview": "vite preview --host 0.0.0.0" },
+  "devDependencies": { "vite": "^6.1.0" }
+}
diff --git a/style.css b/style.css