frontend: .......help........

frontend/src/lib/components/horisontal_bar.svelte

@@ -24,7 +24,7 @@
 </div>
 
 <style>
-    /* Вертикальный список */
+    /* Горизонтальный список */
     :global(.horisontal-bar) {
         display: flex;
         overflow-x: scroll;

frontend/src/lib/components/image.svelte

@@ -1,32 +1,52 @@
 <script>
     import AddButton from "./add_button.svelte";
-    let { direction = "horisontal", image = $bindable() } = $props();
+    let { direction = "horisontal" } = $props();
+    let images = $state();
+    let image = $state();
 
     $effect(() => {
-		console.log(image);
+        if (images.length > 0) {
+            const reader = new FileReader();
+            reader.addEventListener("load", function () {
+                image.setAttribute("src", reader.result);
+            });
+            reader.readAsDataURL(images[0]);
+        }
 	});
 </script>
 
-<div class="{direction} input image rounded">
+<div class="{direction} input img-div rounded">
-    <AddButton type="image" bind:files={image}/>
+    <AddButton type="image" bind:files={images}/>
+    <img bind:this={image} src="" alt="">
 </div>
 
 <style>
     /* Вертикальное изображение */
     .vertical {
         aspect-ratio: 11 / 16;
+        padding: 0;
     }
 
     /* Горизонтальное изображение */
     .horisontal {
         aspect-ratio: 16 / 11;
+        padding: 0;
     }
 
-    :global(.image) {
+    :global(.img-div) {
         margin-left: auto;
         margin-right: auto;
         align-content: center;
         text-align: center;
         width: 11rem;
     }
+
+    :global(.img-div) img {
+        object-fit: cover;
+        width: 100%;
+    }
+
+    :global(.img-div) :global(.plus) {
+        z-index: 2;
+    }
 </style>

frontend/src/lib/css/global.css

@@ -66,6 +66,9 @@ button {
 .horisontal-bar * {
     margin: 0;
     margin-right: 0.5rem;
+}
+
+.horisontal-bar p {
     align-content: center;
 }
 

frontend/src/lib/css/themes.css

@@ -16,7 +16,7 @@
         color: black;
     }
 
-    .cover .image {
+    .cover .img-div {
         background-color: white;
     }
 
@@ -43,7 +43,7 @@
         color: white;
     }
 
-    .cover .image {
+    .cover .img-div {
         background-color: #131A22;
     }