Add progress bars to summary page
This commit is contained in:
parent
b34bb19fb8
commit
9cb8a75f74
7 changed files with 256 additions and 181 deletions
6
README
6
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.
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
17
src/app.css
17
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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@
|
|||
|
||||
article:has(.red) {
|
||||
pointer-events: none;
|
||||
opacity: 0.33;
|
||||
opacity: 0.33 !important;
|
||||
}
|
||||
|
||||
article {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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–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>
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue