first commit

src/routes/+page.svelte

@@ -0,0 +1,159 @@
+<script>
+  import domtoimage from "dom-to-image";
+
+  let image = null;
+  let text = "";
+  let error = "";
+  let isDragging = false;
+  let btnDisabled = image != null;
+
+  // Проверка и загрузка изображения
+  async function validateAndLoadImage(file) {
+    error = "";
+    const img = new Image();
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+      img.src = e.target.result;
+      img.onload = () => {
+        if (img.width === 512 && img.height === 512) {
+          image = e.target.result;
+        } else {
+          error = "Изображение должно быть 512×512 пикселей";
+        }
+      };
+    };
+    reader.readAsDataURL(file);
+  }
+
+  // Обработка Drag and Drop
+  function handleDrop(e) {
+    e.preventDefault();
+    isDragging = false;
+    const file = e.dataTransfer.files[0];
+    if (file && file.type.startsWith("image/")) {
+      validateAndLoadImage(file);
+    }
+  }
+
+  function handleDragOver(e) {
+    e.preventDefault();
+    isDragging = true;
+  }
+
+  function handleDragLeave() {
+    isDragging = false;
+  }
+
+  async function saveImage() {
+    if (!image) return;
+
+    let node = document.getElementById("result");
+
+    // Убираем лишние стили
+    node.style.border = "none";
+    node.style.padding = "0";
+    node.style.margin = "0";
+    node.style.outline = "none";
+
+    domtoimage
+      .toPng(node, {
+        style: {
+          border: "none", // Убираем рамки
+          padding: "0", // Убираем отступы
+          margin: "0", // Убираем маргины
+          outline: "none", // Убираем outline
+        },
+      })
+      .then(function (dataUrl) {
+        var link = document.createElement("a");
+        link.download = "avatar.png";
+        link.href = dataUrl;
+        link.click(); // Скачать изображение
+      });
+  }
+</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}
+    style="cursor: pointer"
+    on:click={() => document.getElementById("fileInput").click()}
+  >
+    <!-- Состояние без изображения -->
+    {#if !image}
+      <div
+        class="absolute inset-0 flex flex-col items-center justify-center cursor-pointer"
+      >
+        <svg
+          class="w-16 h-16 text-gray-400 mb-3"
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            stroke-width="2"
+            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+          ></path>
+        </svg>
+        <p class="text-lg text-gray-500">Перетащите изображение 512×512</p>
+        <p class="text-sm text-gray-400 mt-1">или кликните для выбора</p>
+      </div>
+    {/if}
+
+    <!-- Загруженное изображение -->
+    {#if image}
+      <div id="result" class="relative">
+        <img src={image} class="object-cover" />
+        <!-- Текст -->
+        {#if text}
+          <div class="absolute bottom-0 left-0 right-0 py-5 bg-black/70">
+            <h1
+              class="text-center text-5xl font-bold text-transparent bg-clip-text bg-cover bg-right leading-17 tracking-tight"
+              style="background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAADICAYAAACeXFkKAAAACXBIWXMAAA7EAAAOxAGVKw4bAAADs0lEQVR42u3WTU7DMBCA0RkOySU4HScMi4bW/06zYcF7EhKV09SeptKXn1/fR0RExhEREZkR8ft/RFRrERFZrh3Pax7vna2d/+drrbsu6/d098ij20+5p/Faeab2/vvzjs7UXbc9UzO/6Zmae+RgfuU9Fmcq97Q/U3NdDuZ34UzlLG+dafLsrM5UP1d3zrQ+b/nsDJ+r7kzXfivP++fN30q37/1vpbp/c6bjuXL+Zdavu/XXTofr5wcexe67e+Xo3lm/zv7e1edmrPd5DnG+/viCp2vVPt6byWoet2eSq31enEnz3Q6v3c0ki/kuZjb9Xqf7zM3Mms/NzTkiNzO78Kw/93FvJvNn+f2ZrJ/lizNpvtuPAAD+HQEAAAIAABAAAIAAAAAEAAAgAAAAAQAACAAAQAAAAAIAABAAAIAAAAAEAAAgAAAAAQAACAAAQAAAAAIAAAQAACAAAAABAAAIAABAAAAAAgAAEAAAgAAAAAQAACAAAAABAAAIAABAAAAAAgAAEAAAgAAAAAQAAAgAAEAAAAACAAAQAACAAAAABAAAIAAAAAEAAAgAAEAAAAACAAAQAACAAAAABAAAIAAAAAEAAAgAABAAAIAAAAAEAAAgAAAAAQAACAAAQAAAAAIAABAAAIAAAAAEAAAgAAAAAQAACAAAQAAAAAIAABAAACAAAAABAAAIAABAAAAAAgAAEAAAgAAAAAQAACAAAAABAAAIAABAAAAAAgAAEAAAgAAAAAQAACAAAAABAAACAAAQAACAAAAABAAAIAAAAAEAAAgAAEAAAAACAAAQAACAAAAABAAAIAAAAAEAAAgAAEAAAAACAAAEAAAgAAAAAQAACAAAQAAAAAIAABAAAIAAAAAEAAAgAAAAAQAACAAAQAAAAAIAABAAAIAAAAAEAAAIAABAAAAAAgAAEAAAgAAAAAQAACAAAAABAAAIAABAAAAAAgAAEAAAgAAAAAQAACAAAAABAAAIAAAQAACAAAAABAAAIAAAAAEAAAgAAEAAAAACAAAQAACAAAAABAAAIAAAAAEAAAgAAEAAAAACAAAQAAAgAAAAAQAACAAAQAAAAAIAABAAAIAAAAAEAAAgAAAAAQAACAAAQAAAAAIAABAAAIAAAAAEAAAgAAAAAQAAAgAAEAAAgAAAAAQAACAAAAABAAAIAABAAAAAAgAAEAAAgAAAAAQAACAAAAABAAAIAABAAAAAAgAABAAAIAAAAAEAAAgAAEAAAAACAAAQAACAAAAA/tYPVhsMy8Jj9qoAAAAASUVORK5CYII=');"
+            >
+              {text}
+            </h1>
+          </div>
+        {/if}
+      </div>
+    {/if}
+
+    <input
+      id="fileInput"
+      type="file"
+      accept="image/*"
+      class="hidden"
+      on:change={(e) => validateAndLoadImage(e.target.files[0])}
+    />
+  </div>
+
+  <!-- Сообщение об ошибке -->
+  {#if error}
+    <p class="text-red-500 text-sm mb-4 text-center">{error}</p>
+  {/if}
+
+  <!-- Поле ввода текста -->
+  <div class="flex flex-col sm:flex-row gap-3 mb-4">
+    <input
+      type="text"
+      bind:value={text}
+      placeholder="Должность"
+      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}
+      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"
+    >
+      Сохранить 512×512
+    </button>
+  </div>
+
+  <p class="text-sm text-gray-500 text-center">
+    Поддерживаются только изображения размером 512×512 пикселей
+  </p>
+</div>