Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>hydroS Micro-Climatic Companion</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> | |
| @keyframes rotate { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .rotating-cylinder { | |
| animation: rotate 15s linear infinite; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #6366f1 100%); | |
| } | |
| .remote-btn { | |
| transition: all 0.2s ease; | |
| } | |
| .remote-btn:active { | |
| transform: scale(0.95); | |
| box-shadow: inset 0 0 10px rgba(0,0,0,0.2); | |
| } | |
| .status-pulse { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white shadow-lg"> | |
| <div class="container mx-auto px-4 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex items-center space-x-3"> | |
| <i class="fas fa-water text-3xl"></i> | |
| <h1 class="text-2xl font-bold">hydroS</h1> | |
| </div> | |
| <div class="hidden md:flex space-x-6"> | |
| <a href="#features" class="hover:text-gray-200 transition">Features</a> | |
| <a href="#tech" class="hover:text-gray-200 transition">Technology</a> | |
| <a href="#remote" class="hover:text-gray-200 transition">Remote</a> | |
| <a href="#cost" class="hover:text-gray-200 transition">Cost Analysis</a> | |
| </div> | |
| <button class="md:hidden text-2xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="mt-12 text-center pb-12"> | |
| <h2 class="text-4xl md:text-5xl font-bold mb-4">Micro-Climatic Companion</h2> | |
| <p class="text-xl max-w-2xl mx-auto">Sustainable air conditioning with integrated water collection and solar power</p> | |
| <button class="mt-8 bg-white text-blue-600 px-8 py-3 rounded-full font-bold hover:bg-gray-100 transition shadow-lg"> | |
| Pre-order Now | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <!-- Features Section --> | |
| <section id="features" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Key Features</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-blue-500 text-4xl mb-4"> | |
| <i class="fas fa-snowflake"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Efficient Cooling</h3> | |
| <p class="text-gray-600">Peltier cooler with finned cold coil and hydrophilic coating for optimal temperature control and condensation.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-blue-500 text-4xl mb-4"> | |
| <i class="fas fa-tint"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Water Collection</h3> | |
| <p class="text-gray-600">Rotating copper cylinder with sequenced holes and optional copper strands for maximum water extraction from air.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-xl shadow-md hover:shadow-lg transition"> | |
| <div class="text-blue-500 text-4xl mb-4"> | |
| <i class="fas fa-solar-panel"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-2">Solar Powered</h3> | |
| <p class="text-gray-600">High-efficiency solar panel with optional trackers for sustainable operation and reduced energy costs.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Technology Section --> | |
| <section id="tech" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Technology Overview</h2> | |
| <div class="flex flex-col lg:flex-row items-center gap-8"> | |
| <div class="lg:w-1/2"> | |
| <div class="relative bg-white p-8 rounded-xl shadow-lg"> | |
| <div class="absolute -top-4 -left-4 w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white"> | |
| <i class="fas fa-cogs text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-semibold mb-4">Operating Frequencies</h3> | |
| <div class="space-y-4"> | |
| <div class="p-4 border border-blue-100 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-bluetooth-b text-blue-500 mr-2"></i> | |
| <h4 class="font-semibold">Bluetooth</h4> | |
| </div> | |
| <p class="text-sm text-gray-600">2.400 GHz to 2.4835 GHz - Energy-efficient, secure pairing (10-30m range)</p> | |
| </div> | |
| <div class="p-4 border border-blue-100 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-bbroadcast-tower text-purple-500 mr-2"></i> | |
| <h4 class="font-semibold">Radio Frequency</h4> | |
| </div> | |
| <p class="text-sm text-gray-600">433MHz/915MHz/2.4GHz - Longer range (up to 100m), better penetration</p> | |
| </div> | |
| <div class="p-4 border border-blue-100 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-infinity text-red-500 mr-2"></i> | |
| <h4 class="font-semibold">Infrared</h4> | |
| </div> | |
| <p class="text-sm text-gray-600">360 kHz to 1 GHz - Low power, line-of-sight required (few meters)</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-white p-6 rounded-xl shadow-lg"> | |
| <div class="flex justify-center mb-6"> | |
| <div class="relative w-64 h-64"> | |
| <div class="absolute inset-0 bg-blue-100 rounded-full flex items-center justify-center rotating-cylinder"> | |
| <i class="fas fa-circle-notch text-blue-500 text-6xl"></i> | |
| </div> | |
| <div class="absolute inset-4 bg-blue-200 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-droplet text-blue-600 text-4xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-xl font-semibold text-center mb-3">Rotating Copper Cylinder</h3> | |
| <ul class="space-y-2 text-gray-700"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Increases surface area for faster condensation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Sequenced holes facilitate water dispersion</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Self-cleaning due to continuous movement</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Optional copper strands for enhanced heat transfer</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Remote Control Section --> | |
| <section id="remote" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Remote Control Design</h2> | |
| <div class="flex flex-col lg:flex-row items-center gap-12"> | |
| <div class="lg:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <div class="w-64 h-40 bg-gray-800 rounded-2xl shadow-xl p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> | |
| <div class="text-xs text-gray-400">hydroS REMOTE</div> | |
| <div class="w-3 h-3 rounded-full bg-green-500 status-pulse"></div> | |
| </div> | |
| <div class="grid grid-cols-3 gap-2 mb-3"> | |
| <button class="remote-btn bg-blue-600 text-white rounded-lg py-2 flex items-center justify-center"> | |
| <i class="fas fa-power-off"></i> | |
| </button> | |
| <button class="remote-btn bg-gray-700 text-white rounded-lg py-2 flex items-center justify-center"> | |
| <i class="fas fa-fan"></i> | |
| </button> | |
| <button class="remote-btn bg-gray-700 text-white rounded-lg py-2 flex items-center justify-center"> | |
| <i class="fas fa-snowflake"></i> | |
| </button> | |
| <button class="remote-btn bg-gray-700 text-white rounded-lg py-2 flex items-center justify-center"> | |
| <i class="fas fa-sun"></i> | |
| </button> | |
| <button class="remote-btn bg-blue-600 text-white rounded-lg py-2 flex items-center justify-center"> | |
| <i class="fas fa-tint"></i> | |
| </button> | |
| <button class="remote-btn bg-gray-700 text-white rounded-lg py-2 flex items-center justify-center"> | |
| <i class="fas fa-lightbulb"></i> | |
| </button> | |
| </div> | |
| <div class="bg-gray-900 rounded-lg p-2 text-center"> | |
| <div class="text-xs text-gray-400">Battery: 85%</div> | |
| <div class="h-1 bg-gray-700 rounded-full mt-1"> | |
| <div class="h-1 bg-green-500 rounded-full" style="width: 85%;"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-6 -right-6 bg-blue-500 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg"> | |
| <i class="fas fa-bluetooth-b"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="space-y-6"> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-2 flex items-center"> | |
| <i class="fas fa-mobile-alt text-blue-500 mr-2"></i> | |
| Compact Design | |
| </h3> | |
| <p class="text-gray-600">3-inch ergonomic remote with water-resistant, impact-resistant casing for humid environments.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-2 flex items-center"> | |
| <i class="fas fa-battery-three-quarters text-green-500 mr-2"></i> | |
| Power Options | |
| </h3> | |
| <p class="text-gray-600">Rechargeable lithium-ion battery with optional solar panel for self-charging capability.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-semibold mb-2 flex items-center"> | |
| <i class="fas fa-shield-alt text-purple-500 mr-2"></i> | |
| Secure Communication | |
| </h3> | |
| <p class="text-gray-600">Bluetooth 5.0 with AES encryption for reliable, secure control of your hydroS unit.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Cost Analysis Section --> | |
| <section id="cost" class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">Cost Analysis</h2> | |
| <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h3 class="text-2xl font-semibold">Estimated Production Cost</h3> | |
| <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm font-medium">Per Unit</span> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">Material Costs</span> | |
| <span>$150 - $250</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 70%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">Labor Costs</span> | |
| <span>$50 - $100</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-green-500 h-2.5 rounded-full" style="width: 40%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span class="font-medium">Overhead Costs</span> | |
| <span>$50 - $100</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-purple-500 h-2.5 rounded-full" style="width: 40%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 p-4 bg-blue-50 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-lg">Total Estimated Cost</span> | |
| <span class="text-2xl font-bold text-blue-700">$250 - $450</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-100 px-6 py-4"> | |
| <h4 class="font-semibold mb-2">Variable Factors:</h4> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-boxes text-gray-500 mt-1 mr-2"></i> | |
| <span>Production volume (economies of scale)</span> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-globe-americas text-gray-500 mt-1 mr-2"></i> | |
| <span>Geographical location of production</span> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-robot text-gray-500 mt-1 mr-2"></i> | |
| <span>Automation level in manufacturing</span> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-tools text-gray-500 mt-1 mr-2"></i> | |
| <span>Material sourcing and supplier costs</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- System Diagram --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12">System Diagram</h2> | |
| <div class="bg-gray-50 p-8 rounded-xl shadow-inner"> | |
| <div class="relative h-96"> | |
| <!-- Air Intake --> | |
| <div class="absolute left-8 top-1/4 bg-white p-4 rounded-lg shadow-md border-l-4 border-blue-500 w-40"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-wind text-blue-500 mr-2"></i> | |
| <h4 class="font-semibold">Air Intake</h5> | |
| </div> | |
| <p class="text-xs text-gray-600">5x5" high static pressure fan with pre-filter</p> | |
| </div> | |
| <!-- Cooling System --> | |
| <div class="absolute left-1/3 top-1/3 bg-white p-4 rounded-lg shadow-md border-l-4 border-green-500 w-40"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-snowflake text-green-500 mr-2"></i> | |
| <h4 class="font-semibold">Cooling System</h5> | |
| </div> | |
| <p class="text-xs text-gray-600">Peltier cooler with finned cold coil</p> | |
| </div> | |
| <!-- Water Collection --> | |
| <div class="absolute right-1/3 top-1/2 bg-white p-4 rounded-lg shadow-md border-l-4 border-purple-500 w-40"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-tint text-purple-500 mr-2"></i> | |
| <h4 class="font-semibold">Water Collection</h5> | |
| </div> | |
| <p class="text-xs text-gray-600">Rotating copper cylinder with collection pan</p> | |
| </div> | |
| <!-- Solar Power --> | |
| <div class="absolute right-8 top-1/4 bg-white p-4 rounded-lg shadow-md border-l-4 border-yellow-500 w-40"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-solar-panel text-yellow-500 mr-2"></i> | |
| <h4 class="font-semibold">Solar Power</h5> | |
| </div> | |
| <p class="text-xs text-gray-600">High-efficiency panel with tracking</p> | |
| </div> | |
| <!-- Control System --> | |
| <div class="absolute left-1/2 top-3/4 transform -translate-x-1/2 bg-white p-4 rounded-lg shadow-md border-l-4 border-red-500 w-44"> | |
| <div class="flex items-center mb-2"> | |
| <i class="fas fa-microchip text-red-500 mr-2"></i> | |
| <h4 class="font-semibold">Control System</h5> | |
| </div> | |
| <p class="text-xs text-gray-600">Microcontroller with sensors and Bluetooth</p> | |
| </div> | |
| <!-- Arrows showing flow --> | |
| <div class="absolute left-48 top-1/3 w-16 h-1 bg-blue-300"></div> | |
| <div class="absolute left-1/3 top-48 w-1 h-16 bg-green-300"></div> | |
| <div class="absolute right-1/3 top-48 w-1 h-16 bg-purple-300"></div> | |
| <div class="absolute right-48 top-1/3 w-16 h-1 bg-yellow-300"></div> | |
| <div class="absolute left-1/2 top-1/2 w-1 h-16 bg-gray-300"></div> | |
| <!-- Central unit representation --> | |
| <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2"> | |
| <div class="w-32 h-32 bg-gradient-to-br from-blue-100 to-blue-200 rounded-full flex items-center justify-center shadow-lg"> | |
| <i class="fas fa-water text-blue-500 text-4xl"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 flex items-center"> | |
| <i class="fas fa-water mr-2"></i> | |
| hydroS | |
| </h3> | |
| <p class="text-gray-400">Sustainable micro-climatic solutions for a better future.</p> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Technology</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Cooling System</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Water Collection</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Solar Integration</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Wireless Control</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="font-semibold mb-4">Contact</h4> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-file text-gray-400 mr-2"></i> | |
| <span class="text-gray-400">Private Dev</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <i class="fas fa-box text-gray-400 mr-2"></i> | |
| <span class="text-gray-400">+</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500"> | |
| <p>© 2025 hydroS. All rights reserved.</p> | |
| <p class="mt-2 text-sm">Status: Not submitted for FCC compliant wireless communication in North America</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Simple interactive elements | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Remote control button interactions | |
| const remoteBtns = document.querySelectorAll('.remote-btn'); | |
| remoteBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| this.classList.toggle('bg-blue-600'); | |
| this.classList.toggle('bg-gray-700'); | |
| // Find icon and toggle active state | |
| const icon = this.querySelector('i'); | |
| if (icon) { | |
| icon.classList.toggle('text-white'); | |
| icon.classList.toggle('text-blue-300'); | |
| } | |
| }); | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| }); | |
| </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=privateuserh/hydros" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |