mirror of
https://github.com/R0m1k3/xtremflow.git
synced 2026-10-17 20:29:30 +02:00
feat(design): Warm Cinema theme + event-driven adaptive players
Replaces the Projector Noir palette with "Warm Cinema" and rebuilds the web players around a shared, event-driven engine. Design - app_colors: warm charcoal (#0B0908), cream (#F3E9DF), ember (#D9541F); adds posterScrim/heroScrim gradients, lift()/emberFocus() shadows, const cream-alpha tokens replacing Colors.whiteNN, and primaryFill, a deeper ember reserved for text-bearing fills so white labels clear the 4.5:1 AA threshold that #D9541F alone does not - app_theme / mobile_theme: Fraunces (display serif) + Karla (body), tighter radii, 20+ component themes - glass_container: opaque layered surfaces replace the blurred glass - themed_loading_screen restyled; players and boot splash follow Performance - drop every BackdropFilter: backdrop blur forced a full framebuffer read per frame per card, the main source of scroll jank - bundle Fraunces/Karla as assets so google_fonts stops fetching from fonts.gstatic.com at startup - bound image decode size on 12 sites: a 40-poster grid drops from ~240 MB to a few tens of MB of GPU memory Players (new shared engine: web/xf-player-core.js) - start on media events instead of polling the buffer every 100-200 ms - hls.js/mpegts.js loaded on demand, so ~213 KB of mpegts is never fetched for HLS streams - liveSyncDurationCount 10 -> 2, startFragPrefetch on, testBandwidth off, MPEG-TS initial stash 512 KB -> 64 KB - adaptive escalation fast -> balanced -> safe after repeated stalls in a 60 s window, applied live for HLS so there is no visible cut Preserved from the recent streaming work on main: server-side quality selection, stable player viewId, the turbo direct MPEG-TS path, vendored library cache headers and the CI/Docker changes. Only the theme layer and the player front-end were replaced; GlassCard stays in ui_components. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
MichaelandClaude Opus 5 committed
1 parent
e332895d7d
commit
1feeaae78a
49 files changed
+2341
-1751
No files matched your search
+83
-47
@@ -1,25 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<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 - Modern IPTV Streaming Application">
|
||||
<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="#0A0E1A">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>XtremFlow IPTV</title>
|
||||
<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>
|
||||
|
||||
<!-- Favicon -->
|
||||
<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;
|
||||
@@ -27,16 +31,15 @@
|
||||
}
|
||||
|
||||
body {
|
||||
background: linear-gradient(135deg, #0B0A08 0%, #1B1812 100%);
|
||||
background: radial-gradient(120% 90% at 22% 0%, #1A1310 0%, #0B0908 62%);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
font-family: 'Inter', 'Roboto', sans-serif;
|
||||
overflow: hidden;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* Fullscreen mode - prevent scrollbars */
|
||||
:fullscreen,
|
||||
::backdrop {
|
||||
overflow: hidden !important;
|
||||
@@ -47,68 +50,101 @@
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
.boot {
|
||||
text-align: center;
|
||||
animation: fadeIn 0.5s ease-out;
|
||||
animation: rise 620ms cubic-bezier(0.16, 1, 0.3, 1) both;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 48px;
|
||||
.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;
|
||||
background: linear-gradient(135deg, #E8941A 0%, #FFC36A 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
margin-bottom: 24px;
|
||||
letter-spacing: -1px;
|
||||
letter-spacing: 0.32em;
|
||||
text-transform: uppercase;
|
||||
color: rgba(243, 233, 223, 0.38);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
margin: 0 auto 16px;
|
||||
border: 3px solid rgba(243, 154, 31, 0.2);
|
||||
border-top-color: #F39A1F;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes wipe {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
.loading-text {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: 'Outfit', sans-serif;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
transform: translateX(340%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
@keyframes rise {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
transform: translateY(12px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
.boot,
|
||||
.leader::after {
|
||||
animation-duration: 2.4s;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="loading-container">
|
||||
<div class="logo">XtremFlow</div>
|
||||
<div class="spinner"></div>
|
||||
<div class="loading-text">Loading...</div>
|
||||
<div class="boot">
|
||||
<div class="mark">Xtrem<em>Flow</em></div>
|
||||
<div class="leader"></div>
|
||||
<div class="caption">Projection</div>
|
||||
</div>
|
||||
<!-- HLS.js for HLS video playback on Chrome/Firefox (vendored, pinned) -->
|
||||
<script src="vendor/hls.min.js"></script>
|
||||
|
||||
<!--
|
||||
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>
|
||||
</html>
|
||||
Reference in new issue
Block a user