From 1f752eed5f0de90995dd378d0abed7ea0fb03530 Mon Sep 17 00:00:00 2001
From: Brian Bjarke Jensen <bbj@skov.dk>
Date: Tue, 11 Nov 2025 21:01:25 +0100
Subject: [PATCH 1/3] aligned styling

---
 src/baby_monitor/static/diapers.html  | 34 +---------
 src/baby_monitor/static/feedings.html | 38 +-----------
 src/baby_monitor/static/index.html    | 31 +---------
 src/baby_monitor/static/settings.html | 34 +---------
 src/baby_monitor/static/sleep.html    | 34 +---------
 src/baby_monitor/static/styles.css    | 89 +++++++++++++++++++++++++++
 6 files changed, 99 insertions(+), 161 deletions(-)
 create mode 100644 src/baby_monitor/static/styles.css

diff --git a/src/baby_monitor/static/diapers.html b/src/baby_monitor/static/diapers.html
index 603b37a..e760e59 100644
--- a/src/baby_monitor/static/diapers.html
+++ b/src/baby_monitor/static/diapers.html
@@ -5,41 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Diapers - Baby Monitor</title>
     <link rel="stylesheet" href="/menu.css" />
+    <link rel="stylesheet" href="/styles.css" />
     <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-
+      /* Page-specific overrides */
       body {
-        font-family:
-          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
-          Cantarell, sans-serif;
         background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
-        min-height: 100vh;
-        padding: 20px;
-      }
-
-      .container {
-        background: white;
-        border-radius: 12px;
-        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
-        padding: 40px;
-        max-width: 1000px;
-        margin: 0 auto;
-      }
-
-      h1 {
-        color: #333;
-        margin-bottom: 10px;
-        font-size: 28px;
-      }
-
-      .subtitle {
-        color: #666;
-        margin-bottom: 30px;
-        font-size: 14px;
       }
 
       .button {
diff --git a/src/baby_monitor/static/feedings.html b/src/baby_monitor/static/feedings.html
index cd084a3..8a4e9f0 100644
--- a/src/baby_monitor/static/feedings.html
+++ b/src/baby_monitor/static/feedings.html
@@ -5,43 +5,9 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Feedings - Baby Monitor</title>
     <link rel="stylesheet" href="/menu.css" />
+    <link rel="stylesheet" href="/styles.css" />
     <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-
-      body {
-        font-family:
-          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
-          Cantarell, sans-serif;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        min-height: 100vh;
-        padding: 20px;
-      }
-
-      .container {
-        background: white;
-        border-radius: 12px;
-        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
-        padding: 40px;
-        max-width: 1000px;
-        margin: 0 auto;
-      }
-
-      h1 {
-        color: #333;
-        margin-bottom: 10px;
-        font-size: 28px;
-      }
-
-      .subtitle {
-        color: #666;
-        margin-bottom: 30px;
-        font-size: 14px;
-      }
-
+      /* Page-specific styles */
       .button {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         color: white;
diff --git a/src/baby_monitor/static/index.html b/src/baby_monitor/static/index.html
index 53df444..8853bbf 100644
--- a/src/baby_monitor/static/index.html
+++ b/src/baby_monitor/static/index.html
@@ -5,29 +5,9 @@
     <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>
-      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;
-      }
+      /* Page-specific styles */
       button {
         padding: 0.75rem 1.5rem;
         background-color: #dc3545;
@@ -47,13 +27,6 @@
       .admin-button:hover {
         background-color: #5568d3;
       }
-      .hidden {
-        display: none;
-      }
-      .loading {
-        text-align: center;
-        padding: 2rem;
-      }
       .feeding-button {
         width: 100%;
         padding: 2rem;
diff --git a/src/baby_monitor/static/settings.html b/src/baby_monitor/static/settings.html
index cae5bc2..e51385c 100644
--- a/src/baby_monitor/static/settings.html
+++ b/src/baby_monitor/static/settings.html
@@ -5,41 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Settings - Baby Monitor</title>
     <link rel="stylesheet" href="/menu.css" />
+    <link rel="stylesheet" href="/styles.css" />
     <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-
-      body {
-        font-family:
-          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
-          Cantarell, sans-serif;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        min-height: 100vh;
-        padding: 20px;
-      }
-
+      /* Page-specific overrides */
       .container {
-        background: white;
-        border-radius: 12px;
-        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
-        padding: 40px;
         max-width: 800px;
-        margin: 0 auto;
-      }
-
-      h1 {
-        color: #333;
-        margin-bottom: 10px;
-        font-size: 28px;
-      }
-
-      .subtitle {
-        color: #666;
-        margin-bottom: 30px;
-        font-size: 14px;
       }
 
       .section {
diff --git a/src/baby_monitor/static/sleep.html b/src/baby_monitor/static/sleep.html
index adae5fc..8e491a1 100644
--- a/src/baby_monitor/static/sleep.html
+++ b/src/baby_monitor/static/sleep.html
@@ -5,41 +5,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sleep - Baby Monitor</title>
     <link rel="stylesheet" href="/menu.css" />
+    <link rel="stylesheet" href="/styles.css" />
     <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-
+      /* Page-specific overrides */
       body {
-        font-family:
-          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
-          Cantarell, sans-serif;
         background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
-        min-height: 100vh;
-        padding: 20px;
-      }
-
-      .container {
-        background: white;
-        border-radius: 12px;
-        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
-        padding: 40px;
-        max-width: 1000px;
-        margin: 0 auto;
-      }
-
-      h1 {
-        color: #333;
-        margin-bottom: 10px;
-        font-size: 28px;
-      }
-
-      .subtitle {
-        color: #666;
-        margin-bottom: 30px;
-        font-size: 14px;
       }
 
       .button {
diff --git a/src/baby_monitor/static/styles.css b/src/baby_monitor/static/styles.css
new file mode 100644
index 0000000..20c5235
--- /dev/null
+++ b/src/baby_monitor/static/styles.css
@@ -0,0 +1,89 @@
+/* Common styles for Baby Monitor app */
+
+/* CSS Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+/* Body styling */
+body {
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+    Cantarell, sans-serif;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  min-height: 100vh;
+  padding: 20px;
+}
+
+/* Main container */
+.container {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+  padding: 40px;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+/* Typography */
+h1 {
+  color: #333;
+  margin-bottom: 10px;
+  font-size: 28px;
+}
+
+.subtitle {
+  color: #666;
+  margin-bottom: 30px;
+  font-size: 14px;
+}
+
+/* Common button styles */
+.button {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.3s;
+  margin-right: 8px;
+  margin-bottom: 8px;
+}
+
+.button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
+}
+
+.button.secondary {
+  background: #6c757d;
+}
+
+.button.secondary:hover {
+  background: #5a6268;
+}
+
+.button.danger {
+  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
+}
+
+.button.danger:hover {
+  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
+}
+
+/* Loading state */
+.loading {
+  text-align: center;
+  padding: 40px;
+  color: #666;
+}
+
+/* Hidden utility class */
+.hidden {
+  display: none;
+}
-- 
2.54.0


From 0fa011de8d1b6dcc5b26a4d0035542390e2f5cae Mon Sep 17 00:00:00 2001
From: Brian Bjarke Jensen <bbj@skov.dk>
Date: Tue, 11 Nov 2025 21:18:20 +0100
Subject: [PATCH 2/3] shortened start period

---
 docker-compose.prod.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml
index 764f5d8..663f6b9 100644
--- a/docker-compose.prod.yml
+++ b/docker-compose.prod.yml
@@ -51,7 +51,7 @@ services:
       interval: 10s
       timeout: 5s
       retries: 5
-      start_period: 10s
+      start_period: 3s
 volumes:
   redis-data:
   pgdata:
-- 
2.54.0


From 8c93e62bef9f367b8a12fb1c6a210fe03b06ac43 Mon Sep 17 00:00:00 2001
From: Brian Bjarke Jensen <bbj@skov.dk>
Date: Tue, 11 Nov 2025 21:33:01 +0100
Subject: [PATCH 3/3] reverted style changes

---
 src/baby_monitor/static/diapers.html  | 47 +++++++++++++-
 src/baby_monitor/static/feedings.html | 49 ++++++++++++++-
 src/baby_monitor/static/index.html    | 33 +++++++++-
 src/baby_monitor/static/settings.html | 36 ++++++++++-
 src/baby_monitor/static/sleep.html    | 47 +++++++++++++-
 src/baby_monitor/static/styles.css    | 89 ---------------------------
 6 files changed, 198 insertions(+), 103 deletions(-)
 delete mode 100644 src/baby_monitor/static/styles.css

diff --git a/src/baby_monitor/static/diapers.html b/src/baby_monitor/static/diapers.html
index e760e59..d21c7dc 100644
--- a/src/baby_monitor/static/diapers.html
+++ b/src/baby_monitor/static/diapers.html
@@ -5,11 +5,41 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Diapers - Baby Monitor</title>
     <link rel="stylesheet" href="/menu.css" />
-    <link rel="stylesheet" href="/styles.css" />
     <style>
-      /* Page-specific overrides */
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
       body {
-        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+          Cantarell, sans-serif;
+        background-color: #f0f0f0;
+        min-height: 100vh;
+        max-width: 800px;
+        margin: 2rem auto;
+        padding: 0 1rem;
+      }
+
+      .container {
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+        padding: 40px;
+      }
+
+      h1 {
+        color: #333;
+        margin-bottom: 10px;
+        font-size: 28px;
+      }
+
+      .subtitle {
+        color: #666;
+        margin-bottom: 30px;
+        font-size: 14px;
       }
 
       .button {
@@ -42,6 +72,10 @@
         box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
       }
 
+      .hidden {
+        display: none;
+      }
+
       .loading {
         text-align: center;
         padding: 40px;
@@ -84,6 +118,13 @@
       .chart-wrapper {
         position: relative;
         height: 300px;
+        max-width: 100%;
+        margin: 0 auto;
+      }
+
+      .chart-wrapper canvas {
+        max-width: 100%;
+        max-height: 100%;
       }
 
       .charts-row {
diff --git a/src/baby_monitor/static/feedings.html b/src/baby_monitor/static/feedings.html
index 8a4e9f0..38d06b4 100644
--- a/src/baby_monitor/static/feedings.html
+++ b/src/baby_monitor/static/feedings.html
@@ -5,9 +5,43 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Feedings - Baby Monitor</title>
     <link rel="stylesheet" href="/menu.css" />
-    <link rel="stylesheet" href="/styles.css" />
     <style>
-      /* Page-specific styles */
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+          Cantarell, sans-serif;
+        background-color: #f0f0f0;
+        min-height: 100vh;
+        max-width: 800px;
+        margin: 2rem auto;
+        padding: 0 1rem;
+      }
+
+      .container {
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+        padding: 40px;
+      }
+
+      h1 {
+        color: #333;
+        margin-bottom: 10px;
+        font-size: 28px;
+      }
+
+      .subtitle {
+        color: #666;
+        margin-bottom: 30px;
+        font-size: 14px;
+      }
+
       .button {
         background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
         color: white;
@@ -38,6 +72,10 @@
         box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
       }
 
+      .hidden {
+        display: none;
+      }
+
       .loading {
         text-align: center;
         padding: 40px;
@@ -80,6 +118,13 @@
       .chart-wrapper {
         position: relative;
         height: 300px;
+        max-width: 100%;
+        margin: 0 auto;
+      }
+
+      .chart-wrapper canvas {
+        max-width: 100%;
+        max-height: 100%;
       }
 
       .charts-row {
diff --git a/src/baby_monitor/static/index.html b/src/baby_monitor/static/index.html
index 8853bbf..b5ceacb 100644
--- a/src/baby_monitor/static/index.html
+++ b/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
diff --git a/src/baby_monitor/static/settings.html b/src/baby_monitor/static/settings.html
index e51385c..9990759 100644
--- a/src/baby_monitor/static/settings.html
+++ b/src/baby_monitor/static/settings.html
@@ -5,11 +5,41 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Settings - Baby Monitor</title>
     <link rel="stylesheet" href="/menu.css" />
-    <link rel="stylesheet" href="/styles.css" />
     <style>
-      /* Page-specific overrides */
-      .container {
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+          Cantarell, sans-serif;
+        background-color: #f0f0f0;
+        min-height: 100vh;
         max-width: 800px;
+        margin: 2rem auto;
+        padding: 0 1rem;
+      }
+
+      .container {
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+        padding: 40px;
+      }
+
+      h1 {
+        color: #333;
+        margin-bottom: 10px;
+        font-size: 28px;
+      }
+
+      .subtitle {
+        color: #666;
+        margin-bottom: 30px;
+        font-size: 14px;
       }
 
       .section {
diff --git a/src/baby_monitor/static/sleep.html b/src/baby_monitor/static/sleep.html
index 8e491a1..e2fc51d 100644
--- a/src/baby_monitor/static/sleep.html
+++ b/src/baby_monitor/static/sleep.html
@@ -5,11 +5,41 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sleep - Baby Monitor</title>
     <link rel="stylesheet" href="/menu.css" />
-    <link rel="stylesheet" href="/styles.css" />
     <style>
-      /* Page-specific overrides */
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
       body {
-        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+        font-family:
+          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
+          Cantarell, sans-serif;
+        background-color: #f0f0f0;
+        min-height: 100vh;
+        max-width: 800px;
+        margin: 2rem auto;
+        padding: 0 1rem;
+      }
+
+      .container {
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+        padding: 40px;
+      }
+
+      h1 {
+        color: #333;
+        margin-bottom: 10px;
+        font-size: 28px;
+      }
+
+      .subtitle {
+        color: #666;
+        margin-bottom: 30px;
+        font-size: 14px;
       }
 
       .button {
@@ -42,6 +72,10 @@
         box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4);
       }
 
+      .hidden {
+        display: none;
+      }
+
       .loading {
         text-align: center;
         padding: 40px;
@@ -84,6 +118,13 @@
       .chart-wrapper {
         position: relative;
         height: 300px;
+        max-width: 100%;
+        margin: 0 auto;
+      }
+
+      .chart-wrapper canvas {
+        max-width: 100%;
+        max-height: 100%;
       }
 
       .charts-row {
diff --git a/src/baby_monitor/static/styles.css b/src/baby_monitor/static/styles.css
deleted file mode 100644
index 20c5235..0000000
--- a/src/baby_monitor/static/styles.css
+++ /dev/null
@@ -1,89 +0,0 @@
-/* Common styles for Baby Monitor app */
-
-/* CSS Reset */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-/* Body styling */
-body {
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
-    Cantarell, sans-serif;
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  min-height: 100vh;
-  padding: 20px;
-}
-
-/* Main container */
-.container {
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
-  padding: 40px;
-  max-width: 1000px;
-  margin: 0 auto;
-}
-
-/* Typography */
-h1 {
-  color: #333;
-  margin-bottom: 10px;
-  font-size: 28px;
-}
-
-.subtitle {
-  color: #666;
-  margin-bottom: 30px;
-  font-size: 14px;
-}
-
-/* Common button styles */
-.button {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-  color: white;
-  border: none;
-  padding: 12px 24px;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 500;
-  transition: all 0.3s;
-  margin-right: 8px;
-  margin-bottom: 8px;
-}
-
-.button:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
-}
-
-.button.secondary {
-  background: #6c757d;
-}
-
-.button.secondary:hover {
-  background: #5a6268;
-}
-
-.button.danger {
-  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
-}
-
-.button.danger:hover {
-  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
-}
-
-/* Loading state */
-.loading {
-  text-align: center;
-  padding: 40px;
-  color: #666;
-}
-
-/* Hidden utility class */
-.hidden {
-  display: none;
-}
-- 
2.54.0