Hugging Face's logo

Spaces:
victor
/
rroro
Running

App Files Community
victor HF Staff commited on
Commit
acacfe2
·
verified ·
1 Parent(s): 8d6fb2d

Add index.html

Browse files
Files changed (1) hide show
  1. index.html +351 -18
index.html CHANGED
@@ -1,19 +1,352 @@
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>The Ultimate Poo Button Experience</title>
7
+ <style>
8
+ @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&display=swap');
9
+
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+
16
+ body {
17
+ background-color: #f5f5dc;
18
+ display: flex;
19
+ flex-direction: column;
20
+ align-items: center;
21
+ justify-content: center;
22
+ min-height: 100vh;
23
+ font-family: 'Comic Neue', cursive;
24
+ overflow-x: hidden;
25
+ position: relative;
26
+ }
27
+
28
+ h1 {
29
+ color: #8B4513;
30
+ margin-bottom: 30px;
31
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
32
+ font-size: 2.5rem;
33
+ text-align: center;
34
+ }
35
+
36
+ .poo-container {
37
+ display: flex;
38
+ flex-direction: column;
39
+ align-items: center;
40
+ }
41
+
42
+ .poo-button {
43
+ width: 150px;
44
+ height: 150px;
45
+ background-color: #d4a017;
46
+ border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
47
+ display: flex;
48
+ justify-content: center;
49
+ align-items: center;
50
+ font-size: 80px;
51
+ cursor: pointer;
52
+ user-select: none;
53
+ position: relative;
54
+ box-shadow: 0 10px 20px rgba(0,0,0,0.2),
55
+ inset 0 -10px 20px rgba(0,0,0,0.1),
56
+ inset 0 5px 10px rgba(255,255,255,0.3);
57
+ transition: transform 0.1s;
58
+ margin-bottom: 30px;
59
+ filter: drop-shadow(0 0 5px rgba(139, 69, 19, 0.4));
60
+ overflow: hidden;
61
+ }
62
+
63
+ .poo-button:hover {
64
+ transform: scale(1.05);
65
+ }
66
+
67
+ .poo-button:active {
68
+ transform: scale(0.95) rotate(5deg);
69
+ }
70
+
71
+ .poo-button::after {
72
+ content: '';
73
+ position: absolute;
74
+ width: 120px;
75
+ height: 60px;
76
+ background-color: #8B4513;
77
+ border-radius: 50%;
78
+ top: 30px;
79
+ filter: blur(10px);
80
+ opacity: 0.3;
81
+ }
82
+
83
+ .counter {
84
+ font-size: 1.5rem;
85
+ color: #8B4513;
86
+ margin-top: 20px;
87
+ background-color: rgba(255,255,255,0.7);
88
+ padding: 10px 20px;
89
+ border-radius: 20px;
90
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
91
+ }
92
+
93
+ .floating-poo {
94
+ position: absolute;
95
+ font-size: 30px;
96
+ pointer-events: none;
97
+ opacity: 0;
98
+ animation: float-up 1.5s forwards;
99
+ filter: drop-shadow(0 0 2px rgba(0,0,0,0.3));
100
+ }
101
+
102
+ @keyframes float-up {
103
+ 0% {
104
+ transform: translateY(0);
105
+ opacity: 1;
106
+ }
107
+ 100% {
108
+ transform: translateY(-150px) rotate(360deg);
109
+ opacity: 0;
110
+ }
111
+ }
112
+
113
+ .controls {
114
+ margin-top: 30px;
115
+ display: flex;
116
+ gap: 15px;
117
+ }
118
+
119
+ .volume-control {
120
+ display: flex;
121
+ align-items: center;
122
+ background-color: rgba(255,255,255,0.7);
123
+ padding: 10px 15px;
124
+ border-radius: 30px;
125
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
126
+ }
127
+
128
+ .volume-control label {
129
+ margin-right: 10px;
130
+ color: #8B4513;
131
+ }
132
+
133
+ input[type="range"] {
134
+ accent-color: #d4a017;
135
+ }
136
+
137
+ .instructions {
138
+ margin-top: 20px;
139
+ background-color: rgba(255,255,255,0.7);
140
+ padding: 15px;
141
+ border-radius: 10px;
142
+ max-width: 500px;
143
+ text-align: center;
144
+ color: #8B4513;
145
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
146
+ line-height: 1.5;
147
+ }
148
+
149
+ .streak {
150
+ font-size: 1.2rem;
151
+ margin-top: 15px;
152
+ color: #d4a017;
153
+ text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
154
+ }
155
+
156
+ @media (max-width: 600px) {
157
+ .poo-button {
158
+ width: 120px;
159
+ height: 120px;
160
+ font-size: 60px;
161
+ }
162
+
163
+ h1 {
164
+ font-size: 1.8rem;
165
+ }
166
+ }
167
+ </style>
168
+ </head>
169
+ <body>
170
+ <h1>The Ultimate Poo Button Experience 💩</h1>
171
+
172
+ <div class="poo-container">
173
+ <div class="poo-button" id="pooButton">💩</div>
174
+ <div class="counter" id="counter">Poo Count: 0</div>
175
+ <div class="streak" id="streak">Current streak: 0 clicks per second</div>
176
+ </div>
177
+
178
+ <div class="controls">
179
+ <div class="volume-control">
180
+ <label for="volume">Volume:</label>
181
+ <input type="range" id="volume" name="volume" min="0" max="1" step="0.1" value="0.5">
182
+ </div>
183
+ </div>
184
+
185
+ <div class="instructions">
186
+ <p>Click the poo button as many times as you can! Try to beat your high score.<br>
187
+ The more you click, the more floating poos you'll create!</p>
188
+ </div>
189
+
190
+ <script>
191
+ const pooButton = document.getElementById('pooButton');
192
+ const counterElement = document.getElementById('counter');
193
+ const volumeControl = document.getElementById('volume');
194
+ const streakElement = document.getElementById('streak');
195
+
196
+ let counter = 0;
197
+ let lastClickTime = 0;
198
+ let streakCount = 0;
199
+
200
+ // Preload fart sounds
201
+ const fartSounds = [
202
+ new Audio('https://assets.mixkit.co/active_storage/sfx/153/153-preview.mp3'),
203
+ new Audio('https://assets.mixkit.co/active_storage/sfx/154/154-preview.mp3'),
204
+ new Audio('https://assets.mixkit.co/active_storage/sfx/155/155-preview.mp3')
205
+ ];
206
+
207
+ // Set volume for all sounds
208
+ fartSounds.forEach(sound => {
209
+ sound.volume = volumeControl.value;
210
+ });
211
+
212
+ // Update volume when slider changes
213
+ volumeControl.addEventListener('input', () => {
214
+ const volume = volumeControl.value;
215
+ fartSounds.forEach(sound => {
216
+ sound.volume = volume;
217
+ });
218
+ });
219
+
220
+ pooButton.addEventListener('click', () => {
221
+ // Increment counter
222
+ counter++;
223
+ counterElement.textContent = `Poo Count: ${counter}`;
224
+
225
+ // Play random fart sound
226
+ const randomSound = Math.floor(Math.random() * fartSounds.length);
227
+ fartSounds[randomSound].currentTime = 0;
228
+ fartSounds[randomSound].play();
229
+
230
+ // Create floating poo
231
+ createFloatingPoo();
232
+
233
+ // Streak calculation
234
+ const currentTime = Date.now();
235
+ const timeDiff = currentTime - lastClickTime;
236
+
237
+ if (timeDiff < 500) { // If clicked within 0.5 seconds
238
+ streakCount++;
239
+ } else {
240
+ streakCount = 1; // Reset streak
241
+ }
242
+
243
+ streakElement.textContent = `Current streak: ${streakCount} clicks per second`;
244
+
245
+ // Update last click time
246
+ lastClickTime = currentTime;
247
+
248
+ // Special effects every 10 clicks
249
+ if (counter % 10 === 0) {
250
+ pooButton.style.animation = 'none';
251
+ void pooButton.offsetWidth; // Trigger reflow
252
+ pooButton.style.animation = 'jiggle 0.5s';
253
+
254
+ // Create multiple poos
255
+ setTimeout(() => {
256
+ for (let i = 0; i < 5; i++) {
257
+ createFloatingPoo();
258
+ }
259
+ }, 200);
260
+ }
261
+ });
262
+
263
+ function createFloatingPoo() {
264
+ const poo = document.createElement('div');
265
+ poo.className = 'floating-poo';
266
+ poo.textContent = '💩';
267
+
268
+ // Random position around the button
269
+ const left = Math.random() * 100 - 50 + pooButton.offsetLeft + pooButton.offsetWidth / 2;
270
+ poo.style.left = `${left}px`;
271
+ poo.style.top = `${pooButton.offsetTop + pooButton.offsetHeight / 2}px`;
272
+
273
+ // Random animation duration and delay
274
+ poo.style.animationDuration = `${0.5 + Math.random() * 1.5}s`;
275
+ poo.style.animationDelay = `${Math.random() * 0.3}s`;
276
+
277
+ document.body.appendChild(poo);
278
+
279
+ // Remove after animation
280
+ setTimeout(() => {
281
+ poo.remove();
282
+ }, 1500);
283
+ }
284
+
285
+ // Easter egg - long press
286
+ let pressTimer;
287
+
288
+ pooButton.addEventListener('mousedown', () => {
289
+ pressTimer = setTimeout(() => {
290
+ // Big surprise effect
291
+ for (let i = 0; i < 20; i++) {
292
+ setTimeout(() => {
293
+ createFloatingPoo();
294
+ }, i * 50);
295
+ }
296
+
297
+ // Play all fart sounds at once
298
+ fartSounds.forEach(sound => {
299
+ sound.currentTime = 0;
300
+ sound.play();
301
+ });
302
+
303
+ // Counter bonus
304
+ counter += 5;
305
+ counterElement.textContent = `Poo Count: ${counter}`;
306
+
307
+ // Visual feedback
308
+ pooButton.style.transform = 'scale(1.2) rotate(20deg)';
309
+ }, 1000);
310
+ });
311
+
312
+ pooButton.addEventListener('mouseup', () => {
313
+ clearTimeout(pressTimer);
314
+ });
315
+
316
+ pooButton.addEventListener('mouseleave', () => {
317
+ clearTimeout(pressTimer);
318
+ });
319
+
320
+ // Mobile touch support
321
+ pooButton.addEventListener('touchstart', (e) => {
322
+ e.preventDefault();
323
+ pressTimer = setTimeout(() => {
324
+ // Big surprise effect
325
+ for (let i = 0; i < 20; i++) {
326
+ setTimeout(() => {
327
+ createFloatingPoo();
328
+ }, i * 50);
329
+ }
330
+
331
+ // Play all fart sounds at once
332
+ fartSounds.forEach(sound => {
333
+ sound.currentTime = 0;
334
+ sound.play();
335
+ });
336
+
337
+ // Counter bonus
338
+ counter += 5;
339
+ counterElement.textContent = `Poo Count: ${counter}`;
340
+
341
+ // Visual feedback
342
+ pooButton.style.transform = 'scale(1.2) rotate(20deg)';
343
+ }, 1000);
344
+ });
345
+
346
+ pooButton.addEventListener('touchend', (e) => {
347
+ e.preventDefault();
348
+ clearTimeout(pressTimer);
349
+ });
350
+ </script>
351
+ <p style="text-align: center; font-size: 12px; color: #888; margin-top: 16px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" target="_blank">DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
352
  </html>