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

Add sun/moon emojis to sunrise/sunset and fix direction sorting (direction 1 always on top)

Browse Source
This commit is contained in:
kyle
2025-12-31 18:50:33 +01:00
parent 8ff9b43247
commit d15142f1c6
4 changed files with 47 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
config.js
View File

@@ -598,7 +598,7 @@ class ConfigManager {
const weatherSunTimesElement = document.querySelector('#custom-weather .sun-times'); const weatherSunTimesElement = document.querySelector('#custom-weather .sun-times');
if (weatherSunTimesElement) { if (weatherSunTimesElement) {
weatherSunTimesElement.textContent = `Sunrise: ${sunriseTime} | Sunset: ${sunsetTime}`; weatherSunTimesElement.textContent = `☀️ Sunrise: ${sunriseTime} | 🌙 Sunset: ${sunsetTime}`;
} }
} }
} }

13
departures.js
View File

@@ -420,12 +420,21 @@ function groupDeparturesByLineNumber(departures) {
groups[lineNumber].directions[directionKey].departures.push(departure); groups[lineNumber].directions[directionKey].departures.push(departure);
}); });
// Convert to array format // Convert to array format and sort directions by direction_code (1 first, then 2)
return Object.entries(groups).map(([lineNumber, data]) => { return Object.entries(groups).map(([lineNumber, data]) => {
// Sort directions: direction 1 first, then direction 2
const directionsArray = Object.values(data.directions);
directionsArray.sort((a, b) => {
// Sort by direction_code: 1 comes before 2
const dirA = a.direction || 1;
const dirB = b.direction || 1;
return dirA - dirB;
});
return { return {
lineNumber: lineNumber, lineNumber: lineNumber,
line: data.line, line: data.line,
directions: Object.values(data.directions) directions: directionsArray
}; };
}); });
} }

53
index.html
View File

