Update index.html

index.html

@@ -9,7 +9,6 @@
     <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;900&display=swap" rel="stylesheet">
 
     <style>
-        /* Глобальное применение шрифта ко всем элементам */
         * {
             font-family: 'Nunito', sans-serif;
             box-sizing: border-box;
@@ -61,7 +60,6 @@
             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; }
@@ -149,7 +147,6 @@
             margin-top: 5px;
         }
 
-        /* Стили для ссылки Disclaimer */
         .disclaimer-link {
             text-align: center;
             margin-top: 10px;
@@ -167,9 +164,8 @@
             color: #999;
         }
 
-        /* Стили модального окна */
         .modal-overlay {
-            display: none; /* Скрыто по умолчанию */
+            display: none;
             position: fixed;
             top: 0;
             left: 0;
@@ -231,7 +227,6 @@
             font-weight: 900;
         }
 
-        /* Скроллбар внутри модалки */
         .legal-text::-webkit-scrollbar { width: 6px; }
         .legal-text::-webkit-scrollbar-track { background: #222; }
         .legal-text::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }
@@ -257,29 +252,24 @@
     <h1>MandreIcon Creator</h1>
 
     <div class="container">
-        <!-- Область превью -->
         <div class="preview-area">
             <canvas id="mainCanvas" width="512" height="512"></canvas>
             <p class="hint">Кликни на стикер для выделения. <br>Delete = удалить.</p>
         </div>
 
-        <!-- Панель управления -->
         <div class="controls">
             
             <div class="section-title">Фон (Base Icon)</div>
 
-            <!-- Драг-н-дроп SVG -->
             <div class="drop-zone" id="dropZoneBase">
                 <p><b>SVG</b> (Градиентный фон)<br>Клик или Drop</p>
                 <input type="file" id="fileInputBase" class="hidden-input" accept=".svg">
             </div>
 
-            <!-- Текстовые настройки -->
             <div>
                 <input type="text" id="textInput" placeholder="Или текст (A)">
             </div>
 
-            <!-- Ползунки настроек фона -->
             <div>
                 <label>Размер хуйни этой: <span id="scaleVal">100%</span></label>
                 <input type="range" id="scaleRange" min="10" max="200" value="100">
@@ -302,14 +292,12 @@
 
             <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>
@@ -341,7 +329,6 @@
         const canvas = document.getElementById('mainCanvas');
         const ctx = canvas.getContext('2d');
         
-        // Элементы UI
         const dropZoneBase = document.getElementById('dropZoneBase');
         const fileInputBase = document.getElementById('fileInputBase');
         const textInput = document.getElementById('textInput');
@@ -353,25 +340,21 @@
         const addStickerBtn = document.getElementById('addStickerBtn');
         const stickerInput = document.getElementById('stickerInput');
 
-        // Константы
         const BG_COLOR = '#E13839';
         const GRADIENT_START = '#FFFFFF';
         const GRADIENT_END = '#FFACC7';
         
-        // Состояние "Базового слоя" (градиент)
         let baseLayer = {
-            type: 'none', // 'image' | 'text' | 'none'
+            type: 'none',
             object: null,
             scale: 1,
             x: 0,
             y: 0
         };
 
-        // Состояние "Стикеров" (PNG поверх)
         let stickers = []; 
         let selectedStickerIndex = -1;
 
-        // Переменные для манипуляции мышью
         let isDragging = false;
         let isRotating = false;
         let isResizing = false;
@@ -380,14 +363,10 @@
         let initialDistance = 0;
         let initialScale = 1;
 
-        // Инициализация
         window.onload = () => {
             drawAll();
         };
 
-        // ==========================================
-        // ЛОГИКА МОДАЛЬНОГО ОКНА
-        // ==========================================
         const modalOverlay = document.getElementById('modalOverlay');
         const openDisclaimerBtn = document.getElementById('openDisclaimerBtn');
         const closeModalBtn = document.getElementById('closeModalBtn');
@@ -411,11 +390,6 @@
             if (e.target === modalOverlay) closeModal();
         });
 
-
-        // ==========================================
-        // 1. ЛОГИКА БАЗОВОГО СЛОЯ (SVG/TEXT)
-        // ==========================================
-        
         function updateBaseLayerParams() {
             baseLayer.scale = parseInt(scaleRange.value) / 100;
             baseLayer.x = parseInt(offsetXRange.value);
@@ -469,11 +443,6 @@
             reader.readAsDataURL(file);
         }
 
-
-        // ==========================================
-        // 2. ЛОГИКА СТИКЕРОВ (PNG)
-        // ==========================================
-
         addStickerBtn.addEventListener('click', () => stickerInput.click());
         stickerInput.addEventListener('change', (e) => {
             Array.from(e.target.files).forEach(file => {
@@ -523,24 +492,16 @@
             }
         });
 
-
-        // ==========================================
-        // 3. ГЛАВНАЯ ОТРИСОВКА
-        // ==========================================
-
         function drawAll() {
             ctx.clearRect(0, 0, canvas.width, canvas.height);
             
-            // 1. Фон
             ctx.fillStyle = BG_COLOR;
             ctx.fillRect(0, 0, canvas.width, canvas.height);
 
-            // 2. Базовый градиентный слой
             if (baseLayer.type !== 'none') {
                 drawBaseLayer();
             }
 
-            // 3. Стикеры
             stickers.forEach((sticker, index) => {
                 ctx.save();
                 ctx.translate(sticker.x, sticker.y);
@@ -549,7 +510,6 @@
                 ctx.restore();
             });
 
-            // 4. Интерфейс управления
             if (selectedStickerIndex !== -1) {
                 drawControls(stickers[selectedStickerIndex]);
             }
@@ -571,7 +531,7 @@
                 const w = 300;
                 const h = 300 * (baseLayer.object.height / baseLayer.object.width); 
                 tempCtx.drawImage(baseLayer.object, -w/2, -h/2, w, h);
-            } else if (baseLayer.type === 'text') {
+           iile} else if (baseLayer.type === 'text') {
                 tempCtx.font = "900 300px 'Nunito'";
                 tempCtx.textAlign = "center";
                 tempCtx.textBaseline = "middle";
@@ -626,11 +586,6 @@
             ctx.restore();
         }
 
-
-        // ==========================================
-        // 4. ОБРАБОТКА МЫШИ (Canvas)
-        // ==========================================
-
         function getMousePos(evt) {
             const rect = canvas.getBoundingClientRect();
             const scaleX = canvas.width / rect.width;
@@ -742,7 +697,6 @@
             }
             canvas.style.cursor = cursor;
 
-
             if (!sticker) return;
 
             if (isDragging) {
@@ -778,16 +732,13 @@
             isResizing = false;
         });
 
-        // ==========================================
-        // 5. СКАЧИВАНИЕ
-        // ==========================================
         downloadBtn.addEventListener('click', () => {
             const prevSelection = selectedStickerIndex;
             selectedStickerIndex = -1;
             drawAll();
 
             const link = document.createElement('a');
-            link.download = 'SWAGA_ICON.png'; // Убрано PRO
+            link.download = 'SWAGA_ICON.png';
             link.href = canvas.toDataURL('image/png');
             link.click();