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

@@ -4,7 +4,7 @@ A modern digital signage system for displaying real-time transit departures and
![SL Transport Departures Display](screenshots/main-display.png)
> **Note**: Screenshots should be added to the `screenshots/` directory. The application displays real-time transit departures in a modern, optimized layout.
A comprehensive digital signage solution displaying real-time transit departures, weather information, and a visual daylight hours timeline.
## Features
@@ -21,6 +21,7 @@ A modern digital signage system for displaying real-time transit departures and
- Current weather conditions with icons
- Hourly forecast (8-hour outlook)
- Sunrise/sunset times
- **Daylight Hours Bar**: Visual 24-hour timeline at the bottom showing sunrise to sunset with animated sun/moon indicator
- Automatic dark mode based on time of day
### ⚙️ Flexible Configuration
@@ -33,6 +34,8 @@ A modern digital signage system for displaying real-time transit departures and
### 🎨 Modern Design
- Swedish color scheme (blue/yellow gradient clock banner)
- Compact ribbon-style clock with time and date on one line
- **Daylight Hours Bar**: Modern gradient bar with smooth color transitions from midnight blue (night) through orange/red (dawn/dusk) to yellow (day)
- Animated sun/moon icon with pulsing glow effect
- Optimized spacing and typography for readability
- Responsive design that adapts to screen size
- Smooth animations and visual effects
@@ -40,14 +43,33 @@ A modern digital signage system for displaying real-time transit departures and
## Screenshots
### Main Display (Landscape Layout)
![Landscape Layout](screenshots/landscape-layout.png)
![Main Display](screenshots/main-display.png)
> **Screenshot**: The system automatically optimizes for landscape orientation with a 4-column grid layout, maximizing screen real estate while maintaining readability. Add your screenshot to `screenshots/landscape-layout.png`.
The system automatically optimizes for landscape orientation with a 4-column grid layout, maximizing screen real estate while maintaining readability. The display includes:
### Key Features Highlighted
- **Clock Banner**: Compact ribbon-style header with time and date
- **Departure Cards**: Color-coded boxes with transport icons, line numbers, and direction arrows
- **Weather Widget**: Fixed at bottom with current conditions and hourly forecast
- **Clock Banner**: Compact ribbon-style header with time and date in Swedish locale
- **Departure Cards**: Color-coded boxes with transport icons, line numbers, and direction arrows showing real-time transit information
- **Weather Widget**: Compact widget with current conditions, hourly forecast, and sunrise/sunset times
- **Daylight Hours Bar**: 24-hour visual timeline at the bottom showing daylight hours with animated sun/moon indicator
### Settings Panel
![Settings Modal](screenshots/settings-modal.png)
Comprehensive configuration panel accessible via the gear icon (⚙️) with tabs for:
- **Display**: Screen orientation and dark mode settings
- **Appearance**: Background image and opacity controls
- **Content**: Transit stop management with map-based selection
- **Options**: Additional system preferences
### Daylight Hours Bar
![Daylight Hours Bar](screenshots/daylight-hours-bar.png)
The daylight hours bar provides a beautiful visual representation of the day:
- Modern gradient with smooth color transitions (midnight blue → orange/red → yellow)
- Animated sun icon (☀️) during daylight hours
- Animated moon icon (🌙) during nighttime hours
- Pulsing glow effect to draw attention
- Updates every minute to track the current time position
## Quick Start
@@ -261,6 +283,15 @@ Settings are automatically saved to localStorage and persist across sessions.
## Recent Updates
### Version 1.2.0 - Daylight Hours Bar & UI Refinements
- ✅ **New Feature**: Daylight Hours Bar - Visual 24-hour timeline with modern gradient shading
- ✅ Animated sun/moon icon indicator with pulsing glow effect
- ✅ Enhanced gradient transitions (midnight blue → orange/red → yellow)
- ✅ Improved weather widget layout and alignment
- ✅ Better spacing and positioning for 1080p kiosk displays
- ✅ Moon icon automatically shown during nighttime hours
- ✅ Perfectly centered icon indicators with flexbox alignment
### Version 1.1.0 - Landscape Optimization
- ✅ Optimized 4-column grid layout for landscape screens
- ✅ Replaced text labels with transport mode icons