Refactor slide structure to enhance menu board, wayfinding sign, and schedule display

theme/assets/css/main.css

@@ -2508,76 +2508,245 @@ p:last-child { margin-bottom: 0; }
   transition: opacity 0.7s ease;
 }
 .ts-slide.is-active { opacity: 1; }
-/* — Slide 1: Welcome / hero style — */
+
-.ts-slide--1 {
+/* ═══════════════════════════════════════════════════════════
-  background: linear-gradient(135deg, #1a2940 0%, #0f1923 100%);
+   Slide 1 — Menu Board
+   ═══════════════════════════════════════════════════════════ */
+.ts-slide--menu {
+  background: linear-gradient(170deg, #1a1206 0%, #0d0a04 100%);
+  padding: 8%;
 }
-.ts-slide--1 .ts-slide__accent {
+.ts-menu { width: 100%; height: 100%; display: flex; flex-direction: column; }
-  width: 30px;
+.ts-menu__header {
-  height: 3px;
+  display: flex;
-  background: #4ade80;
+  align-items: center;
-  border-radius: 2px;
+  gap: 6px;
-  margin-bottom: 8px;
-}
-.ts-slide--1 .ts-slide__heading {
-  width: 70%;
-  height: 8px;
-  background: rgba(255,255,255,0.85);
-  border-radius: 2px;
   margin-bottom: 6px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid rgba(255,200,100,0.25);
 }
-.ts-slide--1 .ts-slide__sub {
+.ts-menu__logo {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #e6a730;
+  flex-shrink: 0;
+}
+.ts-menu__title {
   width: 50%;
   height: 5px;
-  background: rgba(255,255,255,0.35);
+  background: rgba(255,220,150,0.8);
-  border-radius: 2px;
+  border-radius: 1px;
 }
-/* — Slide 2: Sale / promo style — */
+.ts-menu__cols {
-.ts-slide--2 {
-  background: linear-gradient(135deg, #14532d 0%, #052e16 100%);
-}
-.ts-slide--2 .ts-slide__badge {
-  width: 22px;
-  height: 22px;
-  background: #4ade80;
-  border-radius: 50%;
-  margin-bottom: 8px;
-}
-.ts-slide--2 .ts-slide__heading {
-  width: 60%;
-  height: 7px;
-  background: rgba(255,255,255,0.9);
-  border-radius: 2px;
-  margin-bottom: 6px;
-}
-.ts-slide--2 .ts-slide__bar {
-  width: 45%;
-  height: 12px;
-  background: #4ade80;
-  border-radius: 3px;
-}
-/* — Slide 3: Menu / info-board style — */
-.ts-slide--3 {
-  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
-}
-.ts-slide--3 .ts-slide__row {
   display: flex;
-  gap: 8px;
+  gap: 10px;
-  margin-bottom: 8px;
+  flex: 1;
 }
-.ts-slide--3 .ts-slide__block {
+.ts-menu__col {
-  width: 36px;
+  flex: 1;
-  height: 28px;
+  display: flex;
-  background: rgba(255,255,255,0.12);
+  flex-direction: column;
-  border-radius: 3px;
+  gap: 4px;
-  border: 1px solid rgba(74,222,128,0.25);
 }
-.ts-slide--3 .ts-slide__heading {
+.ts-menu__cat {
   width: 55%;
+  height: 4px;
+  background: #e6a730;
+  border-radius: 1px;
+  margin-bottom: 1px;
+}
+.ts-menu__item {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.ts-menu__name {
+  width: 40%;
+  height: 3px;
+  background: rgba(255,255,255,0.6);
+  border-radius: 1px;
+  flex-shrink: 0;
+}
+.ts-menu__dots {
+  flex: 1;
+  height: 0;
+  border-bottom: 1px dotted rgba(255,255,255,0.18);
+}
+.ts-menu__price {
+  width: 14%;
+  height: 3px;
+  background: rgba(255,220,150,0.7);
+  border-radius: 1px;
+  flex-shrink: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Slide 2 — Wayfinding Sign
+   ═══════════════════════════════════════════════════════════ */
+.ts-slide--wayfind {
+  background: linear-gradient(170deg, #0c1a2e 0%, #081220 100%);
+  padding: 8%;
+}
+.ts-wf { width: 100%; height: 100%; display: flex; flex-direction: column; }
+.ts-wf__header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 8px;
+  padding-bottom: 5px;
+  border-bottom: 1px solid rgba(74,222,128,0.2);
+}
+.ts-wf__building {
+  width: 60%;
   height: 5px;
-  background: rgba(255,255,255,0.45);
+  background: rgba(255,255,255,0.7);
+  border-radius: 1px;
+}
+.ts-wf__rows {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  flex: 1;
+  justify-content: center;
+}
+.ts-wf__row {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 3px 4px;
+  background: rgba(255,255,255,0.04);
   border-radius: 2px;
 }
+.ts-wf__arrow {
+  width: 0;
+  height: 0;
+  flex-shrink: 0;
+}
+.ts-wf__arrow--left {
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  border-right: 5px solid #4ade80;
+}
+.ts-wf__arrow--right {
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  border-left: 5px solid #4ade80;
+}
+.ts-wf__arrow--up {
+  border-left: 3px solid transparent;
+  border-right: 3px solid transparent;
+  border-bottom: 5px solid #4ade80;
+}
+.ts-wf__label {
+  height: 3px;
+  background: rgba(255,255,255,0.55);
+  border-radius: 1px;
+  flex: 1;
+}
+.ts-wf__label--w1 { max-width: 60%; }
+.ts-wf__label--w2 { max-width: 45%; }
+.ts-wf__label--w3 { max-width: 70%; }
+.ts-wf__label--w4 { max-width: 50%; }
+.ts-wf__floor {
+  width: 14px;
+  height: 8px;
+  background: rgba(74,222,128,0.15);
+  border: 1px solid rgba(74,222,128,0.3);
+  border-radius: 2px;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+/* ═══════════════════════════════════════════════════════════
+   Slide 3 — Schedule / Timetable
+   ═══════════════════════════════════════════════════════════ */
+.ts-slide--sched {
+  background: linear-gradient(170deg, #111827 0%, #0a0f1a 100%);
+  padding: 8%;
+}
+.ts-sched { width: 100%; height: 100%; display: flex; flex-direction: column; }
+.ts-sched__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 6px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid rgba(74,222,128,0.2);
+}
+.ts-sched__title {
+  width: 35%;
+  height: 5px;
+  background: rgba(255,255,255,0.75);
+  border-radius: 1px;
+}
+.ts-sched__date {
+  width: 20%;
+  height: 4px;
+  background: rgba(255,255,255,0.3);
+  border-radius: 1px;
+}
+.ts-sched__table {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  flex: 1;
+}
+.ts-sched__hrow,
+.ts-sched__row {
+  display: flex;
+  gap: 3px;
+}
+.ts-sched__hrow {
+  margin-bottom: 2px;
+}
+.ts-sched__hcell {
+  flex: 1;
+  height: 3px;
+  background: rgba(255,255,255,0.25);
+  border-radius: 1px;
+}
+.ts-sched__hcell:first-child { flex: 0.5; }
+.ts-sched__row {
+  align-items: stretch;
+}
+.ts-sched__time {
+  flex: 0.5;
+  height: 10px;
+  display: flex;
+  align-items: center;
+}
+.ts-sched__time::before {
+  content: '';
+  width: 80%;
+  height: 3px;
+  background: rgba(255,255,255,0.3);
+  border-radius: 1px;
+}
+.ts-sched__cell {
+  flex: 1;
+  height: 10px;
+  background: rgba(255,255,255,0.04);
+  border-radius: 2px;
+  border: 1px solid rgba(255,255,255,0.06);
+}
+.ts-sched__event {
+  flex: 1;
+  height: 10px;
+  border-radius: 2px;
+}
+.ts-sched__event--a {
+  background: rgba(74,222,128,0.25);
+  border: 1px solid rgba(74,222,128,0.4);
+}
+.ts-sched__event--b {
+  background: rgba(96,165,250,0.25);
+  border: 1px solid rgba(96,165,250,0.4);
+}
+.ts-sched__event--c {
+  background: rgba(251,191,36,0.25);
+  border: 1px solid rgba(251,191,36,0.4);
+}
 /* HDMI port on back-right of TV */
 .ts-tv__port {
   position: absolute;

theme/blocks/index.php

@@ -1506,9 +1506,55 @@ function oribi_render_platform_row( $a ) {
         $ts .= '<div class="ts-tv__body">';
         $ts .= '<div class="ts-tv__screen">';
         $ts .= '<div class="ts-slides">';
-        $ts .= '<div class="ts-slide ts-slide--1"><div class="ts-slide__accent"></div><div class="ts-slide__heading"></div><div class="ts-slide__sub"></div></div>';
+
-        $ts .= '<div class="ts-slide ts-slide--2"><div class="ts-slide__badge"></div><div class="ts-slide__heading"></div><div class="ts-slide__bar"></div></div>';
+        // Slide 1 — Menu Board
-        $ts .= '<div class="ts-slide ts-slide--3"><div class="ts-slide__row"><div class="ts-slide__block"></div><div class="ts-slide__block"></div></div><div class="ts-slide__heading"></div></div>';
+        $ts .= '<div class="ts-slide ts-slide--menu">';
+        $ts .= '<div class="ts-menu">';
+        $ts .= '<div class="ts-menu__header"><div class="ts-menu__logo"></div><div class="ts-menu__title"></div></div>';
+        $ts .= '<div class="ts-menu__cols">';
+        $ts .= '<div class="ts-menu__col">';
+        $ts .= '<div class="ts-menu__cat"></div>';
+        $ts .= '<div class="ts-menu__item"><span class="ts-menu__name"></span><span class="ts-menu__dots"></span><span class="ts-menu__price"></span></div>';
+        $ts .= '<div class="ts-menu__item"><span class="ts-menu__name"></span><span class="ts-menu__dots"></span><span class="ts-menu__price"></span></div>';
+        $ts .= '<div class="ts-menu__item"><span class="ts-menu__name"></span><span class="ts-menu__dots"></span><span class="ts-menu__price"></span></div>';
+        $ts .= '</div>';
+        $ts .= '<div class="ts-menu__col">';
+        $ts .= '<div class="ts-menu__cat"></div>';
+        $ts .= '<div class="ts-menu__item"><span class="ts-menu__name"></span><span class="ts-menu__dots"></span><span class="ts-menu__price"></span></div>';
+        $ts .= '<div class="ts-menu__item"><span class="ts-menu__name"></span><span class="ts-menu__dots"></span><span class="ts-menu__price"></span></div>';
+        $ts .= '<div class="ts-menu__item"><span class="ts-menu__name"></span><span class="ts-menu__dots"></span><span class="ts-menu__price"></span></div>';
+        $ts .= '</div>';
+        $ts .= '</div>';
+        $ts .= '</div>';
+        $ts .= '</div>';
+
+        // Slide 2 — Wayfinding Sign
+        $ts .= '<div class="ts-slide ts-slide--wayfind">';
+        $ts .= '<div class="ts-wf">';
+        $ts .= '<div class="ts-wf__header"><div class="ts-wf__building"></div></div>';
+        $ts .= '<div class="ts-wf__rows">';
+        $ts .= '<div class="ts-wf__row"><span class="ts-wf__arrow ts-wf__arrow--left"></span><span class="ts-wf__label ts-wf__label--w1"></span><span class="ts-wf__floor"></span></div>';
+        $ts .= '<div class="ts-wf__row"><span class="ts-wf__arrow ts-wf__arrow--right"></span><span class="ts-wf__label ts-wf__label--w2"></span><span class="ts-wf__floor"></span></div>';
+        $ts .= '<div class="ts-wf__row"><span class="ts-wf__arrow ts-wf__arrow--up"></span><span class="ts-wf__label ts-wf__label--w3"></span><span class="ts-wf__floor"></span></div>';
+        $ts .= '<div class="ts-wf__row"><span class="ts-wf__arrow ts-wf__arrow--left"></span><span class="ts-wf__label ts-wf__label--w4"></span><span class="ts-wf__floor"></span></div>';
+        $ts .= '</div>';
+        $ts .= '</div>';
+        $ts .= '</div>';
+
+        // Slide 3 — Schedule / Timetable
+        $ts .= '<div class="ts-slide ts-slide--sched">';
+        $ts .= '<div class="ts-sched">';
+        $ts .= '<div class="ts-sched__header"><div class="ts-sched__title"></div><div class="ts-sched__date"></div></div>';
+        $ts .= '<div class="ts-sched__table">';
+        $ts .= '<div class="ts-sched__hrow"><span class="ts-sched__hcell"></span><span class="ts-sched__hcell"></span><span class="ts-sched__hcell"></span><span class="ts-sched__hcell"></span></div>';
+        $ts .= '<div class="ts-sched__row"><span class="ts-sched__time"></span><span class="ts-sched__event ts-sched__event--a"></span><span class="ts-sched__cell"></span><span class="ts-sched__cell"></span></div>';
+        $ts .= '<div class="ts-sched__row"><span class="ts-sched__time"></span><span class="ts-sched__cell"></span><span class="ts-sched__event ts-sched__event--b"></span><span class="ts-sched__cell"></span></div>';
+        $ts .= '<div class="ts-sched__row"><span class="ts-sched__time"></span><span class="ts-sched__cell"></span><span class="ts-sched__cell"></span><span class="ts-sched__event ts-sched__event--c"></span></div>';
+        $ts .= '<div class="ts-sched__row"><span class="ts-sched__time"></span><span class="ts-sched__event ts-sched__event--a"></span><span class="ts-sched__event ts-sched__event--b"></span><span class="ts-sched__cell"></span></div>';
+        $ts .= '</div>';
+        $ts .= '</div>';
+        $ts .= '</div>';
+
         $ts .= '</div>'; // ts-slides
         $ts .= '</div>'; // ts-tv__screen
         $ts .= '<div class="ts-tv__port"></div>';