From 9a0a0a9e12d5437caed768bd8bf6fedbd0560bec Mon Sep 17 00:00:00 2001
From: Serverus Snap <serverussnap@outlook.com>
Date: Tue, 26 Aug 2025 23:09:07 +0300
Subject: [PATCH] del test directoiry

---
 src/routes/+page.svelte      |  11 +-
 src/routes/test/+page.svelte | 277 -----------------------------------
 2 files changed, 6 insertions(+), 282 deletions(-)
 delete mode 100644 src/routes/test/+page.svelte

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 54817cb..affea8d 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import domtoimage from "dom-to-image";
   import Cropper, { type OnCropCompleteEvent } from "svelte-easy-crop";
+  import gradiImage from "$lib/images/image.png"
 
   let crop = { x: 0, y: 0 };
   let zoom = 1;
@@ -172,6 +173,10 @@
                 <clipPath id="circle-clip">
                   <circle cx="256" cy="256" r="256" />
                 </clipPath>
+
+                <pattern id="imagePattern" patternUnits="userSpaceOnUse" width="512" height="512" >
+                  <image href={gradiImage} width="512" height="512"/>
+                </pattern>
               </defs>
               <image href={image} width="512" height="512" clip-path="url(#circle-clip)" />
               <!-- Текст -->
@@ -181,10 +186,6 @@
                   d="M 256,26 a 230,230 0 0,0 0,460 a 230,230 0 0,0 0,-460"
                   fill="none"
                 />
-                <linearGradient id="text-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
-                  <stop offset="0%" style="stop-color:rgb(124, 58, 237);stop-opacity:1" />
-                  <stop offset="100%" style="stop-color:rgb(37, 99, 235);stop-opacity:1" />
-                </linearGradient>
     
                 <text class="circle-text-bg">
                   <textPath href="#text-path" startOffset="50%" text-anchor="middle">{text}</textPath>
@@ -264,7 +265,7 @@
   }
 
   .circle-text {
-    fill: url(#text-gradient);
+    fill: url(#imagePattern);
     stroke: #000;
     stroke-width: 1.5px;
     paint-order: stroke;
diff --git a/src/routes/test/+page.svelte b/src/routes/test/+page.svelte
deleted file mode 100644
index affea8d..0000000
--- a/src/routes/test/+page.svelte
+++ /dev/null
@@ -1,277 +0,0 @@
-<script lang="ts">
-  import domtoimage from "dom-to-image";
-  import Cropper, { type OnCropCompleteEvent } from "svelte-easy-crop";
-  import gradiImage from "$lib/images/image.png"
-
-  let crop = { x: 0, y: 0 };
-  let zoom = 1;
-  let cropSize = { width: 512, height: 512 };
-  let maxZoom = 10;
-  let minZoom = 1;
-  let restrictPosition = true;
-  let showGrid = false;
-  let croppedImage = null;
-
-  let image: string;
-  let incorrectImage: string;
-  let text: string = "";
-  let error: string = "";
-  let isDragging: boolean = false;
-  let isModalOpen: boolean = false;
-  let fontSize: number = 2.5;
-
-  async function validateAndLoadImage(file: File): Promise<void> {
-    error = "";
-    const img = new Image();
-    const reader = new FileReader();
-
-    reader.onload = (e: ProgressEvent<FileReader>) => {
-      img.src = e.target?.result as string;
-      img.onload = () => {
-        if (img.width === 512 && img.height === 512) {
-          image = e.target?.result as string;
-        } else {
-          incorrectImage = e.target?.result as string;
-          isModalOpen = true;
-        }
-      };
-    };
-    reader.readAsDataURL(file);
-  }
-
-  function handleDrop(e: DragEvent): void {
-    e.preventDefault();
-    isDragging = false;
-    const file = (e.dataTransfer as DataTransfer).files[0];
-    if (file && file.type.startsWith("image/")) {
-      validateAndLoadImage(file);
-    }
-  }
-
-  function handleDragOver(e: DragEvent): void {
-    e.preventDefault();
-    isDragging = true;
-  }
-
-  function handleDragLeave(): void {
-    isDragging = false;
-  }
-
-  async function saveImage(): Promise<void> {
-    if (!image) return;
-
-    let node = document.getElementById("result");
-
-    if (node) {
-      domtoimage
-        .toPng(node, {
-          style: {
-            border: "none",
-            padding: "0",
-            margin: "0",
-            outline: "none",
-          },
-        })
-        .then((dataUrl: string) => {
-          var link = document.createElement("a");
-          link.download = "avatar.png";
-          link.href = dataUrl;
-          link.click();
-        });
-    }
-  }
-
-  function cropImage(x: number, y: number, width: number, height: number) {
-    const img = new Image();
-    img.src = incorrectImage;
-
-    img.onload = () => {
-      const canvas = document.createElement("canvas");
-      const ctx = canvas.getContext("2d");
-      canvas.width = 512;
-      canvas.height = 512;
-
-      ctx.drawImage(img, x, y, width, height, 0, 0, 512, 512);
-
-      croppedImage = canvas.toDataURL("image/png");
-    };
-  }
-
-  const handleCropComplete = (event: OnCropCompleteEvent) => {
-    const { x, y, width, height } = event.pixels;
-    cropImage(x, y, width, height);
-  };
-
-  function saveToMainImage() {
-    image = croppedImage;
-    isModalOpen = false;
-  }
-</script>
-
-<div>
-  {#if isModalOpen}
-    <div class="bg-white rounded-xl shadow-lg p-6">
-      <div class="flex flex-col">
-        <div class="h-[700px] w-[700px] relative rounded-2xl">
-          <Cropper
-            image={incorrectImage}
-            {cropSize}
-            {maxZoom}
-            {minZoom}
-            {restrictPosition}
-            {showGrid}
-            bind:crop
-            bind:zoom
-            oncropcomplete={handleCropComplete}
-          />
-        </div>
-
-        <button
-          onclick={saveToMainImage}
-          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 mt-3"
-        >
-          Обрезать
-        </button>
-      </div>
-    </div>
-  {:else}
-    <div class="bg-white rounded-xl shadow-lg p-6">
-      <div
-        class="preview-container relative bg-gray-50 mb-4 overflow-hidden border-2 transition-colors h-[512px] w-[512px] rounded-full"
-        ondrop={handleDrop}
-        ondragover={handleDragOver}
-        ondragleave={handleDragLeave}
-        style="cursor: pointer"
-        onclick={() => 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">Перетащите изображение</p>
-            <p class="text-sm text-gray-400 mt-1">или кликните для выбора</p>
-          </div>
-        {/if}
-
-        <!-- Загруженное изображение -->
-        {#if image}
-          <div id="result" class="w-full h-full">
-            <svg viewBox="0 0 512 512" class="w-full h-full" style="--font-size: {fontSize}rem">
-              <defs>
-                <clipPath id="circle-clip">
-                  <circle cx="256" cy="256" r="256" />
-                </clipPath>
-
-                <pattern id="imagePattern" patternUnits="userSpaceOnUse" width="512" height="512" >
-                  <image href={gradiImage} width="512" height="512"/>
-                </pattern>
-              </defs>
-              <image href={image} width="512" height="512" clip-path="url(#circle-clip)" />
-              <!-- Текст -->
-            {#if text}
-                <path
-                  id="text-path"
-                  d="M 256,26 a 230,230 0 0,0 0,460 a 230,230 0 0,0 0,-460"
-                  fill="none"
-                />
-    
-                <text class="circle-text-bg">
-                  <textPath href="#text-path" startOffset="50%" text-anchor="middle">{text}</textPath>
-                </text>
-
-                <text class="circle-text">
-                  <textPath href="#text-path" startOffset="50%" text-anchor="middle">{text}</textPath>
-                </text>
-            {/if}
-            </svg>
-          </div>
-        {/if}
-
-        <input
-          id="fileInput"
-          type="file"
-          accept="image/*"
-          class="hidden"
-          onchange={(e) =>
-            validateAndLoadImage((e.target as HTMLInputElement).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
-          onclick={saveImage}
-          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>
-
-      <div class="flex items-center gap-3 mb-4">
-        <label for="font-size-slider" class="text-sm text-gray-600 whitespace-nowrap"
-          >Размер текста:</label
-        >
-        <input
-          id="font-size-slider"
-          type="range"
-          min="1.5"
-          max="7"
-          step="0.1"
-          bind:value={fontSize}
-          class="w-full"
-        />
-        <div class="min-w-[25px] min-h-[25px]">{fontSize}</div>
-      </div>
-
-      <p class="text-sm text-gray-500 text-center">
-        Размер изображения 512×512 пикселей
-      </p>
-    </div>
-  {/if}
-</div>
-
-<style>
-  .circle-text-bg {
-    fill: none;
-    stroke: rgb(0, 0, 0, 0.7);
-    stroke-width: 5px;
-    stroke-linejoin:round;
-    stroke-linecap:round;
-    paint-order: stroke;
-    font-size: var(--font-size);
-    font-weight: 700;
-    letter-spacing: 6px;
-  }
-
-  .circle-text {
-    fill: url(#imagePattern);
-    stroke: #000;
-    stroke-width: 1.5px;
-    paint-order: stroke;
-    letter-spacing: 6px;
-    font-size: var(--font-size);
-    font-weight: 700;
-  }
-
-</style>