iptv-android-tv-hermes/Site web/index.html

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>iMedia TV+ | Application IPTV Android TV</title>
  <meta name="description" content="Application IPTV Android TV compatible Xtream et M3U avec LIVE, VOD, Séries, Recherche, Replay, YouTube, Continuer à regarder et tri intelligent.">
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="header">
  <nav class="nav">
    <a class="brand" href="#top"><img src="assets/logo.svg" alt=""> iMedia TV+</a>
    <button class="burger" id="burger" aria-label="Menu"><span></span><span></span><span></span></button>
    <div class="links" id="links">
      <a href="#features">Fonctionnalités</a>
      <a href="#experience">Expérience TV</a>
      <a href="#packs">Offres</a>
      <a href="#faq">FAQ</a>
      <a class="cta-small" href="#contact">Démo</a>
    </div>
  </nav>
</header>

<main id="top">
<section class="hero">
  <div class="glow"></div>
  <div class="container hero-grid">
    <div>
      <p class="eyebrow">Android TV • Google TV • Mi Box • Xtream • M3U</p>
      <h1>Votre application IPTV professionnelle, rapide et prête à vendre.</h1>
      <p class="lead">iMedia TV+ transforme une Android TV en plateforme IPTV complète : chaînes LIVE, VOD, séries, replay, recherche globale, YouTube, historique intelligent et navigation télécommande.</p>
      <div class="actions">
        <a class="btn primary" href="#contact">Demander une démo</a>
        <a class="btn secondary" href="#features">Voir les fonctionnalités</a>
      </div>
      <div class="badges">
        <span>Xtream Codes</span><span>M3U / M3U Plus</span><span>100% télécommande</span>
      </div>
    </div>

    <div class="screen-card">
      <div class="screen">
        <div class="screen-bar"><span></span><span></span><span></span><b>iMedia TV+</b></div>
        <div class="screen-body">
          <div class="tiles">
            <div class="tile active">TV<small>Chaînes en direct</small></div>
            <div class="tile">VOD<small>Films</small></div>
            <div class="tile">SÉRIES<small>Épisodes</small></div>
            <div class="tile">SRC<small>Recherche</small></div>
            <div class="tile">YT<small>YouTube</small></div>
          </div>
          <h4>Dernières chaînes LIVE</h4>
          <div class="mini-row"><div>SPORT HD</div><div>NEWS 24</div><div>MOVIES</div></div>
          <h4>Continuer à regarder</h4>
          <div class="continue"><i></i><div><b>Série en cours</b><small>Épisode 04 • reprise instantanée</small><em><span></span></em></div></div>
        </div>
      </div>
      <p>Interface pensée pour grands écrans, focus visible et télécommande.</p>
    </div>
  </div>
</section>

<section class="strip">
  <div class="container strip-grid"><span>Android TV</span><span>Google TV</span><span>Mi Box</span><span>Xtream API</span><span>M3U</span></div>
</section>

<section id="features" class="section">
  <div class="container">
    <div class="section-title">
      <p class="eyebrow">Fonctionnalités</p>
      <h2>Tout ce qu’un lecteur IPTV moderne doit offrir.</h2>
      <p>Une application complète, claire et rapide, au lieu d’une interface bricolée qui donne envie de jeter la télécommande par la fenêtre.</p>
    </div>
    <div class="grid features">
      <article><strong>TV</strong><h3>LIVE rapide</h3><p>Chargement optimisé des chaînes, lecture plein écran, zapping et catégories.</p></article>
      <article><strong>VOD</strong><h3>Films à la demande</h3><p>Catalogue VOD, affiches, lecture et reprise intelligente.</p></article>
      <article><strong>SER</strong><h3>Séries & épisodes</h3><p>Gestion des saisons, épisodes et progression de visionnage.</p></article>
      <article><strong>SRC</strong><h3>Recherche globale</h3><p>Recherche LIVE, VOD et séries sans bloquer l’interface.</p></article>
      <article><strong>↺</strong><h3>Continuer à regarder</h3><p>Reprise des films et épisodes commencés avec barre de progression.</p></article>
      <article><strong>★</strong><h3>Tri par usage</h3><p>Les catégories, chaînes et contenus les plus utilisés remontent automatiquement.</p></article>
      <article><strong>⏱</strong><h3>Replay / timeshift</h3><p>Support du replay quand le fournisseur Xtream le permet.</p></article>
      <article><strong>YT</strong><h3>YouTube intégré</h3><p>Ajout de vidéos YouTube par URL, miniatures et lecteur intégré.</p></article>
      <article><strong>🔒</strong><h3>Stockage sécurisé</h3><p>Identifiants stockés localement avec chiffrement Android.</p></article>
    </div>
  </div>
</section>

