Spaces:

Guymy97
/

essai2

Running

App Files Files Community

Guymy97 commited on Nov 19

Commit

3612828

verified ·

1 Parent(s): 00f585e

Update via AnyCoder

Browse files

Files changed (1) hide show

index.html +256 -138

index.html CHANGED Viewed

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
-  <title>IPTV - Connexion par Code MAC</title>
   <meta name="color-scheme" content="dark light" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
@@ -186,6 +186,103 @@
     .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; }
   </style>
 </head>
 <body>
@@ -195,7 +292,7 @@
         <div class="logo" aria-hidden="true"></div>
         <div>
           <h1>NeoIPTV</h1>
-          <small style="display:none">Connexion avec code MAC</small>
         </div>
       </div>
@@ -212,24 +309,25 @@
   </header>
   <main>
-    <!-- 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>Explorez le guide TV, la VOD et les séries. Le lecteur est intégré et supporte HLS (m3u8).</p>
         </div>
       </div>
       <div class="tabs" role="tablist">
-        <button class="tab active" data-tab="live"><i class='bx bx-play-circle'></i> Direct</button>
         <button class="tab" data-tab="vod"><i class='bx bx-movie-play'></i> Films</button>
         <button class="tab" data-tab="series"><i class='bx bx-collection'></i> Séries</button>
         <button class="tab" data-tab="favs"><i class='bx bx-star'></i> Favoris</button>
         <button class="tab" data-tab="recent"><i class='bx bx-time-five'></i> Récents</button>
       </div>
-      <div class="toolbar">
         <div class="searchbar">
           <i class='bx bx-search' aria-hidden="true"></i>
           <input id="searchInput" type="search" placeholder="Rechercher dans tous les onglets…" />
@@ -242,7 +340,153 @@
         </div>
       </div>
-      <div id="grid-live" class="grid" 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">
@@ -330,12 +574,14 @@
     const tabs = document.querySelectorAll('.tab');
     const grids = {
       live: document.getElementById('grid-live'),
       vod: document.getElementById('grid-vod'),
       series: document.getElementById('grid-series'),
       favs: document.getElementById('grid-favs'),
       recent: document.getElementById('grid-recent')
     };
     // Tabs
     tabs.forEach(tab => {
@@ -344,6 +590,8 @@
         tab.classList.add('active');
         const chosen = tab.dataset.tab;
         Object.keys(grids).forEach(k => grids[k].classList.toggle('hidden', k !== chosen));
         localStorage.setItem('iptv_tab', chosen);
         applySearchAndFilters();
       });
@@ -395,134 +643,4 @@
     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>

 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <title>NeoIPTV - Connexion & Catalogue</title>
   <meta name="color-scheme" content="dark light" />
   <link rel="preconnect" href="https://fonts.googleapis.com" />
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     .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; }
+    /* Connexion styles */
+    .connect-wrap {
+      display: grid;
+      gap: var(--gap);
+      grid-template-columns: 1.1fr .9fr;
+    }
+    @media (max-width: 900px) {
+      .connect-wrap { grid-template-columns: 1fr; }
+    }
+    .connect-panel {
+      padding: clamp(16px, 2.5vw, 22px);
+      border-radius: var(--radius-xl);
+      background: linear-gradient(180deg, color-mix(in oklab, var(--surface) 86%, transparent), transparent);
+      border: 1px solid color-mix(in oklab, var(--txt) 8%, transparent);
+      box-shadow: var(--shadow);
+    }
+    .connect-tabs {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 8px;
+      margin-bottom: 12px;
+    }
+    .connect-tab {
+      border: 1px solid color-mix(in oklab, var(--txt) 10%, transparent);
+      background: color-mix(in oklab, var(--bg-soft) 60%, transparent);
+      border-radius: 12px;
+      padding: 10px;
+      font-weight: 800;
+      color: var(--muted);
+      cursor: pointer;
+      display: flex; align-items: center; justify-content: center; gap: 8px;
+    }
+    .connect-tab.active {
+      color: var(--txt);
+      border-color: color-mix(in oklab, var(--primary) 50%, transparent);
+      background: color-mix(in oklab, var(--primary) 14%, transparent);
+      box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 22%, transparent);
+    }
+    .form {
+      display: grid; gap: 12px;
+    }
+    .field {
+      display: grid; gap: 8px;
+    }
+    .field label {
+      font-weight: 700; color: var(--muted); font-size: 13px;
+    }
+    .input {
+      display: grid; grid-template-columns: 28px 1fr; align-items: center;
+      gap: 10px; padding: 12px; border-radius: 12px;
+      border: 1px solid color-mix(in oklab, var(--txt) 10%, transparent);
+      background: color-mix(in oklab, var(--bg-soft) 60%, transparent);
+      color: var(--txt);
+    }
+    .input input, .input select {
+      border: none; outline: none; background: transparent; color: var(--txt);
+      font-weight: 700;
+    }
+    .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+    @media (max-width: 600px){ .row-2 { grid-template-columns: 1fr; } }
+    .cta {
+      display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
+    }
+    .btn {
+      padding: 10px 14px; border-radius: 12px; font-weight: 800; cursor: pointer;
+      border: 1px solid color-mix(in oklab, var(--primary) 45%, transparent);
+      background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 22%, transparent), transparent);
+      color: #fff;
+      display: inline-flex; align-items: center; gap: 8px;
+    }
+    .btn.secondary {
+      border-color: color-mix(in oklab, var(--txt) 14%, transparent);
+      background: color-mix(in oklab, var(--bg-soft) 60%, transparent);
+      color: var(--txt);
+    }
+    .helper {
+      font-size: 12px; color: var(--muted);
+    }
+    .qr-box {
+      display: grid; place-items: center; aspect-ratio: 1/1;
+      border-radius: 16px; border: 1px dashed color-mix(in oklab, var(--txt) 14%, transparent);
+      background: repeating-linear-gradient(45deg, color-mix(in oklab, var(--glass) 100%, transparent) 0 10px, transparent 10px 20px);
+    }
+    .success {
+      display: none; margin-top: 10px; padding: 10px 12px; border-radius: 10px;
+      background: color-mix(in oklab, var(--accent) 18%, transparent);
+      border: 1px solid color-mix(in oklab, var(--accent) 48%, transparent);
+      color: white; font-weight: 800;
+    }
+    .error {
+      display: none; margin-top: 10px; padding: 10px 12px; border-radius: 10px;
+      background: color-mix(in oklab, var(--danger) 18%, transparent);
+      border: 1px solid color-mix(in oklab, var(--danger) 48%, transparent);
+      color: white; font-weight: 800;
+    }
   </style>
 </head>
 <body>
         <div class="logo" aria-hidden="true"></div>
         <div>
           <h1>NeoIPTV</h1>
+          <small>Connexion & Catalogue</small>
         </div>
       </div>
   </header>
   <main>
     <section class="content">
       <div class="hero">
         <div class="hero-inner">
           <h2>Vos chaînes, films et séries en un clic</h2>
+          <p>Connectez-vous avec votre méthode préférée puis profitez du direct, de la VOD et des séries. Lecteur HLS intégré (m3u8).</p>
         </div>
       </div>
       <div class="tabs" role="tablist">
+        <button class="tab active" data-tab="connect"><i class='bx bx-log-in-circle'></i> Connexion</button>
+        <button class="tab" data-tab="live"><i class='bx bx-play-circle'></i> Direct</button>
         <button class="tab" data-tab="vod"><i class='bx bx-movie-play'></i> Films</button>
         <button class="tab" data-tab="series"><i class='bx bx-collection'></i> Séries</button>
         <button class="tab" data-tab="favs"><i class='bx bx-star'></i> Favoris</button>
         <button class="tab" data-tab="recent"><i class='bx bx-time-five'></i> Récents</button>
       </div>
