Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Update index.html

by Kgshop - opened 12 days ago

base: refs/heads/main

←

from: refs/pr/1

Discussion Files changed

+308

-1163

Files changed (1) hide show

index.html +308 -1163

index.html CHANGED Viewed

@@ -2,1245 +2,390 @@
 <html lang="ru">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <title>Симуляция воды</title>
     <style>
-        * {
             margin: 0;
             padding: 0;
-            box-sizing: border-box;
-        }
-        body {
             overflow: hidden;
-            background: #000;
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-            touch-action: none;
         }
-        #canvas {
             display: block;
-            width: 100vw;
-            height: 100vh;
-        }
-        #controls {
-            position: fixed;
-            top: 10px;
-            left: 10px;
-            background: rgba(0, 0, 0, 0.85);
-            padding: 15px;
-            border-radius: 12px;
-            color: #fff;
-            max-width: 320px;
-            max-height: 90vh;
-            overflow-y: auto;
-            z-index: 100;
-            backdrop-filter: blur(10px);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            transition: transform 0.3s ease;
         }
-        #controls.hidden {
-            transform: translateX(-110%);
-        }
-        #toggleBtn {
             position: fixed;
-            top: 10px;
-            left: 10px;
-            width: 44px;
-            height: 44px;
-            background: rgba(0, 0, 0, 0.85);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            border-radius: 10px;
-            color: #fff;
-            font-size: 24px;
             cursor: pointer;
-            z-index: 99;
-            display: none;
-            backdrop-filter: blur(10px);
-        }
-        #controls.hidden + #toggleBtn {
             display: flex;
             align-items: center;
             justify-content: center;
         }
-        .section {
-            margin-bottom: 15px;
-            padding-bottom: 15px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
-        .section:last-child {
-            border-bottom: none;
-            margin-bottom: 0;
-            padding-bottom: 0;
         }
-        h3 {
-            font-size: 14px;
-            margin-bottom: 10px;
-            color: #4fc3f7;
-            display: flex;
-            align-items: center;
-            gap: 8px;
         }
-        .control-row {
             display: flex;
             align-items: center;
-            margin-bottom: 8px;
-            gap: 10px;
         }
-        label {
-            flex: 1;
-            font-size: 12px;
-            color: #aaa;
         }
-        input[type="range"] {
-            flex: 1.5;
-            height: 6px;
-            border-radius: 3px;
-            background: #333;
-            outline: none;
-            -webkit-appearance: none;
         }
-        input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 18px;
-            height: 18px;
-            background: #4fc3f7;
-            border-radius: 50%;
-            cursor: pointer;
         }
-        input[type="color"] {
-            width: 40px;
-            height: 30px;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
         }
-        .value {
-            min-width: 45px;
-            text-align: right;
-            font-size: 11px;
-            color: #4fc3f7;
-            font-family: monospace;
         }
-        button {
             width: 100%;
             padding: 10px;
-            margin-top: 5px;
-            background: linear-gradient(135deg, #4fc3f7, #0288d1);
-            border: none;
-            border-radius: 8px;
-            color: #fff;
-            font-size: 13px;
-            cursor: pointer;
-            transition: all 0.2s;
         }
-        button:hover {
-            transform: scale(1.02);
-            box-shadow: 0 4px 15px rgba(79, 195, 247, 0.4);
         }
-        button:active {
-            transform: scale(0.98);
-        }
-        .close-btn {
-            position: absolute;
-            top: 10px;
-            right: 10px;
-            background: none;
             border: none;
-            color: #888;
-            font-size: 20px;
             cursor: pointer;
-            width: auto;
-            padding: 5px;
-            margin: 0;
-        }
-        .preset-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 8px;
             margin-top: 10px;
         }
-        .preset-grid button {
-            padding: 8px;
-            font-size: 11px;
-        }
-        #fps {
-            position: fixed;
-            top: 10px;
-            right: 10px;
-            background: rgba(0, 0, 0, 0.7);
-            padding: 8px 12px;
-            border-radius: 8px;
-            color: #4fc3f7;
-            font-size: 12px;
-            font-family: monospace;
-            z-index: 100;
         }
-        @media (max-width: 768px) {
-            #controls {
-                max-width: 280px;
-                padding: 12px;
-                font-size: 11px;
-            }
-            h3 {
-                font-size: 13px;
-            }
-            input[type="range"] {
-                flex: 1;
             }
-            .value {
-                min-width: 35px;
-                font-size: 10px;
             }
         }
-        @media (max-width: 400px) {
-            #controls {
-                max-width: calc(100vw - 20px);
-                left: 5px;
-                right: 5px;
-            }
-        }
-        .checkbox-row {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            margin-bottom: 8px;
-        }
-        .checkbox-row input[type="checkbox"] {
-            width: 18px;
-            height: 18px;
-            accent-color: #4fc3f7;
-        }
-        .checkbox-row label {
-            flex: none;
-        }
     </style>
 </head>
 <body>
-    <canvas id="canvas"></canvas>
-    <div id="controls">
-        <button class="close-btn" onclick="toggleControls()">×</button>
-        <div class="section">
-            <h3>🌊 Физика волн</h3>
-            <div class="control-row">
-                <label>Скорость волн</label>
-                <input type="range" id="waveSpeed" min="0.1" max="3" step="0.1" value="1">
-                <span class="value" id="waveSpeedVal">1.0</span>
-            </div>
-            <div class="control-row">
-                <label>Затухание</label>
-                <input type="range" id="damping" min="0.9" max="0.999" step="0.001" value="0.995">
-                <span class="value" id="dampingVal">0.995</span>
-            </div>
-            <div class="control-row">
-                <label>Размер капли</label>
-                <input type="range" id="dropRadius" min="1" max="50" step="1" value="15">
-                <span class="value" id="dropRadiusVal">15</span>
-            </div>
-            <div class="control-row">
-                <label>Сила капли</label>
-                <input type="range" id="dropStrength" min="0.1" max="2" step="0.1" value="0.5">
-                <span class="value" id="dropStrengthVal">0.5</span>
-            </div>
-            <div class="control-row">
-                <label>Поверхн. натяж.</label>
-                <input type="range" id="tension" min="0" max="0.5" step="0.01" value="0.1">
-                <span class="value" id="tensionVal">0.10</span>
-            </div>
-        </div>
-        <div class="section">
-            <h3>🎨 Визуализация</h3>
-            <div class="control-row">
-                <label>Глубина воды</label>
-                <input type="range" id="waterDepth" min="0.1" max="2" step="0.1" value="0.8">
-                <span class="value" id="waterDepthVal">0.8</span>
-            </div>
-            <div class="control-row">
-                <label>Преломление</label>
-                <input type="range" id="refraction" min="0" max="1" step="0.05" value="0.3">
-                <span class="value" id="refractionVal">0.30</span>
-            </div>
-            <div class="control-row">
-                <label>Отражение</label>
-                <input type="range" id="reflection" min="0" max="1" step="0.05" value="0.4">
-                <span class="value" id="reflectionVal">0.40</span>
-            </div>
-            <div class="control-row">
-                <label>Каустика</label>
-                <input type="range" id="caustics" min="0" max="2" step="0.1" value="1">
-                <span class="value" id="causticsVal">1.0</span>
-            </div>
-            <div class="control-row">
-                <label>Яркость</label>
-                <input type="range" id="brightness" min="0.5" max="2" step="0.1" value="1">
-                <span class="value" id="brightnessVal">1.0</span>
-            </div>
-            <div class="control-row">
-                <label>Спекуляр</label>
-                <input type="range" id="specular" min="0" max="3" step="0.1" value="1.5">
-                <span class="value" id="specularVal">1.5</span>
-            </div>
-        </div>
-        <div class="section">
-            <h3>🎭 Цвета</h3>
-            <div class="control-row">
-                <label>Цвет воды</label>
-                <input type="color" id="waterColor" value="#0066aa">
-            </div>
-            <div class="control-row">
-                <label>Цвет глубины</label>
-                <input type="color" id="deepColor" value="#001133">
-            </div>
-            <div class="control-row">
-                <label>Цвет неба</label>
-                <input type="color" id="skyColor" value="#87ceeb">
-            </div>
-            <div class="control-row">
-                <label>Цвет пены</label>
-                <input type="color" id="foamColor" value="#ffffff">
-            </div>
-        </div>
-        <div class="section">
-            <h3>🌤️ Освещение</h3>
-            <div class="control-row">
-                <label>Направление X</label>
-                <input type="range" id="lightX" min="-1" max="1" step="0.1" value="0.5">
-                <span class="value" id="lightXVal">0.5</span>
-            </div>
-            <div class="control-row">
-                <label>Направление Y</label>
-                <input type="range" id="lightY" min="0.1" max="1" step="0.1" value="0.8">
-                <span class="value" id="lightYVal">0.8</span>
-            </div>
-            <div class="control-row">
-                <label>Направление Z</label>
-                <input type="range" id="lightZ" min="-1" max="1" step="0.1" value="0.3">
-                <span class="value" id="lightZVal">0.3</span>
-            </div>
-        </div>
-        <div class="section">
-            <h3>🌀 Автоволны</h3>
-            <div class="checkbox-row">
-                <input type="checkbox" id="autoWaves" checked>
-                <label>Включить дождь</label>
-            </div>
-            <div class="control-row">
-                <label>Частота</label>
-                <input type="range" id="rainFreq" min="0.01" max="0.3" step="0.01" value="0.05">
-                <span class="value" id="rainFreqVal">0.05</span>
-            </div>
-            <div class="checkbox-row">
-                <input type="checkbox" id="windWaves">
-                <label>Ветровые волны</label>
-            </div>
-            <div class="control-row">
-                <label>Сила ветра</label>
-                <input type="range" id="windStrength" min="0" max="0.01" step="0.001" value="0.003">
-                <span class="value" id="windStrengthVal">0.003</span>
-            </div>
-        </div>
-        <div class="section">
-            <h3>⚙️ Качество</h3>
-            <div class="control-row">
-                <label>Разрешение сим.</label>
-                <input type="range" id="simResolution" min="128" max="1024" step="64" value="512">
-                <span class="value" id="simResolutionVal">512</span>
-            </div>
-            <div class="checkbox-row">
-                <input type="checkbox" id="highQuality" checked>
-                <label>Высокое качество</label>
             </div>
-        </div>
-        <div class="section">
-            <h3>🎮 Пресеты</h3>
-            <div class="preset-grid">
-                <button onclick="applyPreset('calm')">🌅 Спокойно</button>
-                <button onclick="applyPreset('storm')">⛈️ Шторм</button>
-                <button onclick="applyPreset('pool')">🏊 Бассейн</button>
-                <button onclick="applyPreset('ocean')">🌊 Океан</button>
-                <button onclick="applyPreset('toxic')">☢️ Токсично</button>
-                <button onclick="applyPreset('lava')">🌋 Лава</button>
-            </div>
-            <button onclick="resetWater()" style="margin-top:10px">🔄 Сбросить воду</button>
         </div>
     </div>
-    <button id="toggleBtn" onclick="toggleControls()">☰</button>
-    <div id="fps">FPS: 60</div>
     <script>
-        // WebGL контекст и переменные
-        const canvas = document.getElementById('canvas');
-        let gl = canvas.getContext('webgl2') || canvas.getContext('webgl');
-        if (!gl) {
-            alert('WebGL не поддерживается');
-            throw new Error('WebGL not supported');
         }
