backend: initial

frontend/src/lib/components/calendar.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+    let current: Number = 9;
+
+    function set_day(day: Number) {
+        current = day;
+        return null;
+    }
+</script>
+
+<div class="calendar rounded">
+    <div class="month">
+        <ul>
+            <li class="prev">&#10094;</li>
+            <li class="next">&#10095;</li>
+            <li>Август 2025</li>
+        </ul>
+    </div>
+    <ul class="weekdays">
+        {#each ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"] as weekday}
+            <li>{weekday}</li>
+        {/each}
+    </ul>
+    <ul class="days">
+        {#each [...Array(31).keys()] as day}
+            <li>
+                {#if current == day+1}
+                    <button class="active">{day+1}</button>
+                {:else}
+                    <button class="nonactive" onclick={set_day(day+1)}>{day+1}</button>
+                {/if}
+            </li>
+        {/each}
+    </ul>
+</div>
+
+<style>
+    ul {list-style-type: none;}
+
+    .calendar * {
+        margin: 0;
+    }
+
+    .month {
+        width: 100%;
+        text-align: center;
+        align-content: center;
+    }
+
+    .month ul {
+        margin: 0;
+        padding: 0.5rem;
+    }
+
+    .month ul li {
+        display: inline;
+        text-transform: uppercase;
+        letter-spacing: 3px;
+    }
+
+    .month .prev {
+        float: inline-start;
+        cursor: pointer;
+    }
+
+    .month .next {
+        float: inline-end;
+        cursor: pointer;
+    }
+
+    .weekdays {
+        padding: 10px 0 0 0;
+    }
+
+    .weekdays li {
+        display: inline-block;
+        width: 13.6%;
+        text-align: center;
+    }
+
+    .days {
+        padding: 10px 0;
+        margin: 0;
+    }
+
+    .days li {
+        list-style-type: none;
+        display: inline-block;
+        width: 13.6%;
+        text-align: center;
+        margin-bottom: 5px;
+        font-size: smaller;
+        cursor: pointer;
+    }
+
+    .days li .active {
+        height: 2em;
+        padding: 5px;
+        border-radius: 30%;
+        aspect-ratio: 1/1;
+    }
+
+    .days li .nonactive {
+        height: 2em;
+        padding: 5px;
+        background: none;
+        aspect-ratio: 1/1;
+    }
+
+    @media screen and (max-width: 720px) {
+        .weekdays li, .days li {width: 13.1%;}
+    }
+
+    @media screen and (max-width: 420px) {
+        .weekdays li, .days li {width: 12.5%;}
+        .days li .active {padding: 2px;}
+        .days li .nonactive {padding: 2px;}
+    }
+
+    @media screen and (max-width: 290px) {
+        .weekdays li, .days li {width: 12.2%;}
+    }
+</style>