Update via AnyCoder

index.html

@@ -91,9 +91,8 @@
 
     main {
       max-width: 1200px; margin: 0 auto; padding: clamp(18px, 3vw, 28px);
-      display: grid; grid-template-columns: 360px 1fr; gap: var(--gap);
+      display: grid; grid-template-columns: 1fr; gap: var(--gap);
     }
-    @media (max-width: 980px) { main { grid-template-columns: 1fr; } }
 
     .card {
       background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 86%, transparent), transparent);
@@ -102,62 +101,6 @@
       box-shadow: var(--shadow);
     }
 
-    .login { padding: clamp(18px, 3.2vw, 28px); position: sticky; top: calc(62px + 12px); align-self: start; }
-    @media (max-width: 980px) { .login { position: relative; top: 0; } }
-    .login-header { display: grid; gap: 8px; }
-    .login-header h2 { margin: 0; font-size: clamp(18px, 2.6vw, 22px); }
-    .subtitle { color: var(--muted); font-size: 13px; }
-
-    .mac-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 16px 0 6px; }
-    .mac-input { position: relative; }
-    .mac-input input {
-      width: 100%; padding: 14px 0; text-align: center; font-size: 18px; letter-spacing: 1px;
-      border-radius: var(--radius-lg); border: 1px solid color-mix(in oklab, var(--txt) 10%, transparent);
-      background: color-mix(in oklab, var(--bg-soft) 70%, transparent); color: var(--txt);
-      outline: none; transition: .2s border-color, .2s background;
-    }
-    .mac-input input:focus {
-      border-color: color-mix(in oklab, var(--primary) 60%, transparent);
-      background: color-mix(in oklab, var(--primary) 8%, transparent);
-      box-shadow: 0 0 0 6px color-mix(in oklab, var(--primary) 10%, transparent);
-    }
-    .login .actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
-    .btn {
-      display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; border-radius: 12px;
-      border: 1px solid color-mix(in oklab, var(--txt) 10%, transparent);
-      background: linear-gradient(180deg, color-mix(in oklab, var(--elev) 86%, transparent), transparent);
-      color: var(--txt); font-weight: 700; cursor: pointer; transition: .2s transform, .2s border-color, .2s background, .2s color;
-    }
-    .btn:hover { transform: translateY(-1px); border-color: color-mix(in oklab, var(--txt) 16%, transparent); }
-    .btn.primary {
-      border-color: color-mix(in oklab, var(--primary) 60%, transparent);
-      background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 22%, transparent), transparent);
-      color: white; box-shadow: 0 10px 18px color-mix(in oklab, var(--primary) 22%, transparent);
-    }
-    .btn.ghost { background: transparent; }
-    .hint { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
-
-    .provider { margin-top: 18px; display: grid; gap: 10px; }
-    .provider .row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
-    .select, .input { position: relative; }
-    select, .input input {
-      width: 100%; appearance: none; padding: 14px 16px; border-radius: var(--radius-lg);
-      border: 1px solid color-mix(in oklab, var(--txt) 10%, transparent);
-      background: color-mix(in oklab, var(--bg-soft) 70%, transparent); color: var(--txt);
-      outline: none; transition: .2s border-color, .2s background; font-weight: 600;
-    }
-    select:focus, .input input:focus {
-      border-color: color-mix(in oklab, var(--accent) 60%, transparent);
-      background: color-mix(in oklab, var(--accent) 8%, transparent);
-      box-shadow: 0 0 0 6px color-mix(in oklab, var(--accent) 10%, transparent);
-    }
-    .select i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
-
-    .divider { height: 1px; background: color-mix(in oklab, var(--txt) 10%, transparent); margin: 16px 0; }
-
-    .status { display: grid; gap: 8px; padding: 10px 12px; background: color-mix(in oklab, var(--bg-soft) 60%, transparent); border: 1px solid color-mix(in oklab, var(--txt) 10%, transparent); border-radius: var(--radius-md); }
-    .status .line { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
-
     .content { display: grid; gap: var(--gap); }
     .hero {
       position: relative; overflow: clip; border-radius: var(--radius-xl);
@@ -243,14 +186,6 @@
     .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); }
 
     .hidden { display: none !important; }
-    .shake { animation: shake .22s 2; }
-    @keyframes shake {
-      0% { transform: translateX(0) }
-      25% { transform: translateX(-3px) }
-      50% { transform: translateX(3px) }
-      75% { transform: translateX(-2px) }
-      100% { transform: translateX(0) }
-    }
   </style>
 </head>
 <body>
@@ -260,7 +195,7 @@
         <div class="logo" aria-hidden="true"></div>
         <div>
           <h1>NeoIPTV</h1>
-          <small>Connexion avec code MAC</small>
+          <small style="display:none">Connexion avec code MAC</small>
         </div>
       </div>
 
@@ -277,58 +212,12 @@
   </header>
 
   <main>
-    <section class="card login" id="loginCard">
-      <div class="login-header">
-        <h2>Se connecter</h2>
-        <div class="subtitle">Entrez votre adresse MAC pour lier votre abonnement IPTV</div>
-      </div>
-
-      <form id="macForm" novalidate>
-        <div class="mac-grid" aria-label="Entrée code MAC">
-          <div class="mac-input"><input inputmode="latin" maxlength="2" pattern="[0-9A-Fa-f]{2}" autocomplete="off" spellcheck="false" aria-label="Bloc 1"></div>
-          <div class="mac-input"><input maxlength="2" pattern="[0-9A-Fa-f]{2}" aria-label="Bloc 2"></div>
-          <div class="mac-input"><input maxlength="2" pattern="[0-9A-Fa-f]{2}" aria-label="Bloc 3"></div>
-          <div class="mac-input"><input maxlength="2" pattern="[0-9A-Fa-f]{2}" aria-label="Bloc 4"></div>
-          <div class="mac-input"><input maxlength="2" pattern="[0-9A-Fa-f]{2}" aria-label="Bloc 5"></div>
-          <div class="mac-input"><input maxlength="2" pattern="[0-9A-Fa-f]{2}" aria-label="Bloc 6"></div>
-        </div>
-
-        <div class="actions">
-          <button type="submit" class="btn primary"><i class='bx bx-log-in-circle'></i> Se connecter</button>
-          <button type="button" id="pasteMac" class="btn ghost"><i class='bx bx-clipboard'></i> Coller</button>
-          <button type="button" id="randomMac" class="btn ghost"><i class='bx bx-dice-6'></i> Exemple</button>
-        </div>
-        <div class="hint"><i class='bx bx-lock-alt'></i> Nous ne stockons aucune donnée sensible. La connexion MAC simule l’authentification côté client.</div>
-
-        <div class="provider">
-          <div class="row">
-            <div class="select">
-              <select id="providerSelect" aria-label="Fournisseur">
-                <option value="custom">Fournisseur personnalisé</option>
-                <option value="xtream">Xtream Codes</option>
-                <option value="stalker">Stalker/Portal</option>
-              </select>
-              <i class='bx bx-chevron-down'></i>
-            </div>
-            <button type="button" id="saveConfig" class="btn"><i class='bx bx-save'></i> Sauver</button>
-          </div>
-          <div class="input"><input id="portalUrl" type="url" placeholder="URL du portail (ex: http://exemple.com/portal)" /></div>
-          <div class="status" id="statusBox" aria-live="polite">
-            <div class="line"><i class='bx bx-info-circle'></i> État: Déconnecté</div>
-            <div class="line"><i class='bx bx-time'></i> Valide jusqu’à: —</div>
-          </div>
-        </div>
-      </form>
-
-      <div class="divider"></div>
-      <div class="hint"><i class='bx bx-shield-quarter'></i> Astuce: Appuyez sur Tab pour passer au bloc suivant. Seuls les caractères 0-9 et A-F sont acceptés.</div>
-    </section>
-
+    <!-- Section de connexion supprimée comme demandé -->
     <section class="content">
       <div class="hero">
         <div class="hero-inner">
           <h2>Vos chaînes, films et séries en un clic</h2>
-          <p>Après connexion avec votre code MAC, explorez le guide TV, la VOD et les séries. Le lecteur est intégré et supporte HLS (m3u8).</p>
+          <p>Explorez le guide TV, la VOD et les séries. Le lecteur est intégré et supporte HLS (m3u8).</p>
         </div>
       </div>
 
@@ -392,11 +281,11 @@
 
   <footer>
     <div class="credits">
-      <span class="tag">Démo UI IPTV (MAC)</span>
+      <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. Pour une vraie intégration IPTV via code MAC (Stalker/Xtream), branchez vos API et flux sécurisés côté serveur.</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>
@@ -415,100 +304,6 @@
       setTheme(now);
     });
 