+      <!-- Toolbar only for catalogue tabs -->
+      <div class="toolbar" id="catalogToolbar">
         <div class="searchbar">
           <i class='bx bx-search' aria-hidden="true"></i>
           <input id="searchInput" type="search" placeholder="Rechercher dans tous les onglets…" />
         </div>
       </div>
+      <!-- Connexion tab -->
+      <section id="grid-connect" class="card" 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">
+              <button class="connect-tab active" data-mode="mac"><i class='bx bx-barcode'></i> Code MAC</button>
+              <button class="connect-tab" data-mode="xtreme"><i class='bx bx-link'></i> Xtream Codes</button>
+              <button class="connect-tab" data-mode="m3u"><i class='bx bx-file'></i> M3U/M3U8</button>
+              <button class="connect-tab" data-mode="qr"><i class='bx bx-qr'></i> QR Code</button>
+            </div>
+            <!-- MAC -->
+            <form id="form-mac" class="form" autocomplete="on">
+              <div class="field">
+                <label for="macAddress">Adresse MAC</label>
+                <div class="input">
+                  <i class='bx bx-chip'></i>
+                  <input id="macAddress" name="mac" inputmode="text" placeholder="AB:CD:EF:12:34:56" maxlength="17" />
+                </div>
+                <div class="helper">Format accepté: XX:XX:XX:XX:XX:XX (lettres et chiffres)</div>
+              </div>
+              <div class="field">
+                <label for="portalMac">Portail</label>
+                <div class="input">
+                  <i class='bx bx-globe'></i>
+                  <input id="portalMac" name="portal" placeholder="https://mon-portail.example.com" />
+                </div>
+              </div>
+              <div class="cta">
+                <button type="button" class="btn" id="loginMac"><i class='bx bx-log-in'></i> Se connecter</button>
+                <button type="button" class="btn secondary" id="genMac"><i class='bx bx-dice-6'></i> Générer MAC</button>
+              </div>
+              <div class="success" id="macSuccess"><i class='bx bx-check-shield'></i> Connecté (démo) — vos playlists seront chargées.</div>
+              <div class="error" id="macError"><i class='bx bx-error'></i> MAC invalide. Vérifiez le format.</div>
+            </form>
+            <!-- Xtream -->
+            <form id="form-xtreme" class="form hidden" autocomplete="on">
+              <div class="row-2">
+                <div class="field">
+                  <label for="xtHost">Hôte/URL</label>
+                  <div class="input">
+                    <i class='bx bx-globe'></i>
+                    <input id="xtHost" placeholder="ex: http://example.com:8080" />
+                  </div>
+                </div>
+                <div class="field">
+                  <label for="xtProtocol">Protocole</label>
+                  <div class="input">
+                    <i class='bx bx-traffic-barrier'></i>
+                    <select id="xtProtocol">
+                      <option value="http">HTTP</option>
+                      <option value="https">HTTPS</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+              <div class="row-2">
+                <div class="field">
+                  <label for="xtUser">Utilisateur</label>
+                  <div class="input">
+                    <i class='bx bx-user'></i>
+                    <input id="xtUser" placeholder="username" />
+                  </div>
+                </div>
+                <div class="field">
+                  <label for="xtPass">Mot de passe</label>
+                  <div class="input">
+                    <i class='bx bx-lock-alt'></i>
+                    <input id="xtPass" type="password" placeholder="password" />
+                  </div>
+                </div>
+              </div>
+              <div class="cta">
+                <button type="button" class="btn" id="loginXtream"><i class='bx bx-log-in'></i> Se connecter</button>
+                <button type="button" class="btn secondary" id="testXtream"><i class='bx bx-plug'></i> Tester</button>
+              </div>
+              <div class="success" id="xtSuccess"><i class='bx bx-check-shield'></i> Authentification réussie (démo).</div>
+              <div class="error" id="xtError"><i class='bx bx-error'></i> Paramètres Xtream incomplets.</div>
+            </form>
+            <!-- M3U -->
+            <form id="form-m3u" class="form hidden" autocomplete="on">
+              <div class="field">
+                <label for="m3uUrl">URL de la playlist M3U/M3U8</label>
+                <div class="input">
+                  <i class='bx bx-link-external'></i>
+                  <input id="m3uUrl" placeholder="https://.../playlist.m3u8" />
+                </div>
+              </div>
+              <div class="field">
+                <label for="m3uEpg">URL EPG (optionnel)</label>
+                <div class="input">
+                  <i class='bx bx-calendar-event'></i>
+                  <input id="m3uEpg" placeholder="https://.../guide.xml" />
+                </div>
+              </div>
+              <div class="cta">
+                <button type="button" class="btn" id="loadM3u"><i class='bx bx-cloud-download'></i> Charger</button>
+                <button type="button" class="btn secondary" id="demoM3u"><i class='bx bx-line-chart'></i> Utiliser démo</button>
+              </div>
+              <div class="success" id="m3uSuccess"><i class='bx bx-check-shield'></i> Playlist chargée (démo).</div>
+              <div class="error" id="m3uError"><i class='bx bx-error'></i> URL non valide.</div>
+            </form>
+            <!-- QR -->
+            <div id="form-qr" class="form hidden">
+              <div class="field">
+                <label>Scanner un QR Code</label>
+                <div class="qr-box" id="qrBox">
+                  <i class='bx bx-qr' style="font-size: 56px; color: var(--muted)"></i>
+                </div>
+                <div class="helper">Autorisez l’accès à la caméra pour scanner (démo non connectée au flux caméra).</div>
+              </div>
+              <div class="cta">
+                <button type="button" class="btn" id="startQr"><i class='bx bx-camera'></i> Démarrer</button>
+                <button type="button" class="btn secondary" id="pasteQr"><i class='bx bx-clipboard'></i> Coller un contenu</button>
+              </div>
+              <div class="success" id="qrSuccess"><i class='bx bx-check-shield'></i> QR lu (démo) — paramètres appliqués.</div>
+              <div class="error" id="qrError"><i class='bx bx-error'></i> Lecture QR impossible.</div>
+            </div>
+          </div>
+          <div class="connect-panel">
+            <h3 style="margin:0 0 10px;font-size:16px">Aperçu de session</h3>
+            <div class="empty" id="sessionEmpty">
+              <i class='bx bx-id-card' style="font-size: 28px;"></i>
+              <div>Non connecté. Choisissez un mode de connexion à gauche.</div>
+            </div>
+            <div id="sessionInfo" class="hidden">
+              <div class="tag" id="sessionMode">Mode: -</div>
+              <div style="height:8px"></div>
+              <div class="grid" style="--card-w: 180px;" id="sessionPreview">
+                <!-- quelques cartes de démo chargées après connexion -->
+              </div>
+              <div style="height:10px"></div>
+              <div class="cta">
+                <button class="btn" id="goToLive"><i class='bx bx-television'></i> Aller au Direct</button>
+                <button class="btn secondary" id="disconnect"><i class='bx bx-power-off'></i> Se déconnecter</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+      <!-- Catalogue grids -->
+      <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">
     const tabs = document.querySelectorAll('.tab');
     const grids = {
+      connect: document.getElementById('grid-connect'),
       live: document.getElementById('grid-live'),
       vod: document.getElementById('grid-vod'),
       series: document.getElementById('grid-series'),
       favs: document.getElementById('grid-favs'),
       recent: document.getElementById('grid-recent')
     };
+    const catalogToolbar = document.getElementById('catalogToolbar');
     // Tabs
     tabs.forEach(tab => {
         tab.classList.add('active');
         const chosen = tab.dataset.tab;
         Object.keys(grids).forEach(k => grids[k].classList.toggle('hidden', k !== chosen));
+        // hide toolbar on connection tab
+        catalogToolbar.style.display = chosen === 'connect' ? 'none' : '';
         localStorage.setItem('iptv_tab', chosen);
         applySearchAndFilters();
       });
     function saveFavs(f) { localStorage.setItem('iptv_favs', JSON.stringify(f)); }
     function favKey(item, type){ return `${type}:${item.id}`; }
+    function