Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on May 4, 2025

Commit

fd12e08

verified ·

1 Parent(s): 7e22858

Update index.html

Browse files

Files changed (1) hide show

index.html +372 -373

index.html CHANGED Viewed

@@ -1,133 +1,184 @@
 <!DOCTYPE html>
-<html lang="en">
 <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 Mineral Water - Pure Refreshment</title>
     <style>
-        /* Basic Reset */
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
-        html, body {
-            overflow: hidden; /* Prevent default scrollbars */
-            width: 100%;
-            height: 100%;
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: #051d30; /* Dark blue fallback */
             color: #fff;
         }
-        /* Canvas Styling */
-        #bg {
             position: fixed;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            z-index: -1; /* Behind other content */
-            display: block; /* Prevents potential inline spacing issues */
         }
-        /* Content Overlay Styling */
         .content-section {
-            position: fixed;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 80%;
-            max-width: 600px;
-            padding: 30px;
-            background-color: rgba(15, 45, 70, 0.85); /* Semi-transparent dark blue */
-            border-radius: 15px;
-            border: 1px solid rgba(173, 216, 230, 0.5); /* Light blue border */
-            box-shadow: 0 0 25px rgba(173, 216, 230, 0.3);
-            opacity: 0;
-            visibility: hidden;
-            transition: opacity 0.8s ease-out, visibility 0.8s;
             text-align: center;
-            z-index: 10;
-            pointer-events: none; /* Allow clicking through initially */
         }
-        .content-section.visible {
-            opacity: 1;
-            visibility: visible;
-            pointer-events: auto; /* Allow interaction when visible */
         }
-        .content-section h1 {
-            font-size: 2.5em;
-            margin-bottom: 15px;
-            color: #e0faff; /* Very light blue */
-            text-shadow: 0 0 10px #fff;
         }
-         .content-section h2 {
-            font-size: 1.8em;
-            margin-bottom: 15px;
-            color: #c0eaff;
-         }
-        .content-section p {
             font-size: 1.1em;
             line-height: 1.6;
-            margin-bottom: 20px;
         }
-        .content-section img.logo {
-            max-width: 150px;
-            margin-bottom: 20px;
         }
-        /* Logo - Always Visible */
-        .site-logo {
-            position: fixed;
-            top: 20px;
-            left: 20px;
-            width: 100px;
-            height: auto;
-            z-index: 100;
-            filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
         }
-        /* Mobile Navigation Hint */
-        .mobile-hint {
-            position: fixed;
-            bottom: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            background-color: rgba(0, 0, 0, 0.6);
-            color: #fff;
-            padding: 8px 15px;
-            border-radius: 20px;
-            font-size: 0.9em;
-            z-index: 50;
-            display: none; /* Hidden by default, shown via JS for touch devices */
-            animation: pulse 2s infinite;
         }
-        @keyframes pulse {
-            0% { opacity: 1; }
-            50% { opacity: 0.7; }
-            100% { opacity: 1; }
         }
-        /* Loading Indicator */
         #loader {
             position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background-color: #051d30;
             display: flex;
             justify-content: center;
             align-items: center;
-            z-index: 200;
             color: #fff;
             font-size: 1.5em;
         }
@@ -136,321 +187,269 @@
 </head>
 <body>
