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');
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);
});
// 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]) => {
// 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 {
lineNumber: lineNumber,
line: data.line,
directions: Object.values(data.directions)
directions: directionsArray
};
});
}

53
index.html
View File

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

2
weather.js
View File

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