Spaces:

Aleksmorshen
/

Testreact

Running

App Files Files Community

Aleksmorshen commited on May 4

Commit

7e22858

verified ·

1 Parent(s): 626501e

Update index.html

Browse files

Files changed (1) hide show

index.html +379 -325

index.html CHANGED Viewed

@@ -1,402 +1,456 @@
 <!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>
-        html, body {
-            overflow: hidden;
-            width: 100%;
-            height: 100%;
             margin: 0;
             padding: 0;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            color: #fff; /* Белый текст по умолчанию */
-            background-color: #001f3f; /* Темно-синий фон на случай долгой загрузки */
         }
-        #renderCanvas {
             width: 100%;
             height: 100%;
-            touch-action: none; /* Отключает стандартные действия браузера при касании (скролл, зум) */
-            display: block; /* Убирает лишний отступ снизу */
-            position: absolute;
             top: 0;
             left: 0;
-            z-index: 1;
         }
-        /* Стили для контентных блоков */
         .content-section {
-            position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            z-index: 2; /* Поверх канваса */
-            background-color: rgba(0, 31, 63, 0.7); /* Полупрозрачный темно-синий фон */
             padding: 30px;
             border-radius: 15px;
-            max-width: 80%;
-            width: 500px; /* Или другая ширина */
-            text-align: center;
             opacity: 0;
             visibility: hidden;
-            transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out;
-            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
         }
-        .content-section.active {
             opacity: 1;
             visibility: visible;
         }
-        .content-section h2 {
-            margin-top: 0;
             font-size: 2.5em;
-            color: #7FDBFF; /* Светло-голубой акцент */
-            text-shadow: 0 0 10px rgba(127, 219, 255, 0.5);
         }
         .content-section p {
             font-size: 1.1em;
             line-height: 1.6;
         }
-        /* Стили для мобильных контролов */
-        #mobile-controls {
-            position: absolute;
             bottom: 20px;
             left: 50%;
             transform: translateX(-50%);
-            z-index: 3; /* Поверх всего */
-            display: none; /* По умолчанию скрыты, показываем через JS если тачскрин */
-            background-color: rgba(0, 31, 63, 0.8);
-            padding: 10px 20px;
-            border-radius: 25px;
-        }
-         #mobile-controls button {
-            background-color: #7FDBFF;
-            color: #001f3f;
-            border: none;
-            padding: 12px 25px;
-            margin: 0 10px;
             border-radius: 20px;
-            font-size: 1.2em;
-            font-weight: bold;
-            cursor: pointer;
-            transition: background-color 0.3s ease, transform 0.1s ease;
-         }
-         #mobile-controls button:active {
-             background-color: #ffffff;
-             transform: scale(0.95);
-         }
-         /* Стиль для индикатора загрузки Babylon.js */
-         .babylonLoadingScreenContainer {
-            background-color: #001f3f !important;
-            color: #7FDBFF !important;
-         }
-         .babylonLoadingScreenContainer .babylonLoadingScreenText {
-             font-size: 1.5em !important;
-         }
     </style>
-    <!-- Подключение Babylon.js -->
-    <script src="https://cdn.babylonjs.com/babylon.js"></script>
-    <!-- Подключение материалов (для WaterMaterial) -->
-    <script src="https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
-    <!-- Подключение загрузчиков (если будете использовать 3D модели) -->
-    <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
 </head>
 <body>
-    <canvas id="renderCanvas"></canvas>
-    <!-- Контентные блоки (скрыты по умолчанию) -->
-    <div id="section-home" class="content-section">
-        <h2>Arctic</h2>
-        <p>Чистота северных ледников в каждой капле. Откройте для себя истинный вкус природы.</p>
     </div>
     <div id="section-source" class="content-section">
-        <h2>Наш Источник</h2>
-        <p>Вода "Arctic" добывается из реликтового подземного озера, защищенного вечной мерзлотой. Уник��льная природная фильтрация дарит ей кристальную чистоту и сбалансированный минеральный состав.</p>
     </div>
