started with new design

2025-10-20 14:34:24 +02:00 · 2025-10-20 14:34:24 +02:00 · 9238366137
commit 9238366137
parent 28ea420ecb
6 changed files with 525 additions and 38 deletions
--- a/templates/index.html
+++ b/templates/index.html
@ -10,14 +10,142 @@
 </head>

 <body>
-  <main>
-    <div style="display: flex-root; margin: auto; width: fit-content;">
-      {% for food in foods %}
-      {% include "food.html" %}
-      {% endfor %}
-      {% include "sum.html" %}
+  <header>
+    <span>
+      Datum: {{ date }}
+    </span>
+    <div>
+      <span>
+        kc: {{ sum.kc }}
+      </span>
+      <span>
+        Protein: {{ sum.protein }}
+      </span>
+      <span>
+        Balaststoffe: {{ sum.bs }}
+      </span>
    </div>
+  </header>
+  <main>
+    <hr>
+    {% for food in foods %}
+    {% include "food.html" %}
+    {% if !loop.last %}
+    <hr>
+    {% endif %}
+    {% endfor %}
  </main>
 </body>

+<style>
+  html {
+    font-family: sans-serif;
+    border: 2px solid hsl(from #a8c8a6 h 40% l);
+  }
+
+  body {
+    margin: 0;
+  }
+
+  header {
+    display: inline-block;
+    text-align: center;
+    width: 100%;
+    background-color: hsl(from #a8c8a6 h 40% l);
+  }
+
+  header div {
+    width: 100%;
+    display: flex;
+    align-items: stretch;
+  }
+
+  header div span {
+    text-align: left;
+    width: inherit;
+  }
+
+  .card {
+    background-color: hsl(from #a8c8a6 h 30% l);
+  }
+
+  hr {
+    border: 0;
+    padding: 0;
+    margin: 0;
+    border-bottom: 1px dashed #655057;
+    background: #655057;
+  }
+
+  .card p {
+    margin: 0;
+    padding: 2px;
+  }
+
+  .food-name {
+    font-size: 1.2em;
+  }
+
+  .buttons {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .card-inner {
+    display: flex;
+    align-items: stretch;
+    gap: 5px;
+  }
+
+  .card-inner div button {
+    display: block;
+  }
+
+  button {
+    border: 0;
+    border-radius: 5px;
+    width: 2em;
+    height: 2em;
+  }
+
+  .increase {
+    background-color: #cb8175;
+  }
+
+  .decrease {
+    background-color: #6d8d8a;
+  }
+
+  .increase:hover {
+    background-color: hsl(from #cb8175 h 80% l);
+  }
+
+  .decrease:hover {
+    background-color: hsl(from #6d8d8a h 40% l);
+  }
+
+  .checkboxes {
+    display: flex;
+    align-items: stretch;
+    justify-content: center;
+    flex-grow: 1;
+  }
+
+  .checkboxes label {
+    flex-grow: 1;
+    align-content: center;
+  }
+
+  .ok {
+    accent-color: hsl(from #a8c8a6 h 90% l);
+    background-color: hsl(from #a8c8a6 h 60% l);
+  }
+
+  .bad {
+    accent-color: hsl(from #cb8175 h 90% l);
+    background-color: hsl(from #cb8175 h 60% l);
+  }
+</style>
+
 </html>