add: iteration 1 finished

Finished simple calculator iteration

app/assets/styles/button.css

@@ -4,6 +4,7 @@
     --color: var(--color-white);
     --background-hover: var(--color-main-dark);
 
+    position: relative;
     display: flex;
     justify-content: center;
     align-items: center;

app/assets/styles/buttonGroup.css

@@ -0,0 +1,32 @@
+.ButtonGroup {
+    display: flex;
+
+    & button {
+        --color: var(--color-white-transparent);
+        --background: var(--color-main);
+        all: unset;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: .5rem;
+        padding: .5rem;
+        flex-grow: 1;
+        background: var(--background);
+        color: var(--color);
+        cursor: pointer;
+        transition: var(--transition-default);
+
+        &.active {
+            --color: var(--color-white);
+            --background: var(--color-main-dark);
+        }
+
+        &:first-child {
+            border-radius: var(--radius-default) 0 0 var(--radius-default);
+        }
+
+        &:last-child {
+            border-radius: 0 var(--radius-default) var(--radius-default) 0;
+        }
+    }
+}

app/assets/styles/footer.css

@@ -0,0 +1,40 @@
+.Footer {
+    background: var(--color-main-dark);
+    padding: 1rem;
+
+    & h4 {
+        color: var(--color-white);
+        text-align: center;
+        margin-bottom: 1rem;
+    }
+
+    & .bottom {
+        display: flex;
+        gap: 1rem;
+        justify-content: space-between;
+        color: var(--color-white-transparent);
+    }
+
+    & .socials {
+        font-size: 1.5rem;
+        justify-content: center;
+        margin-bottom: 2rem;
+    }
+
+    & .data-links {
+        justify-content: flex-end;
+        font-size: .8rem;
+    }
+
+    & ul {
+        list-style: none;
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+
+        & a {
+            color: var(--color-white);
+            text-decoration: none;
+        }
+    }
+}

app/assets/styles/general.css

@@ -4,16 +4,21 @@
     --transition-default: 150ms;
 
     --color-white: white;
+    --color-white-transparent: rgba(255, 255, 255, 0.67);
     --color-red: #cc0001;
     --color-blue-light: #61a7fd;
     --color-blue: #2e86de;
     --color-blue-dark: #1b4b7f;
     --color-grey: #c7c7c7;
 
+    --color-orange: #DE9C2F;
+
     --color-main: var(--color-blue);
     --color-main-light: var(--color-blue-light);
     --color-main-dark: var(--color-blue-dark);
 
+    --color-accent: var(--color-orange);
+
     --box-shadow-upper: 0 -3px 6px rgba(0,0,0,0.16), 0 -3px 6px rgba(0,0,0,0.23);
     --box-shadow-z2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
     --box-shadow-inset: inset 0 3px 6px rgba(0,0,0,0.16), inset 0 3px 6px rgba(0,0,0,0.23);
@@ -32,6 +37,43 @@ body {
     font-family: sans-serif;
 }
 
+.dot {
+    --size: 10px;
+    width: var(--size);
+    height: var(--size);
+    top: 5px;
+    right: 25%;
+    border-radius: 50%;
+    background-color: var(--color-accent);
+    display: inline-block;
+    margin-right: 0.5rem;
+    position: absolute;
+    box-shadow: var(--box-shadow-z2);
+    scale: 0;
+    transition: var(--transition-default);
+
+    &.visible {
+        scale: 1;
+        animation: pulse 1s infinite;
+    }
+}
+
+@keyframes pulse {
+    0% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
+    }
+    70% {
+        transform: scale(1);
+        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
+    }
+
+    100% {
+        transform: scale(0.95);
+        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+    }
+}
+
 .card {
     overflow: hidden;
     border-radius: var(--radius-default);
@@ -44,6 +86,10 @@ body {
     min-height: 100dvh;
 }
 
+.filter-bar {
+    margin-bottom: 1rem;
+}
+
 .pc-wrapper {
     gap: 1rem;
     margin-bottom: 1rem;