@@ -267,7 +267,7 @@
transform: rotate(-90deg); transform: rotate(-90deg);
position: fixed; position: fixed;
right: 10px; right: 10px;
top: 10px; bottom: 10px; /* Changed from top to bottom */
z-index: 1000; z-index: 1000;
} }
@@ -309,7 +309,7 @@
transform: rotate(-180deg); transform: rotate(-180deg);
position: fixed; position: fixed;
right: 10px; right: 10px;
top: 10px; bottom: 10px; /* Changed from top to bottom */
z-index: 1000; z-index: 1000;
} }
@@ -352,7 +352,7 @@
transform: rotate(-270deg); transform: rotate(-270deg);
position: fixed; position: fixed;
right: 10px; right: 10px;
top: 10px; bottom: 10px; /* Changed from top to bottom */
z-index: 1000; z-index: 1000;
} }
@@ -370,21 +370,22 @@
font-weight: normal; font-weight: normal;
display: inline; display: inline;
} }
/* Clock styles - Modern entryway kiosk design with Swedish colors - Ribbon banner */ /* Clock styles - Modern entryway kiosk design with blue glow - Ribbon banner */
.clock-container { .clock-container {
background: linear-gradient(135deg, #006AA7 0%, #005A8F 30%, #FECC00 70%, #FFD700 100%); background: linear-gradient(135deg, #003366 0%, #004080 50%, #0059b3 100%);
color: white; color: white;
padding: 8px 20px; /* Reduced padding for ribbon style */ padding: 8px 20px; /* Reduced padding for ribbon style */
border-radius: 8px; /* Smaller radius for ribbon */ border-radius: 8px; /* Smaller radius for ribbon */
margin-bottom: 8px; /* Reduced margin */ margin-bottom: 8px; /* Reduced margin */
text-align: center; text-align: center;
box-shadow: 0 4px 12px rgba(0, 106, 167, 0.3), box-shadow: 0 0 20px rgba(0, 89, 179, 0.6),
0 2px 6px rgba(0, 0, 0, 0.15), 0 0 40px rgba(0, 89, 179, 0.4),
0 4px 12px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3); inset 0 1px 0 rgba(255, 255, 255, 0.3);
position: relative; position: relative;
overflow: hidden; overflow: hidden;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
transition: transform 0.3s ease, box-shadow 0.3s ease; transition: box-shadow 0.3s ease;
border: 2px solid rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 255, 255, 0.2);
display: flex; display: flex;
align-items: center; align-items: center;
@@ -404,33 +405,35 @@
} }
.clock-container:hover { .clock-container:hover {
transform: translateY(-2px); box-shadow: 0 0 30px rgba(0, 89, 179, 0.8),
box-shadow: 0 12px 32px rgba(0, 106, 167, 0.4), 0 0 60px rgba(0, 89, 179, 0.5),
0 6px 16px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3); inset 0 1px 0 rgba(255, 255, 255, 0.3);
} }
body.dark-mode .clock-container { body.dark-mode .clock-container {
background: linear-gradient(135deg, #005A8F 0%, #004A7A 30%, #E6B800 70%, #FFCC00 100%); background: linear-gradient(135deg, #001a33 0%, #002d5c 50%, #004080 100%);
box-shadow: 0 8px 24px rgba(0, 90, 143, 0.4), box-shadow: 0 0 25px rgba(0, 89, 179, 0.7),
0 0 50px rgba(0, 89, 179, 0.4),
0 4px 12px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2); inset 0 1px 0 rgba(255, 255, 255, 0.2);
} }
body.dark-mode .clock-container:hover { body.dark-mode .clock-container:hover {
box-shadow: 0 12px 32px rgba(0, 90, 143, 0.5), box-shadow: 0 0 35px rgba(0, 89, 179, 0.9),
0 6px 16px rgba(0, 0, 0, 0.4), 0 0 70px rgba(0, 89, 179, 0.6),
0 4px 12px rgba(0, 0, 0, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.2); inset 0 1px 0 rgba(255, 255, 255, 0.2);
} }
/* Configuration button styles */ /* Configuration button styles */
.config-button { .config-button {
position: fixed; position: fixed;
top: 20px; bottom: 20px; /* Changed from top to bottom */
right: 20px; right: 20px;
width: 40px; width: 40px;
height: 40px; height: 40px;
background-color: #0061a1; background-color: rgba(0, 97, 161, 0.3); /* Translucent by default */
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -438,11 +441,23 @@
cursor: pointer; cursor: pointer;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 100; z-index: 100;
transition: transform 0.3s ease; transition: transform 0.3s ease, background-color 0.3s ease, opacity 0.3s ease;
opacity: 0.5; /* Translucent */
} }
.config-button:hover { .config-button:hover {
transform: rotate(30deg); transform: rotate(30deg);
background-color: #0061a1; /* Full color on hover */
opacity: 1; /* Fully opaque on hover */
}
.config-button svg {
transition: opacity 0.3s ease;
opacity: 0.7; /* Icon also translucent */
}
.config-button:hover svg {
opacity: 1; /* Full opacity on hover */
} }
/* Configuration modal styles */ /* Configuration modal styles */
@@ -1687,7 +1702,7 @@
</div> </div>
</div> </div>
<div class="sun-times"> <div class="sun-times">
Sunrise: 06:45 AM | Sunset: 05:32 PM ☀️ Sunrise: 06:45 AM | 🌙 Sunset: 05:32 PM
</div> </div>
</div> <!-- End of weather-section --> </div> <!-- End of weather-section -->

2
weather.js
View File

@@ -370,7 +370,7 @@ class WeatherManager {
if (sunTimesElement && this.sunTimes) { if (sunTimesElement && this.sunTimes) {
const sunriseTime = this.formatTime(this.sunTimes.today.sunrise); const sunriseTime = this.formatTime(this.sunTimes.today.sunrise);
const sunsetTime = this.formatTime(this.sunTimes.today.sunset); const sunsetTime = this.formatTime(this.sunTimes.today.sunset);
sunTimesElement.textContent = `Sunrise: ${sunriseTime} | Sunset: ${sunsetTime}`; sunTimesElement.textContent = `☀️ Sunrise: ${sunriseTime} | 🌙 Sunset: ${sunsetTime}`;
} }
} catch (error) { } catch (error) {
console.error('Error updating weather UI:', error); console.error('Error updating weather UI:', error);