Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CyberFluff - Where Tech Meets Cuteness</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Rubik+Mono+One&family=Comfortaa:wght@400;700&display=swap'); | |
| :root { | |
| --neon-pink: #ff6ec7; | |
| --neon-blue: #6ec6ff; | |
| --neon-purple: #b36eff; | |
| --fluffy-white: #fff9f9; | |
| --cyber-black: #0a0a14; | |
| } | |
| body { | |
| font-family: 'Comfortaa', cursive; | |
| background-color: var(--cyber-black); | |
| color: var(--fluffy-white); | |
| overflow-x: hidden; | |
| } | |
| .cyber-title { | |
| font-family: 'Rubik Mono One', sans-serif; | |
| text-shadow: 0 0 10px var(--neon-pink), | |
| 0 0 20px var(--neon-blue); | |
| } | |
| .fluffy-card { | |
| background: rgba(255, 255, 255, 0.08); | |
| backdrop-filter: blur(12px); | |
| border-radius: 25px; | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| box-shadow: 0 8px 32px rgba(110, 198, 255, 0.1), | |
| inset 0 0 20px rgba(255, 255, 255, 0.05); | |
| } | |
| .fluffy-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 10px 30px rgba(110, 198, 255, 0.3); | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 5px currentColor; | |
| } | |
| .pink-neon { | |
| color: var(--neon-pink); | |
| } | |
| .blue-neon { | |
| color: var(--neon-blue); | |
| } | |
| .purple-neon { | |
| color: var(--neon-purple); | |
| } | |
| .fluffy-btn { | |
| background: linear-gradient(45deg, var(--neon-pink), var(--neon-purple)); | |
| border: none; | |
| border-radius: 50px; | |
| padding: 12px 30px; | |
| font-weight: bold; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| position: relative; | |
| overflow: hidden; | |
| z-index: 1; | |
| } | |
| .fluffy-btn::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: -100%; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(45deg, var(--neon-blue), var(--neon-pink)); | |
| transition: all 0.4s ease; | |
| z-index: -1; | |
| } | |
| .fluffy-btn:hover::before { | |
| left: 0; | |
| } | |
| .floating-clouds { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| .cloud { | |
| position: absolute; | |
| background: rgba(255, 255, 255, 0.15); | |
| border-radius: 50%; | |
| filter: blur(40px); | |
| animation: float 15s infinite ease-in-out; | |
| box-shadow: 0 0 60px rgba(255, 255, 255, 0.2); | |
| } | |
| .cloud::after { | |
| content: ''; | |
| position: absolute; | |
| width: 50%; | |
| height: 50%; | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| top: 20%; | |
| left: 20%; | |
| filter: blur(15px); | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0) translateX(0); } | |
| 50% { transform: translateY(-50px) translateX(50px); } | |
| 100% { transform: translateY(0) translateX(0); } | |
| } | |
| .cyber-grid { | |
| background-image: | |
| linear-gradient(rgba(110, 198, 255, 0.1) 1px, transparent 1px), | |
| linear-gradient(90deg, rgba(110, 198, 255, 0.1) 1px, transparent 1px); | |
| background-size: 30px 30px; | |
| } | |
| .pixel-corners { | |
| clip-path: polygon( | |
| 0% 10px, 10px 10px, 10px 0%, calc(100% - 10px) 0%, | |
| calc(100% - 10px) 10px, 100% 10px, 100% calc(100% - 10px), | |
| calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) 100%, | |
| 10px 100%, 10px calc(100% - 10px), 0% calc(100% - 10px) | |
| ); | |
| } | |
| .fluffy-mascot { | |
| animation: bounce 2s infinite cubic-bezier(0.28, 0.84, 0.42, 1.1); | |
| filter: drop-shadow(0 10px 15px rgba(255, 110, 199, 0.4)); | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0) rotate(-2deg); } | |
| 25% { transform: translateY(-30px) rotate(2deg); } | |
| 50% { transform: translateY(-10px) rotate(-2deg); } | |
| 75% { transform: translateY(-20px) rotate(2deg); } | |
| } | |
| .glow { | |
| animation: glow 2s infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { filter: drop-shadow(0 0 5px currentColor); } | |
| to { filter: drop-shadow(0 0 20px currentColor); } | |
| } | |
| .floating-hearts { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| top: 0; | |
| left: 0; | |
| pointer-events: none; | |
| z-index: -1; | |
| } | |
| .heart { | |
| position: absolute; | |
| color: rgba(255, 110, 199, 0.6); | |
| animation: float-up 15s linear infinite; | |
| filter: drop-shadow(0 0 5px rgba(255, 110, 199, 0.4)); | |
| } | |
| @keyframes float-up { | |
| 0% { transform: translateY(100vh) translateX(0) scale(0.5); opacity: 0; } | |
| 10% { opacity: 0.8; } | |
| 90% { opacity: 0.8; } | |
| 100% { transform: translateY(-100px) translateX(50px) scale(1.2); opacity: 0; } | |
| } | |
| </style> | |
| </head> | |
| <body class="cyber-grid min-h-screen"> | |
| <!-- Floating Clouds Background --> | |
| <div class="floating-clouds"> | |
| <div class="cloud w-64 h-64 bg-pink-200 top-20 left-10" style="animation-delay: 0s"></div> | |
| <div class="cloud w-80 h-80 bg-blue-200 top-40 right-20" style="animation-delay: 1s"></div> | |
| <div class="cloud w-96 h-96 bg-purple-200 bottom-20 left-1/4" style="animation-delay: 2s"></div> | |
| <div class="cloud w-72 h-72 bg-pink-200 bottom-40 right-1/3" style="animation-delay: 3s"></div> | |
| <div class="cloud w-60 h-60 bg-blue-200 top-1/4 right-1/3" style="animation-delay: 4s"></div> | |
| <div class="cloud w-88 h-88 bg-purple-200 bottom-1/3 left-1/5" style="animation-delay: 5s"></div> | |
| <div class="cloud w-100 h-100 bg-pink-200 top-1/3 left-1/2" style="animation-delay: 6s"></div> | |
| </div> | |
| <!-- Floating Hearts --> | |
| <div class="floating-hearts" id="hearts-container"></div> | |
| <!-- Navigation --> | |
| <nav class="container mx-auto px-6 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-cloud text-3xl pink-neon glow"></i> | |
| <span class="cyber-title text-2xl">CyberFluff</span> | |
| </div> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-white hover:text-pink-400 transition">Home</a> | |
| <a href="#" class="text-white hover:text-blue-400 transition">Features</a> | |
| <a href="#" class="text-white hover:text-purple-400 transition">Products</a> | |
| <a href="#" class="text-white hover:text-pink-400 transition">About</a> | |
| <a href="#" class="text-white hover:text-blue-400 transition">Contact</a> | |
| </div> | |
| <button class="md:hidden text-white"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="container mx-auto px-6 py-20 md:py-32 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="cyber-title text-4xl md:text-6xl mb-6 leading-tight"> | |
| <span class="pink-neon">Super</span> <span class="blue-neon">Fluffy</span> | |
| <span class="purple-neon">Cyber</span> <span class="text-white">Experience</span> | |
| </h1> | |
| <p class="text-xl mb-8 text-gray-300"> | |
| Where cutting-edge technology meets adorable fluffiness. | |
| Our cyber-fluff fusion will melt your heart while blowing your mind! | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="fluffy-btn text-white"> | |
| <i class="fas fa-rocket mr-2"></i> Launch Now | |
| </button> | |
| <button class="px-8 py-3 border-2 border-pink-500 text-pink-400 rounded-full hover:bg-pink-500 hover:text-white transition"> | |
| <i class="fas fa-info-circle mr-2"></i> Learn More | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative"> | |
| <div class="w-64 h-64 md:w-80 md:h-80 bg-gradient-to-br from-pink-500 to-blue-500 rounded-full opacity-20 blur-3xl absolute -z-10 top-10 left-10"></div> | |
| <img src="https://i.imgur.com/JQ9wXWn.png" alt="Cyber Fluffy Mascot" class="fluffy-mascot w-64 h-64 md:w-80 md:h-80"> | |
| <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-purple-500 rounded-full opacity-20 blur-2xl -z-10"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="container mx-auto px-6 py-20"> | |
| <div class="text-center mb-16"> | |
| <h2 class="cyber-title text-3xl md:text-4xl mb-4"> | |
| <span class="pink-neon">Fluffy</span> <span class="blue-neon">Cyber</span> <span class="text-white">Features</span> | |
| </h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Our unique blend of technology and cuteness provides an experience like no other | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="fluffy-card p-8"> | |
| <div class="w-16 h-16 bg-pink-500 bg-opacity-20 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-cloud text-3xl pink-neon glow"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4 neon-text pink-neon">Cloud Fluff</h3> | |
| <p class="text-gray-400"> | |
| Ultra-soft cloud storage that feels like hugging a plushie. Secure, fast, and adorable. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="fluffy-card p-8"> | |
| <div class="w-16 h-16 bg-blue-500 bg-opacity-20 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-shield-alt text-3xl blue-neon glow"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4 neon-text blue-neon">Cuddly Security</h3> | |
| <p class="text-gray-400"> | |
| Protection so warm and fuzzy, hackers won't want to break in. They'll just ask nicely. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="fluffy-card p-8"> | |
| <div class="w-16 h-16 bg-purple-500 bg-opacity-20 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-bolt text-3xl purple-neon glow"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-4 neon-text purple-neon">Lightning Fluff</h3> | |
| <p class="text-gray-400"> | |
| Blazing fast speeds with the softest landing. Like a bunny on a rocket. | |
| </p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Products Section --> | |
| <section class="container mx-auto px-6 py-20 bg-gradient-to-r from-purple-900 to-blue-900 bg-opacity-30 rounded-3xl my-12"> | |
| <div class="text-center mb-16"> | |
| <h2 class="cyber-title text-3xl md:text-4xl mb-4"> | |
| <span class="pink-neon">Our</span> <span class="blue-neon">Fluffy</span> <span class="text-white">Products</span> | |
| </h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> | |
| Choose your perfect blend of tech and tenderness | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Product 1 --> | |
| <div class="fluffy-card p-8 pixel-corners"> | |
| <div class="text-center mb-6"> | |
| <div class="w-24 h-24 bg-pink-500 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-baby text-4xl pink-neon"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-2 neon-text pink-neon">Fluff Lite</h3> | |
| <p class="text-gray-400">For beginners</p> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>Basic cloud storage</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>1 Fluffy mascot</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>Pastel security</span> | |
| </li> | |
| </ul> | |
| <div class="text-center"> | |
| <p class="text-3xl font-bold mb-4">$9.99<span class="text-sm text-gray-400">/month</span></p> | |
| <button class="fluffy-btn w-full">Get Fluffy</button> | |
| </div> | |
| </div> | |
| <!-- Product 2 --> | |
| <div class="fluffy-card p-8 pixel-corners transform scale-105 relative"> | |
| <div class="absolute top-0 right-0 bg-pink-500 text-white px-4 py-1 text-sm font-bold rounded-bl-lg"> | |
| POPULAR | |
| </div> | |
| <div class="text-center mb-6"> | |
| <div class="w-24 h-24 bg-blue-500 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-cat text-4xl blue-neon"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-2 neon-text blue-neon">Fluff Pro</h3> | |
| <p class="text-gray-400">For enthusiasts</p> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>Advanced cloud storage</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>3 Fluffy mascots</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>Neon security</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>Priority support</span> | |
| </li> | |
| </ul> | |
| <div class="text-center"> | |
| <p class="text-3xl font-bold mb-4">$19.99<span class="text-sm text-gray-400">/month</span></p> | |
| <button class="fluffy-btn w-full">Get Fluffier</button> | |
| </div> | |
| </div> | |
| <!-- Product 3 --> | |
| <div class="fluffy-card p-8 pixel-corners"> | |
| <div class="text-center mb-6"> | |
| <div class="w-24 h-24 bg-purple-500 bg-opacity-20 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-crown text-4xl purple-neon"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-2 neon-text purple-neon">Fluff Supreme</h3> | |
| <p class="text-gray-400">For connoisseurs</p> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>Unlimited cloud storage</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>10 Fluffy mascots</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>Holographic security</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>VIP support</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>Fluffy merch</span> | |
| </li> | |
| </ul> | |
| <div class="text-center"> | |
| <p class="text-3xl font-bold mb-4">$49.99<span class="text-sm text-gray-400">/month</span></p> | |
| <button class="fluffy-btn w-full">Get Fluffiest</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="container mx-auto px-6 py-20"> | |
| <div class="text-center mb-16"> | |
| <h2 class="cyber-title text-3xl md:text-4xl mb-4"> | |
| <span class="pink-neon">What</span> <span class="blue-neon">People</span> <span class="text-white">Say</span> | |
| </h2> | |
| <p class="text-xl text-gray-400 max-w-3xl mx-auto"> | |
| Don't just take our word for it - hear from our fluffy family | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="fluffy-card p-8"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://i.imgur.com/JQ9wXWn.png" alt="User" class="w-16 h-16 rounded-full border-2 border-pink-500"> | |
| <div class="ml-4"> | |
| <h4 class="text-xl font-bold">Sarah K.</h4> | |
| <p class="text-pink-400">Digital Artist</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic"> | |
| "I've never felt so secure and comforted by technology before. My files are safe, and my heart is full!" | |
| </p> | |
| <div class="mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="fluffy-card p-8"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://i.imgur.com/JQ9wXWn.png" alt="User" class="w-16 h-16 rounded-full border-2 border-blue-500"> | |
| <div class="ml-4"> | |
| <h4 class="text-xl font-bold">Mark T.</h4> | |
| <p class="text-blue-400">Game Developer</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic"> | |
| "The perfect balance of power and playfulness. My productivity has never been so enjoyable!" | |
| </p> | |
| <div class="mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="fluffy-card p-8"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://i.imgur.com/JQ9wXWn.png" alt="User" class="w-16 h-16 rounded-full border-2 border-purple-500"> | |
| <div class="ml-4"> | |
| <h4 class="text-xl font-bold">Lisa M.</h4> | |
| <p class="text-purple-400">Streamer</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 italic"> | |
| "My viewers love the fluffy mascots that pop up during streams. It's like having digital pets that protect my content!" | |
| </p> | |
| <div class="mt-4 text-yellow-400"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="container mx-auto px-6 py-20 text-center"> | |
| <div class="fluffy-card p-12 bg-gradient-to-r from-pink-900 to-purple-900 bg-opacity-50 rounded-3xl"> | |
| <h2 class="cyber-title text-3xl md:text-5xl mb-6"> | |
| <span class="pink-neon">Ready</span> <span class="blue-neon">to</span> <span class="text-white">Embrace</span> <span class="purple-neon">the</span> <span class="pink-neon">Fluff?</span> | |
| </h2> | |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto mb-8"> | |
| Join thousands of happy users who've discovered the joy of cyber-fluff fusion | |
| </p> | |
| <button class="fluffy-btn text-white px-12 py-4 text-lg"> | |
| <i class="fas fa-paw mr-2"></i> Start Your Fluffy Journey | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black bg-opacity-50 py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-6 md:mb-0"> | |
| <i class="fas fa-cloud text-3xl pink-neon glow"></i> | |
| <span class="cyber-title text-2xl">CyberFluff</span> | |
| </div> | |
| <div class="flex space-x-6 mb-6 md:mb-0"> | |
| <a href="#" class="text-gray-400 hover:text-pink-400 transition"> | |
| <i class="fab fa-twitter text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-blue-400 transition"> | |
| <i class="fab fa-discord text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-purple-400 transition"> | |
| <i class="fab fa-instagram text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-pink-400 transition"> | |
| <i class="fab fa-tiktok text-2xl"></i> | |
| </a> | |
| </div> | |
| <div class="text-gray-500 text-sm"> | |
| © 2023 CyberFluff. All rights reserved. Made with <i class="fas fa-heart text-pink-500"></i> and fluff. | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Floating Mascot Button --> | |
| <button class="fixed bottom-8 right-8 w-16 h-16 bg-pink-500 rounded-full flex items-center justify-center shadow-lg hover:bg-purple-500 transition z-50"> | |
| <i class="fas fa-paw text-2xl text-white"></i> | |
| </button> | |
| <script> | |
| // Create floating hearts | |
| const heartsContainer = document.getElementById('hearts-container'); | |
| for (let i = 0; i < 15; i++) { | |
| const heart = document.createElement('div'); | |
| heart.className = 'heart'; | |
| heart.innerHTML = '<i class="fas fa-heart"></i>'; | |
| heart.style.left = Math.random() * 100 + 'vw'; | |
| heart.style.fontSize = (Math.random() * 20 + 10) + 'px'; | |
| heart.style.animationDuration = (Math.random() * 10 + 10) + 's'; | |
| heart.style.animationDelay = Math.random() * 15 + 's'; | |
| heartsContainer.appendChild(heart); | |
| } | |
| // Simple animation for the mascot | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const mascot = document.querySelector('.fluffy-mascot'); | |
| function animateMascot() { | |
| mascot.style.transform = 'translateY(-20px)'; | |
| setTimeout(() => { | |
| mascot.style.transform = 'translateY(0)'; | |
| }, 1000); | |
| } | |
| setInterval(animateMascot, 3000); | |
| // Button hover effect | |
| const buttons = document.querySelectorAll('.fluffy-btn'); | |
| buttons.forEach(button => { | |
| button.addEventListener('mouseenter', () => { | |
| button.querySelector('i').classList.add('fa-bounce'); | |
| }); | |
| button.addEventListener('mouseleave', () => { | |
| button.querySelector('i').classList.remove('fa-bounce'); | |
| }); | |
| }); | |
| }); | |
| </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=flausch/fluffy-landing" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |