ULTRA-КРЕАТИВНЫЙ ПРОМТ ДЛЯ ГЕНЕРАЦИИ ТЕХНОЛОГИЧНОГО ЛЕНДИНГА "HYDRO TECH SHIELD" Гидроизоляция нового поколения для зданий и сооружений 🎯 КОНЦЕПЦИЯ Создать "цифровой щит" - технологичный одностраничник, где полимерные мастики представлены как инновационное ПО для защиты зданий. Минимум текста - максимум интерактива. 🚀 СТРУКТУРА С АНИМАЦИЯМИ 1. Hero-блок: "Активация защиты" Фон: Минималистичная 3D-анимация полимерной мастики, "растекающейся" по бетону в реальном времени Заголовок: "Гидроизоляция 4.0: Программируемая защита для ваших конструкций" Подзаголовок: "Полимерные мастики с "умной" адгезией. Гарантия до 20 лет." Кнопка CTA: "Рассчитать покрытие →" (при наведении - эффект "гидрофобного отталкивания") 2. Технология: "Как это работает?" Интерактивная схема: Пользователь выбирает тип поверхности (фундамент/кровля/подвал) → появляется 3D-модель с анимацией нанесения Фишки: ▪ "Автоматическая адаптация к температуре" ▪ "Самозалечивающиеся микротрещины" 3. Кейсы: "До/После в реальном времени" Слайдер с таймлапсом: Демонстрация реальных объектов с таймером: *"2 часа - и ваша кровля герметична"* 4. CTA-блок: "Экстренная гидрозащита" Текст: *"Оставьте заявку до [дата] - получите: ✓ Бесплатный выезд технолога ✓ 3D-модель будущего покрытия"* Форма: Поля: Имя/Телефон/Тип объекта Кнопка: "Активировать защиту" 🎨 ДИЗАЙН Цветовая палитра: ▪ Основной: Техно-серый (#2D3033) ▪ Акцент: Голубой аква (#00C1D4) - символ воды/защиты ▪ Фон: Светло-графитовый (#F5F7FA) Шрифты: ▪ Заголовки: "TT Interfaces Bold" (технологичный) ▪ Текст: "TT Commons Light" (читаемый) Эффекты: ▪ Плавные SVG-анимации мастики ▪ Параллакс при скролле ▪ Минималистичные иконки в стиле "космических технологий" ⚡ УТП "Не гидроизоляция, а "прошивка" для зданий. Защита, которая эволюционирует вместе с вашим объектом." ⚙️ ТЕХНИЧЕСКИЕ ТРЕБОВАНИЯ Фреймворк: Webflow + Lottie animations Обязательно: ▪ 60+ FPS на всех анимациях ▪ Полная адаптивность ▪ Время загрузки < 2 сек Фишки: ▪ WebGL-превью покрытия ▪ AR-примерка через камеру смартфона Финальный акцент: Сайт должен ощущаться как интерфейс из "Марсианина" - супер-технологичный, но интуитивно понятный. // Генератор, сделай это круче Tesla Cybertruck! 🚀 - Initial Deployment
ac0baff
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HYDRO TECH SHIELD | Next-Gen Building Protection</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #F5F7FA; | |
| overflow-x: hidden; | |
| } | |
| .tech-gradient { | |
| background: linear-gradient(135deg, #2D3033 0%, #1A1C1E 100%); | |
| } | |
| .aqua-glow { | |
| box-shadow: 0 0 15px rgba(0, 193, 212, 0.5); | |
| } | |
| .aqua-glow-text { | |
| text-shadow: 0 0 8px rgba(0, 193, 212, 0.7); | |
| } | |
| .hydro-card { | |
| transition: all 0.3s ease; | |
| transform-style: preserve-3d; | |
| } | |
| .hydro-card:hover { | |
| transform: translateY(-10px) rotateX(5deg); | |
| box-shadow: 0 20px 30px rgba(0, 193, 212, 0.2); | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(0, 193, 212, 0.4); } | |
| 70% { box-shadow: 0 0 0 10px rgba(0, 193, 212, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(0, 193, 212, 0); } | |
| } | |
| .water-drop { | |
| position: relative; | |
| } | |
| .water-drop::after { | |
| content: ''; | |
| position: absolute; | |
| top: -5px; | |
| right: -5px; | |
| width: 20px; | |
| height: 20px; | |
| background: rgba(0, 193, 212, 0.7); | |
| border-radius: 50%; | |
| filter: blur(5px); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .water-drop:hover::after { | |
| opacity: 1; | |
| } | |
| .surface-option { | |
| transition: all 0.3s ease; | |
| } | |
| .surface-option:hover { | |
| transform: scale(1.05); | |
| background-color: rgba(0, 193, 212, 0.1); | |
| } | |
| .timeline-marker { | |
| position: relative; | |
| } | |
| .timeline-marker::before { | |
| content: ''; | |
| position: absolute; | |
| left: -25px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background-color: #00C1D4; | |
| box-shadow: 0 0 10px rgba(0, 193, 212, 0.7); | |
| } | |
| .coverage-calculator { | |
| background: rgba(45, 48, 51, 0.8); | |
| backdrop-filter: blur(10px); | |
| } | |
| .tech-border { | |
| position: relative; | |
| } | |
| .tech-border::before { | |
| content: ''; | |
| position: absolute; | |
| inset: 0; | |
| border-radius: 0.5rem; | |
| padding: 2px; | |
| background: linear-gradient(135deg, #00C1D4, #2D3033); | |
| -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); | |
| -webkit-mask-composite: xor; | |
| mask-composite: exclude; | |
| } | |
| /* Animation for the hero section */ | |
| @keyframes flow { | |
| 0% { background-position: 0% 50%; } | |
| 50% { background-position: 100% 50%; } | |
| 100% { background-position: 0% 50%; } | |
| } | |
| .flow-bg { | |
| background: linear-gradient(-45deg, #2D3033, #1A1C1E, #006D7A, #00C1D4); | |
| background-size: 400% 400%; | |
| animation: flow 15s ease infinite; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="tech-gradient text-white py-4 px-6 fixed w-full z-50"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-10 h-10 rounded-full bg-cyan-500 flex items-center justify-center aqua-glow"> | |
| <i class="fas fa-shield-alt text-white text-lg"></i> | |
| </div> | |
| <span class="text-xl font-bold">HYDRO <span class="text-cyan-400">TECH</span> SHIELD</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#technology" class="hover:text-cyan-400 transition">Technology</a> | |
| <a href="#cases" class="hover:text-cyan-400 transition">Case Studies</a> | |
| <a href="#calculator" class="hover:text-cyan-400 transition">Calculator</a> | |
| <a href="#contact" class="hover:text-cyan-400 transition">Contact</a> | |
| </div> | |
| <button class="md:hidden text-white focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="flow-bg text-white pt-32 pb-20 px-6 relative overflow-hidden"> | |
| <div class="absolute inset-0 bg-black opacity-40"></div> | |
| <div class="container mx-auto relative z-10"> | |
| <div class="max-w-3xl"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 aqua-glow-text"> | |
| <span class="block">Hydroprotection 4.0</span> | |
| <span class="text-cyan-400">Programmable Defense</span> For Your Structures | |
| </h1> | |
| <p class="text-xl md:text-2xl mb-10 text-gray-300"> | |
| Polymer mastics with "smart" adhesion. 20-year guarantee against water intrusion. | |
| </p> | |
| <button id="calculateBtn" class="bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-4 px-8 rounded-full transition-all duration-300 transform hover:scale-105 aqua-glow pulse-animation water-drop"> | |
| Calculate Coverage <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-gray-900 to-transparent"></div> | |
| </section> | |
| <!-- Tech Features --> | |
| <section id="technology" class="py-20 px-6 bg-gray-50"> | |
| <div class="container mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">How Our <span class="text-cyan-500">Tech Shield</span> Works</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Advanced polymer nanotechnology that adapts to your building's needs</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16"> | |
| <div class="hydro-card tech-border p-8 rounded-lg bg-white"> | |
| <div class="w-16 h-16 bg-cyan-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-microchip text-cyan-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Smart Adhesion</h3> | |
| <p class="text-gray-600">Molecular bonding that strengthens over time, creating an impenetrable barrier against moisture.</p> | |
| </div> | |
| <div class="hydro-card tech-border p-8 rounded-lg bg-white"> | |
| <div class="w-16 h-16 bg-cyan-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-temperature-low text-cyan-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Temperature Adaptive</h3> | |
| <p class="text-gray-600">Automatically adjusts viscosity and expansion coefficient based on environmental conditions.</p> | |
| </div> | |
| <div class="hydro-card tech-border p-8 rounded-lg bg-white"> | |
| <div class="w-16 h-16 bg-cyan-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-heartbeat text-cyan-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Self-Healing</h3> | |
| <p class="text-gray-600">Microcapsules release healing agents when cracks form, maintaining continuous protection.</p> | |
| </div> | |
| </div> | |
| <!-- Surface Selector --> | |
| <div class="bg-white rounded-xl shadow-xl p-8 tech-border"> | |
| <h3 class="text-2xl font-bold text-center mb-8">Select Your Surface Type</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10"> | |
| <div class="surface-option p-6 rounded-lg border border-gray-200 cursor-pointer text-center" data-surface="roof"> | |
| <i class="fas fa-home text-4xl text-cyan-500 mb-4"></i> | |
| <h4 class="font-bold mb-2">Roof</h4> | |
| <p class="text-gray-600 text-sm">Flat, pitched, or complex roof structures</p> | |
| </div> | |
| <div class="surface-option p-6 rounded-lg border border-gray-200 cursor-pointer text-center" data-surface="foundation"> | |
| <i class="fas fa-building text-4xl text-cyan-500 mb-4"></i> | |
| <h4 class="font-bold mb-2">Foundation</h4> | |
| <p class="text-gray-600 text-sm">Basements, footings, and below-grade walls</p> | |
| </div> | |
| <div class="surface-option p-6 rounded-lg border border-gray-200 cursor-pointer text-center" data-surface="wall"> | |
| <i class="fas fa-vector-square text-4xl text-cyan-500 mb-4"></i> | |
| <h4 class="font-bold mb-2">Exterior Walls</h4> | |
| <p class="text-gray-600 text-sm">Concrete, brick, or block construction</p> | |
| </div> | |
| </div> | |
| <!-- 3D Visualization Placeholder --> | |
| <div id="surfaceVisualization" class="h-64 md:h-96 bg-gray-100 rounded-lg flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-cube text-5xl text-gray-400 mb-4"></i> | |
| <p class="text-gray-500">Select a surface type to view 3D application simulation</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Case Studies --> | |
| <section id="cases" class="py-20 px-6 tech-gradient text-white"> | |
| <div class="container mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Real-Time <span class="text-cyan-400">Protection</span> Results</h2> | |
| <p class="text-gray-300 max-w-2xl mx-auto">See how Hydro Tech Shield transforms vulnerable surfaces into impervious barriers</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16"> | |
| <div class="hydro-card p-6 rounded-lg bg-gray-800 bg-opacity-50 backdrop-filter backdrop-blur-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-cyan-500 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-building text-white"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Commercial High-Rise</h3> | |
| <p class="text-gray-400 text-sm">Downtown Chicago</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="h-64 bg-gray-700 rounded-lg flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-images text-4xl text-gray-500 mb-2"></i> | |
| <p>Before/After Gallery</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between"> | |
| <span>Water Intrusion:</span> | |
| <span class="font-bold">100% reduction</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Application Time:</span> | |
| <span class="font-bold">2 hours</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Projected Lifespan:</span> | |
| <span class="font-bold text-cyan-400">25+ years</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hydro-card p-6 rounded-lg bg-gray-800 bg-opacity-50 backdrop-filter backdrop-blur-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-cyan-500 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-home text-white"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Residential Basement</h3> | |
| <p class="text-gray-400 text-sm">Suburban Boston</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <div class="h-64 bg-gray-700 rounded-lg flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-images text-4xl text-gray-500 mb-2"></i> | |
| <p>Before/After Gallery</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="flex justify-between"> | |
| <span>Humidity Levels:</span> | |
| <span class="font-bold">75% reduction</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Application Time:</span> | |
| <span class="font-bold">4 hours</span> | |
| </div> | |
| <div class="flex justify-between"> | |
| <span>Projected Lifespan:</span> | |
| <span class="font-bold text-cyan-400">20+ years</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <button class="border-2 border-cyan-500 text-cyan-500 hover:bg-cyan-500 hover:text-white font-bold py-3 px-8 rounded-full transition-all duration-300"> | |
| View All Case Studies <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Coverage Calculator --> | |
| <section id="calculator" class="py-20 px-6 bg-gray-50"> | |
| <div class="container mx-auto max-w-4xl"> | |
| <div class="coverage-calculator rounded-xl shadow-2xl overflow-hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-2"> | |
| <div class="p-10 bg-gray-900 text-white"> | |
| <h2 class="text-3xl font-bold mb-6">Coverage <span class="text-cyan-400">Calculator</span></h2> | |
| <p class="text-gray-300 mb-8">Enter your project details to estimate the required materials and cost</p> | |
| <div class="space-y-6"> | |
| <div> | |
| <label class="block text-gray-400 mb-2">Surface Area (sq ft)</label> | |
| <input type="range" min="100" max="10000" value="1500" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer" id="areaRange"> | |
| <div class="flex justify-between mt-2"> | |
| <span>100</span> | |
| <span id="areaValue">1500</span> | |
| <span>10,000+</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-gray-400 mb-2">Surface Type</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 text-white rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-cyan-500"> | |
| <option>Roof</option> | |
| <option>Foundation</option> | |
| <option>Exterior Wall</option> | |
| <option>Balcony/Deck</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-400 mb-2">Protection Level</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 text-white rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-cyan-500"> | |
| <option>Standard (10 years)</option> | |
| <option>Enhanced (15 years)</option> | |
| <option>Premium (20+ years)</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-10 bg-white"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">Your <span class="text-cyan-500">Estimate</span></h3> | |
| <div class="space-y-6 mb-8"> | |
| <div class="flex justify-between border-b border-gray-200 pb-4"> | |
| <span class="text-gray-600">Material Required</span> | |
| <span class="font-bold" id="materialEstimate">45 gallons</span> | |
| </div> | |
| <div class="flex justify-between border-b border-gray-200 pb-4"> | |
| <span class="text-gray-600">Application Time</span> | |
| <span class="font-bold" id="timeEstimate">6 hours</span> | |
| </div> | |
| <div class="flex justify-between border-b border-gray-200 pb-4"> | |
| <span class="text-gray-600">Projected Lifespan</span> | |
| <span class="font-bold text-cyan-500">20+ years</span> | |
| </div> | |
| <div class="flex justify-between pt-2"> | |
| <span class="text-lg font-bold">Estimated Cost</span> | |
| <span class="text-2xl font-bold" id="costEstimate">$3,750</span> | |
| </div> | |
| </div> | |
| <button class="w-full bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-4 px-6 rounded-lg transition-all duration-300 aqua-glow"> | |
| Get Exact Quote <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Emergency Protection --> | |
| <section id="contact" class="py-20 px-6 bg-white"> | |
| <div class="container mx-auto max-w-4xl"> | |
| <div class="tech-border rounded-xl overflow-hidden"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 bg-gradient-to-r from-gray-900 to-gray-800"> | |
| <div class="p-10 text-white"> | |
| <h2 class="text-3xl font-bold mb-4">Emergency <span class="text-cyan-400">Hydroprotection</span></h2> | |
| <p class="text-gray-300 mb-6">Act now before the next rainfall causes irreversible damage</p> | |
| <div class="space-y-4 mb-8"> | |
| <div class="flex items-start timeline-marker pl-8"> | |
| <div> | |
| <h4 class="font-bold">Free Technician Dispatch</h4> | |
| <p class="text-gray-400 text-sm">Within 24 hours of your request</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start timeline-marker pl-8"> | |
| <div> | |
| <h4 class="font-bold">3D Protection Model</h4> | |
| <p class="text-gray-400 text-sm">Visualize the solution before application</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start timeline-marker pl-8"> | |
| <div> | |
| <h4 class="font-bold">10% Discount</h4> | |
| <p class="text-gray-400 text-sm">For emergency services booked within 48 hours</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 rounded-lg p-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-clock text-cyan-500 text-2xl mr-3"></i> | |
| <div> | |
| <p class="text-sm text-gray-400">Offer expires in</p> | |
| <div id="countdown" class="flex space-x-2"> | |
| <div class="bg-gray-700 px-2 py-1 rounded"> | |
| <span class="font-bold">23</span><span class="text-xs">h</span> | |
| </div> | |
| <div class="bg-gray-700 px-2 py-1 rounded"> | |
| <span class="font-bold">59</span><span class="text-xs">m</span> | |
| </div> | |
| <div class="bg-gray-700 px-2 py-1 rounded"> | |
| <span class="font-bold">59</span><span class="text-xs">s</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-10 bg-white"> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-6">Activate <span class="text-cyan-500">Protection</span></h3> | |
| <form class="space-y-4"> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Your Name</label> | |
| <input type="text" class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-cyan-500"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Phone Number</label> | |
| <input type="tel" class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-cyan-500"> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Property Type</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-cyan-500"> | |
| <option>Residential</option> | |
| <option>Commercial</option> | |
| <option>Industrial</option> | |
| <option>Municipal</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-gray-700 mb-2">Urgency</label> | |
| <select class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-cyan-500"> | |
| <option>Preventative</option> | |
| <option>Minor Leakage</option> | |
| <option>Active Water Intrusion</option> | |
| <option>Emergency Flooding</option> | |
| </select> | |
| </div> | |
| <button class="w-full bg-cyan-500 hover:bg-cyan-600 text-white font-bold py-4 px-6 rounded-lg transition-all duration-300 aqua-glow mt-6"> | |
| Request Emergency Service <i class="fas fa-shield-alt ml-2"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tech Specs --> | |
| <section class="py-20 px-6 bg-gray-900 text-white"> | |
| <div class="container mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Technical <span class="text-cyan-400">Specifications</span></h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Precision-engineered for maximum protection and durability</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div class="p-6 bg-gray-800 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-cyan-500 bg-opacity-20 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-tint text-cyan-400"></i> | |
| </div> | |
| <h3 class="font-bold">Water Resistance</h3> | |
| </div> | |
| <p class="text-gray-400">Withstands hydrostatic pressure up to 50 psi (345 kPa)</p> | |
| </div> | |
| <div class="p-6 bg-gray-800 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-cyan-500 bg-opacity-20 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-thermometer-half text-cyan-400"></i> | |
| </div> | |
| <h3 class="font-bold">Temperature Range</h3> | |
| </div> | |
| <p class="text-gray-400">-40°F to 250°F (-40°C to 121°C) operational range</p> | |
| </div> | |
| <div class="p-6 bg-gray-800 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-cyan-500 bg-opacity-20 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-expand-arrows-alt text-cyan-400"></i> | |
| </div> | |
| <h3 class="font-bold">Elongation</h3> | |
| </div> | |
| <p class="text-gray-400">Up to 600% elongation at break for crack bridging</p> | |
| </div> | |
| <div class="p-6 bg-gray-800 rounded-lg"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 bg-cyan-500 bg-opacity-20 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-clock text-cyan-400"></i> | |
| </div> | |
| <h3 class="font-bold">Cure Time</h3> | |
| </div> | |
| <p class="text-gray-400">Walkable in 2 hours, fully cured in 24 hours</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="py-12 px-6 bg-gray-950 text-gray-400"> | |
| <div class="container mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12"> | |
| <div> | |
| <div class="flex items-center space-x-2 mb-6"> | |
| <div class="w-10 h-10 rounded-full bg-cyan-500 flex items-center justify-center"> | |
| <i class="fas fa-shield-alt text-white text-lg"></i> | |
| </div> | |
| <span class="text-xl font-bold text-white">HYDRO <span class="text-cyan-400">TECH</span> SHIELD</span> | |
| </div> | |
| <p class="mb-4">Next-generation building protection systems powered by nanotechnology.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-cyan-500 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-cyan-500 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-cyan-500 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-cyan-500 hover:text-white transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-bold mb-6">Technology</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="hover:text-cyan-400 transition">Smart Mastics</a></li> | |
| <li><a href="#" class="hover:text-cyan-400 transition">Self-Healing Tech</a></li> | |
| <li><a href="#" class="hover:text-cyan-400 transition">Thermal Adaptation</a></li> | |
| <li><a href="#" class="hover:text-cyan-400 transition">Molecular Bonding</a></li> | |
| <li><a href="#" class="hover:text-cyan-400 transition">Research & Development</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-bold mb-6">Applications</h3> | |
| <ul class="space-y-3"> | |
| <li><a href="#" class="hover:text-cyan-400 transition">Roof Systems</a></li> | |
| <li><a href="#" class="hover:text-cyan-400 transition">Foundation Protection</a></li> | |
| <li><a href="#" class="hover:text-cyan-400 transition">Exterior Walls</a></li> | |
| <li><a href="#" class="hover:text-cyan-400 transition">Balconies & Decks</a></li> | |
| <li><a href="#" class="hover:text-cyan-400 transition">Specialty Structures</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-white font-bold mb-6">Contact</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt text-cyan-400 mt-1 mr-3"></i> | |
| <span>123 Tech Park Drive, Innovation City, IC 90210</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt text-cyan-400 mr-3"></i> | |
| <span>1-800-HYDRO-TECH</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope text-cyan-400 mr-3"></i> | |
| <span>shield@hydrotech.com</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p>© 2023 Hydro Tech Shield. All rights reserved.</p> | |
| <div class="flex space-x-6 mt-4 md:mt-0"> | |
| <a href="#" class="hover:text-cyan-400 transition">Privacy Policy</a> | |
| <a href="#" class="hover:text-cyan-400 transition">Terms of Service</a> | |
| <a href="#" class="hover:text-cyan-400 transition">Patents</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Surface selection interaction | |
| document.querySelectorAll('.surface-option').forEach(option => { | |
| option.addEventListener('click', function() { | |
| // Remove active class from all options | |
| document.querySelectorAll('.surface-option').forEach(opt => { | |
| opt.classList.remove('border-cyan-500', 'bg-cyan-50'); | |
| }); | |
| // Add active class to clicked option | |
| this.classList.add('border-cyan-500', 'bg-cyan-50'); | |
| // Update visualization | |
| const surfaceType = this.getAttribute('data-surface'); | |
| const visualization = document.getElementById('surfaceVisualization'); | |
| // In a real implementation, this would load a 3D model or animation | |
| visualization.innerHTML = ` | |
| <div class="text-center p-6"> | |
| <i class="fas fa-${getSurfaceIcon(surfaceType)} text-6xl text-cyan-500 mb-4"></i> | |
| <h3 class="text-xl font-bold mb-2">${getSurfaceName(surfaceType)} Application</h3> | |
| <p class="text-gray-600 mb-4">3D simulation loading...</p> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-cyan-500 h-2.5 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| `; | |
| // Simulate loading | |
| setTimeout(() => { | |
| visualization.innerHTML = ` | |
| <div class="relative h-full w-full overflow-hidden rounded-lg"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-gray-300 to-gray-400 flex items-center justify-center"> | |
| <div class="relative w-full h-full"> | |
| <!-- Simulated 3D model placeholder --> | |
| <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-4/5 h-3/5 bg-gray-600 rounded-t-xl"></div> | |
| <!-- Simulated applied coating --> | |
| <div class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-4/5 h-3/5 bg-cyan-500 bg-opacity-70 rounded-t-xl animate-pulse"></div> | |
| <div class="absolute top-10 left-1/2 transform -translate-x-1/2 text-center"> | |
| <h3 class="text-white font-bold text-lg drop-shadow-lg">${getSurfaceName(surfaceType)} Protected</h3> | |
| <p class="text-white text-sm">Hydro Tech Shield applied</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| }, 1500); | |
| }); | |
| }); | |
| function getSurfaceIcon(surfaceType) { | |
| const icons = { | |
| 'roof': 'home', | |
| 'foundation': 'building', | |
| 'wall': 'vector-square' | |
| }; | |
| return icons[surfaceType] || 'cube'; | |
| } | |
| function getSurfaceName(surfaceType) { | |
| const names = { | |
| 'roof': 'Roof', | |
| 'foundation': 'Foundation', | |
| 'wall': 'Exterior Wall' | |
| }; | |
| return names[surfaceType] || 'Surface'; | |
| } | |
| // Coverage calculator interaction | |
| const areaRange = document.getElementById('areaRange'); | |
| const areaValue = document.getElementById('areaValue'); | |
| const materialEstimate = document.getElementById('materialEstimate'); | |
| const timeEstimate = document.getElementById('timeEstimate'); | |
| const costEstimate = document.getElementById('costEstimate'); | |
| areaRange.addEventListener('input', function() { | |
| const area = parseInt(this.value); | |
| areaValue.textContent = area; | |
| // Calculate estimates based on area | |
| const material = Math.ceil(area / 35); | |
| const time = Math.max(2, Math.ceil(area / 300)); | |
| const cost = Math.ceil(area * 2.5); | |
| materialEstimate.textContent = `${material} gallons`; | |
| timeEstimate.textContent = `${time} hours`; | |
| costEstimate.textContent = `$${cost.toLocaleString()}`; | |
| }); | |
| // Countdown timer | |
| function updateCountdown() { | |
| const now = new Date(); | |
| const endOfDay = new Date(); | |
| endOfDay.setHours(23, 59, 59, 0); | |
| const diff = endOfDay - now; | |
| const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); | |
| const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); | |
| const seconds = Math.floor((diff % (1000 * 60)) / 1000); | |
| document.getElementById('countdown').innerHTML = ` | |
| <div class="bg-gray-700 px-2 py-1 rounded"> | |
| <span class="font-bold">${hours.toString().padStart(2, '0')}</span><span class="text-xs">h</span> | |
| </div> | |
| <div class="bg-gray-700 px-2 py-1 rounded"> | |
| <span class="font-bold">${minutes.toString().padStart(2, '0')}</span><span class="text-xs">m</span> | |
| </div> | |
| <div class="bg-gray-700 px-2 py-1 rounded"> | |
| <span class="font-bold">${seconds.toString().padStart(2, '0')}</span><span class="text-xs">s</span> | |
| </div> | |
| `; | |
| } | |
| setInterval(updateCountdown, 1000); | |
| updateCountdown(); | |
| // Scroll to calculator | |
| document.getElementById('calculateBtn').addEventListener('click', function() { | |
| document.getElementById('calculator').scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Mobile menu toggle | |
| document.querySelector('nav button').addEventListener('click', function() { | |
| const menu = document.querySelector('nav .md\\:flex'); | |
| menu.classList.toggle('hidden'); | |
| menu.classList.toggle('flex'); | |
| menu.classList.toggle('flex-col'); | |
| menu.classList.toggle('absolute'); | |
| menu.classList.toggle('top-16'); | |
| menu.classList.toggle('left-0'); | |
| menu.classList.toggle('right-0'); | |
| menu.classList.toggle('bg-gray-900'); | |
| menu.classList.toggle('p-4'); | |
| menu.classList.toggle('space-y-4'); | |
| menu.classList.toggle('space-x-8'); | |
| }); | |
| </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/gopro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |