Compare commits
No commits in common. "main" and "v14" have entirely different histories.
10 changed files with 145 additions and 508 deletions
|
|
@ -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 },
|
||||||
|
|
@ -515,5 +498,4 @@ export default {
|
||||||
cardio,
|
cardio,
|
||||||
gym,
|
gym,
|
||||||
diet,
|
diet,
|
||||||
fast,
|
|
||||||
};
|
};
|
||||||
|
|
|
||||||
20
package-lock.json
generated
20
package-lock.json
generated
|
|
@ -13,8 +13,7 @@
|
||||||
"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",
|
||||||
|
|
@ -4506,9 +4505,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/prettier": {
|
"node_modules/prettier": {
|
||||||
"version": "3.5.3",
|
"version": "3.4.2",
|
||||||
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
|
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz",
|
||||||
"integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
|
"integrity": "sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"bin": {
|
"bin": {
|
||||||
|
|
@ -4521,17 +4520,6 @@
|
||||||
"url": "https://github.com/prettier/prettier?sponsor=1"
|
"url": "https://github.com/prettier/prettier?sponsor=1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/prettier-plugin-svelte": {
|
|
||||||
"version": "3.3.3",
|
|
||||||
"resolved": "https://registry.npmjs.org/prettier-plugin-svelte/-/prettier-plugin-svelte-3.3.3.tgz",
|
|
||||||
"integrity": "sha512-yViK9zqQ+H2qZD1w/bH7W8i+bVfKrD8GIFjkFe4Thl6kCT9SlAsXVNmt3jCvQOCsnOhcvYgsoVlRV/Eu6x5nNw==",
|
|
||||||
"dev": true,
|
|
||||||
"license": "MIT",
|
|
||||||
"peerDependencies": {
|
|
||||||
"prettier": "^3.0.0",
|
|
||||||
"svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"node_modules/pretty-bytes": {
|
"node_modules/pretty-bytes": {
|
||||||
"version": "6.1.1",
|
"version": "6.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-6.1.1.tgz",
|
||||||
|
|
|
||||||
|
|
@ -13,8 +13,7 @@
|
||||||
"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",
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
@ -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,28 @@
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<header>
|
|
||||||
<button class="clickable back" onclick={() => back()}>←</button>
|
|
||||||
<h1>Va?</h1>
|
|
||||||
</header>
|
|
||||||
<main>
|
<main>
|
||||||
|
<div class="top-button">
|
||||||
|
<button class="clickable" on:click={() => back()}>
|
||||||
|
Tillbaka
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<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 +35,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 +62,32 @@
|
||||||
</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>
|
||||||
</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,21 +1,18 @@
|
||||||
<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="progress">
|
||||||
<div class="progress">
|
|
||||||
<h2>Styrketräning, 3d/v under 11 veckor</h2>
|
<h2>Styrketräning, 3d/v under 11 veckor</h2>
|
||||||
<div class="progress-row">
|
<div class="progress-row">
|
||||||
<progress class="gym" value={gymProgress} max={$gym.length}></progress>
|
<progress class="gym" value={gymProgress} max={$gym.length}></progress>
|
||||||
|
|
@ -24,8 +21,7 @@
|
||||||
</div>
|
</div>
|
||||||
<h2>Konditionsträning, 3d/v under 7 veckor</h2>
|
<h2>Konditionsträning, 3d/v under 7 veckor</h2>
|
||||||
<div class="progress-row">
|
<div class="progress-row">
|
||||||
<progress class="cardio" value={cardioProgress} max={$cardio.length}
|
<progress class="cardio" value={cardioProgress} max={$cardio.length}></progress>
|
||||||
></progress>
|
|
||||||
<i>{cardioProgress} / {$cardio.length}</i>
|
<i>{cardioProgress} / {$cardio.length}</i>
|
||||||
<button class="clickable cardio" onclick={() => navigate(2)}>+</button>
|
<button class="clickable cardio" onclick={() => navigate(2)}>+</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -35,31 +31,41 @@
|
||||||
<i>{dietProgress} / {dietTotal}</i>
|
<i>{dietProgress} / {dietTotal}</i>
|
||||||
<button class="clickable diet" onclick={() => navigate(3)}>+</button>
|
<button class="clickable diet" onclick={() => navigate(3)}>+</button>
|
||||||
</div>
|
</div>
|
||||||
<h2>Fasta, 3d/v under maj</h2>
|
</div>
|
||||||
<div class="progress-row">
|
<div class="top-button">
|
||||||
<progress class="fast" value={fastProgress} max={$fast.length}></progress>
|
<button class="clickable info" onclick={() => navigate(4)}>
|
||||||
<i>{fastProgress} / {$fast.length}</i>
|
Va?
|
||||||
<button class="clickable fast" onclick={() => navigate(5)}>+</button>
|
</button>
|
||||||
</div>
|
</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 {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 0.75em;
|
|
||||||
}
|
|
||||||
|
|
||||||
main {
|
main {
|
||||||
background: #222;
|
background: #222;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress {
|
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 {
|
&.cardio {
|
||||||
--pcolor: #5dc5f8;
|
--pcolor: #5dc5f8;
|
||||||
}
|
}
|
||||||
|
|
@ -71,77 +77,9 @@
|
||||||
&.gym {
|
&.gym {
|
||||||
--pcolor: #f62b5a;
|
--pcolor: #f62b5a;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.fast {
|
|
||||||
--pcolor: #ff00ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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 {
|
.progress {
|
||||||
--pcolor: #f00;
|
|
||||||
--h: 1.66rem;
|
|
||||||
--br: calc(var(--h) / 2);
|
|
||||||
--mg: 0.75rem;
|
--mg: 0.75rem;
|
||||||
--border: 3px solid #444;
|
--border: 3px solid #444;
|
||||||
margin: 2rem 0;
|
margin: 2rem 0;
|
||||||
|
|
@ -196,10 +134,6 @@
|
||||||
&.gym {
|
&.gym {
|
||||||
--btn-bg: #f62b5a;
|
--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;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
Loading…
Add table
Reference in a new issue