stephane.david/GridTV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/beta'

Browse Source
This commit is contained in:
Johnnybegood90
2026-03-10 09:39:14 +01:00
parent cd12f969da 99d01be1b3
commit 39b078d745
5 changed files with 154 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+50 -2
View File
@@ -18,6 +18,7 @@ $m3u_url = htmlspecialchars($config["m3u_url"] ?? "");
<title>GridTV — <?= $group_name ?></title> <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 href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow+Condensed:wght@300;400;600;700&display=swap" rel="stylesheet">
<style> <style>
/* Variables de base — surchargées par le fichier thème */
:root { :root {
--bg: #0a0b0d; --bg: #0a0b0d;
--surface: #111318; --surface: #111318;
@@ -30,18 +31,23 @@ $m3u_url = htmlspecialchars($config["m3u_url"] ?? "");
--text: #c8cdd8; --text: #c8cdd8;
--text-dim: #5a6070; --text-dim: #5a6070;
--text-bright: #eef0f5; --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;
--channel-w: 160px; --channel-w: 160px;
--row-h: 80px; --row-h: 80px;
--header-h: 52px; --header-h: 52px;
} }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; } html, body { height: 100%; }
body { body {
background: var(--bg); background: var(--bg);
color: var(--text); color: var(--text);
font-family: 'Barlow Condensed', sans-serif; font-family: var(--font-ui);
font-size: 14px; font-size: 14px;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
@@ -585,6 +591,27 @@ $m3u_url = htmlspecialchars($config["m3u_url"] ?? "");
.clock { font-size: 16px; } .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) { @media (max-width: 600px) {
html, body { height: 100%; overflow: hidden; } html, body { height: 100%; overflow: hidden; }
body { overflow: hidden; } body { overflow: hidden; }
@@ -604,6 +631,7 @@ $m3u_url = htmlspecialchars($config["m3u_url"] ?? "");
#navBtns { display: none !important; } #navBtns { display: none !important; }
} }
</style> </style>
<link id="themeStylesheet" rel="stylesheet" href="themes/default.css">
</head> </head>
<body> <body>
@@ -642,6 +670,12 @@ $m3u_url = htmlspecialchars($config["m3u_url"] ?? "");
<button class="copy-btn" onclick="copyUrl('m3u')" title="Copier l'URL M3U">M3U</button> <button class="copy-btn" onclick="copyUrl('m3u')" title="Copier l'URL M3U">M3U</button>
<?php endif; ?> <?php endif; ?>
</div> </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 class="live-dot">LIVE</div>
</div> </div>
@@ -1007,6 +1041,20 @@ function moveTooltip(e) {
} }
function hideTooltip() { document.getElementById('tooltip').classList.remove('visible'); } 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 ────────────────────────────────────────────────────────────── // ── LIVE UPDATES ──────────────────────────────────────────────────────────────
function startLiveUpdates() { function startLiveUpdates() {
setInterval(() => { if (!isMobile()) positionNowLine(); }, 30000); setInterval(() => { if (!isMobile()) positionNowLine(); }, 30000);
themes/cyberpunk.css
+26
View File
@@ -0,0 +1,26 @@
/*
* GridTV Theme — Cyberpunk
* Néons rose/cyan sur noir absolu. Blade Runner.
*/
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&display=swap');
:root {
--bg: #000008;
--surface: #080010;
--surface2: #100020;
--border: #300050;
--border-bright: #6000a0;
--accent: #ff00cc;
--accent2: #00ffee;
--accent-live: #ff0040;
--text: #dd88ff;
--text-dim: #7700bb;
--text-bright: #ffddff;
--prog-bg: #0a0018;
--prog-border: #400070;
--prog-live-bg: #180030;
--prog-live-border: #ff00cc;
--font-ui: 'Rajdhani', sans-serif;
--font-mono: 'Share Tech Mono', monospace;
}
themes/default.css
+26
View File
@@ -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;
}
themes/magazine.css
+26
View File
@@ -0,0 +1,26 @@
/*
* GridTV Theme — Magazine (Vieux TV Guide années 60)
* Papier jauni, encre rouge et bleue, machine à écrire.
*/
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
:root {
--bg: #f2e8c8;
--surface: #ede0b0;
--surface2: #e4d49a;
--border: #b8a070;
--border-bright: #8a7040;
--accent: #b01020;
--accent2: #1a4a8a;
--accent-live: #b01020;
--text: #1a0e06;
--text-dim: #6a4a20;
--text-bright: #0a0602;
--prog-bg: #ede0b0;
--prog-border: #b8a070;
--prog-live-bg: #fff0e0;
--prog-live-border: #b01020;
--font-ui: 'Special Elite', serif;
--font-mono: 'Special Elite', serif;
}
themes/steampunk.css
+26
View File
@@ -0,0 +1,26 @@
/*
* GridTV Theme — Steampunk (Cuivre victorien)
* Brun chaud, cuivre, laiton. Très 1880.
*/
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap');
:root {
--bg: #160e04;
--surface: #201408;
--surface2: #2c1e0c;
--border: #4a2e0a;
--border-bright: #7a4e18;
--accent: #c87808;
--accent2: #e0a020;
--accent-live: #cc3000;
--text: #d4a050;
--text-dim: #7a5428;
--text-bright: #f0cc80;
--prog-bg: #1c1206;
--prog-border: #5a380c;
--prog-live-bg: #281800;
--prog-live-border: #c87808;
--font-ui: 'IM Fell English', serif;
--font-mono: 'Share Tech Mono', monospace;
}