<!doctype html>
<html lang="ar" dir="rtl">

<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
  <title>منصة LMS التعليمية</title>

  <!-- Preconnect للـ API عشان نكسب milliseconds على handshake -->
  <link rel="preconnect" href="https://api.modres.space" crossorigin />
  <link rel="dns-prefetch" href="https://api.modres.space" />

  <!-- PWA Meta Tags -->
  <link rel="manifest" href="/manifest.json" />
  <meta name="theme-color" content="#6366f1" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  <meta name="apple-mobile-web-app-title" content="LMS" />
  <link rel="apple-touch-icon" href="/icons/icon-192x192.svg" />
  <meta name="application-name" content="LMS" />
  <meta name="msapplication-TileColor" content="#6366f1" />

  <!-- Google Fonts - Arabic Fonts -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Tajawal:wght@300;400;500;700;800;900&family=Amiri:ital,wght@0,400;0,700;1,400;1,700&family=Noto+Sans+Arabic:wght@300;400;500;600;700;800;900&family=Almarai:wght@300;400;700;800&family=Changa:wght@300;400;500;600;700;800&family=El+Messiri:wght@400;500;600;700&family=Harmattan:wght@400;700&family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Lateef:wght@400;700;800&family=Markazi+Text:wght@400;500;600;700&family=Reem+Kufi:wght@400;500;600;700&family=Scheherazade+New:wght@400;700&display=swap"
    rel="stylesheet">

  <style>
    /* Instant splash styling so users see something immediately */
    html, body { margin: 0; padding: 0; background: #0f0f1a; }
    #__early_splash {
      position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: 24px; z-index: 9999;
      background: linear-gradient(135deg, #0f0f1a 0%, #1e1b4b 50%, #0a0a14 100%);
      font-family: 'Cairo', 'Tajawal', system-ui, sans-serif;
    }
    #__early_splash .__es_ring {
      width: 72px; height: 72px; border-radius: 18px;
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      box-shadow: 0 0 40px rgba(99,102,241,0.5), 0 0 80px rgba(99,102,241,0.2);
      display: flex; align-items: center; justify-content: center;
      animation: __es_pulse 1.6s ease-in-out infinite;
    }
    #__early_splash .__es_ring svg { width: 36px; height: 36px; color: #fff; }
    #__early_splash .__es_name {
      color: #fff; font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
      opacity: 0; animation: __es_fade 0.5s ease-out 0.1s forwards;
    }
    #__early_splash .__es_bar {
      width: 200px; height: 3px; border-radius: 99px; overflow: hidden;
      background: rgba(255,255,255,0.08); position: relative;
    }
    #__early_splash .__es_bar::after {
      content: ''; position: absolute; inset: 0;
      background: linear-gradient(90deg, transparent, #6366f1, transparent);
      animation: __es_slide 1.2s ease-in-out infinite;
    }
    @keyframes __es_pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.08); }
    }
    @keyframes __es_slide {
      0% { transform: translateX(-100%); }
      100% { transform: translateX(100%); }
    }
    @keyframes __es_fade {
      to { opacity: 1; }
    }
  </style>
  <script type="module" crossorigin src="/assets/index-C3HBw96s.js"></script>
  <link rel="modulepreload" crossorigin href="/assets/ui-vendor-BQCqNqg0.js">
  <link rel="modulepreload" crossorigin href="/assets/react-vendor-n4ropZmi.js">
  <link rel="stylesheet" crossorigin href="/assets/index-DIOdnSmm.css">
</head>

<body>
  <!-- Instant splash (shown before React mounts) -->
  <div id="__early_splash">
    <div class="__es_ring">
      <svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"
          d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
      </svg>
    </div>
    <div class="__es_name" id="__early_splash_name">جاري التحميل...</div>
    <div class="__es_bar"></div>
  </div>

  <script>
    // ── Early platform preload: start fetching data BEFORE React bundle loads ──
    (function () {
      try {
        var hostname = window.location.hostname;
        var subdomain = null;

        if (hostname !== 'localhost' && hostname !== '127.0.0.1' && !hostname.includes('testsprite')) {
          var parts = hostname.split('.');
          if (parts.length >= 3 && parts[0] !== 'app' && parts[0] !== 'www') {
            subdomain = parts[0];
          }
        } else {
          var params = new URLSearchParams(window.location.search);
          subdomain = params.get('subdomain');
        }

        // 1) Apply cached platform instantly (stale-while-revalidate)
        try {
          var cached = localStorage.getItem('platformSettings');
          if (cached) {
            var p = JSON.parse(cached);
            if (p && p.subdomain === subdomain) {
              window.__PLATFORM_PRELOAD_CACHE__ = p;
              var nameEl = document.getElementById('__early_splash_name');
              if (nameEl && p.name) nameEl.textContent = p.name;
              if (p.primary_color) {
                var splash = document.getElementById('__early_splash');
                if (splash) {
                  splash.style.background = 'linear-gradient(135deg, #0f0f1a 0%, ' + p.primary_color + '33 50%, #0a0a14 100%)';
                  var ring = splash.querySelector('.__es_ring');
                  if (ring) ring.style.background = 'linear-gradient(135deg, ' + p.primary_color + ', ' + p.primary_color + 'cc)';
                }
              }
              if (p.name) document.title = p.name;
            }
          }
        } catch (_) {}

        // 2) Kick off fresh fetch in parallel with bundle download
        if (subdomain) {
          var apiUrl = 'https://api.modres.space/platforms/subdomain/' + encodeURIComponent(subdomain);
          window.__PLATFORM_PRELOAD__ = fetch(apiUrl, { method: 'GET', credentials: 'omit' })
            .then(function (r) { return r.ok ? r.json() : null; })
            .catch(function () { return null; });
        }
      } catch (e) { /* swallow */ }
    })();

    // Remove early splash helper (called by React once mounted)
    window.__removeEarlySplash = function () {
      var el = document.getElementById('__early_splash');
      if (el) {
        el.style.transition = 'opacity 0.3s ease-out';
        el.style.opacity = '0';
        setTimeout(function () { el.remove(); }, 300);
      }
    };

    // Force clear old Service Worker and caches (one-time fix)
    (function () {
      if ('serviceWorker' in navigator && !localStorage.getItem('sw-cleared-v4')) {
        navigator.serviceWorker.getRegistrations().then(function (registrations) {
          registrations.forEach(function (registration) {
            registration.unregister();
          });
        });
        caches.keys().then(function (names) {
          names.forEach(function (name) {
            caches.delete(name);
          });
        });
        localStorage.setItem('sw-cleared-v4', 'true');
        // Reload to get fresh content
        setTimeout(function () { location.reload(); }, 500);
      }
    })();
  </script>
  <div id="root"></div>
</body>

