Upload index.html

index.html

@@ -137,11 +137,47 @@ body{padding-bottom:190px}
 .now-marker-label{position:absolute;top:0;left:0;width:270px;max-width:calc(100vw - 32px);white-space:pre-line;text-align:center;line-height:1.65;background:var(--cell-surface);border:1px solid currentColor;border-radius:8px;padding:4px;direction:rtl}
 .personal-hour{pointer-events:auto;z-index:3;border:1px solid var(--cell-border);border-radius:5px;color:inherit;background:var(--cell-surface);font:inherit;cursor:pointer}
 #reminderNotice{position:fixed;top:8px;left:12px;right:12px;z-index:2900;max-height:24vh;overflow:auto;margin:0;border:2px solid currentColor}#reminderDialogNotice{flex-shrink:0;padding:12px;font:inherit;background:var(--cell-surface);color:inherit;border:2px solid currentColor;max-height:20vh;overflow:auto}#reminderDialogNotice[hidden]{display:none}
+/* Simulation stays in document flow, below dialogs and reminder notices. */
+#celestialSection{margin:16px 0 24px}
+#celestialSection h2{font-size:1.1rem;margin:0 0 10px}
+#celestialControls{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
+#celestialControls button{font:inherit;min-height:44px;padding:8px 12px;border:1px solid var(--cell-border,#888);border-radius:8px;background:var(--cell-surface,#fff);color:inherit;cursor:pointer}
+#celestialControls button:disabled{opacity:.6;cursor:default}
+#celestialScene{position:relative;height:240px;overflow:hidden;isolation:isolate;direction:ltr}
+#celestialScene[hidden]{display:none}
+.celestial-body{position:absolute;border-radius:50%;pointer-events:none;opacity:0}
+#celestialSun{background:#ffd45c;box-shadow:0 0 20px #ffd45c99}
+#celestialGround{position:absolute;inset:82% 0 0;background:#477552;border-top:1px solid #ffffff80;pointer-events:none}
+#celestialStick{position:absolute;left:50%;bottom:18%;height:38px;width:5px;background:#eee;z-index:1}
+#celestialShadow{position:absolute;left:50%;bottom:18%;height:5px;background:#111;transform-origin:left center}
+#celestialQibla{position:absolute;left:50%;top:50%;width:36px;height:40px;background:#191919;border:1px solid #eee;border-radius:3px;pointer-events:none}
+#celestialQibla::before{content:"";position:absolute;left:0;right:0;top:8px;height:6px;background:#d7b56d}
+#celestialInfo,#celestialLocation,#celestialStatus{margin:8px 0;line-height:1.7;overflow-wrap:anywhere;white-space:pre-line;font-size:14px}
+#celestialStatus:empty{display:none}
 </style>
 </head>
 <body>
 <main>
 <h1 data-ui="title"></h1>
+<section id="celestialSection" aria-labelledby="celestialTitle">
+  <h2 id="celestialTitle">محاكاة الشمس والقمر والقبلة</h2>
+  <div id="celestialScene" hidden role="img" aria-label="محاكاة السماء حسب الموقع والوقت الحالي">
+    <div id="celestialSun" class="celestial-body"></div>
+    <div id="celestialMoon" class="celestial-body"></div>
+    <div id="celestialGround"></div>
+    <div id="celestialShadow"></div>
+    <div id="celestialStick"></div>
+    <div id="celestialQibla" hidden></div>
+  </div>
+  <p id="celestialLocation"></p>
+  <p id="celestialInfo"></p>
+  <div id="celestialControls">
+    <button id="celestialLocate" type="button" disabled>تحديد موقع المحاكاة</button>
+    <button id="celestialCompass" type="button" disabled>تفعيل اتجاه القبلة</button>
+    <button id="celestialRetry" type="button" hidden>إعادة المحاولة</button>
+  </div>
+  <p id="celestialStatus" role="status">جارٍ تحميل المحاكاة...</p>
+</section>
 <div class="timeline-navigation"><span id="timelineDates"></span> <button id="timelineToday" type="button" data-ui="timelineToday" hidden></button></div>
 <div id="shell" class="ruler-shell" data-aria="ruler">
   <div id="ruler" class="ruler"></div>
@@ -176,5 +212,211 @@ body{padding-bottom:190px}
 <script src="hijri_calendar_engine.js?v=20260926-worship1"></script>
 <script src="worship_event_engine.js?v=20260926-worship1"></script>
 <script src="registry_app.js?v=20260927-markers2"></script>
+<script>
+(function () {
+  "use strict";
+  const byId = (id) => document.getElementById(id);
+  const scene = byId("celestialScene");
+  const status = byId("celestialStatus");
+  const locate = byId("celestialLocate");
+  const compass = byId("celestialCompass");
+  const retry = byId("celestialRetry");
+  const locationLabel = byId("celestialLocation");
+  let controller;
+  let timer;
+  let compassTimer;
+  let compassActive = false;
+  let compassListening = false;
+  let loading = false;
+  let loadAttempt = 0;
+
+  function validLocation(value) {
+    return value && Number.isFinite(value.lat) && Number.isFinite(value.lng)
+      && Math.abs(value.lat) <= 90 && Math.abs(value.lng) <= 180;
+  }
+
+  function initialLocation() {
+    const provided = window.MUSLIM_CLOCK_LOCATION || window.ISLAMIC_CLOCK_LOCATION;
+    if (validLocation(provided)) return { value: provided, label: "موقع المحاكاة: موقع التطبيق" };
+    try {
+      const saved = JSON.parse(localStorage.getItem("muslim_clock_location"));
+      if (validLocation(saved)) return { value: saved, label: "موقع المحاكاة: الموقع المحفوظ" };
+    } catch (_) { /* Storage can be unavailable in embedded browsers. */ }
+    return { value: { lat: 31.9539, lng: 35.9106 }, label: "موقع المحاكاة الافتراضي: عمّان (لم يُحدَّد موقع الجهاز)" };
+  }
+
+  function showLocation(value, label) {
+    locationLabel.textContent = `${label} · ${value.lat.toFixed(4)}, ${value.lng.toFixed(4)}`;
+  }
+
+  function update() {
+    if (!controller) return;
+    try {
+      controller.update();
+    } catch (error) {
+      status.textContent = "تعذر تحديث المحاكاة. أعد المحاولة.";
+      retry.hidden = false;
+      console.error("Celestial simulation update:", error);
+    }
+  }
+
+  async function boot() {
+    if (loading) return;
+    loading = true;
+    retry.hidden = true;
+    status.textContent = "جارٍ تحميل المحاكاة...";
+    try {
+      if (!window.CelestialSimulation) {
+        try {
+          // Module scope prevents collisions with the existing solar engine.
+          await import(`./celestial_simulation.js?v=20260928-integration1&attempt=${++loadAttempt}`);
+          if (!window.CelestialSimulation) throw new Error("Missing simulation API");
+        } catch (_) {
+          throw new Error("تعذر تحميل celestial_simulation.js. تأكد من وجوده بجانب index.html وبالاسم نفسه، دون .txt.");
+        }
+      }
+      let registry;
+      try {
+        const response = await fetch("./sky_simulation_registry.json", { cache: "no-store" });
+        if (!response.ok) throw new Error("Registry HTTP " + response.status);
+        registry = await response.json();
+        if (!Array.isArray(registry.sky_color_model?.gradient_stops)
+          || !registry.sky_color_model.gradient_stops.length || !registry.objects) {
+          throw new Error("Invalid sky registry");
+        }
+      } catch (_) {
+        throw new Error("تعذر قراءة sky_simulation_registry.json. تأكد من اسمه ووجوده بجانب index.html وصحة محتواه.");
+      }
+      const api = window.CelestialSimulation;
+      const renderer = new api.SkySimulationRenderer({
+        container: scene, sun: byId("celestialSun"), moon: byId("celestialMoon"),
+        shadow: byId("celestialShadow"), info: byId("celestialInfo"),
+        kaaba: byId("celestialQibla")
+      }, registry);
+      const render = renderer.render.bind(renderer);
+      renderer.render = (state) => {
+        render(state);
+        // Keep projected discs fully inside the scene at east/west edges.
+        for (const id of ["celestialSun", "celestialMoon"]) {
+          const element = byId(id);
+          const inset = parseFloat(element.style.width) / 2 + 2;
+          element.style.left = `clamp(${inset}px, ${element.style.left}, calc(100% - ${inset}px))`;
+        }
+        const qibla = byId("celestialQibla");
+        qibla.hidden = !state.compassEnabled;
+        if (!state.compassEnabled) qibla.title = "اتجاه الهاتف غير متاح";
+        scene.setAttribute("aria-label", byId("celestialInfo").textContent);
+      };
+      const selected = controller
+        ? { value: controller.location, label: "موقع المحاكاة الحالي" }
+        : initialLocation();
+      const oldHeading = controller?.headingDeg;
+      controller = new api.CelestialSimulationController({ location: selected.value, registry, renderer });
+      if (Number.isFinite(oldHeading)) controller.setHeading(oldHeading);
+      window.MuslimClockCelestialController = controller;
+      showLocation(selected.value, selected.label);
+      scene.hidden = false;
+      controller.update();
+      clearInterval(timer);
+      timer = setInterval(update, 60000);
+      locate.disabled = false;
+      compass.disabled = compassListening;
+      status.textContent = "";
+    } catch (error) {
+      status.textContent = error.message;
+      retry.hidden = false;
+    } finally {
+      loading = false;
+    }
+  }
+
+  locate.addEventListener("click", () => {
+    if (!navigator.geolocation) {
+      status.textContent = "تحديد الموقع غير متاح في هذا المتصفح.";
+      return;
+    }
+    locate.disabled = true;
+    status.textContent = "جارٍ تحديد موقع الجهاز للمحاكاة...";
+    navigator.geolocation.getCurrentPosition((position) => {
+      const location = { lat: position.coords.latitude, lng: position.coords.longitude };
+      controller.setLocation(location);
+      showLocation(location, "موقع المحاكاة: موقع الجهاز");
+      status.textContent = "";
+      locate.disabled = false;
+      update();
+    }, () => {
+      status.textContent = "تعذر تحديد الموقع أو لم يُمنح الإذن. بقي الموقع المبين أعلاه دون تغيير.";
+      locate.disabled = false;
+    }, { enableHighAccuracy: true, timeout: 15000, maximumAge: 60000 });
+  });
+
+  function orientation(event) {
+    // Relative alpha is not a north-referenced compass bearing.
+    const heading = Number.isFinite(event.webkitCompassHeading)
+      ? event.webkitCompassHeading
+      : event.absolute && Number.isFinite(event.alpha) ? 360 - event.alpha : null;
+    if (!Number.isFinite(heading) || !controller) return;
+    clearTimeout(compassTimer);
+    if (!compassActive) {
+      compassActive = true;
+      status.textContent = "";
+      compass.textContent = "اتجاه القبلة مفعّل";
+    }
+    controller.setHeading(heading);
+    // Reproject the current snapshot without repeating astronomy on every sensor event.
+    const state = controller.lastState;
+    if (state) {
+      state.headingDeg = controller.headingDeg;
+      state.compassEnabled = true;
+      state.qibla = window.CelestialSimulation.QiblaEngine.calculate(controller.location,
+        controller.headingDeg, { alignmentThresholdDeg: controller.registry.objects.kaaba?.alignment_threshold_deg });
+      controller.renderer.render(state);
+    }
+  }
+
+  compass.addEventListener("click", async () => {
+    if (!window.isSecureContext || typeof DeviceOrientationEvent === "undefined") {
+      status.textContent = "حساس الاتجاه غير متاح. افتح التطبيق عبر HTTPS على هاتف يدعم البوصلة.";
+      return;
+    }
+    compass.disabled = true;
+    try {
+      if (typeof DeviceOrientationEvent.requestPermission === "function"
+        && await DeviceOrientationEvent.requestPermission() !== "granted") {
+        throw new Error("لم يُمنح إذن حساس الاتجاه.");
+      }
+      if (!compassListening) {
+        window.addEventListener("deviceorientationabsolute", orientation, true);
+        window.addEventListener("deviceorientation", orientation, true);
+        compassListening = true;
+      }
+      status.textContent = "بانتظار قراءة بوصلة الهاتف...";
+      compassTimer = setTimeout(() => {
+        if (compassActive) return;
+        window.removeEventListener("deviceorientationabsolute", orientation, true);
+        window.removeEventListener("deviceorientation", orientation, true);
+        compassListening = false;
+        compass.disabled = false;
+        status.textContent = "لم تصل قراءة اتجاه مطلقة. يبقى اتجاه القبلة الرقمي معروضًا؛ جرّب فتح التطبيق مباشرة خارج الإطار.";
+      }, 8000);
+    } catch (error) {
+      compass.disabled = false;
+      status.textContent = error.message || "تعذر تفعيل البوصلة.";
+    }
+  });
+
+  retry.addEventListener("click", boot);
+  document.addEventListener("visibilitychange", () => {
+    if (!document.hidden) update();
+  });
+  window.addEventListener("muslim-clock-location-change", (event) => {
+    if (!controller || !validLocation(event.detail)) return;
+    controller.setLocation(event.detail);
+    showLocation(event.detail, "موقع المحاكاة: موقع التطبيق");
+    update();
+  });
+  boot();
+})();
+</script>
 </body>
 </html>