-        const isWebGL2 = gl instanceof WebGL2RenderingContext;
-        // Параметры симуляции
-        let params = {
-            waveSpeed: 1.0,
-            damping: 0.995,
-            dropRadius: 15,
-            dropStrength: 0.5,
-            tension: 0.1,
-            waterDepth: 0.8,
-            refraction: 0.3,
-            reflection: 0.4,
-            caustics: 1.0,
-            brightness: 1.0,
-            specular: 1.5,
-            waterColor: [0, 0.4, 0.67],
-            deepColor: [0, 0.07, 0.2],
-            skyColor: [0.53, 0.81, 0.92],
-            foamColor: [1, 1, 1],
-            lightX: 0.5,
-            lightY: 0.8,
-            lightZ: 0.3,
-            autoWaves: true,
-            rainFreq: 0.05,
-            windWaves: false,
-            windStrength: 0.003,
-            simResolution: 512,
-            highQuality: true
-        };
-        let simWidth = params.simResolution;
-        let simHeight = params.simResolution;
-        // Framebuffers для ping-pong симуляции
-        let framebuffers = [];
-        let textures = [];
-        let currentFB = 0;
-        // Шейдеры
-        const quadVS = `
-            attribute vec2 position;
-            varying vec2 vUv;
-            void main() {
-                vUv = position * 0.5 + 0.5;
-                gl_Position = vec4(position, 0.0, 1.0);
-            }
-        `;
-        // Шейдер симуляции волн (высокоточная модель)
-        const waveSimFS = `
-            precision highp float;
-            varying vec2 vUv;
-            uniform sampler2D uPrevState;
-            uniform sampler2D uCurrState;
-            uniform vec2 uResolution;
-            uniform float uDamping;
-            uniform float uSpeed;
-            uniform float uTension;
-            uniform float uDt;
-            void main() {
-                vec2 texel = 1.0 / uResolution;
-                // Текущие значения
-                vec4 curr = texture2D(uCurrState, vUv);
-                vec4 prev = texture2D(uPrevState, vUv);
-                // Соседние ячейки (9-точечный stencil для высокой точности)
-                float h = curr.r;
-                float hL = texture2D(uCurrState, vUv + vec2(-texel.x, 0.0)).r;
-                float hR = texture2D(uCurrState, vUv + vec2(texel.x, 0.0)).r;
-                float hT = texture2D(uCurrState, vUv + vec2(0.0, texel.y)).r;
-                float hB = texture2D(uCurrState, vUv + vec2(0.0, -texel.y)).r;
-                // Диагональные соседи для улучшенной точности
-                float hTL = texture2D(uCurrState, vUv + vec2(-texel.x, texel.y)).r;
-                float hTR = texture2D(uCurrState, vUv + vec2(texel.x, texel.y)).r;
-                float hBL = texture2D(uCurrState, vUv + vec2(-texel.x, -texel.y)).r;
-                float hBR = texture2D(uCurrState, vUv + vec2(texel.x, -texel.y)).r;
-                // 9-точечный Лапласиан для большей точности
-                float laplacian = (hL + hR + hT + hB) * 0.2 +
-                                  (hTL + hTR + hBL + hBR) * 0.05 - h;
-                // Поверхностное натяжение (билапласиан)
-                float tension = 0.0;
-                if (uTension > 0.0) {
-                    float laplacian2 = (
-                        texture2D(uCurrState, vUv + vec2(-2.0*texel.x, 0.0)).r +
-                        texture2D(uCurrState, vUv + vec2(2.0*texel.x, 0.0)).r +
-                        texture2D(uCurrState, vUv + vec2(0.0, 2.0*texel.y)).r +
-                        texture2D(uCurrState, vUv + vec2(0.0, -2.0*texel.y)).r -
-                        4.0 * h
-                    ) * 0.25 - laplacian;
-                    tension = -uTension * laplacian2;
-                }
-                // Волновое уравнение с затуханием
-                float c2 = uSpeed * uSpeed;
-                float newH = 2.0 * h - prev.r + c2 * (laplacian + tension);
-                newH *= uDamping;
-                // Вычисление скорости для рендеринга
-                float velocity = (newH - prev.r) * 0.5;
-                // Вычисление нормали
-                float dx = (hR - hL) * 0.5;
-                float dy = (hT - hB) * 0.5;
-                gl_FragColor = vec4(newH, velocity, dx, dy);
-            }
-        `;
-        // Шейдер добавления капли
-        const dropFS = `
-            precision highp float;
-            varying vec2 vUv;
-            uniform sampler2D uState;
-            uniform vec2 uDropPos;
-            uniform float uDropRadius;
-            uniform float uDropStrength;
-            uniform vec2 uResolution;
-            void main() {
-                vec4 state = texture2D(uState, vUv);
-                vec2 pos = vUv * uResolution;
-                float dist = length(pos - uDropPos);
-                if (dist < uDropRadius) {
-                    float factor = 1.0 - dist / uDropRadius;
-                    factor = factor * factor * (3.0 - 2.0 * factor); // Smoothstep
-                    state.r -= uDropStrength * factor;
-                }
-                gl_FragColor = state;
-            }
-        `;
-        // Шейдер рендеринга воды (высококачественный)
-        const renderFS = `
-            precision highp float;
-            varying vec2 vUv;
-            uniform sampler2D uState;
-            uniform sampler2D uBackground;
-            uniform vec2 uResolution;
-            uniform float uTime;
-            uniform vec3 uWaterColor;
-            uniform vec3 uDeepColor;
-            uniform vec3 uSkyColor;
-            uniform vec3 uFoamColor;
-            uniform vec3 uLightDir;
-            uniform float uRefraction;
-            uniform float uReflection;
-            uniform float uCaustics;
-            uniform float uBrightness;
-            uniform float uSpecular;
-            uniform float uWaterDepth;
-            uniform bool uHighQuality;
-            // Функция шума для деталей
-            float hash(vec2 p) {
-                return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);
-            }
-            float noise(vec2 p) {
-                vec2 i = floor(p);
-                vec2 f = fract(p);
-                f = f * f * (3.0 - 2.0 * f);
-                float a = hash(i);
-                float b = hash(i + vec2(1.0, 0.0));
-                float c = hash(i + vec2(0.0, 1.0));
-                float d = hash(i + vec2(1.0, 1.0));
-                return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
-            }
-            float fbm(vec2 p) {
-                float value = 0.0;
-                float amplitude = 0.5;
-                for (int i = 0; i < 4; i++) {
-                    value += amplitude * noise(p);
-                    p *= 2.0;
-                    amplitude *= 0.5;
-                }
-                return value;
-            }
-            vec3 getCaustics(vec2 uv, float time) {
-                vec2 p = uv * 8.0;
-                float c = 0.0;
-                for (int i = 0; i < 3; i++) {
-                    float t = time * (0.5 + float(i) * 0.2);
-                    c += abs(sin(p.x * 3.0 + t) * cos(p.y * 2.5 - t * 0.7));
-                    p = p * 1.5 + vec2(0.1, 0.2);
-                }
-                return vec3(c * 0.15);
-            }
-            void main() {
-                vec4 state = texture2D(uState, vUv);
-                float height = state.r;
-                float velocity = state.g;
-                vec2 gradient = state.ba;
-                // Высококачественная нормаль
-                vec2 texel = 1.0 / uResolution;
-                vec3 normal;
-                if (uHighQuality) {
-                    // Собель-оператор для нормалей
-                    float hL = texture2D(uState, vUv + vec2(-texel.x, 0.0)).r;
-                    float hR = texture2D(uState, vUv + vec2(texel.x, 0.0)).r;
-                    float hT = texture2D(uState, vUv + vec2(0.0, texel.y)).r;
-                    float hB = texture2D(uState, vUv + vec2(0.0, -texel.y)).r;
-                    float hTL = texture2D(uState, vUv + vec2(-texel.x, texel.y)).r;
-                    float hTR = texture2D(uState, vUv + vec2(texel.x, texel.y)).r;
-                    float hBL = texture2D(uState, vUv + vec2(-texel.x, -texel.y)).r;
-                    float hBR = texture2D(uState, vUv + vec2(texel.x, -texel.y)).r;
-                    float dx = (hTR + 2.0*hR + hBR - hTL - 2.0*hL - hBL) / 8.0;
-                    float dy = (hTL + 2.0*hT + hTR - hBL - 2.0*hB - hBR) / 8.0;
-                    normal = normalize(vec3(-dx * 30.0, -dy * 30.0, 1.0));
-                } else {
-                    normal = normalize(vec3(-gradient.x * 20.0, -gradient.y * 20.0, 1.0));
-                }
-                // Направление света
-                vec3 lightDir = normalize(uLightDir);
-                vec3 viewDir = vec3(0.0, 0.0, 1.0);
-                vec3 halfVec = normalize(lightDir + viewDir);
-                // Освещение
-                float diffuse = max(dot(normal, lightDir), 0.0);
-                float specularLight = pow(max(dot(normal, halfVec), 0.0), 64.0) * uSpecular;
-                // Френель
-                float fresnel = pow(1.0 - max(dot(normal, viewDir), 0.0), 3.0);
-                fresnel = mix(0.02, 1.0, fresnel);
-                // Преломление
-                vec2 refractedUv = vUv + normal.xy * uRefraction * 0.1;
-                refractedUv = clamp(refractedUv, 0.0, 1.0);
-                // Глубина и затухание
-                float depth = uWaterDepth + height * 0.3;
-                float absorption = exp(-depth * 2.0);
-                // Базовый цвет воды с градиентом глубины
-                vec3 waterCol = mix(uDeepColor, uWaterColor, absorption);
-                // Каустика
-                vec3 caustics = getCaustics(refractedUv, uTime) * uCaustics * absorption;
-                // Отражение неба
-                vec3 reflectedDir = reflect(-viewDir, normal);
-                float skyFactor = max(reflectedDir.z, 0.0);
-                vec3 skyReflection = mix(uSkyColor * 0.7, uSkyColor, skyFactor);
-                // Пена на гребнях волн
-                float foam = smoothstep(0.02, 0.08, height) * smoothstep(0.15, 0.08, height);
-                foam += smoothstep(0.0, 0.02, abs(velocity)) * 0.3;
-                foam = clamp(foam, 0.0, 1.0);
-                // Мелкие детали поверхности
-                if (uHighQuality) {
-                    float detail = fbm(vUv * 50.0 + uTime * 0.5) * 0.02;
-                    waterCol += vec3(detail);
-                }
-                // Финальное смешивание
-                vec3 color = waterCol;
-                color += caustics;
-                color = mix(color, skyReflection, fresnel * uReflection);
-                color += vec3(specularLight);
-                color = mix(color, uFoamColor, foam * 0.5);
-                color *= uBrightness;
-                color *= 0.8 + diffuse * 0.4;
-                // Тонмэппинг
-                color = color / (color + vec3(1.0));
-                color = pow(color, vec3(1.0/2.2));
-                gl_FragColor = vec4(color, 1.0);
-            }
-        `;
-        // Шейдерные программы
-        let waveSimProgram, dropProgram, renderProgram;
-        let quadBuffer;
-        // Компиляция шейдера
-        function compileShader(source, type) {
-            const shader = gl.createShader(type);
-            gl.shaderSource(shader, source);
-            gl.compileShader(shader);
-            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-                console.error('Shader error:', gl.getShaderInfoLog(shader));
-                return null;
-            }
-            return shader;
-        }
-        // Создание программы
-        function createProgram(vsSource, fsSource) {
-            const vs = compileShader(vsSource, gl.VERTEX_SHADER);
-            const fs = compileShader(fsSource, gl.FRAGMENT_SHADER);
-            const program = gl.createProgram();
-            gl.attachShader(program, vs);
-            gl.attachShader(program, fs);
-            gl.linkProgram(program);
-            if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-                console.error('Program error:', gl.getProgramInfoLog(program));
-                return null;
-            }
-            return program;
-        }
-        // Создание текстуры
-        function createTexture(width, height) {
-            const texture = gl.createTexture();
-            gl.bindTexture(gl.TEXTURE_2D, texture);
-            const ext = gl.getExtension('OES_texture_float');
-            const extLinear = gl.getExtension('OES_texture_float_linear');
-            if (isWebGL2) {
-                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, width, height, 0, gl.RGBA, gl.FLOAT, null);
-            } else if (ext) {
-                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.FLOAT, null);
-            } else {
-                gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
-            }
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, extLinear ? gl.LINEAR : gl.NEAREST);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, extLinear ? gl.LINEAR : gl.NEAREST);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-            return texture;
-        }
-        // Создание framebuffer
-        function createFramebuffer(texture) {
-            const fb = gl.createFramebuffer();
-            gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
-            gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0);
-            return fb;
-        }
-        // Инициализация
-        function init() {
-            // Создание буфера квада
-            quadBuffer = gl.createBuffer();
-            gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
-            gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-                -1, -1, 1, -1, -1, 1,
-                -1, 1, 1, -1, 1, 1
-            ]), gl.STATIC_DRAW);
-            // Создание программ
-            waveSimProgram = createProgram(quadVS, waveSimFS);
-            dropProgram = createProgram(quadVS, dropFS);
-            renderProgram = createProgram(quadVS, renderFS);
-            // Создание текстур и фреймбуферов
-            initFramebuffers();
-            resize();
-            window.addEventListener('resize', resize);
-            // События мыши и тача
-            canvas.addEventListener('mousedown', onPointerDown);
-            canvas.addEventListener('mousemove', onPointerMove);
-            canvas.addEventListener('mouseup', onPointerUp);
-            canvas.addEventListener('touchstart', onTouchStart, { passive: false });
-            canvas.addEventListener('touchmove', onTouchMove, { passive: false });
-            canvas.addEventListener('touchend', onTouchEnd);
-            // Настройка элементов управления
-            setupControls();
-            // Запуск анимации
-            requestAnimationFrame(animate);
-        }
-        function initFramebuffers() {
-            // Удаляем старые
-            framebuffers.forEach(fb => gl.deleteFramebuffer(fb));
-            textures.forEach(tex => gl.deleteTexture(tex));
-            framebuffers = [];
-            textures = [];
-            // Создаем три буфера (prev, curr, next)
-            for (let i = 0; i < 3; i++) {
-                const tex = createTexture(simWidth, simHeight);
-                textures.push(tex);
-                framebuffers.push(createFramebuffer(tex));
-            }
-            currentFB = 0;
-        }
-        function resize() {
-            const dpr = Math.min(window.devicePixelRatio, 2);
-            canvas.width = window.innerWidth * dpr;
-            canvas.height = window.innerHeight * dpr;
-            gl.viewport(0, 0, canvas.width, canvas.height);
-        }
-        // Обработчики событий
-        let isPointerDown = false;
-        let lastPointerPos = null;
-        function getPointerPos(e) {
-            const rect = canvas.getBoundingClientRect();
-            const x = (e.clientX - rect.left) / rect.width;
-            const y = 1.0 - (e.clientY - rect.top) / rect.height;
-            return { x, y };
-        }
-        function onPointerDown(e) {
-            isPointerDown = true;
-            const pos = getPointerPos(e);
-            addDrop(pos.x * simWidth, pos.y * simHeight);
-            lastPointerPos = pos;
-        }
-        function onPointerMove(e) {
-            if (!isPointerDown) return;
-            const pos = getPointerPos(e);
-            if (lastPointerPos) {
-                const dist = Math.sqrt(
-                    Math.pow(pos.x - lastPointerPos.x, 2) +
-                    Math.pow(pos.y - lastPointerPos.y, 2)
-                );
-                if (dist > 0.01) {
-                    addDrop(pos.x * simWidth, pos.y * simHeight);
-                    lastPointerPos = pos;
-                }
-            }
-        }
-        function onPointerUp() {
-            isPointerDown = false;
-            lastPointerPos = null;
-        }
-        function onTouchStart(e) {
-            e.preventDefault();
-            for (let touch of e.touches) {
-                const pos = getPointerPos(touch);
-                addDrop(pos.x * simWidth, pos.y * simHeight);
-            }
-            isPointerDown = true;
-        }
-        function onTouchMove(e) {
-            e.preventDefault();
-            for (let touch of e.touches) {
-                const pos = getPointerPos(touch);
-                addDrop(pos.x * simWidth, pos.y * simHeight);
-            }
-        }
-        function onTouchEnd(e) {
-            if (e.touches.length === 0) {
-                isPointerDown = false;
-            }
-        }
-        // Добавление капли
-        function addDrop(x, y) {
-            gl.useProgram(dropProgram);
-            gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffers[(currentFB + 1) % 3]);
-            gl.viewport(0, 0, simWidth, simHeight);
-            gl.activeTexture(gl.TEXTURE0);
-            gl.bindTexture(gl.TEXTURE_2D, textures[(currentFB + 1) % 3]);
-            gl.uniform1i(gl.getUniformLocation(dropProgram, 'uState'), 0);
-            gl.uniform2f(gl.getUniformLocation(dropProgram, 'uDropPos'), x, y);
-            gl.uniform1f(gl.getUniformLocation(dropProgram, 'uDropRadius'), params.dropRadius);
-            gl.uniform1f(gl.getUniformLocation(dropProgram, 'uDropStrength'), params.dropStrength);
-            gl.uniform2f(gl.getUniformLocation(dropProgram, 'uResolution'), simWidth, simHeight);
-            drawQuad(dropProgram);
         }
