Compare commits
No commits in common. "main" and "v12" have entirely different histories.
17 changed files with 231 additions and 5471 deletions
6
README
6
README
|
|
@ -14,5 +14,7 @@ Stack
|
||||||
-----
|
-----
|
||||||
|
|
||||||
Vanilla Svelte, with a plugin for persistent store using
|
Vanilla Svelte, with a plugin for persistent store using
|
||||||
localStorage, as well as some PWA addons for better offline
|
localStorage.
|
||||||
use on mobile devices.
|
|
||||||
|
As an academic exercise, this might as well be ported to a
|
||||||
|
PWA by introducing a webappmanifest and a ServiceWorker.
|
||||||
|
|
|
||||||
|
|
@ -381,23 +381,6 @@ const gym = [
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const fast = [
|
|
||||||
{ name: "1:1", planned_at: "2025-04-30", completed: false },
|
|
||||||
{ name: "1:2", planned_at: "2025-05-02", completed: false },
|
|
||||||
{ name: "2:1", planned_at: "2025-05-05", completed: false },
|
|
||||||
{ name: "2:2", planned_at: "2025-05-07", completed: false },
|
|
||||||
{ name: "2:3", planned_at: "2025-05-09", completed: false },
|
|
||||||
{ name: "3:1", planned_at: "2025-05-12", completed: false },
|
|
||||||
{ name: "3:2", planned_at: "2025-05-14", completed: false },
|
|
||||||
{ name: "3:3", planned_at: "2025-05-16", completed: false },
|
|
||||||
{ name: "4:1", planned_at: "2025-05-19", completed: false },
|
|
||||||
{ name: "4:2", planned_at: "2025-05-21", completed: false },
|
|
||||||
{ name: "4:3", planned_at: "2025-05-23", completed: false },
|
|
||||||
{ name: "5:1", planned_at: "2025-05-26", completed: false },
|
|
||||||
{ name: "5:2", planned_at: "2025-05-28", completed: false },
|
|
||||||
{ name: "5:3", planned_at: "2025-05-30", completed: false },
|
|
||||||
];
|
|
||||||
|
|
||||||
const diet = [
|
const diet = [
|
||||||
{ date: "2025-02-10", completed: false },
|
{ date: "2025-02-10", completed: false },
|
||||||
{ date: "2025-02-11", completed: false },
|
{ date: "2025-02-11", completed: false },
|
||||||
|
|
@ -437,7 +420,7 @@ const diet = [
|
||||||
{ date: "2025-03-17", completed: false },
|
{ date: "2025-03-17", completed: false },
|
||||||
{ date: "2025-03-18", completed: false },
|
{ date: "2025-03-18", completed: false },
|
||||||
{ date: "2025-03-19", completed: false },
|
{ date: "2025-03-19", completed: false },
|
||||||
{ date: "2025-03-20", completed: false },
|
{ date: "2025-03-10", completed: false },
|
||||||
{ date: "2025-03-21", completed: false },
|
{ date: "2025-03-21", completed: false },
|
||||||
{ date: "2025-03-22", completed: false },
|
{ date: "2025-03-22", completed: false },
|
||||||
{ date: "2025-03-23", completed: false },
|
{ date: "2025-03-23", completed: false },
|
||||||
|
|
@ -510,10 +493,11 @@ const diet = [
|
||||||
{ date: "2025-05-29", completed: false },
|
{ date: "2025-05-29", completed: false },
|
||||||
{ date: "2025-05-30", completed: false },
|
{ date: "2025-05-30", completed: false },
|
||||||
{ date: "2025-05-31", completed: false },
|
{ date: "2025-05-31", completed: false },
|
||||||
];
|
]
|
||||||
|
;
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
cardio,
|
cardio,
|
||||||
gym,
|
gym,
|
||||||
diet,
|
diet,
|
||||||
fast,
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,8 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<meta name="viewport" content="width=device-width" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Strand</title>
|
<title>Strand</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
4793
package-lock.json
generated
4793
package-lock.json
generated
File diff suppressed because it is too large
Load diff
|
|
@ -13,13 +13,11 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
||||||
"@tsconfig/svelte": "^5.0.4",
|
"@tsconfig/svelte": "^5.0.4",
|
||||||
"prettier": "^3.5.3",
|
"prettier": "^3.4.2",
|
||||||
"prettier-plugin-svelte": "^3.3.3",
|
|
||||||
"svelte": "^5.15.0",
|
"svelte": "^5.15.0",
|
||||||
"svelte-check": "^4.1.1",
|
"svelte-check": "^4.1.1",
|
||||||
"typescript": "~5.6.2",
|
"typescript": "~5.6.2",
|
||||||
"vite": "^6.0.5",
|
"vite": "^6.0.5"
|
||||||
"vite-plugin-pwa": "^0.21.1"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"svelte-persisted-store": "^0.12.0"
|
"svelte-persisted-store": "^0.12.0"
|
||||||
|
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
|
|
@ -6,8 +6,7 @@
|
||||||
import GymProgress from "./lib/GymProgress.svelte";
|
import GymProgress from "./lib/GymProgress.svelte";
|
||||||
import CardioProgress from "./lib/CardioProgress.svelte";
|
import CardioProgress from "./lib/CardioProgress.svelte";
|
||||||
import DietProgress from "./lib/DietProgress.svelte";
|
import DietProgress from "./lib/DietProgress.svelte";
|
||||||
import FastProgress from "./lib/FastProgress.svelte";
|
import Info from "./lib/Info.svelte"
|
||||||
import Info from "./lib/Info.svelte";
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="chrome">
|
<div class="chrome">
|
||||||
|
|
@ -26,9 +25,6 @@
|
||||||
{#if $currentView === 4}
|
{#if $currentView === 4}
|
||||||
<Info />
|
<Info />
|
||||||
{/if}
|
{/if}
|
||||||
{#if $currentView === 5}
|
|
||||||
<FastProgress />
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|
|
||||||
17
src/app.css
17
src/app.css
|
|
@ -14,21 +14,6 @@ body {
|
||||||
margin: 0;
|
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 {
|
main {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
@ -41,7 +26,7 @@ main {
|
||||||
h1 {
|
h1 {
|
||||||
font-size: 3em;
|
font-size: 3em;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
margin: 0.2em 0;
|
margin: 1.25em 0;
|
||||||
text-wrap: balance;
|
text-wrap: balance;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,192 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import DietProgress from "./DietProgress.svelte";
|
|
||||||
import P from "./svg-path";
|
|
||||||
import { gym, cardio, diet, fast } from "./store";
|
|
||||||
|
|
||||||
export const DEG_TO_RAD = Math.PI / 180;
|
|
||||||
export const RAD_TO_DEG = 180 / Math.PI;
|
|
||||||
export const FULL_CIRCLE_IN_RADIANS = 2 * Math.PI;
|
|
||||||
|
|
||||||
const size = 400;
|
|
||||||
const segmentHeight = 16;
|
|
||||||
const span = 0.8 * FULL_CIRCLE_IN_RADIANS;
|
|
||||||
const startAngle = 0.25 * FULL_CIRCLE_IN_RADIANS + span / 2;
|
|
||||||
|
|
||||||
const perimiterWidth = size * Math.PI * (span / FULL_CIRCLE_IN_RADIANS);
|
|
||||||
const pixelToRadians = span / perimiterWidth;
|
|
||||||
const x = 0;
|
|
||||||
const y = 0;
|
|
||||||
|
|
||||||
const points = (
|
|
||||||
radius: number,
|
|
||||||
radLength: number,
|
|
||||||
thickness: number,
|
|
||||||
offset?: number,
|
|
||||||
) => {
|
|
||||||
const borderRadius = thickness / 2;
|
|
||||||
const outerRadius = radius;
|
|
||||||
const innerRadius = outerRadius - thickness;
|
|
||||||
const radEndAngle = startAngle - radLength;
|
|
||||||
const borderRadiusAngle =
|
|
||||||
(borderRadius / (outerRadius * FULL_CIRCLE_IN_RADIANS)) *
|
|
||||||
FULL_CIRCLE_IN_RADIANS;
|
|
||||||
const isLongTrack = radLength - 2 * borderRadiusAngle > Math.PI;
|
|
||||||
const start = startAngle + (offset ?? 0);
|
|
||||||
|
|
||||||
return P()
|
|
||||||
.moveTo(
|
|
||||||
-Math.sin(start) * (outerRadius - borderRadius),
|
|
||||||
Math.cos(start) * (outerRadius - borderRadius),
|
|
||||||
)
|
|
||||||
.arcTo(
|
|
||||||
borderRadius,
|
|
||||||
borderRadius,
|
|
||||||
false,
|
|
||||||
true,
|
|
||||||
-Math.sin(start - borderRadiusAngle) * outerRadius,
|
|
||||||
Math.cos(start - borderRadiusAngle) * outerRadius,
|
|
||||||
)
|
|
||||||
.arcTo(
|
|
||||||
outerRadius,
|
|
||||||
outerRadius,
|
|
||||||
isLongTrack,
|
|
||||||
true,
|
|
||||||
-Math.sin(radEndAngle + borderRadiusAngle) * outerRadius,
|
|
||||||
Math.cos(radEndAngle + borderRadiusAngle) * outerRadius,
|
|
||||||
)
|
|
||||||
.arcTo(
|
|
||||||
borderRadius,
|
|
||||||
borderRadius,
|
|
||||||
false,
|
|
||||||
true,
|
|
||||||
-Math.sin(radEndAngle) * (outerRadius - borderRadius),
|
|
||||||
Math.cos(radEndAngle) * (outerRadius - borderRadius),
|
|
||||||
)
|
|
||||||
.lineTo(
|
|
||||||
-Math.sin(radEndAngle) * (innerRadius + borderRadius),
|
|
||||||
Math.cos(radEndAngle) * (innerRadius + borderRadius),
|
|
||||||
)
|
|
||||||
.arcTo(
|
|
||||||
borderRadius,
|
|
||||||
borderRadius,
|
|
||||||
false,
|
|
||||||
true,
|
|
||||||
-Math.sin(radEndAngle + borderRadiusAngle) * innerRadius,
|
|
||||||
Math.cos(radEndAngle + borderRadiusAngle) * innerRadius,
|
|
||||||
)
|
|
||||||
.arcTo(
|
|
||||||
innerRadius,
|
|
||||||
innerRadius,
|
|
||||||
isLongTrack,
|
|
||||||
false,
|
|
||||||
-Math.sin(start - borderRadiusAngle) * innerRadius,
|
|
||||||
Math.cos(start - borderRadiusAngle) * innerRadius,
|
|
||||||
)
|
|
||||||
.arcTo(
|
|
||||||
borderRadius,
|
|
||||||
borderRadius,
|
|
||||||
false,
|
|
||||||
true,
|
|
||||||
-Math.sin(start) * (innerRadius + borderRadius),
|
|
||||||
Math.cos(start) * (innerRadius + borderRadius),
|
|
||||||
)
|
|
||||||
.close()
|
|
||||||
.stringify();
|
|
||||||
};
|
|
||||||
|
|
||||||
let items = [
|
|
||||||
{
|
|
||||||
c: "gym",
|
|
||||||
progress: $gym.filter((c) => c.completed).length / $gym.length,
|
|
||||||
level: 0,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
c: "cardio",
|
|
||||||
progress: $cardio.filter((c) => c.completed).length / $cardio.length,
|
|
||||||
level: 1,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
c: "diet",
|
|
||||||
progress:
|
|
||||||
$diet.filter((c) => c.completed).length /
|
|
||||||
$diet.filter((c) => !c.excluded).length,
|
|
||||||
level: 2,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
c: "fast",
|
|
||||||
progress: $fast.filter((c) => c.completed).length / $fast.length,
|
|
||||||
level: 3,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<figure>
|
|
||||||
<svg viewBox="0 0 {size} {size}" role="presentation">
|
|
||||||
<g transform="${`translate(${x},${y})`}" fill="none">
|
|
||||||
<g transform={`translate(${size / 2},${size / 2})`}>
|
|
||||||
{#each items as { c, progress, level }}
|
|
||||||
<path
|
|
||||||
fill="#fff"
|
|
||||||
opacity="0.066"
|
|
||||||
d={points(
|
|
||||||
size / 2 - level * (segmentHeight + 4),
|
|
||||||
span,
|
|
||||||
segmentHeight,
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
class={c}
|
|
||||||
fill="currentColor"
|
|
||||||
d={points(
|
|
||||||
size / 2 - level * (segmentHeight + 4),
|
|
||||||
progress * span,
|
|
||||||
segmentHeight,
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
fill="#fff"
|
|
||||||
opacity="0.4"
|
|
||||||
d={points(
|
|
||||||
size / 2 - level * (segmentHeight + 4) - 4,
|
|
||||||
progress * span * 0.98,
|
|
||||||
4,
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{/each}
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
</figure>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
svg {
|
|
||||||
display: block;
|
|
||||||
max-width: 80%;
|
|
||||||
aspect-ratio: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
figure {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
place-content: center;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin: 2rem 0 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.cardio {
|
|
||||||
color: #5dc5f8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.gym {
|
|
||||||
color: #f62b5a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.diet {
|
|
||||||
color: #35d450;
|
|
||||||
}
|
|
||||||
|
|
||||||
.fast {
|
|
||||||
color: #ff00ff;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -51,7 +51,7 @@
|
||||||
|
|
||||||
article:has(.red) {
|
article:has(.red) {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
opacity: 0.33 !important;
|
opacity: 0.33;
|
||||||
}
|
}
|
||||||
|
|
||||||
article {
|
article {
|
||||||
|
|
|
||||||
|
|
@ -1,39 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import { fast } from "./store";
|
|
||||||
import { dm, back } from "./common";
|
|
||||||
const remaining = $fast.length;
|
|
||||||
const days = ["ons", "fre", "mån"];
|
|
||||||
let done = $derived($fast.filter((c) => c.completed).length);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<header>
|
|
||||||
<button class="clickable back" onclick={() => back()}>←</button>
|
|
||||||
<h1>
|
|
||||||
Fasta: {done} av {remaining}
|
|
||||||
</h1>
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
<progress hidden max={remaining} value={done}></progress>
|
|
||||||
<div class="calendar">
|
|
||||||
{#each $fast as col, i}
|
|
||||||
<article class="clickable">
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" bind:checked={col.completed} />
|
|
||||||
<strong>{col.name}</strong>
|
|
||||||
<small>{days[i % 3]} {dm(col.planned_at)}</small>
|
|
||||||
</label>
|
|
||||||
</article>
|
|
||||||
{/each}
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
main {
|
|
||||||
background-color: #5dc5f8;
|
|
||||||
border-top: 4px solid rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
article:nth-child(1) {
|
|
||||||
grid-column: 2;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -5,26 +5,22 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<header>
|
|
||||||
<button class="clickable back" onclick={() => back()}>←</button>
|
|
||||||
<h1>Va?</h1>
|
|
||||||
</header>
|
|
||||||
<main>
|
<main>
|
||||||
<div class="infobox">
|
<div class="infobox">
|
||||||
<h2>Hej, Anders har en 40-årskris xD</h2>
|
<h1>Hej, Jag har en 40-årskris xD</h1>
|
||||||
<p><em>Dessutom hägrar en vecka på Sweden rock festival.</em>
|
<p><em>Dessutom hägrar en vecka på Sweden rock festival.</em>
|
||||||
Ryggen och benen behöver vara i form.</p>
|
Ryggen och benen behöver vara i form.</p>
|
||||||
<p>
|
<p>
|
||||||
För att göra träningen litet mer belönande skapades denna app för att ge honom
|
För att göra träningen litet mer belönande skapades denna app för att ge mig
|
||||||
möjlighet att bocka i allt han gör.
|
möjlighet att bocka i allt jag gör.
|
||||||
</p>
|
</p>
|
||||||
<h2>Börja löpträna</h2>
|
<h2>Börja löpträna</h2>
|
||||||
<p>Anders har tidigare löptränat, men inte gjort det kontinuerligt sedan 2017.</p>
|
<p>Jag har tidigare löptränat, men inte gjort det kontinuerligt sedan 2017.</p>
|
||||||
<p><b>Metod:</b> löpträning 3 gånger per vecka: 2 pass med 2 intervaller, ett långpass. Linjär
|
<p><b>Metod:</b> löpträning 3 gånger per vecka: 2 pass med 2 intervaller, ett långpass. Linjär
|
||||||
progression med 60–120 sekunders ökning per pass.</p>
|
progression med 60–120 sekunders ökning per pass.</p>
|
||||||
<strong>Mål: 5km löpning efter 7 veckor.</strong>
|
<strong>Mål: 5km löpning efter 7 veckor.</strong>
|
||||||
<h2>Återuppta styrkelyft</h2>
|
<h2>Återuppta styrkelyft</h2>
|
||||||
<p>Anders föredrar baslyft med frivikter. Hans PB slogs senast januari 2023.</p>
|
<p>Jag föredrar baslyft med frivikter. Mina PB slogs senast januari 2023.</p>
|
||||||
<p>
|
<p>
|
||||||
<b>Metod</b>: styrketräning 3 gånger per vecka. 4 veckor grundträning (A-blocket),
|
<b>Metod</b>: styrketräning 3 gånger per vecka. 4 veckor grundträning (A-blocket),
|
||||||
4 veckor specialiserad träning (B-blocket), 3 veckor toppning (C-blocket).
|
4 veckor specialiserad träning (B-blocket), 3 veckor toppning (C-blocket).
|
||||||
|
|
@ -33,12 +29,12 @@
|
||||||
styrkelyftstotal.</strong>
|
styrkelyftstotal.</strong>
|
||||||
<h2>Inleda diet</h2>
|
<h2>Inleda diet</h2>
|
||||||
<p>
|
<p>
|
||||||
Anders har ett uppskattat BMI på 28-32 vid start av denna utmaning.
|
Jag har ett uppskattat BMI på 28-32 vid start av denna utmaning.
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<b>Metod</b>: Följa
|
<b>Metod</b>: Följa
|
||||||
<a href="https://www.youtube.com/watch?v=fB_ESE2XwOU">Alan Thralls tips</a>, som listas nedan.
|
<a href="https://www.youtube.com/watch?v=fB_ESE2XwOU">Alan Thralls tips</a>, som listas nedan.
|
||||||
Anders cheat meals: Semla på semmeldagen, fika på födelsedagen, liten godispåse på lördagar.
|
Mina cheat meals: Semla på semmeldagen, fika på födelsedagen, liten godispåse på lördagar.
|
||||||
</p>
|
</p>
|
||||||
<blockquote>
|
<blockquote>
|
||||||
<ul>
|
<ul>
|
||||||
|
|
@ -60,33 +56,35 @@
|
||||||
</ul>
|
</ul>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
<p><strong>Mål: Följa ovan kostråd 16 veckor, med fördefinierade cheat meals.</strong></p>
|
<p><strong>Mål: Följa ovan kostråd 16 veckor, med fördefinierade cheat meals.</strong></p>
|
||||||
<h2>Vem?</h2>
|
|
||||||
<p>
|
|
||||||
Anders skapade denna PWA. Han är en webbutvecklare som är pappa, älskar hårdrock och föredrar att
|
|
||||||
betrakta sina datorer som byggsatser.
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
<button class="clickable" on:click={back()}>
|
||||||
|
Tillbaka
|
||||||
|
</button>
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
h1 {
|
||||||
|
padding-left: 0;
|
||||||
|
margin: .5em 0;
|
||||||
|
}
|
||||||
h2 {
|
h2 {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-top: 0.66rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
background-color: #ff0;
|
background-color: #ff0;
|
||||||
border-top: 4px solid rgba(0, 0, 0, 0.2)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.infobox {
|
.infobox {
|
||||||
margin: 0.1em;
|
margin: 0.1em;
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border: 3px solid #aaa;
|
border: 2px solid #aaa;
|
||||||
border-radius: 1rem;
|
border-radius: 8px;
|
||||||
padding: 0.5em 1em;
|
padding: 0.5em 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 1em;
|
||||||
|
margin: 2em auto;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,205 +1,78 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { gym, fast, cardio, diet, currentView } from "./store";
|
import { gym, cardio, diet, currentView } from "./store";
|
||||||
import Arc from "./Arc.svelte";
|
|
||||||
let gymProgress = $derived($gym.filter((c) => c.completed).length);
|
let gymProgress = $derived($gym.filter((c) => c.completed).length);
|
||||||
let cardioProgress = $derived($cardio.filter((c) => c.completed).length);
|
let cardioProgress = $derived($cardio.filter((c) => c.completed).length);
|
||||||
let fastProgress = $derived($fast.filter((c) => c.completed).length);
|
|
||||||
let dietProgress = $derived($diet.filter((c) => c.completed).length);
|
let dietProgress = $derived($diet.filter((c) => c.completed).length);
|
||||||
let dietTotal = $derived($diet.filter((c) => !c.excluded).length);
|
let dietTotal = $derived($diet.filter((c) => !c.excluded).length);
|
||||||
|
|
||||||
const navigate = (v: 0 | 1 | 2 | 3 | 4 | 5) => {
|
const navigate = (v: 0 | 1 | 2 | 3 | 4) => {
|
||||||
currentView.update((_) => v);
|
currentView.update((_) => v);
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<h1>Dags att komma i form!</h1>
|
<h1>Dags att komma i form!</h1>
|
||||||
<Arc />
|
<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>
|
||||||
|
</button>
|
||||||
|
<button class="clickable diet" onclick={() => navigate(3)}>
|
||||||
|
<i>{dietProgress}</i> / {dietTotal}
|
||||||
|
<span>Dietdagar</span>
|
||||||
|
</button>
|
||||||
|
<button class="clickable info" onclick={() => navigate(4)}>
|
||||||
|
<i>?</i>
|
||||||
|
<span>Va?</span>
|
||||||
|
</button>
|
||||||
</div>
|
</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>
|
|
||||||
<h2>Fasta, 3d/v under maj</h2>
|
|
||||||
<div class="progress-row">
|
|
||||||
<progress class="fast" value={fastProgress} max={$fast.length}></progress>
|
|
||||||
<i>{fastProgress} / {$fast.length}</i>
|
|
||||||
<button class="clickable fast" onclick={() => navigate(5)}>+</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="top-button">
|
|
||||||
<button class="clickable info" onclick={() => navigate(4)}> Va? </button>
|
|
||||||
</div>
|
|
||||||
<p class="madeby">Skapad av <a href="https://madr.se">Anders</a></p>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.madeby {
|
.cards {
|
||||||
text-align: center;
|
list-style: none;
|
||||||
font-size: 0.75em;
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 1em;
|
||||||
|
|
||||||
|
button {
|
||||||
|
padding: 1.5em;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
filter: brightness(95%);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
.gym {
|
||||||
background: #222;
|
background-color: #f62b5a;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress {
|
.cardio {
|
||||||
&.cardio {
|
background-color: #5dc5f8;
|
||||||
--pcolor: #5dc5f8;
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.diet {
|
.diet {
|
||||||
--pcolor: #35d450;
|
background-color: #35d450;
|
||||||
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.gym {
|
.info {
|
||||||
--pcolor: #f62b5a;
|
background-color: #ff0;
|
||||||
|
color: #000;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.fast {
|
i {
|
||||||
--pcolor: #ff00ff;
|
font-size: 2em;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
progress,
|
|
||||||
::-webkit-progress-bar {
|
|
||||||
-webkit-appearance: none;
|
|
||||||
appearance: none;
|
|
||||||
height: var(--h);
|
|
||||||
display: block;
|
|
||||||
width: calc(100% - 2rem);
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
background-color: rgba(128, 128, 128, 0.25);
|
|
||||||
margin: 0 1rem;
|
|
||||||
border-radius: var(--br);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-progress-bar {
|
|
||||||
margin-right: 0;
|
|
||||||
margin-left: 0;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Nope, cannot comma separate selector like this:
|
|
||||||
|
|
||||||
::-moz-progress-bar,
|
|
||||||
::-webkit-progress-value { ... }
|
|
||||||
|
|
||||||
or even like this:
|
|
||||||
|
|
||||||
progress::-webkit-progress-value { ... }
|
|
||||||
|
|
||||||
Bug, closed with wontfix in 2015:
|
|
||||||
https://issues.chromium.org/issues/40564916
|
|
||||||
|
|
||||||
Sincerely, FUCK YOU, Chrome dev team.
|
|
||||||
*/
|
|
||||||
::-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);
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-progress-value {
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
.progress {
|
|
||||||
--pcolor: #f00;
|
|
||||||
--h: 1.66rem;
|
|
||||||
--br: calc(var(--h) / 2);
|
|
||||||
--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-style: normal;
|
||||||
font-size: 0.9em;
|
|
||||||
font-weight: bold;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
> button {
|
span {
|
||||||
position: absolute;
|
display: block;
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.fast {
|
|
||||||
--btn-bg: #ff00ff;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,6 @@ export const currentView = writable(0);
|
||||||
export const cardio = persisted("cardio", defaultState.cardio);
|
export const cardio = persisted("cardio", defaultState.cardio);
|
||||||
export const gym = persisted("gym", defaultState.gym);
|
export const gym = persisted("gym", defaultState.gym);
|
||||||
export const diet = persisted("diet", defaultState.diet);
|
export const diet = persisted("diet", defaultState.diet);
|
||||||
export const fast = persisted("fast", defaultState.fast);
|
|
||||||
|
|
||||||
export type Exercise = {
|
export type Exercise = {
|
||||||
completed: boolean;
|
completed: boolean;
|
||||||
|
|
|
||||||
|
|
@ -1,31 +0,0 @@
|
||||||
export default function () {
|
|
||||||
const commands: string[] = [];
|
|
||||||
return {
|
|
||||||
stringify() {
|
|
||||||
return `${commands.join("\n")}`;
|
|
||||||
},
|
|
||||||
arcTo(
|
|
||||||
ry: number,
|
|
||||||
rx: number,
|
|
||||||
long: boolean,
|
|
||||||
cw: boolean,
|
|
||||||
y: number,
|
|
||||||
x: number,
|
|
||||||
) {
|
|
||||||
commands.push(`A ${rx} ${ry} 0 ${long ? 1 : 0} ${cw ? 1 : 0} ${x} ${y}`);
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
moveTo(y: number, x: number) {
|
|
||||||
commands.push(`M ${x} ${y}`);
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
lineTo(y: number, x: number) {
|
|
||||||
commands.push(`L ${x} ${y}`);
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
close() {
|
|
||||||
commands.push("z");
|
|
||||||
return this;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -1,38 +1,7 @@
|
||||||
import { defineConfig } from "vite";
|
import { defineConfig } from 'vite'
|
||||||
import { VitePWA } from "vite-plugin-pwa";
|
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||||
import { svelte } from "@sveltejs/vite-plugin-svelte";
|
|
||||||
|
|
||||||
// https://vite.dev/config/
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [
|
plugins: [svelte()],
|
||||||
svelte(),
|
})
|
||||||
VitePWA({
|
|
||||||
injectRegister: "auto",
|
|
||||||
includeAssets: ["icon512_rounded.png", "icon512_maskable.png"],
|
|
||||||
manifest: {
|
|
||||||
theme_color: "#8936FF",
|
|
||||||
background_color: "#222",
|
|
||||||
icons: [
|
|
||||||
{
|
|
||||||
purpose: "maskable",
|
|
||||||
sizes: "512x512",
|
|
||||||
src: "icon512_maskable.png",
|
|
||||||
type: "image/png",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
purpose: "any",
|
|
||||||
sizes: "512x512",
|
|
||||||
src: "icon512_rounded.png",
|
|
||||||
type: "image/png",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
orientation: "portrait",
|
|
||||||
display: "standalone",
|
|
||||||
dir: "ltr",
|
|
||||||
lang: "sv-SE",
|
|
||||||
name: "Strand",
|
|
||||||
short_name: "strand",
|
|
||||||
},
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue