shuun5 commited on
Commit
f0cc141
·
verified ·
1 Parent(s): 6f519be

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +124 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Magic Button
3
- emoji: 🦀
4
- colorFrom: gray
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: magic-button
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: red
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,124 @@
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>Playful Button</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <style>
9
+ .rainbow-text {
10
+ background: linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
11
+ -webkit-background-clip: text;
12
+ background-clip: text;
13
+ color: transparent;
14
+ animation: rainbow 2s linear infinite;
15
+ background-size: 200% 100%;
16
+ }
17
+
18
+ @keyframes rainbow {
19
+ 0% { background-position: 0% 50%; }
20
+ 100% { background-position: 100% 50%; }
21
+ }
22
+
23
+ .confetti {
24
+ position: absolute;
25
+ width: 10px;
26
+ height: 10px;
27
+ background-color: #f00;
28
+ opacity: 0;
29
+ }
30
+
31
+ .message-popup {
32
+ animation: pop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
33
+ }
34
+
35
+ @keyframes pop {
36
+ 0% { transform: scale(0.5); opacity: 0; }
37
+ 100% { transform: scale(1); opacity: 1; }
38
+ }
39
+ </style>
40
+ </head>
41
+ <body class="min-h-screen bg-gradient-to-br from-purple-100 to-pink-100 flex flex-col items-center justify-center p-4">
42
+ <div class="text-center">
43
+ <h1 class="text-3xl font-bold mb-8 rainbow-text">Press the Magic Button!</h1>
44
+
45
+ <button id="magicButton" class="relative overflow-hidden px-8 py-4 rounded-full bg-gradient-to-r from-purple-500 to-pink-500 text-white font-bold text-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 active:scale-95">
46
+ <span class="relative z-10">✨ Click Me ✨</span>
47
+ <span class="absolute inset-0 bg-white opacity-0 hover:opacity-10 transition-opacity duration-300 rounded-full"></span>
48
+ </button>
49
+
50
+ <div id="messageContainer" class="mt-8 hidden">
51
+ <div class="message-popup inline-block bg-white p-6 rounded-xl shadow-2xl border-2 border-pink-300">
52
+ <p class="text-4xl font-extrabold rainbow-text">LOL UR GAY</p>
53
+ <p class="text-sm text-gray-500 mt-2">(no offense intended, just having fun)</p>
54
+ </div>
55
+ </div>
56
+ </div>
57
+
58
+ <script>
59
+ document.getElementById('magicButton').addEventListener('click', function() {
60
+ // Show the message
61
+ const messageContainer = document.getElementById('messageContainer');
62
+ messageContainer.classList.remove('hidden');
63
+
64
+ // Create confetti effect
65
+ for (let i = 0; i < 50; i++) {
66
+ createConfetti();
67
+ }
68
+
69
+ // Play sound (optional)
70
+ playClickSound();
71
+ });
72
+
73
+ function createConfetti() {
74
+ const confetti = document.createElement('div');
75
+ confetti.classList.add('confetti');
76
+
77
+ // Random properties
78
+ const colors = ['#ff0000', '#ff7f00', '#ffff00', '#00ff00', '#0000ff', '#4b0082', '#9400d3'];
79
+ const randomColor = colors[Math.floor(Math.random() * colors.length)];
80
+ const randomLeft = Math.random() * 100;
81
+ const randomAnimationDuration = (Math.random() * 3) + 2;
82
+
83
+ confetti.style.backgroundColor = randomColor;
84
+ confetti.style.left = `${randomLeft}%`;
85
+ confetti.style.top = '50%';
86
+ confetti.style.borderRadius = '50%';
87
+ confetti.style.opacity = '1';
88
+
89
+ // Add to body
90
+ document.body.appendChild(confetti);
91
+
92
+ // Animate
93
+ const animation = confetti.animate([
94
+ { transform: 'translateY(0) rotate(0deg)', opacity: 1 },
95
+ { transform: `translateY(${window.innerHeight}px) rotate(${Math.random() * 360}deg)`, opacity: 0 }
96
+ ], {
97
+ duration: randomAnimationDuration * 1000,
98
+ easing: 'cubic-bezier(0.1, 0.8, 0.3, 1)'
99
+ });
100
+
101
+ // Remove after animation
102
+ animation.onfinish = () => confetti.remove();
103
+ }
104
+
105
+ function playClickSound() {
106
+ // Create a simple click sound
107
+ const audioContext = new (window.AudioContext || window.webkitAudioContext)();
108
+ const oscillator = audioContext.createOscillator();
109
+ const gainNode = audioContext.createGain();
110
+
111
+ oscillator.type = 'triangle';
112
+ oscillator.frequency.value = 880;
113
+ gainNode.gain.value = 0.1;
114
+
115
+ oscillator.connect(gainNode);
116
+ gainNode.connect(audioContext.destination);
117
+
118
+ oscillator.start();
119
+ gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + 0.3);
120
+ oscillator.stop(audioContext.currentTime + 0.3);
121
+ }
122
+ </script>
123
+ <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=shuun5/magic-button" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
124
+ </html>
prompts.txt ADDED
File without changes