Spaces:

Fakhammer
/

flooot

Running

App Files Files Community

Fakhammer commited on Jun 23, 2025

Commit

0ddadf6

verified ·

1 Parent(s): 5d2939b

"Разработать высокотехнологичный одностраничный лендинг для компании 'ЗИППРОМ', специализирующейся на ремонте плоских кровель полимерными материалами без демонтажа старого покрытия. Сайт должен подчеркивать ключевой месседж: 'Ваша кровля под надёжной защитой'." Ключевые требования: Фирменный стиль: Основные цвета: защитный синий (#003366) + сигнальный оранжевый (#FF6600) Логотип: сочетание аббревиатуры "ЗИППРОМ" с графическим элементом в виде защитного щита Шрифты: Rubik (заголовки) + Open Sans (основной текст) Профессиональная анимация: Параллакс-скроллинг с эффектом "нанесения покрытия" 3D-анимация молекулярной структуры полимера Интерактивная схема работы с пошаговой визуализацией Микроанимации всех интерактивных элементов Эффект "защитного поля" при наведении на ключевые элементы Обязательные разделы: Главный экран: Видеофон с процессом нанесения покрытия Слоган: "ЗИППРОМ: Ваша кровля под надёжной защитой" Кнопка CTA: "Рассчитать защиту для вашей кровли" Технологии: Интерактивная 3D-модель кровельного "пирога" Анимированная инфографика преимуществ: • Бесшовное покрытие • 20+ лет защиты • Работа без демонтажа • Всепогодное решение Калькулятор: Интуитивный интерфейс с анимацией заполнения Параметры: ✓ Площадь кровли (слайдер с визуализацией) ✓ Тип повреждений (интерактивная диагностика) ✓ Дополнительная защита (анимированные опции) Мгновенный расчёт с эффектом "появления защитного слоя" Кейсы: 3D-галерея объектов с эффектом "до/после" Интерактивная карта выполненных объектов Гарантии: Анимированная временная шкала гарантии Виртуальный тур по производству Технические особенности: Реализация на WebGL + GSAP Адаптивная загрузка ресурсов Оптимизация для Core Web Vitals Интеграция с CRM Девиз: "Мы не просто ремонтируем - мы создаём защиту!" Сайт должен визуально передавать ощущение абсолютной надёжности и технологического превосходства, превращая процесс ознакомления с услугой в увлекательное путешествие по миру профессиональной гидрозащиты. - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +789 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Flooot
-emoji: 🏃
-colorFrom: green
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: flooot
+emoji: 🐳
+colorFrom: purple
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,789 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="ru">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PolyRoof - Ремонт плоских кровель полимерными материалами</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&family=Open+Sans:wght@300;400;500;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --primary-blue: #003366;
+            --primary-orange: #FF6600;
+        }
+        body {
+            font-family: 'Open Sans', sans-serif;
+            scroll-behavior: smooth;
+        }
+        .hero-video {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            z-index: -1;
+            opacity: 0.7;
+        }
+        .timeline-item::before {
+            content: '';
+            position: absolute;
+            left: -30px;
+            top: 0;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background-color: var(--primary-orange);
+            border: 3px solid white;
+        }
+        .timeline::before {
+            content: '';
+            position: absolute;
+            left: -20px;
+            top: 0;
+            bottom: 0;
+            width: 2px;
+            background-color: var(--primary-blue);
+        }
+        .coating-animation {
+            position: relative;
+            overflow: hidden;
+        }
+        .coating-animation::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255,107,0,0.3), transparent);
+            animation: coating 3s infinite;
+        }
+        @keyframes coating {
+            0% { left: -100%; }
+            100% { left: 100%; }
+        }
+        .parallax {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+        .benefit-card:hover {
+            transform: translateY(-10px);
+            box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
+        }
+        .btn-primary {
+            background-color: var(--primary-orange);
+            transition: all 0.3s ease;
+        }
+        .btn-primary:hover {
+            background-color: #e05d00;
+            transform: translateY(-2px);
+            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
+        }
+        .nav-link::after {
+            content: '';
+            display: block;
+            width: 0;
+            height: 2px;
+            background: var(--primary-orange);
+            transition: width .3s;
+        }
+        .nav-link:hover::after {
+            width: 100%;
+        }
+        .active-nav::after {
+            width: 100%;
+        }
+        input:checked + .slider {
+            background-color: var(--primary-orange);
+        }
+        input:checked + .slider:before {
+            transform: translateX(24px);
+        }
+        .slider.round {
+            border-radius: 34px;
+        }
+        .slider.round:before {
+            border-radius: 50%;
+        }
+        .portfolio-item {
+            transition: all 0.3s ease;
+        }
+        .portfolio-item:hover {
+            transform: scale(1.03);
+        }
+        .portfolio-overlay {
+            background: rgba(0,91,150,0.8);
+            opacity: 0;
+            transition: all 0.3s ease;
+        }
+        .portfolio-item:hover .portfolio-overlay {
+            opacity: 1;
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <!-- Header -->
+    <header class="fixed w-full bg-white shadow-md z-50">
+        <div class="container mx-auto px-4 py-3 flex justify-between items-center">
+            <div class="flex items-center">
+                <div class="w-12 h-12 rounded-full bg-[#003366] flex items-center justify-center text-white font-bold text-xl mr-3 relative">
+                    <span>ЗИ</span>
+                    <div class="absolute inset-0 rounded-full border-2 border-[#FF6600]"></div>
+                </div>
+                <h1 class="text-xl font-bold text-[#003366] font-rubik">ЗИППРОМ</h1>
+            </div>
+            <nav class="hidden md:flex space-x-8">
+                <a href="#hero" class="nav-link active-nav text-[#005B96] font-medium">Главная</a>
+                <a href="#advantages" class="nav-link text-[#005B96] font-medium">Преимущества</a>
+                <a href="#technology" class="nav-link text-[#005B96] font-medium">Технология</a>
+                <a href="#calculator" class="nav-link text-[#005B96] font-medium">Калькулятор</a>
+                <a href="#portfolio" class="nav-link text-[#005B96] font-medium">Портфолио</a>
+                <a href="#contact" class="nav-link text-[#005B96] font-medium">Контакты</a>
+            </nav>
+            <div class="flex items-center space-x-4">
+                <a href="tel:+78001234567" class="hidden md:block text-[#005B96] font-medium hover:text-[#FF6B00] transition">
+                    <i class="fas fa-phone mr-1"></i> 8 (800) 123-45-67
+                </a>
+                <button class="md:hidden text-[#005B96] text-2xl" id="mobile-menu-button">
+                    <i class="fas fa-bars"></i>
+                </button>
+            </div>
+        </div>
+        <!-- Mobile menu -->
+        <div class="hidden md:hidden bg-white w-full py-4 px-4 shadow-lg" id="mobile-menu">
+            <div class="flex flex-col space-y-4">
+                <a href="#hero" class="text-[#005B96] font-medium">Главная</a>
+                <a href="#advantages" class="text-[#005B96] font-medium">Преимущества</a>
+                <a href="#technology" class="text-[#005B96] font-medium">Технология</a>
+                <a href="#calculator" class="text-[#005B96] font-medium">Калькулятор</a>
+                <a href="#portfolio" class="text-[#005B96] font-medium">Портфолио</a>
+                <a href="#contact" class="text-[#005B96] font-medium">Контакты</a>
+                <a href="tel:+78001234567" class="text-[#005B96] font-medium">
+                    <i class="fas fa-phone mr-1"></i> 8 (800) 123-45-67
+                </a>
+            </div>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section id="hero" class="relative h-screen flex items-center justify-center pt-16">
+        <video autoplay muted loop class="hero-video">
+            <source src="https://assets.mixkit.co/videos/preview/mixkit-worker-spraying-a-roof-15603-large.mp4" type="video/mp4">
+        </video>
+        <div class="absolute inset-0 bg-black opacity-40"></div>
+        <div class="container mx-auto px-4 z-10 text-center">
+            <h1 class="text-4xl md:text-6xl font-bold text-white mb-6 font-rubik">ЗИППРОМ: <span class="text-[#FF6600]">Ваша кровля под надёжной защитой</span></h1>
+            <p class="text-xl md:text-2xl text-white mb-8 max-w-3xl mx-auto">Мы не просто ремонтируем - мы создаём защиту на 20+ лет!</p>
+            <div class="flex flex-col md:flex-row justify-center gap-4">
+                <a href="#calculator" class="btn-primary text-white font-bold py-3 px-8 rounded-full hover:shadow-lg hover:shadow-[#FF6600]/30 transition-all duration-300">Рассчитать защиту для вашей кровли</a>
+                <a href="#contact" class="bg-white text-[#003366] font-bold py-3 px-8 rounded-full border-2 border-white hover:bg-transparent hover:text-white transition">Получить консультацию</a>
+            </div>
+        </div>
+        <div class="absolute bottom-10 left-0 right-0 flex justify-center">
+            <a href="#advantages" class="text-white animate-bounce">
+                <i class="fas fa-chevron-down text-3xl"></i>
+            </a>
+        </div>
+    </section>
+    <!-- Advantages Section -->
+    <section id="advantages" class="py-20 bg-white">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-[#005B96] mb-4">Почему выбирают нашу технологию</h2>
+                <div class="w-20 h-1 bg-[#FF6B00] mx-auto"></div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+                <!-- Benefit 1 -->
+                <div class="benefit-card bg-gray-50 p-8 rounded-lg shadow-md transition duration-300 hover:border-2 hover:border-[#FF6600]">
+                    <div class="w-16 h-16 bg-[#003366] rounded-full flex items-center justify-center text-white text-2xl mb-6 mx-auto">
+                        <i class="fas fa-border-none"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-[#003366] mb-3 text-center font-rubik">Бесшовное покрытие</h3>
+                    <p class="text-gray-600 text-center">Монолитная мембрана без стыков и швов - полная защита от протечек</p>
+                </div>
+                <!-- Benefit 2 -->
+                <div class="benefit-card bg-gray-50 p-8 rounded-lg shadow-md transition duration-300 hover:border-2 hover:border-[#FF6600]">
+                    <div class="w-16 h-16 bg-[#003366] rounded-full flex items-center justify-center text-white text-2xl mb-6 mx-auto">
+                        <i class="fas fa-calendar-check"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-[#003366] mb-3 text-center font-rubik">20+ лет защиты</h3>
+                    <p class="text-gray-600 text-center">Эксклюзивные полимеры с увеличенным сроком службы</p>
+                </div>
+                <!-- Benefit 3 -->
+                <div class="benefit-card bg-gray-50 p-8 rounded-lg shadow-md transition duration-300 hover:border-2 hover:border-[#FF6600]">
+                    <div class="w-16 h-16 bg-[#003366] rounded-full flex items-center justify-center text-white text-2xl mb-6 mx-auto">
+                        <i class="fas fa-hard-hat"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-[#003366] mb-3 text-center font-rubik">Работа без демонтажа</h3>
+                    <p class="text-gray-600 text-center">Реставрация прямо поверх старого покрытия - чисто и быстро</p>
+                </div>
+                <!-- Benefit 4 -->
+                <div class="benefit-card bg-gray-50 p-8 rounded-lg shadow-md transition duration-300 hover:border-2 hover:border-[#FF6600]">
+                    <div class="w-16 h-16 bg-[#003366] rounded-full flex items-center justify-center text-white text-2xl mb-6 mx-auto">
+                        <i class="fas fa-cloud-sun-rain"></i>
+                    </div>
+                    <h3 class="text-xl font-bold text-[#003366] mb-3 text-center font-rubik">Всепогодное решение</h3>
+                    <p class="text-gray-600 text-center">Устойчиво к любым климатическим условиям</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Technology Section -->
+    <section id="technology" class="py-20 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-[#005B96] mb-4">Технология ремонта</h2>
+                <div class="w-20 h-1 bg-[#FF6B00] mx-auto"></div>
+            </div>
+            <div class="max-w-4xl mx-auto">
+                <div class="relative pl-10 timeline">
+                    <!-- Step 1 -->
+                    <div class="relative mb-12 timeline-item">
+                        <div class="bg-white p-6 rounded-lg shadow-md">
+                            <h3 class="text-xl font-bold text-[#005B96] mb-2">1. Диагностика</h3>
+                            <p class="text-gray-600">Наши специалисты проводят тщательный осмотр кровли, выявляют все проблемные участки и определяют объем работ.</p>
+                        </div>
+                    </div>
+                    <!-- Step 2 -->
+                    <div class="relative mb-12 timeline-item">
+                        <div class="bg-white p-6 rounded-lg shadow-md">
+                            <h3 class="text-xl font-bold text-[#005B96] mb-2">2. Подготовка поверхности</h3>
+                            <p class="text-gray-600">Очистка кровли от мусора и пыли, локальный ремонт поврежденных участков, обработка праймером для лучшей адгезии.</p>
+                        </div>
+                    </div>
+                    <!-- Step 3 -->
+                    <div class="relative mb-12 timeline-item">
+                        <div class="bg-white p-6 rounded-lg shadow-md">
+                            <h3 class="text-xl font-bold text-[#005B96] mb-2">3. Нанесение покрытия</h3>
+                            <p class="text-gray-600">Многослойное нанесение жидкой резины или полиуретана специальным оборудованием. Формирование бесшовной мембраны.</p>
+                            <div class="mt-4 coating-animation h-2 bg-[#FF6B00] rounded-full"></div>
+                        </div>
+                    </div>
+                    <!-- Step 4 -->
+                    <div class="relative timeline-item">
+                        <div class="bg-white p-6 rounded-lg shadow-md">
+                            <h3 class="text-xl font-bold text-[#005B96] mb-2">4. Контроль качества</h3>
+                            <p class="text-gray-600">Проверка толщины покрытия, герметичности швов и примыканий. Выдача гарантийных документов.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Calculator Section -->
+    <section id="calculator" class="py-20 bg-white">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-[#005B96] mb-4">Калькулятор стоимости</h2>
+                <div class="w-20 h-1 bg-[#FF6B00] mx-auto"></div>
+            </div>
+            <div class="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-lg overflow-hidden">
+                <div class="grid grid-cols-1 lg:grid-cols-2">
+                    <div class="p-8">
+                        <div class="mb-6">
+                            <label for="area" class="block text-[#005B96] font-medium mb-2">Площадь кровли (м²)</label>
+                            <input type="number" id="area" min="10" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#005B96]" value="100">
+                        </div>
+                        <div class="mb-6">
+                            <label for="damage" class="block text-[#005B96] font-medium mb-2">Тип повреждений</label>
+                            <select id="damage" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#005B96]">
+                                <option value="1">Незначительные (трещины, мелкие повреждения)</option>
+                                <option value="2">Средние (множественные повреждения, локальные протечки)</option>
+                                <option value="3">Серьезные (обширные повреждения, необходимость усиления)</option>
+                            </select>
+                        </div>
+                        <div class="mb-6">
+                            <label class="block text-[#005B96] font-medium mb-3">Дополнительные услуги</label>
+                            <div class="flex items-center mb-2">
+                                <label class="switch">
+                                    <input type="checkbox" id="cleaning" checked>
+                                    <span class="slider round"></span>
+                                </label>
+                                <span class="ml-3 text-gray-700">Очистка кровли (+5%)</span>
+                            </div>
+                            <div class="flex items-center mb-2">
+                                <label class="switch">
+                                    <input type="checkbox" id="drainage">
+                                    <span class="slider round"></span>
+                                </label>
+                                <span class="ml-3 text-gray-700">Ремонт водосточной системы (+15%)</span>
+                            </div>
+                            <div class="flex items-center">
+                                <label class="switch">
+                                    <input type="checkbox" id="warranty">
+                                    <span class="slider round"></span>
+                                </label>
+                                <span class="ml-3 text-gray-700">Увеличенная гарантия 15 лет (+10%)</span>
+                            </div>
+                        </div>
+                        <button id="calculate-btn" class="btn-primary w-full text-white font-bold py-3 px-4 rounded-lg">Рассчитать стоимость</button>
+                    </div>
+                    <div class="bg-[#005B96] p-8 text-white flex flex-col justify-center">
+                        <div class="text-center mb-6">
+                            <h3 class="text-2xl font-bold mb-2">Ориентировочная стоимость</h3>
+                            <p class="opacity-80">Цена может измениться после осмотра объекта</p>
+                        </div>
+                        <div class="text-center mb-8">
+                            <div class="text-5xl font-bold mb-2" id="result-price">0 ₽</div>
+                            <div class="text-lg opacity-80" id="result-per-meter">0 ₽/м²</div>
+                        </div>
+                        <div class="bg-white bg-opacity-10 p-4 rounded-lg mb-6">
+                            <div class="flex justify-between mb-2">
+                                <span>Площадь:</span>
+                                <span id="result-area">0 м²</span>
+                            </div>
+                            <div class="flex justify-between mb-2">
+                                <span>Тип ремонта:</span>
+                                <span id="result-type">Не выбран</span>
+                            </div>
+                            <div class="flex justify-between">
+                                <span>Доп. услуги:</span>
+                                <span id="result-extras">Нет</span>
+                            </div>
+                        </div>
+                        <button id="order-btn" class="btn-primary w-full text-[#005B96] bg-white font-bold py-3 px-4 rounded-lg">Оставить заявку</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Portfolio Section -->
+    <section id="portfolio" class="py-20 bg-gray-50">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-[#005B96] mb-4">Наши работы</h2>
+                <div class="w-20 h-1 bg-[#FF6B00] mx-auto"></div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Project 1 -->
+                <div class="portfolio-item relative rounded-lg overflow-hidden shadow-md">
+                    <img src="https://images.unsplash.com/photo-1600585154340-be6161a56a0c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Проект 1" class="w-full h-64 object-cover">
+                    <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-4">
+                        <h3 class="text-white text-xl font-bold mb-2">ЖК "Северное сияние"</h3>
+                        <p class="text-white text-center">Ремонт кровли площадью 1200 м² с усилением парапетов</p>
+                        <a href="#" class="mt-4 text-[#FF6B00] font-medium">Подробнее →</a>
+                    </div>
+                </div>
+                <!-- Project 2 -->
+                <div class="portfolio-item relative rounded-lg overflow-hidden shadow-md">
+                    <img src="https://images.unsplash.com/photo-1605276374104-dee2a0ed3cd6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Проект 2" class="w-full h-64 object-cover">
+                    <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-4">
+                        <h3 class="text-white text-xl font-bold mb-2">Торговый центр "Оазис"</h3>
+                        <p class="text-white text-center">Ремонт эксплуатируемой кровли с пешеходным покрытием</p>
+                        <a href="#" class="mt-4 text-[#FF6B00] font-medium">Подробнее →</a>
+                    </div>
+                </div>
+                <!-- Project 3 -->
+                <div class="portfolio-item relative rounded-lg overflow-hidden shadow-md">
+                    <img src="https://images.unsplash.com/photo-1600607687920-4e2a09cf159d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Проект 3" class="w-full h-64 object-cover">
+                    <div class="portfolio-overlay absolute inset-0 flex items-center justify-center flex-col p-4">
+                        <h3 class="text-white text-xl font-bold mb-2">Завод "Полимертех"</h3>
+                        <p class="text-white text-center">Ремонт кровли производственного здания с антикоррозийной защитой</p>
+                        <a href="#" class="mt-4 text-[#FF6B00] font-medium">Подробнее →</a>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <a href="#" class="inline-block btn-primary text-white font-bold py-3 px-8 rounded-full">Смотреть все проекты</a>
+            </div>
+        </div>
+    </section>
+    <!-- Contact Section -->
+    <section id="contact" class="py-20 bg-white">
+        <div class="container mx-auto px-4">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-[#005B96] mb-4">Оставьте заявку</h2>
+                <div class="w-20 h-1 bg-[#FF6B00] mx-auto"></div>
+            </div>
+            <div class="max-w-4xl mx-auto bg-gray-50 rounded-xl shadow-lg overflow-hidden">
+                <div class="grid grid-cols-1 lg:grid-cols-2">
+                    <div class="p-8">
+                        <form id="contact-form">
+                            <div class="mb-6">
+                                <label for="name" class="block text-[#005B96] font-medium mb-2">Ваше имя</label>
+                                <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#005B96]" required>
+                            </div>
+                            <div class="mb-6">
+                                <label for="phone" class="block text-[#005B96] font-medium mb-2">Телефон</label>
+                                <input type="tel" id="phone" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#005B96]" required>
+                            </div>
+                            <div class="mb-6">
+                                <label for="message" class="block text-[#005B96] font-medium mb-2">Сообщение</label>
+                                <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-[#005B96]"></textarea>
+                            </div>
+                            <button type="submit" class="btn-primary w-full text-white font-bold py-3 px-4 rounded-lg">Отправить заявку</button>
+                        </form>
+                    </div>
+                    <div class="bg-[#005B96] p-8 text-white">
+                        <h3 class="text-2xl font-bold mb-6">Контакты</h3>
+                        <div class="mb-6">
+                            <div class="flex items-start mb-4">
+                                <i class="fas fa-phone-alt mt-1 mr-3 text-[#FF6B00]"></i>
+                                <div>
+                                    <p class="font-medium">Телефон</p>
+                                    <a href="tel:+78001234567" class="hover:underline">8 (800) 123-45-67</a>
+                                </div>
+                            </div>
+                            <div class="flex items-start mb-4">
+                                <i class="fas fa-envelope mt-1 mr-3 text-[#FF6B00]"></i>
+                                <div>
+                                    <p class="font-medium">Email</p>
+                                    <a href="mailto:info@polyroof.ru" class="hover:underline">info@polyroof.ru</a>
+                                </div>
+                            </div>
+                            <div class="flex items-start">
+                                <i class="fas fa-map-marker-alt mt-1 mr-3 text-[#FF6B00]"></i>
+                                <div>
+                                    <p class="font-medium">Адрес</p>
+                                    <p>г. Москва, ул. Строителей, 15, оф. 304</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div>
+                            <h4 class="font-bold mb-3">Режим работы</h4>
+                            <p class="mb-1">Пн-Пт: 9:00 - 18:00</p>
+                            <p>Сб-Вс: выходной</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-[#005B96] text-white py-12">
+        <div class="container mx-auto px-4">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center mb-4">
+                        <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center text-[#005B96] font-bold text-lg mr-3">PR</div>
+                        <h3 class="text-xl font-bold">Poly<span class="text-[#FF6B00]">Roof</span></h3>
+                    </div>
+                    <p class="text-sm opacity-80">Профессиональный ремонт плоских кровель полимерными материалами без демонтажа.</p>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold mb-4">Услуги</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-[#FF6B00] transition">Ремонт кровли</a></li>
+                        <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-[#FF6B00] transition">Гидроизоляция</a></li>
+                        <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-[#FF6B00] transition">Утепление</a></li>
+                        <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-[#FF6B00] transition">Обслуживание</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold mb-4">Компания</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-[#FF6B00] transition">О нас</a></li>
+                        <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-[#FF6B00] transition">Отзывы</a></li>
+                        <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-[#FF6B00] transition">Лицензии</a></li>
+                        <li><a href="#" class="opacity-80 hover:opacity-100 hover:text-[#FF6B00] transition">Вакансии</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="text-lg font-bold mb-4">Контакты</h4>
+                    <ul class="space-y-2">
+                        <li class="flex items-center">
+                            <i class="fas fa-phone-alt mr-2 text-[#FF6B00]"></i>
+                            <a href="tel:+78001234567" class="opacity-80 hover:opacity-100 hover:text-[#FF6B00] transition">8 (800) 123-45-67</a>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-envelope mr-2 text-[#FF6B00]"></i>
+                            <a href="mailto:info@polyroof.ru" class="opacity-80 hover:opacity-100 hover:text-[#FF6B00] transition">info@polyroof.ru</a>
+                        </li>
+                        <li class="flex items-center">
+                            <i class="fas fa-map-marker-alt mr-2 text-[#FF6B00]"></i>
+                            <span class="opacity-80">Москва, ул. Строителей, 15</span>
+                        </li>
+                    </ul>
+                    <div class="flex space-x-4 mt-4">
+                        <a href="#" class="w-10 h-10 rounded-full bg-white bg-opacity-10 flex items-center justify-center hover:bg-opacity-20 transition">
+                            <i class="fab fa-vk text-[#FF6B00]"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 rounded-full bg-white bg-opacity-10 flex items-center justify-center hover:bg-opacity-20 transition">
+                            <i class="fab fa-telegram-plane text-[#FF6B00]"></i>
+                        </a>
+                        <a href="#" class="w-10 h-10 rounded-full bg-white bg-opacity-10 flex items-center justify-center hover:bg-opacity-20 transition">
+                            <i class="fab fa-whatsapp text-[#FF6B00]"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="border-t border-white border-opacity-20 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
+                <p class="text-sm opacity-80 mb-4 md:mb-0">© 2023 PolyRoof. Все права защищены.</p>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-sm opacity-80 hover:opacity-100 hover:text-[#FF6B00] transition">Политика конфиденциальности</a>
+                    <a href="#" class="text-sm opacity-80 hover:opacity-100 hover:text-[#FF6B00] transition">Договор оферты</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <!-- Back to top button -->
+    <a href="#" id="back-to-top" class="fixed bottom-8 right-8 w-12 h-12 bg-[#FF6B00] rounded-full flex items-center justify-center text-white shadow-lg opacity-0 invisible transition-all duration-300">
+        <i class="fas fa-arrow-up"></i>
+    </a>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script>
+        // Initialize WebGL and GSAP animations
+        document.addEventListener('DOMContentLoaded', function() {
+            // 3D molecule animation will be initialized here
+            const moleculeScene = new THREE.Scene();
+            // ... additional WebGL setup code ...
+            // GSAP animations
+            gsap.from(".benefit-card", {
+                duration: 1,
+                y: 50,
+                opacity: 0,
+                stagger: 0.2,
+                ease: "power3.out"
+            });
+            // Add protective field effect on hover
+            document.querySelectorAll('.btn-primary, .portfolio-item').forEach(el => {
+                el.addEventListener('mouseenter', () => {
+                    gsap.to(el, {
+                        duration: 0.3,
+                        boxShadow: "0 0 15px 5px rgba(0, 102, 255, 0.3)",
+                        ease: "power2.out"
+                    });
+                });
+                el.addEventListener('mouseleave', () => {
+                    gsap.to(el, {
+                        duration: 0.3,
+                        boxShadow: "none",
+                        ease: "power2.out"
+                    });
+                });
+            });
+        });
+        // Mobile menu toggle
+        document.getElementById('mobile-menu-button').addEventListener('click', function() {
+            const menu = document.getElementById('mobile-menu');
+            menu.classList.toggle('hidden');
+        });
+        // Smooth scrolling for navigation links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                const targetId = this.getAttribute('href');
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    window.scrollTo({
+                        top: targetElement.offsetTop - 80,
+                        behavior: 'smooth'
+                    });
+                    // Close mobile menu if open
+                    const mobileMenu = document.getElementById('mobile-menu');
+                    if (!mobileMenu.classList.contains('hidden')) {
+                        mobileMenu.classList.add('hidden');
+                    }
+                }
+            });
+        });
+        // Change active nav link on scroll
+        const sections = document.querySelectorAll('section');
+        const navLinks = document.querySelectorAll('.nav-link');
+        window.addEventListener('scroll', function() {
+            let current = '';
+            sections.forEach(section => {
+                const sectionTop = section.offsetTop;
+                const sectionHeight = section.clientHeight;
+                if (pageYOffset >= (sectionTop - 150)) {
+                    current = section.getAttribute('id');
+                }
+            });
+            navLinks.forEach(link => {
+                link.classList.remove('active-nav');
+                if (link.getAttribute('href') === `#${current}`) {
+                    link.classList.add('active-nav');
+                }
+            });
+            // Show/hide back to top button
+            const backToTop = document.getElementById('back-to-top');
+            if (window.pageYOffset > 300) {
+                backToTop.classList.remove('opacity-0', 'invisible');
+                backToTop.classList.add('opacity-100', 'visible');
+            } else {
+                backToTop.classList.remove('opacity-100', 'visible');
+                backToTop.classList.add('opacity-0', 'invisible');
+            }
+        });
+        // Calculator functionality
+        const pricePerMeter = {
+            1: 450,
+            2: 650,
+            3: 850
+        };
+        const damageTypes = {
+            1: "Незначительный ремонт",
+            2: "Средний ремонт",
+            3: "Полный ремонт"
+        };
+        document.getElementById('calculate-btn').addEventListener('click', function() {
+            const area = parseFloat(document.getElementById('area').value) || 0;
+            const damageType = document.getElementById('damage').value;
+            const cleaning = document.getElementById('cleaning').checked;
+            const drainage = document.getElementById('drainage').checked;
+            const warranty = document.getElementById('warranty').checked;
+            let basePrice = pricePerMeter[damageType] * area;
+            let extras = [];
+            let totalPrice = basePrice;
+            if (cleaning) {
+                totalPrice += basePrice * 0.05;
+                extras.push("Очистка");
+            }
+            if (drainage) {
+                totalPrice += basePrice * 0.15;
+                extras.push("Водосточка");
+            }
+            if (warranty) {
+                totalPrice += basePrice * 0.10;
+                extras.push("Гарантия 15л");
+            }
+            // Update results
+            document.getElementById('result-price').textContent = totalPrice.toLocaleString('ru-RU') + ' ₽';
+            document.getElementById('result-per-meter').textContent = Math.round(totalPrice / area).toLocaleString('ru-RU') + ' ₽/м²';
+            document.getElementById('result-area').textContent = area + ' м²';
+            document.getElementById('result-type').textContent = damageTypes[damageType];
+            document.getElementById('result-extras').textContent = extras.length > 0 ? extras.join(', ') : 'Нет';
+        });
+        // Initialize calculator with default values
+        document.getElementById('calculate-btn').click();
+        // Connect calculator order button to contact form
+        document.getElementById('order-btn').addEventListener('click', function() {
+            window.scrollTo({
+                top: document.getElementById('contact').offsetTop - 80,
+                behavior: 'smooth'
+            });
+        });
+        // Form submission
+        document.getElementById('contact-form').addEventListener('submit', function(e) {
+            e.preventDefault();
+            // Here you would normally send the form data to your server
+            // For this example, we'll just show an alert
+            const name = document.getElementById('name').value;
+            alert(`Спасибо, ${name}! Ваша заявка принята. Мы свяжемся с вами в ближайшее время.`);
+            // Reset form
+            this.reset();
+        });
+        // Toggle switch styling
+        const switches = document.querySelectorAll('.switch');
+        switches.forEach(switchElement => {
+            const slider = switchElement.querySelector('.slider');
+            const input = switchElement.querySelector('input');
+            if (input.checked) {
+                slider.style.backgroundColor = '#FF6B00';
+            }
+            input.addEventListener('change', function() {
+                if (this.checked) {
+                    slider.style.backgroundColor = '#FF6B00';
+                } else {
+                    slider.style.backgroundColor = '#ccc';
+                }
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Fakhammer/flooot" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>