diff --git a/config.js b/config.js index d04b920..98b52a5 100644 --- a/config.js +++ b/config.js @@ -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}`; } } } diff --git a/departures.js b/departures.js index 92c78d7..539b949 100644 --- a/departures.js +++ b/departures.js @@ -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 }; }); } diff --git a/index.html b/index.html index ea25ec8..aa2891c 100644 --- a/index.html +++ b/index.html @@ -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 @@
- Sunrise: 06:45 AM | Sunset: 05:32 PM + ☀️ Sunrise: 06:45 AM | 🌙 Sunset: 05:32 PM
diff --git a/weather.js b/weather.js index 47f424a..637d834 100644 --- a/weather.js +++ b/weather.js @@ -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);