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:
14
index.html
14
index.html
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user