Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on 20 days ago

Commit

dbc4d00

verified ·

1 Parent(s): fd12e08

Update index.html

Browse files

Files changed (1) hide show

index.html +112 -450

index.html CHANGED Viewed

@@ -1,456 +1,118 @@
 <!DOCTYPE html>
-<html lang="ru">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-    <title>Arctic - Чистейшая Минеральная Вода</title>
-    <style>
-        /* --- Базовые стили --- */
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        html {
-            scroll-behavior: smooth; /* Плавный скролл по якорям (если нужны) */
-        }
-        body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            color: #fff;
-            background-color: #001f3f; /* Темно-синий фон на случай, если 3D не загрузится */
-            overflow-x: hidden; /* Запрещаем горизонтальный скролл */
-            /* Важно: Высота body должна быть больше viewport, чтобы был скролл */
-            /* Это достигается за счет высоты контентных секций */
-        }
-        /* --- Контейнер для 3D сцены --- */
-        #canvas-container {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: -1; /* Помещаем canvas позади контента */
-            overflow: hidden; /* Обрезаем все, что выходит за пределы */
-        }
-        canvas {
-            display: block; /* Убираем лишние отступы */
-        }
-        /* --- Контейнер для контента --- */
-        #content-container {
-            position: relative; /* Чтобы z-index работал */
-            z-index: 1;
-            width: 100%;
-            max-width: 900px; /* Ограничиваем ширину контента на десктопах */
-            margin: 0 auto; /* Центрируем контент */
-            padding: 0 20px; /* Отступы по бокам */
-        }
-        /* --- Секции контента --- */
-        .content-section {
-            min-height: 100vh; /* Каждая секция занимает минимум высоту экрана */
-            padding: 100px 20px 50px; /* Отступы внутри секции */
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            text-align: center;
-            /* Полупрозрачный фон для лучшей читаемости */
-            background-color: rgba(10, 30, 60, 0.6);
-            margin-bottom: 5vh; /* Небольшой отступ между секциями */
-            border-radius: 15px;
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-            transition: background-color 0.5s ease;
-        }
-        .content-section:last-child {
-            margin-bottom: 0;
-        }
-        /* --- Стилизация текста и элементов --- */
-        h1, h2, h3 {
-            margin-bottom: 20px;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
-        }
-        h1 {
-            font-size: 2.8em;
-            font-weight: bold;
-            color: #aee1f9; /* Светло-голубой */
-        }
-        h2 {
-            font-size: 2em;
-            color: #e0f7fa; /* Очень светло-голубой */
-        }
-         p {
-            font-size: 1.1em;
-            line-height: 1.6;
-            margin-bottom: 15px;
-            max-width: 600px; /* Ограничиваем ширину параграфов */
-        }
-        .logo {
-             max-width: 200px;
-             margin-bottom: 30px;
-             /* filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.5)); */
-             /* Замените src на реальный логотип (лучше SVG или PNG с прозрачностью) */
-        }
-        .cta-button {
-            display: inline-block;
-            padding: 12px 25px;
-            background-color: #00a8ff; /* Яркий голубой */
-            color: #fff;
-            border: none;
-            border-radius: 25px;
-            font-size: 1.1em;
-            text-decoration: none;
-            font-weight: bold;
-            cursor: pointer;
-            transition: background-color 0.3s ease, transform 0.2s ease;
-            box-shadow: 0 4px 8px rgba(0, 168, 255, 0.4);
-        }
-        .cta-button:hover {
-            background-color: #007bb5; /* Темнее при наведении */
-            transform: translateY(-2px);
-        }
-        /* Адаптивность для меньших экранов */
-        @media (max-width: 768px) {
-            h1 { font-size: 2.2em; }
-            h2 { font-size: 1.8em; }
-            p { font-size: 1em; }
-            .content-section { padding: 80px 15px 40px; }
-            .logo { max-width: 150px; }
-        }
-        @media (max-width: 480px) {
-            h1 { font-size: 1.8em; }
-            h2 { font-size: 1.5em; }
-            p { font-size: 0.9em; }
-            .content-section { padding: 60px 10px 30px; min-height: 90vh; }
-            .logo { max-width: 120px; }
-            .cta-button { font-size: 1em; padding: 10px 20px; }
-        }
-        /* --- Стили для "продуктов" (просто пример) --- */
-        .product-gallery {
-            display: flex;
-            flex-wrap: wrap;
-            justify-content: center;
-            gap: 20px;
-            margin-top: 20px;
-        }
-        .product-item {
-            background-color: rgba(255, 255, 255, 0.1);
-            padding: 15px;
-            border-radius: 10px;
-            width: 150px; /* Фиксированная ширина для примера */
-            text-align: center;
-        }
-        .product-item img {
-            max-width: 80px;
-            height: auto;
-            margin-bottom: 10px;
-        }
-        .product-item h3 {
-            font-size: 1em;
-            margin-bottom: 5px;
-            color: #fff;
-        }
-        /* --- Простой индикатор загрузки --- */
-        #loader {
-            position: fixed;
-            top: 0; left: 0;
-            width: 100%; height: 100%;
-            background-color: #001f3f;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            z-index: 1000;
-            color: #fff;
-            font-size: 1.5em;
-        }
-    </style>
 </head>
 <body>
