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

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 -->