Update index.html

index.html

@@ -6,7 +6,7 @@
     <title>Swaga Icon Maker PRO</title>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@900&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap" rel="stylesheet">
 
     <style>
         body {
@@ -20,7 +20,7 @@
             min-height: 100vh;
             margin: 0;
             padding: 20px;
-            user-select: none; /* Чтобы текст не выделялся при драге */
+            user-select: none;
         }
 
         h1 { margin-bottom: 10px; }
@@ -42,7 +42,6 @@
             border-radius: 20px;
             box-shadow: 0 10px 30px rgba(0,0,0,0.5);
             background-color: #E13839;
-            /* Курсор управляется через JS */
         }
 
         .controls {
@@ -57,6 +56,11 @@
             overflow-y: auto;
         }
 
+        /* Скроллбар для контролов */
+        .controls::-webkit-scrollbar { width: 8px; }
+        .controls::-webkit-scrollbar-track { background: #222; border-radius: 4px; }
+        .controls::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
+
         .section-title {
             font-size: 12px;
             text-transform: uppercase;
@@ -65,6 +69,7 @@
             border-bottom: 1px solid #444;
             padding-bottom: 5px;
             margin-top: 10px;
+            font-weight: 900;
         }
 
         .drop-zone {
@@ -140,6 +145,106 @@
             text-align: center;
             margin-top: 5px;
         }
+
+        /* Стили для ссылки Disclaimer */
+        .disclaimer-link {
+            text-align: center;
+            margin-top: 10px;
+        }
+        
+        .disclaimer-link span {
+            color: #555;
+            font-size: 11px;
+            cursor: pointer;
+            text-decoration: underline;
+            transition: color 0.2s;
+        }
+
+        .disclaimer-link span:hover {
+            color: #999;
+        }
+
+        /* Стили модального окна */
+        .modal-overlay {
+            display: none; /* Скрыто по умолчанию */
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            backdrop-filter: blur(5px);
+            z-index: 1000;
+            align-items: center;
+            justify-content: center;
+            opacity: 0;
+            transition: opacity 0.3s ease;
+        }
+
+        .modal-overlay.active {
+            opacity: 1;
+        }
+
+        .modal-content {
+            background: #2d2d2d;
+            width: 90%;
+            max-width: 600px;
+            padding: 30px;
+            border-radius: 20px;
+            border: 1px solid #444;
+            box-shadow: 0 20px 60px rgba(0,0,0,0.7);
+            position: relative;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .modal-content h2 {
+            margin-top: 0;
+            color: #FFACC7;
+            font-size: 22px;
+            border-bottom: 1px solid #444;
+            padding-bottom: 15px;
+            margin-bottom: 15px;
+        }
+
+        .legal-text {
+            font-size: 13px;
+            color: #ccc;
+            line-height: 1.6;
+            max-height: 60vh;
+            overflow-y: auto;
+            padding-right: 10px;
+            user-select: text; /* Чтобы можно было читать и выделять текст */
+            text-align: justify;
+        }
+
+        .legal-text p {
+            margin-bottom: 15px;
+        }
+
+        .legal-text strong {
+            color: white;
+        }
+
+        /* Скроллбар внутри модалки */
+        .legal-text::-webkit-scrollbar { width: 6px; }
+        .legal-text::-webkit-scrollbar-track { background: #222; }
+        .legal-text::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }
+
+        .close-btn {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            background: transparent;
+            color: #777;
+            font-size: 24px;
+            width: auto;
+            padding: 0;
+            line-height: 1;
+        }
+        
+        .close-btn:hover { color: white; }
+
     </style>
 </head>
 <body>
@@ -191,6 +296,36 @@
             <input type="file" id="stickerInput" class="hidden-input" accept="image/png, image/jpeg" multiple>
 
             <button class="btn-primary" id="downloadBtn">Скачать PNG</button>
+
+            <!-- Кнопка вызова Disclaimer -->
+            <div class="disclaimer-link">
+                <span id="openDisclaimerBtn">Отказ от ответственности</span>
+            </div>
+        </div>
+    </div>
+
+    <!-- Модальное окно -->
+    <div class="modal-overlay" id="modalOverlay">
+        <div class="modal-content">
+            <button class="close-btn" id="closeModalBtn">&times;</button>
+            <h2>Отказ от ответственности (Disclaimer)</h2>
+            <div class="legal-text">
+                <p><strong>1. Общие положения</strong><br>
+                Данный веб-инструмент ("Swaga Icon Maker PRO") предоставляется на условиях «как есть» (as is). Разработчик и владельцы ресурса не несут ответственности за любые прямые или косвенные убытки, возникшие в результате использования или невозможности использования данного сервиса.</p>
+
+                <p><strong>2. Пользовательский контент и Авторские права</strong><br>
+                Весь функционал сайта выполняется исключительно на стороне клиента (в вашем браузере). Мы не храним, не проверяем и не модерируем изображения, загружаемые пользователем.
+                Пользователь несет полную и единоличную ответственность за соблюдение законодательства об авторском праве и смежных правах при использовании загружаемых материалов (SVG, PNG, JPEG и других форматов). Загружая изображения, вы подтверждаете, что обладаете необходимыми правами на их использование и модификацию.</p>
+
+                <p><strong>3. Созданные материалы</strong><br>
+                Изображения, созданные с помощью данного инструмента, являются результатом творческой деятельности пользователя. Создатель сайта не претендует на права собственности созданных вами иконок, но также не несет ответственности за их дальнейшее использование, распространение или законность содержания.</p>
+
+                <p><strong>4. Технические ограничения</strong><br>
+                Разработчик не гарантирует бесперебойную работу сайта, отсутствие программных ошибок или полную совместимость с конкретными устройствами и браузерами.</p>
+
+                <p>Используя данный сайт, вы выражаете свое полное согласие с вышеуказанными условиями.</p>
+            </div>
+            <button class="btn-primary" id="acceptBtn" style="margin-top: 20px;">Всё понятно</button>
         </div>
     </div>
 
@@ -242,6 +377,35 @@
             drawAll();
         };
 
+        // ==========================================
+        // ЛОГИКА МОДАЛЬНОГО ОКНА
+        // ==========================================
+        const modalOverlay = document.getElementById('modalOverlay');
+        const openDisclaimerBtn = document.getElementById('openDisclaimerBtn');
+        const closeModalBtn = document.getElementById('closeModalBtn');
+        const acceptBtn = document.getElementById('acceptBtn');
+
+        function openModal() {
+            modalOverlay.style.display = 'flex';
+            // Небольшая задержка для анимации opacity
+            setTimeout(() => modalOverlay.classList.add('active'), 10);
+        }
+
+        function closeModal() {
+            modalOverlay.classList.remove('active');
+            setTimeout(() => modalOverlay.style.display = 'none', 300);
+        }
+
+        openDisclaimerBtn.addEventListener('click', openModal);
+        closeModalBtn.addEventListener('click', closeModal);
+        acceptBtn.addEventListener('click', closeModal);
+        
+        // Закрытие по клику вне окна
+        modalOverlay.addEventListener('click', (e) => {
+            if (e.target === modalOverlay) closeModal();
+        });
+
+
         // ==========================================
         // 1. ЛОГИКА БАЗОВОГО СЛОЯ (SVG/TEXT)
         // ==========================================
@@ -319,11 +483,10 @@
                 };
                 reader.readAsDataURL(file);
             });
-            stickerInput.value = ''; // сброс, чтобы можно было добавить тот же файл
+            stickerInput.value = ''; 
         });
 
         function addSticker(img) {
-            // Начальный размер: подгоняем под 1/3 канваса, но сохраняем пропорции
             const maxSize = 200;
             let w = img.width;
             let h = img.height;
@@ -339,10 +502,9 @@
                 y: canvas.height / 2,
                 width: w,
                 height: h,
-                rotation: 0 // в радианах
+                rotation: 0 
             });
             
-            // Выбираем только что добавленный
             selectedStickerIndex = stickers.length - 1;
             drawAll();
         }
@@ -350,7 +512,6 @@
         // Удаление по кнопке Delete
         window.addEventListener('keydown', (e) => {
             if ((e.key === 'Delete' || e.key === 'Backspace') && selectedStickerIndex !== -1) {
-                // Не удаляем если фокус в инпуте текста
                 if (document.activeElement === textInput) return;
                 
                 stickers.splice(selectedStickerIndex, 1);
@@ -385,7 +546,7 @@
                 ctx.restore();
             });
 
-            // 4. Интерфейс управления (если выбран стикер и мы не скачиваем файл)
+            // 4. Интерфейс управления
             if (selectedStickerIndex !== -1) {
                 drawControls(stickers[selectedStickerIndex]);
             }
@@ -450,14 +611,14 @@
             ctx.lineTo(0, -halfH - 25);
             ctx.stroke();
 
-            // Ручка вращения (сверху)
+            // Ручка вращения
             ctx.fillStyle = '#E13839';
             ctx.beginPath();
             ctx.arc(0, -halfH - 25, 8, 0, Math.PI * 2);
             ctx.fill();
             ctx.stroke();
 
-            // Ручка изменения размера (справа-снизу)
+            // Ручка изменения размера
             ctx.beginPath();
             ctx.arc(halfW, halfH, 8, 0, Math.PI * 2);
             ctx.fill();
@@ -481,12 +642,9 @@
             };
         }
 
-        // Функция проверки попадания точки в повернутый прямоугольник
         function isPointInRotatedRect(x, y, sticker) {
-            // Переводим координаты мыши в систему координат стикера
             const dx = x - sticker.x;
             const dy = y - sticker.y;
-            // Поворачиваем точку обратно
             const rotatedX = dx * Math.cos(-sticker.rotation) - dy * Math.sin(-sticker.rotation);
             const rotatedY = dx * Math.sin(-sticker.rotation) + dy * Math.cos(-sticker.rotation);
 
@@ -498,8 +656,6 @@
         }
 
         function getHandleHit(x, y, sticker) {
-            // Проверка попадания в ручки управления
-            // Аналогично, работаем в локальной системе координат
             const dx = x - sticker.x;
             const dy = y - sticker.y;
             const rx = dx * Math.cos(-sticker.rotation) - dy * Math.sin(-sticker.rotation);
@@ -507,16 +663,12 @@
 
             const halfW = sticker.width / 2;
             const halfH = sticker.height / 2;
-            const handleRadius = 15; // Чуть больше визуального радиуса для удобства
+            const handleRadius = 15; 
 
-            // Rotate Handle (Top center + offset)
-            // Координаты ручки вращения в локальной системе: (0, -halfH - 25)
             const rotHandleX = 0;
             const rotHandleY = -halfH - 25;
             if (Math.hypot(rx - rotHandleX, ry - rotHandleY) < handleRadius) return 'rotate';
 
-            // Resize Handle (Bottom right)
-            // Координаты: (halfW, halfH)
             if (Math.hypot(rx - halfW, ry - halfH) < handleRadius) return 'resize';
 
             return null;
@@ -525,29 +677,24 @@
         canvas.addEventListener('mousedown', (e) => {
             const {x, y} = getMousePos(e);
             
-            // 1. Проверяем, кликнули ли мы по ручкам текущего выделенного стикера
             if (selectedStickerIndex !== -1) {
                 const sticker = stickers[selectedStickerIndex];
                 const handle = getHandleHit(x, y, sticker);
                 
                 if (handle === 'rotate') {
                     isRotating = true;
-                    // Угол между центром стикера и мышью
                     initialRotation = Math.atan2(y - sticker.y, x - sticker.x) - sticker.rotation;
                     return;
                 }
                 
                 if (handle === 'resize') {
                     isResizing = true;
-                    // Дистанция от центра
                     initialDistance = Math.hypot(x - sticker.x, y - sticker.y);
-                    initialScale = sticker.width; // запоминаем текущую ширину как базу
+                    initialScale = sticker.width; 
                     return;
                 }
             }
 
-            // 2. Проверяем клик по телу стикера (выбор)
-            // Идем с конца (сверху), чтобы выбрать верхний
             let clickedIndex = -1;
             for (let i = stickers.length - 1; i >= 0; i--) {
                 if (isPointInRotatedRect(x, y, stickers[i])) {
@@ -558,8 +705,6 @@
 
             if (clickedIndex !== -1) {
                 selectedStickerIndex = clickedIndex;
-                // Перемещаем выбранный стикер в конец массива (поднимаем наверх)
-                // Но только если это не тот же самый (чтобы не дергался)
                 if (clickedIndex !== stickers.length - 1) {
                    const movedSticker = stickers.splice(clickedIndex, 1)[0];
                    stickers.push(movedSticker);
@@ -571,7 +716,6 @@
                 startY = y;
                 drawAll();
             } else {
-                // Клик в пустоту - снимаем выделение
                 selectedStickerIndex = -1;
                 drawAll();
             }
@@ -581,9 +725,8 @@
             const {x, y} = getMousePos(e);
             const sticker = selectedStickerIndex !== -1 ? stickers[selectedStickerIndex] : null;
 
-            // Смена курсора
             let cursor = 'default';
-            if (isRotating) cursor = 'grabbing'; // 'alias' для вращения
+            if (isRotating) cursor = 'grabbing'; 
             else if (isResizing) cursor = 'nwse-resize';
             else if (sticker) {
                 const handle = getHandleHit(x, y, sticker);
@@ -591,7 +734,6 @@
                 else if (handle === 'resize') cursor = 'nwse-resize';
                 else if (isPointInRotatedRect(x, y, sticker)) cursor = 'move';
             } else {
-                 // Check hover for any sticker
                  for (let i = stickers.length - 1; i >= 0; i--) {
                     if (isPointInRotatedRect(x, y, stickers[i])) {
                         cursor = 'move';
@@ -618,18 +760,15 @@
                 const currentDist = Math.hypot(x - sticker.x, y - sticker.y);
                 const ratio = currentDist / initialDistance;
                 
-                // Сохраняем пропорции
                 const oldW = sticker.width;
                 const aspect = sticker.height / sticker.width;
                 
-                // Новая ширина (не меньше 20px)
                 let newW = initialScale * ratio;
                 if (newW < 20) newW = 20;
                 
                 sticker.width = newW;
                 sticker.height = newW * aspect;
                 
-                // Обновляем базу для плавности, если нужно (здесь упрощенно)
                 drawAll();
             }
         });
@@ -644,7 +783,6 @@
         // 5. СКАЧИВАНИЕ
         // ==========================================
         downloadBtn.addEventListener('click', () => {
-            // Снимаем выделение перед рендером
             const prevSelection = selectedStickerIndex;
             selectedStickerIndex = -1;
             drawAll();
@@ -654,7 +792,6 @@
             link.href = canvas.toDataURL('image/png');
             link.click();
 
-            // Возвращаем выделение (опционально)
             selectedStickerIndex = prevSelection;
             drawAll();
         });