-    <!-- Always visible Logo -->
-    <!-- Replace 'arctic_logo.png' with a Base64 encoded logo or a link if absolutely necessary -->
-    <img src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPGRlZnM+CiAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImdSYSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiNlMGZhZmYiLz4KICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYWRkOGU2Ii8+CiAgICA8L2xpbmVhckdyYWRpZW50PgogIDwvZGVmcz4KICAKICA8IS0tIEJhY2tncm91bmQgQ2lyY2xlIC0tPgogIDxjaXJjbGUgY3g9IjUwIiBjeT0iNTAiIHI9IjQ4IiBmaWxsPSJub25lIiBzdHJva2U9InVybCgjZ1JhKSIgc3Ryb2tlLXdpZHRoPSIzIiAvPgogIAogIDwhLS0gTW91bnRhaW4gU2hhcGVzIC0tPgogIDxwb2x5Z29uIHBvaW50cz0iMjUsNzUgNTAsMzAgNzUsNzUiIGZpbGw9InVybCgjZ1JhKSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEiIC8+CiAgPHBvbHlnb24gcG9pbnRzPSIzNSw3NSA1NSw1MCA3MCw3NSIgZmlsbD0iIzE0MjgzOCIgb3BhY2l0eT0iMC44IiAvPgoKICA8IS0tIFdhdGVyIFJpcHBsZXMgLS0+CiAgPHBhdGggZD0iTTIwLDgwIEMzMCw3NSw0MCw4NSw1MCw4MCIgc3Ryb2tlPSIjYWRkOGU2IiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiIG9wYWNpdHk9IjAuNyIvPgogIDxwYXRoIGQ9Ik01MCw4MyBDNjAsNzgsNzAsODgsODAsODMiIHN0cm9rZT0iI2FkZDhlNiIgc3Ryb2tlLXdpZHRoPSIyIiBmaWxsPSJub25lIiBvcGFjaXR5PSIwLjciLz4KCiAgPCEtLSBUZXh0ICJBIiAtLT4KICA8dGV4dCB4PSI1MCUiIHk9IjY1JSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IlNlcmlmLCBTYW5zLXNlcmlmIiBmb250LXNpemU9IjM1IiBmaWxsPSIjZmZmIiBmb250LXdlaWdodD0iYm9sZCI+CiAgICBBCiAgPC90ZXh0Pgo8L3N2Zz4K" alt="Arctic Logo" class="site-logo">
-    <!-- 3D Background Canvas -->
-    <canvas id="bg"></canvas>
-    <!-- Loading Indicator -->
-    <div id="loader">Loading Experience...</div>
-    <!-- Content Sections (Initially Hidden) -->
-    <div id="section-intro" class="content-section">
-        <!-- You can add a logo image here too -->
-        <!-- <img src="arctic_logo_white.png" alt="Arctic Logo" class="logo"> -->
-        <h1>Arctic</h1>
-        <p>Experience the Purest Water on Earth.</p>
-        <p style="font-size: 0.9em; opacity: 0.8;">Scroll down or swipe up to explore.</p>
     </div>
-    <div id="section-source" class="content-section">
-        <h2>Our Source</h2>
-        <p>Sourced directly from pristine Arctic glaciers, untouched by man. Filtered naturally through ancient ice, ensuring unparalleled purity and a crisp, refreshing taste.</p>
-    </div>
-    <div id="section-product" class="content-section">
-        <h2>The Water</h2>
-        <p>Perfectly balanced minerals provide a uniquely smooth taste. Available in Still and Sparkling. Choose Arctic for ultimate hydration and refreshment.</p>
-        <!-- Add bottle images here if possible (Base64 or linked) -->
-    </div>
-    <div id="section-sustainability" class="content-section">
-        <h2>Sustainability</h2>
-        <p>Committed to preserving the Arctic. We use sustainable extraction methods and recyclable packaging to protect the environment that gives us our precious resource.</p>
-    </div>
-    <div id="section-contact" class="content-section">
-        <h2>Contact Us</h2>
-        <p>Learn more about Arctic or discuss partnership opportunities. Reach out to our team today.</p>
-        <p>Email: info@arctic-water-example.com</p>
-    </div>
-    <!-- Mobile Navigation Hint -->
-    <div class="mobile-hint">Swipe Up or Down to Navigate</div>
-    <!-- Three.js Library (CDN) -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
-    <!-- Main Application Logic -->
-    <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const loader = document.getElementById('loader');
-            // --- Configuration ---
-            const scrollMultiplier = 0.005; // How much scroll affects camera movement
-            const touchMultiplier = 0.008;  // How much swipe affects camera movement
-            const cameraStartZ = 5;
-            const cameraEndZ = -45; // How "far" the user can scroll
-            const lerpFactor = 0.08; // Smoothing factor for camera movement (lower = smoother)
-            const fogNear = 1;
-            const fogFar = 60;
-            const fogColor = 0x051d30; // Match background
-            const contentSections = [
-                { id: 'section-intro', zStart: 5, zEnd: 0 },
-                { id: 'section-source', zStart: -5, zEnd: -15 },
-                { id: 'section-product', zStart: -20, zEnd: -30 },
-                { id: 'section-sustainability', zStart: -35, zEnd: -42 },
-                { id: 'section-contact', zStart: -44, zEnd: -50 } // A bit beyond camera end
-            ];
-            // --- Basic Scene Setup ---
-            let scene, camera, renderer;
-            let targetZ = cameraStartZ; // Target Z position for smooth animation
-            let currentZ = cameraStartZ; // Actual current Z position
-            let waterPlane, icebergs = [], particles;
-            // --- Mobile Touch Handling ---
-            let touchStartY = 0;
-            let isTouching = false;
-            const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-            function init() {
-                // Scene
-                scene = new THREE.Scene();
-                scene.fog = new THREE.Fog(fogColor, fogNear, fogFar);
-                scene.background = new THREE.Color(fogColor); // Set background color
-                // Camera
-                camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
-                camera.position.set(0, 1, cameraStartZ); // Start slightly above water level
-                camera.rotation.x = -0.1; // Slight downward look
-                // Renderer
-                const canvas = document.getElementById('bg');
-                renderer = new THREE.WebGLRenderer({ canvas: canvas, antialias: true });
-                renderer.setSize(window.innerWidth, window.innerHeight);
-                renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // Improve performance on high-res screens
-                // --- Lighting ---
-                const ambientLight = new THREE.AmbientLight(0xadeeff, 0.6); // Soft blue ambient light
-                scene.add(ambientLight);
-                const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8); // Simulates sun/moon
-                directionalLight.position.set(5, 10, 7);
-                scene.add(directionalLight);
-                // --- Create Scene Elements ---
-                createWater();
-                createIcebergs();
-                createParticles(); // Add subtle particles
-                // --- Event Listeners ---
-                window.addEventListener('resize', onWindowResize);
-                window.addEventListener('wheel', onScroll, { passive: false });
-                if (isMobile) {
-                    document.querySelector('.mobile-hint').style.display = 'block';
-                    window.addEventListener('touchstart', onTouchStart, { passive: false });
-                    window.addEventListener('touchmove', onTouchMove, { passive: false });
-                    window.addEventListener('touchend', onTouchEnd);
-                }
-                 // Hide loader and start animation
-                loader.style.display = 'none';
-                animate();
-            }
-            function createWater() {
-                // Simple plane for water surface
-                const waterGeometry = new THREE.PlaneGeometry(200, 200, 50, 50); // More segments for potential displacement later
-                 // Material that reacts to light, looks somewhat 'wet'
-                const waterMaterial = new THREE.MeshStandardMaterial({
-                    color: 0x60a0d0, // Blueish color
-                    transparent: true,
-                    opacity: 0.85,
-                    roughness: 0.2, // Make it a bit shiny
-                    metalness: 0.1,
-                    side: THREE.DoubleSide,
-                    // wireframe: true // For debugging
-                });
-                waterPlane = new THREE.Mesh(waterGeometry, waterMaterial);
-                waterPlane.rotation.x = -Math.PI / 2; // Lay flat
-                waterPlane.position.y = -1; // Position slightly below camera origin
-                scene.add(waterPlane);
             }
