diff --git a/theme/assets/css/main.css b/theme/assets/css/main.css index 4f8da2f..66efd75 100644 --- a/theme/assets/css/main.css +++ b/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 { - width: 30px; - height: 3px; - background: #4ade80; - border-radius: 2px; - margin-bottom: 8px; -} -.ts-slide--1 .ts-slide__heading { - width: 70%; - height: 8px; - background: rgba(255,255,255,0.85); - border-radius: 2px; +.ts-menu { width: 100%; height: 100%; display: flex; flex-direction: column; } +.ts-menu__header { + display: flex; + align-items: center; + gap: 6px; 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); - border-radius: 2px; + background: rgba(255,220,150,0.8); + border-radius: 1px; } -/* — Slide 2: Sale / promo style — */ -.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 { +.ts-menu__cols { display: flex; - gap: 8px; - margin-bottom: 8px; + gap: 10px; + flex: 1; } -.ts-slide--3 .ts-slide__block { - width: 36px; - height: 28px; - background: rgba(255,255,255,0.12); - border-radius: 3px; - border: 1px solid rgba(74,222,128,0.25); +.ts-menu__col { + flex: 1; + display: flex; + flex-direction: column; + gap: 4px; } -.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; diff --git a/theme/blocks/index.php b/theme/blocks/index.php index 7652c77..48c1d43 100644 --- a/theme/blocks/index.php +++ b/theme/blocks/index.php @@ -1506,9 +1506,55 @@ function oribi_render_platform_row( $a ) { $ts .= '