src/baby_monitor/static/sleep.html

@@ -231,33 +231,31 @@
         background: #3a9be8;
       }
 
-      .filters {
+      .controls {
-        display: flex;
-        gap: 15px;
         margin-bottom: 30px;
-        flex-wrap: wrap;
-        align-items: center;
-      }
-
-      .filter-group {
         display: flex;
-        flex-direction: column;
+        align-items: center;
-        gap: 5px;
+        gap: 15px;
+        flex-wrap: wrap;
       }
 
-      .filter-group label {
+      .controls label {
-        color: #666;
-        font-size: 14px;
         font-weight: 600;
+        color: #333;
       }
 
-      .filter-group select {
+      .controls select {
-        padding: 8px 12px;
+        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,15 +278,13 @@
       <h1>😴 Sleep Tracking</h1>
       <p class="subtitle">Monitor your baby's sleep patterns</p>
 
-      <div class="filters">
+      <div class="controls">
-        <div class="filter-group">
+        <label for="childFilter">Child:</label>
-          <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>
-          <label for="timeRangeFilter">Time Range</label>
         <select id="timeRangeFilter">
           <option value="1">Last 24 hours</option>
           <option value="3">Last 3 days</option>
@@ -298,7 +294,6 @@
           <option value="90">Last 90 days</option>
         </select>
       </div>
-      </div>
 
       <div id="content" class="loading">
         <p>Loading sleep data...</p>
@@ -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>