Update via AnyCoder

index.html

@@ -32,6 +32,7 @@
       --blur: 14px;
       --gap: clamp(14px, 2vw, 22px);
       --card-w: 220px;
+      --page-w: 1200px;
     }
 
     @media (prefers-color-scheme: light) {
@@ -66,11 +67,11 @@
       border-bottom: 1px solid color-mix(in oklab, var(--txt) 8%, transparent);
     }
     .appbar-inner {
-      max-width: 1200px; margin: 0 auto;
+      max-width: var(--page-w); margin: 0 auto;
       padding: 14px clamp(14px, 3vw, 28px);
       display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
     }
-    .brand { display: flex; align-items: center; gap: 12px; }
+    .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
     .logo { width: 40px; height: 40px; background: linear-gradient(135deg, var(--primary), var(--accent)); border-radius: 14px; box-shadow: var(--shadow); position: relative; isolation: isolate; }
     .logo::after { content: ""; position: absolute; inset: 2px; background: conic-gradient(from 180deg at 50% 50%, rgba(255,255,255,.18), transparent 30%, rgba(255,255,255,.18) 60%, transparent 85%); mix-blend-mode: overlay; border-radius: 12px; filter: blur(6px); }
     .brand h1 { margin: 0; font-size: clamp(16px, 2.3vw, 20px); letter-spacing: .3px; font-weight: 800; }
@@ -90,8 +91,8 @@
     .theme-toggle { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; border: 1px solid color-mix(in oklab, var(--txt) 8%, transparent); background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 86%, transparent), transparent); cursor: pointer; color: var(--muted); }
 
     main {
-      max-width: 1200px; margin: 0 auto; padding: clamp(18px, 3vw, 28px);
-      display: grid; grid-template-columns: 1fr; gap: var(--gap);
+      max-width: var(--page-w); margin: 0 auto; padding: clamp(18px, 3vw, 28px);
+      display: grid; gap: var(--gap);
     }
 
     .card {
@@ -181,7 +182,7 @@
 
     .empty { padding: 30px; text-align: center; color: var(--muted); border: 1px dashed color-mix(in oklab, var(--txt) 14%, transparent); border-radius: var(--radius-xl); background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 86%, transparent), transparent); }
 
-    footer { max-width: 1200px; margin: 20px auto 60px; padding: 0 clamp(18px, 3vw, 28px); color: var(--muted); font-size: 12px; display: grid; gap: 10px; }
+    footer { max-width: var(--page-w); margin: 20px auto 60px; padding: 0 clamp(18px, 3vw, 28px); color: var(--muted); font-size: 12px; display: grid; gap: 10px; }
     .credits { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
     .tag { border: 1px solid color-mix(in oklab, var(--txt) 10%, transparent); border-radius: 999px; padding: 6px 10px; background: color-mix(in oklab, var(--bg-soft) 60%, transparent); }
 
@@ -287,22 +288,58 @@
     .ia-status { font-size: 12px; color: var(--muted); }
     .kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; border: 1px solid color-mix(in oklab, var(--txt) 16%, transparent); border-bottom-width: 3px; background: color-mix(in oklab, var(--bg-soft) 70%, transparent); padding: 2px 6px; border-radius: 6px; color: var(--txt); }
 
-    /* Stick catalog toolbar when IA opened on mobile (avoid overlay) */
-    @media (max-width: 640px) {
-      .ia-results { max-height: 52vh; }
+    /* Détail page (sheet) */
+    .detail-sheet {
+      position: fixed; inset: auto 0 0 0; z-index: 80;
+      width: min(980px, 96vw); margin: 0 auto;
+      border: 1px solid color-mix(in oklab, var(--txt) 10%, transparent);
+      border-bottom: none;
+      background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 86%, transparent), transparent);
+      border-top-left-radius: 16px; border-top-right-radius: 16px;
+      box-shadow: 0 -20px 60px rgba(0,0,0,.35);
+      transform: translateY(110%); opacity: 0; transition: .35s ease;
+    }
+    .detail-sheet.open { transform: translateY(0); opacity: 1; }
+    .detail-header {
+      display: grid; grid-template-columns: 120px 1fr auto; gap: 14px; padding: 14px;
+      border-bottom: 1px solid color-mix(in oklab, var(--txt) 10%, transparent);
+    }
+    .detail-thumb { width: 120px; aspect-ratio: 16/9; border-radius: 12px; object-fit: cover; }
+    .detail-title { font-weight: 900; font-size: 18px; margin: 2px 0; }
+    .detail-sub { color: var(--muted); font-size: 13px; }
+    .detail-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
+    .detail-body { padding: 14px; display: grid; gap: 12px; }
+    .pill { padding: 6px 10px; border-radius: 999px; background: color-mix(in oklab, var(--bg-soft) 60%, transparent); border: 1px solid color-mix(in oklab, var(--txt) 12%, transparent); color: var(--muted); font-weight: 700; font-size: 12px; }
+    .detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+    @media (max-width: 700px){ .detail-header { grid-template-columns: 1fr auto; } .detail-thumb{ display:none;} .detail-grid{ grid-template-columns: 1fr; } }
+    .overlay {
+      position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
+      opacity: 0; pointer-events: none; transition: .35s; z-index: 79;
+    }
+    .overlay.show { opacity: 1; pointer-events: all; }
+
+    /* Pagination */
+    .pager {
+      display: flex; justify-content: center; align-items: center; gap: 8px; padding: 8px;
+    }
+    .page-btn {
+      border-radius: 10px; padding: 8px 10px; cursor: pointer; font-weight: 800;
+      border: 1px solid color-mix(in oklab, var(--txt) 12%, transparent);
+      background: color-mix(in oklab, var(--bg-soft) 60%, transparent); color: var(--txt);
     }
+    .page-btn[disabled] { opacity: .5; cursor: not-allowed; }
   </style>
 </head>
 <body>
   <header class="appbar">
     <div class="appbar-inner">
-      <div class="brand">
+      <a class="brand" href="#" id="brandHome">
         <div class="logo" aria-hidden="true"></div>
         <div>
           <h1>NeoIPTV</h1>
           <small>Connexion & Catalogue</small>
         </div>
-      </div>
+      </a>
 
       <div class="top-actions">
         <a href="#" id="scanBtn"><i class='bx bx-qr-scan'></i> Scanner QR</a>
@@ -347,7 +384,8 @@
         </div>
       </div>
 
-      <section id="grid-connect" class="card" aria-label="Connexion" style="padding: clamp(16px, 2.5vw, 22px);">
+      <!-- PAGE: Connexion -->
+      <section id="grid-connect" class="card page" aria-label="Connexion" style="padding: clamp(16px, 2.5vw, 22px);">
         <div class="connect-wrap">
           <div class="connect-panel">
             <div class="connect-tabs" role="tablist" aria-label="Modes de connexion">
@@ -485,112 +523,52 @@
         </div>
       </section>
 
-      <div id="grid-live" class="grid hidden" role="region" aria-label="Chaînes en direct"></div>
-      <div id="grid-vod" class="grid hidden" role="region" aria-label="Films VOD"></div>
-      <div id="grid-series" class="grid hidden" role="region" aria-label="Séries TV"></div>
-      <div id="grid-favs" class="grid hidden" role="region" aria-label="Favoris">
-        <div class="empty" id="emptyFavs">
-          <i class='bx bx-star' style="font-size: 32px;"></i>
-          <div>Aucun favori pour le moment. Ajoutez-en depuis Direct, Films ou Séries.</div>
-        </div>
-      </div>
-      <div id="grid-recent" class="grid hidden" role="region" aria-label="Récents">
-        <div class="empty" id="emptyRecent">
-          <i class='bx bx-time-five' style="font-size: 32px;"></i>
-          <div>Votre historique de lecture apparaîtra ici.</div>
+      <!-- PAGE: Direct -->
+      <section id="page-live" class="page hidden">
+        <div class="card" style="padding:14px; margin-bottom:12px;">
+          <div style="display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap">
+            <div style="display:flex;align-items:center;gap:10px">
+              <i class='bx bx-broadcast' style="color:var(--accent)"></i>
+              <strong>Direct — Chaînes TV</strong>
+            </div>
+            <div class="pager">
+              <button class="page-btn" id="livePrev"><i class='bx bx-left-arrow'></i></button>
+              <span class="pill" id="livePageInfo">Page 1</span>
+              <button class="page-btn" id="liveNext"><i class='bx bx-right-arrow'></i></button>
+            </div>
+          </div>
         </div>
-      </div>
-    </section>
-  </main>
+        <div id="grid-live" class="grid" role="region" aria-label="Chaînes en direct"></div>
+      </section>
 
