Spaces:
Running
Running
File size: 13,724 Bytes
f6499ce | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>You're Amazing! ❤️</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 float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes heartBeat {
0% { transform: scale(1); }
14% { transform: scale(1.3); }
28% { transform: scale(1); }
42% { transform: scale(1.3); }
70% { transform: scale(1); }
}
@keyframes mouthTalk {
0%, 100% { height: 4px; }
50% { height: 8px; }
}
.bear-float {
animation: float 4s ease-in-out infinite;
}
.heart-pulse {
animation: pulse 2s infinite, heartBeat 1.3s ease-in-out infinite;
}
.message-pop {
animation: pulse 0.5s ease-out;
}
.confetti {
position: absolute;
width: 10px;
height: 10px;
background-color: #f00;
opacity: 0;
}
.mouth {
animation: mouthTalk 0.3s infinite paused;
}
.speech-bubble {
position: relative;
background: #fff;
border-radius: 20px;
padding: 15px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
margin-bottom: 20px;
}
.speech-bubble:after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
width: 0;
height: 0;
border: 20px solid transparent;
border-top-color: #fff;
border-bottom: 0;
border-left: 0;
margin-left: -10px;
margin-bottom: -20px;
}
</style>
</head>
<body class="bg-gradient-to-br from-pink-100 to-purple-200 min-h-screen flex flex-col items-center justify-center p-4 overflow-hidden">
<div class="max-w-md w-full bg-white rounded-3xl shadow-xl overflow-hidden">
<div class="bg-gradient-to-r from-pink-400 to-purple-500 p-6 text-center">
<h1 class="text-3xl font-bold text-white">For Someone Special ❤️</h1>
</div>
<div class="p-8 relative">
<!-- Bear Container -->
<div class="relative flex flex-col items-center mb-8">
<!-- Speech Bubble -->
<div id="speechBubble" class="speech-bubble hidden w-full mb-4">
<p id="bubbleText" class="text-gray-800"></p>
</div>
<!-- Bear -->
<div class="bear-float relative">
<!-- Bear Head -->
<div class="w-48 h-40 bg-amber-400 rounded-full relative">
<!-- Ears -->
<div class="absolute -top-4 -left-4 w-16 h-16 bg-amber-400 rounded-full"></div>
<div class="absolute -top-4 -right-4 w-16 h-16 bg-amber-400 rounded-full"></div>
<!-- Inner Ears -->
<div class="absolute -top-2 -left-2 w-12 h-12 bg-amber-300 rounded-full"></div>
<div class="absolute -top-2 -right-2 w-12 h-12 bg-amber-300 rounded-full"></div>
<!-- Eyes -->
<div class="absolute top-12 left-10 w-8 h-8 bg-white rounded-full flex justify-center items-center">
<div class="w-4 h-4 bg-black rounded-full"></div>
</div>
<div class="absolute top-12 right-10 w-8 h-8 bg-white rounded-full flex justify-center items-center">
<div class="w-4 h-4 bg-black rounded-full"></div>
</div>
<!-- Nose -->
<div class="absolute top-20 left-1/2 transform -translate-x-1/2 w-10 h-8 bg-black rounded-full"></div>
<!-- Mouth -->
<div id="bearMouth" class="mouth absolute top-28 left-1/2 transform -translate-x-1/2 w-16 border-b-4 border-black rounded-b-full"></div>
<!-- Blush -->
<div class="absolute top-20 left-4 w-6 h-4 bg-pink-200 rounded-full opacity-70"></div>
<div class="absolute top-20 right-4 w-6 h-4 bg-pink-200 rounded-full opacity-70"></div>
</div>
<!-- Bear Body -->
<div class="w-40 h-32 bg-amber-400 rounded-full mx-auto -mt-8 relative">
<!-- Arms -->
<div class="absolute -left-8 top-8 w-16 h-10 bg-amber-400 rounded-full transform -rotate-30"></div>
<div class="absolute -right-8 top-8 w-16 h-10 bg-amber-400 rounded-full transform rotate-30"></div>
<!-- Heart -->
<div class="absolute -bottom-4 left-1/2 transform -translate-x-1/2 text-red-500 text-4xl heart-pulse">
<i class="fas fa-heart"></i>
</div>
</div>
</div>
</div>
<!-- Message Box -->
<div id="messageBox" class="bg-pink-50 rounded-xl p-6 mb-8 text-center min-h-24 flex items-center justify-center message-pop">
<p id="messageText" class="text-xl font-medium text-gray-800">Click the button to hear how amazing you are!</p>
</div>
<!-- Button -->
<button id="complimentButton" class="w-full bg-gradient-to-r from-pink-400 to-purple-500 hover:from-pink-500 hover:to-purple-600 text-white font-bold py-4 px-6 rounded-full shadow-lg transform transition hover:scale-105 focus:outline-none">
<span class="flex items-center justify-center">
<i class="fas fa-heart mr-2"></i>
Get Your Compliment
<i class="fas fa-heart ml-2"></i>
</span>
</button>
</div>
</div>
<div class="mt-8 text-center text-gray-600">
<p>Made with <i class="fas fa-heart text-red-500"></i> just for you</p>
</div>
<script>
const compliments = [
"You're the most beautiful person I know, inside and out!",
"Your smile brightens my darkest days!",
"You have the kindest heart of anyone I've ever met!",
"Your intelligence and creativity amaze me every day!",
"Being around you makes everything better!",
"You're stronger than you think and more wonderful than you know!",
"Your laugh is my favorite sound in the whole world!",
"You make ordinary moments feel magical!",
"Your thoughtfulness touches everyone around you!",
"You're not just my favorite person—you're everyone's favorite person!",
"Your confidence is inspiring!",
"You have the most wonderful way of seeing the world!",
"Everything about you is perfect just the way it is!",
"You're the reason I believe in good things!",
"Your presence is a gift to everyone around you!"
];
const button = document.getElementById('complimentButton');
const messageText = document.getElementById('messageText');
const messageBox = document.getElementById('messageBox');
const bearMouth = document.getElementById('bearMouth');
const speechBubble = document.getElementById('speechBubble');
const bubbleText = document.getElementById('bubbleText');
// Initialize speech synthesis
const synth = window.speechSynthesis;
let voices = [];
// Load voices
function loadVoices() {
voices = synth.getVoices();
}
// Run once voices have loaded
if (synth.onvoiceschanged !== undefined) {
synth.onvoiceschanged = loadVoices;
}
loadVoices();
// Speak function with cute voice
function speak(text) {
if (synth.speaking) {
synth.cancel();
}
const utterance = new SpeechSynthesisUtterance(text);
// Try to find a cute voice (higher pitch, female voice)
const cuteVoice = voices.find(voice =>
voice.name.includes('Female') ||
voice.name.includes('female') ||
voice.name.includes('Google UK English Female') ||
voice.name.includes('Microsoft Zira Desktop')
);
if (cuteVoice) {
utterance.voice = cuteVoice;
utterance.pitch = 1.3; // Higher pitch
utterance.rate = 0.9; // Slightly slower
}
// Animate mouth while speaking
bearMouth.style.animationPlayState = 'running';
speechBubble.classList.remove('hidden');
bubbleText.textContent = text;
utterance.onend = function() {
bearMouth.style.animationPlayState = 'paused';
setTimeout(() => {
speechBubble.classList.add('hidden');
}, 2000);
};
synth.speak(utterance);
}
button.addEventListener('click', () => {
// Get random compliment
const randomCompliment = compliments[Math.floor(Math.random() * compliments.length)];
// Update message with animation
messageBox.classList.remove('message-pop');
void messageBox.offsetWidth; // Trigger reflow
messageBox.classList.add('message-pop');
messageText.textContent = randomCompliment;
// Speak the compliment
speak(randomCompliment);
// Create confetti effect
createConfetti();
});
function createConfetti() {
const colors = ['#f87171', '#60a5fa', '#34d399', '#fbbf24', '#a78bfa', '#f472b6'];
for (let i = 0; i < 50; i++) {
const confetti = document.createElement('div');
confetti.className = 'confetti';
confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)];
confetti.style.left = Math.random() * 100 + 'vw';
confetti.style.top = '-10px';
confetti.style.transform = `rotate(${Math.random() * 360}deg)`;
// Random shape
const shapes = ['circle', 'square'];
const shape = shapes[Math.floor(Math.random() * shapes.length)];
if (shape === 'circle') {
confetti.style.borderRadius = '50%';
}
// Random size
const size = Math.random() * 10 + 5;
confetti.style.width = size + 'px';
confetti.style.height = size + 'px';
document.body.appendChild(confetti);
// Animate confetti
const animationDuration = Math.random() * 3 + 2;
confetti.animate([
{ top: '-10px', opacity: 0 },
{ top: '10%', opacity: 1 },
{ top: '100vh', opacity: 0 }
], {
duration: animationDuration * 1000,
easing: 'cubic-bezier(0.1, 0.8, 0.3, 1)',
fill: 'forwards'
});
// Remove confetti after animation
setTimeout(() => {
confetti.remove();
}, animationDuration * 1000);
}
}
// Auto-compliment every 15 seconds if button isn't clicked
let autoCompliment = setInterval(() => {
if (!document.hidden && !synth.speaking) {
const randomCompliment = compliments[Math.floor(Math.random() * compliments.length)];
messageBox.classList.remove('message-pop');
void messageBox.offsetWidth;
messageBox.classList.add('message-pop');
messageText.textContent = randomCompliment;
speak(randomCompliment);
createConfetti();
}
}, 15000);
</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=strangefuture/negz" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |