kyle/SignageHTML
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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:
kyle
2026-02-15 19:12:08 +01:00
parent 6565661740
commit 60e41c2cc4
9 changed files with 421 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
public/js/components/DeparturesManager.js
View File

@@ -222,20 +222,16 @@ class DeparturesManager {
const minutesUntil = this.calculateMinutesUntilArrival(departure);
let countdownText = displayTime;
let countdownClass = '';
const urgentThreshold = window.Constants?.TIME_THRESHOLDS?.URGENT || 5;
if (minutesUntil <= 0 || displayTime === 'Nu' || displayTime.toLowerCase() === 'nu') {
countdownText = 'Nu';
countdownClass = 'now';
} else if (minutesUntil < urgentThreshold) {
const minMatch = displayTime.match(/(\d+)\s*min/i);
if (minMatch) {
countdownText = minutesUntil === 1 ? '1 min' : `${minutesUntil} min`;
} else {
countdownText = minutesUntil === 1 ? '1 min' : `${minutesUntil} min`;
}
} else if (minutesUntil <= 2) {
countdownText = minutesUntil === 1 ? '1 min' : `${minutesUntil} min`;
countdownClass = 'urgent';
} else if (minutesUntil <= 5) {
countdownText = `${minutesUntil} min`;
countdownClass = 'soon';
} else {
const isTimeOnly = /^\d{1,2}:\d{2}$/.test(displayTime);
if (isTimeOnly) {
@@ -244,7 +240,7 @@ class DeparturesManager {
countdownText = displayTime;
}
}
return { countdownText, countdownClass };
}
@@ -381,15 +377,13 @@ class DeparturesManager {
timeDisplayElement.appendChild(countdownSpan);
const timeRangeSpan = document.createElement('span');
timeRangeSpan.className = 'time-range';
if (secondDeparture) {
const secondTime = DeparturesManager.formatDateTime(this.getDepartureTime(secondDeparture));
timeRangeSpan.textContent = `${timeDisplay} - ${secondTime}`;
} else {
timeRangeSpan.textContent = timeDisplay;
}
timeDisplayElement.appendChild(timeRangeSpan);
// Show next 2-3 absolute times as small text
const nextTimesSpan = document.createElement('span');
nextTimesSpan.className = 'next-departures';
const upcomingTimes = direction.departures.slice(0, 3)
.map(d => DeparturesManager.formatDateTime(this.getDepartureTime(d)));
nextTimesSpan.textContent = upcomingTimes.join(' ');
timeDisplayElement.appendChild(nextTimesSpan);
timesContainer.appendChild(timeDisplayElement);
}
@@ -481,16 +475,14 @@ class DeparturesManager {
updateCardContent(card, departure) {
const { countdownText, countdownClass } = this.getCountdownInfo(departure);
const countdownElement = card.querySelector('.countdown');
if (countdownElement) {
countdownElement.classList.remove('now', 'urgent');
if (countdownClass === 'now') {
countdownElement.classList.add('now');
} else if (countdownClass === 'urgent') {
countdownElement.classList.add('urgent');
countdownElement.classList.remove('now', 'urgent', 'soon');
if (countdownClass) {
countdownElement.classList.add(countdownClass);
}
if (countdownElement.textContent !== `(${countdownText})`) {
countdownElement.textContent = `(${countdownText})`;
this.highlightElement(countdownElement);

84
public/js/components/NewsTicker.js Normal file
View File

@@ -0,0 +1,84 @@
/**
* NewsTicker - Scrolling news/announcement ticker for landscape kiosk mode
* Fetches from /api/ticker with fallback to hardcoded messages
*/
class NewsTicker {
constructor(options = {}) {
this.options = {
containerId: options.containerId || 'news-ticker',
fetchUrl: options.fetchUrl || '/api/ticker',
refreshInterval: options.refreshInterval || 5 * 60 * 1000, // 5 minutes
fallbackMessages: options.fallbackMessages || [
'Välkommen till Ambassaderna',
'Håll dörren stängd',
'Tvättstugan stänger kl 22:00'
],
...options
};
this.container = null;
this.contentEl = null;
this.messages = [];
this.refreshTimer = null;
this.init();
}
init() {
this.container = document.getElementById(this.options.containerId);
if (!this.container) return;
this.contentEl = this.container.querySelector('.ticker-content');
if (!this.contentEl) {
this.contentEl = document.createElement('div');
this.contentEl.className = 'ticker-content';
this.container.appendChild(this.contentEl);
}
this.fetchMessages();
this.refreshTimer = setInterval(() => this.fetchMessages(), this.options.refreshInterval);
}
async fetchMessages() {
try {
const response = await fetch(this.options.fetchUrl);
if (response.ok) {
const data = await response.json();
if (Array.isArray(data.messages) && data.messages.length > 0) {
this.messages = data.messages;
} else {
this.messages = this.options.fallbackMessages;
}
} else {
this.messages = this.options.fallbackMessages;
}
} catch {
this.messages = this.options.fallbackMessages;
}
this.render();
}
render() {
if (!this.contentEl || this.messages.length === 0) return;
const separator = ' \u2022 '; // bullet separator
const text = this.messages.join(separator);
// Duplicate text for seamless infinite scroll loop
this.contentEl.textContent = text + separator + text;
}
stop() {
if (this.refreshTimer) {
clearInterval(this.refreshTimer);
this.refreshTimer = null;
}
}
}
// ES module export
export { NewsTicker };
// Keep window reference for backward compatibility
window.NewsTicker = NewsTicker;

52
public/js/components/WeatherManager.js
View File

@@ -371,10 +371,62 @@ class WeatherManager {
if (this.sunTimes) {
this.updateDaylightHoursBar();
}
// Update compact weather bar (landscape mode)
this.renderCompactWeatherBar();
} catch (error) {
console.error('Error updating weather UI:', error);
}
}
/**
* Render compact weather bar for landscape mode
* Shows: [icon] temp condition | Sunrise HH:MM | Sunset HH:MM
*/
renderCompactWeatherBar() {
const bar = document.getElementById('compact-weather-bar');
if (!bar || !this.weatherData) return;
bar.textContent = '';
const icon = document.createElement('img');
icon.className = 'weather-bar-icon';
icon.src = this.weatherData.icon || '';
icon.alt = this.weatherData.condition || '';
bar.appendChild(icon);
const tempSpan = document.createElement('span');
const strong = document.createElement('strong');
strong.textContent = `${this.weatherData.temperature}\u00B0C`;
tempSpan.appendChild(strong);
tempSpan.appendChild(document.createTextNode(` ${this.weatherData.condition || ''}`));
bar.appendChild(tempSpan);
const sep1 = document.createElement('span');
sep1.className = 'weather-bar-sep';
sep1.textContent = '|';
bar.appendChild(sep1);
let sunriseStr = '--:--';
let sunsetStr = '--:--';
if (this.sunTimes) {
sunriseStr = this.formatTime(this.sunTimes.today.sunrise);
sunsetStr = this.formatTime(this.sunTimes.today.sunset);
}
const sunriseSpan = document.createElement('span');
sunriseSpan.textContent = `\u2600\uFE0F Sunrise ${sunriseStr}`;
bar.appendChild(sunriseSpan);
const sep2 = document.createElement('span');
sep2.className = 'weather-bar-sep';
sep2.textContent = '|';
bar.appendChild(sep2);
const sunsetSpan = document.createElement('span');
sunsetSpan.textContent = `\uD83C\uDF19 Sunset ${sunsetStr}`;
bar.appendChild(sunsetSpan);
}
/**
* Update sunrise and sunset times from API data