xtremflow/web/index.html

<!DOCTYPE html>
<html lang="fr">

<head>
  <base href="$FLUTTER_BASE_HREF">
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="XtremFlow — streaming IPTV">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="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="XtremFlow">
  <meta name="theme-color" content="#0B0908">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <title>XtremFlow</title>

  <link rel="icon" type="image/png" href="favicon.png">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">
  <link rel="manifest" href="manifest.json">

  <style>
    /* =============================================================
     * Amorce « Warm Cinema » — charbon chaud, crème, braise.
     * Aucune police web, aucun script tiers : rien ne retarde le boot.
     * ============================================================= */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background: radial-gradient(120% 90% at 22% 0%, #1A1310 0%, #0B0908 62%);
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      overflow: hidden;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    :fullscreen,
    ::backdrop {
      overflow: hidden !important;
    }

    *:fullscreen,
    *:fullscreen * {
      overflow: hidden !important;
    }

    .boot {
      text-align: center;
      animation: rise 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .mark {
      font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
      font-size: clamp(34px, 7vw, 58px);
      font-weight: 600;
      letter-spacing: 0.14em;
      color: #F3E9DF;
      text-transform: uppercase;
      line-height: 1;
    }

    /* Le « W » d'XtremFlow porte la braise */
    .mark em {
      font-style: normal;
      color: #D9541F;
    }

    /* Barre d'amorce : balayage lent, comme une pellicule qui se lance */
    .leader {
      position: relative;
      width: min(240px, 56vw);
      height: 2px;
      margin: 26px auto 0;
      background: rgba(243, 233, 223, 0.12);
      overflow: hidden;
    }

    .leader::after {
      content: "";
      position: absolute;
      inset: 0 auto 0 0;
      width: 42%;
      background: linear-gradient(90deg, transparent, #D9541F, transparent);
      animation: wipe 1150ms cubic-bezier(0.5, 0, 0.5, 1) infinite;
    }

    .caption {
      margin-top: 16px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: rgba(243, 233, 223, 0.38);
    }

    @keyframes wipe {
      from {
        transform: translateX(-100%);
      }

      to {
        transform: translateX(340%);
      }
    }

    @keyframes rise {
      from {
        opacity: 0;
        transform: translateY(12px);
      }

      to {
        opacity: 1;
        transform: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .boot,
      .leader::after {
        animation-duration: 2.4s;
      }
    }
  </style>
</head>

<body>
  <div class="boot">
    <div class="mark">Xtrem<em>Flow</em></div>
    <div class="leader"></div>
    <div class="caption">Projection</div>
  </div>

  <!--
    hls.js n'est plus chargé ici. Il était récupéré depuis un CDN de façon
    BLOQUANTE avant flutter_bootstrap.js alors qu'aucun code Dart ne
    l'utilise : seuls les iframes de lecture en ont besoin, et elles le
    chargent désormais elles-mêmes, en local et à la demande.
  -->
  <script src="flutter_bootstrap.js" async></script>
</body>

</html>