From ebb7edcc8be642ada1d0b111b7d7e6cc3fc59ba6 Mon Sep 17 00:00:00 2001
From: OleSTEEP <krinkinoleg@gmail.com>
Date: Mon, 13 Oct 2025 16:59:16 +0300
Subject: [PATCH] frontend: .......help........

---
 .../src/lib/components/horisontal_bar.svelte  |  2 +-
 frontend/src/lib/components/image.svelte      | 30 +++++++++++++++----
 frontend/src/lib/css/global.css               |  3 ++
 frontend/src/lib/css/themes.css               |  4 +--
 4 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/components/horisontal_bar.svelte b/frontend/src/lib/components/horisontal_bar.svelte
index ad05f21..753a080 100644
--- a/frontend/src/lib/components/horisontal_bar.svelte
+++ b/frontend/src/lib/components/horisontal_bar.svelte
@@ -24,7 +24,7 @@
 </div>
 
 <style>
-    /* Вертикальный список */
+    /* Горизонтальный список */
     :global(.horisontal-bar) {
         display: flex;
         overflow-x: scroll;
diff --git a/frontend/src/lib/components/image.svelte b/frontend/src/lib/components/image.svelte
index df1a0c2..b1fd568 100644
--- a/frontend/src/lib/components/image.svelte
+++ b/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">
-    <AddButton type="image" bind:files={image}/>
+<div class="{direction} input img-div rounded">
+    <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>
diff --git a/frontend/src/lib/css/global.css b/frontend/src/lib/css/global.css
index 67d9e2e..f6e5d73 100644
--- a/frontend/src/lib/css/global.css
+++ b/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;
 }
 
diff --git a/frontend/src/lib/css/themes.css b/frontend/src/lib/css/themes.css
index 6636594..ddc0a8d 100644
--- a/frontend/src/lib/css/themes.css
+++ b/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;
     }