diff --git a/app/config/channels.json b/app/config/channels.json index 85a72a0..98df423 100644 --- a/app/config/channels.json +++ b/app/config/channels.json @@ -324,7 +324,7 @@ "icon": "", "country": "", "language": "", - "enabled": false, + "enabled": true, "favorite": false, "number": 300, "group": "Österreich" diff --git a/app/public/assets/css/layout.css b/app/public/assets/css/layout.css index 088880c..b04df36 100644 --- a/app/public/assets/css/layout.css +++ b/app/public/assets/css/layout.css @@ -1,22 +1,37 @@ .app-shell { min-height: calc(100vh - 82px); display: grid; - grid-template-columns: 230px 1fr; + grid-template-columns: 230px minmax(0, 1fr); + width: 100%; } .app-main { min-width: 0; + width: 100%; } .app-header { + position: sticky; + top: 0; + z-index: 100; + width: 100%; height: 82px; - background: var(--panel); - border-bottom: 1px solid var(--border); - padding: 16px 28px; + display: flex; align-items: center; - justify-content: space-between; - gap: 24px; + gap: 2rem; + + padding: 0 28px; + + background: rgba(17, 24, 39, 0.92); + backdrop-filter: blur(12px); + + border-bottom: 1px solid var(--border); + box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18); +} + +.brand { + flex: 0 0 auto; } .brand-title { @@ -30,8 +45,15 @@ margin-top: 2px; } -.search-box input { - width: min(360px, 40vw); +.header-center { + flex: 1; + display: flex; + justify-content: center; + min-width: 0; +} + +.header-search { + width: min(500px, 100%); background: #020617; color: var(--text); border: 1px solid var(--border); @@ -39,9 +61,56 @@ padding: 10px 16px; } +.header-search:disabled { + opacity: 0.65; + cursor: not-allowed; +} + +.header-status { + display: flex; + align-items: center; + gap: 1.5rem; + color: var(--muted); + font-size: 0.9rem; + flex: 0 0 auto; +} + +.status-item { + display: flex; + align-items: center; + gap: 0.45rem; + white-space: nowrap; +} + +.status-dot { + width: 10px; + height: 10px; + border-radius: 50%; + background: #22c55e; + box-shadow: 0 0 10px rgba(34, 197, 94, 0.9); +} + .content { padding: 32px; width: 100%; + min-width: 0; +} + +.sidebar { + position: sticky; + top: 80px; + height: calc(100vh - 80px); + align-self: flex-start; +} + +@media (max-width: 1100px) { + .header-status { + gap: 0.8rem; + } + + .status-item:first-child { + display: none; + } } @media (max-width: 900px) { @@ -54,24 +123,31 @@ } .app-header { + height: auto; + min-height: 82px; padding: 14px 20px; + flex-wrap: wrap; + gap: 1rem; } - .search-box input { - width: 160px; + .header-center { + order: 3; + flex-basis: 100%; + } + + .header-search { + width: 100%; + } + + .sidebar { + position: static; + height: auto; } } -.app-header { - position: sticky; - top: 0; - z-index: 100; - width: 100%; -} - -.sidebar { - position: sticky; - top: 80px; - height: calc(100vh - 80px); - align-self: flex-start; +@media (max-width: 620px) { + .header-status .status-item:first-child, + .header-status .status-item:last-child { + display: none; + } } diff --git a/app/public/assets/css/sidebar.css b/app/public/assets/css/sidebar.css index dd569d9..304f83d 100644 --- a/app/public/assets/css/sidebar.css +++ b/app/public/assets/css/sidebar.css @@ -1,7 +1,11 @@ .sidebar { - background: #0b1120; - border-right: 1px solid var(--border); - padding: 24px 16px; + position: sticky; + top: 80px; + height: calc(100vh - 80px); + background: var(--panel); + border-right: 1px solid var(--border); + box-shadow: 2px 0 10px rgba(0,0,0,.15); + overflow-y: auto; } .sidebar-nav { diff --git a/app/public/assets/css/timeline.css b/app/public/assets/css/timeline.css index 3e9fac9..c35fd02 100644 --- a/app/public/assets/css/timeline.css +++ b/app/public/assets/css/timeline.css @@ -26,7 +26,7 @@ .timeline-header { position: sticky; top: 0; - z-index: 5; + z-index: 40; background: var(--panel-2); border-bottom: 1px solid var(--border); } @@ -35,7 +35,7 @@ .timeline-channel { position: sticky; left: 0; - z-index: 4; + z-index: 30; background: var(--panel-2); border-right: 1px solid var(--border); } @@ -299,3 +299,7 @@ .live-badge[hidden] { display: none !important; } + +.timeline-now-line { + z-index: 5; +} diff --git a/app/public/assets/js/header.js b/app/public/assets/js/header.js new file mode 100644 index 0000000..b4251ea --- /dev/null +++ b/app/public/assets/js/header.js @@ -0,0 +1,18 @@ +function updateClock() { + const clock = document.getElementById('liveClock'); + + if (!clock) { + return; + } + + clock.textContent = new Date().toLocaleTimeString('de-AT', { + hour: '2-digit', + minute: '2-digit', + second: '2-digit' + }); +} + +document.addEventListener('DOMContentLoaded', () => { + updateClock(); + setInterval(updateClock, 1000); +}); diff --git a/app/templates/header.php b/app/templates/header.php index 38382d8..47ff8bd 100644 --- a/app/templates/header.php +++ b/app/templates/header.php @@ -1,10 +1,40 @@
-
-
TVGuide
-
tv.windesign.at
-
- +
+
TVGuide
+
tv.windesign.at
+
+ +
+ +
+ +
+ +
+ 📺 + + + + Sender +
+ +
+ 🕒 + +
+ +
+ + + EPG aktuell + +
+ +
+
diff --git a/app/templates/layout.php b/app/templates/layout.php index 35dcec7..0bc82f7 100644 --- a/app/templates/layout.php +++ b/app/templates/layout.php @@ -23,6 +23,7 @@ +