feat: security hardening, streaming overhaul, design polish, tests

Security:
- Replace unsalted SHA-256 password hashing with bcrypt (lazy rehash on login)
- Add authenticated /api/xtream-api gateway: Xtream credentials are injected
  server-side and never sent to the frontend; /api/playlists no longer
  returns passwords
- Redact credentials from all logs (login body, proxy/FFmpeg/scheduler URLs)
- Add auth to recordings, EPG, season-passes and streaming routes
  (HttpOnly session cookie for hls.js; loopback bypass for local FFmpeg)
- Lock player postMessage to same-origin in both directions
- Vendor and pin hls.js 1.6.7 / mpegts.js 1.7.3 (drop CDN @latest)
- Fix rate limiter (client IP was never resolved), add login rate limit,
  restrict CORS, add CSP Report-Only, block private-IP SSRF targets,
  fix path traversal in recording log retrieval, chmod 777 -> 770
- Remove dead HiveService (seeded admin/admin into IndexedDB with SHA-256)
- Fix authMiddleware not populating 'user' context (getPlaylist ignored the
  logged-in user; admin purge always returned 403)

Streaming:
- New FfmpegSessionManager: process registry, idle reaper (4 min live /
  15 min VOD), orphan cleanup at startup, clean SIGTERM shutdown,
  fast-fail with stderr instead of 30 s timeout
- Quality selection (source/high/medium/low) for live and VOD; source mode
  streams with -c:v copy (zero transcoding); selector wired into the player
- Concurrent recordings (MAX_CONCURRENT_RECORDINGS, default 2); conflicts
  retry on the next tick instead of silently failing
- Lower live latency (HLS window 20 -> 10 segments, liveSync 10 -> 3)
- Fix recording log lookup (.mp4 vs .mkv mismatch)

Design:
- Replace hardcoded colors with AppColors tokens (12 files)
- web/theme.css syncs HTML players with the Flutter palette
- DPAD/keyboard navigation (arrow-key focus, player shortcuts)
- Tooltips on player icon buttons, Semantics on content cards
- Remove 7 dead widgets broken since the Stitch merge

Quality:
- bin/test/: 21 unit tests (bcrypt, redaction, traversal, SSRF, recording
  conflicts) plus a quality-selector widget test
- GitHub Actions CI (analyze + test + build web)
- Archive stale status docs into docs/archive/

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
MichaelandClaude Fable 5 committed 2026-06-10 10:07:18 +02:00
1 parent cb5eca7547
commit 60d3f42901
107 files changed
+4525 -3815

No files matched your search

@@ -0,0 +1,442 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>XtremFlow - Admin Settings</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=Space+Grotesk:wght@500;600;700;900&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"surface-variant": "#343439",
"primary-fixed": "#d8e2ff",
"surface-bright": "#38393d",
"on-tertiary-container": "#282a2a",
"error-container": "#93000a",
"on-secondary": "#2f3037",
"on-primary-fixed-variant": "#004493",
"tertiary-container": "#909191",
"surface-container-lowest": "#0d0e12",
"inverse-on-surface": "#2f3035",
"surface-container-highest": "#343439",
"surface": "#121317",
"secondary-fixed-dim": "#c6c5cf",
"on-tertiary": "#2f3131",
"surface-dim": "#121317",
"on-secondary-fixed": "#1a1b22",
"on-primary": "#002e69",
"primary": "#adc6ff",
"primary-fixed-dim": "#adc6ff",
"outline": "#8b90a0",
"secondary": "#c6c5cf",
"surface-tint": "#adc6ff",
"surface-container-high": "#292a2e",
"on-tertiary-fixed-variant": "#454747",
"error": "#ffb4ab",
"on-surface": "#e3e2e7",
"secondary-container": "#4a4b53",
"on-primary-fixed": "#001a41",
"tertiary-fixed": "#e2e2e2",
"on-secondary-container": "#bcbbc4",
"on-secondary-fixed-variant": "#46464e",
"inverse-primary": "#005bc1",
"primary-container": "#4b8eff",
"tertiary": "#c6c6c7",
"inverse-surface": "#e3e2e7",
"on-error-container": "#ffdad6",
"surface-container": "#1f1f24",
"on-tertiary-fixed": "#1a1c1c",
"surface-container-low": "#1a1b20",
"on-error": "#690005",
"tertiary-fixed-dim": "#c6c6c7",
"secondary-fixed": "#e3e1eb",
"on-surface-variant": "#c1c6d7",
"on-background": "#e3e2e7",
"outline-variant": "#414755",
"background": "#121317",
"on-primary-container": "#00285c"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"base": "8px",
"xl": "80px",
"lg": "48px",
"md": "24px",
"sm": "12px",
"xs": "4px",
"margin": "32px",
"gutter": "24px"
},
"fontFamily": {
"body-md": ["Inter"],
"headline-lg": ["Space Grotesk"],
"label-lg": ["Inter"],
"headline-xl": ["Space Grotesk"],
"label-sm": ["Inter"],
"body-lg": ["Inter"],
"headline-md": ["Space Grotesk"]
},
"fontSize": {
"body-md": ["16px", {"lineHeight": "1.5", "fontWeight": "400"}],
"headline-lg": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"label-lg": ["14px", {"lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "600"}],
"headline-xl": ["48px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"label-sm": ["12px", {"lineHeight": "1.2", "letterSpacing": "0.02em", "fontWeight": "500"}],
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
"headline-md": ["24px", {"lineHeight": "1.3", "fontWeight": "500"}]
}
}
}
}
</script>
<style>
/* Custom Glassmorphism and Utility Styles not easily covered by Tailwind config alone */
.glass-panel {
background-color: rgba(31, 31, 36, 0.6); /* surface-container with opacity */
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.glass-panel:hover {
border-color: rgba(255, 255, 255, 0.2);
}
.glow-text {
text-shadow: 0 0 10px rgba(173, 198, 255, 0.5); /* primary color glow */
}
.progress-glow {
box-shadow: 0 0 12px rgba(75, 142, 255, 0.6); /* primary-container glow */
}
/* Custom Scrollbar for sleek look */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #414755; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #8b90a0; }
</style>
</head>
<body class="bg-background text-on-background font-body-md text-body-md antialiased overflow-x-hidden selection:bg-primary-container selection:text-white">
<div class="flex min-h-screen w-full relative">
<!-- SideNavBar -->
<nav class="fixed left-0 top-0 h-full w-64 border-r border-white/10 shadow-2xl bg-slate-950/80 backdrop-blur-2xl flex flex-col py-6 z-50">
<div class="px-6 mb-10 flex items-center gap-sm">
<div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary-container to-[#005bc1] flex items-center justify-center shadow-[0_0_15px_rgba(75,142,255,0.4)]">
<span class="material-symbols-outlined text-white text-[24px]">stream</span>
</div>
<div>
<h1 class="text-xl font-black text-white font-headline-md tracking-tight leading-none">XtremFlow</h1>
<span class="text-xs text-slate-400 font-label-sm uppercase tracking-widest mt-1 block">Media Control</span>
</div>
</div>
<div class="flex-1 overflow-y-auto px-2 space-y-1">
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:bg-white/5 hover:text-slate-100 transition-colors active:translate-x-1 duration-150 font-['Space_Grotesk'] font-medium rounded-lg mx-2" href="#">
<span class="material-symbols-outlined text-[20px]">dashboard</span>
Dashboard
</a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:bg-white/5 hover:text-slate-100 transition-colors active:translate-x-1 duration-150 font-['Space_Grotesk'] font-medium rounded-lg mx-2" href="#">
<span class="material-symbols-outlined text-[20px]">video_library</span>
Library
</a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:bg-white/5 hover:text-slate-100 transition-colors active:translate-x-1 duration-150 font-['Space_Grotesk'] font-medium rounded-lg mx-2" href="#">
<span class="material-symbols-outlined text-[20px]">insights</span>
Analytics
</a>
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:bg-white/5 hover:text-slate-100 transition-colors active:translate-x-1 duration-150 font-['Space_Grotesk'] font-medium rounded-lg mx-2" href="#">
<span class="material-symbols-outlined text-[20px]">cloud_upload</span>
Media Manager
</a>
<!-- Active Item -->
<a class="flex items-center gap-3 px-4 py-3 text-blue-400 border-l-4 border-blue-500 bg-blue-500/10 active:translate-x-1 duration-150 font-['Space_Grotesk'] font-medium rounded-r-lg ml-2 mr-2" href="#">
<span class="material-symbols-outlined text-[20px]" style="font-variation-settings: 'FILL' 1;">admin_panel_settings</span>
Admin Settings
</a>
</div>
<div class="px-4 mt-auto space-y-1">
<a class="flex items-center gap-3 px-4 py-3 text-slate-400 hover:bg-white/5 hover:text-slate-100 transition-colors active:translate-x-1 duration-150 font-['Space_Grotesk'] font-medium rounded-lg mx-2" href="#">
<span class="material-symbols-outlined text-[20px]">help</span>
Support
</a>
<a class="flex items-center gap-3 px-4 py-3 text-error hover:bg-error/10 transition-colors active:translate-x-1 duration-150 font-['Space_Grotesk'] font-medium rounded-lg mx-2 mt-2" href="#">
<span class="material-symbols-outlined text-[20px]">logout</span>
Logout
</a>
</div>
</nav>
<!-- Main Content Area -->
<main class="ml-64 flex-1 flex flex-col min-h-screen relative w-[calc(100%-16rem)]">
<!-- TopNavBar -->
<header class="docked full-width top-0 sticky z-40 border-b border-white/10 shadow-[0_0_20px_rgba(0,0,0,0.5)] bg-slate-950/50 backdrop-blur-xl flex justify-between items-center w-full px-6 py-3 font-['Space_Grotesk'] text-sm tracking-tight text-blue-500">
<div class="flex items-center gap-6 flex-1">
<div class="relative w-full max-w-md group">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 text-[18px] group-focus-within:text-blue-400 transition-colors">search</span>
<input class="w-full bg-[#181920] border border-outline-variant/50 rounded-full pl-10 pr-4 py-2 text-on-surface focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 focus:bg-[#1f2029] transition-all placeholder:text-slate-500 font-body-md text-sm" placeholder="Search system resources, users, or settings..." type="text"/>
</div>
</div>
<div class="flex items-center gap-sm ml-auto">
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-white/5 hover:text-white transition-all active:scale-95 duration-200 relative text-slate-400">
<span class="material-symbols-outlined">notifications</span>
<span class="absolute top-2 right-2 w-2 h-2 bg-blue-500 rounded-full shadow-[0_0_8px_rgba(59,130,246,0.8)]"></span>
</button>
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-white/5 hover:text-white transition-all active:scale-95 duration-200 text-slate-400">
<span class="material-symbols-outlined">settings</span>
</button>
<div class="w-px h-6 bg-white/10 mx-2"></div>
<button class="flex items-center gap-2 hover:bg-white/5 p-1 pr-3 rounded-full transition-all border border-transparent hover:border-white/10">
<img alt="User profile avatar" class="w-8 h-8 rounded-full border border-white/20 object-cover" data-alt="Portrait of a male user with glasses and short dark hair against a light background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDba2WTdK70Rwv4MbN3nX7oK51wv0COSzCNRPk7ZjzoVkwQHRY1f9Bj-SHsmp8AEdOfovgsacwFO_lDg9MyaqRQyUm_VRuVACWugh---Z_lhHUjs0rO-OUvz72Evds-I7XmIVszJsYbdvBUmUx41xf4TgBcIULjOdM8o8Gqd9sErK33Mqb7FS55FC-Xw-ryt18A7UH4iH215IRWQVYUQ3hFZRm1QGb0oKKoXTRBk5_LnAKgeh4LkTTmKnUjywfNDzFh05E42-Jv8HY"/>
<span class="text-slate-200 font-medium text-sm hidden lg:block">Admin</span>
<span class="material-symbols-outlined text-[16px] text-slate-400">expand_more</span>
</button>
</div>
</header>
<!-- Page Content -->
<div class="p-margin flex-1 flex flex-col gap-lg max-w-[1600px] w-full mx-auto">
<!-- Page Header -->
<div class="flex flex-col md:flex-row md:items-end justify-between gap-md">
<div>
<h2 class="font-headline-xl text-headline-xl text-white tracking-tight mb-xs">System Administration</h2>
<p class="font-body-md text-body-md text-on-surface-variant max-w-2xl">Monitor server performance, manage user access levels, and configure global environment variables for the XtremFlow network.</p>
</div>
<div class="flex gap-sm">
<button class="px-md py-sm rounded-lg font-label-lg text-label-lg border border-outline-variant bg-surface-container/30 text-on-surface hover:bg-surface-container/50 hover:border-outline transition-all flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">download</span> Export Logs
</button>
<button class="bg-gradient-to-r from-[#007AFF] to-[#00c6ff] text-white px-md py-sm rounded-lg font-label-lg text-label-lg shadow-[0_4px_15px_rgba(0,122,255,0.3)] hover:shadow-[0_6px_20px_rgba(0,122,255,0.5)] hover:scale-[1.02] transition-all flex items-center gap-2 border border-blue-400/30">
<span class="material-symbols-outlined text-[18px]">person_add</span> Add User
</button>
</div>
</div>
<!-- Server Performance Bento Grid -->
<section class="grid grid-cols-1 lg:grid-cols-12 gap-gutter">
<!-- CPU Node -->
<div class="col-span-1 lg:col-span-4 glass-panel rounded-xl p-md flex flex-col relative overflow-hidden group">
<div class="absolute top-0 right-0 w-32 h-32 bg-blue-500/10 rounded-full blur-[40px] -mr-10 -mt-10 pointer-events-none"></div>
<div class="flex justify-between items-start mb-lg relative z-10">
<div>
<h3 class="font-headline-md text-sm text-on-surface-variant uppercase tracking-wider mb-1">Core Processing</h3>
<div class="font-headline-xl text-3xl text-white glow-text">78%</div>
</div>
<div class="w-10 h-10 rounded bg-blue-500/20 border border-blue-500/30 flex items-center justify-center text-blue-400">
<span class="material-symbols-outlined text-[20px]">memory</span>
</div>
</div>
<div class="mt-auto relative z-10">
<div class="flex justify-between text-xs text-on-surface-variant mb-2">
<span>Load Average: 2.14, 2.05, 1.98</span>
<span class="text-blue-400">Stable</span>
</div>
<div class="h-2 w-full bg-surface-container-highest/80 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-blue-600 to-[#00A3FF] w-[78%] rounded-full progress-glow relative">
<div class="absolute top-0 right-0 bottom-0 w-4 bg-white/20 blur-[2px]"></div>
</div>
</div>
</div>
</div>
<!-- Memory Node -->
<div class="col-span-1 lg:col-span-4 glass-panel rounded-xl p-md flex flex-col relative overflow-hidden">
<div class="absolute top-0 right-0 w-32 h-32 bg-purple-500/10 rounded-full blur-[40px] -mr-10 -mt-10 pointer-events-none"></div>
<div class="flex justify-between items-start mb-lg relative z-10">
<div>
<h3 class="font-headline-md text-sm text-on-surface-variant uppercase tracking-wider mb-1">Active Memory</h3>
<div class="font-headline-xl text-3xl text-white">42<span class="text-lg text-slate-400 ml-1">GB</span></div>
</div>
<div class="w-10 h-10 rounded bg-purple-500/20 border border-purple-500/30 flex items-center justify-center text-purple-400">
<span class="material-symbols-outlined text-[20px]">dns</span>
</div>
</div>
<div class="mt-auto relative z-10">
<div class="flex justify-between text-xs text-on-surface-variant mb-2">
<span>64 GB Total Capacity</span>
<span class="text-purple-400">65% Utilized</span>
</div>
<div class="h-2 w-full bg-surface-container-highest/80 rounded-full overflow-hidden">
<div class="h-full bg-gradient-to-r from-purple-600 to-purple-400 w-[65%] rounded-full shadow-[0_0_10px_rgba(168,85,247,0.5)]"></div>
</div>
</div>
</div>
<!-- Network Stats (List) -->
<div class="col-span-1 lg:col-span-4 glass-panel rounded-xl p-md flex flex-col">
<div class="flex items-center gap-2 mb-md">
<span class="material-symbols-outlined text-tertiary-container text-[20px]">swap_vert</span>
<h3 class="font-headline-md text-sm text-white uppercase tracking-wider">Network I/O</h3>
</div>
<div class="space-y-4 flex-1 flex flex-col justify-center">
<div class="flex justify-between items-center bg-surface-container-low/50 p-3 rounded-lg border border-white/5">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-green-400 text-[18px]">south_west</span>
<span class="text-sm text-slate-300">Inbound Traffic</span>
</div>
<span class="font-mono text-white text-sm">2.4 GB/s</span>
</div>
<div class="flex justify-between items-center bg-surface-container-low/50 p-3 rounded-lg border border-white/5">
<div class="flex items-center gap-3">
<span class="material-symbols-outlined text-blue-400 text-[18px]">north_east</span>
<span class="text-sm text-slate-300">Outbound Traffic</span>
</div>
<span class="font-mono text-white text-sm">8.1 GB/s</span>
</div>
</div>
</div>
</section>
<!-- Two Column Layout: Users & Settings -->
<div class="grid grid-cols-1 xl:grid-cols-3 gap-gutter items-start">
<!-- User Management Table (Spans 2 columns) -->
<div class="xl:col-span-2 glass-panel rounded-xl flex flex-col overflow-hidden">
<div class="p-md border-b border-white/10 flex justify-between items-center bg-surface-container/40">
<div>
<h3 class="font-headline-md text-lg text-white">Active Personnel</h3>
<p class="text-xs text-on-surface-variant mt-1">Manage admin and moderator access levels.</p>
</div>
<div class="flex items-center gap-2">
<span class="w-2 h-2 rounded-full bg-green-500 shadow-[0_0_8px_rgba(34,197,94,0.6)]"></span>
<span class="text-xs text-slate-300 font-medium">12 Online</span>
</div>
</div>
<div class="overflow-x-auto">
<table class="w-full text-left border-collapse">
<thead>
<tr class="border-b border-white/5 bg-surface-container-lowest/50 text-xs text-on-surface-variant uppercase tracking-wider font-label-sm">
<th class="py-4 px-md font-medium">User Profile</th>
<th class="py-4 px-md font-medium">Role Level</th>
<th class="py-4 px-md font-medium">Last Access</th>
<th class="py-4 px-md font-medium text-right">Actions</th>
</tr>
</thead>
<tbody class="text-sm font-body-md divide-y divide-white/5">
<tr class="hover:bg-white/[0.02] transition-colors group">
<td class="py-3 px-md">
<div class="flex items-center gap-3">
<img alt="Sarah Connor" class="w-8 h-8 rounded-full border border-white/10 object-cover" data-alt="Portrait of a young woman with dark hair smiling gently, studio lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDOSTUzzDMCE_BuwwZxnh8dIkjg2kUSd10fIxwI1A24MEqroG8fpglAh7e9CVVvvGdgXiWDiCdBqAzBJB6xhGGboZZr0eyj6j2VEUuqXKJxmXAqJeIkKEuGSRhx3nM4ONT9pPRIo8GuVT7YHKKFksXBNiHsjcfpSz1YWLX5P7dTpwBe1XoeNOQG9JpK7Xv1oGs5P3VL3Tkjn8pIlSjywUkfSQntepl2FggphhNkfv1Xp2yVrZts4mnnWlT5kvtlO93VWy7I0e-N_DA"/>
<div>
<div class="text-slate-200 font-medium">Sarah Connor</div>
<div class="text-xs text-slate-500 font-mono">s.connor@xtremflow.io</div>
</div>
</div>
</td>
<td class="py-3 px-md">
<span class="inline-flex items-center px-2 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-blue-500/10 text-blue-400 border border-blue-500/20">Super Admin</span>
</td>
<td class="py-3 px-md text-slate-400 font-mono text-xs">
2 mins ago<br/><span class="text-[10px] text-slate-500">192.168.1.104</span>
</td>
<td class="py-3 px-md text-right">
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="p-1.5 rounded bg-surface-container hover:bg-surface-bright text-slate-300 hover:text-white transition-colors border border-white/5" title="Edit User">
<span class="material-symbols-outlined text-[16px]">edit</span>
</button>
<button class="p-1.5 rounded bg-error-container/20 hover:bg-error-container/40 text-error hover:text-red-400 transition-colors border border-error/20" title="Revoke Access">
<span class="material-symbols-outlined text-[16px]">block</span>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-white/[0.02] transition-colors group">
<td class="py-3 px-md">
<div class="flex items-center gap-3">
<div class="w-8 h-8 rounded-full bg-purple-500/20 border border-purple-500/30 flex items-center justify-center text-purple-400 text-xs font-bold">JD</div>
<div>
<div class="text-slate-200 font-medium">John Doe</div>
<div class="text-xs text-slate-500 font-mono">j.doe@xtremflow.io</div>
</div>
</div>
</td>
<td class="py-3 px-md">
<span class="inline-flex items-center px-2 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-emerald-500/10 text-emerald-400 border border-emerald-500/20">Moderator</span>
</td>
<td class="py-3 px-md text-slate-400 font-mono text-xs">
1 hour ago<br/><span class="text-[10px] text-slate-500">10.0.0.42</span>
</td>
<td class="py-3 px-md text-right">
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="p-1.5 rounded bg-surface-container hover:bg-surface-bright text-slate-300 hover:text-white transition-colors border border-white/5">
<span class="material-symbols-outlined text-[16px]">edit</span>
</button>
<button class="p-1.5 rounded bg-error-container/20 hover:bg-error-container/40 text-error hover:text-red-400 transition-colors border border-error/20">
<span class="material-symbols-outlined text-[16px]">block</span>
</button>
</div>
</td>
</tr>
<tr class="hover:bg-white/[0.02] transition-colors group">
<td class="py-3 px-md">
<div class="flex items-center gap-3">
<img alt="Michael Chen" class="w-8 h-8 rounded-full border border-white/10 object-cover" data-alt="Portrait of a mature man looking off-camera with a serious expression, dark cinematic lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBXZoQNsetCsvQtmZGvMHjWgkp5jAXgOVpRJalasyuj5OwOB97vYPjvGVFVCKHTXnOaLbGh92sRbKIevyGpcYwTXorOfXPC7oXVNWLulLBRaNDX8CIMU53geIOehL1nZu6d8TmrdmdTcGaVLNu9Mj7jwsLtkXQhnT_-B83c9aW8CdLANPTxCfWzETp1uBvWIGt-7m1NsZCj5wz0Noc2BAAaTZgieX_HFKXVOSEVw43h962mbE4AfMtzeV-Ea78aGuFD1u5KRLq3a60"/>
<div>
<div class="text-slate-200 font-medium">Michael Chen</div>
<div class="text-xs text-slate-500 font-mono">m.chen@xtremflow.io</div>
</div>
</div>
</td>
<td class="py-3 px-md">
<span class="inline-flex items-center px-2 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider bg-slate-500/10 text-slate-400 border border-slate-500/20">Viewer</span>
</td>
<td class="py-3 px-md text-slate-400 font-mono text-xs">
Yesterday<br/><span class="text-[10px] text-slate-500">172.16.0.5</span>
</td>
<td class="py-3 px-md text-right">
<div class="flex items-center justify-end gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
<button class="p-1.5 rounded bg-surface-container hover:bg-surface-bright text-slate-300 hover:text-white transition-colors border border-white/5">
<span class="material-symbols-outlined text-[16px]">edit</span>
</button>
<button class="p-1.5 rounded bg-error-container/20 hover:bg-error-container/40 text-error hover:text-red-400 transition-colors border border-error/20">
<span class="material-symbols-outlined text-[16px]">block</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="p-3 border-t border-white/5 bg-surface-container-lowest/30 flex justify-center">
<button class="text-xs text-blue-400 hover:text-blue-300 font-medium transition-colors flex items-center gap-1">View All Users <span class="material-symbols-outlined text-[14px]">arrow_forward</span></button>
</div>
</div>
<!-- System Settings Form -->
<div class="glass-panel rounded-xl p-md flex flex-col h-full">
<div class="flex items-center gap-3 mb-6">
<span class="material-symbols-outlined text-slate-300">tune</span>
<h3 class="font-headline-md text-lg text-white">Environment Config</h3>
</div>
<form class="space-y-5 flex-1 flex flex-col">
<div>
<label class="block text-xs font-label-sm text-slate-400 mb-1.5 uppercase tracking-wider">Streaming Endpoint</label>
<input class="w-full bg-[#121317] border border-outline-variant/60 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 font-mono transition-all" type="text" value="rtmp://ingest.xtremflow.io/live"/>
</div>
<div>
<label class="block text-xs font-label-sm text-slate-400 mb-1.5 uppercase tracking-wider">Max Concurrent Streams</label>
<div class="relative">
<input class="w-full bg-[#121317] border border-outline-variant/60 rounded-lg px-3 py-2 text-sm text-slate-200 focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all font-mono" type="number" value="1000"/>
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-xs text-slate-500">connections</span>
</div>
</div>
<div class="flex items-center justify-between p-3 rounded-lg bg-surface-container-low/50 border border-white/5 mt-2">
<div>
<div class="text-sm text-slate-200 font-medium">Auto-Scaling</div>
<div class="text-xs text-slate-500">Deploy additional nodes on high load</div>
</div>
<label class="relative inline-flex items-center cursor-pointer">
<input checked="" class="sr-only peer" type="checkbox" value=""/>
<div class="w-9 h-5 bg-surface-container-highest rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-blue-500 border border-white/10 shadow-[inset_0_2px_4px_rgba(0,0,0,0.4)]"></div>
</label>
</div>
<div class="mt-auto pt-6 flex gap-3">
<button class="flex-1 py-2 rounded-lg text-sm font-medium text-slate-300 bg-surface-container hover:bg-surface-bright border border-white/10 transition-colors" type="button">Discard</button>
<button class="flex-1 py-2 rounded-lg text-sm font-medium text-on-primary-container bg-primary-container hover:bg-blue-400 transition-colors shadow-[0_0_10px_rgba(75,142,255,0.2)]" type="button">Apply Config</button>
</div>
</form>
</div>
</div>
</div>
</main>
</div>
</body></html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 340 KiB

+169
View File
@@ -0,0 +1,169 @@
---
name: Cyber-Cinematic Glass
colors:
surface: '#121317'
surface-dim: '#121317'
surface-bright: '#38393d'
surface-container-lowest: '#0d0e12'
surface-container-low: '#1a1b20'
surface-container: '#1f1f24'
surface-container-high: '#292a2e'
surface-container-highest: '#343439'
on-surface: '#e3e2e7'
on-surface-variant: '#c1c6d7'
inverse-surface: '#e3e2e7'
inverse-on-surface: '#2f3035'
outline: '#8b90a0'
outline-variant: '#414755'
surface-tint: '#adc6ff'
primary: '#adc6ff'
on-primary: '#002e69'
primary-container: '#4b8eff'
on-primary-container: '#00285c'
inverse-primary: '#005bc1'
secondary: '#c6c5cf'
on-secondary: '#2f3037'
secondary-container: '#4a4b53'
on-secondary-container: '#bcbbc4'
tertiary: '#c6c6c7'
on-tertiary: '#2f3131'
tertiary-container: '#909191'
on-tertiary-container: '#282a2a'
error: '#ffb4ab'
on-error: '#690005'
error-container: '#93000a'
on-error-container: '#ffdad6'
primary-fixed: '#d8e2ff'
primary-fixed-dim: '#adc6ff'
on-primary-fixed: '#001a41'
on-primary-fixed-variant: '#004493'
secondary-fixed: '#e3e1eb'
secondary-fixed-dim: '#c6c5cf'
on-secondary-fixed: '#1a1b22'
on-secondary-fixed-variant: '#46464e'
tertiary-fixed: '#e2e2e2'
tertiary-fixed-dim: '#c6c6c7'
on-tertiary-fixed: '#1a1c1c'
on-tertiary-fixed-variant: '#454747'
background: '#121317'
on-background: '#e3e2e7'
surface-variant: '#343439'
typography:
headline-xl:
fontFamily: Space Grotesk
fontSize: 48px
fontWeight: '700'
lineHeight: '1.1'
letterSpacing: -0.02em
headline-lg:
fontFamily: Space Grotesk
fontSize: 32px
fontWeight: '600'
lineHeight: '1.2'
letterSpacing: -0.01em
headline-md:
fontFamily: Space Grotesk
fontSize: 24px
fontWeight: '500'
lineHeight: '1.3'
body-lg:
fontFamily: Inter
fontSize: 18px
fontWeight: '400'
lineHeight: '1.6'
body-md:
fontFamily: Inter
fontSize: 16px
fontWeight: '400'
lineHeight: '1.5'
label-lg:
fontFamily: Inter
fontSize: 14px
fontWeight: '600'
lineHeight: '1.2'
letterSpacing: 0.05em
label-sm:
fontFamily: Inter
fontSize: 12px
fontWeight: '500'
lineHeight: '1.2'
letterSpacing: 0.02em
rounded:
sm: 0.25rem
DEFAULT: 0.5rem
md: 0.75rem
lg: 1rem
xl: 1.5rem
full: 9999px
spacing:
base: 8px
xs: 4px
sm: 12px
md: 24px
lg: 48px
xl: 80px
gutter: 24px
margin: 32px
---
## Brand & Style
The design system is built for a high-performance media environment where immersion is paramount. It targets power users who value speed, technical precision, and a premium aesthetic. The style is a sophisticated blend of **Glassmorphism** and **Futuristic Minimalism**.
The UI should feel like a high-tech command center—unobtrusive when consuming content but sharp and responsive during management tasks. By utilizing deep-space charcoals and translucent layers, the system creates a sense of infinite depth. The emotional response should be one of "effortless control" and "high-fidelity quality," achieved through high-contrast accents against an ultra-dark backdrop.
## Colors
The palette is optimized for OLED displays and low-light environments. The primary color is a vibrant neon blue, used sparingly for critical actions and active states to guide the eye without causing fatigue.
The background hierarchy uses `#0F1014` for the base canvas and `#181920` for elevated surfaces and containers. Grays are used exclusively for metadata and inactive iconography, ensuring they recede behind primary content. Accent gradients should transition from the primary blue into a deep cyan to simulate a "glowing" light source within the interface.
## Typography
This design system utilizes a dual-font strategy to balance technical aesthetics with readability. **Space Grotesk** is used for headlines and hero sections to provide a sharp, geometric, and futuristic "tech" feel. Its distinctive letterforms reinforce the platform's advanced capabilities.
**Inter** is employed for all functional UI elements, body text, and labels. Its neutral, systematic nature ensures that dense media metadata remains legible at small sizes. All labels should be treated with a slight tracking increase to enhance clarity against dark backgrounds.
## Layout & Spacing
The layout philosophy follows a **12-column fluid grid** for desktop, transitioning to a flexible single-column layout for mobile. A strict 8px rhythmic system ensures visual consistency across all components.
Spacing is used to create "visual islands," grouping related media controls while leaving generous margins around content to maintain a premium, airy feel. Components should utilize dynamic padding that scales based on the container size, ensuring the interface never feels cramped, even when managing large libraries.
## Elevation & Depth
Depth in this design system is achieved through **Glassmorphism** and layering rather than traditional drop shadows. Surfaces are defined by three distinct tiers:
1. **Base (Level 0):** Pure `#0F1014` background.
2. **Surface (Level 1):** Translucent layers with a `backdrop-filter: blur(20px)` and a 1px border at 10% white opacity.
3. **Floating (Level 2):** High-blur containers with a subtle inner glow (1px, top-left) in the primary accent color at 20% opacity.
Shadows, when used, are extra-diffused and tinted with the primary blue or charcoal to maintain the "light-from-within" aesthetic.
## Shapes
The design system employs a **Rounded** shape language to soften the futuristic edge and make the platform feel more approachable.
- **Cards and Modals:** Use `rounded-xl` (1.5rem) to emphasize the glass container effect.
- **Buttons and Inputs:** Use `rounded-lg` (1rem) for a modern, tactile feel.
- **Media Thumbnails:** Use a consistent 0.5rem radius to prevent the UI from feeling too sharp or aggressive.
## Components
### Buttons
Primary buttons use a solid gradient of `#007AFF` to a slightly lighter cyan, featuring a subtle outer glow on hover. Secondary buttons should be "Ghost" style with a 1px border and a glass background.
### Cards
Media cards are the core component. They must feature a dark semi-transparent overlay at the bottom for metadata, utilizing the backdrop-blur effect. On hover, the border opacity should increase from 10% to 40%.
### Input Fields
Inputs are dark-filled containers (`#181920`) with a 1px border that glows blue upon focus. Placeholder text should be a soft gray to maintain low visual noise.
### Chips & Badges
Used for genres or status indicators. They should be pill-shaped with a low-opacity background tint of the primary color and high-contrast white text.
### Progress Bars
Streaming progress bars use the primary accent color with a subtle neon glow effect (`box-shadow`). The "track" behind the progress should be a dark charcoal with 50% opacity.
### Navigation Sidebar
A vertical glass panel on the left with a constant backdrop blur. Active states are indicated by a vertical blue "light bar" on the left edge of the menu item.
+258
View File
@@ -0,0 +1,258 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Live TV Categories - AuraStream</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary-fixed": "#e2e2e2",
"inverse-surface": "#e3e2e7",
"on-secondary-fixed-variant": "#46464e",
"on-secondary": "#2f3037",
"inverse-on-surface": "#2f3035",
"primary": "#adc6ff",
"on-primary": "#002e69",
"primary-fixed-dim": "#adc6ff",
"on-primary-fixed-variant": "#004493",
"on-error-container": "#ffdad6",
"tertiary": "#c6c6c7",
"on-background": "#e3e2e7",
"on-surface": "#e3e2e7",
"surface": "#121317",
"outline-variant": "#414755",
"on-primary-container": "#00285c",
"error": "#ffb4ab",
"surface-container-low": "#1a1b20",
"outline": "#8b90a0",
"on-tertiary-container": "#282a2a",
"surface-tint": "#adc6ff",
"on-primary-fixed": "#001a41",
"on-tertiary-fixed": "#1a1c1c",
"inverse-primary": "#005bc1",
"background": "#121317",
"surface-bright": "#38393d",
"error-container": "#93000a",
"surface-dim": "#121317",
"surface-container-highest": "#343439",
"tertiary-fixed-dim": "#c6c6c7",
"secondary-container": "#4a4b53",
"primary-fixed": "#d8e2ff",
"on-surface-variant": "#c1c6d7",
"surface-container": "#1f1f24",
"secondary-fixed": "#e3e1eb",
"tertiary-container": "#909191",
"secondary-fixed-dim": "#c6c5cf",
"secondary": "#c6c5cf",
"surface-variant": "#343439",
"on-secondary-container": "#bcbbc4",
"on-tertiary": "#2f3131",
"on-error": "#690005",
"primary-container": "#4b8eff",
"on-tertiary-fixed-variant": "#454747",
"surface-container-lowest": "#0d0e12",
"on-secondary-fixed": "#1a1b22",
"surface-container-high": "#292a2e"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"md": "24px",
"sm": "12px",
"margin": "32px",
"gutter": "24px",
"base": "8px",
"xs": "4px",
"lg": "48px",
"xl": "80px"
},
"fontFamily": {
"body-md": ["Inter"],
"label-sm": ["Inter"],
"body-lg": ["Inter"],
"label-lg": ["Inter"],
"headline-xl": ["Space Grotesk"],
"headline-md": ["Space Grotesk"],
"headline-lg": ["Space Grotesk"]
},
"fontSize": {
"body-md": ["16px", { "lineHeight": "1.5", "fontWeight": "400" }],
"label-sm": ["12px", { "lineHeight": "1.2", "letterSpacing": "0.02em", "fontWeight": "500" }],
"body-lg": ["18px", { "lineHeight": "1.6", "fontWeight": "400" }],
"label-lg": ["14px", { "lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "600" }],
"headline-xl": ["48px", { "lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700" }],
"headline-md": ["24px", { "lineHeight": "1.3", "fontWeight": "500" }],
"headline-lg": ["32px", { "lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "600" }]
}
}
}
}
</script>
<style>
.glass-card {
background: rgba(31, 31, 36, 0.4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.05);
transition: all 0.3s ease;
}
.glass-card:hover {
border-color: rgba(75, 142, 255, 0.4);
background: rgba(41, 42, 46, 0.6);
transform: translateY(-2px);
box-shadow: 0 10px 30px -10px rgba(75, 142, 255, 0.15);
}
.glow-icon {
text-shadow: 0 0 15px rgba(75, 142, 255, 0.5);
}
</style>
</head>
<body class="bg-background text-on-background font-body-md min-h-screen flex overflow-x-hidden">
<!-- SideNavBar -->
<nav class="hidden md:flex flex-col h-screen fixed left-0 top-0 w-64 border-r border-white/10 bg-[#0F1014]/80 backdrop-blur-2xl shadow-[10px_0_30px_-15px_rgba(0,122,255,0.2)] py-8 z-50">
<div class="px-6 mb-8 flex items-center gap-3">
<span class="material-symbols-outlined text-primary text-3xl glow-icon" style="font-variation-settings: 'FILL' 1;">dataset</span>
<div>
<h1 class="font-headline-md text-headline-md text-on-surface">AuraStream</h1>
<p class="font-label-sm text-label-sm text-outline">Premium Tier</p>
</div>
</div>
<div class="flex-1 flex flex-col gap-2 mt-4">
<a class="bg-blue-500/10 text-blue-400 border-l-4 border-blue-500 flex items-center gap-4 px-6 py-4 font-['Space_Grotesk'] text-sm font-medium" href="#">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">live_tv</span>
Live TV
</a>
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 font-['Space_Grotesk'] text-sm font-medium hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform duration-200" style="font-variation-settings: 'FILL' 0;">movie</span>
<span class="group-hover:translate-x-1 transition-transform duration-200">Movies</span>
</a>
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 font-['Space_Grotesk'] text-sm font-medium hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform duration-200" style="font-variation-settings: 'FILL' 0;">theaters</span>
<span class="group-hover:translate-x-1 transition-transform duration-200">Series</span>
</a>
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 font-['Space_Grotesk'] text-sm font-medium hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform duration-200" style="font-variation-settings: 'FILL' 0;">fiber_manual_record</span>
<span class="group-hover:translate-x-1 transition-transform duration-200">Recordings</span>
</a>
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 font-['Space_Grotesk'] text-sm font-medium hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform duration-200" style="font-variation-settings: 'FILL' 0;">settings</span>
<span class="group-hover:translate-x-1 transition-transform duration-200">Settings</span>
</a>
</div>
<div class="mt-auto flex flex-col gap-2">
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 font-['Space_Grotesk'] text-sm font-medium hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform duration-200" style="font-variation-settings: 'FILL' 0;">help</span>
<span class="group-hover:translate-x-1 transition-transform duration-200">Support</span>
</a>
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 font-['Space_Grotesk'] text-sm font-medium hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform duration-200" style="font-variation-settings: 'FILL' 0;">logout</span>
<span class="group-hover:translate-x-1 transition-transform duration-200">Logout</span>
</a>
</div>
</nav>
<!-- Main Content Canvas -->
<main class="flex-1 md:ml-64 p-margin min-h-screen flex flex-col relative">
<!-- Ambient background glow -->
<div class="absolute top-0 left-1/4 w-1/2 h-1/2 bg-primary/5 blur-[120px] rounded-full pointer-events-none"></div>
<!-- Header -->
<header class="flex justify-between items-end mb-10 pb-6 border-b border-white/5 relative z-10">
<div>
<h2 class="font-headline-lg text-headline-lg text-on-surface mb-2">Live TV Categories</h2>
<p class="font-body-md text-body-md text-outline">Select a category to browse channels</p>
</div>
<div class="flex gap-4">
<div class="relative">
<span class="material-symbols-outlined absolute left-4 top-1/2 -translate-y-1/2 text-outline">search</span>
<input class="bg-surface-container border border-outline-variant rounded-full py-2 pl-12 pr-4 font-body-md text-body-md text-on-surface focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary w-64 transition-all placeholder:text-outline/50" placeholder="Search categories..." type="text"/>
</div>
</div>
</header>
<!-- Bento Grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 relative z-10">
<!-- Category Card 1 -->
<a class="glass-card rounded-xl p-6 flex flex-col gap-4 group" href="#">
<div class="w-12 h-12 rounded-lg bg-surface-container-high flex items-center justify-center border border-white/5 group-hover:bg-primary/10 transition-colors">
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors" style="font-variation-settings: 'FILL' 0;">folder</span>
</div>
<div class="mt-2">
<h3 class="font-headline-md text-headline-md text-on-surface group-hover:text-primary-fixed transition-colors">FRANCE HEVC</h3>
<p class="font-label-sm text-label-sm text-outline mt-1 uppercase tracking-wider">142 Channels</p>
</div>
</a>
<!-- Category Card 2 -->
<a class="glass-card rounded-xl p-6 flex flex-col gap-4 group" href="#">
<div class="w-12 h-12 rounded-lg bg-surface-container-high flex items-center justify-center border border-white/5 group-hover:bg-primary/10 transition-colors">
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors" style="font-variation-settings: 'FILL' 0;">folder</span>
</div>
<div class="mt-2">
<h3 class="font-headline-md text-headline-md text-on-surface group-hover:text-primary-fixed transition-colors">FRANCE SPORTS</h3>
<p class="font-label-sm text-label-sm text-outline mt-1 uppercase tracking-wider">45 Channels</p>
</div>
</a>
<!-- Category Card 3 -->
<a class="glass-card rounded-xl p-6 flex flex-col gap-4 group" href="#">
<div class="w-12 h-12 rounded-lg bg-surface-container-high flex items-center justify-center border border-white/5 group-hover:bg-primary/10 transition-colors">
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors" style="font-variation-settings: 'FILL' 0;">folder</span>
</div>
<div class="mt-2">
<h3 class="font-headline-md text-headline-md text-on-surface group-hover:text-primary-fixed transition-colors">CINEMA</h3>
<p class="font-label-sm text-label-sm text-outline mt-1 uppercase tracking-wider">89 Channels</p>
</div>
</a>
<!-- Category Card 4 -->
<a class="glass-card rounded-xl p-6 flex flex-col gap-4 group" href="#">
<div class="w-12 h-12 rounded-lg bg-surface-container-high flex items-center justify-center border border-white/5 group-hover:bg-primary/10 transition-colors">
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors" style="font-variation-settings: 'FILL' 0;">folder</span>
</div>
<div class="mt-2">
<h3 class="font-headline-md text-headline-md text-on-surface group-hover:text-primary-fixed transition-colors">DOCUMENTARY</h3>
<p class="font-label-sm text-label-sm text-outline mt-1 uppercase tracking-wider">34 Channels</p>
</div>
</a>
<!-- Category Card 5 -->
<a class="glass-card rounded-xl p-6 flex flex-col gap-4 group" href="#">
<div class="w-12 h-12 rounded-lg bg-surface-container-high flex items-center justify-center border border-white/5 group-hover:bg-primary/10 transition-colors">
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors" style="font-variation-settings: 'FILL' 0;">folder</span>
</div>
<div class="mt-2">
<h3 class="font-headline-md text-headline-md text-on-surface group-hover:text-primary-fixed transition-colors">KIDS</h3>
<p class="font-label-sm text-label-sm text-outline mt-1 uppercase tracking-wider">28 Channels</p>
</div>
</a>
<!-- Category Card 6 -->
<a class="glass-card rounded-xl p-6 flex flex-col gap-4 group" href="#">
<div class="w-12 h-12 rounded-lg bg-surface-container-high flex items-center justify-center border border-white/5 group-hover:bg-primary/10 transition-colors">
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors" style="font-variation-settings: 'FILL' 0;">folder</span>
</div>
<div class="mt-2">
<h3 class="font-headline-md text-headline-md text-on-surface group-hover:text-primary-fixed transition-colors">NEWS INT</h3>
<p class="font-label-sm text-label-sm text-outline mt-1 uppercase tracking-wider">62 Channels</p>
</div>
</a>
<!-- Category Card 7 -->
<a class="glass-card rounded-xl p-6 flex flex-col gap-4 group col-span-1 sm:col-span-2 lg:col-span-2 relative overflow-hidden" href="#">
<!-- Decorative element for wide card -->
<div class="absolute right-0 bottom-0 w-32 h-32 bg-primary/10 rounded-tl-full blur-2xl"></div>
<div class="w-12 h-12 rounded-lg bg-surface-container-high flex items-center justify-center border border-white/5 group-hover:bg-primary/10 transition-colors relative z-10">
<span class="material-symbols-outlined text-outline group-hover:text-primary transition-colors" style="font-variation-settings: 'FILL' 0;">star</span>
</div>
<div class="mt-2 relative z-10">
<h3 class="font-headline-md text-headline-md text-on-surface group-hover:text-primary-fixed transition-colors">FAVORITES</h3>
<p class="font-label-sm text-label-sm text-outline mt-1 uppercase tracking-wider">Your curated collection</p>
</div>
</a>
</div>
</main>
</body></html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 205 KiB

+177
View File
@@ -0,0 +1,177 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>XtremFlow - Login</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com" rel="preconnect"/>
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=Space+Grotesk:wght@500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"surface-variant": "#343439",
"primary-fixed": "#d8e2ff",
"surface-bright": "#38393d",
"on-tertiary-container": "#282a2a",
"error-container": "#93000a",
"on-secondary": "#2f3037",
"on-primary-fixed-variant": "#004493",
"tertiary-container": "#909191",
"surface-container-lowest": "#0d0e12",
"inverse-on-surface": "#2f3035",
"surface-container-highest": "#343439",
"surface": "#121317",
"secondary-fixed-dim": "#c6c5cf",
"on-tertiary": "#2f3131",
"surface-dim": "#121317",
"on-secondary-fixed": "#1a1b22",
"on-primary": "#002e69",
"primary": "#adc6ff",
"primary-fixed-dim": "#adc6ff",
"outline": "#8b90a0",
"secondary": "#c6c5cf",
"surface-tint": "#adc6ff",
"surface-container-high": "#292a2e",
"on-tertiary-fixed-variant": "#454747",
"error": "#ffb4ab",
"on-surface": "#e3e2e7",
"secondary-container": "#4a4b53",
"on-primary-fixed": "#001a41",
"tertiary-fixed": "#e2e2e2",
"on-secondary-container": "#bcbbc4",
"on-secondary-fixed-variant": "#46464e",
"inverse-primary": "#005bc1",
"primary-container": "#4b8eff",
"tertiary": "#c6c6c7",
"inverse-surface": "#e3e2e7",
"on-error-container": "#ffdad6",
"surface-container": "#1f1f24",
"on-tertiary-fixed": "#1a1c1c",
"surface-container-low": "#1a1b20",
"on-error": "#690005",
"tertiary-fixed-dim": "#c6c6c7",
"secondary-fixed": "#e3e1eb",
"on-surface-variant": "#c1c6d7",
"on-background": "#e3e2e7",
"outline-variant": "#414755",
"background": "#121317",
"on-primary-container": "#00285c"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"base": "8px",
"xl": "80px",
"lg": "48px",
"md": "24px",
"sm": "12px",
"xs": "4px",
"margin": "32px",
"gutter": "24px"
},
"fontFamily": {
"body-md": ["Inter"],
"headline-lg": ["Space Grotesk"],
"label-lg": ["Inter"],
"headline-xl": ["Space Grotesk"],
"label-sm": ["Inter"],
"body-lg": ["Inter"],
"headline-md": ["Space Grotesk"]
},
"fontSize": {
"body-md": ["16px", {"lineHeight": "1.5", "fontWeight": "400"}],
"headline-lg": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"label-lg": ["14px", {"lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "600"}],
"headline-xl": ["48px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"label-sm": ["12px", {"lineHeight": "1.2", "letterSpacing": "0.02em", "fontWeight": "500"}],
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
"headline-md": ["24px", {"lineHeight": "1.3", "fontWeight": "500"}]
}
}
}
}
</script>
<style>
.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.fill-icon {
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
</style>
</head>
<body class="bg-background text-on-background min-h-screen flex items-center justify-center relative overflow-hidden font-body-md text-body-md antialiased">
<!-- Subtle Tech Gradient Background Elements -->
<div class="absolute inset-0 z-0">
<div class="absolute top-[-20%] left-[-10%] w-[50%] h-[50%] bg-primary-container/10 rounded-full blur-[120px]"></div>
<div class="absolute bottom-[-20%] right-[-10%] w-[60%] h-[60%] bg-inverse-primary/10 rounded-full blur-[150px]"></div>
<!-- Grid overlay for tech feel -->
<div class="absolute inset-0 bg-[linear-gradient(rgba(255,255,255,0.02)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.02)_1px,transparent_1px)] bg-[size:40px_40px] opacity-20 pointer-events-none"></div>
</div>
<!-- Login Card Canvas -->
<main class="relative z-10 w-full max-w-[420px] mx-margin">
<!-- Glassmorphism Container -->
<div class="bg-surface-container/40 backdrop-blur-2xl border border-white/10 rounded-xl shadow-[0_0_40px_rgba(0,0,0,0.8)] p-lg overflow-hidden relative">
<!-- Subtle Inner Glow -->
<div class="absolute top-0 left-0 w-full h-full border border-primary-container/20 rounded-xl pointer-events-none" style="clip-path: polygon(0 0, 100% 0, 100% 1px, 0 1px);"></div>
<div class="absolute top-0 left-0 w-full h-full border border-primary-container/20 rounded-xl pointer-events-none" style="clip-path: polygon(0 0, 1px 0, 1px 100%, 0 100%);"></div>
<!-- Brand Header -->
<div class="flex flex-col items-center mb-lg">
<div class="w-12 h-12 bg-primary-container text-on-primary-container rounded-lg flex items-center justify-center mb-sm shadow-[0_0_15px_rgba(75,142,255,0.3)]">
<span class="material-symbols-outlined fill-icon text-[28px]" data-icon="hub">hub</span>
</div>
<h1 class="font-headline-lg text-headline-lg text-on-background tracking-tighter">XtremFlow</h1>
<p class="font-label-sm text-label-sm text-on-surface-variant mt-xs tracking-widest uppercase">System Access</p>
</div>
<!-- Login Form -->
<form class="flex flex-col gap-md">
<!-- Username / Email Field -->
<div class="flex flex-col gap-xs relative">
<label class="font-label-sm text-label-sm text-on-surface-variant ml-1" for="username">Username or Email</label>
<div class="relative flex items-center">
<span class="material-symbols-outlined absolute left-sm text-outline-variant pointer-events-none" data-icon="person">person</span>
<input class="w-full bg-surface-container-highest border border-outline-variant/30 text-on-surface font-body-md text-body-md rounded-lg py-sm pl-[44px] pr-sm focus:border-primary-container focus:ring-1 focus:ring-primary-container transition-all placeholder:text-outline-variant/50 outline-none" id="username" placeholder="Enter your credentials" type="text"/>
</div>
</div>
<!-- Password Field -->
<div class="flex flex-col gap-xs relative">
<div class="flex justify-between items-center ml-1">
<label class="font-label-sm text-label-sm text-on-surface-variant" for="password">Password</label>
<a class="font-label-sm text-label-sm text-primary-fixed hover:text-primary transition-colors" href="#">Forgot?</a>
</div>
<div class="relative flex items-center">
<span class="material-symbols-outlined absolute left-sm text-outline-variant pointer-events-none" data-icon="lock">lock</span>
<input class="w-full bg-surface-container-highest border border-outline-variant/30 text-on-surface font-body-md text-body-md rounded-lg py-sm pl-[44px] pr-[44px] focus:border-primary-container focus:ring-1 focus:ring-primary-container transition-all placeholder:text-outline-variant/50 outline-none" id="password" placeholder="••••••••" type="password"/>
<button class="absolute right-sm text-outline-variant hover:text-on-surface transition-colors flex items-center justify-center" type="button">
<span class="material-symbols-outlined" data-icon="visibility">visibility</span>
</button>
</div>
</div>
<!-- Actions -->
<div class="mt-xs">
<button class="w-full bg-primary-container text-on-primary-container font-label-lg text-label-lg py-sm rounded-lg hover:bg-primary-fixed transition-all active:scale-[0.98] shadow-[0_4px_14px_rgba(75,142,255,0.2)] hover:shadow-[0_6px_20px_rgba(75,142,255,0.3)] flex justify-center items-center gap-2" type="submit">
Sign In
<span class="material-symbols-outlined text-[18px]" data-icon="login">login</span>
</button>
</div>
</form>
<!-- Footer -->
<div class="mt-lg text-center">
<p class="font-body-sm text-[14px] text-on-surface-variant">
Require access? <a class="text-primary-fixed hover:text-primary font-medium transition-colors" href="#">Contact Administrator</a>
</p>
</div>
</div>
</main>
</body></html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 123 KiB

+309
View File
@@ -0,0 +1,309 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>AuraStream - Movies</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&amp;family=Inter:wght@400;500;600&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary-fixed": "#e2e2e2",
"inverse-surface": "#e3e2e7",
"on-secondary-fixed-variant": "#46464e",
"on-secondary": "#2f3037",
"inverse-on-surface": "#2f3035",
"primary": "#adc6ff",
"on-primary": "#002e69",
"primary-fixed-dim": "#adc6ff",
"on-primary-fixed-variant": "#004493",
"on-error-container": "#ffdad6",
"tertiary": "#c6c6c7",
"on-background": "#e3e2e7",
"on-surface": "#e3e2e7",
"surface": "#121317",
"outline-variant": "#414755",
"on-primary-container": "#00285c",
"error": "#ffb4ab",
"surface-container-low": "#1a1b20",
"outline": "#8b90a0",
"on-tertiary-container": "#282a2a",
"surface-tint": "#adc6ff",
"on-primary-fixed": "#001a41",
"on-tertiary-fixed": "#1a1c1c",
"inverse-primary": "#005bc1",
"background": "#121317",
"surface-bright": "#38393d",
"error-container": "#93000a",
"surface-dim": "#121317",
"surface-container-highest": "#343439",
"tertiary-fixed-dim": "#c6c6c7",
"secondary-container": "#4a4b53",
"primary-fixed": "#d8e2ff",
"on-surface-variant": "#c1c6d7",
"surface-container": "#1f1f24",
"secondary-fixed": "#e3e1eb",
"tertiary-container": "#909191",
"secondary-fixed-dim": "#c6c5cf",
"secondary": "#c6c5cf",
"surface-variant": "#343439",
"on-secondary-container": "#bcbbc4",
"on-tertiary": "#2f3131",
"on-error": "#690005",
"primary-container": "#4b8eff",
"on-tertiary-fixed-variant": "#454747",
"surface-container-lowest": "#0d0e12",
"on-secondary-fixed": "#1a1b22",
"surface-container-high": "#292a2e"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"md": "24px",
"sm": "12px",
"margin": "32px",
"gutter": "24px",
"base": "8px",
"xs": "4px",
"lg": "48px",
"xl": "80px"
},
"fontFamily": {
"body-md": ["Inter"],
"label-sm": ["Inter"],
"body-lg": ["Inter"],
"label-lg": ["Inter"],
"headline-xl": ["Space Grotesk"],
"headline-md": ["Space Grotesk"],
"headline-lg": ["Space Grotesk"]
},
"fontSize": {
"body-md": ["16px", {"lineHeight": "1.5", "fontWeight": "400"}],
"label-sm": ["12px", {"lineHeight": "1.2", "letterSpacing": "0.02em", "fontWeight": "500"}],
"body-lg": ["18px", {"lineHeight": "1.6", "fontWeight": "400"}],
"label-lg": ["14px", {"lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "600"}],
"headline-xl": ["48px", {"lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700"}],
"headline-md": ["24px", {"lineHeight": "1.3", "fontWeight": "500"}],
"headline-lg": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "600"}]
}
}
}
}
</script>
<style>
body { background-color: #0F1014; color: #e3e2e7; margin: 0; padding: 0; font-family: 'Inter', sans-serif; }
.glass-panel { background: rgba(18, 19, 23, 0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.1); }
.glass-floating { background: rgba(18, 19, 23, 0.6); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border-top: 1px solid rgba(0, 122, 255, 0.2); border-left: 1px solid rgba(0, 122, 255, 0.2); }
.neon-glow:hover { box-shadow: 0 0 15px rgba(0, 122, 255, 0.6); }
.text-glow { text-shadow: 0 0 10px rgba(0, 122, 255, 0.5); }
/* Hide scrollbar for clean horizontal scroll */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
</style>
</head>
<body class="flex h-screen overflow-hidden bg-background">
<!-- TopNavBar (Mobile Only) -->
<nav class="md:hidden flex justify-between items-center px-8 py-4 w-full bg-slate-950/50 backdrop-blur-xl border-b border-white/10 shadow-2xl shadow-blue-500/10 sticky top-0 z-50">
<div class="text-2xl font-bold bg-gradient-to-r from-blue-500 to-cyan-400 bg-clip-text text-transparent font-headline-md text-headline-md">AuraStream</div>
<div class="flex gap-4">
<span class="material-symbols-outlined text-slate-400">search</span>
<span class="material-symbols-outlined text-slate-400">account_circle</span>
<span class="material-symbols-outlined text-slate-400">settings</span>
</div>
</nav>
<!-- SideNavBar (Desktop Only) -->
<nav class="hidden md:flex flex-col h-full py-8 bg-[#0F1014]/80 backdrop-blur-2xl border-r border-white/10 shadow-[10px_0_30px_-15px_rgba(0,122,255,0.2)] w-64 flex-shrink-0 z-40 relative">
<div class="px-6 mb-8">
<h1 class="text-blue-500 font-bold uppercase tracking-widest font-headline-md text-headline-md mb-2">AuraStream</h1>
<div class="flex items-center gap-3 mt-6">
<img alt="User Profile" class="w-10 h-10 rounded-full border border-white/20" data-alt="Close up portrait of a futuristic user profile with neon rim lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD1yLlcEt1CS5GdGEazVU-JfOAnUdK4OAP8qJ0dLcHuwvyfwAnF1ThzhD-nlIVaQWnA1fvCGrQVRm3nQe5bf0p-zuuYpk9NZ87wQF4qwhD847eO-CizIxL981JVzdec77qzgh0hnsNA9xTv-EO3LTjIyGWD-kK_Zva4tdZ07mSrfrPic0ZoY77Z4UBcqO5KRIlfHWoLCZ30XAPhs-dJ_4X5Xtk19Wlqb8AgIiGxPgpJPA85wPC5QL8dJXVts4AovPKbDrPyrGK7ZRo"/>
<div>
<div class="text-on-surface font-label-lg text-label-lg">Command Center</div>
<div class="text-on-surface-variant font-label-sm text-label-sm">Premium Tier</div>
</div>
</div>
</div>
<div class="flex-1 overflow-y-auto space-y-2 mt-4 font-['Space_Grotesk'] text-sm font-medium">
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform duration-200">live_tv</span>
<span>Live TV</span>
</a>
<a class="bg-blue-500/10 text-blue-400 border-l-4 border-blue-500 flex items-center gap-4 px-6 py-4 group" href="#">
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform duration-200" style="font-variation-settings: 'FILL' 1;">movie</span>
<span>Movies</span>
</a>
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform duration-200">theaters</span>
<span>Series</span>
</a>
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform duration-200">fiber_manual_record</span>
<span>Recordings</span>
</a>
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform duration-200">settings</span>
<span>Settings</span>
</a>
</div>
<div class="mt-auto pt-4 border-t border-white/10 font-['Space_Grotesk'] text-sm font-medium">
<a class="text-slate-500 flex items-center gap-4 px-6 py-3 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform duration-200">help</span>
<span>Support</span>
</a>
<a class="text-slate-500 flex items-center gap-4 px-6 py-3 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform duration-200">logout</span>
<span>Logout</span>
</a>
</div>
</nav>
<!-- Main Content Area -->
<main class="flex-1 h-full overflow-y-auto relative bg-background">
<!-- Hero Section -->
<div class="relative w-full h-[716px] min-h-[500px] flex items-end pb-xl px-lg md:px-xl" data-alt="Cinematic wide shot of a futuristic dystopian city with neon signs and a dramatic dark sky, high contrast, cinematic lighting" style="background-image: linear-gradient(to top, #0F1014 0%, rgba(15,16,20,0.4) 50%, transparent 100%), url('https://lh3.googleusercontent.com/aida-public/AB6AXuA5bf0eT94X4qeX5cXUw-H1cJerOLGgdL0tGa4xT2std6sithlBbKo117GZJwVr37YCP_LykZOSAxmXvaELEfK7eyvNZzP6wkw7SrUaJExXoUfQu9wLisZNNC4bpAuo7TzXyvhIpYNZUW_uN2gEXaus-u-9jZ5yDlUS_2A3xPBV-6jkYfo9yTrP06eWQg8AxLd_AY6JT9RtYCs9HVNTx9PQIdgPRDoDRVZVYWH3UlJHqCIWNyA888zdhIHfjFUOqMJzlxM_zyfuyA8'); background-size: cover; background-position: center;">
<div class="relative z-10 max-w-4xl glass-floating p-8 rounded-xl shadow-2xl">
<div class="flex items-center gap-4 mb-4">
<span class="bg-primary/20 text-on-surface font-label-sm text-label-sm px-3 py-1 rounded-full border border-primary/30">Sci-Fi Thriller</span>
<span class="text-tertiary font-label-sm text-label-sm flex items-center gap-1"><span class="material-symbols-outlined text-sm" style="font-variation-settings: 'FILL' 1;">star</span> 4.9</span>
<span class="text-tertiary font-label-sm text-label-sm border border-outline-variant px-2 rounded">PG-13</span>
<span class="text-tertiary font-label-sm text-label-sm">2h 15m</span>
</div>
<h2 class="font-headline-xl text-headline-xl text-on-surface mb-2 text-glow">The Mother and the Bear (2026)</h2>
<p class="font-body-lg text-body-lg text-on-surface-variant mb-8 max-w-2xl">In a neon-drenched future where memories are currency, a rogue detective must unravel a conspiracy that threatens to erase humanity's past before her own mind is wiped clean.</p>
<div class="flex gap-4">
<button class="bg-gradient-to-r from-[#007AFF] to-cyan-500 text-white font-label-lg text-label-lg px-8 py-3 rounded-lg flex items-center gap-2 neon-glow transition-all duration-300">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
Play Now
</button>
<button class="glass-panel text-on-surface font-label-lg text-label-lg px-8 py-3 rounded-lg flex items-center gap-2 hover:bg-white/10 transition-all duration-300">
<span class="material-symbols-outlined">info</span>
More Info
</button>
</div>
</div>
</div>
<!-- Featured Section (Bento Grid Style) -->
<div class="px-lg md:px-xl py-lg">
<div class="flex justify-between items-end mb-6">
<h3 class="font-headline-md text-headline-md text-on-surface">Trending Now</h3>
<div class="flex gap-2">
<button class="glass-panel p-2 rounded-full hover:bg-white/10 transition-colors"><span class="material-symbols-outlined">chevron_left</span></button>
<button class="glass-panel p-2 rounded-full hover:bg-white/10 transition-colors"><span class="material-symbols-outlined">chevron_right</span></button>
</div>
</div>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 md:gap-6">
<!-- Card 1 (Large) -->
<div class="col-span-2 row-span-2 relative rounded-xl overflow-hidden group cursor-pointer border border-white/10 hover:border-primary/40 transition-all duration-500">
<img alt="Movie Poster" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700" data-alt="Abstract cinematic explosion of color and light in deep space, high fidelity rendering" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCsqlExaOiee-H9lUU2oabuN0rln0QbBDmDBV0TTZNFz45WnVVVfV6oYSCNRo5R4REIiQfACd36D6OpkYsVXL_C9pDSxaxGwhW19mx7BJo2-3LDON2s8PDhO7pqEf_E5Ha-Wg0bCqH7UPXHcf5GJkjAo-S0dcYOOIskCTgOPTKrXo_8ijsyHb5QVBtvU5BgQuvkY4lpBNWWX4zxlkCoq4eUYUboVryMUkIBfFSnjMIqKk_5vR9DecVKUumuqhqb00qceBHP7W7SRsg"/>
<div class="absolute inset-0 bg-gradient-to-t from-[#0F1014] via-[#0F1014]/50 to-transparent opacity-80 group-hover:opacity-90 transition-opacity duration-300"></div>
<div class="absolute bottom-0 left-0 w-full p-6 glass-panel translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
<h4 class="font-headline-md text-headline-md text-on-surface mb-1 text-glow">Quantum Paradox</h4>
<div class="flex items-center gap-3 text-tertiary font-label-sm text-label-sm">
<span class="text-primary flex items-center gap-1"><span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">star</span> 4.8</span>
<span>Sci-Fi</span>
<span>2025</span>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="relative rounded-xl overflow-hidden group cursor-pointer border border-white/10 hover:border-primary/40 transition-all duration-500 h-64 md:h-auto">
<img alt="Movie Poster" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700" data-alt="Dark moody portrait of a mysterious figure in a rainy cyberpunk alleyway, blue and pink neon reflections" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDU_tshT9jmch027T8j9cESQtIlQonKSBsa9foyaOpCkqd4Mt_MSmfpo7_WeMfMCvkfz3vSdbBueqHuxWK8WozdDtx5GsdZ8MMifux_KO4RiK1t_vAoXdQQsRjXVKpsG28A38Cpi_1GDLkCYFPNAlPnnbmR0nGwIuQuZuaiZaEL45vFTS6MoAV8pQ7p_fNZbcu8mDflb-QEf32MGWrn-NCpZ12e9QOsQmrDe19eJQ4GxCn6DSqgydsb3kUShLgJbGR4GKSHSbwlqeg"/>
<div class="absolute bottom-0 left-0 w-full p-4 glass-panel bg-surface-container/80 backdrop-blur-md">
<h4 class="font-label-lg text-label-lg text-on-surface truncate">Neon Rain</h4>
<div class="text-tertiary font-label-sm text-label-sm mt-1">Action • 4.5</div>
</div>
</div>
<!-- Card 3 -->
<div class="relative rounded-xl overflow-hidden group cursor-pointer border border-white/10 hover:border-primary/40 transition-all duration-500 h-64 md:h-auto">
<img alt="Movie Poster" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700" data-alt="Epic landscape of an alien planet with multiple moons in the sky, highly detailed matte painting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuATh2INviHPBKNvU83N2AXadQqMJ2GK0z24kY1bRoKIbB1W_61k4zNxSZ6CioBWtSq7UFz9WFQnb6FtEi_slvhCpAYAZroHKvrI5LSHaIFvk8Eak20rJVoJHgSQlqQXk3CDY4txACeWBpTt7QRBqu2_HvA6ojnFvlFWecfhvZ66EQXp5X7P5KGhfyTLQvt527YxtRtaLyQrXafyNQ8SgTgqx1eO_y-lUnwJE6XNTMCKUecm6GMgVkohWrpdXmPa3Y3Rb7mXvIZ8MO0"/>
<div class="absolute bottom-0 left-0 w-full p-4 glass-panel bg-surface-container/80 backdrop-blur-md">
<h4 class="font-label-lg text-label-lg text-on-surface truncate">Beyond Horizon</h4>
<div class="text-tertiary font-label-sm text-label-sm mt-1">Adventure • 4.7</div>
</div>
</div>
<!-- Card 4 -->
<div class="relative rounded-xl overflow-hidden group cursor-pointer border border-white/10 hover:border-primary/40 transition-all duration-500 h-64 md:h-auto">
<img alt="Movie Poster" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700" data-alt="Close up of a futuristic glowing artifact floating above a pedestal in a dark room, glowing blue accents" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDmxuG0jdK5b-WeYSNXL2FdnqPbeFPeEy2TLvYGGV-vQvRQbk5FRtsmqbWU26DY7dGFo8EjAymHdj0xTvH6voSOaMpnMfjJToLNTsugJhNL9YLq_o6cz-Wo5BGm_qPV5XpDN_WYitMkG7krZ9NlS_EPEcepCKWtQcazoRdadqq1G4wLrSw7vn-ZyyQXZm6lTkSTNbeXNFXLZzRkc88e2qB97j2Wmt0MDS7o51DahlGwjW2bnwglbh8oIQKVzcsDgrv80wpzoO9mTFo"/>
<div class="absolute bottom-0 left-0 w-full p-4 glass-panel bg-surface-container/80 backdrop-blur-md">
<h4 class="font-label-lg text-label-lg text-on-surface truncate">The Artifact</h4>
<div class="text-tertiary font-label-sm text-label-sm mt-1">Mystery • 4.3</div>
</div>
</div>
<!-- Card 5 -->
<div class="relative rounded-xl overflow-hidden group cursor-pointer border border-white/10 hover:border-primary/40 transition-all duration-500 h-64 md:h-auto">
<img alt="Movie Poster" class="w-full h-full object-cover transform group-hover:scale-105 transition-transform duration-700" data-alt="Abstract smooth gradient flowing from deep navy to soft lavender with subtle grain texture" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBt9ABx9UMABF66XfrbKo0yaW1SZ9NAi2yfHBtwtd61ohhasYpN9Ua18A6bF1j88oXCZ3HziOn386C-CfCXmZcBZiK5KBfiXjI9ds7szgXZIjxaOyBohqZKN2X_qtYYyMdMfYlcf1lKMjsgjx5M3NIPQjdkVfdOPGcd6GPPkgFSVTjMAbIRO71EnKIejfUumxiYTvpH5i_Pa2ZCQNc0_ZkKnX5r7d5tynss9Hm4chGAupgKDTDJeqKEhq32MTREm5on3y2Z-W0t3N4"/>
<div class="absolute bottom-0 left-0 w-full p-4 glass-panel bg-surface-container/80 backdrop-blur-md">
<h4 class="font-label-lg text-label-lg text-on-surface truncate">Echoes of Void</h4>
<div class="text-tertiary font-label-sm text-label-sm mt-1">Thriller • 4.6</div>
</div>
</div>
</div>
</div>
<!-- Horizontal Scroll Section -->
<div class="px-lg md:px-xl py-lg mb-xl">
<h3 class="font-headline-md text-headline-md text-on-surface mb-6">Continue Watching</h3>
<div class="flex overflow-x-auto gap-4 md:gap-6 no-scrollbar pb-4">
<!-- Scroll Item 1 -->
<div class="flex-none w-72 relative rounded-xl overflow-hidden border border-white/10 hover:border-primary/30 transition-all duration-300">
<div class="relative h-40 w-full">
<img alt="Scene" class="w-full h-full object-cover" data-alt="Cinematic shot of an old vintage movie camera on a set with dramatic lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBHeS-ADRVCbXPzfi9NVwbUF8-QmD7kIwlpN49wNz6nM97Veb61zOYvTWbmtiDKRkBU69pFaJy4o18LmcW2J0XVWFqn8GgK1Js3fJHT3Fmv7ulVwXXEnUjgJchbJCC4uJiZJXUqZQAGN354FDf0AAt_U0duCq9kcElpI6q4_vfCyCKd97_gqdIMufoignAn2cw5qHMByNah5qfDS2C8zX8EkdTZNMVUh2ZFa1EvJYSCjDwJpBxYExVY8VocpuUaMAmnKLcwuaMupio"/>
<div class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 cursor-pointer">
<span class="material-symbols-outlined text-white text-4xl" style="font-variation-settings: 'FILL' 1;">play_circle</span>
</div>
<!-- Progress Bar -->
<div class="absolute bottom-0 left-0 w-full h-1 bg-surface-highest">
<div class="h-full bg-primary shadow-[0_0_8px_rgba(173,198,255,0.8)]" style="width: 65%;"></div>
</div>
</div>
<div class="p-4 glass-panel">
<h4 class="font-label-lg text-label-lg text-on-surface truncate mb-1">Director's Cut</h4>
<div class="text-tertiary font-label-sm text-label-sm">1h 12m remaining</div>
</div>
</div>
<!-- Scroll Item 2 -->
<div class="flex-none w-72 relative rounded-xl overflow-hidden border border-white/10 hover:border-primary/30 transition-all duration-300">
<div class="relative h-40 w-full">
<img alt="Scene" class="w-full h-full object-cover" data-alt="A vintage movie clapperboard sitting on a wooden surface with a shallow depth of field" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA5uTzakxjr5j0E70zJKh7p5aELPN_pq93luMuygnshg4qvzbqfRI8NnYV2mk_5lM_S4pRcvVV79lQP2pZQlZ3Rz7kzbfOVUhgMJWrOrgkF8_xxkxNKy7rCOPA2yRGj0Hh2sDEgtmaSQXntyxcN7q-ZcNoUUJe9zrAIC_QGiSDvKL_rh8JVW4jahav62LrazlvWK8Uni_LHEhGS1sij_vh-qwP89qw6YmRJjlvfwjsyFRMUV6XCHMNqDXpNmOw6n9ZmvhIkSVpqRM4"/>
<div class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 cursor-pointer">
<span class="material-symbols-outlined text-white text-4xl" style="font-variation-settings: 'FILL' 1;">play_circle</span>
</div>
<!-- Progress Bar -->
<div class="absolute bottom-0 left-0 w-full h-1 bg-surface-highest">
<div class="h-full bg-primary shadow-[0_0_8px_rgba(173,198,255,0.8)]" style="width: 25%;"></div>
</div>
</div>
<div class="p-4 glass-panel">
<h4 class="font-label-lg text-label-lg text-on-surface truncate mb-1">The Final Act</h4>
<div class="text-tertiary font-label-sm text-label-sm">2h 05m remaining</div>
</div>
</div>
<!-- Scroll Item 3 -->
<div class="flex-none w-72 relative rounded-xl overflow-hidden border border-white/10 hover:border-primary/30 transition-all duration-300">
<div class="relative h-40 w-full">
<img alt="Scene" class="w-full h-full object-cover" data-alt="Empty cinema seats lit by the glowing light of a projector screen in a dark room" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAkrCeck81LSgXP4eslCwBeRpjUOUfTqeP3kdg1dkqCsfbfwbgCzTP5K8b8daFM2qXzdEXIfMGqE5tRnmv0hSA-FoCSYnfuDOjAqTxoRy7OhR3gEj8vmk4AbSPuzRhecfWU0wjJLxyINLWDSN8i7CnAFFZHySF9DtD0yRd1-ovpSK7G7iNIN7fFfNYW2YUngF545-dfIUGVC61NEvEiD1CHIuczUHe6aYuNyIIpHz0QOn82h-0GODsL261CdivS_sXsJg86ZaryZA8"/>
<div class="absolute inset-0 bg-black/40 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-300 cursor-pointer">
<span class="material-symbols-outlined text-white text-4xl" style="font-variation-settings: 'FILL' 1;">play_circle</span>
</div>
<!-- Progress Bar -->
<div class="absolute bottom-0 left-0 w-full h-1 bg-surface-highest">
<div class="h-full bg-primary shadow-[0_0_8px_rgba(173,198,255,0.8)]" style="width: 85%;"></div>
</div>
</div>
<div class="p-4 glass-panel">
<h4 class="font-label-lg text-label-lg text-on-surface truncate mb-1">Silent Shadows</h4>
<div class="text-tertiary font-label-sm text-label-sm">15m remaining</div>
</div>
</div>
</div>
</div>
</main>
</body></html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 MiB

@@ -0,0 +1,292 @@
<!DOCTYPE html>
<html class="dark" lang="fr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Enregistrements - XtremFlow</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=Space+Grotesk:wght@500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary-fixed": "#e2e2e2",
"inverse-surface": "#e3e2e7",
"on-secondary-fixed-variant": "#46464e",
"on-secondary": "#2f3037",
"inverse-on-surface": "#2f3035",
"primary": "#adc6ff",
"on-primary": "#002e69",
"primary-fixed-dim": "#adc6ff",
"on-primary-fixed-variant": "#004493",
"on-error-container": "#ffdad6",
"tertiary": "#c6c6c7",
"on-background": "#e3e2e7",
"on-surface": "#e3e2e7",
"surface": "#121317",
"outline-variant": "#414755",
"on-primary-container": "#00285c",
"error": "#ffb4ab",
"surface-container-low": "#1a1b20",
"outline": "#8b90a0",
"on-tertiary-container": "#282a2a",
"surface-tint": "#adc6ff",
"on-primary-fixed": "#001a41",
"on-tertiary-fixed": "#1a1c1c",
"inverse-primary": "#005bc1",
"background": "#121317",
"surface-bright": "#38393d",
"error-container": "#93000a",
"surface-dim": "#121317",
"surface-container-highest": "#343439",
"tertiary-fixed-dim": "#c6c6c7",
"secondary-container": "#4a4b53",
"primary-fixed": "#d8e2ff",
"on-surface-variant": "#c1c6d7",
"surface-container": "#1f1f24",
"secondary-fixed": "#e3e1eb",
"tertiary-container": "#909191",
"secondary-fixed-dim": "#c6c5cf",
"secondary": "#c6c5cf",
"surface-variant": "#343439",
"on-secondary-container": "#bcbbc4",
"on-tertiary": "#2f3131",
"on-error": "#690005",
"primary-container": "#4b8eff",
"on-tertiary-fixed-variant": "#454747",
"surface-container-lowest": "#0d0e12",
"on-secondary-fixed": "#1a1b22",
"surface-container-high": "#292a2e"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"md": "24px",
"sm": "12px",
"margin": "32px",
"gutter": "24px",
"base": "8px",
"xs": "4px",
"lg": "48px",
"xl": "80px"
},
"fontFamily": {
"body-md": ["Inter"],
"label-sm": ["Inter"],
"body-lg": ["Inter"],
"label-lg": ["Inter"],
"headline-xl": ["Space Grotesk"],
"headline-md": ["Space Grotesk"],
"headline-lg": ["Space Grotesk"]
},
"fontSize": {
"body-md": ["16px", { "lineHeight": "1.5", "fontWeight": "400" }],
"label-sm": ["12px", { "lineHeight": "1.2", "letterSpacing": "0.02em", "fontWeight": "500" }],
"body-lg": ["18px", { "lineHeight": "1.6", "fontWeight": "400" }],
"label-lg": ["14px", { "lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "600" }],
"headline-xl": ["48px", { "lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700" }],
"headline-md": ["24px", { "lineHeight": "1.3", "fontWeight": "500" }],
"headline-lg": ["32px", { "lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "600" }]
}
}
}
}
</script>
<style>
.glass-panel {
background: rgba(18, 19, 23, 0.6);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.glow-hover:hover {
box-shadow: 0 0 20px rgba(173, 198, 255, 0.2);
border-color: rgba(173, 198, 255, 0.4);
}
</style>
</head>
<body class="bg-background text-on-background min-h-screen flex overflow-hidden">
<!-- SideNavBar from JSON -->
<nav class="h-screen fixed left-0 top-0 w-64 border-r border-white/10 shadow-[10px_0_30px_-15px_rgba(0,122,255,0.2)] bg-[#0F1014]/80 backdrop-blur-2xl flex flex-col h-full py-8 z-50">
<div class="px-6 mb-8 flex items-center gap-4">
<img alt="User Profile" class="w-12 h-12 rounded-full border border-outline/30 object-cover" data-alt="Close up portrait of a young man with a neutral expression, dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBUHb3yUjf89D-0v8UESRGpC6at8VoDc4DJ8V5D6pAcW0J_gCgg1ZvJzmVj6V5HmLHFwpBPwvjCuwZP1BZDk1DRiEynAfto0aD2RETGHJ1G_0d7xGOEDqrywl0eqrYWNwD9l81jN0vl0OolwiQElFflOs3lRuEkdK5goIGKwnJ3Rq-DiFevgKRHijZ5IFhTyCNEABGs5Ird48gsslPKtvgLpi3jgC5AQ8HS5CjUOA1mThnHj_y0Hh9VPt0u10IV1QAjX_kMZjSFqDo"/>
<div>
<h2 class="font-headline-md text-headline-md text-on-surface">Command Center</h2>
<p class="font-label-sm text-label-sm text-on-surface-variant">Premium Tier</p>
</div>
</div>
<div class="flex-1 px-0 space-y-2">
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 hover:bg-white/5 hover:text-white transition-colors group-hover:translate-x-1 transition-transform duration-200" href="#">
<span class="material-symbols-outlined font-['Space_Grotesk'] text-sm font-medium">live_tv</span>
<span class="font-label-lg text-label-lg">Live TV</span>
</a>
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 hover:bg-white/5 hover:text-white transition-colors group-hover:translate-x-1 transition-transform duration-200" href="#">
<span class="material-symbols-outlined font-['Space_Grotesk'] text-sm font-medium">movie</span>
<span class="font-label-lg text-label-lg">Movies</span>
</a>
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 hover:bg-white/5 hover:text-white transition-colors group-hover:translate-x-1 transition-transform duration-200" href="#">
<span class="material-symbols-outlined font-['Space_Grotesk'] text-sm font-medium">theaters</span>
<span class="font-label-lg text-label-lg">Series</span>
</a>
<a class="bg-blue-500/10 text-blue-400 border-l-4 border-blue-500 flex items-center gap-4 px-6 py-4" href="#">
<span class="material-symbols-outlined font-['Space_Grotesk'] text-sm font-medium" style="font-variation-settings: 'FILL' 1;">fiber_manual_record</span>
<span class="font-label-lg text-label-lg">Recordings</span>
</a>
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 hover:bg-white/5 hover:text-white transition-colors group-hover:translate-x-1 transition-transform duration-200" href="#">
<span class="material-symbols-outlined font-['Space_Grotesk'] text-sm font-medium">settings</span>
<span class="font-label-lg text-label-lg">Settings</span>
</a>
</div>
<div class="mt-auto px-0 space-y-2 pt-8 border-t border-white/5 mx-6">
<a class="text-slate-500 flex items-center gap-4 py-2 hover:bg-white/5 hover:text-white transition-colors group-hover:translate-x-1 transition-transform duration-200" href="#">
<span class="material-symbols-outlined font-['Space_Grotesk'] text-sm font-medium">help</span>
<span class="font-label-lg text-label-lg">Support</span>
</a>
<a class="text-slate-500 flex items-center gap-4 py-2 hover:bg-white/5 hover:text-white transition-colors group-hover:translate-x-1 transition-transform duration-200" href="#">
<span class="material-symbols-outlined font-['Space_Grotesk'] text-sm font-medium">logout</span>
<span class="font-label-lg text-label-lg">Logout</span>
</a>
</div>
</nav>
<!-- Main Content Canvas -->
<main class="ml-64 flex-1 flex flex-col h-screen overflow-y-auto bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-surface-container-high via-background to-background">
<header class="px-lg py-margin sticky top-0 z-40 bg-background/80 backdrop-blur-xl border-b border-white/5">
<div class="flex justify-between items-end">
<div>
<h1 class="font-headline-xl text-headline-xl text-on-surface">Enregistrements</h1>
<p class="font-body-md text-body-md text-on-surface-variant mt-2">Gérez vos programmes sportifs enregistrés.</p>
</div>
<div class="flex gap-4">
<button class="glass-panel px-4 py-2 rounded-lg font-label-lg text-label-lg text-on-surface hover:bg-surface-variant transition-colors flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">filter_list</span>
Filtrer
</button>
<button class="bg-gradient-to-r from-[#007AFF] to-[#00C6FF] text-white px-4 py-2 rounded-lg font-label-lg text-label-lg hover:shadow-[0_0_15px_rgba(0,122,255,0.4)] transition-all flex items-center gap-2">
<span class="material-symbols-outlined text-[18px]">add</span>
Nouveau
</button>
</div>
</div>
</header>
<div class="p-lg flex-1">
<div class="flex flex-col gap-4">
<!-- Recording Item 1 -->
<div class="glass-panel rounded-xl p-4 flex items-center justify-between glow-hover transition-all duration-300 group cursor-pointer">
<div class="flex items-center gap-6">
<div class="w-16 h-16 rounded-lg bg-surface-container overflow-hidden flex items-center justify-center relative">
<img alt="Football Pitch" class="w-full h-full object-cover opacity-60" data-alt="Abstract green football pitch with stadium lights glowing in the dark background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBlIKTXIkr4UrfaRj-jlUL3val7L2ARMwvoQY3BqX4xJYOXbXB1etTrgWjfDrA2fk0Z1ZeV6e4IcTyveGm6C-5VUOzEmHrWwIHwG-8_gPA7SB6sJZRer0zqeCv8w0xgb9g0u028K4wdxGuf0CnvSGwvCuAe5tyhXdBIxeHI-d1PjsxO7yz5UMn3qltsmYGnxbPDEh-Oxn794vwEHVPWtVzBw8RXcbYwdRTQNncgysXXBgwasF88jT5NFwPH-4GTLm66QmThDWAcSSA"/>
<span class="material-symbols-outlined absolute text-primary text-[32px] drop-shadow-lg">sports_soccer</span>
</div>
<div>
<h3 class="font-headline-lg text-[20px] text-on-surface mb-1">Ligue 1: PSG vs OM</h3>
<div class="flex items-center gap-3 font-label-sm text-label-sm text-on-surface-variant">
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">calendar_today</span> 12 Oct 2023</span>
<span>•</span>
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">schedule</span> 21:00 (120 min)</span>
<span>•</span>
<span class="text-primary-fixed-dim">BEIN SPORTS 1</span>
</div>
</div>
</div>
<div class="flex items-center gap-8">
<div class="px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 font-label-sm text-label-sm flex items-center gap-2 shadow-[0_0_10px_rgba(52,211,153,0.2)]">
<div class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></div>
Terminé
</div>
<div class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<button class="w-10 h-10 rounded-full glass-panel flex items-center justify-center text-on-surface hover:text-primary hover:border-primary/50 transition-colors">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
</button>
<button class="w-10 h-10 rounded-full glass-panel flex items-center justify-center text-on-surface hover:text-primary hover:border-primary/50 transition-colors">
<span class="material-symbols-outlined">info</span>
</button>
<button class="w-10 h-10 rounded-full glass-panel flex items-center justify-center text-on-surface hover:text-error hover:border-error/50 hover:bg-error/10 transition-colors">
<span class="material-symbols-outlined">delete</span>
</button>
</div>
</div>
</div>
<!-- Recording Item 2 -->
<div class="glass-panel rounded-xl p-4 flex items-center justify-between glow-hover transition-all duration-300 group cursor-pointer">
<div class="flex items-center gap-6">
<div class="w-16 h-16 rounded-lg bg-surface-container overflow-hidden flex items-center justify-center relative">
<img alt="Basketball Court" class="w-full h-full object-cover opacity-60" data-alt="Dark dramatic lighting on an indoor basketball court wooden floor" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBuAxQ5d1F_AjiDesX_IOUWZ-7MUrbKFeRtf0r6JHVXuIfKUyNrwTO8XXQtrzjqTSoUO2uYBjsRavJCN8zuZt9NNirkUxJ_BC_HEDNKR0j1ZJq7whnX4IXQRXkRa_gse1Ck7HBHlaY4AROlDVSNvEYZe8mphvkqq9TmOodiNoH4iWCLr0R9RuIsYJk2qjDcMdwW41w_EpmTpyAXXOzWpNkBEB11M_n5CnDNYVPZ7VwtpMFwI8sgDsZ5zYkMjo0PJzAVbpApa0F1dh8"/>
<span class="material-symbols-outlined absolute text-primary text-[32px] drop-shadow-lg">sports_basketball</span>
</div>
<div>
<h3 class="font-headline-lg text-[20px] text-on-surface mb-1">NBA Finals: Game 6</h3>
<div class="flex items-center gap-3 font-label-sm text-label-sm text-on-surface-variant">
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">calendar_today</span> 10 Oct 2023</span>
<span>•</span>
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">schedule</span> 03:00 (180 min)</span>
<span>•</span>
<span class="text-primary-fixed-dim">BEIN SPORTS 2</span>
</div>
</div>
</div>
<div class="flex items-center gap-8">
<div class="px-3 py-1 rounded-full bg-amber-500/10 border border-amber-500/30 text-amber-400 font-label-sm text-label-sm flex items-center gap-2 shadow-[0_0_10px_rgba(245,158,11,0.2)]">
<div class="w-2 h-2 rounded-full bg-amber-400"></div>
Échoué
</div>
<div class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<button class="w-10 h-10 rounded-full glass-panel flex items-center justify-center text-on-surface hover:text-primary hover:border-primary/50 transition-colors opacity-50 cursor-not-allowed">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
</button>
<button class="w-10 h-10 rounded-full glass-panel flex items-center justify-center text-on-surface hover:text-primary hover:border-primary/50 transition-colors">
<span class="material-symbols-outlined">info</span>
</button>
<button class="w-10 h-10 rounded-full glass-panel flex items-center justify-center text-on-surface hover:text-error hover:border-error/50 hover:bg-error/10 transition-colors">
<span class="material-symbols-outlined">delete</span>
</button>
</div>
</div>
</div>
<!-- Recording Item 3 -->
<div class="glass-panel rounded-xl p-4 flex items-center justify-between glow-hover transition-all duration-300 group cursor-pointer">
<div class="flex items-center gap-6">
<div class="w-16 h-16 rounded-lg bg-surface-container overflow-hidden flex items-center justify-center relative">
<img alt="Tennis Ball" class="w-full h-full object-cover opacity-60" data-alt="Close up of a yellow tennis ball on a dark green hard court surface" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBhEXEQs08c5_awogBJrV1sNwKxQVEQhjEZjuyBh_e9mQmYMfH_boI9ZrYiCjccoAE3Fa1O7ouqRqVlToqxH14hcW38IHY0VZrIepn2ekBT9pWt4OPWIODRY2bZ0AhUpU2e46Q06qin0foVozgerAPRpFcPvSToJrlICAyg6AGESZHWZQ8PA4-Y2ysGo6xA52vS2bO7V7LX9-zJhpuzhSoUePqbKd0EoBe2dSvqnKYVNaSyzyWyWVvBHisGV9ZKsXe4UmvBGanvu7A"/>
<span class="material-symbols-outlined absolute text-primary text-[32px] drop-shadow-lg">sports_tennis</span>
</div>
<div>
<h3 class="font-headline-lg text-[20px] text-on-surface mb-1">Roland Garros: Finale H</h3>
<div class="flex items-center gap-3 font-label-sm text-label-sm text-on-surface-variant">
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">calendar_today</span> 05 Oct 2023</span>
<span>•</span>
<span class="flex items-center gap-1"><span class="material-symbols-outlined text-[14px]">schedule</span> 15:00 (240 min)</span>
<span>•</span>
<span class="text-primary-fixed-dim">BEIN SPORTS 1</span>
</div>
</div>
</div>
<div class="flex items-center gap-8">
<div class="px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/30 text-emerald-400 font-label-sm text-label-sm flex items-center gap-2 shadow-[0_0_10px_rgba(52,211,153,0.2)]">
<div class="w-2 h-2 rounded-full bg-emerald-400 animate-pulse"></div>
Terminé
</div>
<div class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<button class="w-10 h-10 rounded-full glass-panel flex items-center justify-center text-on-surface hover:text-primary hover:border-primary/50 transition-colors">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
</button>
<button class="w-10 h-10 rounded-full glass-panel flex items-center justify-center text-on-surface hover:text-primary hover:border-primary/50 transition-colors">
<span class="material-symbols-outlined">info</span>
</button>
<button class="w-10 h-10 rounded-full glass-panel flex items-center justify-center text-on-surface hover:text-error hover:border-error/50 hover:bg-error/10 transition-colors">
<span class="material-symbols-outlined">delete</span>
</button>
</div>
</div>
</div>
</div>
</div>
</main>
</body></html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 283 KiB

+394
View File
@@ -0,0 +1,394 @@
<!DOCTYPE html>
<html class="dark" lang="en"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>XtremFlow - TV Series</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=Space+Grotesk:wght@500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary-fixed": "#e2e2e2",
"inverse-surface": "#e3e2e7",
"on-secondary-fixed-variant": "#46464e",
"on-secondary": "#2f3037",
"inverse-on-surface": "#2f3035",
"primary": "#adc6ff",
"on-primary": "#002e69",
"primary-fixed-dim": "#adc6ff",
"on-primary-fixed-variant": "#004493",
"on-error-container": "#ffdad6",
"tertiary": "#c6c6c7",
"on-background": "#e3e2e7",
"on-surface": "#e3e2e7",
"surface": "#121317",
"outline-variant": "#414755",
"on-primary-container": "#00285c",
"error": "#ffb4ab",
"surface-container-low": "#1a1b20",
"outline": "#8b90a0",
"on-tertiary-container": "#282a2a",
"surface-tint": "#adc6ff",
"on-primary-fixed": "#001a41",
"on-tertiary-fixed": "#1a1c1c",
"inverse-primary": "#005bc1",
"background": "#121317",
"surface-bright": "#38393d",
"error-container": "#93000a",
"surface-dim": "#121317",
"surface-container-highest": "#343439",
"tertiary-fixed-dim": "#c6c6c7",
"secondary-container": "#4a4b53",
"primary-fixed": "#d8e2ff",
"on-surface-variant": "#c1c6d7",
"surface-container": "#1f1f24",
"secondary-fixed": "#e3e1eb",
"tertiary-container": "#909191",
"secondary-fixed-dim": "#c6c5cf",
"secondary": "#c6c5cf",
"surface-variant": "#343439",
"on-secondary-container": "#bcbbc4",
"on-tertiary": "#2f3131",
"on-error": "#690005",
"primary-container": "#4b8eff",
"on-tertiary-fixed-variant": "#454747",
"surface-container-lowest": "#0d0e12",
"on-secondary-fixed": "#1a1b22",
"surface-container-high": "#292a2e"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"md": "24px",
"sm": "12px",
"margin": "32px",
"gutter": "24px",
"base": "8px",
"xs": "4px",
"lg": "48px",
"xl": "80px"
},
"fontFamily": {
"body-md": [
"Inter"
],
"label-sm": [
"Inter"
],
"body-lg": [
"Inter"
],
"label-lg": [
"Inter"
],
"headline-xl": [
"Space Grotesk"
],
"headline-md": [
"Space Grotesk"
],
"headline-lg": [
"Space Grotesk"
]
},
"fontSize": {
"body-md": [
"16px",
{
"lineHeight": "1.5",
"fontWeight": "400"
}
],
"label-sm": [
"12px",
{
"lineHeight": "1.2",
"letterSpacing": "0.02em",
"fontWeight": "500"
}
],
"body-lg": [
"18px",
{
"lineHeight": "1.6",
"fontWeight": "400"
}
],
"label-lg": [
"14px",
{
"lineHeight": "1.2",
"letterSpacing": "0.05em",
"fontWeight": "600"
}
],
"headline-xl": [
"48px",
{
"lineHeight": "1.1",
"letterSpacing": "-0.02em",
"fontWeight": "700"
}
],
"headline-md": [
"24px",
{
"lineHeight": "1.3",
"fontWeight": "500"
}
],
"headline-lg": [
"32px",
{
"lineHeight": "1.2",
"letterSpacing": "-0.01em",
"fontWeight": "600"
}
]
}
},
},
}
</script>
</head>
<body class="bg-background text-on-background min-h-screen flex selection:bg-primary-container selection:text-on-primary-container">
<!-- SideNavBar (from JSON) -->
<nav class="hidden md:flex h-screen fixed left-0 top-0 w-64 border-r border-white/10 bg-[#0F1014]/80 backdrop-blur-2xl shadow-[10px_0_30px_-15px_rgba(0,122,255,0.2)] flex-col h-full py-8 z-50">
<!-- Header -->
<div class="px-6 mb-8 flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-surface-variant flex items-center justify-center overflow-hidden border border-white/10">
<img alt="User Profile" class="w-full h-full object-cover" data-alt="Portrait of a young male user, professional lighting, dark background, avatar style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBeZC4RgDut3l9e8Yhvtszoa8oVpVwSxh9TcyzDgjyNQTK9cl1kgDoEnWmrd3Bw9IsBYB9eY1zQc7A_hlFwHhuB7OGx2VSMdhvt_s8XB374y34XLUt1B7L6ufCoEf6ju2f90Z_zS4IttLXA9DITjLtxCzqKUfHJtuHamik1PlBkM-SqNF6NJfiLRDJ2OLRMyAf4qQczW-03ZSnuGp5gKh0KqXOirYxZ6542-TXF7rtucQiEefYlwVUCyPr7qYVMfEkfnqnFs8rVruw"/>
</div>
<div>
<h2 class="font-headline-md text-headline-md text-blue-500 font-bold uppercase tracking-widest text-sm leading-tight">Command Center</h2>
<p class="font-label-sm text-label-sm text-on-surface-variant">Premium Tier</p>
</div>
</div>
<!-- Main Navigation -->
<div class="flex-1 flex flex-col gap-2 font-['Space_Grotesk'] text-sm font-medium">
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined text-lg group-hover:translate-x-1 transition-transform duration-200">live_tv</span>
<span class="group-hover:translate-x-1 transition-transform duration-200">Live TV</span>
</a>
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined text-lg group-hover:translate-x-1 transition-transform duration-200">movie</span>
<span class="group-hover:translate-x-1 transition-transform duration-200">Movies</span>
</a>
<!-- Active State -->
<a class="bg-blue-500/10 text-blue-400 border-l-4 border-blue-500 flex items-center gap-4 px-6 py-4 group" href="#">
<span class="material-symbols-outlined text-lg group-hover:translate-x-1 transition-transform duration-200">theaters</span>
<span class="group-hover:translate-x-1 transition-transform duration-200">Series</span>
</a>
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined text-lg group-hover:translate-x-1 transition-transform duration-200">fiber_manual_record</span>
<span class="group-hover:translate-x-1 transition-transform duration-200">Recordings</span>
</a>
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined text-lg group-hover:translate-x-1 transition-transform duration-200">settings</span>
<span class="group-hover:translate-x-1 transition-transform duration-200">Settings</span>
</a>
</div>
<!-- Footer Navigation -->
<div class="mt-auto flex flex-col gap-2 font-['Space_Grotesk'] text-sm font-medium border-t border-white/5 pt-4">
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined text-lg group-hover:translate-x-1 transition-transform duration-200">help</span>
<span class="group-hover:translate-x-1 transition-transform duration-200">Support</span>
</a>
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined text-lg group-hover:translate-x-1 transition-transform duration-200">logout</span>
<span class="group-hover:translate-x-1 transition-transform duration-200">Logout</span>
</a>
</div>
</nav>
<!-- Main Content Area -->
<main class="flex-1 md:ml-64 relative overflow-y-auto">
<!-- Hero Section: L'affaire Moloch -->
<section class="relative h-[716px] min-h-[600px] w-full flex items-end pb-xl pt-32 px-md md:px-xl overflow-hidden">
<!-- Background Image -->
<div class="absolute inset-0 z-0">
<img alt="L'affaire Moloch Background" class="w-full h-full object-cover opacity-60" data-alt="Dark, moody cinematic shot of a mysterious figure in a trench coat standing in a foggy, dimly lit European street, neon reflections on wet cobblestone" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCz9SytGaUq4pVuS4xyPqRE9mwnqySR4Hj_xQSzNDUmtjNYm3lZnmtMS5--st-JXJP9GGmvcbTnBlv2PBGZ-wX4hH63QUdZLPpPkalsGDWGlfxK_oZlEhDpAGKUiU2o44Jzpa1ibnmVP9XlNnBmnKxI-fM1BmoJEiJaS4iJSBFmtQoxa-u-Fd1RffEUlDyIcOWbqjJrc_SdjtUjisCfnjjRVPRWUKmgJ5cw101wyudgzg_BfqcYz_GEkagax1kZIawTMloUiZSE4Y8"/>
<!-- Gradient Overlays for integration -->
<div class="absolute inset-0 bg-gradient-to-t from-[#0F1014] via-[#0F1014]/60 to-transparent"></div>
<div class="absolute inset-0 bg-gradient-to-r from-[#0F1014] via-transparent to-transparent"></div>
</div>
<!-- Top Search/Profile (Mobile only mostly, since nav is fixed) -->
<div class="absolute top-0 right-0 p-md flex gap-4 z-20 md:hidden">
<button class="w-10 h-10 rounded-full bg-surface/50 backdrop-blur-xl border border-white/10 flex items-center justify-center text-on-surface hover:bg-white/10 transition-colors">
<span class="material-symbols-outlined">search</span>
</button>
</div>
<!-- Hero Content -->
<div class="relative z-10 max-w-4xl flex flex-col gap-sm">
<!-- Badges -->
<div class="flex items-center gap-3 mb-2">
<span class="px-3 py-1 rounded-full bg-primary/20 border border-primary/30 text-primary font-label-sm text-label-sm backdrop-blur-md">NEW EPISODE</span>
<span class="px-3 py-1 rounded-full bg-surface-variant/50 border border-white/10 text-on-surface-variant font-label-sm text-label-sm backdrop-blur-md">THRILLER</span>
<span class="px-3 py-1 rounded-full bg-surface-variant/50 border border-white/10 text-on-surface-variant font-label-sm text-label-sm backdrop-blur-md">4K HDR</span>
</div>
<h1 class="font-headline-xl text-headline-xl text-on-surface drop-shadow-2xl">L'affaire Moloch</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-2xl mt-4 line-clamp-3">
A disgraced detective and an ambitious journalist uncover a web of corruption spanning decades in a sleepy coastal town. As they dig deeper, the lines between truth and paranoia begin to blur.
</p>
<div class="flex items-center gap-4 mt-8">
<!-- Primary Button -->
<button class="h-12 px-8 rounded-lg bg-gradient-to-r from-[#007AFF] to-cyan-400 text-white font-label-lg text-label-lg flex items-center gap-2 hover:shadow-[0_0_20px_rgba(0,122,255,0.4)] transition-all hover:scale-105 active:scale-95">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
Watch S1 E4
</button>
<!-- Secondary Button -->
<button class="h-12 px-8 rounded-lg bg-surface/30 backdrop-blur-xl border border-white/10 text-on-surface font-label-lg text-label-lg flex items-center gap-2 hover:bg-white/10 transition-all active:scale-95">
<span class="material-symbols-outlined">add</span>
My List
</button>
</div>
</div>
</section>
<!-- Continue Watching Grid -->
<section class="px-md md:px-xl py-lg relative z-20 -mt-12">
<h2 class="font-headline-md text-headline-md text-on-surface mb-6 flex items-center gap-2">
<span class="material-symbols-outlined text-primary">history</span>
Continue Watching
</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Card 1 -->
<div class="group relative rounded-xl overflow-hidden bg-surface-container border border-white/5 hover:border-white/20 transition-all duration-300 cursor-pointer shadow-lg">
<div class="aspect-video w-full relative">
<img alt="Stranger Things" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Retro 80s synthwave style neon lights in a dark room with a bicycle silhouette, mysterious sci-fi mood" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB5pj6QM6rWAdzTeoo0zLsW7WKIM34Uu0OUh_KuGxsagRq5y7RzVlXJbQdYYF2vFCaIGBxt3Okd7FiT-wxFyDJG058rTAN-pMH1R_eJPqRID4Oqrk4m7f91ODnp-QPgZed5HQ1p2e_kfwINhh5E4NNpVsD8Iosr-wQYfvFzNLa2IAxDHhHR6rwBsBwcl3LdkUCh-E78isFCuUAjBmrTpyG45zMVvNfz4vlpTfJgGIoYuF8dl6bAegQ1QTK6d8AHZItypxrjiTaV7hI"/>
<div class="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent opacity-80"></div>
<!-- Play Overlay -->
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/40 backdrop-blur-sm">
<div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-on-primary shadow-[0_0_15px_rgba(173,198,255,0.5)]">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
</div>
</div>
</div>
<div class="p-4 relative bg-surface/80 backdrop-blur-md">
<h3 class="font-label-lg text-label-lg text-on-surface truncate">Stranger Things</h3>
<p class="font-label-sm text-label-sm text-on-surface-variant mt-1">S4:E8 • "Papa"</p>
<!-- Progress Bar -->
<div class="w-full h-1 bg-surface-variant rounded-full mt-3 overflow-hidden">
<div class="h-full bg-primary shadow-[0_0_8px_rgba(173,198,255,0.8)] w-[75%]"></div>
</div>
</div>
</div>
<!-- Card 2 -->
<div class="group relative rounded-xl overflow-hidden bg-surface-container border border-white/5 hover:border-white/20 transition-all duration-300 cursor-pointer shadow-lg">
<div class="aspect-video w-full relative">
<img alt="The Crown" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500" data-alt="Elegant royal palace interior, dimly lit with ornate gold details and a solitary figure looking out a window" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDaLMl7_348o1rCV-iPOJn0UEHKzHnnz60qvDMQ4W7yUEmzdu4V7LUec_s_R_t7PcVIUPlkjRMSA8-BwNvhozmV5Y8tHpFvWKY6oSU8yPC03rHVSWtqyWEiIboxNPmqqSVTrrvzKZqqlP3K4LTNX8bBlKI-WMeeNOWnVFnTTyGz-Z6MTjriX_bewWRfI2H8z5LQun4tzvd90H78tAQC1rT6eaPmYPigHWWmEp2CEQIk6YyUiZGwH85Q8WLLHECf-30XGJD2oCJKrG0"/>
<div class="absolute inset-0 bg-gradient-to-t from-background via-transparent to-transparent opacity-80"></div>
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity bg-black/40 backdrop-blur-sm">
<div class="w-12 h-12 rounded-full bg-primary flex items-center justify-center text-on-primary shadow-[0_0_15px_rgba(173,198,255,0.5)]">
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
</div>
</div>
</div>
<div class="p-4 relative bg-surface/80 backdrop-blur-md">
<h3 class="font-label-lg text-label-lg text-on-surface truncate">The Crown</h3>
<p class="font-label-sm text-label-sm text-on-surface-variant mt-1">S5:E2 • "The System"</p>
<div class="w-full h-1 bg-surface-variant rounded-full mt-3 overflow-hidden">
<div class="h-full bg-primary shadow-[0_0_8px_rgba(173,198,255,0.8)] w-[30%]"></div>
</div>
</div>
</div>
</div>
</section>
<!-- Trending Series Grid -->
<section class="px-md md:px-xl py-lg">
<div class="flex items-center justify-between mb-6">
<h2 class="font-headline-md text-headline-md text-on-surface flex items-center gap-2">
<span class="material-symbols-outlined text-primary">local_fire_department</span>
Trending Now
</h2>
<button class="font-label-sm text-label-sm text-primary hover:text-primary-fixed transition-colors flex items-center gap-1">
View All <span class="material-symbols-outlined text-[16px]">chevron_right</span>
</button>
</div>
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4">
<!-- Poster 1 -->
<div class="group relative rounded-lg overflow-hidden bg-surface border border-white/5 hover:border-white/40 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-[0_0_30px_-5px_rgba(0,122,255,0.15)] aspect-[2/3]">
<img alt="Reykjavik Fusion" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="Icy bleak landscape in Iceland, stark contrast, dark moody tones, isolated cabin in the snow" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAuXaoTwWSTHV_Cy0w5VPgZPGkjzMeJLLlSeqaHP-71xzmISlJlwLnmcjKzjO4MnU_AYBkQVl9vVvHqDHq2qiETmZ2ceVZxltzl2UadLkBqjHShoSHdfgwYdM_xA_R-eOodLSV5S5-loDjjHJfZyrTw4mFpA1mUvhVvx1NlKhNvDF0AX_7sPIQwTMA1o6SBpp9gFikVVepjVhoHEJZxS3th10PdPAtloeVR5Tl2GqsoQOGEmv9bx5tIO2dXihJCs_mRqKBfFHOIwTQ"/>
<!-- Rating Badge -->
<div class="absolute top-2 right-2 px-2 py-1 bg-surface/80 backdrop-blur-md border border-white/10 rounded text-on-surface font-label-sm text-label-sm flex items-center gap-1">
<span class="material-symbols-outlined text-[14px] text-yellow-400" style="font-variation-settings: 'FILL' 1;">star</span>
9.2
</div>
<!-- Metadata Overlay -->
<div class="absolute inset-x-0 bottom-0 p-4 bg-gradient-to-t from-background via-background/80 to-transparent translate-y-4 group-hover:translate-y-0 transition-transform duration-300 backdrop-blur-[2px]">
<h3 class="font-label-lg text-label-lg text-on-surface truncate">Reykjavik Fusion</h3>
<p class="font-label-sm text-label-sm text-on-surface-variant mt-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">Crime • 2 Seasons</p>
</div>
</div>
<!-- Poster 2 -->
<div class="group relative rounded-lg overflow-hidden bg-surface border border-white/5 hover:border-white/40 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-[0_0_30px_-5px_rgba(0,122,255,0.15)] aspect-[2/3]">
<img alt="Neon Genesis" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="Cyberpunk city street at night, heavy rain, glowing pink and blue neon signs reflecting on wet pavement" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDG6oCPWDHZ4WJTQ1aXyii-WYsESpm9o1pT8J7LnJhlqQ9A2NPmJalFKTMlmsc3qvU0Swue_pbBE4HKmqQLJhoo97NQi98By6toE4Kq6vimNvp504CdQD0T3vybUzUcAxf6-B5qxi8dj4eBBKucNnQ23J0EBfyBLSrDg_fsBYVSDAGB6HrFJIoKzkLWcTPwuJn9DMa5uNJSs4yhs_QsAMxm1Pk9pxZZmiLhUVTvt6rAq_s4nX-NUABss95GadMWc8kVxV_2D24Ah-U"/>
<div class="absolute top-2 right-2 px-2 py-1 bg-surface/80 backdrop-blur-md border border-white/10 rounded text-on-surface font-label-sm text-label-sm flex items-center gap-1">
<span class="material-symbols-outlined text-[14px] text-yellow-400" style="font-variation-settings: 'FILL' 1;">star</span>
8.8
</div>
<div class="absolute inset-x-0 bottom-0 p-4 bg-gradient-to-t from-background via-background/80 to-transparent translate-y-4 group-hover:translate-y-0 transition-transform duration-300 backdrop-blur-[2px]">
<h3 class="font-label-lg text-label-lg text-on-surface truncate">Neon Genesis</h3>
<p class="font-label-sm text-label-sm text-on-surface-variant mt-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">Sci-Fi • 1 Season</p>
</div>
</div>
<!-- Poster 3 -->
<div class="group relative rounded-lg overflow-hidden bg-surface border border-white/5 hover:border-white/40 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-[0_0_30px_-5px_rgba(0,122,255,0.15)] aspect-[2/3]">
<img alt="The Archive" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="Dusty, ancient library filled with glowing books, magical atmosphere, warm golden light rays piercing through small windows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBMR_YyFPNgkyIHR-pKOvWTUvyf-HP-uzhcRa0TZ7MqKEFdIACiHXc_TTLZC_ZMYgDAw0mLZiFOa7ZbkyALrTFf-sQmeLY5hfwd_TYbXxyGxogB8jWi6F4FV05m4Y2F09p4XaRQMnXukXu2hGcp2fgdorhMh7MzntXHDY3mQyVYHEeiuIUrjlkonBrxjT1B-eMFhKOcHp8FncYgzB5GcFTq2NCaVlxiniHq6ZJmh93PhqXSa4e9-G5HHBbPtJhzYZpQpD3G_-4u2tQ"/>
<div class="absolute top-2 right-2 px-2 py-1 bg-surface/80 backdrop-blur-md border border-white/10 rounded text-on-surface font-label-sm text-label-sm flex items-center gap-1">
<span class="material-symbols-outlined text-[14px] text-yellow-400" style="font-variation-settings: 'FILL' 1;">star</span>
9.5
</div>
<div class="absolute inset-x-0 bottom-0 p-4 bg-gradient-to-t from-background via-background/80 to-transparent translate-y-4 group-hover:translate-y-0 transition-transform duration-300 backdrop-blur-[2px]">
<h3 class="font-label-lg text-label-lg text-on-surface truncate">The Archive</h3>
<p class="font-label-sm text-label-sm text-on-surface-variant mt-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">Fantasy • 4 Seasons</p>
</div>
</div>
<!-- Poster 4 -->
<div class="group relative rounded-lg overflow-hidden bg-surface border border-white/5 hover:border-white/40 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-[0_0_30px_-5px_rgba(0,122,255,0.15)] aspect-[2/3]">
<img alt="Apex Protocol" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="Sleek modern server room, cold blue lighting, sterile environment, rows of high-tech data racks" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCw2S19UFAInTxAS_xXzOHlAtZLiF4hMH4zbtK9kF0goTqcdAKzAr1uFfpNZmhSDJcly_7BvcfK7y2XuUCkhJI3R-EoERxVHuiRiJZN_lcxc2PFWQ73QsbdoiHoU5RWepbS-MLmft2T-vH_w6FRXZnok0-LO9XRySApsOawSTN8x6iQ-QLQAppLwc6JvCh62ICge0ROKI2P-3IiharZxs5AjGrZivO5yt3EqDV26QleiZ3lU9TtTqVWDLLJhFM34Jcw3Kv3lqtXnsk"/>
<div class="absolute top-2 right-2 px-2 py-1 bg-surface/80 backdrop-blur-md border border-white/10 rounded text-on-surface font-label-sm text-label-sm flex items-center gap-1">
<span class="material-symbols-outlined text-[14px] text-yellow-400" style="font-variation-settings: 'FILL' 1;">star</span>
7.9
</div>
<div class="absolute inset-x-0 bottom-0 p-4 bg-gradient-to-t from-background via-background/80 to-transparent translate-y-4 group-hover:translate-y-0 transition-transform duration-300 backdrop-blur-[2px]">
<h3 class="font-label-lg text-label-lg text-on-surface truncate">Apex Protocol</h3>
<p class="font-label-sm text-label-sm text-on-surface-variant mt-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">Action • 1 Season</p>
</div>
</div>
<!-- Poster 5 -->
<div class="group relative rounded-lg overflow-hidden bg-surface border border-white/5 hover:border-white/40 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-[0_0_30px_-5px_rgba(0,122,255,0.15)] aspect-[2/3] hidden md:block">
<img alt="Whispers" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="Eerie dark forest trail covered in dense fog, moonlight barely piercing through tall pine trees, suspenseful mood" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAz4JFta70ndzciiYnKJA5Vr-aIJ_kXX-xWI4HCsrNQ_BUG5DKgS2AEHGrADq5MCaziw2p45G_vAwEnZSjsCSikPqgzkqjBKz3PWvigyPt2EhtAwK-orMWL_8AlyDz--3yusP5DCHtYH1gYurYPoSO7OopzNSEvYIRtD5DI157kJQIFoWujeQomFzBzFxMYOYtIO450dwAuCiBooGlQR0YK98VQg4uyav8Cc_U34zbRz3n4aZ3vXpw5ght_Iaqe2bop7gskJ_rUaBg"/>
<div class="absolute top-2 right-2 px-2 py-1 bg-surface/80 backdrop-blur-md border border-white/10 rounded text-on-surface font-label-sm text-label-sm flex items-center gap-1">
<span class="material-symbols-outlined text-[14px] text-yellow-400" style="font-variation-settings: 'FILL' 1;">star</span>
8.4
</div>
<div class="absolute inset-x-0 bottom-0 p-4 bg-gradient-to-t from-background via-background/80 to-transparent translate-y-4 group-hover:translate-y-0 transition-transform duration-300 backdrop-blur-[2px]">
<h3 class="font-label-lg text-label-lg text-on-surface truncate">Whispers</h3>
<p class="font-label-sm text-label-sm text-on-surface-variant mt-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">Horror • 3 Seasons</p>
</div>
</div>
<!-- Poster 6 -->
<div class="group relative rounded-lg overflow-hidden bg-surface border border-white/5 hover:border-white/40 transition-all duration-300 cursor-pointer shadow-lg hover:shadow-[0_0_30px_-5px_rgba(0,122,255,0.15)] aspect-[2/3] hidden xl:block">
<img alt="Stellar Drift" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" data-alt="View of Earth from space, bright glowing atmosphere, deep black starfield, cinematic majestic shot" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD9kroaEUwTmg6MfZT6TghSk3WRKsiNu4HpTj7_pOQbgmNKUyoITiRs9LpQvhGzWY2gbPV4YS52jo97vDEcfSesxEUGOIlzMy6w2xQyJIakCETs_8xNt4iFBUdz3gF4NhTbRI8S81mdCQ7QNbqND_OgsFWdTB5tlJxvDV63CGhRpOG6gFELjFfAUS-qwxCVs4TaUkAtHvMoRO314WIVnYa3-KURoWfnc1Dn1hWycv-IpEaf4PVW9Dn6ffJ6Ml2lvJobTkK4acgXfTU"/>
<div class="absolute top-2 right-2 px-2 py-1 bg-surface/80 backdrop-blur-md border border-white/10 rounded text-on-surface font-label-sm text-label-sm flex items-center gap-1">
<span class="material-symbols-outlined text-[14px] text-yellow-400" style="font-variation-settings: 'FILL' 1;">star</span>
9.0
</div>
<div class="absolute inset-x-0 bottom-0 p-4 bg-gradient-to-t from-background via-background/80 to-transparent translate-y-4 group-hover:translate-y-0 transition-transform duration-300 backdrop-blur-[2px]">
<h3 class="font-label-lg text-label-lg text-on-surface truncate">Stellar Drift</h3>
<p class="font-label-sm text-label-sm text-on-surface-variant mt-1 opacity-0 group-hover:opacity-100 transition-opacity duration-300 delay-100">Sci-Fi • 5 Seasons</p>
</div>
</div>
</div>
</section>
</main>
</body></html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 MiB

+323
View File
@@ -0,0 +1,323 @@
<!DOCTYPE html>
<html class="dark" lang="fr"><head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Paramètres - XtremFlow</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&amp;family=Space+Grotesk:wght@500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"tertiary-fixed": "#e2e2e2",
"inverse-surface": "#e3e2e7",
"on-secondary-fixed-variant": "#46464e",
"on-secondary": "#2f3037",
"inverse-on-surface": "#2f3035",
"primary": "#adc6ff",
"on-primary": "#002e69",
"primary-fixed-dim": "#adc6ff",
"on-primary-fixed-variant": "#004493",
"on-error-container": "#ffdad6",
"tertiary": "#c6c6c7",
"on-background": "#e3e2e7",
"on-surface": "#e3e2e7",
"surface": "#121317",
"outline-variant": "#414755",
"on-primary-container": "#00285c",
"error": "#ffb4ab",
"surface-container-low": "#1a1b20",
"outline": "#8b90a0",
"on-tertiary-container": "#282a2a",
"surface-tint": "#adc6ff",
"on-primary-fixed": "#001a41",
"on-tertiary-fixed": "#1a1c1c",
"inverse-primary": "#005bc1",
"background": "#121317",
"surface-bright": "#38393d",
"error-container": "#93000a",
"surface-dim": "#121317",
"surface-container-highest": "#343439",
"tertiary-fixed-dim": "#c6c6c7",
"secondary-container": "#4a4b53",
"primary-fixed": "#d8e2ff",
"on-surface-variant": "#c1c6d7",
"surface-container": "#1f1f24",
"secondary-fixed": "#e3e1eb",
"tertiary-container": "#909191",
"secondary-fixed-dim": "#c6c5cf",
"secondary": "#c6c5cf",
"surface-variant": "#343439",
"on-secondary-container": "#bcbbc4",
"on-tertiary": "#2f3131",
"on-error": "#690005",
"primary-container": "#4b8eff",
"on-tertiary-fixed-variant": "#454747",
"surface-container-lowest": "#0d0e12",
"on-secondary-fixed": "#1a1b22",
"surface-container-high": "#292a2e"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"md": "24px",
"sm": "12px",
"margin": "32px",
"gutter": "24px",
"base": "8px",
"xs": "4px",
"lg": "48px",
"xl": "80px"
},
"fontFamily": {
"body-md": ["Inter"],
"label-sm": ["Inter"],
"body-lg": ["Inter"],
"label-lg": ["Inter"],
"headline-xl": ["Space Grotesk"],
"headline-md": ["Space Grotesk"],
"headline-lg": ["Space Grotesk"]
},
"fontSize": {
"body-md": ["16px", { "lineHeight": "1.5", "fontWeight": "400" }],
"label-sm": ["12px", { "lineHeight": "1.2", "letterSpacing": "0.02em", "fontWeight": "500" }],
"body-lg": ["18px", { "lineHeight": "1.6", "fontWeight": "400" }],
"label-lg": ["14px", { "lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "600" }],
"headline-xl": ["48px", { "lineHeight": "1.1", "letterSpacing": "-0.02em", "fontWeight": "700" }],
"headline-md": ["24px", { "lineHeight": "1.3", "fontWeight": "500" }],
"headline-lg": ["32px", { "lineHeight": "1.2", "letterSpacing": "-0.01em", "fontWeight": "600" }]
}
}
}
}
</script>
<style>
body {
background-color: #0F1014; /* Base Level 0 */
color: #e3e2e7;
}
.glass-panel {
background: rgba(24, 25, 32, 0.4);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.glass-floating {
background: rgba(24, 25, 32, 0.6);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: inset 1px 1px 0px 0px rgba(173, 198, 255, 0.2), 0 10px 30px -10px rgba(0, 0, 0, 0.5);
}
.neon-glow {
box-shadow: 0 0 15px rgba(0, 122, 255, 0.5);
}
.input-dark {
background-color: #181920;
border: 1px solid rgba(255, 255, 255, 0.1);
color: #e3e2e7;
}
.input-dark:focus {
border-color: #007AFF;
box-shadow: 0 0 10px rgba(0, 122, 255, 0.3);
outline: none;
}
.chip {
background-color: rgba(173, 198, 255, 0.1);
color: #ffffff;
border: 1px solid rgba(173, 198, 255, 0.3);
}
</style>
</head>
<body class="font-body-md text-body-md antialiased min-h-screen flex selection:bg-primary selection:text-on-primary">
<!-- SideNavBar Component -->
<nav class="hidden md:flex flex-col h-full py-8 h-screen fixed left-0 top-0 w-64 border-r border-white/10 shadow-[10px_0_30px_-15px_rgba(0,122,255,0.2)] bg-[#0F1014]/80 backdrop-blur-2xl z-40">
<div class="px-6 mb-8 flex items-center gap-3">
<div class="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-cyan-400 p-0.5">
<img alt="User Profile" class="w-full h-full rounded-full object-cover" data-alt="Close-up portrait of a young woman with natural lighting, subtle background blur, high-quality professional photography" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCe_G8mDdSMWIlLiW3aBKMRw0ljyLQN8lQuS0_yMFEhjzDIKoe33IJaWfOIOBts14PZb6rXQDhow4BGwoTgoTe6uFLWYfDtjuwow1CAY5UM6O9ZqLYVIbRMx2MmMqMVY6A0WRKOfIEkskYWuoU9dAWtQvIJvov34E6i5pCqhZBjcNL5bGjpsdotbd4skKJtxgUz8XhVkS-3hhZI9ChoZUOskixxOsI4mZgKbBjshcAZAeoAYoNBN1rwl-YzXm75MwvUKoQaDCDRHUg"/>
</div>
<div>
<h2 class="font-headline-md text-headline-md text-blue-500 font-bold uppercase tracking-widest text-sm">Command Center</h2>
<p class="font-label-sm text-label-sm text-slate-400">Premium Tier</p>
</div>
</div>
<div class="flex-1 overflow-y-auto space-y-1 mt-4">
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform duration-200">live_tv</span>
<span class="font-['Space_Grotesk'] text-sm font-medium">Live TV</span>
</a>
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform duration-200">movie</span>
<span class="font-['Space_Grotesk'] text-sm font-medium">Movies</span>
</a>
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform duration-200">theaters</span>
<span class="font-['Space_Grotesk'] text-sm font-medium">Series</span>
</a>
<a class="text-slate-500 flex items-center gap-4 px-6 py-4 hover:bg-white/5 hover:text-white transition-colors group" href="#">
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform duration-200">fiber_manual_record</span>
<span class="font-['Space_Grotesk'] text-sm font-medium">Recordings</span>
</a>
<a class="bg-blue-500/10 text-blue-400 border-l-4 border-blue-500 flex items-center gap-4 px-6 py-4 group" href="#">
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform duration-200" style="font-variation-settings: 'FILL' 1;">settings</span>
<span class="font-['Space_Grotesk'] text-sm font-medium">Settings</span>
</a>
</div>
<div class="mt-auto px-6 space-y-1">
<a class="text-slate-500 flex items-center gap-4 py-3 hover:bg-white/5 hover:text-white transition-colors group rounded-lg px-4 -mx-4" href="#">
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform duration-200">help</span>
<span class="font-['Space_Grotesk'] text-sm font-medium">Support</span>
</a>
<a class="text-slate-500 flex items-center gap-4 py-3 hover:bg-white/5 hover:text-white transition-colors group rounded-lg px-4 -mx-4" href="#">
<span class="material-symbols-outlined group-hover:translate-x-1 transition-transform duration-200">logout</span>
<span class="font-['Space_Grotesk'] text-sm font-medium">Logout</span>
</a>
</div>
</nav>
<!-- Main Content Area -->
<main class="flex-1 md:ml-64 p-margin lg:p-lg min-h-screen flex flex-col gap-lg">
<!-- Header & Tabs -->
<header class="flex flex-col gap-md">
<div>
<h1 class="font-headline-xl text-headline-xl text-on-surface mb-xs">Paramètres</h1>
<p class="font-body-lg text-body-lg text-on-surface-variant">Configuration de votre expérience XtremFlow.</p>
</div>
<div class="glass-panel rounded-lg p-1 flex gap-2 w-fit">
<button class="bg-primary/20 text-primary font-label-lg text-label-lg px-6 py-2.5 rounded-md border border-primary/30 shadow-[0_0_15px_rgba(0,122,255,0.2)] transition-all">Filtres</button>
<button class="text-on-surface-variant hover:text-on-surface hover:bg-white/5 font-label-lg text-label-lg px-6 py-2.5 rounded-md transition-all">Streaming</button>
<button class="text-on-surface-variant hover:text-on-surface hover:bg-white/5 font-label-lg text-label-lg px-6 py-2.5 rounded-md transition-all">Apparence</button>
<button class="text-on-surface-variant hover:text-on-surface hover:bg-white/5 font-label-lg text-label-lg px-6 py-2.5 rounded-md transition-all">Administration</button>
</div>
</header>
<!-- Content Grid -->
<div class="grid grid-cols-1 xl:grid-cols-3 gap-gutter flex-1">
<!-- Filtre TV Live -->
<section class="glass-floating rounded-xl p-md flex flex-col gap-md">
<div class="flex items-center gap-3 pb-sm border-b border-white/10">
<div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center border border-primary/20">
<span class="material-symbols-outlined text-primary text-xl">live_tv</span>
</div>
<h2 class="font-headline-lg text-headline-md text-on-surface">Filtre TV Live</h2>
</div>
<div class="flex flex-col gap-4">
<div>
<label class="font-label-sm text-label-sm text-on-surface-variant block mb-2 uppercase tracking-wider">Rechercher une catégorie</label>
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline">search</span>
<input class="w-full input-dark rounded-md py-2.5 pl-10 pr-4 font-body-md text-body-md transition-all" placeholder="Ex: France, Sport, Info..." type="text"/>
</div>
</div>
<div>
<label class="font-label-sm text-label-sm text-on-surface-variant block mb-3 uppercase tracking-wider">Catégories Actives</label>
<div class="flex flex-wrap gap-2">
<div class="chip rounded-full px-4 py-1.5 flex items-center gap-2 cursor-pointer hover:bg-primary/20 transition-colors">
<span class="font-label-sm text-label-sm">FRANCE</span>
<span class="material-symbols-outlined text-[14px]">close</span>
</div>
<div class="chip rounded-full px-4 py-1.5 flex items-center gap-2 cursor-pointer hover:bg-primary/20 transition-colors">
<span class="font-label-sm text-label-sm">SPORT</span>
<span class="material-symbols-outlined text-[14px]">close</span>
</div>
<div class="chip rounded-full px-4 py-1.5 flex items-center gap-2 cursor-pointer hover:bg-primary/20 transition-colors">
<span class="font-label-sm text-label-sm">DOCUMENTAIRE</span>
<span class="material-symbols-outlined text-[14px]">close</span>
</div>
<div class="chip rounded-full px-4 py-1.5 flex items-center gap-2 cursor-pointer hover:bg-primary/20 transition-colors">
<span class="font-label-sm text-label-sm">MUSIQUE</span>
<span class="material-symbols-outlined text-[14px]">close</span>
</div>
</div>
</div>
</div>
</section>
<!-- Filtre Films -->
<section class="glass-floating rounded-xl p-md flex flex-col gap-md">
<div class="flex items-center gap-3 pb-sm border-b border-white/10">
<div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center border border-primary/20">
<span class="material-symbols-outlined text-primary text-xl">movie</span>
</div>
<h2 class="font-headline-lg text-headline-md text-on-surface">Filtre Films</h2>
</div>
<div class="flex flex-col gap-4">
<div>
<label class="font-label-sm text-label-sm text-on-surface-variant block mb-2 uppercase tracking-wider">Rechercher une catégorie</label>
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline">search</span>
<input class="w-full input-dark rounded-md py-2.5 pl-10 pr-4 font-body-md text-body-md transition-all" placeholder="Ex: Action, VF, 4K..." type="text"/>
</div>
</div>
<div>
<label class="font-label-sm text-label-sm text-on-surface-variant block mb-3 uppercase tracking-wider">Catégories Actives</label>
<div class="flex flex-wrap gap-2">
<div class="chip rounded-full px-4 py-1.5 flex items-center gap-2 cursor-pointer hover:bg-primary/20 transition-colors">
<span class="font-label-sm text-label-sm">VF</span>
<span class="material-symbols-outlined text-[14px]">close</span>
</div>
<div class="chip rounded-full px-4 py-1.5 flex items-center gap-2 cursor-pointer hover:bg-primary/20 transition-colors">
<span class="font-label-sm text-label-sm">ACTION</span>
<span class="material-symbols-outlined text-[14px]">close</span>
</div>
<div class="chip rounded-full px-4 py-1.5 flex items-center gap-2 cursor-pointer hover:bg-primary/20 transition-colors">
<span class="font-label-sm text-label-sm">SCI-FI</span>
<span class="material-symbols-outlined text-[14px]">close</span>
</div>
</div>
</div>
</div>
</section>
<!-- Filtre Séries -->
<section class="glass-floating rounded-xl p-md flex flex-col gap-md">
<div class="flex items-center gap-3 pb-sm border-b border-white/10">
<div class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center border border-primary/20">
<span class="material-symbols-outlined text-primary text-xl">theaters</span>
</div>
<h2 class="font-headline-lg text-headline-md text-on-surface">Filtre Séries</h2>
</div>
<div class="flex flex-col gap-4">
<div>
<label class="font-label-sm text-label-sm text-on-surface-variant block mb-2 uppercase tracking-wider">Rechercher une catégorie</label>
<div class="relative">
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-outline">search</span>
<input class="w-full input-dark rounded-md py-2.5 pl-10 pr-4 font-body-md text-body-md transition-all" placeholder="Ex: Netflix, VOSTFR, Drame..." type="text"/>
</div>
</div>
<div>
<label class="font-label-sm text-label-sm text-on-surface-variant block mb-3 uppercase tracking-wider">Catégories Actives</label>
<div class="flex flex-wrap gap-2">
<div class="chip rounded-full px-4 py-1.5 flex items-center gap-2 cursor-pointer hover:bg-primary/20 transition-colors">
<span class="font-label-sm text-label-sm">NETFLIX</span>
<span class="material-symbols-outlined text-[14px]">close</span>
</div>
<div class="chip rounded-full px-4 py-1.5 flex items-center gap-2 cursor-pointer hover:bg-primary/20 transition-colors">
<span class="font-label-sm text-label-sm">VOSTFR</span>
<span class="material-symbols-outlined text-[14px]">close</span>
</div>
<div class="chip rounded-full px-4 py-1.5 flex items-center gap-2 cursor-pointer hover:bg-primary/20 transition-colors">
<span class="font-label-sm text-label-sm">DRAME</span>
<span class="material-symbols-outlined text-[14px]">close</span>
</div>
<div class="chip rounded-full px-4 py-1.5 flex items-center gap-2 cursor-pointer hover:bg-primary/20 transition-colors">
<span class="font-label-sm text-label-sm">HBO</span>
<span class="material-symbols-outlined text-[14px]">close</span>
</div>
</div>
</div>
</div>
</section>
</div>
<!-- Action Buttons -->
<div class="flex justify-end gap-4 mt-auto pt-8 border-t border-white/10">
<button class="px-6 py-2.5 rounded-md border border-outline-variant text-on-surface hover:bg-surface-variant transition-colors font-label-lg text-label-lg glass-panel">Annuler</button>
<button class="bg-gradient-to-r from-[#007AFF] to-[#00A8FF] text-white px-8 py-2.5 rounded-md font-label-lg text-label-lg hover:shadow-[0_0_20px_rgba(0,122,255,0.4)] transition-all">Sauvegarder les filtres</button>
</div>
</main>
</body></html>
Binary file not shown.

After

Width:  |  Height:  |  Size: 203 KiB