Spaces:

sterepando
/

SwagIconCreator

Paused

App Files Files Community

sterepando commited on Nov 22, 2025

Commit

56d22ed

verified ·

1 Parent(s): 7a3252a

Upload ai_studio_code (4).html

Browse files

Files changed (1) hide show

ai_studio_code (4).html +664 -0

ai_studio_code (4).html ADDED Viewed

	@@ -0,0 +1,664 @@

+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <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">
+    <style>
+        body {
+            font-family: 'Nunito', sans-serif;
+            background-color: #1e1e1e;
+            color: white;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: 100vh;
+            margin: 0;
+            padding: 20px;
+            user-select: none; /* Чтобы текст не выделялся при драге */
+        }
+        h1 { margin-bottom: 10px; }
+        .container {
+            display: flex;
+            gap: 30px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+        .preview-area {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+        canvas {
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+            background-color: #E13839;
+            /* Курсор управляется через JS */
+        }
+        .controls {
+            background: #2d2d2d;
+            padding: 20px;
+            border-radius: 15px;
+            width: 300px;
+            display: flex;
+            flex-direction: column;
+            gap: 15px;
+            max-height: 80vh;
+            overflow-y: auto;
+        }
+        .section-title {
+            font-size: 12px;
+            text-transform: uppercase;
+            color: #777;
+            letter-spacing: 1px;
+            border-bottom: 1px solid #444;
+            padding-bottom: 5px;
+            margin-top: 10px;
+        }
+        .drop-zone {
+            border: 3px dashed #555;
+            border-radius: 10px;
+            padding: 20px;
+            text-align: center;
+            transition: 0.3s;
+            cursor: pointer;
+            font-size: 14px;
+        }
+        .drop-zone:hover, .drop-zone.dragover {
+            border-color: #E13839;
+            background-color: rgba(225, 56, 57, 0.1);
+        }
+        label {
+            font-size: 14px;
+            color: #aaa;
+            margin-bottom: 5px;
+            display: block;
+        }
+        input[type="text"] {
+            width: 100%;
+            padding: 10px;
+            border-radius: 5px;
+            border: none;
+            background: #444;
+            color: white;
+            font-family: 'Nunito', sans-serif;
+            font-weight: 900;
+            font-size: 16px;
+            box-sizing: border-box;
+        }
+        input[type="range"] {
+            width: 100%;
+            accent-color: #E13839;
+        }
+        button {
+            border: none;
+            padding: 15px;
+            border-radius: 8px;
+            font-weight: 900;
+            font-size: 16px;
+            cursor: pointer;
+            transition: transform 0.1s;
+            width: 100%;
+        }
+        .btn-primary {
+            background: linear-gradient(225deg, #FFFFFF 0%, #FFACC7 100%);
+            color: #E13839;
+            margin-top: 20px;
+        }
+        .btn-secondary {
+            background: #444;
+            color: white;
+            font-size: 14px;
+            padding: 10px;
+        }
+        button:active { transform: scale(0.98); }
+        .hidden-input { display: none; }
+        .hint {
+            font-size: 12px;
+            color: #666;
+            text-align: center;
+            margin-top: 5px;
+        }
+    </style>
+</head>
+<body>
+    <h1>MandreIcon Creator PRO</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">
+            </div>
+            <div style="display: flex; gap: 10px;">
+                <div style="flex:1">
+                    <label>X:</label>
+                    <input type="range" id="offsetXRange" min="-256" max="256" value="0">
+                </div>
+                <div style="flex:1">
+                    <label>Y:</label>
+                    <input type="range" id="offsetYRange" min="-256" max="256" value="0">
+                </div>
+            </div>
+            <div class="section-title">Стикеры (PNG)</div>
+            <button class="btn-secondary" id="addStickerBtn">+ Добавить PNG</button>
+            <input type="file" id="stickerInput" class="hidden-input" accept="image/png, image/jpeg" multiple>
+            <button class="btn-primary" id="downloadBtn">Скачать PNG</button>
+        </div>
+    </div>
+    <script>
+        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');
+        const scaleRange = document.getElementById('scaleRange');
+        const offsetYRange = document.getElementById('offsetYRange');
+        const offsetXRange = document.getElementById('offsetXRange');
+        const downloadBtn = document.getElementById('downloadBtn');
+        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'
+            object: null,
+            scale: 1,
+            x: 0,
+            y: 0
+        };
+        // Состояние "Стикеров" (PNG поверх)
+        let stickers = [];
+        let selectedStickerIndex = -1;
+        // Переменные для манипуляции мышью
+        let isDragging = false;
+        let isRotating = false;
+        let isResizing = false;
+        let startX, startY;
+        let initialRotation = 0;
+        let initialDistance = 0;
+        let initialScale = 1;
+        // Инициализация
+        window.onload = () => {
+            drawAll();
+        };
+        // ==========================================
+        // 1. ЛОГИКА БАЗОВОГО СЛОЯ (SVG/TEXT)
+        // ==========================================
+        function updateBaseLayerParams() {
+            baseLayer.scale = parseInt(scaleRange.value) / 100;
+            baseLayer.x = parseInt(offsetXRange.value);
+            baseLayer.y = parseInt(offsetYRange.value);
+            document.getElementById('scaleVal').innerText = scaleRange.value + '%';
+            drawAll();
+        }
+        scaleRange.addEventListener('input', updateBaseLayerParams);
+        offsetXRange.addEventListener('input', updateBaseLayerParams);
+        offsetYRange.addEventListener('input', updateBaseLayerParams);
+        textInput.addEventListener('input', () => {
+            if (textInput.value) {
+                baseLayer.type = 'text';
+                baseLayer.object = textInput.value;
+                drawAll();
+            } else {
+                baseLayer.type = 'none';
+                drawAll();
+            }
+        });
+        // Загрузка SVG для базы
+        dropZoneBase.addEventListener('click', () => fileInputBase.click());
+        dropZoneBase.addEventListener('dragover', (e) => { e.preventDefault(); dropZoneBase.classList.add('dragover'); });
+        dropZoneBase.addEventListener('dragleave', () => dropZoneBase.classList.remove('dragover'));
+        dropZoneBase.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropZoneBase.classList.remove('dragover');
+            handleBaseFile(e.dataTransfer.files[0]);
+        });
+        fileInputBase.addEventListener('change', (e) => handleBaseFile(e.target.files[0]));
+        function handleBaseFile(file) {
+            if (!file) return;
+            if (!file.type.includes('svg')) { alert('Сюда только SVG!'); return; }
+            const reader = new FileReader();
+            reader.onload = (ev) => {
+                const img = new Image();
+                img.onload = () => {
+                    baseLayer.type = 'image';
+                    baseLayer.object = img;
+                    textInput.value = ''; // Очистить текст
+                    // Сброс слайдеров
+                    scaleRange.value = 100;
+                    offsetXRange.value = 0;
+                    offsetYRange.value = 0;
+                    updateBaseLayerParams();
+                };
+                img.src = ev.target.result;
+            };
+            reader.readAsDataURL(file);
+        }
+        // ==========================================
+        // 2. ЛОГИКА СТИКЕРОВ (PNG)
+        // ==========================================
+        addStickerBtn.addEventListener('click', () => stickerInput.click());
+        stickerInput.addEventListener('change', (e) => {
+            Array.from(e.target.files).forEach(file => {
+                const reader = new FileReader();
+                reader.onload = (ev) => {
+                    const img = new Image();
+                    img.onload = () => {
+                        addSticker(img);
+                    };
+                    img.src = ev.target.result;
+                };
+                reader.readAsDataURL(file);
+            });
+            stickerInput.value = ''; // сброс, чтобы можно было добавить тот же файл
+        });
+        function addSticker(img) {
+            // Начальный размер: подгоняем под 1/3 канваса, но сохраняем пропорции
+            const maxSize = 200;
+            let w = img.width;
+            let h = img.height;
+            if (w > h) {
+                if (w > maxSize) { h *= maxSize / w; w = maxSize; }
+            } else {
+                if (h > maxSize) { w *= maxSize / h; h = maxSize; }
+            }
+            stickers.push({
+                img: img,
+                x: canvas.width / 2,
+                y: canvas.height / 2,
+                width: w,
+                height: h,
+                rotation: 0 // в радианах
+            });
+            // Выбираем только что добавленный
+            selectedStickerIndex = stickers.length - 1;
+            drawAll();
+        }
+        // Удаление по кнопке Delete
+        window.addEventListener('keydown', (e) => {
+            if ((e.key === 'Delete' || e.key === 'Backspace') && selectedStickerIndex !== -1) {
+                // Не удаляем если фокус в инпуте текста
+                if (document.activeElement === textInput) return;
+                stickers.splice(selectedStickerIndex, 1);
+                selectedStickerIndex = -1;
+                drawAll();
+            }
+        });
+        // ==========================================
+        // 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);
+                ctx.rotate(sticker.rotation);
+                ctx.drawImage(sticker.img, -sticker.width/2, -sticker.height/2, sticker.width, sticker.height);
+                ctx.restore();
+            });
+            // 4. Интерфейс управления (если выбран стикер и мы не скачиваем файл)
+            if (selectedStickerIndex !== -1) {
+                drawControls(stickers[selectedStickerIndex]);
+            }
+        }
+        function drawBaseLayer() {
+            const tempCanvas = document.createElement('canvas');
+            tempCanvas.width = canvas.width;
+            tempCanvas.height = canvas.height;
+            const tempCtx = tempCanvas.getContext('2d');
+            const cx = tempCanvas.width / 2;
+            const cy = tempCanvas.height / 2;
+            tempCtx.translate(cx + baseLayer.x, cy + baseLayer.y);
+            tempCtx.scale(baseLayer.scale, baseLayer.scale);
+            if (baseLayer.type === 'image') {
+                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') {
+                tempCtx.font = "900 300px 'Nunito'";
+                tempCtx.textAlign = "center";
+                tempCtx.textBaseline = "middle";
+                tempCtx.fillStyle = "#000";
+                tempCtx.fillText(baseLayer.object, 0, 20);
+            }
+            tempCtx.globalCompositeOperation = 'source-in';
+            const gradient = tempCtx.createLinearGradient(canvas.width, 0, 0, canvas.height);
+            gradient.addColorStop(0, GRADIENT_START);
+            gradient.addColorStop(1, GRADIENT_END);
+            tempCtx.fillStyle = gradient;
+            tempCtx.setTransform(1, 0, 0, 1, 0, 0);
+            tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
+            ctx.drawImage(tempCanvas, 0, 0);
+        }
+        function drawControls(sticker) {
+            ctx.save();
+            ctx.translate(sticker.x, sticker.y);
+            ctx.rotate(sticker.rotation);
+            const w = sticker.width;
+            const h = sticker.height;
+            const halfW = w / 2;
+            const halfH = h / 2;
+            // Рамка
+            ctx.strokeStyle = '#FFFFFF';
+            ctx.lineWidth = 2;
+            ctx.setLineDash([5, 5]);
+            ctx.strokeRect(-halfW, -halfH, w, h);
+            // Линия к вращалке
+            ctx.setLineDash([]);
+            ctx.beginPath();
+            ctx.moveTo(0, -halfH);
+            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();
+            ctx.stroke();
+            ctx.restore();
+        }
+        // ==========================================
+        // 4. ОБРАБОТКА МЫШИ (Canvas)
+        // ==========================================
+        function getMousePos(evt) {
+            const rect = canvas.getBoundingClientRect();
+            const scaleX = canvas.width / rect.width;
+            const scaleY = canvas.height / rect.height;
+            return {
+                x: (evt.clientX - rect.left) * scaleX,
+                y: (evt.clientY - rect.top) * scaleY
+            };
+        }
+        // Функция проверки попадания точки в повернутый прямоугольник
+        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);
+            const halfW = sticker.width / 2;
+            const halfH = sticker.height / 2;
+            return rotatedX >= -halfW && rotatedX <= halfW &&
+                   rotatedY >= -halfH && rotatedY <= halfH;
+        }
+        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);
+            const ry = dx * Math.sin(-sticker.rotation) + dy * Math.cos(-sticker.rotation);
+            const halfW = sticker.width / 2;
+            const halfH = sticker.height / 2;
+            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;
+        }
+        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; // запоминаем текущую ширину как базу
+                    return;
+                }
+            }
+            // 2. Проверяем клик по телу стикера (выбор)
+            // Идем с конца (сверху), чтобы выбрать верхний
+            let clickedIndex = -1;
+            for (let i = stickers.length - 1; i >= 0; i--) {
+                if (isPointInRotatedRect(x, y, stickers[i])) {
+                    clickedIndex = i;
+                    break;
+                }
+            }
+            if (clickedIndex !== -1) {
+                selectedStickerIndex = clickedIndex;
+                // Перемещаем выбранный стикер в конец массива (поднимаем наверх)
+                // Но только если это не тот же самый (чтобы не дергался)
+                if (clickedIndex !== stickers.length - 1) {
+                   const movedSticker = stickers.splice(clickedIndex, 1)[0];
+                   stickers.push(movedSticker);
+                   selectedStickerIndex = stickers.length - 1;
+                }
+                isDragging = true;
+                startX = x;
+                startY = y;
+                drawAll();
+            } else {
+                // Клик в пустоту - снимаем выделение
+                selectedStickerIndex = -1;
+                drawAll();
+            }
+        });
+        canvas.addEventListener('mousemove', (e) => {
+            const {x, y} = getMousePos(e);
+            const sticker = selectedStickerIndex !== -1 ? stickers[selectedStickerIndex] : null;
+            // Смена курсора
+            let cursor = 'default';
+            if (isRotating) cursor = 'grabbing'; // 'alias' для вращения
+            else if (isResizing) cursor = 'nwse-resize';
+            else if (sticker) {
+                const handle = getHandleHit(x, y, sticker);
+                if (handle === 'rotate') cursor = 'grab';
+                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';
+                        break;
+                    }
+                }
+            }
+            canvas.style.cursor = cursor;
+            if (!sticker) return;
+            if (isDragging) {
+                sticker.x += x - startX;
+                sticker.y += y - startY;
+                startX = x;
+                startY = y;
+                drawAll();
+            } else if (isRotating) {
+                const angle = Math.atan2(y - sticker.y, x - sticker.x);
+                sticker.rotation = angle - initialRotation;
+                drawAll();
+            } else if (isResizing) {
+                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();
+            }
+        });
+        window.addEventListener('mouseup', () => {
+            isDragging = false;
+            isRotating = false;
+            isResizing = false;
+        });
+        // ==========================================
+        // 5. СКАЧИВАНИЕ
+        // ==========================================
+        downloadBtn.addEventListener('click', () => {
+            // Снимаем выделение перед рендером
+            const prevSelection = selectedStickerIndex;
+            selectedStickerIndex = -1;
+            drawAll();
+            const link = document.createElement('a');
+            link.download = 'SWAGA_ICON_PRO.png';
+            link.href = canvas.toDataURL('image/png');
+            link.click();
+            // Возвращаем выделение (опционально)
+            selectedStickerIndex = prevSelection;
+            drawAll();
+        });
+    </script>
+</body>
+</html>