Upload index.html

index.html

@@ -350,13 +350,42 @@ small.muted{opacity:.7; display:block; margin-top:6px;}
 .popup-limit-row input{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,.18);background:#29293b;color:#fff}
 .radio-status{font-size:12px;opacity:.82;margin-top:8px}
 
+
+/* ===== FINAL always-horizontal timeline viewport ===== */
+.timeline-periods{
+  display:flex!important; flex-wrap:nowrap!important; overflow-x:auto!important;
+  overflow-y:hidden!important; gap:10px!important; scroll-snap-type:x proximity;
+  -webkit-overflow-scrolling:touch; padding:4px 2px 10px;
+}
+.timeline-period{
+  flex:0 0 min(82vw,460px)!important; width:min(82vw,460px)!important;
+  min-width:min(82vw,460px)!important; scroll-snap-align:center; margin:0!important;
+}
+@media (min-width:700px){
+ .timeline-period{flex-basis:min(46vw,520px)!important;width:min(46vw,520px)!important;min-width:min(46vw,520px)!important}
+}
+/* cancel prior landscape grid compression */
+@media (orientation:landscape) and (min-width:640px){
+ .container{display:block!important;max-width:1100px!important;width:100%!important;padding:10px!important}
+ .container>header,#smartTicker,.container>.timeline-v2{position:static!important;display:block!important;margin-top:initial!important}
+ .timeline-periods{display:flex!important;grid-template-columns:none!important}
+ .timeline-period{min-width:min(46vw,520px)!important}
+}
+/* stable astronomical simulation */
+.direction-object{transition:transform .28s linear,left .28s linear,top .28s linear}
+.date-dual{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;font-size:13px;opacity:.9;margin:4px 0 8px}
+
 </style>
 </head>
 <body>
 
 <div class="container">
   <header>
-    <h1>الخط الزمني الروحي</h1>
+    <h1>الخط الزمني الروحي</h1><div class="date-dual" aria-live="polite">
+      <span id="gregorianDate" aria-label="التاريخ الميلادي"></span>
+      <span aria-hidden="true">•</span>
+      <span id="hijriDate" aria-label="التاريخ الهجري"></span>
+    </div>
     <p id="date-display">جاري تحميل التاريخ...</p>
     <div id="moon-container"></div>
     <div class="location-row">
@@ -811,6 +840,7 @@ function updateQiblaUI(){
   qiblaAngleFromNorth = getQiblaDirection(currentLocation.lat, currentLocation.lng);
   document.getElementById('qiblaAngleText').innerText = `زاوية القبلة: ${qiblaAngleFromNorth.toFixed(0)}° من الشمال`;
 }
+let smoothedHeadingDeg=null;
 let deviceHeadingDeg = null;
 let compassListenerInstalled = false;
 
@@ -1469,7 +1499,7 @@ function initApp(){
   setInterval(refreshEverything, 5*60*1000); // تحديث المواقيت والتنبيهات كل 5 دقائق
 }
 
-window.addEventListener('DOMContentLoaded', ()=>{initApp();setTimeout(()=>loadIslamicRadios(false),800)});
+window.addEventListener('DOMContentLoaded', ()=>{initApp();updateDualDate();auditSettingsAccessibility();setTimeout(()=>{loadIslamicRadios(false);auditSettingsAccessibility()},800);setInterval(updateDualDate,60000)});
 </script>
 
 <script>
@@ -2544,6 +2574,36 @@ if ('serviceWorker' in navigator) {
       .catch(err => console.warn('Service Worker registration failed:', err));
   });
 }
+
+function auditSettingsAccessibility(){
+  const root=document.getElementById('settingsModal')||document;
+  root.querySelectorAll('input,select,textarea,button').forEach((el,i)=>{
+    if(el.getAttribute('aria-label')||el.getAttribute('aria-labelledby'))return;
+    let txt='';
+    if(el.id){
+      const lab=root.querySelector(`label[for="${CSS.escape(el.id)}"]`);
+      if(lab)txt=lab.textContent.trim();
+    }
+    if(!txt){
+      const lab=el.closest('label'); if(lab)txt=lab.textContent.trim();
+    }
+    if(!txt){
+      const row=el.closest('.setting-row,.settings-row,.registry-setting-row,.toggle-row,.popup-limit-row');
+      if(row)txt=(row.querySelector('label,.setting-label,strong,span')?.textContent||'').trim();
+    }
+    if(!txt && el.title)txt=el.title;
+    if(txt)el.setAttribute('aria-label',txt.replace(/\s+/g,' ').slice(0,140));
+  });
+}
+function updateDualDate(){
+ const now=new Date(),g=document.getElementById('gregorianDate'),h=document.getElementById('hijriDate');
+ try{
+  const gs=new Intl.DateTimeFormat('ar-JO',{weekday:'long',year:'numeric',month:'long',day:'numeric',calendar:'gregory'}).format(now);
+  const hs=new Intl.DateTimeFormat('ar-SA-u-ca-islamic',{year:'numeric',month:'long',day:'numeric'}).format(now);
+  if(g){g.textContent=gs;g.setAttribute('aria-label','التاريخ الميلادي: '+gs)}
+  if(h){h.textContent=hs;h.setAttribute('aria-label','التاريخ الهجري: '+hs)}
+ }catch(e){}
+}
 </script>
 
 </body>