|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>🌈 FABULOUSLY GAY Coming Out Card Creator 🌈</title> |
|
<script src="https://cdn.tailwindcss.com"></script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
<style> |
|
@keyframes rainbow { |
|
0% { background-position: 0% 50%; } |
|
50% { background-position: 100% 50%; } |
|
100% { background-position: 0% 50%; } |
|
} |
|
|
|
@keyframes glitter { |
|
0% { opacity: 0.5; transform: scale(0.5); } |
|
50% { opacity: 1; transform: scale(1.5); } |
|
100% { opacity: 0.5; transform: scale(0.5); } |
|
} |
|
|
|
@keyframes disco { |
|
0% { box-shadow: 0 0 20px 10px #ff0000; } |
|
14% { box-shadow: 0 0 20px 10px #ff8000; } |
|
28% { box-shadow: 0 0 20px 10px #ffff00; } |
|
42% { box-shadow: 0 0 20px 10px #00ff00; } |
|
56% { box-shadow: 0 0 20px 10px #0000ff; } |
|
70% { box-shadow: 0 0 20px 10px #4b0082; } |
|
84% { box-shadow: 0 0 20px 10px #ee82ee; } |
|
100% { box-shadow: 0 0 20px 10px #ff0000; } |
|
} |
|
|
|
@keyframes fabulousFloat { |
|
0% { transform: translateY(0px) rotate(0deg); } |
|
50% { transform: translateY(-20px) rotate(5deg); } |
|
100% { transform: translateY(0px) rotate(0deg); } |
|
} |
|
|
|
@keyframes rainbowBorder { |
|
0% { border-color: #ff0000; } |
|
14% { border-color: #ff8000; } |
|
28% { border-color: #ffff00; } |
|
42% { border-color: #00ff00; } |
|
56% { border-color: #0000ff; } |
|
70% { border-color: #4b0082; } |
|
84% { border-color: #ee82ee; } |
|
100% { border-color: #ff0000; } |
|
} |
|
|
|
.rainbow-bg { |
|
background: linear-gradient(45deg, |
|
#ff0000, #ff8000, #ffff00, #80ff00, |
|
#00ff80, #00ffff, #0080ff, #8000ff, |
|
#ff00ff, #ff0080, #ff0000); |
|
background-size: 1000% 1000%; |
|
animation: rainbow 3s linear infinite; |
|
} |
|
|
|
.rainbow-border { |
|
animation: rainbowBorder 3s linear infinite; |
|
} |
|
|
|
.glitter { |
|
position: absolute; |
|
width: 15px; |
|
height: 15px; |
|
border-radius: 50%; |
|
animation: glitter 1.5s infinite; |
|
pointer-events: none; |
|
filter: drop-shadow(0 0 5px currentColor); |
|
} |
|
|
|
.disco { |
|
animation: disco 1.5s infinite; |
|
} |
|
|
|
.card-container { |
|
perspective: 1000px; |
|
} |
|
|
|
.coming-out-card { |
|
transform-style: preserve-3d; |
|
transition: all 0.5s ease; |
|
animation: fabulousFloat 4s ease-in-out infinite; |
|
} |
|
|
|
.coming-out-card:hover { |
|
transform: rotateY(15deg) rotateX(5deg) scale(1.1); |
|
} |
|
|
|
.drag-queen { |
|
position: absolute; |
|
top: -20px; |
|
right: -20px; |
|
width: 60px; |
|
height: 60px; |
|
background: #ff00ff; |
|
border-radius: 50%; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
color: white; |
|
font-size: 30px; |
|
box-shadow: 0 0 20px rgba(255, 0, 255, 0.9); |
|
z-index: 10; |
|
animation: fabulousFloat 3s ease-in-out infinite; |
|
} |
|
|
|
.fingerprint { |
|
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"); |
|
background-size: 100% 100%; |
|
opacity: 0.1; |
|
} |
|
|
|
.text-outline { |
|
text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff; |
|
} |
|
|
|
.text-outline-dark { |
|
text-shadow: -2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000; |
|
} |
|
|
|
.fabulous-shadow { |
|
filter: drop-shadow(0 0 10px rgba(255, 0, 255, 0.7)); |
|
} |
|
|
|
.drag-queen-crown { |
|
position: absolute; |
|
top: -40px; |
|
left: 50%; |
|
transform: translateX(-50%); |
|
font-size: 50px; |
|
text-shadow: 0 0 15px gold; |
|
z-index: 20; |
|
} |
|
|
|
.pride-parade { |
|
position: absolute; |
|
bottom: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 20px; |
|
background: linear-gradient(90deg, |
|
#e40303, #ff8c00, #ffed00, #008026, |
|
#004dff, #750787); |
|
animation: rainbow 5s linear infinite; |
|
} |
|
|
|
.unicorn-horn { |
|
position: absolute; |
|
top: -30px; |
|
left: 50%; |
|
transform: translateX(-50%) rotate(45deg); |
|
width: 0; |
|
height: 0; |
|
border-left: 20px solid transparent; |
|
border-right: 20px solid transparent; |
|
border-bottom: 40px solid gold; |
|
filter: drop-shadow(0 0 10px gold); |
|
z-index: 15; |
|
} |
|
|
|
.feather-boa { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
width: 100%; |
|
height: 20px; |
|
background: repeating-linear-gradient(45deg, |
|
#ff00ff, #ff00ff 10px, |
|
#00ffff 10px, #00ffff 20px); |
|
animation: rainbow 5s linear infinite; |
|
} |
|
|
|
.drag-name-tag { |
|
position: absolute; |
|
bottom: -20px; |
|
right: 20px; |
|
background: pink; |
|
padding: 5px 15px; |
|
border-radius: 20px; |
|
font-weight: bold; |
|
color: purple; |
|
transform: rotate(-5deg); |
|
box-shadow: 0 0 10px rgba(0,0,0,0.2); |
|
z-index: 10; |
|
} |
|
|
|
.fabulous-btn { |
|
transition: all 0.3s ease; |
|
position: relative; |
|
overflow: hidden; |
|
} |
|
|
|
.fabulous-btn:before { |
|
content: ''; |
|
position: absolute; |
|
top: -50%; |
|
left: -50%; |
|
width: 200%; |
|
height: 200%; |
|
background: linear-gradient(45deg, |
|
transparent, rgba(255,255,255,0.3), transparent); |
|
transform: rotate(45deg); |
|
animation: shine 3s infinite; |
|
} |
|
|
|
@keyframes shine { |
|
0% { transform: translateX(-100%) rotate(45deg); } |
|
100% { transform: translateX(100%) rotate(45deg); } |
|
} |
|
|
|
.drag-queen-lipstick { |
|
position: absolute; |
|
bottom: -15px; |
|
left: 20px; |
|
width: 60px; |
|
height: 15px; |
|
background: #ff0066; |
|
border-radius: 10px; |
|
transform: rotate(-15deg); |
|
filter: drop-shadow(0 0 5px #ff0066); |
|
} |
|
|
|
.high-heel { |
|
position: absolute; |
|
bottom: -25px; |
|
right: 30px; |
|
font-size: 30px; |
|
transform: rotate(15deg); |
|
color: red; |
|
text-shadow: 0 0 10px red; |
|
} |
|
</style> |
|
</head> |
|
<body class="bg-gradient-to-br from-purple-200 via-pink-200 to-blue-200 min-h-screen overflow-x-hidden"> |
|
|
|
<div id="glitter-container" class="fixed inset-0 pointer-events-none overflow-hidden z-0"></div> |
|
|
|
|
|
<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"> |
|
<i class="fas fa-star rainbow-bg bg-clip-text text-transparent"></i> |
|
</div> |
|
|
|
|
|
<div class="pride-parade fixed bottom-0 left-0 w-full h-8 z-40"></div> |
|
|
|
|
|
<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;"> |
|
<i class="fas fa-rainbow"></i> |
|
<div class="drag-name-tag text-xs">Sasha</div> |
|
</div> |
|
|
|
<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;"> |
|
<i class="fas fa-heart"></i> |
|
<div class="drag-name-tag text-xs">Valentina</div> |
|
</div> |
|
|
|
<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;"> |
|
<i class="fas fa-crown"></i> |
|
<div class="drag-name-tag text-xs">Raja</div> |
|
</div> |
|
|
|
<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;"> |
|
<i class="fas fa-lipstick"></i> |
|
<div class="drag-name-tag text-xs">Latrice</div> |
|
</div> |
|
|
|
<div class="container mx-auto px-4 py-12 relative z-10"> |
|
<header class="text-center mb-16 relative"> |
|
|
|
<div class="drag-queen-crown"> |
|
<i class="fas fa-crown rainbow-bg bg-clip-text text-transparent"></i> |
|
</div> |
|
|
|
<h1 class="text-7xl font-extrabold mb-6 rainbow-bg bg-clip-text text-transparent font-serif italic tracking-wide"> |
|
🌈 FABULOUSLY GAY 🌈<br>Coming Out Card Creator |
|
</h1> |
|
<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> |
|
|
|
<div class="mt-12 flex justify-center gap-6 flex-wrap"> |
|
<div class="relative group"> |
|
<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> |
|
<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"> |
|
<i class="fas fa-magic rainbow-bg bg-clip-text text-transparent text-3xl"></i> |
|
<span class="rainbow-bg bg-clip-text text-transparent font-extrabold">GENERATE FABULOUS CARD</span> |
|
<i class="fas fa-sparkles rainbow-bg bg-clip-text text-transparent text-3xl"></i> |
|
</button> |
|
</div> |
|
|
|
<div class="relative group"> |
|
<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> |
|
<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"> |
|
<i class="fas fa-share-alt rainbow-bg bg-clip-text text-transparent text-3xl"></i> |
|
<span class="rainbow-bg bg-clip-text text-transparent font-extrabold">SHARE WITH PRIDE</span> |
|
<i class="fas fa-flag rainbow-bg bg-clip-text text-transparent text-3xl"></i> |
|
</button> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="feather-boa mt-12"></div> |
|
</header> |
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-16"> |
|
|
|
<div class="card-container relative"> |
|
<div class="unicorn-horn"></div> |
|
<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"> |
|
<div class="drag-queen"><i class="fas fa-rainbow"></i></div> |
|
<div class="drag-queen-lipstick"></div> |
|
<div class="high-heel"><i class="fas fa-shoe-prints"></i></div> |
|
<div class="fingerprint absolute inset-0 pointer-events-none"></div> |
|
|
|
<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"> |
|
<div id="cardIcon" class="text-8xl rainbow-bg bg-clip-text text-transparent mb-6 fabulous-shadow"> |
|
<i class="fas fa-rainbow"></i> |
|
</div> |
|
<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> |
|
<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> |
|
<p id="cardSignature" class="text-2xl text-purple-900 mt-10 font-bold flex items-center gap-2"> |
|
Love, <span id="userName" class="text-3xl font-extrabold text-pink-600">Alex</span> |
|
<span class="text-4xl rainbow-bg bg-clip-text text-transparent">🌈</span> |
|
</p> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="bg-white bg-opacity-90 rounded-3xl p-10 shadow-2xl border-4 border-purple-400 relative overflow-hidden rainbow-border"> |
|
<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"> |
|
<i class="fas fa-palette text-purple-700"></i> |
|
</div> |
|
|
|
<h2 class="text-4xl font-extrabold text-purple-900 mb-8 flex items-center gap-4"> |
|
<i class="fas fa-sliders-h text-pink-500 text-5xl"></i> |
|
<span class="rainbow-bg bg-clip-text text-transparent">Customize Your Fabulous Coming Out Card</span> |
|
</h2> |
|
|
|
<div class="space-y-8"> |
|
|
|
<div> |
|
<label class="block text-purple-900 font-bold mb-3 text-2xl">Your Fabulous Name</label> |
|
<div class="relative"> |
|
<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"> |
|
<div class="absolute right-4 top-1/2 transform -translate-y-1/2 text-2xl text-pink-500"> |
|
<i class="fas fa-user-astronaut"></i> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div> |
|
<label class="block text-purple-900 font-bold mb-3 text-2xl">Announcement Title</label> |
|
<div class="grid grid-cols-2 gap-4"> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
</div> |
|
</div> |
|
|
|
|
|
<div> |
|
<label class="block text-purple-900 font-bold mb-3 text-2xl">Your Fabulous Message</label> |
|
<div class="relative"> |
|
<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> |
|
<div class="absolute right-4 top-4 text-2xl text-pink-500"> |
|
<i class="fas fa-comment-dots"></i> |
|
</div> |
|
</div> |
|
<div class="grid grid-cols-2 gap-4 mt-4"> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
</div> |
|
</div> |
|
|
|
|
|
<div> |
|
<label class="block text-purple-900 font-bold mb-3 text-2xl">Fabulous Icon</label> |
|
<div class="grid grid-cols-6 gap-4"> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
</div> |
|
</div> |
|
|
|
|
|
<div> |
|
<label class="block text-purple-900 font-bold mb-3 text-2xl">Fabulous Color Scheme</label> |
|
<div class="grid grid-cols-5 gap-4"> |
|
<button data-scheme="rainbow" class="color-scheme-btn h-12 rounded-xl rainbow-border border-4 fabulous-shadow"></button> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
<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> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<div class="mt-16 text-center"> |
|
<p class="text-2xl text-purple-900 font-bold mb-6">Remember: You're valid, you're loved, and you're FABULOUS! 🌈✨</p> |
|
<div class="flex justify-center gap-6"> |
|
<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"> |
|
<i class="fas fa-hands-helping"></i> |
|
<span>LGBTQ+ Resources</span> |
|
</button> |
|
<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"> |
|
<i class="fas fa-heart"></i> |
|
<span>Support Groups</span> |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
|
|
function createGlitter() { |
|
const colors = ['#ff0000', '#ff8000', '#ffff00', '#80ff00', '#00ff80', '#00ffff', '#0080ff', '#8000ff', '#ff00ff', '#ff0080']; |
|
const glitter = document.createElement('div'); |
|
glitter.className = 'glitter'; |
|
glitter.style.background = colors[Math.floor(Math.random() * colors.length)]; |
|
glitter.style.left = Math.random() * 100 + 'vw'; |
|
glitter.style.top = Math.random() * 100 + 'vh'; |
|
glitter.style.width = (Math.random() * 20 + 10) + 'px'; |
|
glitter.style.height = glitter.style.width; |
|
glitter.style.animationDuration = (Math.random() * 2 + 0.5) + 's'; |
|
glitter.style.animationDelay = (Math.random() * 2) + 's'; |
|
return glitter; |
|
} |
|
|
|
|
|
function addGlitter() { |
|
const container = document.getElementById('glitter-container'); |
|
const count = 100; |
|
for (let i = 0; i < count; i++) { |
|
container.appendChild(createGlitter()); |
|
} |
|
|
|
|
|
setInterval(() => { |
|
if (container.children.length < 150) { |
|
container.appendChild(createGlitter()); |
|
} |
|
}, 500); |
|
} |
|
|
|
|
|
function playFabulousSound() { |
|
const sounds = [ |
|
'https://www.soundjay.com/buttons/sounds/button-09.mp3', |
|
'https://www.soundjay.com/buttons/sounds/button-10.mp3', |
|
'https://www.soundjay.com/buttons/sounds/button-21.mp3', |
|
'https://www.soundjay.com/buttons/sounds/button-30.mp3', |
|
'https://www.soundjay.com/buttons/sounds/button-31.mp3' |
|
]; |
|
const audio = new Audio(sounds[Math.floor(Math.random() * sounds.length)]); |
|
audio.volume = 0.4; |
|
audio.play().catch(e => console.log("Auto-play prevented:", e)); |
|
} |
|
|
|
|
|
function createConfetti(element) { |
|
const colors = ['#ff0000', '#ff8000', '#ffff00', '#80ff00', '#00ff80', '#00ffff', '#0080ff', '#8000ff', '#ff00ff', '#ff0080']; |
|
const container = element.getBoundingClientRect(); |
|
|
|
for (let i = 0; i < 100; i++) { |
|
const confetti = document.createElement('div'); |
|
confetti.className = 'absolute w-3 h-3 rounded-full'; |
|
confetti.style.background = colors[Math.floor(Math.random() * colors.length)]; |
|
confetti.style.left = Math.random() * container.width + 'px'; |
|
confetti.style.top = '-20px'; |
|
confetti.style.transform = `rotate(${Math.random() * 360}deg)`; |
|
confetti.style.filter = 'drop-shadow(0 0 5px currentColor)'; |
|
|
|
const animation = confetti.animate([ |
|
{ top: '-20px', opacity: 1 }, |
|
{ top: container.height + 'px', opacity: 0 } |
|
], { |
|
duration: 1500 + Math.random() * 2000, |
|
easing: 'cubic-bezier(0.1, 0.8, 0.9, 1)' |
|
}); |
|
|
|
element.appendChild(confetti); |
|
animation.onfinish = () => confetti.remove(); |
|
} |
|
} |
|
|
|
|
|
function createDragQueen() { |
|
const queen = document.createElement('div'); |
|
queen.className = 'fixed w-16 h-16 bg-pink-500 rounded-full flex items-center justify-center text-2xl text-white z-30'; |
|
queen.style.left = Math.random() * 100 + 'vw'; |
|
queen.style.top = Math.random() * 100 + 'vh'; |
|
queen.style.animation = `fabulousFloat ${4 + Math.random() * 3}s ease-in-out infinite ${Math.random() * 2}s`; |
|
|
|
const icons = ['fa-rainbow', 'fa-heart', 'fa-crown', 'fa-lipstick', 'fa-gem', 'fa-star']; |
|
queen.innerHTML = `<i class="fas ${icons[Math.floor(Math.random() * icons.length)]}"></i>`; |
|
|
|
const names = ['Sasha', 'Valentina', 'Raja', 'Latrice', 'Trixie', 'Katya', 'Alaska', 'Jinkx', 'Bob', 'Monét']; |
|
const nameTag = document.createElement('div'); |
|
nameTag.className = 'drag-name-tag text-xs'; |
|
nameTag.textContent = names[Math.floor(Math.random() * names.length)]; |
|
queen.appendChild(nameTag); |
|
|
|
document.body.appendChild(queen); |
|
|
|
|
|
setTimeout(() => { |
|
queen.remove(); |
|
}, 20000); |
|
} |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
addGlitter(); |
|
|
|
|
|
setInterval(createDragQueen, 3000); |
|
|
|
|
|
const nameInput = document.getElementById('nameInput'); |
|
const cardTitle = document.getElementById('cardTitle'); |
|
const cardMessage = document.getElementById('cardMessage'); |
|
const cardSignature = document.getElementById('cardSignature'); |
|
const cardIcon = document.getElementById('cardIcon'); |
|
const cardPreview = document.getElementById('cardPreview'); |
|
|
|
|
|
nameInput.addEventListener('input', () => { |
|
document.getElementById('userName').textContent = nameInput.value || 'Alex'; |
|
playFabulousSound(); |
|
}); |
|
|
|
|
|
document.querySelectorAll('.card-option-btn[data-title]').forEach(btn => { |
|
btn.addEventListener('click', () => { |
|
cardTitle.textContent = btn.dataset.title; |
|
playFabulousSound(); |
|
createConfetti(cardPreview); |
|
}); |
|
}); |
|
|
|
|
|
document.querySelectorAll('.card-option-btn[data-message]').forEach(btn => { |
|
btn.addEventListener('click', () => { |
|
cardMessage.textContent = btn.dataset.message; |
|
playFabulousSound(); |
|
createConfetti(cardPreview); |
|
}); |
|
}); |
|
|
|
|
|
document.getElementById('messageInput').addEventListener('input', (e) => { |
|
cardMessage.textContent = e.target.value; |
|
}); |
|
|
|
|
|
document.querySelectorAll('.card-icon-btn').forEach(btn => { |
|
btn.addEventListener('click', () => { |
|
const iconClass = btn.dataset.icon; |
|
cardIcon.innerHTML = `<i class="fas ${iconClass}"></i>`; |
|
|
|
|
|
if (iconClass === 'fa-heart') { |
|
cardIcon.className = 'text-8xl text-pink-500 mb-6 fabulous-shadow'; |
|
} else if (iconClass === 'fa-venus-mars') { |
|
cardIcon.className = 'text-8xl text-purple-600 mb-6 fabulous-shadow'; |
|
} else if (iconClass === 'fa-transgender') { |
|
cardIcon.className = 'text-8xl text-blue-500 mb-6 fabulous-shadow'; |
|
} else if (iconClass === 'fa-sparkles') { |
|
cardIcon.className = 'text-8xl text-yellow-400 mb-6 fabulous-shadow'; |
|
} else if (iconClass === 'fa-crown') { |
|
cardIcon.className = 'text-8xl text-yellow-500 mb-6 fabulous-shadow'; |
|
} else if (iconClass === 'fa-lipstick') { |
|
cardIcon.className = 'text-8xl text-red-500 mb-6 fabulous-shadow'; |
|
} else if (iconClass === 'fa-gem') { |
|
cardIcon.className = 'text-8xl text-teal-500 mb-6 fabulous-shadow'; |
|
} else if (iconClass === 'fa-feather') { |
|
cardIcon.className = 'text-8xl text-white mb-6 fabulous-shadow'; |
|
} else if (iconClass === 'fa-meteor') { |
|
cardIcon.className = 'text-8xl text-orange-500 mb-6 fabulous-shadow'; |
|
} else if (iconClass === 'fa-star') { |
|
cardIcon.className = 'text-8xl text-yellow-300 mb-6 fabulous-shadow'; |
|
} else { |
|
cardIcon.className = 'text-8xl rainbow-bg bg-clip-text text-transparent mb-6 fabulous-shadow'; |
|
} |
|
|
|
playFabulousSound(); |
|
createConfetti(cardPreview); |
|
}); |
|
}); |
|
|
|
|
|
document.querySelectorAll('.color-scheme-btn').forEach(btn => { |
|
btn.addEventListener('click', () => { |
|
const scheme = btn.dataset.scheme; |
|
|
|
|
|
cardTitle.className = 'text-6xl font-extrabold font-serif tracking-wide text-outline'; |
|
cardMessage.className = 'text-3xl italic font-medium'; |
|
cardPreview.className = 'h-full flex flex-col items-center justify-center text-center gap-8'; |
|
|
|
|
|
if (scheme === 'rainbow') { |
|
cardTitle.className += ' rainbow-bg bg-clip-text text-transparent'; |
|
cardMessage.className += ' text-purple-900'; |
|
cardPreview.className += ' bg-gradient-to-br from-pink-50 to-purple-50'; |
|
} |
|
else if (scheme === 'lesbian') { |
|
cardTitle.className += ' text-red-600'; |
|
cardMessage.className += ' text-orange-600'; |
|
cardPreview.className += ' bg-gradient-to-br from-red-50 to-orange-50'; |
|
} |
|
else if (scheme === 'gay') { |
|
cardTitle.className += ' text-blue-600'; |
|
cardMessage.className += ' text-green-600'; |
|
cardPreview.className += ' bg-gradient-to-br from-blue-50 to-green-50'; |
|
} |
|
else if (scheme === 'bi') { |
|
cardTitle.className += ' text-purple-600'; |
|
cardMessage.className += ' text-pink-600'; |
|
cardPreview.className += ' bg-gradient-to-br from-purple-50 to-pink-50'; |
|
} |
|
else if (scheme === 'trans') { |
|
cardTitle.className += ' text-blue-400'; |
|
cardMessage.className += ' text-pink-400'; |
|
cardPreview.className += ' bg-gradient-to-br from-blue-50 to-pink-50'; |
|
} |
|
else if (scheme === 'pan') { |
|
cardTitle.className += ' text-pink-500'; |
|
cardMessage.className += ' text-yellow-500'; |
|
cardPreview.className += ' bg-gradient-to-br from-pink-50 to-yellow-50'; |
|
} |
|
else if (scheme === 'nonbinary') { |
|
cardTitle.className += ' text-yellow-500'; |
|
cardMessage.className += ' text-purple-500'; |
|
cardPreview.className += ' bg-gradient-to-br from-yellow-50 to-purple-50'; |
|
} |
|
else if (scheme === 'ace') { |
|
cardTitle.className += ' text-purple-700'; |
|
cardMessage.className += ' text-gray-700'; |
|
cardPreview.className += ' bg-gradient-to-br from-gray-50 to-purple-50'; |
|
} |
|
else if (scheme === 'drag') { |
|
cardTitle.className += ' text-pink-600'; |
|
cardMessage.className += ' text-blue-500'; |
|
cardPreview.className += ' bg-gradient-to-br from-pink-50 to-blue-50'; |
|
} |
|
else if (scheme === 'glitter') { |
|
cardTitle.className += ' text-yellow-400'; |
|
cardMessage.className += ' text-teal-400'; |
|
cardPreview.className += ' bg-gradient-to-br from-yellow-50 to-teal-50'; |
|
} |
|
|
|
playFabulousSound(); |
|
createConfetti(cardPreview); |
|
}); |
|
}); |
|
|
|
|
|
document.getElementById('generateBtn').addEventListener('click', () => { |
|
|
|
const notification = document.createElement('div'); |
|
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'; |
|
notification.innerHTML = ` |
|
<i class="fas fa-sparkles text-3xl"></i> |
|
<span class="font-bold">FABULOUS card generated!</span> |
|
<i class="fas fa-sparkles text-3xl"></i> |
|
`; |
|
document.body.appendChild(notification); |
|
|
|
|
|
for (let i = 0; i < 3; i++) { |
|
setTimeout(() => { |
|
createConfetti(cardPreview); |
|
}, i * 300); |
|
} |
|
|
|
setTimeout(() => { |
|
notification.classList.remove('animate-bounce'); |
|
notification.classList.add('opacity-0', 'transition-opacity', 'duration-500'); |
|
setTimeout(() => notification.remove(), 500); |
|
}, 4000); |
|
|
|
playFabulousSound(); |
|
createConfetti(cardPreview); |
|
|
|
|
|
for (let i = 0; i < 5; i++) { |
|
setTimeout(createDragQueen, i * 500); |
|
} |
|
}); |
|
|
|
|
|
document.getElementById('shareBtn').addEventListener('click', () => { |
|
|
|
|
|
const notification = document.createElement('div'); |
|
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'; |
|
notification.innerHTML = ` |
|
<i class="fas fa-share-alt text-3xl"></i> |
|
<span class="font-bold">Your fabulous coming out card is ready to share!</span> |
|
<i class="fas fa-heart text-3xl"></i> |
|
`; |
|
document.body.appendChild(notification); |
|
|
|
|
|
for (let i = 0; i < 3; i++) { |
|
setTimeout(() => { |
|
createConfetti(cardPreview); |
|
}, i * 300); |
|
} |
|
|
|
setTimeout(() => { |
|
notification.classList.remove('animate-bounce'); |
|
notification.classList.add('opacity-0', 'transition-opacity', 'duration-500'); |
|
setTimeout(() => notification.remove(), 500); |
|
}, 4000); |
|
|
|
playFabulousSound(); |
|
createConfetti(cardPreview); |
|
}); |
|
|
|
|
|
for (let i = 0; i < 5; i++) { |
|
setTimeout(createDragQueen, i * 1000); |
|
} |
|
}); |
|
</script> |
|
<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> |
|
</html> |
