Kiosk UI/UX overhaul: dark landscape mode with hero countdowns and full-width layout

Redesign the landscape orientation for kiosk readability at 3-10m distance:

- Add dark kiosk background (#1a1a2e) with high-contrast light text
- Replace 2-column grid with 5-row full-width stacking layout
- Add compact weather bar (temp + sunrise/sunset) replacing full widget
- Enlarge countdown to 2em hero size in landscape
- Replace time ranges with next 2-3 absolute departure times
- Add 3-tier urgency colors: Nu (green), 1-2min (red), 3-5min (orange)
- Make site headers full-width blue gradient bars in landscape
- Tighten card spacing (65px min-height, 8px gap) for 4-stop visibility
- Add scrolling news ticker with /api/ticker fallback messages
- Fix daylight bar from position:fixed to relative in landscape grid
- Hide background overlay in landscape for maximum contrast
- Fix weather-section HTML missing closing div tags

All changes scoped behind body.landscape CSS selectors; other orientations unaffected.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-15 19:12:08 +01:00
parent 6565661740
commit 60e41c2cc4
9 changed files with 421 additions and 58 deletions

View File

@@ -29,9 +29,10 @@
<div id="content-wrapper">
<!-- Clock element -->
<div id="clock"></div>
<!-- Site ID header removed as requested -->
<!-- Compact weather bar (landscape only) -->
<div id="compact-weather-bar"></div>
<!-- Main content grid for landscape layout -->
<div class="main-content-grid">
<!-- Left side: Departures -->
@@ -114,8 +115,13 @@
<div class="temp">5.5 °C</div>
</div>
</div>
</div> <!-- End of custom-weather -->
</div> <!-- End of weather-container -->
</div> <!-- End of weather-section -->
<!-- News ticker (landscape only) -->
<div id="news-ticker"><div class="ticker-content"></div></div>
<!-- Daylight Hours Bar -->
<div id="daylight-hours-bar">
<div class="daylight-bar-background"></div>