diff --git a/src/App.svelte b/src/App.svelte index a880ee2..ea9c222 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -3,15 +3,40 @@ import viteLogo from "/vite.svg"; import { navigate } from "./lib/common"; import { currentView } from "./lib/store"; - import FatPercentage from "./lib/FatPercentage.svelte"; + import ArmyFatPercentage from "./lib/ArmyFatPercentage.svelte"; + import NavyFatPercentage from "./lib/NavyFatPercentage.svelte"; + import OneRepMax from "./lib/OneRepMax.svelte"; -{#if $currentView === "fatcalc"} - +{#if $currentView === "armyfatcalc"} + +{/if} +{#if $currentView === "navyfatcalc"} + +{/if} +{#if $currentView === "onerepmax"} + {/if} {#if $currentView === "start"} - +
+ +
{/if} diff --git a/src/app.css b/src/app.css index 92455a0..395a0a3 100644 --- a/src/app.css +++ b/src/app.css @@ -17,6 +17,19 @@ body { margin: 0; } +button { + border: 5px solid crimson; + background-color: transparent; + border-radius: 0; + color: inherit; + + &:hover, + &:focus { + border-color: #fff; + background-color: rgba(255, 255, 255, 0.1); + } +} + header { background-color: crimson; } @@ -26,4 +39,65 @@ h2, h2 { font-size: 1em; margin: 0; + text-wrap: balance; +} + +main { + min-width: 100vw; + min-height: 100vh; + display: grid; + gap: 1em; + padding: 1em; + box-sizing: border-box; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(7, 1fr); +} + +output { + background: rgba(0, 0, 0, 0.25); + display: grid; + grid-column: 1 / 4; + grid-row: 2 / 4; + grid-template: subgrid / subgrid; + font-size: 2em; + + > span { + grid-column: 1 / 6; + grid-row: 1 / 2; + text-align: right; + + &::before { + content: "="; + color: #888; + } + + &::after { + content: "%"; + color: #888; + } + } +} + +form { + background: rgba(255, 255, 255, 0.25); + display: grid; + grid-column: 1 / 4; + grid-row: 4 / 8; + grid-template: subgrid / subgrid; +} + +input { + max-width: 4em; + display: block; +} + +header { + display: grid; + grid-column: 1 / 4; + grid-row: 1 / 1; + grid-template: subgrid / subgrid; +} + +h1 { + grid-column: 2 / 4; } diff --git a/src/lib/FatPercentage.svelte b/src/lib/ArmyFatPercentage.svelte similarity index 72% rename from src/lib/FatPercentage.svelte rename to src/lib/ArmyFatPercentage.svelte index 12e264e..c85056d 100644 --- a/src/lib/FatPercentage.svelte +++ b/src/lib/ArmyFatPercentage.svelte @@ -43,7 +43,7 @@ -

Kroppsfettkalkylator

+

Kroppsfettkalkylator, Army

{#if fatPercentage > 0} @@ -123,68 +123,8 @@ diff --git a/src/lib/NavyFatPercentage.svelte b/src/lib/NavyFatPercentage.svelte new file mode 100644 index 0000000..ff2a9ff --- /dev/null +++ b/src/lib/NavyFatPercentage.svelte @@ -0,0 +1,136 @@ + + +
+
+ + + +

Kroppsfettkalkylator, Navy

+
+ + {#if fatPercentage > 0} + {Math.round(fatPercentage * 100) / 100} + {/if} + +
+
+ + +
+ + + {#if gender == "female"} + + {/if} + +
+
+ + diff --git a/src/lib/OneRepMax.svelte b/src/lib/OneRepMax.svelte new file mode 100644 index 0000000..43aba57 --- /dev/null +++ b/src/lib/OneRepMax.svelte @@ -0,0 +1,56 @@ + + +
+
+ + + +

1RM

+
+ + {#if oneRepMax > 0} + {Math.round(oneRepMax * 100) / 100} + {/if} + +
+ + +
+
+ + diff --git a/src/lib/common.ts b/src/lib/common.ts index 9085240..74a557c 100644 --- a/src/lib/common.ts +++ b/src/lib/common.ts @@ -1,4 +1,5 @@ import { currentView } from "./store"; -export const navigate = (page: "start" | "fatcalc") => - currentView.update((_) => page); +export const navigate = ( + page: "start" | "armyfatcalc" | "navyfatcalc" | "onerepmax", +) => currentView.update((_) => page);