mirror of
https://github.com/R0m1k3/xtremflow.git
synced 2026-10-22 06:28:04 +02:00
feat(design): Warm Cinema redesign + fast-start players
Full visual overhaul from Cyber-Cinematic Glass to "Warm Cinema": warm charcoal (#0B0908), cream (#F3E9DF), ember (#D9541F). Fraunces (editorial serif) for display, Karla for body/UI. Design - app_colors: new palette, all existing token names preserved, plus posterScrim/heroScrim gradients and lift()/emberFocus() shadows - app_theme: new type scale, tighter radii, 20+ component themes - mobile_theme aligned on the same tokens - glass_container: opaque layered surfaces replace glassmorphism; adds GlassCard (hover + remote-focus states) and CinemaBackdrop - players and boot splash restyled (film-leader motif, no web fonts) Performance - remove every BackdropFilter (33 call sites): backdrop blur forced a full framebuffer read per frame per card, the main scroll jank source - bundle Fraunces/Karla as assets: google_fonts no longer fetches from fonts.gstatic.com at startup - drop the blocking hls.js CDN script from index.html; no Dart code ever used it, only the player iframes need it - self-host hls.js/mpegts.js and load them on demand, so ~213 KB of mpegts is never downloaded for HLS streams - bound image decode size on 10 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) - event-driven start instead of a 200 ms buffer poll plus a 1.5 s wait - initialLiveManifestSize 3 -> 1, liveSyncDurationCount 10 -> 2, startFragPrefetch on, testBandwidth off - MPEG-TS initial stash 512 KB -> 64 KB - adaptive escalation fast -> balanced -> safe on repeated stalls (60 s rolling window), applied live for HLS so there is no visible cut Pre-existing build breakage fixed along the way - undefined AppColors.shimmer, AppTheme.durationXs and spacing8/12/16/32 - broken relative imports in channel_card and quality_selector_widget - missing GlassCard widget and hasBorder/showShadow parameters Also resolves a leftover unmerged .claude/settings.local.json by keeping the remote version. Still broken (pre-existing, dead code, not reachable from main.dart): recommendations_provider.dart and continue_watching_widget.dart import a models/playlist.dart that no longer exists. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
MichaelandClaude Opus 5 committed
1 parent
cb5eca7547
commit
6f0f51384a
54 files changed
+2425
-1775
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, #0F1014 0%, #181920 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, #007AFF 0%, #00C6FF 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(0, 122, 255, 0.2);
|
||||
border-top-color: #007AFF;
|
||||
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 -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></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