<div id="prayerX"> <style> @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700;900&display=swap'); #prayerX{ font-family:'Cairo',sans-serif; direction:rtl; max-width:1100px; margin:auto; padding:25px; border-radius:28px; transition:.7s; box-shadow:0 20px 60px rgba(0,0,0,.12); background:linear-gradient(135deg,#fff7ed,#eef7ff); } .top{text-align:center} .clock{ font-size:60px; font-weight:900; color:#ff5e00; letter-spacing:1px; } .city{ font-size:22px; font-weight:700; margin-top:8px; color:#333; } .hijri{ color:#666; margin-top:5px; } .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:15px; margin-top:25px; } .card{ background:#fff; padding:18px; border-radius:18px; text-align:center; box-shadow:0 8px 25px rgba(0,0,0,.08); transition:.3s; } .card:hover{ transform:translateY(-6px); } .name{font-weight:700} .time{font-size:26px;font-weight:900;color:#ff5e00;margin-top:10px} .next{ margin-top:20px; padding:18px; border-radius:18px; background:linear-gradient(90deg,#ff9800,#ff5722); color:#fff; font-size:20px; font-weight:800; text-align:center; } .qibla{ margin-top:15px; background:#111; color:#fff; padding:14px; border-radius:12px; text-align:center; font-size:14px; } </style> <div class="top"> <div class="clock" id="clock"></div> <div class="city" id="city">جاري تحديد الموقع...</div> <div class="hijri" id="hijri"></div> </div> <div class="grid" id="times"></div> <div class="next" id="next"></div> <div class="qibla" id="qibla"></div> <audio id="adhan" src="https://www.soundjay.com/misc/sounds/bell-ringing-05.mp3"></audio> </div> <script> const prayers=[ ['الفجر','Fajr'], ['الشروق','Sunrise'], ['الظهر','Dhuhr'], ['العصر','Asr'], ['المغرب','Maghrib'], ['العشاء','Isha'] ]; let nextPrayerTime=null; let lastPrayerName=""; function nowEgypt(){ const utc=new Date(new Date().getTime()+new Date().getTimezoneOffset()*60000); return new Date(utc.getTime()+3*60*60*1000); } /* CLOCK */ function updateClock(){ let n=nowEgypt(); let h=n.getHours(); let m=n.getMinutes(); let s=n.getSeconds(); let ap=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')} ${ap}`; } setInterval(updateClock,1000); updateClock(); /* LOAD PRAYER TIMES */ async function load(lat,lon){ let url=`https://api.aladhan.com/v1/timings?latitude=${lat}&longitude=${lon}&method=5`; let res=await fetch(url); let data=await res.json(); let t=data.data.timings; document.getElementById('city').innerHTML= data.data.meta.timezone || "Egypt"; document.getElementById('hijri').innerHTML= "التاريخ الهجري: "+data.data.date.hijri.date; /* render cards */ 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; /* next prayer */ setNextPrayer(t); } /* NEXT PRAYER */ function setNextPrayer(t){ let now=nowEgypt(); for(let [ar,en] of prayers){ let [h,m]=t[en].split(':'); let d=nowEgypt(); d.setHours(h,m,0,0); if(d>now){ nextPrayerTime=d; lastPrayerName=ar; document.getElementById('next').innerHTML= "الصلاة القادمة: "+ar; return; } } document.getElementById('next').innerHTML="انتهت صلوات اليوم"; } /* LIVE COUNTDOWN */ setInterval(()=>{ if(!nextPrayerTime) return; let diff=nextPrayerTime-nowEgypt(); if(diff<=0) return; let h=Math.floor(diff/1000/60/60); let m=Math.floor(diff/1000/60)%60; let s=Math.floor(diff/1000)%60; document.getElementById('next').innerHTML= `الصلاة القادمة: ${lastPrayerName} — ${h}:${m}:${s}`; },1000); /* GEO LOCATION */ navigator.geolocation.getCurrentPosition( pos=>{ load(pos.coords.latitude,pos.coords.longitude); calcQibla(pos.coords.latitude,pos.coords.longitude); }, err=>{ // fallback Cairo load(30.0444,31.2357); calcQibla(30.0444,31.2357); } ); /* QIBLA */ function calcQibla(lat,lon){ let qiblaDir = Math.round( Math.atan2( Math.sin((39.826-lon)*Math.PI/180), Math.cos(lat*Math.PI/180)*Math.tan(21.422) - Math.sin(lat*Math.PI/180)*Math.cos((39.826-lon)*Math.PI/180) )*180/Math.PI ); document.getElementById('qibla').innerHTML= "اتجاه القبلة: "+qiblaDir+"° من الشمال"; } </script>
