added support for dark mode
This commit is contained in:
Brian Bjarke Jensen
@@ -4,6 +4,9 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Sleep - Baby Monitor</title>
|
||||
<link rel="stylesheet" href="/dark-mode.css" />
|
||||
<script src="/theme-init.js"></script>
|
||||
<script src="/chart-theme.js"></script>
|
||||
<link rel="stylesheet" href="/menu.css" />
|
||||
<style>
|
||||
* {
|
||||
@@ -16,7 +19,7 @@
|
||||
font-family:
|
||||
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
|
||||
Cantarell, sans-serif;
|
||||
background-color: #f0f0f0;
|
||||
background-color: var(--bg-primary);
|
||||
min-height: 100vh;
|
||||
max-width: 800px;
|
||||
margin: 2rem auto;
|
||||
@@ -24,26 +27,27 @@
|
||||
}
|
||||
|
||||
.container {
|
||||
background: white;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 10px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
color: var(--text-secondary);
|
||||
margin-bottom: 30px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.button {
|
||||
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
|
||||
background: var(--gradient-blue);
|
||||
background-color: #4facfe;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 24px;
|
||||
@@ -79,13 +83,13 @@
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #666;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 60px 20px;
|
||||
color: #666;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.empty-state-icon {
|
||||
@@ -94,7 +98,7 @@
|
||||
}
|
||||
|
||||
.empty-state h2 {
|
||||
color: #333;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@@ -105,12 +109,12 @@
|
||||
.chart-container {
|
||||
margin-bottom: 40px;
|
||||
padding: 20px;
|
||||
background: #f8f9fa;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.chart-container h2 {
|
||||
color: #333;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
@@ -148,14 +152,14 @@
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: #f8f9fa;
|
||||
background: var(--bg-tertiary);
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-card h3 {
|
||||
color: #666;
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
@@ -169,13 +173,13 @@
|
||||
}
|
||||
|
||||
.list-container {
|
||||
background: #f8f9fa;
|
||||
background: var(--bg-tertiary);
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.list-container h2 {
|
||||
color: #333;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 20px;
|
||||
font-size: 20px;
|
||||
}
|
||||
@@ -186,14 +190,14 @@
|
||||
}
|
||||
|
||||
.sleep-item {
|
||||
background: white;
|
||||
background: var(--bg-secondary);
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 12px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.sleep-item:last-child {
|
||||
@@ -206,12 +210,12 @@
|
||||
|
||||
.sleep-child {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
color: var(--text-primary);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.sleep-time {
|
||||
color: #666;
|
||||
color: var(--text-secondary);
|
||||
font-size: 14px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
@@ -252,23 +256,31 @@
|
||||
|
||||
.controls label {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.controls select {
|
||||
.controls select,
|
||||
.controls input {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border: 2px solid var(--border-color, #ddd);
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
background: white;
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.controls select:focus {
|
||||
.controls select:focus,
|
||||
.controls input:focus {
|
||||
outline: none;
|
||||
border-color: #4facfe;
|
||||
}
|
||||
|
||||
.controls input[readonly] {
|
||||
opacity: 0.6;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 4px 8px;
|
||||
@@ -388,7 +400,6 @@
|
||||
id="childDisplay"
|
||||
value="${child.name}"
|
||||
readonly
|
||||
style="background-color: #f5f5f5; cursor: default; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;"
|
||||
/>
|
||||
|
||||
<label for="timeRangeFilter">Time Range:</label>
|
||||
@@ -479,19 +490,7 @@
|
||||
return matchesTimeRange && matchesChild;
|
||||
});
|
||||
|
||||
if (filteredSleeps.length === 0) {
|
||||
document.getElementById("content").innerHTML = `
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon">😴</div>
|
||||
<h2>No Sleep Data</h2>
|
||||
<p>Start tracking sleep sessions from the home page.</p>
|
||||
<button class="button" onclick="window.location.href='/'">Go Home</button>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
// Calculate stats
|
||||
// Calculate stats (works with empty arrays too)
|
||||
const completedSleeps = filteredSleeps.filter(
|
||||
(sleep) => sleep.end_time,
|
||||
);
|
||||
@@ -896,7 +895,7 @@
|
||||
x: {
|
||||
stacked: true,
|
||||
},
|
||||
y: {
|
||||
y: getChartScaleOptions('y', {
|
||||
stacked: true,
|
||||
beginAtZero: true,
|
||||
title: {
|
||||
@@ -912,7 +911,7 @@
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
@@ -1057,14 +1056,14 @@
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
y: getChartScaleOptions('y', {
|
||||
beginAtZero: true,
|
||||
ticks: {
|
||||
callback: function (value) {
|
||||
return value + "m";
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
plugins: {
|
||||
legend: {
|
||||
@@ -1134,6 +1133,12 @@
|
||||
|
||||
// Load data on page load
|
||||
loadData();
|
||||
|
||||
// Listen for theme changes and update charts
|
||||
window.addEventListener('themechange', () => {
|
||||
const charts = [barChartInstance, durationChartInstance, avgDurationChartInstance].filter(c => c);
|
||||
updateChartsForTheme(charts);
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user