Hugging Face's logo

Spaces:
Fakhammer
/
flooot
Running

App Files Community
flooot / index.html
Fakhammer's picture
Fakhammer
"Разработать высокотехнологичный одностраничный лендинг для компании 'ЗИППРОМ', специализирующейся на ремонте плоских кровель полимерными материалами без демонтажа старого покрытия. Сайт должен подчеркивать ключевой месседж: 'Ваша кровля под надёжной защитой'." Ключевые требования: Фирменный стиль: Основные цвета: защитный синий (#003366) + сигнальный оранжевый (#FF6600) Логотип: сочетание аббревиатуры "ЗИППРОМ" с графическим элементом в виде защитного щита Шрифты: Rubik (заголовки) + Open Sans (основной текст) Профессиональная анимация: Параллакс-скроллинг с эффектом "нанесения покрытия" 3D-анимация молекулярной структуры полимера Интерактивная схема работы с пошаговой визуализацией Микроанимации всех интерактивных элементов Эффект "защитного поля" при наведении на ключевые элементы Обязательные разделы: Главный экран: Видеофон с процессом нанесения покрытия Слоган: "ЗИППРОМ: Ваша кровля под надёжной защитой" Кнопка CTA: "Рассчитать защиту для вашей кровли" Технологии: Интерактивная 3D-модель кровельного "пирога" Анимированная инфографика преимуществ: • Бесшовное покрытие • 20+ лет защиты • Работа без демонтажа • Всепогодное решение Калькулятор: Интуитивный интерфейс с анимацией заполнения Параметры: ✓ Площадь кровли (слайдер с визуализацией) ✓ Тип повреждений (интерактивная диагностика) ✓ Дополнительная защита (анимированные опции) Мгновенный расчёт с эффектом "появления защитного слоя" Кейсы: 3D-галерея объектов с эффектом "до/после" Интерактивная карта выполненных объектов Гарантии: Анимированная временная шкала гарантии Виртуальный тур по производству Технические особенности: Реализация на WebGL + GSAP Адаптивная загрузка ресурсов Оптимизация для Core Web Vitals Интеграция с CRM Девиз: "Мы не просто ремонтируем - мы создаём защиту!" Сайт должен визуально передавать ощущение абсолютной надёжности и технологического превосходства, превращая процесс ознакомления с услугой в увлекательное путешествие по миру профессиональной гидрозащиты. - Initial Deployment
0ddadf6 verified
raw
history blame contribute delete
42.3 kB
 <!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>