-             function createIcebergs() {
-                const icebergMaterial = new THREE.MeshStandardMaterial({
-                    color: 0xe0faff, // Very light blue/white
-                    roughness: 0.4,
-                    metalness: 0.0
-                });
-                const numIcebergs = 40;
-                for (let i = 0; i < numIcebergs; i++) {
-                    const sizeX = Math.random() * 3 + 1;
-                    const sizeY = Math.random() * 5 + 2; // Taller
-                    const sizeZ = Math.random() * 3 + 1;
-                    const geometry = new THREE.BoxGeometry(sizeX, sizeY, sizeZ);
-                    // Simple deformation
-                    const positionAttribute = geometry.getAttribute('position');
-                    for (let j = 0; j < positionAttribute.count; j++) {
-                         const y = positionAttribute.getY(j);
-                         const modifier = (y + sizeY / 2) / sizeY; // Modify more towards the top
-                         positionAttribute.setX(j, positionAttribute.getX(j) + (Math.random() - 0.5) * 0.5 * modifier);
-                         positionAttribute.setZ(j, positionAttribute.getZ(j) + (Math.random() - 0.5) * 0.5 * modifier);
-                         if (y > 0) { // Taper top slightly
-                             positionAttribute.setX(j, positionAttribute.getX(j) * (1 - (y / sizeY)*0.4) );
-                             positionAttribute.setZ(j, positionAttribute.getZ(j) * (1 - (y / sizeY)*0.4) );
-                         }
-                    }
-                     geometry.computeVertexNormals(); // Recalculate normals after deformation
-                    const iceberg = new THREE.Mesh(geometry, icebergMaterial);
-                    const angle = Math.random() * Math.PI * 2;
-                    const distance = Math.random() * 30 + 10; // Distance from center path
-                    const x = Math.cos(angle) * distance;
-                    const z = Math.sin(angle) * distance - (i * (Math.abs(cameraEndZ - cameraStartZ)) / numIcebergs) - 15; // Spread along Z path
-                    const y = -1 + sizeY / 2 - Math.random() * 0.5; // Base slightly below water
-                    iceberg.position.set(x, y, z);
-                    iceberg.rotation.y = Math.random() * Math.PI * 2;
-                    iceberg.rotation.x = (Math.random() - 0.5) * 0.1;
-                    iceberg.rotation.z = (Math.random() - 0.5) * 0.1;
-                    scene.add(iceberg);
-                    icebergs.push(iceberg);
                 }
-            }
-            function createParticles() {
-                const particleCount = 5000;
-                const positions = new Float32Array(particleCount * 3);
-                const colors = new Float32Array(particleCount * 3);
-                const color = new THREE.Color();
-                for (let i = 0; i < particleCount; i++) {
-                    const i3 = i * 3;
-                    positions[i3] = (Math.random() - 0.5) * 80; // Spread wider
-                    positions[i3 + 1] = (Math.random() - 0.5) * 30 + 5; // Y range
-                    positions[i3 + 2] = (Math.random() - 0.5) * Math.abs(cameraEndZ - cameraStartZ) * 1.5 + (cameraEndZ/2); // Z range along path
-                     // Color based on depth (optional)
-                    // const depthMix = Math.max(0, Math.min(1, (positions[i3+2] - cameraEndZ) / (cameraStartZ - cameraEndZ)));
-                    color.setHSL(0.6, 0.9, Math.random() * 0.5 + 0.4); // Shades of blue/cyan
-                    colors[i3] = color.r;
-                    colors[i3 + 1] = color.g;
-                    colors[i3 + 2] = color.b;
                 }
-                const geometry = new THREE.BufferGeometry();
-                geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
-                geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
-                const material = new THREE.PointsMaterial({
-                    size: 0.08,
-                    vertexColors: true,
-                    transparent: true,
-                    opacity: 0.7,
-                    blending: THREE.AdditiveBlending, // Looks nice for particles
-                    sizeAttenuation: true, // Smaller further away
-                    depthWrite: false // Prevent particles obscuring closer objects harshly
-                });
-                particles = new THREE.Points(geometry, material);
-                scene.add(particles);
             }
-            // --- Event Handlers ---
-            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(event) {
-                event.preventDefault(); // Prevent default page scroll
-                const scrollDelta = event.deltaY;
-                targetZ -= scrollDelta * scrollMultiplier;
-                // Clamp target Z within bounds
-                targetZ = Math.max(cameraEndZ, Math.min(cameraStartZ, targetZ));
-            }
-             function onTouchStart(event) {
-                // event.preventDefault(); // Only prevent if vertical scroll is intended
-                if (event.touches.length === 1) {
-                    isTouching = true;
-                    touchStartY = event.touches[0].clientY;
-                }
-             }
-            function onTouchMove(event) {
-                if (!isTouching || event.touches.length !== 1) return;
-                 event.preventDefault(); // Prevent scrolling page while swiping on canvas
-                const touchCurrentY = event.touches[0].clientY;
-                const deltaY = touchCurrentY - touchStartY;
-                targetZ += deltaY * touchMultiplier; // Inverted compared to scroll
-                targetZ = Math.max(cameraEndZ, Math.min(cameraStartZ, targetZ));
-                touchStartY = touchCurrentY; // Update start position for continuous swipe
-            }
-            function onTouchEnd() {
-                isTouching = false;
-            }
-            // --- Content Visibility Logic ---
-            function updateContentVisibility() {
-                contentSections.forEach(section => {
-                    const element = document.getElementById(section.id);
-                    if (!element) return;
-                    // Check if the camera's *current* Z is within the section's range
-                    if (currentZ < section.zStart && currentZ > section.zEnd) {
-                        element.classList.add('visible');
-                    } else {
-                        element.classList.remove('visible');
-                    }
-                });
-            }
-            // --- Animation Loop ---
-            function animate() {
-                requestAnimationFrame(animate);
-                const deltaTime = 0.016; // Assume ~60fps for simplicity, or use THREE.Clock
-                // Smooth camera movement using lerp
-                currentZ = THREE.MathUtils.lerp(currentZ, targetZ, lerpFactor);
-                camera.position.z = currentZ;
-                 // Subtle water movement (optional, very basic)
-                // waterPlane.material.displacementScale = 0.1; // Requires displacement map
-                // waterPlane.material.needsUpdate = true; // If material props change
-                 // Subtle particle movement (optional)
-                if (particles) {
-                    particles.rotation.y += 0.0005; // Slow rotation
-                    // You could also update individual particle positions here for flow effect (more complex)
-                }
-                // Update which content section is visible
-                updateContentVisibility();
-                renderer.render(scene, camera);
-            }
-            // --- Start ---
-            init();
-        });
     </script>
 </body>

 <!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;
         }
 </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: info@arctic-water.example.com</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/three@0.160.0/build/three.module.js",
+                "three/addons/": "https://unpkg.com/three@0.160.0/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>