<section id="experience" class="section dark">
  <div class="container split">
    <div>
      <p class="eyebrow">Expérience TV</p>
      <h2>Conçue pour la télécommande, pas pour martyriser l’utilisateur.</h2>
      <p>iMedia TV+ propose une navigation claire : menu principal, dernières chaînes LIVE, continuer à regarder, scroll vertical, focus visible et saisie adaptée aux Mi Box.</p>
      <ul class="checks">
        <li>Menu TV, VOD, Séries, Recherche et YouTube.</li>
        <li>Dernières chaînes LIVE au-dessus de l’historique.</li>
        <li>Reprise automatique des VOD et épisodes.</li>
        <li>Saisie via fenêtre native compatible Android TV.</li>
        <li>Navigation DPAD / télécommande optimisée.</li>
      </ul>
    </div>
    <div class="stats">
      <div><b>2 sec</b><span>Chargement LIVE constaté sur base optimisée</span></div>
      <div><b>3</b><span>Sources dans la recherche : LIVE, VOD, séries</span></div>
      <div><b>100%</b><span>Interface pensée Android TV</span></div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container split">
    <div class="card">
      <h2>Compatible Xtream & M3U</h2>
      <p>Connexion par base serveur Xtream, identifiant et mot de passe, ou par playlist M3U distante.</p>
      <code>http://serveur.com:8080</code>
      <code>https://exemple.com/playlist.m3u</code>
    </div>
    <div class="card highlight">
      <h2>Version white label</h2>
      <p>Nom, logo, couleurs, écran d’accueil et options peuvent être adaptés pour revendeurs, hôtels, résidences, intégrateurs ou projets média.</p>
      <a class="btn primary" href="#contact">Créer ma version</a>
    </div>
  </div>
</section>

<section id="packs" class="section">
  <div class="container">
    <div class="section-title">
      <p class="eyebrow">Offres</p>
      <h2>Des formules simples à vendre.</h2>
      <p>Remplace les prix par tes vrais tarifs. Oui, il faut choisir un prix, cet antique rituel commercial.</p>
    </div>
    <div class="grid pricing">
      <article>
        <h3>Starter</h3>
        <b>49 €</b>
        <p>Application standard, Xtream/M3U, APK prêt à installer. Paiement sécurisé via Payhip.</p>
        <!-- Remplace REMPLACER_CLE_PAYHIP par la clé produit Payhip.
             Exemple : si ton produit est https://payhip.com/b/ean3D,
             le lien direct checkout est https://payhip.com/buy?link=ean3D -->
        <a class="btn primary" href="https://payhip.com/buy?link=REMPLACER_CLE_PAYHIP" target="_blank" rel="noopener">Acheter Starter</a>
      </article>
      <article class="popular"><small>Populaire</small><h3>White Label</h3><b>Sur devis</b><p>Nom, logo, couleurs, personnalisation et aide installation Mi Box.</p><a class="btn primary" href="#contact">Démo</a></article>
      <article><h3>Sur mesure</h3><b>Projet</b><p>Fonctionnalités spécifiques, API privée, portail client, maintenance.</p><a class="btn secondary" href="#contact">Discuter</a></article>
    </div>
  </div>
</section>

<section id="faq" class="section dark">
  <div class="container narrow">
    <div class="section-title"><p class="eyebrow">FAQ</p><h2>Questions fréquentes</h2></div>
    <details><summary>L’application fournit-elle des chaînes ?</summary><p>Non. iMedia TV+ est un lecteur. Le client utilise ses propres accès ou playlists autorisés.</p></details>
    <details><summary>Est-ce compatible Mi Box ?</summary><p>Oui. L’interface a été conçue et testée pour Android TV, Google TV et Mi Box.</p></details>
    <details><summary>Peut-on personnaliser l’application ?</summary><p>Oui : nom, logo, couleurs, écran d’accueil et options selon le projet.</p></details>
    <details><summary>Peut-on ajouter des fonctions ?</summary><p>Oui : profils, panneau admin, paiement, EPG avancé, portail client, etc.</p></details>
    <details><summary>Comment se passe l’achat Starter ?</summary><p>Le bouton Starter envoie directement vers le checkout Payhip. Après paiement, Payhip livre le fichier numérique que tu as attaché au produit : APK, ZIP, guide d’installation ou pack complet.</p></details>
  </div>
</section>

<section id="contact" class="section contact">
  <div class="container split">
    <div>
      <p class="eyebrow">Contact</p>
      <h2>Demandez une démo ou une version personnalisée.</h2>
      <p>Remplace l’email du formulaire par ton vrai email, ajoute ton WhatsApp, et le site est prêt à publier.</p>
    </div>
    <form action="mailto:contact@votre-domaine.com" method="post" enctype="text/plain">
      <label>Nom<input name="Nom" placeholder="Votre nom"></label>
      <label>Email<input name="Email" type="email" placeholder="email@exemple.com"></label>
      <label>Projet<select name="Projet"><option>Application standard</option><option>White label</option><option>Sur mesure</option></select></label>
      <label>Message<textarea name="Message" rows="5" placeholder="Décrivez votre besoin..."></textarea></label>
      <button class="btn primary" type="submit">Envoyer la demande</button>
    </form>
  </div>
</section>
</main>

<footer>
  <div class="container footer-grid">
    <div><a class="brand" href="#top"><img src="assets/logo.svg" alt=""> iMedia TV+</a><p>Application Android TV compatible Xtream et M3U.</p></div>
    <div><b>Navigation</b><a href="#features">Fonctionnalités</a><a href="#packs">Offres</a><a href="#contact">Contact</a></div>
    <div><b>Note légale</b><p>iMedia TV+ ne fournit aucun contenu, chaîne, film ou abonnement. C’est un lecteur pour sources autorisées.</p></div>
  </div>
  <p class="copy">© <span id="year"></span> iMedia TV+. Tous droits réservés.</p>
</footer>
<script src="script.js"></script>
</body>
</html>