-  <dialog class="player" id="playerDialog">
-    <div class="player-card">
-      <div class="player-top">
-        <video id="video" controls playsinline></video>
-      </div>
-      <div class="player-bottom">
-        <div class="player-actions">
-          <span class="chip" id="chipTitle">Lecture</span>
-          <span class="chip" id="chipType">Type</span>
-          <span class="chip" id="chipRes">Auto</span>
-          <button class="btn" id="pipBtn"><i class='bx bx-window-open'></i> PiP</button>
-          <button class="btn" id="castBtn"><i class='bx bx-cast'></i> Cast</button>
-          <button class="btn" id="muteBtn"><i class='bx bx-volume-full'></i> Mute</button>
-          <button class="close" id="closePlayer"><i class='bx bx-x'></i> Fermer</button>
+      <!-- PAGE: Films -->
+      <section id="page-vod" class="page hidden">
+        <div class="card" style="padding:14px; margin-bottom:12px;">
+          <div style="display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap">
+            <div style="display:flex;align-items:center;gap:10px">
+              <i class='bx bx-film' style="color:var(--primary)"></i>
+              <strong>Films — VOD</strong>
+            </div>
+            <div class="pager">
+              <button class="page-btn" id="vodPrev"><i class='bx bx-left-arrow'></i></button>
+              <span class="pill" id="vodPageInfo">Page 1</span>
+              <button class="page-btn" id="vodNext"><i class='bx bx-right-arrow'></i></button>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
-  </dialog>
-
-  <!-- Assistant IA floating button -->
-  <button class="fab" id="aiFab" title="Assistant IA recommandations">
-    <i class='bx bx-bot' style="font-size:24px"></i>
-  </button>
-
-  <!-- Assistant IA panel -->
-  <section class="ia-panel hidden" id="aiPanel" aria-live="polite">
-    <div class="ia-header">
-      <i class='bx bx-bot' style="font-size:22px;color:var(--accent)"></i>
-      <div>
-        <div class="title">Assistant IA</div>
-        <div class="muted">Demandez des sélections de films/séries selon vos envies</div>
-      </div>
-      <button id="aiClose" class="btn secondary" style="margin-left:auto"><i class='bx bx-chevron-down'></i> Fermer</button>
-    </div>
-
-    <div class="ia-actions">
-      <button class="ia-chip" data-prompt="films d'action récents en 4K"><i class='bx bx-bolt'></i> Action 4K</button>
-      <button class="ia-chip" data-prompt="comédies familiales"><i class='bx bx-happy'></i> Comédies familiales</button>
-      <button class="ia-chip" data-prompt="séries de science-fiction"><i class='bx bx-planet'></i> Sci‑Fi</button>
-      <button class="ia-chip" data-prompt="documentaires nature en HD"><i class='bx bx-leaf'></i> Nature</button>
-    </div>
-
-    <div class="ia-prompt">
-      <input id="aiInput" placeholder="Ex: propose-moi des thrillers français récents" />
-      <button id="aiAsk" class="btn"><i class='bx bx-magic-wand'></i> Générer</button>
-    </div>
-
-    <div class="ia-results" id="aiResults">
-      <div class="empty"><i class='bx bx-sparkles' style="font-size:26px"></i>
-        <div>Astuce: utilisez des mots-clés précis (genre, qualité, année, langue…).</div>
-      </div>
-    </div>
-
-    <div class="ia-footer">
-      <div class="ia-status" id="aiStatus">Prêt</div>
-      <div class="ia-shortcuts">
-        <span class="kbd">↵</span> pour générer • <span class="kbd">Esc</span> pour fermer
-      </div>
-    </div>
-  </section>
+        <div id="grid-vod" class="grid" role="region" aria-label="Films VOD"></div>
+      </section>
 
-  <footer>
-    <div class="credits">
-      <span class="tag">Démo UI IPTV</span>
-      <span class="tag">HLS natif</span>
-      <span class="tag">Responsive</span>
-    </div>
-    <div>Note: Cette application est une démonstration côté client. Branchez vos API et flux sécurisés côté serveur pour une vraie intégration.</div>
-  </footer>
-
-  <script>
-    // Theme toggle
-    const themeToggle = document.getElementById('themeToggle');
-    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)');
-    function setTheme(mode) {
-      document.documentElement.style.colorScheme = mode;
-      themeToggle.innerHTML = mode === 'dark' ? "<i class='bx bx-moon'></i>" : "<i class='bx bx-sun'></i>";
-      localStorage.setItem('theme', mode);
-    }
-    const savedTheme = localStorage.getItem('theme');
-    setTheme(savedTheme || (prefersDark.matches ? 'dark' : 'light'));
-    themeToggle.addEventListener('click', () => {
-      const now = document.documentElement.style.colorScheme === 'dark' ? 'light' : 'dark';
-      setTheme(now);
-    });
-
-    // Demo data
-    const data = {
-      live: [
-        { id: 'l1', title: 'Infos 24', group: 'News', logo: 'https://picsum.photos/seed/news1/800/450', url: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', tag: 'HD' },
-        { id: 'l2', title: 'Sport+ Arena', group: 'Sports', logo:
+      <!-- PAGE: Séries -->
+      <section id="page-series" class="page hidden">
+        <div class="card" style="padding:14px; margin-bottom:12px;">
+          <div style="display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap">
+            <div style="display:flex;align-items:center;gap:10px">
+              <i class='bx bx-collection' style="color:var(--warn)"></i>
+              <strong>Séries TV</strong>
+            </div>
+            <div class="pager">
+              <button class="page-btn" id="seriesPrev"><i class='bx bx-left-arrow'></i></button>
+              <span class="pill" id="seriesPageInfo">Page 1</span>
+              <button class="page-btn" id="seriesNext"><i class='bx bx-right-arrow'></i></button>
+            </div