-        // Симуляция волн
-        function simulateWaves() {
-            gl.useProgram(waveSimProgram);
-            const nextFB = (currentFB + 2) % 3;
-            gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffers[nextFB]);
-            gl.viewport(0, 0, simWidth, simHeight);
-            gl.activeTexture(gl.TEXTURE0);
-            gl.bindTexture(gl.TEXTURE_2D, textures[currentFB]);
-            gl.uniform1i(gl.getUniformLocation(waveSimProgram, 'uPrevState'), 0);
-            gl.activeTexture(gl.TEXTURE1);
-            gl.bindTexture(gl.TEXTURE_2D, textures[(currentFB + 1) % 3]);
-            gl.uniform1i(gl.getUniformLocation(waveSimProgram, 'uCurrState'), 1);
-            gl.uniform2f(gl.getUniformLocation(waveSimProgram, 'uResolution'), simWidth, simHeight);
-            gl.uniform1f(gl.getUniformLocation(waveSimProgram, 'uDamping'), params.damping);
-            gl.uniform1f(gl.getUniformLocation(waveSimProgram, 'uSpeed'), params.waveSpeed * 0.5);
-            gl.uniform1f(gl.getUniformLocation(waveSimProgram, 'uTension'), params.tension);
-            gl.uniform1f(gl.getUniformLocation(waveSimProgram, 'uDt'), 1.0 / 60.0);
-            drawQuad(waveSimProgram);
-            currentFB = (currentFB + 1) % 3;
-        }
-        // Рендеринг
-        let time = 0;
-        function render() {
-            gl.useProgram(renderProgram);
-            gl.bindFramebuffer(gl.FRAMEBUFFER, null);
-            gl.viewport(0, 0, canvas.width, canvas.height);
-            gl.activeTexture(gl.TEXTURE0);
-            gl.bindTexture(gl.TEXTURE_2D, textures[(currentFB + 1) % 3]);
-            gl.uniform1i(gl.getUniformLocation(renderProgram, 'uState'), 0);
-            gl.uniform2f(gl.getUniformLocation(renderProgram, 'uResolution'), simWidth, simHeight);
-            gl.uniform1f(gl.getUniformLocation(renderProgram, 'uTime'), time);
-            gl.uniform3fv(gl.getUniformLocation(renderProgram, 'uWaterColor'), params.waterColor);
-            gl.uniform3fv(gl.getUniformLocation(renderProgram, 'uDeepColor'), params.deepColor);
-            gl.uniform3fv(gl.getUniformLocation(renderProgram, 'uSkyColor'), params.skyColor);
-            gl.uniform3fv(gl.getUniformLocation(renderProgram, 'uFoamColor'), params.foamColor);
-            gl.uniform3f(gl.getUniformLocation(renderProgram, 'uLightDir'),
-                params.lightX, params.lightY, params.lightZ);
-            gl.uniform1f(gl.getUniformLocation(renderProgram, 'uRefraction'), params.refraction);
-            gl.uniform1f(gl.getUniformLocation(renderProgram, 'uReflection'), params.reflection);
-            gl.uniform1f(gl.getUniformLocation(renderProgram, 'uCaustics'), params.caustics);
-            gl.uniform1f(gl.getUniformLocation(renderProgram, 'uBrightness'), params.brightness);
-            gl.uniform1f(gl.getUniformLocation(renderProgram, 'uSpecular'), params.specular);
-            gl.uniform1f(gl.getUniformLocation(renderProgram, 'uWaterDepth'), params.waterDepth);
-            gl.uniform1i(gl.getUniformLocation(renderProgram, 'uHighQuality'), params.highQuality ? 1 : 0);
-            drawQuad(renderProgram);
-        }
-        function drawQuad(program) {
-            const posLoc = gl.getAttribLocation(program, 'position');
-            gl.bindBuffer(gl.ARRAY_BUFFER, quadBuffer);
-            gl.enableVertexAttribArray(posLoc);
-            gl.vertexAttribPointer(posLoc, 2, gl.FLOAT, false, 0, 0);
-            gl.drawArrays(gl.TRIANGLES, 0, 6);
-        }
-        // FPS счетчик
-        let frameCount = 0;
-        let lastFpsUpdate = performance.now();
-        let fps = 60;
-        function updateFPS() {
-            frameCount++;
-            const now = performance.now();
-            if (now - lastFpsUpdate > 500) {
-                fps = Math.round(frameCount * 1000 / (now - lastFpsUpdate));
-                document.getElementById('fps').textContent = `FPS: ${fps}`;
-                frameCount = 0;
-                lastFpsUpdate = now;
-            }
-        }
-        // Главный цикл
-        function animate() {
-            time += 0.016;
-            // Автоматические волны (дождь)
-            if (params.autoWaves && Math.random() < params.rainFreq) {
-                addDrop(
-                    Math.random() * simWidth,
-                    Math.random() * simHeight
-                );
-            }
-            // Ветровые волны
-            if (params.windWaves) {
-                if (Math.random() < 0.3) {
-                    const x = Math.random() * simWidth;
-                    addDropWeak(x, simHeight * 0.9, params.windStrength);
-                }
-            }
-            // Симуляция (несколько итераций для стабильности)
-            for (let i = 0; i < 2; i++) {
-                simulateWaves();
             }
-            render();
-            updateFPS();
-            requestAnimationFrame(animate);
         }
-        function addDropWeak(x, y, strength) {
-            gl.useProgram(dropProgram);
-            gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffers[(currentFB + 1) % 3]);
-            gl.viewport(0, 0, simWidth, simHeight);
-            gl.activeTexture(gl.TEXTURE0);
-            gl.bindTexture(gl.TEXTURE_2D, textures[(currentFB + 1) % 3]);
-            gl.uniform1i(gl.getUniformLocation(dropProgram, 'uState'), 0);
-            gl.uniform2f(gl.getUniformLocation(dropProgram, 'uDropPos'), x, y);
-            gl.uniform1f(gl.getUniformLocation(dropProgram, 'uDropRadius'), 5);
-            gl.uniform1f(gl.getUniformLocation(dropProgram, 'uDropStrength'), strength);
-            gl.uniform2f(gl.getUniformLocation(dropProgram, 'uResolution'), simWidth, simHeight);
-            drawQuad(dropProgram);
-        }
-        // Настройка элементов управления
-        function setupControls() {
-            const controls = [
-                { id: 'waveSpeed', param: 'waveSpeed', decimals: 1 },
-                { id: 'damping', param: 'damping', decimals: 3 },
-                { id: 'dropRadius', param: 'dropRadius', decimals: 0 },
-                { id: 'dropStrength', param: 'dropStrength', decimals: 1 },
-                { id: 'tension', param: 'tension', decimals: 2 },
-                { id: 'waterDepth', param: 'waterDepth', decimals: 1 },
-                { id: 'refraction', param: 'refraction', decimals: 2 },
-                { id: 'reflection', param: 'reflection', decimals: 2 },
-                { id: 'caustics', param: 'caustics', decimals: 1 },
-                { id: 'brightness', param: 'brightness', decimals: 1 },
-                { id: 'specular', param: 'specular', decimals: 1 },
-                { id: 'lightX', param: 'lightX', decimals: 1 },
-                { id: 'lightY', param: 'lightY', decimals: 1 },
-                { id: 'lightZ', param: 'lightZ', decimals: 1 },
-                { id: 'rainFreq', param: 'rainFreq', decimals: 2 },
-                { id: 'windStrength', param: 'windStrength', decimals: 3 },
-                { id: 'simResolution', param: 'simResolution', decimals: 0 }
-            ];
-            controls.forEach(ctrl => {
-                const input = document.getElementById(ctrl.id);
-                const valueSpan = document.getElementById(ctrl.id + 'Val');
-                if (input) {
-                    input.value = params[ctrl.param];
-                    if (valueSpan) {
-                        valueSpan.textContent = params[ctrl.param].toFixed(ctrl.decimals);
-                    }
-                    input.addEventListener('input', () => {
-                        params[ctrl.param] = parseFloat(input.value);
-                        if (valueSpan) {
-                            valueSpan.textContent = params[ctrl.param].toFixed(ctrl.decimals);
-                        }
-                        // Изменение разрешения требует перезапуска
-                        if (ctrl.id === 'simResolution') {
-                            simWidth = params.simResolution;
-                            simHeight = params.simResolution;
-                            initFramebuffers();
                         }
-                    });
-                }
-            });
-            // Цвета
-            const colorInputs = [
-                { id: 'waterColor', param: 'waterColor' },
-                { id: 'deepColor', param: 'deepColor' },
-                { id: 'skyColor', param: 'skyColor' },
-                { id: 'foamColor', param: 'foamColor' }
-            ];
-            colorInputs.forEach(ctrl => {
-                const input = document.getElementById(ctrl.id);
-                if (input) {
-                    input.addEventListener('input', () => {
-                        params[ctrl.param] = hexToRgb(input.value);
-                    });
-                }
-            });
-            // Чекбоксы
-            document.getElementById('autoWaves').addEventListener('change', (e) => {
-                params.autoWaves = e.target.checked;
-            });
-            document.getElementById('windWaves').addEventListener('change', (e) => {
-                params.windWaves = e.target.checked;
-            });
-            document.getElementById('highQuality').addEventListener('change', (e) => {
-                params.highQuality = e.target.checked;
-            });
-        }
-        function hexToRgb(hex) {
-            const r = parseInt(hex.slice(1, 3), 16) / 255;
-            const g = parseInt(hex.slice(3, 5), 16) / 255;
-            const b = parseInt(hex.slice(5, 7), 16) / 255;
-            return [r, g, b];
-        }
-        function rgbToHex(rgb) {
-            const r = Math.round(rgb[0] * 255).toString(16).padStart(2, '0');
-            const g = Math.round(rgb[1] * 255).toString(16).padStart(2, '0');
-            const b = Math.round(rgb[2] * 255).toString(16).padStart(2, '0');
-            return `#${r}${g}${b}`;
-        }
-        // Пресеты
-        function applyPreset(preset) {
-            const presets = {
-                calm: {
-                    waveSpeed: 0.5, damping: 0.998, dropRadius: 20, dropStrength: 0.3,
-                    tension: 0.15, waterDepth: 0.6, refraction: 0.2, reflection: 0.5,
-                    caustics: 0.5, brightness: 1.0, specular: 1.0,
-                    waterColor: [0.1, 0.4, 0.6], deepColor: [0.02, 0.1, 0.15],
-                    skyColor: [0.9, 0.7, 0.5], autoWaves: false, rainFreq: 0.01
-                },
-                storm: {
-                    waveSpeed: 2.0, damping: 0.99, dropRadius: 10, dropStrength: 0.8,
-                    tension: 0.05, waterDepth: 1.2, refraction: 0.4, reflection: 0.3,
-                    caustics: 1.5, brightness: 0.8, specular: 2.0,
-                    waterColor: [0.05, 0.15, 0.25], deepColor: [0.01, 0.03, 0.08],
-                    skyColor: [0.3, 0.35, 0.4], autoWaves: true, rainFreq: 0.2
-                },
-                pool: {
-                    waveSpeed: 1.2, damping: 0.997, dropRadius: 15, dropStrength: 0.4,
-                    tension: 0.2, waterDepth: 0.5, refraction: 0.35, reflection: 0.6,
-                    caustics: 2.0, brightness: 1.2, specular: 1.5,
-                    waterColor: [0.2, 0.6, 0.8], deepColor: [0.1, 0.3, 0.5],
-                    skyColor: [0.5, 0.8, 1.0], autoWaves: false, rainFreq: 0.02
-                },
-                ocean: {
-                    waveSpeed: 1.5, damping: 0.994, dropRadius: 25, dropStrength: 0.6,
-                    tension: 0.08, waterDepth: 1.5, refraction: 0.25, reflection: 0.45,
-                    caustics: 1.0, brightness: 1.0, specular: 1.2,
-                    waterColor: [0.0, 0.3, 0.5], deepColor: [0.0, 0.05, 0.15],
-                    skyColor: [0.6, 0.8, 0.95], autoWaves: true, rainFreq: 0.05,
-                    windWaves: true, windStrength: 0.005
-                },
-                toxic: {
-                    waveSpeed: 0.8, damping: 0.996, dropRadius: 18, dropStrength: 0.5,
-                    tension: 0.12, waterDepth: 0.7, refraction: 0.3, reflection: 0.4,
-                    caustics: 1.5, brightness: 1.3, specular: 1.0,
-                    waterColor: [0.2, 0.8, 0.1], deepColor: [0.05, 0.2, 0.0],
-                    skyColor: [0.4, 0.5, 0.2], autoWaves: true, rainFreq: 0.03
-                },
-                lava: {
-                    waveSpeed: 0.4, damping: 0.992, dropRadius: 30, dropStrength: 0.7,
-                    tension: 0.02, waterDepth: 1.0, refraction: 0.15, reflection: 0.2,
-                    caustics: 0.3, brightness: 1.5, specular: 0.5,
-                    waterColor: [1.0, 0.3, 0.0], deepColor: [0.3, 0.0, 0.0],
-                    skyColor: [0.2, 0.1, 0.05], autoWaves: true, rainFreq: 0.08
                 }
             };
-            const p = presets[preset];
-            if (!p) return;
-            Object.assign(params, p);
-            // Обновляем UI
-            updateControlsUI();
-        }
-        function updateControlsUI() {
-            document.getElementById('waveSpeed').value = params.waveSpeed;
-            document.getElementById('waveSpeedVal').textContent = params.waveSpeed.toFixed(1);
-            document.getElementById('damping').value = params.damping;
-            document.getElementById('dampingVal').textContent = params.damping.toFixed(3);
-            document.getElementById('dropRadius').value = params.dropRadius;
-            document.getElementById('dropRadiusVal').textContent = params.dropRadius.toFixed(0);
-            document.getElementById('dropStrength').value = params.dropStrength;
-            document.getElementById('dropStrengthVal').textContent = params.dropStrength.toFixed(1);
-            document.getElementById('tension').value = params.tension;
-            document.getElementById('tensionVal').textContent = params.tension.toFixed(2);
-            document.getElementById('waterDepth').value = params.waterDepth;
-            document.getElementById('waterDepthVal').textContent = params.waterDepth.toFixed(1);
-            document.getElementById('refraction').value = params.refraction;
-            document.getElementById('refractionVal').textContent = params.refraction.toFixed(2);
-            document.getElementById('reflection').value = params.reflection;
-            document.getElementById('reflectionVal').textContent = params.reflection.toFixed(2);
-            document.getElementById('caustics').value = params.caustics;
-            document.getElementById('causticsVal').textContent = params.caustics.toFixed(1);
-            document.getElementById('brightness').value = params.brightness;
-            document.getElementById('brightnessVal').textContent = params.brightness.toFixed(1);
-            document.getElementById('specular').value = params.specular;
-            document.getElementById('specularVal').textContent = params.specular.toFixed(1);
-            document.getElementById('rainFreq').value = params.rainFreq;
-            document.getElementById('rainFreqVal').textContent = params.rainFreq.toFixed(2);
-            document.getElementById('autoWaves').checked = params.autoWaves;
-            document.getElementById('windWaves').checked = params.windWaves || false;
-            document.getElementById('waterColor').value = rgbToHex(params.waterColor);
-            document.getElementById('deepColor').value = rgbToHex(params.deepColor);
-            document.getElementById('skyColor').value = rgbToHex(params.skyColor);
-        }
-        function resetWater() {
-            initFramebuffers();
-        }
-        function toggleControls() {
-            document.getElementById('controls').classList.toggle('hidden');
         }
-        // Запуск
-        init();
     </script>
 </body>
 </html>

 <html lang="ru">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LMArena WebView + Prompt Generator</title>
     <style>
+        body, html {
             margin: 0;
             padding: 0;
+            height: 100%;
+            width: 100%;
             overflow: hidden;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
+        /* Стиль для WebView (iframe) */
+        iframe {
+            width: 100%;
+            height: 100%;
+            border: none;
             display: block;
         }
+        /* Плавающая кнопка справа */
+        .fab-btn {
             position: fixed;
+            right: 20px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 60px;
+            height: 60px;
+            background-color: #4CAF50;
+            color: white;
+            border-radius: 50%;
+            border: none;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
             cursor: pointer;
+            z-index: 1000;
+            font-size: 24px;
             display: flex;
             align-items: center;
             justify-content: center;
+            transition: transform 0.2s, background-color 0.2s;
         }
+        .fab-btn:hover {
+            transform: translateY(-50%) scale(1.1);
+            background-color: #45a049;
         }
+        /* Модальное окно (фон) */
+        .modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0, 0, 0.7);
+            z-index: 2000;
+            justify-content: center;
+            align-items: center;
         }
+        /* Контент модального окна */
+        .modal-content {
+            background-color: white;
+            padding: 25px;
+            border-radius: 12px;
+            width: 90%;
+            max-width: 500px;
+            max-height: 90vh;
+            overflow-y: auto;
+            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
+            position: relative;
         }
+        .modal-header {
             display: flex;
+            justify-content: space-between;
             align-items: center;
+            margin-bottom: 20px;
+            border-bottom: 1px solid #eee;
+            padding-bottom: 10px;
         }
+        .modal-header h2 {
+            margin: 0;
+            font-size: 1.2rem;
+            color: #333;
         }
+        .close-btn {
+            background: none;
+            border: none;
+            font-size: 28px;
+            cursor: pointer;
+            color: #aaa;
         }
+        .close-btn:hover {
+            color: #333;
         }
+        /* Форма */
+        .form-group {
+            margin-bottom: 15px;
         }
+        .form-group label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: 600;
+            font-size: 0.9rem;
+            color: #555;
         }
+        .form-group select, .form-group textarea {
             width: 100%;
             padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 6px;
+            font-size: 1rem;
+            box-sizing: border-box; /* Чтобы padding не ломал ширину */
         }
+        .form-group textarea {
+            resize: vertical;
+            min-height: 60px;
         }
+        /* Кнопка "Готово" */
+        .submit-btn {
+            width: 100%;
+            padding: 12px;
+            background-color: #2196F3;
+            color: white;
             border: none;
+            border-radius: 6px;
+            font-size: 1rem;
             cursor: pointer;
             margin-top: 10px;
+            font-weight: bold;
         }
+        .submit-btn:hover {
+            background-color: #0b7dda;
         }
+        /* Адаптив для маленьких экранов */
+        @media (max-width: 600px) {
+            .modal-content {
+                width: 95%;
+                padding: 15px;
             }
+            .fab-btn {
+                width: 50px;
+                height: 50px;
+                font-size: 20px;
             }
         }
     </style>
 </head>
 <body>
+    <!-- Webview Сайта -->
+    <iframe src="https://lmarena.ai/ru?chat-modality=image&mode=direct" allow="clipboard-write"></iframe>
+    <!-- Кнопка вызова генератора -->
+    <button class="fab-btn" onclick="openModal()" title="Генератор промптов">
+        🎨
+    </button>
+    <!-- Модальное окно -->
+    <div class="modal-overlay" id="promptModal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>Параметры Модели</h2>
+                <button class="close-btn" onclick="closeModal()">&times;</button>
             </div>
+            <form id="promptForm">
+                <!-- Пол -->
+                <div class="form-group">
+                    <label>Пол</label>
+                    <select id="gender">
+                        <option value="Male">Мужчина</option>
+                        <option value="Female">Женщина</option>
+                    </select>
+                </div>
+                <!-- Возраст -->
+                <div class="form-group">
+                    <label>Возраст</label>
+                    <select id="age">
+                        <option value="Baby (0-2 years)">Младенец (0-2)</option>
+                        <option value="Child (3-12 years)">Ребенок (3-12)</option>
+                        <option value="Teenager (13-19 years)">Подросток (13-19)</option>
+                        <option value="Young Adult (20-29 years)">Молодой (20-29)</option>
+                        <option value="Adult (30-39 years)">Взрослый (30-39)</option>
+                        <option value="Middle-aged (40-49 years)">Средних лет (40-49)</option>
+                        <option value="Senior (50-59 years)">Пожилой (50-59)</option>
+                        <option value="Elderly (60-69 years)">Старый (60-69)</option>
+                        <option value="Very Old (70+ years)">Глубокая старость (70+)</option>
+                    </select>
+                </div>
+                <!-- Национальность -->
+                <div class="form-group">
+                    <label>Национальность</label>
+                    <select id="nationality">
+                        <option value="European/Caucasian">Европейская</option>
+                        <option value="African/Black">Африканская</option>
+                        <option value="Asian">Азиатская</option>
+                        <option value="Latino/Hispanic">Латиноамериканская</option>
+                        <option value="Indian">Индийская</option>
+                        <option value="Middle Eastern">Ближневосточная</option>
+                        <option value="Slavic">Славянская</option>
+                        <option value="Nordic">Скандинавская</option>
+                        <option value="Mixed race">Смешанная</option>
+                    </select>
+                </div>
+                <!-- Цвет волос -->
+                <div class="form-group">
+                    <label>Цвет волос</label>
+                    <select id="hairColor">
+                        <option value="Blonde">Блонд</option>
+                        <option value="Brunette">Брюнет</option>
+                        <option value="Black">Черные</option>
+                        <option value="Red">Рыжие</option>
+                        <option value="Grey">Седые</option>
+                        <option value="White">Белые</option>
+                        <option value="Dyed Blue">Крашеные (Синий)</option>
+                        <option value="Dyed Pink">Крашеные (Розовый)</option>
+                        <option value="Bald">Лысый</option>
+                    </select>
+                </div>
+                <!-- Цвет глаз -->
+                <div class="form-group">
+                    <label>Цвет глаз</label>
+                    <select id="eyeColor">
+                        <option value="Blue">Голубые</option>
+                        <option value="Green">Зеленые</option>
+                        <option value="Brown">Карие</option>
+                        <option value="Hazel">Ореховые</option>
+                        <option value="Grey">Серые</option>
+                        <option value="Heterochromia">Разные глаза (Гетерохромия)</option>
+                    </select>
+                </div>
+                <!-- Прическа -->
+                <div class="form-group">
+                    <label>Прическа</label>
+                    <select id="hairstyle">
+                        <option value="Long straight">Длинные прямые</option>
+                        <option value="Short cut">Короткая стрижка</option>
+                        <option value="Bob cut">Каре</option>
+                        <option value="Curly">Кудрявые</option>
+                        <option value="Wavy">Волнистые</option>
+                        <option value="Ponytail">Хвост</option>
+                        <option value="Bun">Пучок</option>
+                        <option value="Buzz cut">Ежик (под машинку)</option>
+                        <option value="Dreadlocks">Дреды</option>
+                        <option value="Messy">Растрепанные</option>
+                    </select>
+                </div>
+                <!-- Фигура -->
+                <div class="form-group">
+                    <label>Фигура</label>
+                    <select id="bodyType">
+                        <option value="Slim">Стройная/Худая</option>
+                        <option value="Athletic">Атлетичная/Спортивная</option>
+                        <option value="Muscular">Мускулистая</option>
+                        <option value="Curvy">С формами (Curvy)</option>
+                        <option value="Average">Обычная</option>
+                        <option value="Plus-size">Плюс-сайз</option>
+                        <option value="Skinny">Очень худая</option>
+                    </select>
+                </div>
+                <!-- Стиль фото -->
+                <div class="form-group">
+                    <label>Стиль фотографии</label>
+                    <select id="style">
+                        <option value="Professional Studio Portrait, high key lighting">Студийный портрет (проф)</option>
+                        <option value="Creative Artistic, colorful lighting">Творческий/Арт</option>
+                        <option value="Cinematic, movie still, dramatic lighting">Кинематографичный</option>
+                        <option value="Street Photography, natural light">Уличная фотография</option>
+                        <option value="Cyberpunk, neon lights">Киберпанк (Неон)</option>
+                        <option value="Black and White, high contrast">Чёрно-белое</option>
+                        <option value="Fashion Editorial">Фэшн (Журнальный)</option>
+                        <option value="Vintage Polaroid">Винтаж (Полароид)</option>
+                        <option value="Fantasy, ethereal">Фэнтези</option>
+                        <option value="Corporate Headshot">Деловой портрет</option>
+                    </select>
+                </div>
+                <!-- Доп пожелания -->
+                <div class="form-group">
+                    <label>Дополнительные пожелания (напр. одежда, фон)</label>
+                    <textarea id="additional" placeholder="Например: в деловом костюме, на фоне ночного города..."></textarea>
+                </div>
+                <button type="button" class="submit-btn" onclick="generateAndCopy()">ГОТОВО</button>
+            </form>
         </div>
     </div>
     <script>
+        // Функции открытия и закрытия модального окна
+        function openModal() {
+            document.getElementById('promptModal').style.display = 'flex';
         }
+        function closeModal() {
+            document.getElementById('promptModal').style.display = 'none';
         }
+        // Закрытие по клику вне окна
+        window.onclick = function(event) {
+            const modal = document.getElementById('promptModal');
+            if (event.target == modal) {
+                closeModal();
             }
         }
+        // Основная логика генерации
+        async function generateAndCopy() {
+            // Сбор данных из формы
+            const gender = document.getElementById('gender').value;
+            const age = document.getElementById('age').value;
+            const nationality = document.getElementById('nationality').value;
+            const hairColor = document.getElementById('hairColor').value;
+            const eyeColor = document.getElementById('eyeColor').value;
+            const hairstyle = document.getElementById('hairstyle').value;
+            const bodyType = document.getElementById('bodyType').value;
+            const style = document.getElementById('style').value;
+            // Перевод пользовательского ввода (упрощенный, так как ввод на русском, но промпт нужен на английском)
+            // В идеале здесь нужен API переводчик, но мы просто добавим текст как есть,
+            // так как современные модели понимают смешанный контекст или транслитерацию.
+            // Но лучше всего пометить это как "custom_notes".
+            const additional = document.getElementById('additional').value;
+            // Формирование JSON объекта
+            const promptObject = {
+                "photo_request": {
+                    "subject": {
+                        "gender": gender,
+                        "age_category": age,
+                        "ethnicity": nationality,
+                        "appearance": {
+                            "hair_color": hairColor,
+                            "eye_color": eyeColor,
+                            "hairstyle": hairstyle,
+                            "body_type": bodyType
                         }
+                    },
+                    "photography_style": style,
+                    "technical_settings": "8k resolution, photorealistic, highly detailed, professional photography, depth of field",
+                    "additional_notes": additional ? additional : "None"
                 }
             };
+            // Преобразование в строку
+            const jsonString = JSON.stringify(promptObject, null, 2);
+            // Копирование в буфер обмена
+            try {
+                await navigator.clipboard.writeText(jsonString);
+                alert("JSON промпт скопирован в буфер обмена!");
+                closeModal();
+            } catch (err) {
+                console.error('Ошибка копирования: ', err);
+                // Фоллбэк для старых браузеров или если нет https
+                const textArea = document.createElement("textarea");
+                textArea.value = jsonString;
+                document.body.appendChild(textArea);
+                textArea.select();
+                document.execCommand("Copy");
+                textArea.remove();
+                alert("JSON промпт скопирован в буфер обмена!");
+                closeModal();
+            }
         }
     </script>
 </body>
 </html>