Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tazzy The Nail Tech</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 spin { | |
| 0% { | |
| transform: rotate(0deg); | |
| } | |
| 100% { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| @keyframes drip { | |
| 0% { | |
| transform: translateY(0); | |
| opacity: 1; | |
| } | |
| 100% { | |
| transform: translateY(100px); | |
| opacity: 0; | |
| } | |
| } | |
| .float { | |
| animation: float 4s ease-in-out infinite; | |
| } | |
| .spin { | |
| animation: spin 8s linear infinite; | |
| } | |
| .drip { | |
| position: absolute; | |
| animation: drip 2s linear forwards; | |
| } | |
| .nail-polish { | |
| width: 30px; | |
| height: 50px; | |
| border-radius: 50% 50% 10% 10%; | |
| position: absolute; | |
| } | |
| .nail { | |
| width: 20px; | |
| height: 30px; | |
| background: linear-gradient(to bottom, #FFF5EE, #FFE4E1); | |
| border-radius: 50% 50% 0 0; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| box-shadow: 0 0 5px rgba(0,0,0,0.2); | |
| } | |
| .glitter { | |
| position: absolute; | |
| width: 3px; | |
| height: 3px; | |
| background-color: white; | |
| border-radius: 50%; | |
| opacity: 0.8; | |
| } | |
| .hand { | |
| position: absolute; | |
| width: 100px; | |
| height: 100px; | |
| } | |
| .finger { | |
| position: absolute; | |
| width: 20px; | |
| height: 60px; | |
| background: #FFD1DC; | |
| border-radius: 10px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-black text-pink-500 min-h-screen overflow-hidden"> | |
| <div class="absolute inset-0 overflow-hidden"> | |
| <!-- Background elements --> | |
| <div class="absolute top-1/4 left-1/4 w-20 h-20 rounded-full bg-pink-900 opacity-20 blur-xl"></div> | |
| <div class="absolute top-1/3 right-1/3 w-32 h-32 rounded-full bg-pink-800 opacity-20 blur-xl"></div> | |
| <div class="absolute bottom-1/4 right-1/4 w-24 h-24 rounded-full bg-pink-700 opacity-20 blur-xl"></div> | |
| <!-- Glitter particles --> | |
| <div id="glitter-container"></div> | |
| <!-- Nail polish bottles --> | |
| <div class="absolute top-20 left-20 w-16 h-24 bg-gradient-to-b from-pink-500 to-pink-700 rounded-lg float" style="animation-delay: 0.2s;"> | |
| <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-4 h-6 bg-pink-300 rounded-t-lg"></div> | |
| </div> | |
| <div class="absolute top-40 right-40 w-16 h-24 bg-gradient-to-b from-black to-pink-900 rounded-lg float" style="animation-delay: 0.5s;"> | |
| <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-4 h-6 bg-pink-200 rounded-t-lg"></div> | |
| </div> | |
| <div class="absolute bottom-20 left-40 w-16 h-24 bg-gradient-to-b from-pink-600 to-pink-800 rounded-lg float" style="animation-delay: 0.8s;"> | |
| <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-4 h-6 bg-pink-100 rounded-t-lg"></div> | |
| </div> | |
| <div class="absolute bottom-40 right-20 w-16 h-24 bg-gradient-to-b from-pink-700 to-pink-900 rounded-lg float" style="animation-delay: 1.1s;"> | |
| <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-4 h-6 bg-pink-300 rounded-t-lg"></div> | |
| </div> | |
| <!-- Nail polish drips --> | |
| <div id="drip-container"></div> | |
| <!-- Nails --> | |
| <div id="nail-container"></div> | |
| <!-- Hands with nails --> | |
| <div class="hand top-1/4 left-1/3 transform -rotate-12"> | |
| <div class="finger top-0 left-0"></div> | |
| <div class="finger top-0 left-8"></div> | |
| <div class="finger top-0 left-16"></div> | |
| <div class="finger top-0 left-24"></div> | |
| <div class="finger top-0 left-32"></div> | |
| </div> | |
| <div class="hand bottom-1/4 right-1/3 transform rotate-12"> | |
| <div class="finger top-0 left-0"></div> | |
| <div class="finger top-0 left-8"></div> | |
| <div class="finger top-0 left-16"></div> | |
| <div class="finger top-0 left-24"></div> | |
| <div class="finger top-0 left-32"></div> | |
| </div> | |
| </div> | |
| <div class="relative z-10 min-h-screen flex flex-col items-center justify-center p-8"> | |
| <h1 class="text-6xl md:text-8xl font-bold mb-6 text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-pink-600"> | |
| Tazzy The Nail Tech | |
| </h1> | |
| <p class="text-xl md:text-2xl text-pink-300 mb-8 max-w-2xl text-center"> | |
| Creating stunning nail art that makes you feel fabulous! | |
| </p> | |
| <div class="flex space-x-6"> | |
| <button class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-full transition-all transform hover:scale-105"> | |
| Book Now | |
| </button> | |
| <button class="bg-transparent border-2 border-pink-600 hover:bg-pink-900 text-pink-300 font-bold py-3 px-6 rounded-full transition-all transform hover:scale-105"> | |
| Gallery | |
| </button> | |
| </div> | |
| <div class="mt-12 flex space-x-4"> | |
| <a href="#" class="text-pink-400 hover:text-pink-300 text-2xl"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-pink-400 hover:text-pink-300 text-2xl"> | |
| <i class="fab fa-tiktok"></i> | |
| </a> | |
| <a href="#" class="text-pink-400 hover:text-pink-300 text-2xl"> | |
| <i class="fab fa-facebook"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <script> | |
| // Create glitter particles | |
| function createGlitter() { | |
| const container = document.getElementById('glitter-container'); | |
| const glitter = document.createElement('div'); | |
| glitter.className = 'glitter'; | |
| // Random position | |
| const x = Math.random() * window.innerWidth; | |
| const y = Math.random() * window.innerHeight; | |
| // Random size | |
| const size = Math.random() * 4 + 1; | |
| glitter.style.left = `${x}px`; | |
| glitter.style.top = `${y}px`; | |
| glitter.style.width = `${size}px`; | |
| glitter.style.height = `${size}px`; | |
| glitter.style.opacity = Math.random() * 0.8 + 0.2; | |
| // Random animation | |
| glitter.style.animation = `float ${Math.random() * 3 + 2}s ease-in-out infinite`; | |
| glitter.style.animationDelay = `${Math.random() * 2}s`; | |
| container.appendChild(glitter); | |
| // Remove after animation | |
| setTimeout(() => { | |
| glitter.remove(); | |
| }, 5000); | |
| } | |
| // Create nail polish drips | |
| function createDrip() { | |
| const container = document.getElementById('drip-container'); | |
| const drip = document.createElement('div'); | |
| drip.className = 'drip'; | |
| // Random position at top | |
| const x = Math.random() * window.innerWidth; | |
| // Random color | |
| const colors = ['#FF69B4', '#FF1493', '#DB7093', '#C71585', '#FFC0CB']; | |
| const color = colors[Math.floor(Math.random() * colors.length)]; | |
| // Random width | |
| const width = Math.random() * 10 + 5; | |
| drip.style.left = `${x}px`; | |
| drip.style.top = '-20px'; | |
| drip.style.width = `${width}px`; | |
| drip.style.height = `${Math.random() * 30 + 20}px`; | |
| drip.style.backgroundColor = color; | |
| drip.style.borderRadius = '0 0 10px 10px'; | |
| container.appendChild(drip); | |
| // Remove after animation | |
| setTimeout(() => { | |
| drip.remove(); | |
| }, 2000); | |
| } | |
| // Create floating nails | |
| function createNail() { | |
| const container = document.getElementById('nail-container'); | |
| const nail = document.createElement('div'); | |
| nail.className = 'nail float'; | |
| // Random position | |
| const x = Math.random() * window.innerWidth; | |
| const y = Math.random() * window.innerHeight; | |
| // Random rotation | |
| const rotation = Math.random() * 360; | |
| // Random color | |
| const colors = ['#FF69B4', '#FF1493', '#DB7093', '#C71585', '#FFC0CB', '#000000']; | |
| const color = colors[Math.floor(Math.random() * colors.length)]; | |
| nail.style.left = `${x}px`; | |
| nail.style.top = `${y}px`; | |
| nail.style.transform = `rotate(${rotation}deg)`; | |
| // Create polish on nail | |
| const polish = document.createElement('div'); | |
| polish.className = 'absolute inset-0 rounded-t-full'; | |
| polish.style.backgroundColor = color; | |
| polish.style.opacity = '0.8'; | |
| // Add some french tip style | |
| if (Math.random() > 0.5) { | |
| const tip = document.createElement('div'); | |
| tip.className = 'absolute bottom-0 left-0 right-0 h-1/4 rounded-t-full'; | |
| tip.style.backgroundColor = 'white'; | |
| polish.appendChild(tip); | |
| } | |
| nail.appendChild(polish); | |
| container.appendChild(nail); | |
| // Remove after some time | |
| setTimeout(() => { | |
| nail.remove(); | |
| }, 10000); | |
| } | |
| // Initialize animations | |
| function initAnimations() { | |
| // Create initial elements | |
| for (let i = 0; i < 50; i++) { | |
| createGlitter(); | |
| if (i % 5 === 0) createNail(); | |
| } | |
| // Set intervals for continuous creation | |
| setInterval(createGlitter, 300); | |
| setInterval(createDrip, 500); | |
| setInterval(createNail, 2000); | |
| // Add some polish to the hands | |
| setTimeout(() => { | |
| const hands = document.querySelectorAll('.hand'); | |
| hands.forEach(hand => { | |
| const fingers = hand.querySelectorAll('.finger'); | |
| fingers.forEach(finger => { | |
| const polish = document.createElement('div'); | |
| polish.className = 'absolute top-0 left-0 right-0 h-full rounded-t-full'; | |
| // Random polish style | |
| if (Math.random() > 0.7) { | |
| // Gradient polish | |
| polish.style.background = `linear-gradient(to bottom, ${['#FF69B4', '#FF1493', '#DB7093'][Math.floor(Math.random() * 3)]}, ${['#000000', '#C71585', '#FFC0CB'][Math.floor(Math.random() * 3)]})`; | |
| } else if (Math.random() > 0.5) { | |
| // Solid color with french tip | |
| polish.style.backgroundColor = ['#FF69B4', '#FF1493', '#DB7093', '#C71585', '#FFC0CB'][Math.floor(Math.random() * 5)]; | |
| const tip = document.createElement('div'); | |
| tip.className = 'absolute bottom-0 left-0 right-0 h-1/4 rounded-t-full'; | |
| tip.style.backgroundColor = 'white'; | |
| polish.appendChild(tip); | |
| } else { | |
| // Glitter polish | |
| polish.style.backgroundColor = ['#FF69B4', '#FF1493', '#DB7093'][Math.floor(Math.random() * 3)]; | |
| for (let i = 0; i < 5; i++) { | |
| const glitter = document.createElement('div'); | |
| glitter.className = 'absolute w-1 h-1 rounded-full bg-white'; | |
| glitter.style.left = `${Math.random() * 100}%`; | |
| glitter.style.top = `${Math.random() * 100}%`; | |
| polish.appendChild(glitter); | |
| } | |
| } | |
| finger.appendChild(polish); | |
| }); | |
| }); | |
| }, 1000); | |
| } | |
| // Start animations when page loads | |
| window.addEventListener('load', initAnimations); | |
| </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=yuppythaking/creations" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |