140 lines
3.6 KiB
Svelte
140 lines
3.6 KiB
Svelte
<script lang="ts">
|
|
import { gym, cardio, diet, currentView } from "./store";
|
|
let gymProgress = $derived($gym.filter((c) => c.completed).length);
|
|
let cardioProgress = $derived($cardio.filter((c) => c.completed).length);
|
|
let dietProgress = $derived($diet.filter((c) => c.completed).length);
|
|
let dietTotal = $derived($diet.filter((c) => !c.excluded).length);
|
|
|
|
const navigate = (v: 0 | 1 | 2 | 3 | 4) => {
|
|
currentView.update((_) => v);
|
|
};
|
|
</script>
|
|
|
|
<main>
|
|
<h1>Dags att komma i form!</h1>
|
|
<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)}>
|
|
Va?
|
|
</button>
|
|
</div>
|
|
</main>
|
|
|
|
<style>
|
|
main {
|
|
background: #222;
|
|
color: #fff;
|
|
}
|
|
progress {
|
|
--pcolor: #f00;
|
|
--h: 1.5rem;
|
|
--br: calc(var(--h) / 2);
|
|
--webkit-appearance: none;
|
|
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>
|