integration_example.html

<!doctype html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>تجربة محاكاة السماء والقبلة</title>
  <style>
    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: #071326;
      color: #fff;
    }

    .sky {
      position: relative;
      min-height: 100vh;
      overflow: hidden;
      transition: background 900ms linear;
    }

    .sun,
    .moon,
    .kaaba {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: left 900ms linear, top 900ms linear, opacity 500ms linear;
    }

    .sun {
      background: #ffd45c;
      box-shadow: 0 0 36px rgba(255, 212, 92, .72);
    }

    .kaaba {
      right: 24px;
      bottom: 82px;
      left: auto;
      top: auto;
      width: 54px;
      height: 54px;
      border-radius: 8px;
      background: linear-gradient(180deg, #191919, #050505);
      border: 3px solid #d7b56d;
    }

    .shadow-base {
      position: absolute;
      right: 50%;
      bottom: 86px;
      width: 10px;
      height: 64px;
      background: rgba(255, 255, 255, .72);
      border-radius: 8px;
    }

    .shadow {
      position: absolute;
      right: calc(50% + 4px);
      bottom: 86px;
      height: 10px;
      width: 80px;
      background: rgba(0, 0, 0, .42);
      border-radius: 999px;
      transform-origin: right center;
      transition: width 900ms linear, transform 900ms linear, opacity 500ms linear;
    }

    .horizon {
      position: absolute;
      inset-inline: 0;
      bottom: 0;
      height: 105px;
      background: linear-gradient(180deg, rgba(38, 79, 56, .2), rgba(21, 73, 45, .9));
    }

    .info {
      position: absolute;
      inset-inline: 16px;
      bottom: 16px;
      padding: 12px 14px;
      border-radius: 8px;
      background: rgba(0, 0, 0, .42);
      backdrop-filter: blur(8px);
      line-height: 1.7;
      font-size: 14px;
    }

    .controls {
      position: absolute;
      top: 16px;
      inset-inline: 16px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }

    button {
      border: 0;
      border-radius: 8px;
      padding: 10px 12px;
      font: inherit;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <main id="sky" class="sky">
    <div class="controls">
      <button id="enableCompass">تفعيل اتجاه الهاتف</button>
    </div>
    <div id="sun" class="sun"></div>
    <div id="moon" class="moon"></div>
    <div id="kaaba" class="kaaba" title="محاكاة اتجاه القبلة"></div>
    <div class="shadow-base"></div>
    <div id="shadow" class="shadow"></div>
    <div class="horizon"></div>
    <div id="info" class="info">جاري تشغيل المحاكاة...</div>
  </main>

  <script src="./celestial_simulation.js"></script>
  <script>
    async function main() {
      const registry = await fetch("./sky_simulation_registry.json").then((response) => response.json());
      const renderer = new CelestialSimulation.SkySimulationRenderer({
        container: document.getElementById("sky"),
        sun: document.getElementById("sun"),
        moon: document.getElementById("moon"),
        kaaba: document.getElementById("kaaba"),
        shadow: document.getElementById("shadow"),
        info: document.getElementById("info")
      }, registry);

      const controller = new CelestialSimulation.CelestialSimulationController({
        location: { lat: 31.9539, lng: 35.9106 },
        registry,
        renderer
      });

      controller.start({ intervalMs: 60000 });
      document.getElementById("enableCompass").addEventListener("click", () => {
        controller.enableCompass((message) => {
          document.getElementById("info").textContent = message;
        });
      });
    }

    main();
  </script>
</body>
</html>