Hugging Face's logo

Spaces:
Capybara51
/
magic-element-capybara-talent-show
Running

App Files Community
Capybara51 commited on
Commit
db4ffe6
·
verified ·
1 Parent(s): f7ba15e

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +414 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Magic Element Capybara Talent Show
3
- emoji: 📚
4
- colorFrom: blue
5
- colorTo: purple
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: magic-element-capybara-talent-show
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: yellow
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,414 @@
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>Magic Element Capybara Talent Show</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
+ @keyframes float {
11
+ 0%, 100% { transform: translateY(0); }
12
+ 50% { transform: translateY(-20px); }
13
+ }
14
+ @keyframes pulse {
15
+ 0%, 100% { transform: scale(1); }
16
+ 50% { transform: scale(1.05); }
17
+ }
18
+ @keyframes sparkle {
19
+ 0% { opacity: 0; transform: scale(0); }
20
+ 50% { opacity: 1; transform: scale(1.5); }
21
+ 100% { opacity: 0; transform: scale(0); }
22
+ }
23
+ .floating {
24
+ animation: float 4s ease-in-out infinite;
25
+ }
26
+ .pulse {
27
+ animation: pulse 2s ease-in-out infinite;
28
+ }
29
+ .sparkle {
30
+ position: absolute;
31
+ background: radial-gradient(circle, white 0%, transparent 70%);
32
+ border-radius: 50%;
33
+ pointer-events: none;
34
+ animation: sparkle 1s ease-out forwards;
35
+ }
36
+ .stage-light {
37
+ background: conic-gradient(
38
+ from 0deg at 50% 100%,
39
+ rgba(255,0,0,0.2) 0deg,
40
+ rgba(255,165,0,0.2) 90deg,
41
+ rgba(255,255,0,0.2) 180deg,
42
+ rgba(0,255,0,0.2) 270deg,
43
+ rgba(255,0,0,0.2) 360deg
44
+ );
45
+ }
46
+ .element-fire { background: linear-gradient(45deg, #ff5e00, #ff0000); }
47
+ .element-water { background: linear-gradient(45deg, #00a8ff, #0057ff); }
48
+ .element-earth { background: linear-gradient(45deg, #8b4513, #5d4037); }
49
+ .element-air { background: linear-gradient(45deg, #e0f7fa, #80deea); }
50
+ .element-spark { background: linear-gradient(45deg, #ffeb3b, #ffc107); }
51
+
52
+ .talent-card {
53
+ transition: all 0.3s ease;
54
+ transform-style: preserve-3d;
55
+ }
56
+ .talent-card:hover {
57
+ transform: translateY(-10px) rotateY(10deg);
58
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
59
+ }
60
+
61
+ .confetti {
62
+ position: absolute;
63
+ width: 10px;
64
+ height: 10px;
65
+ background-color: #f00;
66
+ opacity: 0;
67
+ }
68
+ </style>
69
+ </head>
70
+ <body class="bg-gradient-to-b from-purple-900 to-indigo-900 min-h-screen text-white">
71
+ <div class="stage-light absolute top-0 left-0 w-full h-full opacity-20 pointer-events-none"></div>
72
+
73
+ <header class="container mx-auto px-4 py-8 text-center">
74
+ <h1 class="text-5xl md:text-7xl font-bold mb-4 text-transparent bg-clip-text bg-gradient-to-r from-yellow-400 via-pink-500 to-purple-500">
75
+ <i class="fas fa-hat-wizard mr-4"></i>
76
+ Magic Element Capybara Talent Show
77
+ <i class="fas fa-magic ml-4"></i>
78
+ </h1>
79
+ <p class="text-xl md:text-2xl text-yellow-200 mb-8">Watch the most talented capybaras perform incredible elemental magic!</p>
80
+
81
+ <div class="flex justify-center space-x-4 mb-8">
82
+ <button id="startShow" class="px-8 py-3 bg-gradient-to-r from-green-400 to-blue-500 rounded-full font-bold text-lg hover:from-pink-500 hover:to-yellow-500 transition-all duration-300 transform hover:scale-105 shadow-lg">
83
+ <i class="fas fa-play mr-2"></i> Start the Show!
84
+ </button>
85
+ <button id="randomTalent" class="px-8 py-3 bg-gradient-to-r from-purple-400 to-pink-500 rounded-full font-bold text-lg hover:from-blue-500 hover:to-teal-500 transition-all duration-300 transform hover:scale-105 shadow-lg">
86
+ <i class="fas fa-random mr-2"></i> Random Talent
87
+ </button>
88
+ </div>
89
+ </header>
90
+
91
+ <main class="container mx-auto px-4 py-8">
92
+ <div id="stage" class="relative bg-gray-800 rounded-xl p-8 mb-12 border-4 border-yellow-400 shadow-2xl overflow-hidden" style="min-height: 400px;">
93
+ <div id="capybara" class="hidden relative w-48 h-48 mx-auto transition-all duration-500">
94
+ <img src="https://i.imgur.com/4Qz4fAN.png" alt="Capybara" class="w-full h-full object-contain floating">
95
+ <div id="elementEffect" class="absolute inset-0 opacity-0 transition-opacity duration-300"></div>
96
+ </div>
97
+ <div id="performanceText" class="text-center text-2xl font-bold mt-8 h-16"></div>
98
+
99
+ <div class="absolute top-4 left-4 text-yellow-300">
100
+ <i class="fas fa-star"></i>
101
+ <span id="score">0</span>
102
+ </div>
103
+
104
+ <div id="judges" class="absolute bottom-4 left-0 right-0 flex justify-center space-x-8">
105
+ <div class="judge text-center">
106
+ <div class="w-16 h-16 bg-gray-700 rounded-full mx-auto mb-2 overflow-hidden">
107
+ <img src="https://i.imgur.com/JDXdQ4W.png" alt="Owl Judge" class="w-full h-full object-cover">
108
+ </div>
109
+ <div class="text-sm">Judge Owl</div>
110
+ <div class="text-yellow-400"><i class="fas fa-star"></i> <span class="judge-score">0</span></div>
111
+ </div>
112
+ <div class="judge text-center">
113
+ <div class="w-16 h-16 bg-gray-700 rounded-full mx-auto mb-2 overflow-hidden">
114
+ <img src="https://i.imgur.com/7G7Wt3p.png" alt="Frog Judge" class="w-full h-full object-cover">
115
+ </div>
116
+ <div class="text-sm">Judge Frog</div>
117
+ <div class="text-yellow-400"><i class="fas fa-star"></i> <span class="judge-score">0</span></div>
118
+ </div>
119
+ <div class="judge text-center">
120
+ <div class="w-16 h-16 bg-gray-700 rounded-full mx-auto mb-2 overflow-hidden">
121
+ <img src="https://i.imgur.com/5Z3Wf9j.png" alt="Toucan Judge" class="w-full h-full object-cover">
122
+ </div>
123
+ <div class="text-sm">Judge Toucan</div>
124
+ <div class="text-yellow-400"><i class="fas fa-star"></i> <span class="judge-score">0</span></div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+
129
+ <h2 class="text-3xl font-bold mb-8 text-center text-yellow-300">Choose Your Capybara's Talent</h2>
130
+
131
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-6 mb-12">
132
+ <div class="talent-card element-fire rounded-xl p-6 text-center cursor-pointer transform transition-all hover:shadow-lg" data-element="fire">
133
+ <div class="w-24 h-24 mx-auto mb-4 bg-white rounded-full flex items-center justify-center text-4xl">
134
+ <i class="fas fa-fire text-red-500"></i>
135
+ </div>
136
+ <h3 class="text-xl font-bold mb-2">Fire Dance</h3>
137
+ <p class="text-sm opacity-80">A blazing performance with flames and sparks</p>
138
+ </div>
139
+
140
+ <div class="talent-card element-water rounded-xl p-6 text-center cursor-pointer" data-element="water">
141
+ <div class="w-24 h-24 mx-auto mb-4 bg-white rounded-full flex items-center justify-center text-4xl">
142
+ <i class="fas fa-tint text-blue-500"></i>
143
+ </div>
144
+ <h3 class="text-xl font-bold mb-2">Water Symphony</h3>
145
+ <p class="text-sm opacity-80">Graceful water manipulation and bubbles</p>
146
+ </div>
147
+
148
+ <div class="talent-card element-earth rounded-xl p-6 text-center cursor-pointer" data-element="earth">
149
+ <div class="w-24 h-24 mx-auto mb-4 bg-white rounded-full flex items-center justify-center text-4xl">
150
+ <i class="fas fa-mountain text-brown-500"></i>
151
+ </div>
152
+ <h3 class="text-xl font-bold mb-2">Earth Shake</h3>
153
+ <p class="text-sm opacity-80">Rock-solid moves that shake the ground</p>
154
+ </div>
155
+
156
+ <div class="talent-card element-air rounded-xl p-6 text-center cursor-pointer" data-element="air">
157
+ <div class="w-24 h-24 mx-auto mb-4 bg-white rounded-full flex items-center justify-center text-4xl">
158
+ <i class="fas fa-wind text-teal-300"></i>
159
+ </div>
160
+ <h3 class="text-xl font-bold mb-2">Air Acrobatics</h3>
161
+ <p class="text-sm opacity-80">Soaring through the air with wind gusts</p>
162
+ </div>
163
+
164
+ <div class="talent-card element-spark rounded-xl p-6 text-center cursor-pointer" data-element="spark">
165
+ <div class="w-24 h-24 mx-auto mb-4 bg-white rounded-full flex items-center justify-center text-4xl">
166
+ <i class="fas fa-bolt text-yellow-400"></i>
167
+ </div>
168
+ <h3 class="text-xl font-bold mb-2">Lightning Show</h3>
169
+ <p class="text-sm opacity-80">Electrifying performance with lightning bolts</p>
170
+ </div>
171
+ </div>
172
+
173
+ <div id="leaderboard" class="bg-gray-800 bg-opacity-50 rounded-xl p-6 mb-12">
174
+ <h2 class="text-2xl font-bold mb-6 text-center text-yellow-300">Top Performances</h2>
175
+ <div class="space-y-3">
176
+ <div class="flex items-center justify-between bg-gray-700 bg-opacity-50 p-3 rounded-lg">
177
+ <div class="flex items-center">
178
+ <span class="text-yellow-400 font-bold mr-4">1.</span>
179
+ <img src="https://i.imgur.com/4Qz4fAN.png" alt="Capybara" class="w-10 h-10 rounded-full mr-3">
180
+ <span>Firestorm Capybara</span>
181
+ </div>
182
+ <span class="text-yellow-400 font-bold">245 <i class="fas fa-star ml-1"></i></span>
183
+ </div>
184
+ <div class="flex items-center justify-between bg-gray-700 bg-opacity-50 p-3 rounded-lg">
185
+ <div class="flex items-center">
186
+ <span class="text-yellow-400 font-bold mr-4">2.</span>
187
+ <img src="https://i.imgur.com/4Qz4fAN.png" alt="Capybara" class="w-10 h-10 rounded-full mr-3">
188
+ <span>Tsunami Capybara</span>
189
+ </div>
190
+ <span class="text-yellow-400 font-bold">231 <i class="fas fa-star ml-1"></i></span>
191
+ </div>
192
+ <div class="flex items-center justify-between bg-gray-700 bg-opacity-50 p-3 rounded-lg">
193
+ <div class="flex items-center">
194
+ <span class="text-yellow-400 font-bold mr-4">3.</span>
195
+ <img src="https://i.imgur.com/4Qz4fAN.png" alt="Capybara" class="w-10 h-10 rounded-full mr-3">
196
+ <span>Thunder Capybara</span>
197
+ </div>
198
+ <span class="text-yellow-400 font-bold">218 <i class="fas fa-star ml-1"></i></span>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </main>
203
+
204
+ <footer class="bg-black bg-opacity-30 py-6 text-center text-sm text-gray-400">
205
+ <p>© 2023 Magic Element Capybara Talent Show. All rights reserved.</p>
206
+ <p class="mt-2">Created with <i class="fas fa-heart text-red-500"></i> for capybara enthusiasts</p>
207
+ </footer>
208
+
209
+ <script>
210
+ document.addEventListener('DOMContentLoaded', function() {
211
+ const capybara = document.getElementById('capybara');
212
+ const elementEffect = document.getElementById('elementEffect');
213
+ const performanceText = document.getElementById('performanceText');
214
+ const talentCards = document.querySelectorAll('.talent-card');
215
+ const startShowBtn = document.getElementById('startShow');
216
+ const randomTalentBtn = document.getElementById('randomTalent');
217
+ const judges = document.querySelectorAll('.judge');
218
+ const scoreElement = document.getElementById('score');
219
+ const stage = document.getElementById('stage');
220
+
221
+ let currentElement = null;
222
+ let score = 0;
223
+
224
+ // Talent card click handlers
225
+ talentCards.forEach(card => {
226
+ card.addEventListener('click', function() {
227
+ currentElement = this.dataset.element;
228
+
229
+ // Reset all cards
230
+ talentCards.forEach(c => {
231
+ c.classList.remove('ring-4', 'ring-yellow-400');
232
+ c.style.transform = '';
233
+ });
234
+
235
+ // Highlight selected card
236
+ this.classList.add('ring-4', 'ring-yellow-400');
237
+ this.style.transform = 'translateY(-10px) rotateY(10deg) scale(1.05)';
238
+
239
+ // Show capybara preview
240
+ capybara.classList.remove('hidden');
241
+ elementEffect.className = 'absolute inset-0 opacity-0 transition-opacity duration-300';
242
+ elementEffect.classList.add(`element-${currentElement}`);
243
+
244
+ // Preview element effect
245
+ setTimeout(() => {
246
+ elementEffect.style.opacity = '0.5';
247
+ }, 100);
248
+ });
249
+ });
250
+
251
+ // Start show button
252
+ startShowBtn.addEventListener('click', function() {
253
+ if (!currentElement) {
254
+ performanceText.textContent = "Please select a talent first!";
255
+ return;
256
+ }
257
+
258
+ // Disable buttons during performance
259
+ startShowBtn.disabled = true;
260
+ randomTalentBtn.disabled = true;
261
+ talentCards.forEach(card => card.style.pointerEvents = 'none');
262
+
263
+ // Hide element preview
264
+ elementEffect.style.opacity = '0';
265
+
266
+ // Performance sequence
267
+ performanceText.textContent = "The show is starting...";
268
+
269
+ setTimeout(() => {
270
+ capybara.classList.add('pulse');
271
+ performanceText.textContent = "Capybara is preparing...";
272
+
273
+ setTimeout(() => {
274
+ performanceText.textContent = getPerformanceText(currentElement);
275
+ elementEffect.style.opacity = '0.7';
276
+
277
+ // Judges scoring
278
+ let totalScore = 0;
279
+ judges.forEach(judge => {
280
+ const score = Math.floor(Math.random() * 30) + 70;
281
+ const scoreElement = judge.querySelector('.judge-score');
282
+
283
+ // Animate score counting
284
+ let current = 0;
285
+ const interval = setInterval(() => {
286
+ current += Math.ceil(score / 10);
287
+ if (current >= score) {
288
+ current = score;
289
+ clearInterval(interval);
290
+ }
291
+ scoreElement.textContent = current;
292
+ }, 50);
293
+
294
+ totalScore += score;
295
+ });
296
+
297
+ // Calculate average score
298
+ setTimeout(() => {
299
+ const averageScore = Math.round(totalScore / judges.length);
300
+ score += averageScore;
301
+
302
+ // Animate total score
303
+ let currentTotal = parseInt(scoreElement.textContent);
304
+ const totalInterval = setInterval(() => {
305
+ currentTotal += Math.ceil((score - currentTotal) / 5);
306
+ if (currentTotal >= score) {
307
+ currentTotal = score;
308
+ clearInterval(totalInterval);
309
+
310
+ // Re-enable buttons
311
+ startShowBtn.disabled = false;
312
+ randomTalentBtn.disabled = false;
313
+ talentCards.forEach(card => card.style.pointerEvents = 'auto');
314
+ capybara.classList.remove('pulse');
315
+ }
316
+ scoreElement.textContent = currentTotal;
317
+ }, 50);
318
+
319
+ // Create confetti
320
+ createConfetti();
321
+
322
+ }, 1500);
323
+
324
+ }, 1500);
325
+ }, 1500);
326
+ });
327
+
328
+ // Random talent button
329
+ randomTalentBtn.addEventListener('click', function() {
330
+ const randomIndex = Math.floor(Math.random() * talentCards.length);
331
+ talentCards[randomIndex].click();
332
+ });
333
+
334
+ // Create sparkle effect on stage click
335
+ stage.addEventListener('click', function(e) {
336
+ if (e.target === stage) {
337
+ createSparkle(e.clientX, e.clientY);
338
+ }
339
+ });
340
+
341
+ // Helper functions
342
+ function getPerformanceText(element) {
343
+ const performances = {
344
+ fire: ["Blazing fire whirls!", "Sizzling hot moves!", "Inferno dance extravaganza!"],
345
+ water: ["Majestic water ballet!", "Splash-tastic performance!", "Liquid harmony in motion!"],
346
+ earth: ["Ground-shaking stomps!", "Rock solid rhythm!", "Tectonic talent display!"],
347
+ air: ["Aerial acrobatics!", "Whirlwind wonder!", "Sky-high spectacular!"],
348
+ spark: ["Electrifying moves!", "Shocking performance!", "Lightning-fast footwork!"]
349
+ };
350
+
351
+ const randomIndex = Math.floor(Math.random() * performances[element].length);
352
+ return performances[element][randomIndex];
353
+ }
354
+
355
+ function createSparkle(x, y) {
356
+ const sparkle = document.createElement('div');
357
+ sparkle.className = 'sparkle';
358
+ sparkle.style.left = `${x - 15}px`;
359
+ sparkle.style.top = `${y - 15}px`;
360
+ sparkle.style.width = '30px';
361
+ sparkle.style.height = '30px';
362
+
363
+ document.body.appendChild(sparkle);
364
+
365
+ // Remove after animation
366
+ setTimeout(() => {
367
+ sparkle.remove();
368
+ }, 1000);
369
+ }
370
+
371
+ function createConfetti() {
372
+ const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
373
+
374
+ for (let i = 0; i < 50; i++) {
375
+ const confetti = document.createElement('div');
376
+ confetti.className = 'confetti';
377
+ confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
378
+ confetti.style.left = `${Math.random() * 100}%`;
379
+ confetti.style.top = `-10px`;
380
+ confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
381
+
382
+ // Random shape
383
+ if (Math.random() > 0.5) {
384
+ confetti.style.borderRadius = '50%';
385
+ } else {
386
+ confetti.style.borderRadius = '0';
387
+ }
388
+
389
+ document.body.appendChild(confetti);
390
+
391
+ // Animate
392
+ const animation = confetti.animate([
393
+ {
394
+ opacity: 1,
395
+ top: '-10px',
396
+ transform: `rotate(${Math.random() * 360}deg) translateX(0)`
397
+ },
398
+ {
399
+ opacity: 1,
400
+ top: `${Math.random() * 100 + 100}%`,
401
+ transform: `rotate(${Math.random() * 360}deg) translateX(${Math.random() * 200 - 100}px)`
402
+ }
403
+ ], {
404
+ duration: Math.random() * 3000 + 2000,
405
+ easing: 'cubic-bezier(0.1, 0.8, 0.3, 1)'
406
+ });
407
+
408
+ animation.onfinish = () => confetti.remove();
409
+ }
410
+ }
411
+ });
412
+ </script>
413
+ <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=Capybara51/magic-element-capybara-talent-show" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
414
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Make a magic element capybara talent show game-site