|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Water - The Source of Life</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> |
|
|
.water-wave { |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
.water-wave::before { |
|
|
content: ""; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 0; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1200 120" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"><path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" fill="rgba(14,165,233,0.1)"/><path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z" fill="rgba(14,165,233,0.2)"/><path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" fill="rgba(14,165,233,0.3)"/></svg>'); |
|
|
background-repeat: no-repeat; |
|
|
background-size: cover; |
|
|
animation: wave 12s linear infinite; |
|
|
} |
|
|
@keyframes wave { |
|
|
0% { transform: translateX(0) translateZ(0) scaleY(1); } |
|
|
50% { transform: translateX(-25%) translateZ(0) scaleY(0.9); } |
|
|
100% { transform: translateX(-50%) translateZ(0) scaleY(1); } |
|
|
} |
|
|
.droplet { |
|
|
position: absolute; |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
background: rgba(14, 165, 233, 0.6); |
|
|
border-radius: 50%; |
|
|
animation: fall linear infinite; |
|
|
} |
|
|
@keyframes fall { |
|
|
to { transform: translateY(100vh); } |
|
|
} |
|
|
.water-card:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-blue-50 font-sans antialiased"> |
|
|
|
|
|
<header class="water-wave relative bg-gradient-to-b from-sky-500 to-blue-600 text-white py-20"> |
|
|
<div class="container mx-auto px-6 text-center relative z-10"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-4 animate-pulse">Water</h1> |
|
|
<p class="text-xl md:text-2xl font-light mb-8">The Source of All Life</p> |
|
|
<div class="flex justify-center space-x-4"> |
|
|
<button class="bg-white text-blue-600 px-6 py-3 rounded-full font-semibold hover:bg-blue-50 transition duration-300 transform hover:scale-105"> |
|
|
<i class="fas fa-tint mr-2"></i> Learn More |
|
|
</button> |
|
|
<button class="border-2 border-white text-white px-6 py-3 rounded-full font-semibold hover:bg-white hover:text-blue-600 transition duration-300 transform hover:scale-105"> |
|
|
<i class="fas fa-hand-holding-water mr-2"></i> Conserve |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="droplets-container"></div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center text-blue-800 mb-12">The Miracle of Water</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="water-card bg-blue-50 rounded-xl p-8 transition duration-300 ease-in-out"> |
|
|
<div class="text-blue-500 text-4xl mb-4"> |
|
|
<i class="fas fa-globe"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-blue-800 mb-3">71% of Earth's Surface</h3> |
|
|
<p class="text-blue-600">Our planet is covered mostly by water, yet only 2.5% is freshwater suitable for drinking and agriculture.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="water-card bg-blue-50 rounded-xl p-8 transition duration-300 ease-in-out"> |
|
|
<div class="text-blue-500 text-4xl mb-4"> |
|
|
<i class="fas fa-heartbeat"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-blue-800 mb-3">60% of Human Body</h3> |
|
|
<p class="text-blue-600">Water makes up about 60% of an adult's body weight and is essential for all biological processes.</p> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="water-card bg-blue-50 rounded-xl p-8 transition duration-300 ease-in-out"> |
|
|
<div class="text-blue-500 text-4xl mb-4"> |
|
|
<i class="fas fa-seedling"></i> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold text-blue-800 mb-3">Source of Civilization</h3> |
|
|
<p class="text-blue-600">All great civilizations began near water sources. Water enabled agriculture, trade, and development.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gradient-to-b from-blue-100 to-blue-200"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col md:flex-row items-center"> |
|
|
<div class="md:w-1/2 mb-8 md:mb-0 md:pr-12"> |
|
|
<h2 class="text-3xl font-bold text-blue-800 mb-6">Every Drop Counts</h2> |
|
|
<p class="text-blue-700 mb-6 text-lg">With growing populations and climate change, water conservation has never been more important. Small changes in our daily habits can make a big difference in preserving this precious resource.</p> |
|
|
|
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-blue-500 rounded-full p-2 mr-4"> |
|
|
<i class="fas fa-shower text-white"></i> |
|
|
</div> |
|
|
<p class="text-blue-700">Shorten your shower by 2 minutes to save 10 gallons</p> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-blue-500 rounded-full p-2 mr-4"> |
|
|
<i class="fas fa-faucet text-white"></i> |
|
|
</div> |
|
|
<p class="text-blue-700">Fix leaky faucets to save up to 3,000 gallons per year</p> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<div class="bg-blue-500 rounded-full p-2 mr-4"> |
|
|
<i class="fas fa-glass-whiskey text-white"></i> |
|
|
</div> |
|
|
<p class="text-blue-700">Use a reusable water bottle instead of disposable plastic</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="md:w-1/2 relative"> |
|
|
<div class="bg-white rounded-xl shadow-xl p-6"> |
|
|
<h3 class="text-xl font-semibold text-blue-800 mb-4">Water Conservation Calculator</h3> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-blue-700 mb-2">Daily Shower Time (minutes)</label> |
|
|
<input type="range" min="2" max="20" value="10" class="w-full h-2 bg-blue-200 rounded-lg appearance-none cursor-pointer" id="showerTime"> |
|
|
<div class="flex justify-between text-xs text-blue-600 mt-1"> |
|
|
<span>2 min</span> |
|
|
<span id="showerValue">10 min</span> |
|
|
<span>20 min</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-blue-700 mb-2">Number of People in Household</label> |
|
|
<input type="number" min="1" max="10" value="4" class="w-full px-4 py-2 border border-blue-300 rounded-lg" id="householdSize"> |
|
|
</div> |
|
|
<button id="calculateBtn" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition duration-300"> |
|
|
Calculate Water Savings |
|
|
</button> |
|
|
<div id="result" class="mt-4 p-4 bg-blue-50 rounded-lg hidden"> |
|
|
<p class="text-blue-800 font-medium">By reducing your shower time to <span id="newShowerTime"></span> minutes, your household could save approximately <span id="waterSaved"></span> gallons of water per year!</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<h2 class="text-3xl font-bold text-center text-blue-800 mb-12">Water's Many Forms</h2> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-4"> |
|
|
<div class="relative overflow-hidden rounded-lg h-48 group"> |
|
|
<img src="https://source.unsplash.com/random/600x600/?ocean" alt="Ocean" class="w-full h-full object-cover transform group-hover:scale-110 transition duration-500"> |
|
|
<div class="absolute inset-0 bg-blue-900 bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500"> |
|
|
<span class="text-white font-bold text-lg">Oceans</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative overflow-hidden rounded-lg h-48 group"> |
|
|
<img src="https://source.unsplash.com/random/600x600/?river" alt="River" class="w-full h-full object-cover transform group-hover:scale-110 transition duration-500"> |
|
|
<div class="absolute inset-0 bg-blue-900 bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500"> |
|
|
<span class="text-white font-bold text-lg">Rivers</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative overflow-hidden rounded-lg h-48 group"> |
|
|
<img src="https://source.unsplash.com/random/600x600/?waterfall" alt="Waterfall" class="w-full h-full object-cover transform group-hover:scale-110 transition duration-500"> |
|
|
<div class="absolute inset-0 bg-blue-900 bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500"> |
|
|
<span class="text-white font-bold text-lg">Waterfalls</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative overflow-hidden rounded-lg h-48 group"> |
|
|
<img src="https://source.unsplash.com/random/600x600/?lake" alt="Lake" class="w-full h-full object-cover transform group-hover:scale-110 transition duration-500"> |
|
|
<div class="absolute inset-0 bg-blue-900 bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500"> |
|
|
<span class="text-white font-bold text-lg">Lakes</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative overflow-hidden rounded-lg h-48 group"> |
|
|
<img src="https://source.unsplash.com/random/600x600/?rain" alt="Rain" class="w-full h-full object-cover transform group-hover:scale-110 transition duration-500"> |
|
|
<div class="absolute inset-0 bg-blue-900 bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500"> |
|
|
<span class="text-white font-bold text-lg">Rain</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative overflow-hidden rounded-lg h-48 group"> |
|
|
<img src="https://source.unsplash.com/random/600x600/?snow" alt="Snow" class="w-full h-full object-cover transform group-hover:scale-110 transition duration-500"> |
|
|
<div class="absolute inset-0 bg-blue-900 bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500"> |
|
|
<span class="text-white font-bold text-lg">Snow</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative overflow-hidden rounded-lg h-48 group"> |
|
|
<img src="https://source.unsplash.com/random/600x600/?ice" alt="Ice" class="w-full h-full object-cover transform group-hover:scale-110 transition duration-500"> |
|
|
<div class="absolute inset-0 bg-blue-900 bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500"> |
|
|
<span class="text-white font-bold text-lg">Ice</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative overflow-hidden rounded-lg h-48 group"> |
|
|
<img src="https://source.unsplash.com/random/600x600/?dew" alt="Dew" class="w-full h-full object-cover transform group-hover:scale-110 transition duration-500"> |
|
|
<div class="absolute inset-0 bg-blue-900 bg-opacity-30 flex items-center justify-center opacity-0 group-hover:opacity-100 transition duration-500"> |
|
|
<span class="text-white font-bold text-lg">Dew</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-blue-800 text-white"> |
|
|
<div class="container mx-auto px-6 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6">Protect Our Water, Protect Our Future</h2> |
|
|
<p class="text-xl mb-8 max-w-3xl mx-auto">Water is not just a resource—it's the foundation of all life on Earth. Join the movement to conserve and protect our water sources for generations to come.</p> |
|
|
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> |
|
|
<button class="bg-white text-blue-800 px-8 py-4 rounded-full font-bold hover:bg-blue-100 transition duration-300 transform hover:scale-105"> |
|
|
<i class="fas fa-hands-helping mr-2"></i> Get Involved |
|
|
</button> |
|
|
<button class="border-2 border-white px-8 py-4 rounded-full font-bold hover:bg-blue-700 transition duration-300 transform hover:scale-105"> |
|
|
<i class="fas fa-book mr-2"></i> Learn More |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-blue-900 text-white py-12"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="flex flex-col md:flex-row justify-between"> |
|
|
<div class="mb-8 md:mb-0"> |
|
|
<h3 class="text-xl font-bold mb-4">Water Life</h3> |
|
|
<p class="max-w-xs">Celebrating and protecting the source of all life on our blue planet.</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 md:grid-cols-3 gap-8"> |
|
|
<div> |
|
|
<h4 class="font-semibold mb-4">Explore</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:text-blue-300 transition">About</a></li> |
|
|
<li><a href="#" class="hover:text-blue-300 transition">Facts</a></li> |
|
|
<li><a href="#" class="hover:text-blue-300 transition">Conservation</a></li> |
|
|
<li><a href="#" class="hover:text-blue-300 transition">Gallery</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold mb-4">Act</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="hover:text-blue-300 transition">Volunteer</a></li> |
|
|
<li><a href="#" class="hover:text-blue-300 transition">Donate</a></li> |
|
|
<li><a href="#" class="hover:text-blue-300 transition">Petitions</a></li> |
|
|
<li><a href="#" class="hover:text-blue-300 transition">Events</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-semibold mb-4">Connect</h4> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-2xl hover:text-blue-300 transition"><i class="fab fa-facebook"></i></a> |
|
|
<a href="#" class="text-2xl hover:text-blue-300 transition"><i class="fab fa-twitter"></i></a> |
|
|
<a href="#" class="text-2xl hover:text-blue-300 transition"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-2xl hover:text-blue-300 transition"><i class="fab fa-youtube"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="border-t border-blue-800 mt-12 pt-8 text-center text-blue-300"> |
|
|
<p>© 2023 Water Life. All rights reserved. Water is life.</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
function createDroplets() { |
|
|
const container = document.getElementById('droplets-container'); |
|
|
const containerWidth = container.parentElement.offsetWidth; |
|
|
const dropletCount = Math.floor(containerWidth / 20); |
|
|
|
|
|
for (let i = 0; i < dropletCount; i++) { |
|
|
const droplet = document.createElement('div'); |
|
|
droplet.classList.add('droplet'); |
|
|
|
|
|
|
|
|
const left = Math.random() * 100; |
|
|
const size = 4 + Math.random() * 6; |
|
|
const opacity = 0.2 + Math.random() * 0.5; |
|
|
const animationDuration = 3 + Math.random() * 7; |
|
|
const delay = Math.random() * 5; |
|
|
|
|
|
droplet.style.left = `${left}%`; |
|
|
droplet.style.width = `${size}px`; |
|
|
droplet.style.height = `${size}px`; |
|
|
droplet.style.opacity = opacity; |
|
|
droplet.style.animationDuration = `${animationDuration}s`; |
|
|
droplet.style.animationDelay = `${delay}s`; |
|
|
|
|
|
container.appendChild(droplet); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('calculateBtn').addEventListener('click', function() { |
|
|
const showerTime = parseInt(document.getElementById('showerTime').value); |
|
|
const householdSize = parseInt(document.getElementById('householdSize').value); |
|
|
|
|
|
|
|
|
const newShowerTime = Math.max(5, showerTime - 2); |
|
|
const dailySavings = 2 * (showerTime - newShowerTime) * householdSize; |
|
|
const yearlySavings = dailySavings * 365; |
|
|
|
|
|
document.getElementById('newShowerTime').textContent = newShowerTime; |
|
|
document.getElementById('waterSaved').textContent = yearlySavings.toLocaleString(); |
|
|
document.getElementById('result').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('showerTime').addEventListener('input', function() { |
|
|
document.getElementById('showerValue').textContent = this.value + ' min'; |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('load', function() { |
|
|
createDroplets(); |
|
|
}); |
|
|
|
|
|
|
|
|
window.addEventListener('resize', function() { |
|
|
const container = document.getElementById('droplets-container'); |
|
|
container.innerHTML = ''; |
|
|
createDroplets(); |
|
|
}); |
|
|
</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=Enjii/hpps-github-com-shirendev1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