-    <!-- Индикатор загрузки -->
-    <div id="loader">Загрузка 3D сцены...</div>
-    <!-- Контейнер для Canvas -->
-    <div id="canvas-container"></div>
-    <!-- Основной контент сайта -->
-    <div id="content-container">
-        <!-- Секция 1: Главный экран -->
-        <section id="intro" class="content-section">
-             <!-- Замените на ваш логотип -->
-             <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDUiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2FlZTFmOSIgc3Ryb2tlLXdpZHRoPSI1Ii8+CiAgPHBhdGggZD0iTTMwIDQwIFE1MCAxNSA3MCA0MCIgc3Ryb2tlPSIjMDBlZWY4IiBzdHJva2Utd2lkdGg9IjUiIGZpbGw9Im5vbmUiLz4KICA8cGF0aCBkPSJNMzUgNjAgUTUwIDg1IDY1IDYwIiBzdHJva2U9IiMxN2RhZjIiIHN0cm9rZS13aWR0aD0iNCIgZmlsbD0ibm9uZSIvPgogIDx0ZXh0IHg9IjUwIiB5PSI3NSIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMTIiIGZpbGw9IiNmZmYiIHRleHQtYW5jaG9yPSJtaWRkbGUiPkFjdGljPC90ZXh0Pgo8L3N2Zz4K" alt="Arctic Logo Placeholder" class="logo">
-            <h1>Arctic</h1>
-            <h2>Чистота северных глубин в каждой капле</h2>
-            <p>Откройте для себя вкус настоящей природной свежести. Вода "Arctic" добывается из артезианских источников, защищенных вечной мерзлотой.</p>
-            <a href="#about" class="cta-button">Узнать больше</a>
-        </section>
-        <!-- Секция 2: О нас -->
-        <section id="about" class="content-section">
-            <h2>Источник чистоты</h2>
-            <p>Наша вода проходит естественную фильтрацию через слои древних минеральных пород, обогащаясь полезными элементами и сохраняя свою первозданную структуру. Мы бережно доставляем ее вам, сохраняя все уникальные свойства.</p>
-             <p>Технологии XXI века и уважение к природе позволяют нам гарантировать высочайшее качество "Arctic".</p>
-        </section>
-        <!-- Секция 3: Продукция -->
-        <section id="products" class="content-section">
-            <h2>Наша линейка</h2>
-            <p>Выберите свой формат "Arctic" для любого случая.</p>
-            <div class="product-gallery">
-                <div class="product-item">
-                    <!-- Замените на фото продукта -->
-                    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgODAgMTIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHg9IjEwIiB5PSIyMCIgd2lkdGg9IjYwIiBoZWlnaHQ9Ijk1IiByeD0iMTAiIGZpbGw9IiNhZWUxZjkiIG9wYWNpdHk9IjAuNyIvPgogIDxyZWN0IHg9IjIwIiB5PSI1IiB3aWR0aD0iNDAiIGhlaWdodD0iMjAiIHJ4PSI1IiBmaWxsPSIjZmZmIi8+CiAgPHJlY3QgeD0iMTUiIHk9IjI1IiB3aWR0aD0iNTAiIGhlaWdodD0iODAiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMyIvPgo8L3N2Zz4K" alt="Бутылка 0.5л">
-                    <h3>0.5л Негазированная</h3>
-                </div>
-                <div class="product-item">
-                    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgODAgMTIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHg9IjEwIiB5PSIyMCIgd2lkdGg9IjYwIiBoZWlnaHQ9Ijk1IiByeD0iMTAiIGZpbGw9IiMzYzkzYjgiIG9wYWNpdHk9IjAuNyIvPgogIDxyZWN0IHg9IjIwIiB5PSI1IiB3aWR0aD0iNDAiIGhlaWdodD0iMjAiIHJ4PSI1IiBmaWxsPSIjZmZmIi8+CiAgPHJlY3QgeD0iMTUiIHk9IjI1IiB3aWR0aD0iNTAiIGhlaWdodD0iODAiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMyIvPgo8L3N2Zz4K" alt="Бутылка 1.5л">
-                    <h3>1.5л Газированная</h3>
-                </div>
-                 <div class="product-item">
-                    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgODAgMTIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxyZWN0IHg9IjEwIiB5PSIyMCIgd2lkdGg9IjYwIiBoZWlnaHQ9Ijk1IiByeD0iMTAiIGZpbGw9IiNiM2U1ZmMiIG9wYWNpdHk9IjAuNyIvPgogIDxyZWN0IHg9IjIwIiB5PSI1IiB3aWR0aD0iNDAiIGhlaWdodD0iMjAiIHJ4PSI1IiBmaWxsPSIjZmZmIi8+CiAgPHJlY3QgeD0iMTUiIHk9IjI1IiB3aWR0aD0iNTAiIGhlaWdodD0iODAiIGZpbGw9IiNmZmYiIG9wYWNpdHk9IjAuMyIvPgo8L3N2Zz4K" alt="Бутылка 5л">
-                    <h3>5л Негазированная (для дома и офиса)</h3>
-                </div>
-            </div>
-        </section>
-        <!-- Секция 4: Контакты -->
-        <section id="contact" class="content-section">
-            <h2>Связаться с нами</h2>
-            <p>Есть вопросы или предложения? Мы всегда рады общению.</p>
-            <p>Телефон: 8 (800) 123-45-67 (Звонок бесплатный)</p>
-            <p>Email: [email protected]</p>
-            <a href="mailto:info@arctic-water.example.com" class="cta-button">Написать нам</a>
-        </section>
-    </div>
-    <!-- Подключение Three.js и аддонов -->
-    <script type="importmap">
-        {
-            "imports": {
-                "three": "https://unpkg.com/[email protected]/build/three.module.js",
-                "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
-            }
-        }
-    </script>
-    <script type="module">
-        import * as THREE from 'three';
-        import { Water } from 'three/addons/objects/Water.js';
-        // OrbitControls можно добавить для отладки навигации, но для финальной версии скролла он не нужен
-        // import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
-        let scene, camera, renderer, water, clock;
-        let container;
-        let scrollY = 0;
-        let targetCameraZ = 15; // Начальная позиция камеры по Z
-        const cameraPathLength = 50; // Общая длина "пути" камеры по Z
-        const cameraBobbingAmplitude = 0.5; // Амплитуда покачивания камеры по Y
-        const cameraBobbingFrequency = 0.5; // Частота покачивания
-        const loaderElement = document.getElementById('loader');
-        function init() {
-            container = document.getElementById('canvas-container');
-            clock = new THREE.Clock();
-            // --- Сцена ---
-            scene = new THREE.Scene();
-            scene.fog = new THREE.FogExp2(0x0a1f30, 0.015); // Легкий туман для атмосферы
-            // --- Камера ---
-            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
-            camera.position.set(0, 5, targetCameraZ); // Начальная позиция чуть выше воды
-            camera.lookAt(0, 2, 0); // Смотрим немного вниз к центру сцены
-            // --- Рендерер ---
-            renderer = new THREE.WebGLRenderer({ antialias: true, alpha: false }); // alpha: false для непрозрачного фона
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Ограничиваем pixelRatio для производительности
-             renderer.toneMapping = THREE.ACESFilmicToneMapping; // Для более приятного вида
-            container.appendChild(renderer.domElement);
-            // --- Свет ---
-            const ambientLight = new THREE.AmbientLight(0xcccccc, 0.8); // Мягкий общий свет
-            scene.add(ambientLight);
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 1.5); // Солнечный свет
-            directionalLight.position.set(-50, 50, 20);
-            // directionalLight.castShadow = true; // Тени могут сильно ударить по производительности, включать осторожно
-            scene.add(directionalLight);
-             // --- Вода ---
-            const waterGeometry = new THREE.PlaneGeometry(1000, 1000); // Большой плейн для воды
-            // Текстура для нормалей воды (создает эффект ряби)
-            // Используем текстуру из примеров three.js
-             const waterNormals = new THREE.TextureLoader().load(
-                'https://raw.githubusercontent.com/mrdoob/three.js/dev/examples/textures/waternormals.jpg',
-                 function ( texture ) {
-                    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
-                    console.log("Water normals loaded successfully.");
-                    // Убираем лоадер после загрузки текстуры
-                    if (loaderElement) loaderElement.style.display = 'none';
-                    // Начинаем анимацию только после загрузки
-                    animate();
-                },
-                undefined, // onProgress callback (можно добавить)
-                function ( err ) {
-                    console.error( 'An error happened loading the water texture:', err );
-                     // Если текстура не загрузилась, все равно убираем лоадер и пытаемся рисовать
-                    if (loaderElement) loaderElement.style.display = 'none';
-                    animate(); // Пытаемся запустить анимацию даже без текстуры
-                }
-            );
-            water = new Water(
-                waterGeometry,
-                {
-                    textureWidth: 512,
-                    textureHeight: 512,
-                    waterNormals: waterNormals,
-                    sunDirection: new THREE.Vector3(-50, 50, 20), // Направление света для отражений/бликов
-                    sunColor: 0xffffff,
-                    waterColor: 0x003e5f, // Цвет воды (темно-сине-зеленый)
-                    distortionScale: 3.0, // Сила искажений ряби
-                    fog: scene.fog !== undefined
-                }
-            );
-            water.rotation.x = - Math.PI / 2; // Поворачиваем плейн, чтобы он был горизонтальным
-            water.position.y = 0; // Устанавливаем уровень воды
-            scene.add(water);
-            // --- Небо (простой вариант - куб с градиентом) ---
-            const skyGeometry = new THREE.SphereGeometry(500, 32, 16); // Большая сфера
-            const skyMaterial = new THREE.MeshBasicMaterial({
-                color: 0x87ceeb, // Цвет неба
-                side: THREE.BackSide, // Рендерим внутреннюю часть сферы
-                fog: false // Небо не подвержено туману
-            });
-             // Можно усложнить, сделав градиентный шейдер или загрузив CubeTexture
-            const sky = new THREE.Mesh(skyGeometry, skyMaterial);
-             sky.position.y = -10; // Слегка опускаем, чтобы горизонт был виден
-            scene.add(sky);
-             // --- (Опционально) Добавление простых объектов "айсбергов" ---
-            const icebergGeometry = new THREE.IcosahedronGeometry(5, 0); // Простая геометрия
-            const icebergMaterial = new THREE.MeshStandardMaterial({
-                color: 0xe0f7fa,
-                roughness: 0.7,
-                metalness: 0.1,
-                flatShading: true // "Граненый" вид
-            });
-            for (let i = 0; i < 5; i++) {
-                 const iceberg = new THREE.Mesh(icebergGeometry, icebergMaterial);
-                 iceberg.position.set(
-                    (Math.random() - 0.5) * 150, // Разброс по X
-                    Math.random() * 1 - 0.5,     // Немного над/под водой
-                    (Math.random() - 0.5) * 150  // Разброс по Z
-                );
-                 iceberg.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI);
-                 iceberg.scale.setScalar(Math.random() * 2 + 1); // Разный размер
-                 scene.add(iceberg);
-            }
-            // --- Обработчики событий ---
-            window.addEventListener('resize', onWindowResize);
-            window.addEventListener('scroll', onScroll);
-             // Вызываем обработчик скролла один раз, чтобы установить начальную позицию камеры
-            onScroll();
-             console.log("Three.js scene initialized.");
-        }
-        function onWindowResize() {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-             renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
-        }
-        function onScroll() {
-            // Нормализуем скролл (от 0 до 1)
-             const scrollableHeight = document.documentElement.scrollHeight - window.innerHeight;
-            // Предотвращаем деление на ноль, если контент не прокручивается
-            const scrollProgress = scrollableHeight > 0 ? window.scrollY / scrollableHeight : 0;
-            // Обновляем целевую позицию камеры по Z
-            // Двигаемся от начальной точки `targetCameraZ` "вглубь" на `cameraPathLength`
-            targetCameraZ = 15 - (scrollProgress * cameraPathLength);
-             // Обновляем целевую позицию камеры по Y для эффекта покачивания
-             // Используем время (или скролл) для синусоиды
-            const time = clock.getElapsedTime(); // Можно использовать scrollProgress * N для зависимости от скролла
-            const bobbingY = Math.sin(time * cameraBobbingFrequency * Math.PI * 2) * cameraBobbingAmplitude;
-            const baseCameraY = 5; // Базовая высота камеры над водой
-            // targetCameraY = baseCameraY + bobbingY; // Пока без покачивания, чтобы сфокусироваться на Z
-             // camera.position.y = baseCameraY + bobbingY; // Обновляем Y с покачиванием
-            // Плавное перемещение камеры к целевым значениям (не в onScroll, а в animate)
-        }
-        function animate() {
-            requestAnimationFrame(animate);
-            const delta = clock.getDelta();
-            const time = clock.getElapsedTime();
-            // Анимация воды
-            if (water) {
-                water.material.uniforms['time'].value += delta * 0.5; // Скорость анимации воды
-            }
-            // Плавное (интерполированное) движение камеры к целевым значениям
-            const lerpFactor = 0.05; // Коэффициент плавности (меньше = плавнее, но медленнее)
-            camera.position.z += (targetCameraZ - camera.position.z) * lerpFactor;
-             // Добавляем покачивание на основе времени
-            const bobbingY = Math.sin(time * cameraBobbingFrequency * Math.PI * 2) * cameraBobbingAmplitude;
-            const targetCameraY = 5 + bobbingY; // Базовая высота + покачивание
-            camera.position.y += (targetCameraY - camera.position.y) * lerpFactor;
-            // Обновляем взгляд камеры (если нужно, чтобы она смотрела не прямо)
-            // camera.lookAt(0, 2, camera.position.z - 10); // Смотрим немного вперед по пути
-            renderer.render(scene, camera);
-        }
-         // Запускаем инициализацию
-         // Ждем загрузки DOM перед инициализацией Three.js
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', init);
-        } else {
-            init(); // DOM уже загружен
-        }
-    </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
+  <meta charset="UTF-8">
+  <title>Вода — Симуляция</title>
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      background: #0e0f1b;
+    }
+    canvas {
+      display: block;
+      background: linear-gradient(#0f2027, #203a43, #2c5364);
+    }
+  </style>
 </head>
 <body>
+<canvas id="water"></canvas>
+<script>
+  const canvas = document.getElementById('water');
+  const ctx = canvas.getContext('2d');
+  let width = window.innerWidth;
+  let height = window.innerHeight;
+  canvas.width = width;
+  canvas.height = height;
+  const waveCount = 200;
+  const damping = 0.03;
+  const tension = 0.025;
+  const waves = [];
+  for (let i = 0; i < waveCount; i++) {
+    waves[i] = {
+      x: (i / (waveCount - 1)) * width,
+      y: height / 2,
+      vy: 0,
+      targetY: height / 2
+    };
+  }
+  function update() {
+    for (let i = 0; i < waveCount; i++) {
+      const point = waves[i];
+      const dy = point.y - point.targetY;
+      point.vy -= dy * tension;
+      point.vy *= 1 - damping;
+      point.y += point.vy;
+    }
+    // propagate waves
+    const leftDeltas = [], rightDeltas = [];
+    for (let j = 0; j < 8; j++) {
+      for (let i = 0; i < waveCount; i++) {
+        if (i > 0) {
+          leftDeltas[i] = 0.25 * (waves[i].y - waves[i - 1].y);
+          waves[i - 1].vy += leftDeltas[i];
+        }
+        if (i < waveCount - 1) {
+          rightDeltas[i] = 0.25 * (waves[i].y - waves[i + 1].y);
+          waves[i + 1].vy += rightDeltas[i];
+        }
+      }
+    }
+  }
+  function draw() {
+    ctx.clearRect(0, 0, width, height);
+    ctx.beginPath();
+    ctx.moveTo(0, height);
+    ctx.lineTo(waves[0].x, waves[0].y);
+    for (let i = 1; i < waveCount; i++) {
+      ctx.lineTo(waves[i].x, waves[i].y);
+    }
+    ctx.lineTo(width, height);
+    ctx.closePath();
+    const gradient = ctx.createLinearGradient(0, height / 2, 0, height);
+    gradient.addColorStop(0, '#4facfe');
+    gradient.addColorStop(1, '#00f2fe');
+    ctx.fillStyle = gradient;
+    ctx.fill();
+  }
+  function loop() {
+    update();
+    draw();
+    requestAnimationFrame(loop);
+  }
+  loop();
+  canvas.addEventListener('mousemove', (e) => {
+    const mouseX = e.clientX;
+    const index = Math.floor((mouseX / width) * waveCount);
+    if (index >= 0 && index < waveCount) {
+      waves[index].vy = -5;
+    }
+  });
+  window.addEventListener('resize', () => {
+    width = window.innerWidth;
+    height = window.innerHeight;
+    canvas.width = width;
+    canvas.height = height;
+    for (let i = 0; i < waveCount; i++) {
+      waves[i].x = (i / (waveCount - 1)) * width;
+      waves[i].y = height / 2;
+      waves[i].targetY = height / 2;
+    }
+  });
+</script>
 </body>
 </html>