WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="en" class="dark"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Spooky Signup Spectacle 🎃</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> <script src="https://unpkg.com/feather-icons"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Eater&family=Creepster&display=swap'); body { background-color: #111827; background-image: url('http://static.photos/holiday/1200x630/42'); background-size: cover; background-blend-mode: overlay; } .spooky-text { font-family: 'Eater', cursive; text-shadow: 0 0 10px #e53935, 0 0 20px #e53935; } .creepy-text { font-family: 'Creepster', cursive; } .pumpkin-bg { background-color: #ed8936; } .witch-bg { background-color: #9f7aea; } .spooky-bounce { animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } .flicker { animation: flicker 2s infinite alternate; } @keyframes flicker { 0% { opacity: 0.9; } 20% { opacity: 0.8; } 40% { opacity: 0.95; } 60% { opacity: 0.85; } 80% { opacity: 0.9; } 100% { opacity: 1; } } .form-input { transition: all 0.3s ease; background-color: rgba(17, 24, 39, 0.7); border-color: #ed8936; } .form-input:focus { box-shadow: 0 0 0 3px rgba(237, 137, 54, 0.5); } @keyframes fly { 0% { transform: translateX(-100px) translateY(0) rotate(0deg); } 100% { transform: translateX(calc(100vw + 100px)) translateY(calc(100vh * var(--random-y))) rotate(360deg); } } .animate-fly { animation: fly linear forwards; } </style> </head> <body class="min-h-screen flex items-center justify-center p-4"> <div class="w-full max-w-md mx-auto"> <div class="bg-gray-900 bg-opacity-90 rounded-xl shadow-2xl overflow-hidden border border-orange-500 relative"> <!-- Spooky animated cobwebs --> <div class="absolute top-0 left-0 w-full h-full pointer-events-none opacity-30"> <div class="absolute top-2 left-8 w-16 h-16 border-2 border-gray-500 border-opacity-50 rounded-full transform rotate-45"></div> <div class="absolute top-16 right-4 w-12 h-12 border-2 border-gray-500 border-opacity-50 rounded-full transform rotate-15"></div> <div class="absolute bottom-8 left-20 w-20 h-20 border-2 border-gray-500 border-opacity-50 rounded-full transform -rotate-15"></div> </div> <!-- Tabs --> <div class="flex border-b border-gray-800"> <button id="login-tab" class="flex-1 py-4 px-6 text-center font-bold text-orange-500 border-b-2 border-orange-500"> <i data-feather="skull" class="inline mr-2"></i> Spooky Login </button> <button id="signup-tab" class="flex-1 py-4 px-6 text-center font-bold text-purple-500"> <i data-feather="coffin" class="inline mr-2"></i> Creepy Signup </button> </div> <!-- Login Form --> <div id="login-form" class="p-8"> <div class="mb-10 text-center"> <h1 class="text-4xl font-bold mb-2 spooky-text text-orange-500">BOO!</h1> <p class="text-gray-400 creepy-text">Enter if you dare...</p> </div> <form> <div class="mb-6"> <label for="login-username" class="block text-sm font-medium text-gray-300 mb-1 creepy-text">Ghostly Username</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <i data-feather="user" class="text-orange-500"></i> </div> <input id="login-username" type="text" class="w-full pl-10 pr-3 py-3 rounded-lg form-input text-white" placeholder="Enter your haunted handle"> </div> </div> <div class="mb-8"> <label for="login-password" class="block text-sm font-medium text-gray-300 mb-1 creepy-text">Eerie Password</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <i data-feather="lock" class="text-orange-500"></i> </div> <input id="login-password" type="password" class="w-full pl-10 pr-3 py-3 rounded-lg form-input text-white" placeholder="••••••••"> </div> </div> <div class="mb-6"> <label class="inline-flex items-center"> <input type="checkbox" class="form-checkbox rounded text-orange-500 bg-gray-800 border-gray-600"> <span class="ml-2 text-sm text-gray-300 creepy-text">Remember this haunted device</span> </label> </div> <button type="submit" class="w-full py-3 px-4 rounded-lg bg-orange-600 hover:bg-orange-700 text-white font-bold transition duration-200 mb-4 creepy-text flicker"> <i data-feather="zap" class="inline mr-2"></i> Summon Me In </button> <div class="text-center"> <a href="#" class="text-sm text-orange-400 hover:text-orange-300 creepy-text">Forgotten your spectral password?</a> </div> </form> </div> <!-- Signup Form --> <div id="signup-form" class="p-8 hidden"> <div class="mb-10 text-center"> <h1 class="text-4xl font-bold mb-2 spooky-text text-purple-500">JOIN US</h1> <p class="text-gray-400 creepy-text">...if you dare</p> </div> <form> <div class="mb-4"> <label for="signup-name" class="block text-sm font-medium text-gray-300 mb-1 creepy-text">Full Ghoulish Name</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <i data-feather="user-plus" class="text-purple-500"></i> </div> <input id="signup-name" type="text" class="w-full pl-10 pr-3 py-3 rounded-lg form-input text-white" placeholder="Your scariest name"> </div> </div> <div class="mb-4"> <label for="signup-email" class="block text-sm font-medium text-gray-300 mb-1 creepy-text">Haunted Email</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <i data-feather="mail" class="text-purple-500"></i> </div> <input id="signup-email" type="email" class="w-full pl-10 pr-3 py-3 rounded-lg form-input text-white" placeholder="ghost@example.com"> </div> </div> <div class="mb-4"> <label for="signup-username" class="block text-sm font-medium text-gray-300 mb-1 creepy-text">Cursed Username</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <i data-feather="user" class="text-purple-500"></i> </div> <input id="signup-username" type="text" class="w-full pl-10 pr-3 py-3 rounded-lg form-input text-white" placeholder="Enter a spine-chilling username"> </div> </div> <div class="mb-4"> <label for="signup-password" class="block text-sm font-medium text-gray-300 mb-1 creepy-text">Supernatural Password</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <i data-feather="lock" class="text-purple-500"></i> </div> <input id="signup-password" type="password" class="w-full pl-10 pr-3 py-3 rounded-lg form-input text-white" placeholder="••••••••"> </div> </div> <div class="mb-6"> <label for="signup-password-confirm" class="block text-sm font-medium text-gray-300 mb-1 creepy-text">Confirm Spectral Password</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <i data-feather="lock" class="text-purple-500"></i> </div> <input id="signup-password-confirm" type="password" class="w-full pl-10 pr-3 py-3 rounded-lg form-input text-white" placeholder="••••••••"> </div> </div> <div class="mb-6"> <label class="inline-flex items-center"> <input type="checkbox" class="form-checkbox rounded text-purple-500 bg-gray-800 border-gray-600"> <span class="ml-2 text-sm text-gray-300 creepy-text">I accept the <a href="#" class="text-purple-400 hover:text-purple-300">Dark Arts Agreement</a></span> </label> </div> <button type="submit" class="w-full py-3 px-4 rounded-lg bg-purple-600 hover:bg-purple-700 text-white font-bold transition duration-200 mb-4 creepy-text flicker"> <i data-feather="hexagon" class="inline mr-2"></i> Complete Ritual </button> </form> </div> <!-- Floating animated pumpkin near footer --> <div class="absolute -bottom-6 -left-6 w-16 h-16 pumpkin-bg rounded-full flex items-center justify-center spooky-bounce"> <i data-feather="moon" class="text-gray-900"></i> </div> <!-- Floating animated witch hat near footer --> <div class="absolute -bottom-6 -right-6 w-16 h-16 witch-bg flex items-center justify-center spooky-bounce"> <i data-feather="cloud" class="text-gray-900"></i> </div> </div> <div class="text-center mt-8"> <p class="text-gray-500 text-sm creepy-text">Access granted only to those who believe...</p> </div> </div> <script> feather.replace(); // Tab switching const loginTab = document.getElementById('login-tab'); const signupTab = document.getElementById('signup-tab'); const loginForm = document.getElementById('login-form'); const signupForm = document.getElementById('signup-form'); loginTab.addEventListener('click', function() { loginTab.classList.add('border-orange-500', 'text-orange-500'); loginTab.classList.remove('text-purple-500'); signupTab.classList.remove('border-purple-500', 'text-orange-500'); signupTab.classList.add('text-purple-500'); loginForm.classList.remove('hidden'); signupForm.classList.add('hidden'); }); signupTab.addEventListener('click', function() { signupTab.classList.add('border-purple-500', 'text-purple-500'); signupTab.classList.remove('text-orange-500'); loginTab.classList.remove('border-orange-500', 'text-purple-500'); loginTab.classList.add('text-orange-500'); signupForm.classList.remove('hidden'); loginForm.classList.add('hidden'); }); // Spooky sound effects const inputs = document.querySelectorAll('input'); inputs.forEach(input => { input.addEventListener('focus', () => { const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-creepy-horror-laugh-14.mp3'); audio.volume = 0.2; audio.play().catch(e => console.log("Audio playback failed:", e)); }); }); // Random bat flies across screen occasionally function spawnBat() { const bat = document.createElement('div'); bat.innerHTML = '<i data-feather="triangle" class="text-gray-400 rotate-90"></i>'; bat.className = 'absolute top-0 left-0 animate-fly pointer-events-none'; bat.style.left = `-100px`; bat.style.top = `${Math.random() * window.innerHeight}px`; bat.style.setProperty('--random-y', Math.random() * 2 - 1); bat.style.animationDuration = `${Math.random() * 3 + 2}s`; document.body.appendChild(bat); feather.replace(); setTimeout(() => { if (bat.parentNode) { bat.remove(); } }, 5000); } setInterval(spawnBat, 8000); setTimeout(spawnBat, 2000); </script> </body> </html>
<!-- Replace with your CSS Code (Leave empty if not needed) -->
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Open Advanced Editor
HTML
CSS
JS
<!DOCTYPE html> <html lang="en" class="dark"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Spooky Signup Spectacle 🎃</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> <script src="https://unpkg.com/feather-icons"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Eater&family=Creepster&display=swap'); body { background-color: #111827; background-image: url('http://static.photos/holiday/1200x630/42'); background-size: cover; background-blend-mode: overlay; } .spooky-text { font-family: 'Eater', cursive; text-shadow: 0 0 10px #e53935, 0 0 20px #e53935; } .creepy-text { font-family: 'Creepster', cursive; } .pumpkin-bg { background-color: #ed8936; } .witch-bg { background-color: #9f7aea; } .spooky-bounce { animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } } .flicker { animation: flicker 2s infinite alternate; } @keyframes flicker { 0% { opacity: 0.9; } 20% { opacity: 0.8; } 40% { opacity: 0.95; } 60% { opacity: 0.85; } 80% { opacity: 0.9; } 100% { opacity: 1; } } .form-input { transition: all 0.3s ease; background-color: rgba(17, 24, 39, 0.7); border-color: #ed8936; } .form-input:focus { box-shadow: 0 0 0 3px rgba(237, 137, 54, 0.5); } @keyframes fly { 0% { transform: translateX(-100px) translateY(0) rotate(0deg); } 100% { transform: translateX(calc(100vw + 100px)) translateY(calc(100vh * var(--random-y))) rotate(360deg); } } .animate-fly { animation: fly linear forwards; } </style> </head> <body class="min-h-screen flex items-center justify-center p-4"> <div class="w-full max-w-md mx-auto"> <div class="bg-gray-900 bg-opacity-90 rounded-xl shadow-2xl overflow-hidden border border-orange-500 relative"> <!-- Spooky animated cobwebs --> <div class="absolute top-0 left-0 w-full h-full pointer-events-none opacity-30"> <div class="absolute top-2 left-8 w-16 h-16 border-2 border-gray-500 border-opacity-50 rounded-full transform rotate-45"></div> <div class="absolute top-16 right-4 w-12 h-12 border-2 border-gray-500 border-opacity-50 rounded-full transform rotate-15"></div> <div class="absolute bottom-8 left-20 w-20 h-20 border-2 border-gray-500 border-opacity-50 rounded-full transform -rotate-15"></div> </div> <!-- Tabs --> <div class="flex border-b border-gray-800"> <button id="login-tab" class="flex-1 py-4 px-6 text-center font-bold text-orange-500 border-b-2 border-orange-500"> <i data-feather="skull" class="inline mr-2"></i> Spooky Login </button> <button id="signup-tab" class="flex-1 py-4 px-6 text-center font-bold text-purple-500"> <i data-feather="coffin" class="inline mr-2"></i> Creepy Signup </button> </div> <!-- Login Form --> <div id="login-form" class="p-8"> <div class="mb-10 text-center"> <h1 class="text-4xl font-bold mb-2 spooky-text text-orange-500">BOO!</h1> <p class="text-gray-400 creepy-text">Enter if you dare...</p> </div> <form> <div class="mb-6"> <label for="login-username" class="block text-sm font-medium text-gray-300 mb-1 creepy-text">Ghostly Username</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <i data-feather="user" class="text-orange-500"></i> </div> <input id="login-username" type="text" class="w-full pl-10 pr-3 py-3 rounded-lg form-input text-white" placeholder="Enter your haunted handle"> </div> </div> <div class="mb-8"> <label for="login-password" class="block text-sm font-medium text-gray-300 mb-1 creepy-text">Eerie Password</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <i data-feather="lock" class="text-orange-500"></i> </div> <input id="login-password" type="password" class="w-full pl-10 pr-3 py-3 rounded-lg form-input text-white" placeholder="••••••••"> </div> </div> <div class="mb-6"> <label class="inline-flex items-center"> <input type="checkbox" class="form-checkbox rounded text-orange-500 bg-gray-800 border-gray-600"> <span class="ml-2 text-sm text-gray-300 creepy-text">Remember this haunted device</span> </label> </div> <button type="submit" class="w-full py-3 px-4 rounded-lg bg-orange-600 hover:bg-orange-700 text-white font-bold transition duration-200 mb-4 creepy-text flicker"> <i data-feather="zap" class="inline mr-2"></i> Summon Me In </button> <div class="text-center"> <a href="#" class="text-sm text-orange-400 hover:text-orange-300 creepy-text">Forgotten your spectral password?</a> </div> </form> </div> <!-- Signup Form --> <div id="signup-form" class="p-8 hidden"> <div class="mb-10 text-center"> <h1 class="text-4xl font-bold mb-2 spooky-text text-purple-500">JOIN US</h1> <p class="text-gray-400 creepy-text">...if you dare</p> </div> <form> <div class="mb-4"> <label for="signup-name" class="block text-sm font-medium text-gray-300 mb-1 creepy-text">Full Ghoulish Name</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <i data-feather="user-plus" class="text-purple-500"></i> </div> <input id="signup-name" type="text" class="w-full pl-10 pr-3 py-3 rounded-lg form-input text-white" placeholder="Your scariest name"> </div> </div> <div class="mb-4"> <label for="signup-email" class="block text-sm font-medium text-gray-300 mb-1 creepy-text">Haunted Email</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <i data-feather="mail" class="text-purple-500"></i> </div> <input id="signup-email" type="email" class="w-full pl-10 pr-3 py-3 rounded-lg form-input text-white" placeholder="ghost@example.com"> </div> </div> <div class="mb-4"> <label for="signup-username" class="block text-sm font-medium text-gray-300 mb-1 creepy-text">Cursed Username</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <i data-feather="user" class="text-purple-500"></i> </div> <input id="signup-username" type="text" class="w-full pl-10 pr-3 py-3 rounded-lg form-input text-white" placeholder="Enter a spine-chilling username"> </div> </div> <div class="mb-4"> <label for="signup-password" class="block text-sm font-medium text-gray-300 mb-1 creepy-text">Supernatural Password</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <i data-feather="lock" class="text-purple-500"></i> </div> <input id="signup-password" type="password" class="w-full pl-10 pr-3 py-3 rounded-lg form-input text-white" placeholder="••••••••"> </div> </div> <div class="mb-6"> <label for="signup-password-confirm" class="block text-sm font-medium text-gray-300 mb-1 creepy-text">Confirm Spectral Password</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <i data-feather="lock" class="text-purple-500"></i> </div> <input id="signup-password-confirm" type="password" class="w-full pl-10 pr-3 py-3 rounded-lg form-input text-white" placeholder="••••••••"> </div> </div> <div class="mb-6"> <label class="inline-flex items-center"> <input type="checkbox" class="form-checkbox rounded text-purple-500 bg-gray-800 border-gray-600"> <span class="ml-2 text-sm text-gray-300 creepy-text">I accept the <a href="#" class="text-purple-400 hover:text-purple-300">Dark Arts Agreement</a></span> </label> </div> <button type="submit" class="w-full py-3 px-4 rounded-lg bg-purple-600 hover:bg-purple-700 text-white font-bold transition duration-200 mb-4 creepy-text flicker"> <i data-feather="hexagon" class="inline mr-2"></i> Complete Ritual </button> </form> </div> <!-- Floating animated pumpkin near footer --> <div class="absolute -bottom-6 -left-6 w-16 h-16 pumpkin-bg rounded-full flex items-center justify-center spooky-bounce"> <i data-feather="moon" class="text-gray-900"></i> </div> <!-- Floating animated witch hat near footer --> <div class="absolute -bottom-6 -right-6 w-16 h-16 witch-bg flex items-center justify-center spooky-bounce"> <i data-feather="cloud" class="text-gray-900"></i> </div> </div> <div class="text-center mt-8"> <p class="text-gray-500 text-sm creepy-text">Access granted only to those who believe...</p> </div> </div> <script> feather.replace(); // Tab switching const loginTab = document.getElementById('login-tab'); const signupTab = document.getElementById('signup-tab'); const loginForm = document.getElementById('login-form'); const signupForm = document.getElementById('signup-form'); loginTab.addEventListener('click', function() { loginTab.classList.add('border-orange-500', 'text-orange-500'); loginTab.classList.remove('text-purple-500'); signupTab.classList.remove('border-purple-500', 'text-orange-500'); signupTab.classList.add('text-purple-500'); loginForm.classList.remove('hidden'); signupForm.classList.add('hidden'); }); signupTab.addEventListener('click', function() { signupTab.classList.add('border-purple-500', 'text-purple-500'); signupTab.classList.remove('text-orange-500'); loginTab.classList.remove('border-orange-500', 'text-purple-500'); loginTab.classList.add('text-orange-500'); signupForm.classList.remove('hidden'); loginForm.classList.add('hidden'); }); // Spooky sound effects const inputs = document.querySelectorAll('input'); inputs.forEach(input => { input.addEventListener('focus', () => { const audio = new Audio('https://assets.mixkit.co/sfx/preview/mixkit-creepy-horror-laugh-14.mp3'); audio.volume = 0.2; audio.play().catch(e => console.log("Audio playback failed:", e)); }); }); // Random bat flies across screen occasionally function spawnBat() { const bat = document.createElement('div'); bat.innerHTML = '<i data-feather="triangle" class="text-gray-400 rotate-90"></i>'; bat.className = 'absolute top-0 left-0 animate-fly pointer-events-none'; bat.style.left = `-100px`; bat.style.top = `${Math.random() * window.innerHeight}px`; bat.style.setProperty('--random-y', Math.random() * 2 - 1); bat.style.animationDuration = `${Math.random() * 3 + 2}s`; document.body.appendChild(bat); feather.replace(); setTimeout(() => { if (bat.parentNode) { bat.remove(); } }, 5000); } setInterval(spawnBat, 8000); setTimeout(spawnBat, 2000); </script> </body> </html>
<!-- Replace with your CSS Code (Leave empty if not needed) -->
/* Replace with your JS Code (Leave empty if not needed) */
Preview
Validating your code, please wait...