backend: initial

frontend/src/lib/components/add_button.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+    const { handler } = $props();
+</script>
+
+<button class="plus round" onclick={handler}>+</button>

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>

frontend/src/lib/components/create_button.svelte

@@ -0,0 +1,8 @@
+<!-- Кнопка "Создать" -->
+<script lang="ts">
+    let { onclick } = $props();
+</script>
+
+<div class="create">
+    <button class="rounded" id="create" {onclick}>Создать</button>
+</div>

frontend/src/lib/components/horisontal_bar.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import HorisontalItem from "./horisontal_item.svelte";
+    import AddButton from "./add_button.svelte";
+    import Image from "./image.svelte";
+
+    let { value = $bindable([]), label = "", type = "text" } = $props();
+    let items: string[] = $state([]);
+</script>
+
+<div class="horisontal-bar {type == "text" ? "input" : ""} rounded">
+    <p>{label}</p>
+    {#if type == "text"}
+        {#each items as item}
+            <HorisontalItem text={item}/>
+        {/each}
+        <AddButton handler={() => {
+            items.push("test");
+            value = items;
+        }} />
+    {:else if type == "image"}
+        <Image />
+    {/if}
+    
+</div>

frontend/src/lib/components/horisontal_item.svelte

@@ -0,0 +1,7 @@
+<script>
+    let { text } = $props();
+</script>
+
+<div class="horisontal-item rounded">
+    {text}
+</div>

frontend/src/lib/components/image.svelte

@@ -0,0 +1,11 @@
+<script>
+    import AddButton from "./add_button.svelte";
+    let { direction = "horisontal", input = true } = $props();
+</script>
+
+<div class="{direction} {input ? "input" : ""} image rounded">
+    <AddButton handler={() => {
+        // addImage(plus.id, this.id);
+        // document.getElementById("screenshots").appendChild(new HorisontalImage().html);
+    }}/>
+</div>

frontend/src/lib/components/img_button.svelte

@@ -0,0 +1,7 @@
+<script>
+    let { style, image, name } = $props();
+</script>
+
+<div class="imgbutton {style}">
+    <img src={image} alt={name}>
+</div>

frontend/src/lib/components/queue_item.svelte

@@ -0,0 +1,15 @@
+<script>
+    import { makeid } from "$lib/functions.js"
+    import edit_btn from '$lib/assets/edit.svg';
+    import remove_btn from '$lib/assets/delete.svg';
+    import ImgButton from "./img_button.svelte";
+    let id = makeid(8);
+    let { date, name } = $props();
+</script>
+
+<div class="queue-item horisontal-bar rounded">
+    <p>{date}</p>
+    <p class="ellipsis">{name}</p>
+    <ImgButton style="edit" name="Изменить" image={edit_btn}/>
+    <ImgButton style="remove" name="Удалить" image={remove_btn}/>
+</div>