-    // MAC inputs behavior
-    const macForm = document.getElementById('macForm');
-    const macBlocks = [...macForm.querySelectorAll('.mac-input input')];
-    const statusBox = document.getElementById('statusBox');
-    const providerSelect = document.getElementById('providerSelect');
-    const portalUrl = document.getElementById('portalUrl');
-    const randomMacBtn = document.getElementById('randomMac');
-    const pasteMacBtn = document.getElementById('pasteMac');
-    const saveConfigBtn = document.getElementById('saveConfig');
-
-    function formatHex(val) { return val.replace(/[^0-9a-f]/gi, '').toUpperCase().slice(0, 2); }
-    macBlocks.forEach((inp, idx) => {
-      inp.addEventListener('input', () => {
-        const v = formatHex(inp.value); inp.value = v;
-        if (v.length === 2 && idx < macBlocks.length - 1) macBlocks[idx + 1].focus();
-      });
-      inp.addEventListener('keydown', (e) => {
-        if (e.key === 'Backspace' && inp.value.length === 0 && idx > 0) macBlocks[idx - 1].focus();
-        if (e.key === '-' || e.key === ':') e.preventDefault();
-        if (e.key === 'Enter') macForm.requestSubmit();
-      });
-      inp.addEventListener('paste', (e) => {
-        const text = (e.clipboardData || window.clipboardData).getData('text');
-        if (!text) return; e.preventDefault(); fillMacFromString(text);
-      });
-    });
-
-    function macToString() { return macBlocks.map(b => (b.value || '00')).join(':'); }
-    function setStatus(text, extra) {
-      statusBox.innerHTML = `
-        <div class="line"><i class='bx bx-info-circle'></i> ${text}</div>
-        <div class="line"><i class='bx bx-time'></i> Valide jusqu’à: ${extra || '—'}</div>
-      `;
-    }
-    function validMacString(s) { return /^([0-9A-F]{2}:){5}[0-9A-F]{2}$/.test(s); }
-    function fillMacFromString(text) {
-      const cleaned = text.trim().replace(/-/g, ':').replace(/\./g, '').toUpperCase();
-      let mac = cleaned;
-      if (/^[0-9A-F]{12}$/.test(cleaned)) mac = cleaned.match(/.{1,2}/g).join(':');
-      if (/^([0-9A-F]{2}[:]){5}[0-9A-F]{2}$/.test(mac)) {
-        mac.split(':').forEach((pair, i) => macBlocks[i].value = pair);
-      } else { flashInvalid(); }
-    }
-    function flashInvalid() {
-      macForm.classList.remove('shake'); void macForm.offsetWidth; macForm.classList.add('shake');
-    }
-
-    randomMacBtn.addEventListener('click', () => {
-      const oui = ["00:1A:79","00:1B:44","00:1C:B3","00:1D:D8","00:1E:68"];
-      const rnd = () => Math.floor(Math.random() * 256).toString(16).padStart(2, '0').toUpperCase();
-      const prefix = oui[Math.floor(Math.random() * oui.length)];
-      const mac = `${prefix}:${rnd()}:${rnd()}:${rnd()}`;
-      fillMacFromString(mac);
-    });
-
-    pasteMacBtn.addEventListener('click', async () => {
-      try {
-        const txt = await navigator.clipboard.readText();
-        if (txt) fillMacFromString(txt);
-      } catch (e) {
-        alert('Impossible de lire le presse-papiers. Collez directement dans un bloc.');
-      }
-    });
-
-    saveConfigBtn.addEventListener('click', () => {
-      const cfg = { provider: providerSelect.value, portal: portalUrl.value };
-      localStorage.setItem('iptv_cfg', JSON.stringify(cfg));
-      setStatus('Configuration sauvegardée', new Date(Date.now() + 86400000).toLocaleString());
-    });
-
-    (function loadCfg(){
-      const cfg = JSON.parse(localStorage.getItem('iptv_cfg') || '{"provider":"custom","portal":""}');
-      providerSelect.value = cfg.provider || 'custom';
-      portalUrl.value = cfg.portal || '';
-      const macSaved = localStorage.getItem('iptv_mac');
-      if (macSaved && validMacString(macSaved)) fillMacFromString(macSaved);
-    })();
-
-    macForm.addEventListener('submit', async (e) => {
-      e.preventDefault();
-      const mac = macToString();
-      if (!validMacString(mac)) { flashInvalid(); setStatus('Code MAC invalide', '—'); return; }
-      setStatus('Connexion en cours...', '—');
-      await new Promise(r => setTimeout(r, 600));
-      const last = parseInt(mac.split(':')[5], 16);
-      if (Number.isFinite(last) && last % 2 === 0) {
-        setStatus('Connecté', new Date(Date.now() + 7 * 86400000).toLocaleString());
-        localStorage.setItem('iptv_mac', mac);
-        document.body.dispatchEvent(new CustomEvent('iptv:connected', { detail: { mac } }));
-      } else {
-        setStatus('Accès refusé par le portail', '—'); flashInvalid();
-      }
-    });
-
     // Demo data
     const data = {
       live: [
@@ -542,14 +337,13 @@
       recent: document.getElementById('grid-recent')
     };
 
-    // Make all tabs accessible without login (per request)
+    // Tabs
     tabs.forEach(tab => {
       tab.addEventListener('click', () => {
         tabs.forEach(t => t.classList.remove('active'));
         tab.classList.add('active');
         const chosen = tab.dataset.tab;
         Object.keys(grids).forEach(k => grids[k].classList.toggle('hidden', k !== chosen));
-        // Persist selected tab
         localStorage.setItem('iptv_tab', chosen);
         applySearchAndFilters();
       });
@@ -586,4 +380,149 @@
     }
 
     // Render functions
-    function
+    function render() {
+      grids.live.innerHTML = '';
+      grids.vod.innerHTML = '';
+      grids.series.innerHTML = '';
+      data.live.forEach(it => grids.live.appendChild(createCard(it, 'live')));
+      data.vod.forEach(it => grids.vod.appendChild(createCard(it, 'vod')));
+      data.series.forEach(it => grids.series.appendChild(createCard(it, 'series')));
+    }
+    render();
+
+    // Favorites and recents
+    function getFavs() { return JSON.parse(localStorage.getItem('iptv_favs') || '[]'); }
+    function saveFavs(f) { localStorage.setItem('iptv_favs', JSON.stringify(f)); }
+    function favKey(item, type){ return `${type}:${item.id}`; }
+
+    function toggleFav(item, type){
+      const key = favKey(item,type);
+      let favs = getFavs();
+      if (favs.includes(key)) favs = favs.filter(k => k !== key);
+      else favs.push(key);
+      saveFavs(favs);
+      renderFavs();
+    }
+
+    function renderFavs(){
+      const favs = getFavs();
+      const container = grids.favs;
+      container.innerHTML = '';
+      if (favs.length === 0) {
+        const empty = document.createElement('div');
+        empty.className = 'empty';
+        empty.innerHTML = "<i class='bx bx-star' style='font-size:32px;'></i><div>Aucun favori pour le moment.</div>";
+        container.appendChild(empty);
+        return;
+      }
+      const addFrom = (arr, type) => arr.forEach(it => {
+        if (favs.includes(favKey(it,type))) container.appendChild(createCard(it,type));
+      });
+      addFrom(data.live,'live'); addFrom(data.vod,'vod'); addFrom(data.series,'series');
+    }
+    renderFavs();
+
+    function pushRecent(item, type){
+      const recents = JSON.parse(localStorage.getItem('iptv_recent') || '[]').filter(r => r.id !== item.id || r.type !== type);
+      recents.unshift({ id:item.id, type, title:item.title, poster:item.poster||item.logo, when:Date.now(), tag:item.tag||'' });
+      localStorage.setItem('iptv_recent', JSON.stringify(recents.slice(0,30)));
+      renderRecent();
+    }
+
+    function renderRecent(){
+      const recents = JSON.parse(localStorage.getItem('iptv_recent') || '[]');
+      const container = grids.recent;
+      container.innerHTML = '';
+      if (recents.length === 0) {
+        const empty = document.createElement('div');
+        empty.className = 'empty';
+        empty.innerHTML = "<i class='bx bx-time-five' style='font-size:32px;'></i><div>Votre historique de lecture apparaîtra ici.</div>";
+        container.appendChild(empty);
+        return;
+      }
+      recents.forEach(r => {
+        const item = { id:r.id, title:r.title, poster:r.poster, logo:r.poster, url:'#', tag:r.tag };
+        container.appendChild(createCard(item, r.type));
+      });
+    }
+    renderRecent();
+
+    // Search and filters
+    const searchInput = document.getElementById('searchInput');
+    const clearSearch = document.getElementById('clearSearch');
+    const filterBtns = document.querySelectorAll('.filter-chip');
+
+    function applySearchAndFilters(){
+      const q = (searchInput.value || '').toLowerCase().trim();
+      const activeTab = document.querySelector('.tab.active').dataset.tab;
+      const activeFilter = document.querySelector('.filter-chip.active').dataset.filter;
+      const container = grids[activeTab];
+      if (!container) return;
+      [...container.children].forEach(card => {
+        if (card.classList.contains('empty')) return;
+        const matchesQ = card.dataset.search?.includes(q) || q === '';
+        let matchesF = true;
+        if (activeFilter === 'hd') matchesF = card.dataset.quality === 'hd';
+        if (activeFilter === 'recent') matchesF = card.dataset.recent === '1';
+        card.style.display = matchesQ && matchesF ? '' : 'none';
+      });
+    }
+    searchInput.addEventListener('input', applySearchAndFilters);
+    clearSearch.addEventListener('click', () => { searchInput.value=''; applySearchAndFilters(); });
+    filterBtns.forEach(b => b.addEventListener('click', () => {
+      filterBtns.forEach(x => x.classList.remove('active'));
+      b.classList.add('active');
+      applySearchAndFilters();
+    }));
+
+    // Restore selected tab
+    (function restoreTab(){
+      const t = localStorage.getItem('iptv_tab');
+      if (!t) return;
+      const btn = document.querySelector(`.tab[data-tab="${t}"]`);
+      if (btn) btn.click();
+    })();
+
+    // Player
+    const playerDialog = document.getElementById('playerDialog');
+    const video = document.getElementById('video');
+    const chipTitle = document.getElementById('chipTitle');
+    const chipType = document.getElementById('chipType');
+    const chipRes = document.getElementById('chipRes');
+    const closePlayer = document.getElementById('closePlayer');
+    const pipBtn = document.getElementById('pipBtn');
+    const muteBtn = document.getElementById('muteBtn');
+    const castBtn = document.getElementById('castBtn');
+
+    function openPlayer(item, type){
+      chipTitle.textContent = item.title;
+      chipType.textContent = type.toUpperCase();
+      chipRes.textContent = 'Auto';
+      video.src = item.url;
+      video.play().catch(()=>{});
+      playerDialog.showModal();
+      pushRecent(item, type);
+    }
+    closePlayer.addEventListener('click', () => {
+      video.pause();
+      video.src = '';
+      playerDialog.close();
+    });
+    pipBtn.addEventListener('click', async () => {
+      if (document.pictureInPictureElement) document.exitPictureInPicture();
+      else if (video.requestPictureInPicture) await video.requestPictureInPicture();
+    });
+    muteBtn.addEventListener('click', () => {
+      video.muted = !video.muted;
+      muteBtn.innerHTML = video.muted ? "<i class='bx bx-volume-mute'></i> Unmute" : "<i class='bx bx-volume-full'></i> Mute";
+    });
+    castBtn.addEventListener('click', () => {
+      alert('Casting non implémenté dans cette démo.');
+    });
+
+    // Small helpers
+    document.getElementById('scanBtn').addEventListener('click', (e)=>{ e.preventDefault(); alert('Scanner QR non disponible dans cette démo.'); });
+    document.getElementById('helpBtn').addEventListener('click', (e)=>{ e.preventDefault(); alert('Aide: utilisez la recherche, les filtres et cliquez sur Lire pour démarrer.'); });
+  </script>
+</body>
+</html>