INIT: initial commit

Added some initial files, components, functionality

app/assets/styles/formInput.css

@@ -0,0 +1,46 @@
+.Input {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    flex: 25% 1 0;
+    border: 2px solid var(--color-blue);
+    border-radius: var(--radius-default);
+    overflow: hidden;
+    transition: var(--transition-default);
+    outline: 0 solid var(--color-white);
+
+    & label {
+        position: absolute;
+        left: .5rem;
+        font-size: 1.5em;
+        top: .7rem;
+        transition: var(--transition-default);
+    }
+
+    & input {
+        all: unset;
+        width: calc(100% - 1rem);
+        font-size: 1.2em;
+        padding: 1.3rem .5rem .5rem .5rem;
+        background: var(--color-white);
+
+        &[type="number"] {
+            text-align: right;
+        }
+    }
+
+    &:has(input:invalid) {
+        border-color: var(--color-red);
+        outline-width: 2px;
+    }
+
+    & input:focus,
+    & input:not(:placeholder-shown) {
+        & + label {
+            color: var(--color-main);
+            font-size: 1em;
+            top: .3rem;
+            right: .5rem;
+        }
+    }
+}

app/assets/styles/general.css

@@ -0,0 +1,27 @@
+:root {
+    --padding-default: 1rem;
+    --radius-default: 5px;
+    --transition-default: 150ms;
+
+    --color-white: white;
+    --color-red: #cc0001;
+    --color-blue-dark: #341f97;
+    --color-blue: #2e86de;
+    --color-grey: #c7c7c7;
+
+    --color-main: var(--color-blue);
+
+    --box-shadow-z2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+html,
+body {
+    height: 100%;
+    overflow-x: hidden;
+}

app/assets/styles/header.css

@@ -0,0 +1,52 @@
+.Header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--padding-default);
+    box-shadow: var(--box-shadow-z2);
+
+    & strong {
+        font-size: 2em;
+        & span {
+            color: var(--color-main);
+        }
+    }
+
+    & input[type="checkbox"] {
+        display: none;
+    }
+
+    & input[type="checkbox"]:checked + nav {
+        translate: 0;
+    }
+
+    & nav,
+    & ul {
+        display: flex;
+        flex-direction: column;
+        gap: 1em;
+    }
+
+    & nav {
+        position: fixed;
+        padding: var(--padding-default);
+        translate: 100% 0;
+        width: 100vw;
+        right: 0;
+        top: 0;
+        height: 100dvh;
+        transition: 150ms ease-in-out;
+        background: var(--color-white);
+        font-size: 2em;
+        align-items: end;
+        z-index: 100;
+    }
+
+    & ul {
+        width: 100%;
+        align-items: center;
+        & li {
+            list-style: none;
+        }
+    }
+}

app/assets/styles/priceCard.css

@@ -0,0 +1,16 @@
+.PriceCard {
+    padding: var(--padding-default);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+    background: var(--color-blue);
+    border-bottom: 1px solid var(--color-white);
+
+    & > .wrapper {
+        display: flex;
+        width: 100%;
+        gap: 1rem;
+        justify-content: space-between;
+    }
+}