Hugging Face's logo

Spaces:
Enjii
/
hpps-github-com-shirendev1
Running

App Files Community
Enjii commited on
Commit
f4178d9
·
verified ·
1 Parent(s): 453059f

water is the source of life - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +341 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Hpps Github Com Shirendev1
3
- emoji: 👀
4
- colorFrom: indigo
5
- colorTo: gray
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: hpps-github-com-shirendev1
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,341 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Water - The Source of Life</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .water-wave {
11
+ position: relative;
12
+ overflow: hidden;
13
+ }
14
+ .water-wave::before {
15
+ content: "";
16
+ position: absolute;
17
+ top: 0;
18
+ left: 0;
19
+ width: 100%;
20
+ height: 100%;
21
+ 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>');
22
+ background-repeat: no-repeat;
23
+ background-size: cover;
24
+ animation: wave 12s linear infinite;
25
+ }
26
+ @keyframes wave {
27
+ 0% { transform: translateX(0) translateZ(0) scaleY(1); }
28
+ 50% { transform: translateX(-25%) translateZ(0) scaleY(0.9); }
29
+ 100% { transform: translateX(-50%) translateZ(0) scaleY(1); }
30
+ }
31
+ .droplet {
32
+ position: absolute;
33
+ width: 8px;
34
+ height: 8px;
35
+ background: rgba(14, 165, 233, 0.6);
36
+ border-radius: 50%;
37
+ animation: fall linear infinite;
38
+ }
39
+ @keyframes fall {
40
+ to { transform: translateY(100vh); }
41
+ }
42
+ .water-card:hover {
43
+ transform: translateY(-5px);
44
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
45
+ }
46
+ </style>
47
+ </head>
48
+ <body class="bg-blue-50 font-sans antialiased">
49
+ <!-- Water Wave Header -->
50
+ <header class="water-wave relative bg-gradient-to-b from-sky-500 to-blue-600 text-white py-20">
51
+ <div class="container mx-auto px-6 text-center relative z-10">
52
+ <h1 class="text-4xl md:text-6xl font-bold mb-4 animate-pulse">Water</h1>
53
+ <p class="text-xl md:text-2xl font-light mb-8">The Source of All Life</p>
54
+ <div class="flex justify-center space-x-4">
55
+ <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">
56
+ <i class="fas fa-tint mr-2"></i> Learn More
57
+ </button>
58
+ <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">
59
+ <i class="fas fa-hand-holding-water mr-2"></i> Conserve
60
+ </button>
61
+ </div>
62
+ </div>
63
+ <!-- Animated droplets -->
64
+ <div id="droplets-container"></div>
65
+ </header>
66
+
67
+ <!-- Water Facts Section -->
68
+ <section class="py-16 bg-white">
69
+ <div class="container mx-auto px-6">
70
+ <h2 class="text-3xl font-bold text-center text-blue-800 mb-12">The Miracle of Water</h2>
71
+
72
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
73
+ <!-- Card 1 -->
74
+ <div class="water-card bg-blue-50 rounded-xl p-8 transition duration-300 ease-in-out">
75
+ <div class="text-blue-500 text-4xl mb-4">
76
+ <i class="fas fa-globe"></i>
77
+ </div>
78
+ <h3 class="text-xl font-semibold text-blue-800 mb-3">71% of Earth's Surface</h3>
79
+ <p class="text-blue-600">Our planet is covered mostly by water, yet only 2.5% is freshwater suitable for drinking and agriculture.</p>
80
+ </div>
81
+
82
+ <!-- Card 2 -->
83
+ <div class="water-card bg-blue-50 rounded-xl p-8 transition duration-300 ease-in-out">
84
+ <div class="text-blue-500 text-4xl mb-4">
85
+ <i class="fas fa-heartbeat"></i>
86
+ </div>
87
+ <h3 class="text-xl font-semibold text-blue-800 mb-3">60% of Human Body</h3>
88
+ <p class="text-blue-600">Water makes up about 60% of an adult's body weight and is essential for all biological processes.</p>
89
+ </div>
90
+
91
+ <!-- Card 3 -->
92
+ <div class="water-card bg-blue-50 rounded-xl p-8 transition duration-300 ease-in-out">
93
+ <div class="text-blue-500 text-4xl mb-4">
94
+ <i class="fas fa-seedling"></i>
95
+ </div>
96
+ <h3 class="text-xl font-semibold text-blue-800 mb-3">Source of Civilization</h3>
97
+ <p class="text-blue-600">All great civilizations began near water sources. Water enabled agriculture, trade, and development.</p>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </section>
102
+
103
+ <!-- Water Conservation Section -->
104
+ <section class="py-16 bg-gradient-to-b from-blue-100 to-blue-200">
105
+ <div class="container mx-auto px-6">
106
+ <div class="flex flex-col md:flex-row items-center">
107
+ <div class="md:w-1/2 mb-8 md:mb-0 md:pr-12">
108
+ <h2 class="text-3xl font-bold text-blue-800 mb-6">Every Drop Counts</h2>
109
+ <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>
110
+
111
+ <div class="space-y-4">
112
+ <div class="flex items-center">
113
+ <div class="bg-blue-500 rounded-full p-2 mr-4">
114
+ <i class="fas fa-shower text-white"></i>
115
+ </div>
116
+ <p class="text-blue-700">Shorten your shower by 2 minutes to save 10 gallons</p>
117
+ </div>
118
+ <div class="flex items-center">
119
+ <div class="bg-blue-500 rounded-full p-2 mr-4">
120
+ <i class="fas fa-faucet text-white"></i>
121
+ </div>
122
+ <p class="text-blue-700">Fix leaky faucets to save up to 3,000 gallons per year</p>
123
+ </div>
124
+ <div class="flex items-center">
125
+ <div class="bg-blue-500 rounded-full p-2 mr-4">
126
+ <i class="fas fa-glass-whiskey text-white"></i>
127
+ </div>
128
+ <p class="text-blue-700">Use a reusable water bottle instead of disposable plastic</p>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="md:w-1/2 relative">
134
+ <div class="bg-white rounded-xl shadow-xl p-6">
135
+ <h3 class="text-xl font-semibold text-blue-800 mb-4">Water Conservation Calculator</h3>
136
+ <div class="mb-4">
137
+ <label class="block text-blue-700 mb-2">Daily Shower Time (minutes)</label>
138
+ <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">
139
+ <div class="flex justify-between text-xs text-blue-600 mt-1">
140
+ <span>2 min</span>
141
+ <span id="showerValue">10 min</span>
142
+ <span>20 min</span>
143
+ </div>
144
+ </div>
145
+ <div class="mb-4">
146
+ <label class="block text-blue-700 mb-2">Number of People in Household</label>
147
+ <input type="number" min="1" max="10" value="4" class="w-full px-4 py-2 border border-blue-300 rounded-lg" id="householdSize">
148
+ </div>
149
+ <button id="calculateBtn" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition duration-300">
150
+ Calculate Water Savings
151
+ </button>
152
+ <div id="result" class="mt-4 p-4 bg-blue-50 rounded-lg hidden">
153
+ <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>
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </div>
158
+ </div>
159
+ </section>
160
+
161
+ <!-- Water in Nature Gallery -->
162
+ <section class="py-16 bg-white">
163
+ <div class="container mx-auto px-6">
164
+ <h2 class="text-3xl font-bold text-center text-blue-800 mb-12">Water's Many Forms</h2>
165
+
166
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
167
+ <div class="relative overflow-hidden rounded-lg h-48 group">
168
+ <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">
169
+ <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">
170
+ <span class="text-white font-bold text-lg">Oceans</span>
171
+ </div>
172
+ </div>
173
+ <div class="relative overflow-hidden rounded-lg h-48 group">
174
+ <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">
175
+ <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">
176
+ <span class="text-white font-bold text-lg">Rivers</span>
177
+ </div>
178
+ </div>
179
+ <div class="relative overflow-hidden rounded-lg h-48 group">
180
+ <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">
181
+ <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">
182
+ <span class="text-white font-bold text-lg">Waterfalls</span>
183
+ </div>
184
+ </div>
185
+ <div class="relative overflow-hidden rounded-lg h-48 group">
186
+ <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">
187
+ <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">
188
+ <span class="text-white font-bold text-lg">Lakes</span>
189
+ </div>
190
+ </div>
191
+ <div class="relative overflow-hidden rounded-lg h-48 group">
192
+ <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">
193
+ <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">
194
+ <span class="text-white font-bold text-lg">Rain</span>
195
+ </div>
196
+ </div>
197
+ <div class="relative overflow-hidden rounded-lg h-48 group">
198
+ <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">
199
+ <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">
200
+ <span class="text-white font-bold text-lg">Snow</span>
201
+ </div>
202
+ </div>
203
+ <div class="relative overflow-hidden rounded-lg h-48 group">
204
+ <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">
205
+ <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">
206
+ <span class="text-white font-bold text-lg">Ice</span>
207
+ </div>
208
+ </div>
209
+ <div class="relative overflow-hidden rounded-lg h-48 group">
210
+ <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">
211
+ <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">
212
+ <span class="text-white font-bold text-lg">Dew</span>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>
217
+ </section>
218
+
219
+ <!-- Call to Action -->
220
+ <section class="py-16 bg-blue-800 text-white">
221
+ <div class="container mx-auto px-6 text-center">
222
+ <h2 class="text-3xl font-bold mb-6">Protect Our Water, Protect Our Future</h2>
223
+ <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>
224
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
225
+ <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">
226
+ <i class="fas fa-hands-helping mr-2"></i> Get Involved
227
+ </button>
228
+ <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">
229
+ <i class="fas fa-book mr-2"></i> Learn More
230
+ </button>
231
+ </div>
232
+ </div>
233
+ </section>
234
+
235
+ <!-- Footer -->
236
+ <footer class="bg-blue-900 text-white py-12">
237
+ <div class="container mx-auto px-6">
238
+ <div class="flex flex-col md:flex-row justify-between">
239
+ <div class="mb-8 md:mb-0">
240
+ <h3 class="text-xl font-bold mb-4">Water Life</h3>
241
+ <p class="max-w-xs">Celebrating and protecting the source of all life on our blue planet.</p>
242
+ </div>
243
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
244
+ <div>
245
+ <h4 class="font-semibold mb-4">Explore</h4>
246
+ <ul class="space-y-2">
247
+ <li><a href="#" class="hover:text-blue-300 transition">About</a></li>
248
+ <li><a href="#" class="hover:text-blue-300 transition">Facts</a></li>
249
+ <li><a href="#" class="hover:text-blue-300 transition">Conservation</a></li>
250
+ <li><a href="#" class="hover:text-blue-300 transition">Gallery</a></li>
251
+ </ul>
252
+ </div>
253
+ <div>
254
+ <h4 class="font-semibold mb-4">Act</h4>
255
+ <ul class="space-y-2">
256
+ <li><a href="#" class="hover:text-blue-300 transition">Volunteer</a></li>
257
+ <li><a href="#" class="hover:text-blue-300 transition">Donate</a></li>
258
+ <li><a href="#" class="hover:text-blue-300 transition">Petitions</a></li>
259
+ <li><a href="#" class="hover:text-blue-300 transition">Events</a></li>
260
+ </ul>
261
+ </div>
262
+ <div>
263
+ <h4 class="font-semibold mb-4">Connect</h4>
264
+ <div class="flex space-x-4">
265
+ <a href="#" class="text-2xl hover:text-blue-300 transition"><i class="fab fa-facebook"></i></a>
266
+ <a href="#" class="text-2xl hover:text-blue-300 transition"><i class="fab fa-twitter"></i></a>
267
+ <a href="#" class="text-2xl hover:text-blue-300 transition"><i class="fab fa-instagram"></i></a>
268
+ <a href="#" class="text-2xl hover:text-blue-300 transition"><i class="fab fa-youtube"></i></a>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </div>
273
+ <div class="border-t border-blue-800 mt-12 pt-8 text-center text-blue-300">
274
+ <p>&copy; 2023 Water Life. All rights reserved. Water is life.</p>
275
+ </div>
276
+ </div>
277
+ </footer>
278
+
279
+ <script>
280
+ // Create animated water droplets
281
+ function createDroplets() {
282
+ const container = document.getElementById('droplets-container');
283
+ const containerWidth = container.parentElement.offsetWidth;
284
+ const dropletCount = Math.floor(containerWidth / 20); // Adjust density based on screen size
285
+
286
+ for (let i = 0; i < dropletCount; i++) {
287
+ const droplet = document.createElement('div');
288
+ droplet.classList.add('droplet');
289
+
290
+ // Random properties for each droplet
291
+ const left = Math.random() * 100;
292
+ const size = 4 + Math.random() * 6;
293
+ const opacity = 0.2 + Math.random() * 0.5;
294
+ const animationDuration = 3 + Math.random() * 7;
295
+ const delay = Math.random() * 5;
296
+
297
+ droplet.style.left = `${left}%`;
298
+ droplet.style.width = `${size}px`;
299
+ droplet.style.height = `${size}px`;
300
+ droplet.style.opacity = opacity;
301
+ droplet.style.animationDuration = `${animationDuration}s`;
302
+ droplet.style.animationDelay = `${delay}s`;
303
+
304
+ container.appendChild(droplet);
305
+ }
306
+ }
307
+
308
+ // Water conservation calculator
309
+ document.getElementById('calculateBtn').addEventListener('click', function() {
310
+ const showerTime = parseInt(document.getElementById('showerTime').value);
311
+ const householdSize = parseInt(document.getElementById('householdSize').value);
312
+
313
+ // Calculate potential savings (2 gallons per minute per person per day)
314
+ const newShowerTime = Math.max(5, showerTime - 2); // Suggest reducing by 2 minutes
315
+ const dailySavings = 2 * (showerTime - newShowerTime) * householdSize;
316
+ const yearlySavings = dailySavings * 365;
317
+
318
+ document.getElementById('newShowerTime').textContent = newShowerTime;
319
+ document.getElementById('waterSaved').textContent = yearlySavings.toLocaleString();
320
+ document.getElementById('result').classList.remove('hidden');
321
+ });
322
+
323
+ // Update shower time display
324
+ document.getElementById('showerTime').addEventListener('input', function() {
325
+ document.getElementById('showerValue').textContent = this.value + ' min';
326
+ });
327
+
328
+ // Initialize on load
329
+ window.addEventListener('load', function() {
330
+ createDroplets();
331
+ });
332
+
333
+ // Recreate droplets on resize (for responsiveness)
334
+ window.addEventListener('resize', function() {
335
+ const container = document.getElementById('droplets-container');
336
+ container.innerHTML = '';
337
+ createDroplets();
338
+ });
339
+ </script>
340
+ <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>
341
+ </html>