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 @@
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 @@
+