corrected filter placement and barchart title
This commit is contained in:
@@ -231,33 +231,31 @@
|
||||
background: #3a9be8;
|
||||
}
|
||||
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
.controls {
|
||||
margin-bottom: 30px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.filter-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 5px;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-group label {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
.controls label {
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.filter-group select {
|
||||
padding: 8px 12px;
|
||||
.controls select {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.controls select:focus {
|
||||
outline: none;
|
||||
border-color: #4facfe;
|
||||
}
|
||||
|
||||
.badge {
|
||||
@@ -280,24 +278,21 @@
|
||||
<h1>😴 Sleep Tracking</h1>
|
||||
<p class="subtitle">Monitor your baby's sleep patterns</p>
|
||||
|
||||
<div class="filters">
|
||||
<div class="filter-group">
|
||||
<label for="childFilter">Child</label>
|
||||
<select id="childFilter">
|
||||
<option value="">All Children</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="filter-group">
|
||||
<label for="timeRangeFilter">Time Range</label>
|
||||
<select id="timeRangeFilter">
|
||||
<option value="1">Last 24 hours</option>
|
||||
<option value="3">Last 3 days</option>
|
||||
<option value="7" selected>Last 7 days</option>
|
||||
<option value="14">Last 14 days</option>
|
||||
<option value="30">Last 30 days</option>
|
||||
<option value="90">Last 90 days</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="controls">
|
||||
<label for="childFilter">Child:</label>
|
||||
<select id="childFilter">
|
||||
<option value="">All Children</option>
|
||||
</select>
|
||||
|
||||
<label for="timeRangeFilter">Time Range:</label>
|
||||
<select id="timeRangeFilter">
|
||||
<option value="1">Last 24 hours</option>
|
||||
<option value="3">Last 3 days</option>
|
||||
<option value="7" selected>Last 7 days</option>
|
||||
<option value="14">Last 14 days</option>
|
||||
<option value="30">Last 30 days</option>
|
||||
<option value="90">Last 90 days</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="content" class="loading">
|
||||
@@ -489,7 +484,7 @@
|
||||
</div>
|
||||
|
||||
<div class="chart-container">
|
||||
<h2>Total Sleep Time</h2>
|
||||
<h2>Total Sleep Time (Last ${timeRange} Day${timeRange !== 1 ? "s" : ""})</h2>
|
||||
<div class="chart-wrapper">
|
||||
<canvas id="barChart"></canvas>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user