reverted style changes

src/baby_monitor/static/index.html

@@ -5,9 +5,29 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Baby Monitor</title>
     <link rel="stylesheet" href="/menu.css" />
-    <link rel="stylesheet" href="/styles.css" />
     <style>
-      /* Page-specific styles */
+      body {
+        font-family: Arial, sans-serif;
+        max-width: 800px;
+        margin: 2rem auto;
+        padding: 0 1rem;
+        background-color: #f0f0f0;
+      }
+      .container {
+        background: white;
+        padding: 2rem;
+        border-radius: 8px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+      }
+      h1 {
+        color: #333;
+        margin-bottom: 1rem;
+      }
+      .greeting {
+        color: #666;
+        font-size: 1.1rem;
+        margin-bottom: 2rem;
+      }
       button {
         padding: 0.75rem 1.5rem;
         background-color: #dc3545;
@@ -27,6 +47,13 @@
       .admin-button:hover {
         background-color: #5568d3;
       }
+      .hidden {
+        display: none;
+      }
+      .loading {
+        text-align: center;
+        padding: 2rem;
+      }
       .feeding-button {
         width: 100%;
         padding: 2rem;
@@ -237,7 +264,7 @@
           .then((user) => {
             // Initialize burger menu
             initBurgerMenu({
-              includeHome: false,
+              includeHome: true,
             });
 
             // Check if user has any children