Timeline, Style

app/public/assets/css/modal.css

@@ -83,3 +83,31 @@
     font-size: .92rem;
     line-height: 1.4;
 }
+
+.programme-modal-header {
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+    margin-bottom: 1rem;
+}
+
+.programme-modal-logo {
+    width: 92px;
+    height: 58px;
+    object-fit: contain;
+    border: 1px solid var(--border);
+    border-radius: .7rem;
+    background: var(--panel-2);
+    padding: 4px;
+}
+
+.programme-modal-channel {
+    display: flex;
+    flex-direction: column;
+    gap: .25rem;
+}
+
+#modalChannel {
+    font-size: 1.05rem;
+    font-weight: 700;
+}

app/public/assets/css/timeline.css

@@ -190,8 +190,6 @@
   border-color: var(--accent);
 }
 
-cat >> app/public/assets/css/timeline.css <<'CSS'
-
 .timeline-channel {
   flex-direction: column;
   justify-content: center;
@@ -297,4 +295,7 @@ cat >> app/public/assets/css/timeline.css <<'CSS'
   font-size: 0.85rem;
   line-height: 1.35;
 }
-CSS
+
+.live-badge[hidden] {
+  display: none !important;
+}

app/public/assets/js/modules/modal.js

@@ -11,6 +11,8 @@ export function initProgrammeModal() {
   const category = document.getElementById("modalCategory");
   const time = document.getElementById("modalTime");
   const meta = document.getElementById("modalMeta");
+  const logo = document.getElementById("modalLogo");
+  const channel = document.getElementById("modalChannel");
 
   const openModal = (programmeElement) => {
     const id = programmeElement.dataset.programmeId;
@@ -30,6 +32,16 @@ export function initProgrammeModal() {
     description.textContent = programme.description || "Keine Beschreibung vorhanden.";
     category.textContent = programme.category || "";
 
+    channel.textContent =
+        `Kanal ${programme.channel_number} · ${programme.channel}`;
+
+    logo.src = `/assets/logos/${encodeURIComponent(programme.channel_id)}.svg`;
+
+    logo.onerror = () => {
+        logo.onerror = null;
+        logo.src = "/assets/logos/default.svg";
+    };
+
     const metaItems = [];
 
     if (metadata.season && metadata.episode) {
@@ -61,7 +73,7 @@ export function initProgrammeModal() {
     meta.textContent = metaItems.join(" • ");
     meta.hidden = metaItems.length === 0;
 
-    time.textContent = `${programme.channel || ""} · ${programme.start || ""} – ${programme.stop || ""}`;
+    time.textContent = `${programme.start} – ${programme.stop}`;
 
     modal.hidden = false;
     document.body.classList.add("modal-open");

app/templates/day.php

@@ -45,12 +45,18 @@ foreach ($dayProgrammes as $channel) {
     foreach ($channel['programmes'] as $programme) {
         $programmeIndex[$programme['id']] = [
             'id' => $programme['id'],
+            'channel_id' => $channel['channel_id'],
             'channel' => $channel['channel_name'],
+            'channel_number' => $channel['channel_number'],
+            'favorite' => $channel['favorite'],
             'title' => $programme['title'],
             'subtitle' => $programme['subtitle'],
             'description' => $programme['description'],
             'category' => $programme['category'],
             'metadata' => $programme['metadata'] ?? [],
+            'year' => $programme['metadata']['year'] ?? '',
+            'rating' => $programme['metadata']['age_rating'] ?? '',
+            'country' => $programme['metadata']['country'] ?? '',
             'start' => date('H:i', $programme['start']),
             'stop' => date('H:i', $programme['stop']),
         ];
@@ -237,13 +243,27 @@ foreach ($dayProgrammes as $channel) {
   <div class="programme-modal-backdrop" data-modal-close></div>
 
   <div class="programme-modal-card">
-    <button class="programme-modal-close" type="button" data-modal-close>×</button>
+      <button class="programme-modal-close" type="button" data-modal-close>×</button>
 
-    <div class="programme-modal-time" id="modalTime"></div>
+      <div class="programme-modal-header">
-    <div class="programme-modal-meta" id="modalMeta"></div>
+
-    <h2 id="modalTitle"></h2>
+          <img id="modalLogo" class="programme-modal-logo" src="/assets/logos/default.svg" alt="">
-    <div class="programme-modal-subtitle" id="modalSubtitle"></div>
+
-    <div class="programme-modal-category" id="modalCategory"></div>
+          <div class="programme-modal-channel">
-    <p id="modalDescription"></p>
+              <div id="modalChannel"></div>
+              <div id="modalTime" class="programme-modal-time"></div>
+          </div>
+
+      </div>
+
+      <h2 id="modalTitle"></h2>
+
+      <div id="modalSubtitle" class="programme-modal-subtitle"></div>
+
+      <div id="modalCategory" class="programme-modal-category"></div>
+
+      <div id="modalMeta" class="programme-modal-meta"></div>
+
+      <p id="modalDescription"></p>
   </div>
 </div>