index.html

<!DOCTYPE html>
<html lang="el" data-theme="dark">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"/>
  <meta name="description" content="MySchedule — Εβδομαδιαίο ωρολόγιο πρόγραμμα. Οργάνωσε τον χρόνο σου!"/>
  <meta name="theme-color" content="#0f1117"/>
  <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="MySchedule"/>
  <meta name="mobile-web-app-capable" content="yes"/>

  <!-- PWA Manifest -->
  <link rel="manifest" href="manifest.json"/>

  <!-- Apple Touch Icons -->
  <link rel="apple-touch-icon" href="icons/icon-192.png"/>
  <link rel="icon" type="image/png" sizes="192x192" href="icons/icon-192.png"/>
  <link rel="icon" type="image/png" sizes="512x512" href="icons/icon-512.png"/>

  <title>MySchedule — Ωρολόγιο Πρόγραμμα</title>

  <!-- CSS — φορτώνονται με order: reset → layout → components → print -->
  <link rel="stylesheet" href="css/main.css"/>
  <link rel="stylesheet" href="css/layout.css"/>
  <link rel="stylesheet" href="css/components.css"/>
  <link rel="stylesheet" href="css/print.css"/>
</head>
<body>
  <!--
    MySchedule PWA
    ==============
    Author: blancberger @ 2026 (https://github.com/blancberger)

    Single Page Application — όλο το UI αποδίδεται δυναμικά μέσω JavaScript.
    Αυτό το div είναι το root container όπου "εγχέεται" το app shell.
    Κατά την εκκίνηση εμφανίζεται το login screen ή το κύριο UI.
  -->
  <div id="app-root" role="main" aria-label="MySchedule εφαρμογή">
    <!-- Skeleton loader — εμφανίζεται μόνο κατά το αρχικό loading -->
    <div style="
      display:flex; align-items:center; justify-content:center;
      min-height:100vh; flex-direction:column; gap:16px;
      font-family: system-ui, sans-serif; color: #94a3b8;
    ">
      <div style="font-size:3rem; animation: pulse 1.5s infinite;">📅</div>
      <div style="font-size:1.1rem; font-weight:600; color:#f1f5f9;">MySchedule</div>
      <div style="font-size:0.85rem;">Φόρτωση...</div>
    </div>
  </div>

  <!-- iOS "Add to Home Screen" hint (εμφανίζεται μόνο σε iOS Safari) -->
  <div id="ios-install-hint" style="display:none;position:fixed;bottom:0;left:0;right:0;
       background:#1e2235;border-top:1px solid #2d3154;padding:12px 16px;
       font-size:0.82rem;color:#94a3b8;text-align:center;z-index:999;">
    📱 Για εγκατάσταση στο iPhone/iPad: Safari → <strong style="color:#f1f5f9">Κοινή χρήση</strong> → <strong style="color:#f1f5f9">Προσθήκη στην αρχική οθόνη</strong>
    <button onclick="document.getElementById('ios-install-hint').style.display='none'"
            style="margin-left:12px;background:#2d3154;border:none;color:#94a3b8;
                   padding:4px 10px;border-radius:4px;cursor:pointer;">✕</button>
  </div>

  <!--
    JavaScript — φορτώνεται με defer για μη-blocking rendering.
    Σειρά φόρτωσης (εξαρτήσεις):
      1. store.js     — DB API (χρησιμοποιείται από όλους)
      2. theme.js     — Theme manager (χρησιμοποιείται από auth + app)
      3. categories.js— Εξαρτάται από store
      4. stats.js     — Εξαρτάται από store + categories
      5. activities.js— Εξαρτάται από store + categories + stats
      6. calendar.js  — Εξαρτάται από activities + stats
      7. admin.js     — Εξαρτάται από store + stats + categories
      8. print.js     — Ανεξάρτητο
      9. auth.js      — Εξαρτάται από store + theme
     10. app.js       — Κύριο entry point (εξαρτάται από όλα τα παραπάνω)
  -->
  <script src="js/store.js"      defer></script>
  <script src="js/theme.js"      defer></script>
  <script src="js/categories.js" defer></script>
  <script src="js/stats.js"      defer></script>
  <script src="js/activities.js" defer></script>
  <script src="js/calendar.js"   defer></script>
  <script src="js/admin.js"      defer></script>
  <script src="js/print.js"      defer></script>
  <script src="js/auth.js"       defer></script>
  <script src="js/app.js"        defer></script>

  <!-- iOS detection — εμφανίζει hint για "Add to Home Screen" -->
  <script>
    (function() {
      const isIOS      = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
      const isStandalone = window.navigator.standalone;
      if (isIOS && !isStandalone) {
        // Εμφάνιση hint μετά από 4 δευτερόλεπτα
        setTimeout(() => {
          document.getElementById('ios-install-hint').style.display = 'block';
        }, 4000);
      }
    })();
  </script>
</body>
</html>