From 9cb8a75f74dd6b426c28178c650eda5f80973798 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Anders=20Engl=C3=B6f=20Ytterstr=C3=B6m?= <yttan@fastmail.se>
Date: Thu, 20 Mar 2025 16:51:40 +0100
Subject: [PATCH] Add progress bars to summary page

---
 README                      |   6 +-
 data/default-state.js       | 226 ++++++++++++++++++------------------
 src/app.css                 |  17 ++-
 src/lib/DietProgress.svelte |   2 +-
 src/lib/Info.svelte         |  13 ++-
 src/lib/Summary.svelte      | 169 ++++++++++++++++++---------
 vite.config.ts              |   4 +-
 7 files changed, 256 insertions(+), 181 deletions(-)

diff --git a/README b/README
index f4dfd97..9b24b82 100644
--- a/README
+++ b/README
@@ -14,7 +14,5 @@ Stack
 -----
 
 Vanilla Svelte, with a plugin for persistent store using
-localStorage.
-
-As an academic exercise, this might as well be ported to a
-PWA by introducing a webappmanifest and a ServiceWorker.
+localStorage, as well as some PWA addons for better offline
+use on mobile devices.
diff --git a/data/default-state.js b/data/default-state.js
index 1744dbb..0cc269d 100644
--- a/data/default-state.js
+++ b/data/default-state.js
@@ -382,120 +382,118 @@ const gym = [
 ];
 
 const diet = [
-    { date: "2025-02-10", completed: false },
-    { date: "2025-02-11", completed: false },
-    { date: "2025-02-12", completed: false },
-    { date: "2025-02-13", completed: false },
-    { date: "2025-02-14", completed: false },
-    { date: "2025-02-15", completed: false },
-    { date: "2025-02-16", completed: false },
-    { date: "2025-02-17", completed: false },
-    { date: "2025-02-18", completed: false },
-    { date: "2025-02-19", completed: false },
-    { date: "2025-02-10", completed: false },
-    { date: "2025-02-21", completed: false },
-    { date: "2025-02-22", completed: false },
-    { date: "2025-02-23", completed: false },
-    { date: "2025-02-24", completed: false },
-    { date: "2025-02-25", completed: false },
-    { date: "2025-02-26", completed: false },
-    { date: "2025-02-27", completed: false },
-    { date: "2025-02-28", completed: false },
-    { date: "2025-03-01", completed: false },
-    { date: "2025-03-02", completed: false },
-    { date: "2025-03-03", completed: false },
-    { date: "2025-03-04", excluded: true, because: "Semmeldagen" },
-    { date: "2025-03-05", completed: false },
-    { date: "2025-03-06", completed: false },
-    { date: "2025-03-07", completed: false },
-    { date: "2025-03-08", completed: false },
-    { date: "2025-03-09", completed: false },
-    { date: "2025-03-10", completed: false },
-    { date: "2025-03-11", completed: false },
-    { date: "2025-03-12", completed: false },
-    { date: "2025-03-13", completed: false },
-    { date: "2025-03-14", completed: false },
-    { date: "2025-03-15", completed: false },
-    { date: "2025-03-16", completed: false },
-    { date: "2025-03-17", completed: false },
-    { date: "2025-03-18", completed: false },
-    { date: "2025-03-19", completed: false },
-    { date: "2025-03-10", completed: false },
-    { date: "2025-03-21", completed: false },
-    { date: "2025-03-22", completed: false },
-    { date: "2025-03-23", completed: false },
-    { date: "2025-03-24", completed: false },
-    { date: "2025-03-25", completed: false },
-    { date: "2025-03-26", completed: false },
-    { date: "2025-03-27", completed: false },
-    { date: "2025-03-28", completed: false },
-    { date: "2025-03-29", excluded: true, because: "Födelsedag" },
-    { date: "2025-03-30", completed: false },
-    { date: "2025-03-31", completed: false },
-    { date: "2025-04-01", completed: false },
-    { date: "2025-04-02", completed: false },
-    { date: "2025-04-03", completed: false },
-    { date: "2025-04-04", completed: false },
-    { date: "2025-04-05", completed: false },
-    { date: "2025-04-06", completed: false },
-    { date: "2025-04-07", completed: false },
-    { date: "2025-04-08", completed: false },
-    { date: "2025-04-09", completed: false },
-    { date: "2025-04-10", completed: false },
-    { date: "2025-04-11", completed: false },
-    { date: "2025-04-12", completed: false },
-    { date: "2025-04-13", completed: false },
-    { date: "2025-04-14", completed: false },
-    { date: "2025-04-15", completed: false },
-    { date: "2025-04-16", completed: false },
-    { date: "2025-04-17", excluded: true, because: "Påsk" },
-    { date: "2025-04-18", completed: false },
-    { date: "2025-04-19", completed: false },
-    { date: "2025-04-10", completed: false },
-    { date: "2025-04-21", completed: false },
-    { date: "2025-04-22", completed: false },
-    { date: "2025-04-23", completed: false },
-    { date: "2025-04-24", completed: false },
-    { date: "2025-04-25", completed: false },
-    { date: "2025-04-26", completed: false },
-    { date: "2025-04-27", completed: false },
-    { date: "2025-04-28", completed: false },
-    { date: "2025-04-29", completed: false },
-    { date: "2025-04-30", completed: false },
-    { date: "2025-05-01", completed: false },
-    { date: "2025-05-02", completed: false },
-    { date: "2025-05-03", completed: false },
-    { date: "2025-05-04", completed: false },
-    { date: "2025-05-05", completed: false },
-    { date: "2025-05-06", completed: false },
-    { date: "2025-05-07", completed: false },
-    { date: "2025-05-08", completed: false },
-    { date: "2025-05-09", completed: false },
-    { date: "2025-05-10", completed: false },
-    { date: "2025-05-11", completed: false },
-    { date: "2025-05-12", completed: false },
-    { date: "2025-05-13", completed: false },
-    { date: "2025-05-14", completed: false },
-    { date: "2025-05-15", completed: false },
-    { date: "2025-05-16", completed: false },
-    { date: "2025-05-17", completed: false },
-    { date: "2025-05-18", completed: false },
-    { date: "2025-05-19", completed: false },
-    { date: "2025-05-10", completed: false },
-    { date: "2025-05-21", completed: false },
-    { date: "2025-05-22", completed: false },
-    { date: "2025-05-23", completed: false },
-    { date: "2025-05-24", completed: false },
-    { date: "2025-05-25", completed: false },
-    { date: "2025-05-26", completed: false },
-    { date: "2025-05-27", completed: false },
-    { date: "2025-05-28", completed: false },
-    { date: "2025-05-29", completed: false },
-    { date: "2025-05-30", completed: false },
-    { date: "2025-05-31", completed: false },
-  ]
-;
-
+  { date: "2025-02-10", completed: false },
+  { date: "2025-02-11", completed: false },
+  { date: "2025-02-12", completed: false },
+  { date: "2025-02-13", completed: false },
+  { date: "2025-02-14", completed: false },
+  { date: "2025-02-15", completed: false },
+  { date: "2025-02-16", completed: false },
+  { date: "2025-02-17", completed: false },
+  { date: "2025-02-18", completed: false },
+  { date: "2025-02-19", completed: false },
+  { date: "2025-02-10", completed: false },
+  { date: "2025-02-21", completed: false },
+  { date: "2025-02-22", completed: false },
+  { date: "2025-02-23", completed: false },
+  { date: "2025-02-24", completed: false },
+  { date: "2025-02-25", completed: false },
+  { date: "2025-02-26", completed: false },
+  { date: "2025-02-27", completed: false },
+  { date: "2025-02-28", completed: false },
+  { date: "2025-03-01", completed: false },
+  { date: "2025-03-02", completed: false },
+  { date: "2025-03-03", completed: false },
+  { date: "2025-03-04", excluded: true, because: "Semmeldagen" },
+  { date: "2025-03-05", completed: false },
+  { date: "2025-03-06", completed: false },
+  { date: "2025-03-07", completed: false },
+  { date: "2025-03-08", completed: false },
+  { date: "2025-03-09", completed: false },
+  { date: "2025-03-10", completed: false },
+  { date: "2025-03-11", completed: false },
+  { date: "2025-03-12", completed: false },
+  { date: "2025-03-13", completed: false },
+  { date: "2025-03-14", completed: false },
+  { date: "2025-03-15", completed: false },
+  { date: "2025-03-16", completed: false },
+  { date: "2025-03-17", completed: false },
+  { date: "2025-03-18", completed: false },
+  { date: "2025-03-19", completed: false },
+  { date: "2025-03-20", completed: false },
+  { date: "2025-03-21", completed: false },
+  { date: "2025-03-22", completed: false },
+  { date: "2025-03-23", completed: false },
+  { date: "2025-03-24", completed: false },
+  { date: "2025-03-25", completed: false },
+  { date: "2025-03-26", completed: false },
+  { date: "2025-03-27", completed: false },
+  { date: "2025-03-28", completed: false },
+  { date: "2025-03-29", excluded: true, because: "Födelsedag" },
+  { date: "2025-03-30", completed: false },
+  { date: "2025-03-31", completed: false },
+  { date: "2025-04-01", completed: false },
+  { date: "2025-04-02", completed: false },
+  { date: "2025-04-03", completed: false },
+  { date: "2025-04-04", completed: false },
+  { date: "2025-04-05", completed: false },
+  { date: "2025-04-06", completed: false },
+  { date: "2025-04-07", completed: false },
+  { date: "2025-04-08", completed: false },
+  { date: "2025-04-09", completed: false },
+  { date: "2025-04-10", completed: false },
+  { date: "2025-04-11", completed: false },
+  { date: "2025-04-12", completed: false },
+  { date: "2025-04-13", completed: false },
+  { date: "2025-04-14", completed: false },
+  { date: "2025-04-15", completed: false },
+  { date: "2025-04-16", completed: false },
+  { date: "2025-04-17", excluded: true, because: "Påsk" },
+  { date: "2025-04-18", completed: false },
+  { date: "2025-04-19", completed: false },
+  { date: "2025-04-10", completed: false },
+  { date: "2025-04-21", completed: false },
+  { date: "2025-04-22", completed: false },
+  { date: "2025-04-23", completed: false },
+  { date: "2025-04-24", completed: false },
+  { date: "2025-04-25", completed: false },
+  { date: "2025-04-26", completed: false },
+  { date: "2025-04-27", completed: false },
+  { date: "2025-04-28", completed: false },
+  { date: "2025-04-29", completed: false },
+  { date: "2025-04-30", completed: false },
+  { date: "2025-05-01", completed: false },
+  { date: "2025-05-02", completed: false },
+  { date: "2025-05-03", completed: false },
+  { date: "2025-05-04", completed: false },
+  { date: "2025-05-05", completed: false },
+  { date: "2025-05-06", completed: false },
+  { date: "2025-05-07", completed: false },
+  { date: "2025-05-08", completed: false },
+  { date: "2025-05-09", completed: false },
+  { date: "2025-05-10", completed: false },
+  { date: "2025-05-11", completed: false },
+  { date: "2025-05-12", completed: false },
+  { date: "2025-05-13", completed: false },
+  { date: "2025-05-14", completed: false },
+  { date: "2025-05-15", completed: false },
+  { date: "2025-05-16", completed: false },
+  { date: "2025-05-17", completed: false },
+  { date: "2025-05-18", completed: false },
+  { date: "2025-05-19", completed: false },
+  { date: "2025-05-10", completed: false },
+  { date: "2025-05-21", completed: false },
+  { date: "2025-05-22", completed: false },
+  { date: "2025-05-23", completed: false },
+  { date: "2025-05-24", completed: false },
+  { date: "2025-05-25", completed: false },
+  { date: "2025-05-26", completed: false },
+  { date: "2025-05-27", completed: false },
+  { date: "2025-05-28", completed: false },
+  { date: "2025-05-29", completed: false },
+  { date: "2025-05-30", completed: false },
+  { date: "2025-05-31", completed: false },
+];
 export default {
   cardio,
   gym,
diff --git a/src/app.css b/src/app.css
index 1769a2d..0e0259e 100644
--- a/src/app.css
+++ b/src/app.css
@@ -14,6 +14,21 @@ body {
   margin: 0;
 }
 
+.top-button {
+  position: absolute;
+  top: 0.25em;
+  right: 0.25em;
+  button {
+    padding: 1em;
+    background-color: #ff0;
+    color: #000;
+
+    &:hover {
+      filter: brightness(95%);
+    }
+  }
+}
+
 main {
   min-height: 100vh;
   display: flex;
@@ -26,7 +41,7 @@ main {
 h1 {
   font-size: 3em;
   line-height: 1.1;
-  margin: 1.25em 0;
+  margin: 0.2em 0;
   text-wrap: balance;
 }
 
diff --git a/src/lib/DietProgress.svelte b/src/lib/DietProgress.svelte
index 2dcd468..896f765 100644
--- a/src/lib/DietProgress.svelte
+++ b/src/lib/DietProgress.svelte
@@ -51,7 +51,7 @@
 
     article:has(.red) {
         pointer-events: none;
-        opacity: 0.33;
+        opacity: 0.33 !important;
     }
 
     article {
diff --git a/src/lib/Info.svelte b/src/lib/Info.svelte
index e355183..ce294e9 100644
--- a/src/lib/Info.svelte
+++ b/src/lib/Info.svelte
@@ -6,6 +6,12 @@
 </script>
 
 <main>
+    <div class="top-button">
+      <button class="clickable" on:click={() => back()}>
+        Tillbaka
+      </button>
+    </div>
+
 <div class="infobox">
   <h1>Hej, Jag har en 40-årskris xD</h1>
   <p><em>Dessutom hägrar en vecka på Sweden rock festival.</em>
@@ -57,9 +63,6 @@
     </blockquote>
     <p><strong>Mål: Följa ovan kostråd 16 veckor, med fördefinierade cheat meals.</strong></p>
 </div>
-  <button class="clickable" on:click={back()}>
-    Tillbaka
-  </button>
 </main>
 
 <style>
@@ -70,11 +73,11 @@
   h2 {
     margin-bottom: 0;
   }
-  
+
   main {
     background-color: #ff0;
   }
-  
+
   .infobox {
     margin: 0.1em;
     background-color: #fff;
diff --git a/src/lib/Summary.svelte b/src/lib/Summary.svelte
index d077a3a..5d1a2b4 100644
--- a/src/lib/Summary.svelte
+++ b/src/lib/Summary.svelte
@@ -12,67 +12,128 @@
 
 <main>
 <h1>Dags att komma i form!</h1>
-<div class="cards">
-  <button class="clickable gym" onclick={() => navigate(1)}>
-    <i>{gymProgress}</i> / {$gym.length} <span>Styrketräning</span>
-  </button>
-  <button class="clickable cardio" onclick={() => navigate(2)}>
-    <i>{cardioProgress}</i> / {$cardio.length}
-    <span>Konditionsträning</span>
-  </button>
-  <button class="clickable diet" onclick={() => navigate(3)}>
-    <i>{dietProgress}</i> / {dietTotal}
-    <span>Dietdagar</span>
-  </button>
+<div class="progress">
+    <h2>Styrketräning, 3d/v under 11 veckor</h2>
+    <div class="progress-row">
+        <progress class="gym" value={gymProgress} max={$gym.length}></progress>
+        <i>{gymProgress} / {$gym.length}</i>
+        <button class="clickable gym" onclick={() => navigate(1)}>+</button>
+    </div>
+    <h2>Konditionsträning, 3d/v under 7 veckor</h2>
+    <div class="progress-row">
+        <progress class="cardio" value={cardioProgress} max={$cardio.length}></progress>
+        <i>{cardioProgress} / {$cardio.length}</i>
+        <button class="clickable cardio" onclick={() => navigate(2)}>+</button>
+    </div>
+    <h2>Diet, feb&ndash;maj</h2>
+    <div class="progress-row">
+        <progress class="diet" value={dietProgress} max={dietTotal}></progress>
+        <i>{dietProgress} / {dietTotal}</i>
+        <button class="clickable diet" onclick={() => navigate(3)}>+</button>
+    </div>
+</div>
+<div class="top-button">
   <button class="clickable info" onclick={() => navigate(4)}>
-    <i>?</i>
-    <span>Va?</span>
+    Va?
   </button>
 </div>
 </main>
 
 <style>
-  .cards {
-    list-style: none;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1em;
-
-    button {
-      padding: 1.5em;
-
-      &:hover {
-        filter: brightness(95%);
-      }
+    main {
+        background: #222;
+        color: #fff;
     }
-
-    .gym {
-      background-color: #f62b5a;
-      color: #fff;
-    }
-
-    .cardio {
-      background-color: #5dc5f8;
-      color: #000;
-    }
-
-    .diet {
-      background-color: #35d450;
-      color: #fff;
-    }
-
-    .info {
-      background-color: #ff0;
-      color: #000;
-    }
-
-    i {
-      font-size: 2em;
-      font-style: normal;
-    }
-
-    span {
+  progress {
+      --pcolor: #f00;
+      --h: 1.5rem;
+      --br: calc(var(--h) / 2);
+      appearance: none;
+      height: var(--h);
       display: block;
-    }
+      width: calc(100% - 2rem);
+      border: none;
+      background-color: rgba(128, 128, 128, 0.25);
+      margin: 0 1rem;
+      border-radius: var(--br);
+
+      &::-webkit-progress-value,
+      &::-moz-progress-bar {
+          background-color: var(--pcolor);
+          background-image: linear-gradient(rgba(255,255,255,0.25) 0, rgba(255,255,255,0.25) 4px, var(--pcolor) 4px, var(--pcolor));
+          border: 0.25rem solid var(--pcolor);
+          border-width: 0.25rem 0.5rem;
+          border-radius: var(--br);
+      }
+
+      &.cardio {
+          --pcolor: #5dc5f8;
+      }
+
+      &.diet {
+          --pcolor: #35d450;
+      }
+
+      &.gym {
+          --pcolor: #f62b5a;
+      }
+  }
+
+  .progress {
+      --mg: 0.75rem;
+      --border: 3px solid #444;
+      margin: 2rem 0;
+      border: var(--border);
+      border-radius: 1rem;
+      padding-bottom: var(--mg);
+
+      > h2 {
+          padding: 0 1rem;
+          margin: var(--mg) 0;
+          font-size: 1em;
+          line-height: 1.25;
+
+          * + & {
+              border-top: var(--border);
+              padding-top: var(--mg);
+          }
+      }
+  }
+
+  .progress-row {
+      position: relative;
+
+      > i {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          font-style: normal;
+          font-size: 0.9em;
+          font-weight: bold;
+          pointer-events: none;
+      }
+
+      > button {
+          position: absolute;
+          top: 50%;
+          right: 0.5rem;
+          transform: translateY(-50%);
+          color: #fff;
+          background-color: var(--btn-bg);
+          padding: 0.25em 0.66em;
+
+          &.cardio {
+              --btn-bg: #5dc5f8;
+          }
+
+          &.diet {
+              --btn-bg: #35d450;
+          }
+
+          &.gym {
+              --btn-bg: #f62b5a;
+          }
+      }
   }
 </style>
diff --git a/vite.config.ts b/vite.config.ts
index 92d3a20..990a794 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -11,7 +11,7 @@ export default defineConfig({
       includeAssets: ["icon512_rounded.png", "icon512_maskable.png"],
       manifest: {
         theme_color: "#8936FF",
-        background_color: "#2EC6FE",
+        background_color: "#222",
         icons: [
           {
             purpose: "maskable",
@@ -28,7 +28,7 @@ export default defineConfig({
         ],
         orientation: "portrait",
         display: "standalone",
-        dir: "auto",
+        dir: "ltr",
         lang: "sv-SE",
         name: "Strand",
         short_name: "strand",