Ajout nouveaux thèmes

2026-03-10 09:12:42 +01:00
parent 5e3fe4745e
commit 76e46a48a0
5 changed files with 234 additions and 13 deletions
@@ -17,31 +17,21 @@ $m3u_url    = htmlspecialchars($config["m3u_url"] ?? "");
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>GridTV — <?= $group_name ?></title>
 <link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@300;400;600;700&display=swap" rel="stylesheet">
+<link id="themeStylesheet" rel="stylesheet" href="themes/default.css">
 <style>
+  /* Variables de layout — indépendantes du thème */
  :root {
-    --bg: #0a0b0d;
-    --surface: #111318;
-    --surface2: #181b22;
-    --border: #232733;
-    --border-bright: #2e3444;
-    --accent: #e8c842;
-    --accent2: #4a9eff;
-    --accent-live: #ff4444;
-    --text: #c8cdd8;
-    --text-dim: #5a6070;
-    --text-bright: #eef0f5;
    --channel-w: 160px;
    --row-h: 80px;
    --header-h: 52px;
  }

-  * { box-sizing: border-box; margin: 0; padding: 0; }
  html, body { height: 100%; }

  body {
    background: var(--bg);
    color: var(--text);
-    font-family: 'Barlow Condensed', sans-serif;
+    font-family: var(--font-ui);
    font-size: 14px;
    overflow: hidden;
    display: flex;
@@ -585,6 +575,27 @@ $m3u_url    = htmlspecialchars($config["m3u_url"] ?? "");
    .clock { font-size: 16px; }
  }

+  /* ═══════════════════════════════════════════
+     SÉLECTEUR DE THÈME
+  ═══════════════════════════════════════════ */
+  .theme-select {
+    background: transparent;
+    border: 1px solid var(--border-bright);
+    color: var(--text-dim);
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: 0.08em;
+    padding: 4px 8px;
+    cursor: pointer;
+    text-transform: uppercase;
+    transition: all 0.15s;
+    flex-shrink: 0;
+    -webkit-appearance: none;
+    appearance: none;
+  }
+  .theme-select:hover { border-color: var(--accent2); color: var(--accent2); }
+  .theme-select option { background: #111; color: #eee; font-family: sans-serif; }
+
  @media (max-width: 600px) {
    html, body { height: 100%; overflow: hidden; }
    body { overflow: hidden; }
@@ -642,6 +653,12 @@ $m3u_url    = htmlspecialchars($config["m3u_url"] ?? "");
    <button class="copy-btn" onclick="copyUrl('m3u')" title="Copier l'URL M3U">M3U</button>
 <?php endif; ?>
  </div>
+  <select class="theme-select" id="themeSelect" onchange="setTheme(this.value)" title="Thème">
+    <option value="default">⬛ Default</option>
+    <option value="magazine">📰 Magazine</option>
+    <option value="cyberpunk">🌆 Cyberpunk</option>
+    <option value="steampunk">⚙️ Steampunk</option>
+  </select>
  <div class="live-dot">LIVE</div>
 </div>

@@ -1007,6 +1024,20 @@ function moveTooltip(e) {
 }
 function hideTooltip() { document.getElementById('tooltip').classList.remove('visible'); }

+
+// ── THÈMES ────────────────────────────────────────────────────────────────────
+function setTheme(theme) {
+  document.getElementById('themeStylesheet').href = 'themes/' + theme + '.css';
+  localStorage.setItem('gridtv-theme', theme);
+  document.getElementById('themeSelect').value = theme;
+}
+
+function initTheme() {
+  const saved = localStorage.getItem('gridtv-theme') || 'default';
+  setTheme(saved);
+}
+initTheme();
+
 // ── LIVE UPDATES ──────────────────────────────────────────────────────────────
 function startLiveUpdates() {
  setInterval(() => { if (!isMobile()) positionNowLine(); }, 30000);
@@ -0,0 +1,64 @@
+/*
+ * GridTV Theme — Cyberpunk (Néons & dystopie)
+ * Violet/magenta sur noir profond, glows, Blade Runner vibes.
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&display=swap');
+
+:root {
+  --bg: #050008;
+  --surface: #0a000f;
+  --surface2: #0f0018;
+  --border: #2a0040;
+  --border-bright: #5a0080;
+  --accent: #ff00ff;
+  --accent2: #00ffcc;
+  --accent-live: #ff0055;
+  --text: #cc88ff;
+  --text-dim: #660099;
+  --text-bright: #ffccff;
+  --prog-bg: #0d0018;
+  --prog-border: #3d0060;
+  --prog-live-bg: #1a0030;
+  --prog-live-border: #ff00ff;
+  --font-ui: 'Rajdhani', sans-serif;
+  --font-mono: 'Share Tech Mono', monospace;
+}
+
+/* Topbar avec glow */
+.topbar {
+  border-bottom: 1px solid var(--accent);
+  box-shadow: 0 0 20px rgba(255,0,255,0.15);
+}
+
+/* Logo néon */
+.logo {
+  color: var(--accent);
+  text-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent);
+}
+
+/* Badge LIVE néon */
+.live-dot {
+  color: var(--accent-live);
+  text-shadow: 0 0 8px var(--accent-live);
+}
+.live-dot::before {
+  box-shadow: 0 0 6px var(--accent-live);
+}
+
+/* Programmes live avec glow */
+.program-block.is-live {
+  box-shadow: 0 0 8px rgba(255,0,255,0.3);
+}
+
+/* Barre rouge néon */
+.now-line {
+  box-shadow: 0 0 8px var(--accent-live), 0 0 16px var(--accent-live);
+}
+
+/* Bordures néon */
+.channels-col { border-right: 1px solid var(--accent); }
+.time-ruler { border-bottom: 1px solid var(--accent); }
+
+/* Scrollbar */
+.timeline-area::-webkit-scrollbar-thumb { background: var(--border-bright); }
@@ -0,0 +1,26 @@
+/*
+ * GridTV Theme — Default (Dark Studio)
+ * Salle de régie sombre, la base.
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@300;400;600;700&display=swap');
+
+:root {
+  --bg: #0a0b0d;
+  --surface: #111318;
+  --surface2: #181b22;
+  --border: #232733;
+  --border-bright: #2e3444;
+  --accent: #e8c842;
+  --accent2: #4a9eff;
+  --accent-live: #ff4444;
+  --text: #c8cdd8;
+  --text-dim: #5a6070;
+  --text-bright: #eef0f5;
+  --prog-bg: #141820;
+  --prog-border: #1e2a3a;
+  --prog-live-bg: #0d2040;
+  --prog-live-border: #4a9eff;
+  --font-ui: 'Barlow Condensed', sans-serif;
+  --font-mono: 'Share Tech Mono', monospace;
+}
@@ -0,0 +1,48 @@
+/*
+ * GridTV Theme — Magazine (Vieux TV Guide années 60)
+ * Papier jauni, machine à écrire, bordures doubles.
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
+
+:root {
+  --bg: #f0e8d0;
+  --surface: #e8dfc0;
+  --surface2: #ddd4b0;
+  --border: #c8b890;
+  --border-bright: #a89870;
+  --accent: #c0392b;
+  --accent2: #2471a3;
+  --accent-live: #c0392b;
+  --text: #2c1810;
+  --text-dim: #7a6040;
+  --text-bright: #1a0c08;
+  --prog-bg: #ede4ca;
+  --prog-border: #c8b890;
+  --prog-live-bg: #fdf0e8;
+  --prog-live-border: #c0392b;
+  --font-ui: 'Special Elite', serif;
+  --font-mono: 'Special Elite', serif;
+}
+
+/* Topbar papier texturé avec double bordure */
+.topbar {
+  border-bottom: 3px double var(--border-bright);
+  background: repeating-linear-gradient(
+    -45deg, transparent, transparent 2px,
+    rgba(0,0,0,0.03) 2px, rgba(0,0,0,0.03) 4px
+  ), var(--surface);
+}
+
+.logo { text-transform: uppercase; letter-spacing: 0.15em; }
+
+/* Colonne chaînes avec double bordure */
+.channels-col { border-right: 3px double var(--border-bright); }
+.channel-cell { border-bottom: 1px dashed var(--border); }
+
+/* Grille */
+.program-block { border-radius: 0; }
+.time-ruler { border-bottom: 3px double var(--border-bright); }
+
+/* Scrollbar */
+.timeline-area::-webkit-scrollbar-thumb { background: var(--border-bright); }
@@ -0,0 +1,52 @@
+/*
+ * GridTV Theme — Steampunk (Cuivre victorien)
+ * Cuivre, brun, engrenages imaginaires. Très 1880.
+ */
+
+@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap');
+
+:root {
+  --bg: #1a1008;
+  --surface: #241808;
+  --surface2: #2e2010;
+  --border: #5a3a10;
+  --border-bright: #8a5a20;
+  --accent: #d4820a;
+  --accent2: #c87820;
+  --accent-live: #e05010;
+  --text: #c8a060;
+  --text-dim: #7a5030;
+  --text-bright: #f0d090;
+  --prog-bg: #201408;
+  --prog-border: #6a4010;
+  --prog-live-bg: #2a1800;
+  --prog-live-border: #d4820a;
+  --font-ui: 'IM Fell English', serif;
+  --font-mono: 'Share Tech Mono', monospace;
+}
+
+/* Topbar avec lignes cuivrées */
+.topbar {
+  border-bottom: 2px solid var(--accent);
+  background: repeating-linear-gradient(
+    90deg, transparent, transparent 40px,
+    rgba(212,130,10,0.04) 40px, rgba(212,130,10,0.04) 41px
+  ), var(--surface);
+}
+
+.logo { color: var(--accent); }
+
+/* Blocs carrés façon métal usiné */
+.program-block { border-radius: 0; }
+
+/* Bordures cuivrées */
+.channels-col { border-right: 2px solid var(--accent); }
+.time-ruler { border-bottom: 2px solid var(--accent); }
+.channel-cell { border-bottom: 1px solid var(--border); }
+
+/* Barre "now" cuivrée */
+.now-line { background: var(--accent); }
+.now-line::before { background: var(--accent); }
+
+/* Scrollbar */
+.timeline-area::-webkit-scrollbar-thumb { background: var(--accent); }