Hugging Face's logo

Spaces:
AlgoDistill
/
coming-out-announcement
Running

App Files Community
AlgoDistill commited on
Commit
5e9b3fd
·
verified ·
1 Parent(s): 9ebcc64

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +758 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Coming Out Announcement
3
- emoji: 🌖
4
- colorFrom: gray
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: coming-out-announcement
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: pink
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,758 @@
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>🌈 FABULOUSLY GAY Coming Out Card Creator 🌈</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 rainbow {
11
+ 0% { background-position: 0% 50%; }
12
+ 50% { background-position: 100% 50%; }
13
+ 100% { background-position: 0% 50%; }
14
+ }
15
+
16
+ @keyframes glitter {
17
+ 0% { opacity: 0.5; transform: scale(0.5); }
18
+ 50% { opacity: 1; transform: scale(1.5); }
19
+ 100% { opacity: 0.5; transform: scale(0.5); }
20
+ }
21
+
22
+ @keyframes disco {
23
+ 0% { box-shadow: 0 0 20px 10px #ff0000; }
24
+ 14% { box-shadow: 0 0 20px 10px #ff8000; }
25
+ 28% { box-shadow: 0 0 20px 10px #ffff00; }
26
+ 42% { box-shadow: 0 0 20px 10px #00ff00; }
27
+ 56% { box-shadow: 0 0 20px 10px #0000ff; }
28
+ 70% { box-shadow: 0 0 20px 10px #4b0082; }
29
+ 84% { box-shadow: 0 0 20px 10px #ee82ee; }
30
+ 100% { box-shadow: 0 0 20px 10px #ff0000; }
31
+ }
32
+
33
+ @keyframes fabulousFloat {
34
+ 0% { transform: translateY(0px) rotate(0deg); }
35
+ 50% { transform: translateY(-20px) rotate(5deg); }
36
+ 100% { transform: translateY(0px) rotate(0deg); }
37
+ }
38
+
39
+ @keyframes rainbowBorder {
40
+ 0% { border-color: #ff0000; }
41
+ 14% { border-color: #ff8000; }
42
+ 28% { border-color: #ffff00; }
43
+ 42% { border-color: #00ff00; }
44
+ 56% { border-color: #0000ff; }
45
+ 70% { border-color: #4b0082; }
46
+ 84% { border-color: #ee82ee; }
47
+ 100% { border-color: #ff0000; }
48
+ }
49
+
50
+ .rainbow-bg {
51
+ background: linear-gradient(45deg,
52
+ #ff0000, #ff8000, #ffff00, #80ff00,
53
+ #00ff80, #00ffff, #0080ff, #8000ff,
54
+ #ff00ff, #ff0080, #ff0000);
55
+ background-size: 1000% 1000%;
56
+ animation: rainbow 3s linear infinite;
57
+ }
58
+
59
+ .rainbow-border {
60
+ animation: rainbowBorder 3s linear infinite;
61
+ }
62
+
63
+ .glitter {
64
+ position: absolute;
65
+ width: 15px;
66
+ height: 15px;
67
+ border-radius: 50%;
68
+ animation: glitter 1.5s infinite;
69
+ pointer-events: none;
70
+ filter: drop-shadow(0 0 5px currentColor);
71
+ }
72
+
73
+ .disco {
74
+ animation: disco 1.5s infinite;
75
+ }
76
+
77
+ .card-container {
78
+ perspective: 1000px;
79
+ }
80
+
81
+ .coming-out-card {
82
+ transform-style: preserve-3d;
83
+ transition: all 0.5s ease;
84
+ animation: fabulousFloat 4s ease-in-out infinite;
85
+ }
86
+
87
+ .coming-out-card:hover {
88
+ transform: rotateY(15deg) rotateX(5deg) scale(1.1);
89
+ }
90
+
91
+ .drag-queen {
92
+ position: absolute;
93
+ top: -20px;
94
+ right: -20px;
95
+ width: 60px;
96
+ height: 60px;
97
+ background: #ff00ff;
98
+ border-radius: 50%;
99
+ display: flex;
100
+ align-items: center;
101
+ justify-content: center;
102
+ color: white;
103
+ font-size: 30px;
104
+ box-shadow: 0 0 20px rgba(255, 0, 255, 0.9);
105
+ z-index: 10;
106
+ animation: fabulousFloat 3s ease-in-out infinite;
107
+ }
108
+
109
+ .fingerprint {
110
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M20,20 Q30,15 40,20 T60,20 T80,20' stroke='currentColor' fill='none' stroke-width='2'/%3E%3Cpath d='M20,40 Q30,35 40,40 T60,40 T80,40' stroke='currentColor' fill='none' stroke-width='2'/%3E%3Cpath d='M20,60 Q30,55 40,60 T60,60 T80,60' stroke='currentColor' fill='none' stroke-width='2'/%3E%3Cpath d='M20,80 Q30,75 40,80 T60,80 T80,80' stroke='currentColor' fill='none' stroke-width='2'/%3E%3C/svg%3E");
111
+ background-size: 100% 100%;
112
+ opacity: 0.1;
113
+ }
114
+
115
+ .text-outline {
116
+ text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
117
+ }
118
+
119
+ .text-outline-dark {
120
+ text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000;
121
+ }
122
+
123
+ .fabulous-shadow {
124
+ filter: drop-shadow(0 0 10px rgba(255, 0, 255, 0.7));
125
+ }
126
+
127
+ .drag-queen-crown {
128
+ position: absolute;
129
+ top: -40px;
130
+ left: 50%;
131
+ transform: translateX(-50%);
132
+ font-size: 50px;
133
+ text-shadow: 0 0 15px gold;
134
+ z-index: 20;
135
+ }
136
+
137
+ .pride-parade {
138
+ position: absolute;
139
+ bottom: 0;
140
+ left: 0;
141
+ width: 100%;
142
+ height: 20px;
143
+ background: linear-gradient(90deg,
144
+ #e40303, #ff8c00, #ffed00, #008026,
145
+ #004dff, #750787);
146
+ animation: rainbow 5s linear infinite;
147
+ }
148
+
149
+ .unicorn-horn {
150
+ position: absolute;
151
+ top: -30px;
152
+ left: 50%;
153
+ transform: translateX(-50%) rotate(45deg);
154
+ width: 0;
155
+ height: 0;
156
+ border-left: 20px solid transparent;
157
+ border-right: 20px solid transparent;
158
+ border-bottom: 40px solid gold;
159
+ filter: drop-shadow(0 0 10px gold);
160
+ z-index: 15;
161
+ }
162
+
163
+ .feather-boa {
164
+ position: absolute;
165
+ top: 0;
166
+ left: 0;
167
+ width: 100%;
168
+ height: 20px;
169
+ background: repeating-linear-gradient(45deg,
170
+ #ff00ff, #ff00ff 10px,
171
+ #00ffff 10px, #00ffff 20px);
172
+ animation: rainbow 5s linear infinite;
173
+ }
174
+
175
+ .drag-name-tag {
176
+ position: absolute;
177
+ bottom: -20px;
178
+ right: 20px;
179
+ background: pink;
180
+ padding: 5px 15px;
181
+ border-radius: 20px;
182
+ font-weight: bold;
183
+ color: purple;
184
+ transform: rotate(-5deg);
185
+ box-shadow: 0 0 10px rgba(0,0,0,0.2);
186
+ z-index: 10;
187
+ }
188
+
189
+ .fabulous-btn {
190
+ transition: all 0.3s ease;
191
+ position: relative;
192
+ overflow: hidden;
193
+ }
194
+
195
+ .fabulous-btn:before {
196
+ content: '';
197
+ position: absolute;
198
+ top: -50%;
199
+ left: -50%;
200
+ width: 200%;
201
+ height: 200%;
202
+ background: linear-gradient(45deg,
203
+ transparent, rgba(255,255,255,0.3), transparent);
204
+ transform: rotate(45deg);
205
+ animation: shine 3s infinite;
206
+ }
207
+
208
+ @keyframes shine {
209
+ 0% { transform: translateX(-100%) rotate(45deg); }
210
+ 100% { transform: translateX(100%) rotate(45deg); }
211
+ }
212
+
213
+ .drag-queen-lipstick {
214
+ position: absolute;
215
+ bottom: -15px;
216
+ left: 20px;
217
+ width: 60px;
218
+ height: 15px;
219
+ background: #ff0066;
220
+ border-radius: 10px;
221
+ transform: rotate(-15deg);
222
+ filter: drop-shadow(0 0 5px #ff0066);
223
+ }
224
+
225
+ .high-heel {
226
+ position: absolute;
227
+ bottom: -25px;
228
+ right: 30px;
229
+ font-size: 30px;
230
+ transform: rotate(15deg);
231
+ color: red;
232
+ text-shadow: 0 0 10px red;
233
+ }
234
+ </style>
235
+ </head>
236
+ <body class="bg-gradient-to-br from-purple-200 via-pink-200 to-blue-200 min-h-screen overflow-x-hidden">
237
+ <!-- Floating glitter elements -->
238
+ <div id="glitter-container" class="fixed inset-0 pointer-events-none overflow-hidden z-0"></div>
239
+
240
+ <!-- Disco ball -->
241
+ <div class="fixed top-8 right-8 w-24 h-24 bg-gray-200 rounded-full flex items-center justify-center text-4xl disco z-50">
242
+ <i class="fas fa-star rainbow-bg bg-clip-text text-transparent"></i>
243
+ </div>
244
+
245
+ <!-- Pride parade at bottom -->
246
+ <div class="pride-parade fixed bottom-0 left-0 w-full h-8 z-40"></div>
247
+
248
+ <!-- Floating drag queens -->
249
+ <div class="fixed top-1/4 left-10 w-16 h-16 bg-pink-500 rounded-full flex items-center justify-center text-2xl text-white z-30" style="animation: fabulousFloat 5s ease-in-out infinite 0.5s;">
250
+ <i class="fas fa-rainbow"></i>
251
+ <div class="drag-name-tag text-xs">Sasha</div>
252
+ </div>
253
+
254
+ <div class="fixed top-1/3 right-20 w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-2xl text-white z-30" style="animation: fabulousFloat 4s ease-in-out infinite 1s;">
255
+ <i class="fas fa-heart"></i>
256
+ <div class="drag-name-tag text-xs">Valentina</div>
257
+ </div>
258
+
259
+ <div class="fixed bottom-1/4 left-20 w-16 h-16 bg-purple-500 rounded-full flex items-center justify-center text-2xl text-white z-30" style="animation: fabulousFloat 6s ease-in-out infinite 1.5s;">
260
+ <i class="fas fa-crown"></i>
261
+ <div class="drag-name-tag text-xs">Raja</div>
262
+ </div>
263
+
264
+ <div class="fixed bottom-1/3 right-10 w-16 h-16 bg-red-500 rounded-full flex items-center justify-center text-2xl text-white z-30" style="animation: fabulousFloat 5.5s ease-in-out infinite 0.8s;">
265
+ <i class="fas fa-lipstick"></i>
266
+ <div class="drag-name-tag text-xs">Latrice</div>
267
+ </div>
268
+
269
+ <div class="container mx-auto px-4 py-12 relative z-10">
270
+ <header class="text-center mb-16 relative">
271
+ <!-- Drag queen crown -->
272
+ <div class="drag-queen-crown">
273
+ <i class="fas fa-crown rainbow-bg bg-clip-text text-transparent"></i>
274
+ </div>
275
+
276
+ <h1 class="text-7xl font-extrabold mb-6 rainbow-bg bg-clip-text text-transparent font-serif italic tracking-wide">
277
+ 🌈 FABULOUSLY GAY 🌈<br>Coming Out Card Creator
278
+ </h1>
279
+ <p class="text-3xl text-purple-900 font-bold text-outline">Design your perfect coming out announcement with 1000% more RAINBOWS, GLITTER & DRAG QUEENS!</p>
280
+
281
+ <div class="mt-12 flex justify-center gap-6 flex-wrap">
282
+ <div class="relative group">
283
+ <div class="absolute -inset-2 bg-gradient-to-r from-pink-600 to-purple-600 rounded-full blur opacity-90 group-hover:opacity-100 transition duration-300 animate-pulse"></div>
284
+ <button id="generateBtn" class="relative px-10 py-6 bg-white rounded-full font-bold text-purple-900 flex items-center gap-4 text-2xl transform transition-all hover:scale-110 fabulous-btn">
285
+ <i class="fas fa-magic rainbow-bg bg-clip-text text-transparent text-3xl"></i>
286
+ <span class="rainbow-bg bg-clip-text text-transparent font-extrabold">GENERATE FABULOUS CARD</span>
287
+ <i class="fas fa-sparkles rainbow-bg bg-clip-text text-transparent text-3xl"></i>
288
+ </button>
289
+ </div>
290
+
291
+ <div class="relative group">
292
+ <div class="absolute -inset-2 bg-gradient-to-r from-blue-600 to-teal-600 rounded-full blur opacity-90 group-hover:opacity-100 transition duration-300 animate-pulse"></div>
293
+ <button id="shareBtn" class="relative px-10 py-6 bg-white rounded-full font-bold text-blue-900 flex items-center gap-4 text-2xl transform transition-all hover:scale-110 fabulous-btn">
294
+ <i class="fas fa-share-alt rainbow-bg bg-clip-text text-transparent text-3xl"></i>
295
+ <span class="rainbow-bg bg-clip-text text-transparent font-extrabold">SHARE WITH PRIDE</span>
296
+ <i class="fas fa-flag rainbow-bg bg-clip-text text-transparent text-3xl"></i>
297
+ </button>
298
+ </div>
299
+ </div>
300
+
301
+ <!-- Feather boa divider -->
302
+ <div class="feather-boa mt-12"></div>
303
+ </header>
304
+
305
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-16">
306
+ <!-- Card preview section -->
307
+ <div class="card-container relative">
308
+ <div class="unicorn-horn"></div>
309
+ <div class="coming-out-card bg-white rounded-3xl overflow-hidden shadow-2xl transform transition-all duration-300 hover:shadow-2xl relative border-4 border-pink-500 p-10 rainbow-border">
310
+ <div class="drag-queen"><i class="fas fa-rainbow"></i></div>
311
+ <div class="drag-queen-lipstick"></div>
312
+ <div class="high-heel"><i class="fas fa-shoe-prints"></i></div>
313
+ <div class="fingerprint absolute inset-0 pointer-events-none"></div>
314
+
315
+ <div id="cardPreview" class="h-full flex flex-col items-center justify-center text-center gap-8 bg-gradient-to-br from-pink-50 to-purple-50">
316
+ <div id="cardIcon" class="text-8xl rainbow-bg bg-clip-text text-transparent mb-6 fabulous-shadow">
317
+ <i class="fas fa-rainbow"></i>
318
+ </div>
319
+ <h2 id="cardTitle" class="text-6xl font-extrabold rainbow-bg bg-clip-text text-transparent font-serif tracking-wide text-outline">I'M GAY!</h2>
320
+ <p id="cardMessage" class="text-3xl text-purple-900 italic font-medium">"After much glitter and consideration, I've decided to live my truth!"</p>
321
+ <p id="cardSignature" class="text-2xl text-purple-900 mt-10 font-bold flex items-center gap-2">
322
+ Love, <span id="userName" class="text-3xl font-extrabold text-pink-600">Alex</span>
323
+ <span class="text-4xl rainbow-bg bg-clip-text text-transparent">🌈</span>
324
+ </p>
325
+ </div>
326
+ </div>
327
+ </div>
328
+
329
+ <!-- Customization panel -->
330
+ <div class="bg-white bg-opacity-90 rounded-3xl p-10 shadow-2xl border-4 border-purple-400 relative overflow-hidden rainbow-border">
331
+ <div class="absolute -top-8 -right-8 w-28 h-28 bg-yellow-400 rounded-full flex items-center justify-center text-4xl transform rotate-12 fabulous-shadow">
332
+ <i class="fas fa-palette text-purple-700"></i>
333
+ </div>
334
+
335
+ <h2 class="text-4xl font-extrabold text-purple-900 mb-8 flex items-center gap-4">
336
+ <i class="fas fa-sliders-h text-pink-500 text-5xl"></i>
337
+ <span class="rainbow-bg bg-clip-text text-transparent">Customize Your Fabulous Coming Out Card</span>
338
+ </h2>
339
+
340
+ <div class="space-y-8">
341
+ <!-- Name input -->
342
+ <div>
343
+ <label class="block text-purple-900 font-bold mb-3 text-2xl">Your Fabulous Name</label>
344
+ <div class="relative">
345
+ <input id="nameInput" type="text" class="w-full px-6 py-4 rounded-xl border-4 border-purple-400 focus:border-purple-600 focus:ring-4 focus:ring-purple-200 transition-all text-xl font-medium" value="Alex" placeholder="Enter your name">
346
+ <div class="absolute right-4 top-1/2 transform -translate-y-1/2 text-2xl text-pink-500">
347
+ <i class="fas fa-user-astronaut"></i>
348
+ </div>
349
+ </div>
350
+ </div>
351
+
352
+ <!-- Title options -->
353
+ <div>
354
+ <label class="block text-purple-900 font-bold mb-3 text-2xl">Announcement Title</label>
355
+ <div class="grid grid-cols-2 gap-4">
356
+ <button data-title="I'M GAY!" class="card-option-btn px-6 py-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl border-4 border-purple-300 hover:border-purple-600 transition-all text-xl font-bold fabulous-shadow">I'M GAY!</button>
357
+ <button data-title="SURPRISE!" class="card-option-btn px-6 py-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl border-4 border-purple-300 hover:border-purple-600 transition-all text-xl font-bold fabulous-shadow">SURPRISE!</button>
358
+ <button data-title="GUESS WHAT?" class="card-option-btn px-6 py-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl border-4 border-purple-300 hover:border-purple-600 transition-all text-xl font-bold fabulous-shadow">GUESS WHAT?</button>
359
+ <button data-title="IT'S OFFICIAL!" class="card-option-btn px-6 py-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl border-4 border-purple-300 hover:border-purple-600 transition-all text-xl font-bold fabulous-shadow">IT'S OFFICIAL!</button>
360
+ <button data-title="🌈 PRIDE! 🌈" class="card-option-btn px-6 py-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl border-4 border-purple-300 hover:border-purple-600 transition-all text-xl font-bold fabulous-shadow">🌈 PRIDE! 🌈</button>
361
+ <button data-title="LOVE WINS!" class="card-option-btn px-6 py-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl border-4 border-purple-300 hover:border-purple-600 transition-all text-xl font-bold fabulous-shadow">LOVE WINS!</button>
362
+ <button data-title="YAAAS QUEEN!" class="card-option-btn px-6 py-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl border-4 border-purple-300 hover:border-purple-600 transition-all text-xl font-bold fabulous-shadow">YAAAS QUEEN!</button>
363
+ <button data-title="✨ FABULOUS! ✨" class="card-option-btn px-6 py-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl border-4 border-purple-300 hover:border-purple-600 transition-all text-xl font-bold fabulous-shadow">✨ FABULOUS! ✨</button>
364
+ </div>
365
+ </div>
366
+
367
+ <!-- Message options -->
368
+ <div>
369
+ <label class="block text-purple-900 font-bold mb-3 text-2xl">Your Fabulous Message</label>
370
+ <div class="relative">
371
+ <textarea id="messageInput" class="w-full px-6 py-4 rounded-xl border-4 border-purple-400 focus:border-purple-600 focus:ring-4 focus:ring-purple-200 transition-all text-xl font-medium" rows="4">"After much glitter and consideration, I've decided to live my truth!"</textarea>
372
+ <div class="absolute right-4 top-4 text-2xl text-pink-500">
373
+ <i class="fas fa-comment-dots"></i>
374
+ </div>
375
+ </div>
376
+ <div class="grid grid-cols-2 gap-4 mt-4">
377
+ <button data-message="\"The rumors are true - I'm officially out and proud!\"" class="card-option-btn px-4 py-3 bg-gradient-to-r from-purple-100 to-pink-100 rounded-lg border-4 border-purple-300 hover:border-purple-600 transition-all text-lg font-medium fabulous-shadow">Rumors are true</button>
378
+ <button data-message="\"I've finally embraced my authentic self - and I've never been happier!\"" class="card-option-btn px-4 py-3 bg-gradient-to-r from-purple-100 to-pink-100 rounded-lg border-4 border-purple-300 hover:border-purple-600 transition-all text-lg font-medium fabulous-shadow">Authentic self</button>
379
+ <button data-message="\"After years in the closet, I'm ready to sparkle in the sunlight!\"" class="card-option-btn px-4 py-3 bg-gradient-to-r from-purple-100 to-pink-100 rounded-lg border-4 border-purple-300 hover:border-purple-600 transition-all text-lg font-medium fabulous-shadow">Sparkle time</button>
380
+ <button data-message="\"I'm coming out like a fabulous butterfly from its cocoon!\"" class="card-option-btn px-4 py-3 bg-gradient-to-r from-purple-100 to-pink-100 rounded-lg border-4 border-purple-300 hover:border-purple-600 transition-all text-lg font-medium fabulous-shadow">Fabulous butterfly</button>
381
+ <button data-message="\"Breaking news: I'm queer and proud to be here!\"" class="card-option-btn px-4 py-3 bg-gradient-to-r from-purple-100 to-pink-100 rounded-lg border-4 border-purple-300 hover:border-purple-600 transition-all text-lg font-medium fabulous-shadow">Breaking news</button>
382
+ <button data-message="\"Sashay away, closet! I'm living my truth today!\"" class="card-option-btn px-4 py-3 bg-gradient-to-r from-purple-100 to-pink-100 rounded-lg border-4 border-purple-300 hover:border-purple-600 transition-all text-lg font-medium fabulous-shadow">Sashay away</button>
383
+ </div>
384
+ </div>
385
+
386
+ <!-- Icon selection -->
387
+ <div>
388
+ <label class="block text-purple-900 font-bold mb-3 text-2xl">Fabulous Icon</label>
389
+ <div class="grid grid-cols-6 gap-4">
390
+ <button data-icon="fa-rainbow" class="card-icon-btn p-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl border-4 border-purple-300 hover:border-purple-600 transition-all text-4xl rainbow-bg bg-clip-text text-transparent fabulous-shadow"><i class="fas fa-rainbow"></i></button>
391
+ <button data-icon="fa-flag" class="card-icon-btn p-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl border-4 border-purple-300 hover:border-purple-600 transition-all text-4xl rainbow-bg bg-clip-text text-transparent fabulous-shadow"><i class="fas fa-flag"></i></button>
392
+ <button data-icon="fa-heart" class="card-icon-btn p-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl border-4 border-purple-300 hover:border-purple-600 transition-all text-4xl text-pink-500 fabulous-shadow"><i class="fas fa-heart"></i></button>
393
+ <button data-icon="fa-venus-mars" class="card-icon-btn p-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl border-4 border-purple-300 hover:border-purple-600 transition-all text-4xl text-purple-600 fabulous-shadow"><i class="fas fa-venus-mars"></i></button>
394
+ <button data-icon="fa-transgender" class="card-icon-btn p-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl border-4 border-purple-300 hover:border-purple-600 transition-all text-4xl text-blue-500 fabulous-shadow"><i class="fas fa-transgender"></i></button>
395
+ <button data-icon="fa-sparkles" class="card-icon-btn p-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl border-4 border-purple-300 hover:border-purple-600 transition-all text-4xl text-yellow-400 fabulous-shadow"><i class="fas fa-sparkles"></i></button>
396
+ <button data-icon="fa-crown" class="card-icon-btn p-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl border-4 border-purple-300 hover:border-purple-600 transition-all text-4xl text-gold-500 fabulous-shadow"><i class="fas fa-crown"></i></button>
397
+ <button data-icon="fa-lipstick" class="card-icon-btn p-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl border-4 border-purple-300 hover:border-purple-600 transition-all text-4xl text-red-500 fabulous-shadow"><i class="fas fa-lipstick"></i></button>
398
+ <button data-icon="fa-gem" class="card-icon-btn p-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl border-4 border-purple-300 hover:border-purple-600 transition-all text-4xl text-teal-500 fabulous-shadow"><i class="fas fa-gem"></i></button>
399
+ <button data-icon="fa-feather" class="card-icon-btn p-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl border-4 border-purple-300 hover:border-purple-600 transition-all text-4xl text-white fabulous-shadow"><i class="fas fa-feather"></i></button>
400
+ <button data-icon="fa-meteor" class="card-icon-btn p-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl border-4 border-purple-300 hover:border-purple-600 transition-all text-4xl text-orange-500 fabulous-shadow"><i class="fas fa-meteor"></i></button>
401
+ <button data-icon="fa-star" class="card-icon-btn p-4 bg-gradient-to-r from-purple-100 to-pink-100 rounded-xl border-4 border-purple-300 hover:border-purple-600 transition-all text-4xl text-yellow-300 fabulous-shadow"><i class="fas fa-star"></i></button>
402
+ </div>
403
+ </div>
404
+
405
+ <!-- Color scheme -->
406
+ <div>
407
+ <label class="block text-purple-900 font-bold mb-3 text-2xl">Fabulous Color Scheme</label>
408
+ <div class="grid grid-cols-5 gap-4">
409
+ <button data-scheme="rainbow" class="color-scheme-btn h-12 rounded-xl rainbow-border border-4 fabulous-shadow"></button>
410
+ <button data-scheme="lesbian" class="color-scheme-btn h-12 rounded-xl bg-gradient-to-r from-red-600 via-orange-400 to-pink-400 border-4 border-white fabulous-shadow"></button>
411
+ <button data-scheme="gay" class="color-scheme-btn h-12 rounded-xl bg-gradient-to-r from-green-400 to-blue-500 to-purple-600 border-4 border-white fabulous-shadow"></button>
412
+ <button data-scheme="bi" class="color-scheme-btn h-12 rounded-xl bg-gradient-to-r from-pink-600 via-purple-600 to-blue-600 border-4 border-white fabulous-shadow"></button>
413
+ <button data-scheme="trans" class="color-scheme-btn h-12 rounded-xl bg-gradient-to-r from-blue-400 via-pink-300 to-white border-4 border-white fabulous-shadow"></button>
414
+ <button data-scheme="pan" class="color-scheme-btn h-12 rounded-xl bg-gradient-to-r from-pink-500 via-yellow-300 to-blue-500 border-4 border-white fabulous-shadow"></button>
415
+ <button data-scheme="nonbinary" class="color-scheme-btn h-12 rounded-xl bg-gradient-to-r from-yellow-400 via-white to-purple-500 border-4 border-white fabulous-shadow"></button>
416
+ <button data-scheme="ace" class="color-scheme-btn h-12 rounded-xl bg-gradient-to-r from-black via-gray-500 to-purple-500 border-4 border-white fabulous-shadow"></button>
417
+ <button data-scheme="drag" class="color-scheme-btn h-12 rounded-xl bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 border-4 border-white fabulous-shadow"></button>
418
+ <button data-scheme="glitter" class="color-scheme-btn h-12 rounded-xl bg-gradient-to-r from-yellow-300 via-pink-400 to-teal-300 border-4 border-white fabulous-shadow"></button>
419
+ </div>
420
+ </div>
421
+ </div>
422
+ </div>
423
+ </div>
424
+
425
+ <!-- Pride parade footer -->
426
+ <div class="mt-16 text-center">
427
+ <p class="text-2xl text-purple-900 font-bold mb-6">Remember: You're valid, you're loved, and you're FABULOUS! 🌈✨</p>
428
+ <div class="flex justify-center gap-6">
429
+ <button class="px-8 py-4 bg-gradient-to-r from-pink-500 to-purple-600 text-white rounded-full font-bold text-xl flex items-center gap-3 transform hover:scale-105 transition-all fabulous-shadow">
430
+ <i class="fas fa-hands-helping"></i>
431
+ <span>LGBTQ+ Resources</span>
432
+ </button>
433
+ <button class="px-8 py-4 bg-gradient-to-r from-blue-500 to-teal-500 text-white rounded-full font-bold text-xl flex items-center gap-3 transform hover:scale-105 transition-all fabulous-shadow">
434
+ <i class="fas fa-heart"></i>
435
+ <span>Support Groups</span>
436
+ </button>
437
+ </div>
438
+ </div>
439
+ </div>
440
+
441
+ <script>
442
+ // Generate random glitter
443
+ function createGlitter() {
444
+ const colors = ['#ff0000', '#ff8000', '#ffff00', '#80ff00', '#00ff80', '#00ffff', '#0080ff', '#8000ff', '#ff00ff', '#ff0080'];
445
+ const glitter = document.createElement('div');
446
+ glitter.className = 'glitter';
447
+ glitter.style.background = colors[Math.floor(Math.random() * colors.length)];
448
+ glitter.style.left = Math.random() * 100 + 'vw';
449
+ glitter.style.top = Math.random() * 100 + 'vh';
450
+ glitter.style.width = (Math.random() * 20 + 10) + 'px';
451
+ glitter.style.height = glitter.style.width;
452
+ glitter.style.animationDuration = (Math.random() * 2 + 0.5) + 's';
453
+ glitter.style.animationDelay = (Math.random() * 2) + 's';
454
+ return glitter;
455
+ }
456
+
457
+ // Add glitter to page
458
+ function addGlitter() {
459
+ const container = document.getElementById('glitter-container');
460
+ const count = 100;
461
+ for (let i = 0; i < count; i++) {
462
+ container.appendChild(createGlitter());
463
+ }
464
+
465
+ // Keep adding glitter periodically
466
+ setInterval(() => {
467
+ if (container.children.length < 150) {
468
+ container.appendChild(createGlitter());
469
+ }
470
+ }, 500);
471
+ }
472
+
473
+ // Play fabulous sound
474
+ function playFabulousSound() {
475
+ const sounds = [
476
+ 'https://www.soundjay.com/buttons/sounds/button-09.mp3',
477
+ 'https://www.soundjay.com/buttons/sounds/button-10.mp3',
478
+ 'https://www.soundjay.com/buttons/sounds/button-21.mp3',
479
+ 'https://www.soundjay.com/buttons/sounds/button-30.mp3',
480
+ 'https://www.soundjay.com/buttons/sounds/button-31.mp3'
481
+ ];
482
+ const audio = new Audio(sounds[Math.floor(Math.random() * sounds.length)]);
483
+ audio.volume = 0.4;
484
+ audio.play().catch(e => console.log("Auto-play prevented:", e));
485
+ }
486
+
487
+ // Create confetti effect
488
+ function createConfetti(element) {
489
+ const colors = ['#ff0000', '#ff8000', '#ffff00', '#80ff00', '#00ff80', '#00ffff', '#0080ff', '#8000ff', '#ff00ff', '#ff0080'];
490
+ const container = element.getBoundingClientRect();
491
+
492
+ for (let i = 0; i < 100; i++) {
493
+ const confetti = document.createElement('div');
494
+ confetti.className = 'absolute w-3 h-3 rounded-full';
495
+ confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
496
+ confetti.style.left = Math.random() * container.width + 'px';
497
+ confetti.style.top = '-20px';
498
+ confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
499
+ confetti.style.filter = 'drop-shadow(0 0 5px currentColor)';
500
+
501
+ const animation = confetti.animate([
502
+ { top: '-20px', opacity: 1 },
503
+ { top: container.height + 'px', opacity: 0 }
504
+ ], {
505
+ duration: 1500 + Math.random() * 2000,
506
+ easing: 'cubic-bezier(0.1, 0.8, 0.9, 1)'
507
+ });
508
+
509
+ element.appendChild(confetti);
510
+ animation.onfinish = () => confetti.remove();
511
+ }
512
+ }
513
+
514
+ // Create drag queen emoji
515
+ function createDragQueen() {
516
+ const queen = document.createElement('div');
517
+ queen.className = 'fixed w-16 h-16 bg-pink-500 rounded-full flex items-center justify-center text-2xl text-white z-30';
518
+ queen.style.left = Math.random() * 100 + 'vw';
519
+ queen.style.top = Math.random() * 100 + 'vh';
520
+ queen.style.animation = `fabulousFloat ${4 + Math.random() * 3}s ease-in-out infinite ${Math.random() * 2}s`;
521
+
522
+ const icons = ['fa-rainbow', 'fa-heart', 'fa-crown', 'fa-lipstick', 'fa-gem', 'fa-star'];
523
+ queen.innerHTML = `<i class="fas ${icons[Math.floor(Math.random() * icons.length)]}"></i>`;
524
+
525
+ const names = ['Sasha', 'Valentina', 'Raja', 'Latrice', 'Trixie', 'Katya', 'Alaska', 'Jinkx', 'Bob', 'Monét'];
526
+ const nameTag = document.createElement('div');
527
+ nameTag.className = 'drag-name-tag text-xs';
528
+ nameTag.textContent = names[Math.floor(Math.random() * names.length)];
529
+ queen.appendChild(nameTag);
530
+
531
+ document.body.appendChild(queen);
532
+
533
+ // Remove if goes off screen
534
+ setTimeout(() => {
535
+ queen.remove();
536
+ }, 20000);
537
+ }
538
+
539
+ // Initialize
540
+ document.addEventListener('DOMContentLoaded', () => {
541
+ // Add glitter to page
542
+ addGlitter();
543
+
544
+ // Add floating drag queens periodically
545
+ setInterval(createDragQueen, 3000);
546
+
547
+ // Set up event listeners for customization
548
+ const nameInput = document.getElementById('nameInput');
549
+ const cardTitle = document.getElementById('cardTitle');
550
+ const cardMessage = document.getElementById('cardMessage');
551
+ const cardSignature = document.getElementById('cardSignature');
552
+ const cardIcon = document.getElementById('cardIcon');
553
+ const cardPreview = document.getElementById('cardPreview');
554
+
555
+ // Name input
556
+ nameInput.addEventListener('input', () => {
557
+ document.getElementById('userName').textContent = nameInput.value || 'Alex';
558
+ playFabulousSound();
559
+ });
560
+
561
+ // Title buttons
562
+ document.querySelectorAll('.card-option-btn[data-title]').forEach(btn => {
563
+ btn.addEventListener('click', () => {
564
+ cardTitle.textContent = btn.dataset.title;
565
+ playFabulousSound();
566
+ createConfetti(cardPreview);
567
+ });
568
+ });
569
+
570
+ // Message buttons
571
+ document.querySelectorAll('.card-option-btn[data-message]').forEach(btn => {
572
+ btn.addEventListener('click', () => {
573
+ cardMessage.textContent = btn.dataset.message;
574
+ playFabulousSound();
575
+ createConfetti(cardPreview);
576
+ });
577
+ });
578
+
579
+ // Message textarea
580
+ document.getElementById('messageInput').addEventListener('input', (e) => {
581
+ cardMessage.textContent = e.target.value;
582
+ });
583
+
584
+ // Icon buttons
585
+ document.querySelectorAll('.card-icon-btn').forEach(btn => {
586
+ btn.addEventListener('click', () => {
587
+ const iconClass = btn.dataset.icon;
588
+ cardIcon.innerHTML = `<i class="fas ${iconClass}"></i>`;
589
+
590
+ // Update icon color based on selection
591
+ if (iconClass === 'fa-heart') {
592
+ cardIcon.className = 'text-8xl text-pink-500 mb-6 fabulous-shadow';
593
+ } else if (iconClass === 'fa-venus-mars') {
594
+ cardIcon.className = 'text-8xl text-purple-600 mb-6 fabulous-shadow';
595
+ } else if (iconClass === 'fa-transgender') {
596
+ cardIcon.className = 'text-8xl text-blue-500 mb-6 fabulous-shadow';
597
+ } else if (iconClass === 'fa-sparkles') {
598
+ cardIcon.className = 'text-8xl text-yellow-400 mb-6 fabulous-shadow';
599
+ } else if (iconClass === 'fa-crown') {
600
+ cardIcon.className = 'text-8xl text-yellow-500 mb-6 fabulous-shadow';
601
+ } else if (iconClass === 'fa-lipstick') {
602
+ cardIcon.className = 'text-8xl text-red-500 mb-6 fabulous-shadow';
603
+ } else if (iconClass === 'fa-gem') {
604
+ cardIcon.className = 'text-8xl text-teal-500 mb-6 fabulous-shadow';
605
+ } else if (iconClass === 'fa-feather') {
606
+ cardIcon.className = 'text-8xl text-white mb-6 fabulous-shadow';
607
+ } else if (iconClass === 'fa-meteor') {
608
+ cardIcon.className = 'text-8xl text-orange-500 mb-6 fabulous-shadow';
609
+ } else if (iconClass === 'fa-star') {
610
+ cardIcon.className = 'text-8xl text-yellow-300 mb-6 fabulous-shadow';
611
+ } else {
612
+ cardIcon.className = 'text-8xl rainbow-bg bg-clip-text text-transparent mb-6 fabulous-shadow';
613
+ }
614
+
615
+ playFabulousSound();
616
+ createConfetti(cardPreview);
617
+ });
618
+ });
619
+
620
+ // Color scheme buttons
621
+ document.querySelectorAll('.color-scheme-btn').forEach(btn => {
622
+ btn.addEventListener('click', () => {
623
+ const scheme = btn.dataset.scheme;
624
+
625
+ // Reset all classes first
626
+ cardTitle.className = 'text-6xl font-extrabold font-serif tracking-wide text-outline';
627
+ cardMessage.className = 'text-3xl italic font-medium';
628
+ cardPreview.className = 'h-full flex flex-col items-center justify-center text-center gap-8';
629
+
630
+ // Apply selected scheme
631
+ if (scheme === 'rainbow') {
632
+ cardTitle.className += ' rainbow-bg bg-clip-text text-transparent';
633
+ cardMessage.className += ' text-purple-900';
634
+ cardPreview.className += ' bg-gradient-to-br from-pink-50 to-purple-50';
635
+ }
636
+ else if (scheme === 'lesbian') {
637
+ cardTitle.className += ' text-red-600';
638
+ cardMessage.className += ' text-orange-600';
639
+ cardPreview.className += ' bg-gradient-to-br from-red-50 to-orange-50';
640
+ }
641
+ else if (scheme === 'gay') {
642
+ cardTitle.className += ' text-blue-600';
643
+ cardMessage.className += ' text-green-600';
644
+ cardPreview.className += ' bg-gradient-to-br from-blue-50 to-green-50';
645
+ }
646
+ else if (scheme === 'bi') {
647
+ cardTitle.className += ' text-purple-600';
648
+ cardMessage.className += ' text-pink-600';
649
+ cardPreview.className += ' bg-gradient-to-br from-purple-50 to-pink-50';
650
+ }
651
+ else if (scheme === 'trans') {
652
+ cardTitle.className += ' text-blue-400';
653
+ cardMessage.className += ' text-pink-400';
654
+ cardPreview.className += ' bg-gradient-to-br from-blue-50 to-pink-50';
655
+ }
656
+ else if (scheme === 'pan') {
657
+ cardTitle.className += ' text-pink-500';
658
+ cardMessage.className += ' text-yellow-500';
659
+ cardPreview.className += ' bg-gradient-to-br from-pink-50 to-yellow-50';
660
+ }
661
+ else if (scheme === 'nonbinary') {
662
+ cardTitle.className += ' text-yellow-500';
663
+ cardMessage.className += ' text-purple-500';
664
+ cardPreview.className += ' bg-gradient-to-br from-yellow-50 to-purple-50';
665
+ }
666
+ else if (scheme === 'ace') {
667
+ cardTitle.className += ' text-purple-700';
668
+ cardMessage.className += ' text-gray-700';
669
+ cardPreview.className += ' bg-gradient-to-br from-gray-50 to-purple-50';
670
+ }
671
+ else if (scheme === 'drag') {
672
+ cardTitle.className += ' text-pink-600';
673
+ cardMessage.className += ' text-blue-500';
674
+ cardPreview.className += ' bg-gradient-to-br from-pink-50 to-blue-50';
675
+ }
676
+ else if (scheme === 'glitter') {
677
+ cardTitle.className += ' text-yellow-400';
678
+ cardMessage.className += ' text-teal-400';
679
+ cardPreview.className += ' bg-gradient-to-br from-yellow-50 to-teal-50';
680
+ }
681
+
682
+ playFabulousSound();
683
+ createConfetti(cardPreview);
684
+ });
685
+ });
686
+
687
+ // Generate button
688
+ document.getElementById('generateBtn').addEventListener('click', () => {
689
+ // Show FABULOUS notification
690
+ const notification = document.createElement('div');
691
+ notification.className = 'fixed bottom-8 right-8 bg-gradient-to-r from-pink-500 to-purple-600 text-white px-8 py-4 rounded-full shadow-2xl flex items-center gap-4 animate-bounce text-2xl z-50';
692
+ notification.innerHTML = `
693
+ <i class="fas fa-sparkles text-3xl"></i>
694
+ <span class="font-bold">FABULOUS card generated!</span>
695
+ <i class="fas fa-sparkles text-3xl"></i>
696
+ `;
697
+ document.body.appendChild(notification);
698
+
699
+ // Create extra confetti
700
+ for (let i = 0; i < 3; i++) {
701
+ setTimeout(() => {
702
+ createConfetti(cardPreview);
703
+ }, i * 300);
704
+ }
705
+
706
+ setTimeout(() => {
707
+ notification.classList.remove('animate-bounce');
708
+ notification.classList.add('opacity-0', 'transition-opacity', 'duration-500');
709
+ setTimeout(() => notification.remove(), 500);
710
+ }, 4000);
711
+
712
+ playFabulousSound();
713
+ createConfetti(cardPreview);
714
+
715
+ // Create floating drag queens
716
+ for (let i = 0; i < 5; i++) {
717
+ setTimeout(createDragQueen, i * 500);
718
+ }
719
+ });
720
+
721
+ // Share button
722
+ document.getElementById('shareBtn').addEventListener('click', () => {
723
+ // In a real app, this would share the card
724
+ // For now we'll just show a fabulous message
725
+ const notification = document.createElement('div');
726
+ notification.className = 'fixed bottom-8 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-blue-500 to-teal-500 text-white px-10 py-5 rounded-full shadow-2xl flex items-center gap-4 animate-bounce text-2xl z-50';
727
+ notification.innerHTML = `
728
+ <i class="fas fa-share-alt text-3xl"></i>
729
+ <span class="font-bold">Your fabulous coming out card is ready to share!</span>
730
+ <i class="fas fa-heart text-3xl"></i>
731
+ `;
732
+ document.body.appendChild(notification);
733
+
734
+ // Create extra confetti
735
+ for (let i = 0; i < 3; i++) {
736
+ setTimeout(() => {
737
+ createConfetti(cardPreview);
738
+ }, i * 300);
739
+ }
740
+
741
+ setTimeout(() => {
742
+ notification.classList.remove('animate-bounce');
743
+ notification.classList.add('opacity-0', 'transition-opacity', 'duration-500');
744
+ setTimeout(() => notification.remove(), 500);
745
+ }, 4000);
746
+
747
+ playFabulousSound();
748
+ createConfetti(cardPreview);
749
+ });
750
+
751
+ // Add initial drag queens
752
+ for (let i = 0; i < 5; i++) {
753
+ setTimeout(createDragQueen, i * 1000);
754
+ }
755
+ });
756
+ </script>
757
+ <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=AlgoDistill/coming-out-announcement" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
758
+ </html>