Update templates/index.html

templates/index.html

@@ -3,134 +3,136 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>CELL CLIPPER / V1.1</title>
+    <title>CELL CLIPPER / PRO</title>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono&display=swap');
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono&display=swap');
 
         :root {
-            --bg-page: #ffffff;
+            --bg-body: #F0F0F0;
+            --bg-card: #ffffff;
             --text-main: #000000;
             --text-muted: #888888;
-            --border: #000000;
-            --font-sans: 'Inter', -apple-system, sans-serif;
-            --font-mono: 'JetBrains Mono', monospace;
+            --accent: #000000;
+            --border: #E5E5E5;
+            --radius: 12px;
         }
 
         body {
             margin: 0;
+            padding: 20px;
             display: flex;
+            gap: 20px;
             height: 100vh;
-            font-family: var(--font-sans);
-            background-color: var(--bg-page);
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg-body);
             color: var(--text-main);
+            box-sizing: border-box;
             overflow: hidden;
         }
 
         .sidebar {
-            width: 360px;
-            background: var(--bg-page);
-            border-right: 0.5px solid var(--border);
+            width: 340px;
+            background: var(--bg-card);
+            border-radius: var(--radius);
             display: flex;
             flex-direction: column;
-            padding: 20px; 
+            padding: 24px;
             box-sizing: border-box;
-            z-index: 10;
             overflow-y: auto;
+            box-shadow: 0 4px 24px rgba(0,0,0,0.04);
         }
 
-        .section { margin-bottom: 30px; }
+        .section { margin-bottom: 32px; }
 
         .section-title {
-            font-family: var(--font-mono);
-            font-size: 9px;
+            font-family: 'JetBrains Mono';
+            font-size: 10px;
             color: var(--text-muted);
             text-transform: uppercase;
-            letter-spacing: 0.15em;
-            margin-bottom: 15px;
+            letter-spacing: 0.1em;
+            margin-bottom: 16px;
             display: block;
         }
 
         #file-input { display: none; }
         .file-upload-label {
             display: block;
-            border: 0.5px solid var(--border);
-            padding: 15px;
+            border: 1px dashed #CCC;
+            padding: 16px;
             text-align: center;
             cursor: pointer;
-            font-size: 11px;
-            font-family: var(--font-mono);
-            text-transform: uppercase;
-            width: 100%;
-            box-sizing: border-box;
+            font-size: 12px;
+            border-radius: 8px;
+            transition: 0.2s;
         }
+        .file-upload-label:hover { border-color: var(--accent); background: #F9F9F9; }
 
-        .control-group { margin-bottom: 15px; width: 100%; }
+        .control-group { margin-bottom: 20px; }
         
         .label-row {
             display: flex;
             justify-content: space-between;
-            font-size: 11px;
-            margin-bottom: 8px;
+            font-size: 12px;
+            font-weight: 500;
+            margin-bottom: 10px;
         }
-        .label-row span:last-child { font-family: var(--font-mono); }
+        .label-row span:last-child { font-family: 'JetBrains Mono'; color: var(--text-muted); }
 
         select {
             width: 100%;
-            padding: 8px;
-            font-family: var(--font-mono);
-            font-size: 11px;
-            border: 0.5px solid var(--border);
-            background: white;
+            padding: 10px;
+            font-family: inherit;
+            font-size: 13px;
+            border: 1px solid var(--border);
+            border-radius: 6px;
             outline: none;
-            margin-bottom: 10px;
             cursor: pointer;
-            text-transform: uppercase;
         }
 
         input[type="range"] {
             width: 100%;
             -webkit-appearance: none;
-            background: transparent;
-            outline: none;
-            display: block;
-            padding: 5px 0;
-        }
-        input[type="range"]::-webkit-slider-runnable-track {
-            width: 100%;
-            height: 1px;
+            height: 4px;
             background: var(--border);
+            border-radius: 2px;
+            outline: none;
         }
         input[type="range"]::-webkit-slider-thumb {
             -webkit-appearance: none;
-            width: 2px;
-            height: 14px;
-            background: var(--border);
+            width: 16px;
+            height: 16px;
+            background: var(--accent);
+            border-radius: 50%;
             cursor: pointer;
-            margin-top: -6px;
         }
 
-        .buttons-gap { margin-top: auto; width: 100%; }
-
         .btn-download {
-            background: var(--text-main);
+            background: var(--accent);
             color: white;
             border: none;
-            padding: 18px;
-            font-family: var(--font-mono);
+            padding: 16px;
+            font-family: 'JetBrains Mono';
             font-size: 11px;
-            letter-spacing: 0.2em;
+            border-radius: 8px;
             text-transform: uppercase;
             cursor: pointer;
             width: 100%;
+            margin-top: auto;
+            transition: 0.3s;
         }
+        .btn-download:hover { opacity: 0.8; transform: translateY(-1px); }
 
         .preview-area {
             flex: 1;
+            background: var(--bg-card);
+            border-radius: var(--radius);
             display: flex;
             align-items: center;
             justify-content: center;
-            background-color: var(--bg-page);
             padding: 40px;
+            box-shadow: 0 4px 24px rgba(0,0,0,0.04);
+            position: relative;
+            overflow: hidden;
         }
 
         #svg-container {
@@ -142,9 +144,10 @@
         }
         
         svg#main-svg {
-            background: transparent;
             max-width: 100%;
             max-height: 100%;
+            box-shadow: 0 0 40px rgba(0,0,0,0.05);
+            background: white;
         }
     </style>
 </head>
@@ -154,22 +157,21 @@
     <div class="section">
         <span class="section-title">01 / Source</span>
         <input type="file" id="file-input" accept=".svg">
-        <label for="file-input" class="file-upload-label" id="drop-zone">Select SVG</label>
+        <label for="file-input" class="file-upload-label" id="drop-zone">Drop SVG here</label>
     </div>
 
     <div class="section">
-        <span class="section-title">02 / Grid Layout</span>
+        <span class="section-title">02 / Grid</span>
         <div class="control-group">
             <div class="label-row"><span>Density</span> <span id="val-density">10</span></div>
-            <input type="range" id="density" min="2" max="60" value="10">
+            <input type="range" id="density" min="4" max="80" value="12">
         </div>
         <div class="control-group">
-            <div class="label-row"><span>Gap X</span> <span id="val-gap_x">0.00</span></div>
-            <input type="range" id="gap_x" min="0" max="0.9" step="0.01" value="0">
-        </div>
-        <div class="control-group">
-            <div class="label-row"><span>Gap Y</span> <span id="val-gap_y">0.00</span></div>
-            <input type="range" id="gap_y" min="0" max="0.9" step="0.01" value="0">
+            <div class="label-row"><span>Gap X / Y</span></div>
+            <div style="display: flex; gap: 10px;">
+                <input type="range" id="gap_x" min="0" max="0.9" step="0.01" value="0.1">
+                <input type="range" id="gap_y" min="0" max="0.9" step="0.01" value="0.1">
+            </div>
         </div>
         <div class="control-group">
             <div class="label-row"><span>Stagger</span> <span id="val-shift">0.00</span></div>
@@ -178,41 +180,31 @@
     </div>
 
     <div class="section">
-        <span class="section-title">03 / Shape Transformation</span>
+        <span class="section-title">03 / Transform</span>
         <div class="control-group">
-            <div class="label-row"><span>Base Scale</span> <span id="val-base">1.0</span></div>
-            <input type="range" id="base" min="0.1" max="2.0" step="0.05" value="1.0">
+            <div class="label-row"><span>Scale</span> <span id="val-base">1.0</span></div>
+            <input type="range" id="base" min="0.1" max="3.0" step="0.05" value="1.0">
         </div>
-
         <div class="control-group">
             <div class="label-row"><span>Rotation</span> <span id="val-rotation">0</span></div>
-            <input type="range" id="rotation" min="-90" max="90" step="1" value="0">
-        </div>
-        
-        <div class="control-group">
-            <div class="label-row"><span>Growth Algorithm</span></div>
-            <select id="growth_type">
-                <option value="sine">Diagonal Sine</option>
-                <option value="linear">Linear Left-Right</option>
-                <option value="steps">Steps (5 levels)</option>
-            </select>
-            
-            <div class="label-row"><span>Growth Strength</span> <span id="val-growth">0.0</span></div>
-            <input type="range" id="growth" min="0" max="1.5" step="0.05" value="0">
+            <input type="range" id="rotation" min="-180" max="180" step="1" value="0">
         </div>
     </div>
     
     <div class="section">
-        <span class="section-title">04 / Dynamics</span>
-        <div class="control-group">
-            <div class="label-row"><span>Wave Shift</span> <span id="val-wave">0.00</span></div>
-            <input type="range" id="wave" min="0" max="2" step="0.01" value="0">
+        <span class="section-title">04 / Growth</span>
+        <select id="growth_type">
+            <option value="sine">Diagonal Sine</option>
+            <option value="linear">Horizontal Linear</option>
+            <option value="steps">Quantized Steps</option>
+        </select>
+        <div class="control-group" style="margin-top: 15px;">
+            <div class="label-row"><span>Strength</span> <span id="val-growth">0.0</span></div>
+            <input type="range" id="growth" min="0" max="1.5" step="0.05" value="0">
         </div>
     </div>
 
-    <div class="buttons-gap">
-        <button class="btn-download" id="download-svg">Export SVG</button>
-    </div>
+    <button class="btn-download" id="download-svg">Export Optimized SVG</button>
 </div>
 
 <div class="preview-area">
@@ -232,7 +224,6 @@
         gap_x: document.getElementById('gap_x'),
         gap_y: document.getElementById('gap_y'),
         shift: document.getElementById('shift'),
-        wave: document.getElementById('wave'),
         base: document.getElementById('base'),
         rotation: document.getElementById('rotation'),
         growth: document.getElementById('growth'),
@@ -259,10 +250,11 @@
 
     function getParam(id) {
         const el = controls[id];
+        if (!el) return 0;
         if (el.tagName === 'SELECT') return el.value;
         const val = parseFloat(el.value);
         const display = document.getElementById(`val-${id}`);
-        if (display) display.innerText = Number.isInteger(val) ? val : val.toFixed(2);
+        if (display) display.innerText = val.toFixed(2);
         return val;
     }
 
@@ -271,7 +263,6 @@
         const gapX = getParam('gap_x');
         const gapY = getParam('gap_y');
         const shiftStagger = getParam('shift');
-        const shiftWave = getParam('wave');
         const baseScale = getParam('base');
         const rotation = getParam('rotation');
         const growth = getParam('growth');
@@ -280,50 +271,49 @@
         const vb = viewBox.split(' ').map(Number);
         const vW = vb[2], vH = vb[3];
 
-        const canvasSize = 1000;
-        const step = canvasSize / density;
+        // Прямоугольник 1400x800
+        const canvasW = 1400;
+        const canvasH = 800;
+        const step = canvasW / density;
+        const rows = Math.ceil(canvasH / step);
+
         const cellWMax = step * (1.0 - gapX);
         const cellHMax = step * (1.0 - gapY);
         const offsetXBase = (step - cellWMax) / 2;
         const offsetYBase = (step - cellHMax) / 2;
 
         let body = '';
-        for (let r = 0; r < density; r++) {
-            let rowWave = Math.sin(r * 0.5) * shiftWave * step;
-            let rowShift = (r * shiftStagger * step) + rowWave;
-            for (let c = 0; c < density; c++) {
-                let cx_grid = (c * step + rowShift) % canvasSize;
-                let cy_grid = r * step;
+        for (let r = 0; r < rows; r++) {
+            let rowShift = (r * shiftStagger * step);
+            for (let c = -1; c < density + 1; c++) {
+                let gx = (c * step + rowShift) % (canvasW + step);
+                let gy = r * step;
                 
                 let waveNorm = 0;
-                if (growthType === 'sine') {
-                    waveNorm = (Math.sin(c * 0.3 + r * 0.3) + 1) / 2;
-                } else if (growthType === 'linear') {
-                    waveNorm = c / (density - 1);
-                } else if (growthType === 'steps') {
-                    const numSteps = 5;
-                    waveNorm = Math.floor(c / (density / numSteps)) / (numSteps - 1);
-                }
+                if (growthType === 'sine') waveNorm = (Math.sin(c * 0.3 + r * 0.3) + 1) / 2;
+                else if (growthType === 'linear') waveNorm = c / density;
                 
                 let modW = Math.max(0, 1.0 - (waveNorm * growth));
                 let contentW = cellWMax * baseScale * modW;
                 let contentH = cellHMax * baseScale;
 
-                // Центр ячейки
-                let centerX = cx_grid + offsetXBase + cellWMax / 2;
-                let centerY = cy_grid + offsetYBase + cellHMax / 2;
+                let cx = gx + offsetXBase + cellWMax / 2;
+                let cy = gy + offsetYBase + cellHMax / 2;
 
                 let sX = (contentW / vW).toFixed(4);
                 let sY = (contentH / vH).toFixed(4);
 
-                // Оптимизированная трансформа для Figma: Translate -> Rotate -> Scale -> Translate back to object origin
-                body += `<g transform="translate(${centerX.toFixed(2)} ${centerY.toFixed(2)}) rotate(${rotation}) scale(${sX} ${sY}) translate(${-vW/2} ${-vH/2})">
-                    ${symbolContent}
-                </g>`;
+                // Оптимизированная трансформа для чистого импорта
+                let transform = `translate(${cx.toFixed(2)} ${cy.toFixed(2)}) rotate(${rotation}) scale(${sX} ${sY}) translate(${-vW/2} ${-vH/2})`;
+
+                body += `<g transform="${transform}">${symbolContent}</g>`;
             }
         }
 
-        return `<svg id="main-svg" xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000">${body}</svg>`;
+        return `<svg id="main-svg" xmlns="http://www.w3.org/2000/svg" width="${canvasW}" height="${canvasH}" viewBox="0 0 ${canvasW} {canvasH}" style="background:white">
+            <rect width="100%" height="100%" fill="white"/>
+            ${body}
+        </svg>`;
     }
 
     function update() { svgContainer.innerHTML = generateSVG(); }
@@ -338,7 +328,7 @@
         const blob = new Blob([svgData], {type: 'image/svg+xml;charset=utf-8'});
         const url = URL.createObjectURL(blob);
         const link = document.createElement('a');
-        link.href = url; link.download = 'cell-clipper-clean.svg'; link.click();
+        link.href = url; link.download = 'clean-pattern.svg'; link.click();
     };
     update();
 </script>