<div id="prayerApp"> <style> @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700;900&display=swap'); #prayerApp{ font-family:'Cairo',sans-serif; direction:rtl; max-width:1100px; margin:auto; padding:30px; border-radius:30px; background:linear-gradient(135deg,#fffaf2,#eefaff); box-shadow:0 15px 50px rgba(0,0,0,.08); overflow:hidden; } .top{text-align:center;margin-bottom:25px} .clock{ font-size:58px; font-weight:900; color:#ff6b00; } .city{ font-size:26px; font-weight:700; color:#222; margin:10px 0; } .hijri{ font-size:18px; color:#666; } .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px; margin-top:30px; } .card{ background:#fff; padding:22px; border-radius:22px; text-align:center; box-shadow:0 10px 25px rgba(0,0,0,.08); transition:.3s; } .card:hover{ transform:translateY(-8px) scale(1.03); } .name{ font-size:22px; font-weight:700; color:#333; } .time{ font-size:28px; font-weight:900; color:#ff6b00; margin-top:12px; } .next{ margin-top:28px; padding:22px; border-radius:22px; background:linear-gradient(90deg,#ff9800,#ff5722); color:#fff; text-align:center; font-size:24px; font-weight:800; } .countdown{ margin-top:12px; font-size:19px; } @media(max-width:768px){ .clock{font-size:38px} .city{font-size:20px} } </style> <div class="top"> <div class="clock" id="clock"></div> <div class="city">القاهرة - مصر</div> <div class="hijri" id="hijri"></div> </div> <div class="grid" id="times"></div> <div class="next"> <div id="nextPrayer"></div> <div class="countdown" id="countdown"></div> </div> </div> <script> const prayers=[ ['الفجر','Fajr'], ['الشروق','Sunrise'], ['الظهر','Dhuhr'], ['العصر','Asr'], ['المغرب','Maghrib'], ['العشاء','Isha'] ]; let nextPrayerTime=null; function egyptNow(){ const utc=new Date( new Date().getTime()+new Date().getTimezoneOffset()*60000 ); return new Date(utc.getTime()+3*60*60*1000); } function updateClock(){ let now=egyptNow(); let h=now.getHours(); let m=now.getMinutes(); let s=now.getSeconds(); let ampm=h>=12?'م':'ص'; h=h%12||12; document.getElementById('clock').innerHTML= `${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')} ${ampm}`; if(nextPrayerTime){ let diff=nextPrayerTime-egyptNow(); if(diff>0){ let hrs=Math.floor(diff/1000/60/60); let mins=Math.floor(diff/1000/60)%60; let secs=Math.floor(diff/1000)%60; document.getElementById('countdown').innerHTML= `${hrs} ساعة ${mins} دقيقة ${secs} ثانية`; } } } setInterval(updateClock,1000); async function loadPrayer(){ let res=await fetch( 'https://api.aladhan.com/v1/timingsByCity?city=Cairo&country=Egypt&method=5' ); let data=await res.json(); let t=data.data.timings; document.getElementById('hijri').innerHTML= 'التاريخ الهجري: '+data.data.date.hijri.date; let html=''; prayers.forEach(([ar,en])=>{ html+=` <div class="card"> <div class="name">${ar}</div> <div class="time">${t[en]}</div> </div>`; }); document.getElementById('times').innerHTML=html; findNextPrayer(t); updateClock(); } function findNextPrayer(t){ let now=egyptNow(); for(let [ar,en] of prayers){ let [h,m]=t[en].split(':'); let prayer=egyptNow(); prayer.setHours(h,m,0,0); if(prayer>now){ nextPrayerTime=prayer; document.getElementById('nextPrayer').innerHTML= 'الصلاة القادمة: '+ar; return; } } document.getElementById('nextPrayer').innerHTML= 'انتهت صلوات اليوم'; } loadPrayer(); </script>