-    <div id="section-purity" class="content-section">
-        <h2>Идеальная Чистота</h2>
-        <p>Современные технологии розлива в сочетании с природной чистотой источника гарантируют сохранение всех полезных свойств воды "Arctic" без добавления консервантов.</p>
     </div>
-    <div id="section-product" class="content-section">
-        <h2>Наш Продукт</h2>
-        <p>Попробуйте "Arctic" в удобной упаковке: классическая ПЭТ бутылка 0.5л и 1.5л, а также премиальная стеклянная бутылка 0.75л для особых случаев.</p>
-        <!-- Сюда можно добавить изображения или 3D-превью бутылок -->
     </div>
     <div id="section-contact" class="content-section">
-        <h2>Связаться с нами</h2>
-        <p>Узнайте больше о воде "Arctic" и условиях сотрудничества. <br> Телефон: +7 (XXX) XXX-XX-XX <br> Email: [email protected]</p>
     </div>
-    <!-- Мобильные кнопки навигации -->
-    <div id="mobile-controls">
-        <button id="prevBtn">< Назад</button>
-        <button id="nextBtn">Далее ></button>
-    </div>
     <script>
-        const canvas = document.getElementById('renderCanvas');
-        const engine = new BABYLON.Engine(canvas, true, { stencil: true, preserveDrawingBuffer: true }, true);
-        // --- Настройки сцены ---
-        let scene;
-        let camera;
-        let waterMaterial;
-        const sectionElements = [
-            document.getElementById('section-home'),
-            document.getElementById('section-source'),
-            document.getElementById('section-purity'),
-            document.getElementById('section-product'),
-            document.getElementById('section-contact')
-        ];
-        const sectionPositions = [
-            new BABYLON.Vector3(0, 5, -10),    // Home (Начальная позиция)
-            new BABYLON.Vector3(0, 5, 50),     // Source
-            new BABYLON.Vector3(50, 5, 100),   // Purity
-            new BABYLON.Vector3(0, 5, 150),    // Product
-            new BABYLON.Vector3(-50, 5, 200)   // Contact
-        ];
-        const cameraLookAtOffsets = [ // Куда смотрит камера для каждой секции (относительно позиции камеры)
-             new BABYLON.Vector3(0, 0, 50), // Home смотрит вперед
-             new BABYLON.Vector3(0, 0, 50), // Source смотрит вперед
-             new BABYLON.Vector3(0, -2, 50),// Purity смотрит чуть вперед и вниз
-             new BABYLON.Vector3(0, 0, 50), // Product смотрит вперед
-             new BABYLON.Vector3(0, 0, 50)  // Contact смотрит вперед
-        ];
-        let currentSectionIndex = 0;
-        let isAnimating = false; // Флаг для предотвращения спама навигации
-        // --- Функция создания сцены ---
-        const createScene = () => {
-            scene = new BABYLON.Scene(engine);
-            scene.clearColor = new BABYLON.Color4(0.1, 0.2, 0.4, 1.0); // Глубокий синий цвет фона
-            // Камера
-            // Используем UniversalCamera для более гибкого управления взглядом
-            camera = new BABYLON.UniversalCamera("camera1", sectionPositions[0], scene);
-            camera.setTarget(sectionPositions[0].add(cameraLookAtOffsets[0])); // Устанавливаем начальный взгляд
-            // camera.attachControl(canvas, true); // Отключаем стандартное управление камерой
-            // Свет
-            const light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
-            light.intensity = 0.8;
-            const dirLight = new BABYLON.DirectionalLight("dirLight", new BABYLON.Vector3(-0.5, -1, -0.5), scene);
-            dirLight.position = new BABYLON.Vector3(20, 40, 20);
-            dirLight.intensity = 0.7;
-            // Вода (Используем WaterMaterial)
-            // Замените 'assets/waterbump.png' на ваш путь к текстуре нормалей воды
-            waterMaterial = new BABYLON.WaterMaterial("waterMaterial", scene, new BABYLON.Vector2(1024, 1024));
-            waterMaterial.bumpTexture = new BABYLON.Texture("assets/waterbump.png", scene); // Текстура для волн
-            waterMaterial.windForce = -5; // Сила ветра (влияет на скорость волн)
-            waterMaterial.waveHeight = 0.15; // Высота волн
-            waterMaterial.bumpHeight = 0.2; // Интенсивность рельефа
-            waterMaterial.waveLength = 0.1; // Длина волны
-            waterMaterial.waterColor = new BABYLON.Color3(0.1, 0.3, 0.6); // Цвет воды
-            waterMaterial.colorBlendFactor = 0.5; // Смешивание цвета воды и отражений/преломлений
-            waterMaterial.disableClipPlane = true; // Важно для UniversalCamera над водой
-            // Создаем водную поверхность
-            const waterMesh = BABYLON.MeshBuilder.CreateGround("waterMesh", {width: 1000, height: 1000, subdivisions: 32}, scene);
-            waterMesh.material = waterMaterial;
-            waterMesh.position.y = -0.5; // Немного ниже уровня камеры
-            // Skybox (Небо/Окружение)
-            // Замените 'assets/' на ваш путь и имена файлов skybox
-            const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size: 1000.0}, scene);
-            const skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
-            skyboxMaterial.backFaceCulling = false;
-            skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("assets/skybox", scene, ["_px.jpg", "_py.jpg", "_pz.jpg", "_nx.jpg", "_ny.jpg", "_nz.jpg"]);
-            skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
-            skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
-            skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
-            skybox.material = skyboxMaterial;
-            // Добавляем объекты в список рендеринга для воды (отражения/преломления)
-            waterMaterial.addToRenderList(skybox);
-            // Если добавите другие объекты (айсберги, бутылки), их тоже нужно добавить:
-            // waterMaterial.addToRenderList(icebergMesh);
-            // waterMaterial.addToRenderList(bottleModel);
-            // --- Плейсхолдер для 3D модели бутылки (замените на загрузку вашей модели) ---
-             const bottlePlaceholder = BABYLON.MeshBuilder.CreateCylinder("bottle", {height: 4, diameterTop: 0.8, diameterBottom: 1.2}, scene);
-             bottlePlaceholder.position = new BABYLON.Vector3(-5, 2, 155); // Позиция рядом с секцией "Продукт"
-             const bottleMat = new BABYLON.StandardMaterial("bottleMat", scene);
-             bottleMat.diffuseColor = new BABYLON.Color3(0.7, 0.85, 1); // Светло-голубой
-             bottleMat.alpha = 0.8; // Полупрозрачность
-             bottlePlaceholder.material = bottleMat;
-             waterMaterial.addToRenderList(bottlePlaceholder); // Добавить к отражениям воды
-            // Анимация вращения бутылки (опционально)
-            scene.registerBeforeRender(() => {
-                 bottlePlaceholder.rotation.y += 0.01;
-            });
-            // --- Конец плейсхолдера ---
-            // Показать первую секцию сразу
-            showSection(currentSectionIndex);
-            return scene;
-        };
-        // --- Функция отображения нужной секции ---
-        const showSection = (index) => {
-            sectionElements.forEach((el, i) => {
-                if (i === index) {
-                    el.classList.add('active');
-                } else {
-                    el.classList.remove('active');
                 }
-            });
-        };
-        // --- Функция навигации к секции ---
-        const navigateToSection = (index) => {
-            if (isAnimating || index < 0 || index >= sectionPositions.length) {
-                return; // Не анимировать, если уже анимируется или индекс вне диапазона
             }
-            isAnimating = true;
-            const targetPosition = sectionPositions[index];
-            const targetLookAt = targetPosition.add(cameraLookAtOffsets[index]); // Целевая точка взгляда
-            // Плавный переход текста (начинаем скрывать текущий)
-            sectionElements[currentSectionIndex].classList.remove('active');
-            // Анимация позиции камеры
-            const animCamPos = new BABYLON.Animation(
-                "camPosAnim", "position", 60,
-                BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
-                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
-            );
-            const keysPos = [];
-            keysPos.push({ frame: 0, value: camera.position });
-            keysPos.push({ frame: 100, value: targetPosition }); // 100 кадров анимации
-            animCamPos.setKeys(keysPos);
-            // Анимация цели (взгляда) камеры
-             const animCamTarget = new BABYLON.Animation(
-                "camTargetAnim", "target", 60, // Используем 'target' для UniversalCamera
-                BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
-                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
-            );
-             const keysTarget = [];
-             keysTarget.push({ frame: 0, value: camera.getTarget() });
-             keysTarget.push({ frame: 100, value: targetLookAt });
-             animCamTarget.setKeys(keysTarget);
-            // Добавляем Easing Function для плавности
-            const easingFunction = new BABYLON.QuadraticEase();
-            easingFunction.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
-            animCamPos.setEasingFunction(easingFunction);
-            animCamTarget.setEasingFunction(easingFunction);
-            // Запускаем анимации
-            scene.beginDirectAnimation(camera, [animCamPos, animCamTarget], 0, 100, false, 1, () => {
-                // По завершении анимации
-                currentSectionIndex = index;
-                showSection(currentSectionIndex); // Показываем новый текст
-                isAnimating = false;
-                // Обновляем кнопки на мобильных
-                updateMobileButtons();
-            });
-        };
-        // --- Обновление состояния кнопок на мобильных ---
-        const updateMobileButtons = () => {
-            const prevBtn = document.getElementById('prevBtn');
-            const nextBtn = document.getElementById('nextBtn');
-            if (!prevBtn || !nextBtn) return;
-            prevBtn.disabled = currentSectionIndex === 0 || isAnimating;
-            nextBtn.disabled = currentSectionIndex === sectionPositions.length - 1 || isAnimating;
-        };
-        // --- Инициализация ---
-        engine.displayLoadingUI(); // Показать экран загрузки
-        scene = createScene();
-        engine.runRenderLoop(() => {
-            if (scene) {
-                scene.render();
             }
-        });
-        window.addEventListener('resize', () => {
-            engine.resize();
-        });
-        // --- Обработка ввода ---
-        // 1. Скролл мышью для десктопа
-        let scrollTimeout;
-        const handleScroll = (event) => {
-            if (isAnimating) return; // Игнорировать скролл во время анимации
-            // Предотвращаем слишком частое срабатывание
-            clearTimeout(scrollTimeout);
-            scrollTimeout = setTimeout(() => {
-                 const delta = Math.sign(event.deltaY); // Определяем направление скролла
-                 if (delta > 0) { // Скролл вниз
-                     navigateToSection(currentSectionIndex + 1);
-                 } else if (delta < 0) { // Скролл вверх
-                     navigateToSection(currentSectionIndex - 1);
-                 }
-            }, 100); // Небольшая задержка
-        };
-        // 2. Кнопки для мобильных
-        const setupMobileControls = () => {
-             const mobileControlsDiv = document.getElementById('mobile-controls');
-             const prevBtn = document.getElementById('prevBtn');
-             const nextBtn = document.getElementById('nextBtn');
-             // Проверяем, есть ли тач события (простой способ определить мобильное устройство)
-             const isMobile = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (navigator.msMaxTouchPoints > 0);
-             if (isMobile && mobileControlsDiv && prevBtn && nextBtn) {
-                 mobileControlsDiv.style.display = 'block';
-                 prevBtn.addEventListener('click', () => navigateToSection(currentSectionIndex - 1));
-                 nextBtn.addEventListener('click', () => navigateToSection(currentSectionIndex + 1));
-                 // Обновляем состояние кнопок при загрузке
-                 updateMobileButtons();
-                 // Отключаем скролл мышью на мобильных, чтобы не конфликтовать
-                 canvas.removeEventListener('wheel', handleScroll);
-             } else {
-                 // Если не мобильное, используем скролл
-                 canvas.addEventListener('wheel', handleScroll, { passive: false }); // passive: false чтобы можно было предотвратить стандартный скролл страницы, если понадобится
              }
-        };
-        // Запускаем настройку контролов после того, как сцена готова
-         scene.executeWhenReady(() => {
-             engine.hideLoadingUI(); // Скрыть экран загрузки
-             setupMobileControls();
-         });
     </script>
 </body>

 <!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;
+        }
     </style>
 </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: [email protected]</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>