Initial commit

src/routes/+page.svelte

@@ -1,11 +1,13 @@
 <script>
   import domtoimage from "dom-to-image";
+  import Scropper from "$lib/Scropper.svelte";
 
   let image = null;
   let text = "";
   let error = "";
   let isDragging = false;
   let btnDisabled = image != null;
+  let isModalOpen = $state(false);
 
   // Проверка и загрузка изображения
   async function validateAndLoadImage(file) {
@@ -19,6 +21,7 @@
         if (img.width === 512 && img.height === 512) {
           image = e.target.result;
         } else {
+          isModalOpen = true;
           error = "Изображение должно быть 512×512 пикселей";
         }
       };
@@ -72,16 +75,25 @@
         link.click(); // Скачать изображение
       });
   }
+
+  const openModal = () => {
+    isModalOpen = true;
+  };
+
+  // Закрыть модальное окно
+  const closeModal = () => {
+    isModalOpen = false;
+  };
 </script>
 
 <div class="bg-white rounded-xl shadow-lg p-6">
   <div
     class="preview-container relative bg-gray-50 rounded-lg mb-4 overflow-hidden border-2 transition-colors h-[512px]"
-    on:drop={handleDrop}
-    on:dragover={handleDragOver}
-    on:dragleave={handleDragLeave}
+    ondrop={handleDrop}
+    ondragover={handleDragOver}
+    ondragleave={handleDragLeave}
     style="cursor: pointer"
-    on:click={() => document.getElementById("fileInput").click()}
+    onclick={() => document.getElementById("fileInput").click()}
   >
     <!-- Состояние без изображения -->
     {#if !image}
@@ -127,7 +139,7 @@
       type="file"
       accept="image/*"
       class="hidden"
-      on:change={(e) => validateAndLoadImage(e.target.files[0])}
+      onchange={(e) => validateAndLoadImage(e.target.files[0])}
     />
   </div>
 
@@ -145,7 +157,7 @@
       class="flex-grow px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
     />
     <button
-      on:click={saveImage}
+      onclick={saveImage}
       disabled={btnDisabled}
       class="px-6 py-3 bg-gradient-to-r from-purple-600 to-blue-600 text-white font-medium rounded-lg hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed"
     >
@@ -156,4 +168,26 @@
   <p class="text-sm text-gray-500 text-center">
     Поддерживаются только изображения размером 512×512 пикселей
   </p>
+
+  <!-- Модальное окно -->
+  {#if isModalOpen}
+    <div
+      class="fixed inset-0 bg-gray-900 bg-opacity-50 flex justify-center items-center z-50"
+    >
+      <div class="bg-white p-4 rounded shadow-lg w-[512px] h-[512px]">
+        <h2 class="text-xl font-semibold mb-4">Crop your image</h2>
+        {#if file}
+          <Scropper {file}></Scropper>
+        {/if}
+        <div class="mt-4 flex justify-between">
+          <button
+            class="px-4 py-2 bg-gray-500 text-white rounded hover:bg-gray-700"
+            onclick={closeModal}
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  {/if}
 </div>