Add progress bars to summary page

README

@@ -14,7 +14,5 @@ Stack
 -----
 
 Vanilla Svelte, with a plugin for persistent store using
-localStorage.
+localStorage, as well as some PWA addons for better offline
-
+use on mobile devices.
-As an academic exercise, this might as well be ported to a
-PWA by introducing a webappmanifest and a ServiceWorker.

data/default-state.js

@@ -420,7 +420,7 @@ const diet = [
   { 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-20", completed: false },
   { date: "2025-03-21", completed: false },
   { date: "2025-03-22", completed: false },
   { date: "2025-03-23", completed: false },
@@ -493,9 +493,7 @@ const diet = [
   { date: "2025-05-29", completed: false },
   { date: "2025-05-30", completed: false },
   { date: "2025-05-31", completed: false },
-  ]
+];
-;
-
 export default {
   cardio,
   gym,

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;
 }
 

src/lib/DietProgress.svelte

@@ -51,7 +51,7 @@
 
     article:has(.red) {
         pointer-events: none;
-        opacity: 0.33;
+        opacity: 0.33 !important;
     }
 
     article {

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>

src/lib/Summary.svelte

@@ -12,67 +12,128 @@
 
 <main>
 <h1>Dags att komma i form!</h1>
-<div class="cards">
+<div class="progress">
-  <button class="clickable gym" onclick={() => navigate(1)}>
+    <h2>Styrketräning, 3d/v under 11 veckor</h2>
-    <i>{gymProgress}</i> / {$gym.length} <span>Styrketräning</span>
+    <div class="progress-row">
-  </button>
+        <progress class="gym" value={gymProgress} max={$gym.length}></progress>
-  <button class="clickable cardio" onclick={() => navigate(2)}>
+        <i>{gymProgress} / {$gym.length}</i>
-    <i>{cardioProgress}</i> / {$cardio.length}
+        <button class="clickable gym" onclick={() => navigate(1)}>+</button>
-    <span>Konditionsträning</span>
+    </div>
-  </button>
+    <h2>Konditionsträning, 3d/v under 7 veckor</h2>
-  <button class="clickable diet" onclick={() => navigate(3)}>
+    <div class="progress-row">
-    <i>{dietProgress}</i> / {dietTotal}
+        <progress class="cardio" value={cardioProgress} max={$cardio.length}></progress>
-    <span>Dietdagar</span>
+        <i>{cardioProgress} / {$cardio.length}</i>
-  </button>
+        <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>
+    Va?
-    <span>Va?</span>
   </button>
 </div>
 </main>
 
 <style>
-  .cards {
+    main {
-    list-style: none;
+        background: #222;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 1em;
-
-    button {
-      padding: 1.5em;
-
-      &:hover {
-        filter: brightness(95%);
-      }
-    }
-
-    .gym {
-      background-color: #f62b5a;
         color: #fff;
     }
-
+  progress {
-    .cardio {
+      --pcolor: #f00;
-      background-color: #5dc5f8;
+      --h: 1.5rem;
-      color: #000;
+      --br: calc(var(--h) / 2);
-    }
+      appearance: none;
-
+      height: var(--h);
-    .diet {
-      background-color: #35d450;
-      color: #fff;
-    }
-
-    .info {
-      background-color: #ff0;
-      color: #000;
-    }
-
-    i {
-      font-size: 2em;
-      font-style: normal;
-    }
-
-    span {
       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>

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",