WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CoffeeShop L.A Glass Design | Login</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> .glass-effect { backdrop-filter: blur(5px); background: rgba(20, 20, 20, 0.35); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); border: 1px solid rgba(255, 255, 255, 0.18); } .gradient-text { background: linear-gradient(90deg, #f5d7a1, #d4a54e); -webkit-background-clip: text; background-clip: text; color: transparent; } .coffee-drops { position: relative; } .coffee-drops::after { content: ''; position: absolute; width: 120%; height: 40px; background: radial-gradient(ellipse at center, rgba(20,20,20,0.15) 0%, rgba(0,0,0,0) 70%); bottom: -10px; left: -10%; border-radius: 50%; opacity: 0; transition: opacity 0.3s ease; } .coffee-drops:hover::after { opacity: 1; } </style> </head> <body class="bg-[url('https://images.unsplash.com/photo-1507133750040-46a0a0e12976?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80')] bg-cover bg-center min-h-screen flex items-center justify-center p-4"> <div class="relative w-full max-w-md"> <!-- Coffee steam animation --> <div class="absolute -top-24 left-1/2 transform -translate-x-1/2 w-32 h-24 flex justify-center"> <span class="steam absolute bg-white rounded-full opacity-0 animation-steam"></span> <span class="steam absolute bg-white rounded-full opacity-0 animation-steam animation-delay-200"></span> <span class="steam absolute bg-white rounded-full opacity-0 animation-steam animation-delay-400"></span> </div> <!-- Main login card --> <div class="glass-effect rounded-2xl overflow-hidden transition-all duration-500 hover:shadow-xl hover:backdrop-filter hover:blur-[6px]"> <div class="p-8"> <div class="text-center mb-8"> <h1 class="text-4xl font-bold gradient-text mb-2">CoffeeShop</h1> <p class="text-white/80">L.A Glass Design</p> <div class="mt-4 flex justify-center space-x-2"> <span class="w-3 h-3 rounded-full bg-amber-600"></span> <span class="w-3 h-3 rounded-full bg-amber-500"></span> <span class="w-3 h-3 rounded-full bg-amber-400"></span> </div> </div> <form id="loginForm" class="space-y-6"> <div> <label for="email" class="block text-sm font-medium text-white/70 mb-1">Email</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <i class="fas fa-envelope text-amber-400"></i> </div> <input id="email" name="email" type="email" required class="bg-black/20 text-white placeholder-amber-100/40 w-full pl-10 pr-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-transparent border border-white/10" placeholder="your@email.com"> </div> </div> <div> <label for="password" class="block text-sm font-medium text-white/70 mb-1">Password</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <i class="fas fa-key text-amber-400"></i> </div> <input id="password" name="password" type="password" required class="bg-black/20 text-white placeholder-amber-100/40 w-full pl-10 pr-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-transparent border border-white/10" placeholder="••••••••"> <button type="button" id="togglePassword" class="absolute right-3 top-3 text-amber-300 hover:text-amber-100"> <i class="fas fa-eye"></i> </button> </div> </div> <div class="flex items-center justify-between"> <div class="flex items-center"> <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 rounded bg-black/20 border-white/30 focus:ring-amber-400 text-amber-400 cursor-pointer"> <label for="remember-me" class="ml-2 block text-sm text-white/70 cursor-pointer">Remember me</label> </div> <div class="text-sm"> <a href="#" class="font-medium text-amber-300 hover:text-amber-200 transition-colors">Forgot password?</a> </div> </div> <button type="submit" class="coffee-drops group w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-amber-600 to-amber-500 hover:from-amber-500 hover:to-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-400 transition-all duration-300 transform hover:scale-[1.02]"> <span class="relative"> Sign in <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300 ease-out"></span> </span> </button> <div class="w-full h-px bg-gradient-to-r from-transparent via-amber-400/30 to-transparent my-4"></div> <button type="button" class="w-full flex items-center justify-center space-x-2 py-3 px-4 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-white transition-colors"> <i class="fab fa-google text-red-400"></i> <span>Sign in with Google</span> </button> <button type="button" class="w-full flex items-center justify-center space-x-2 py-3 px-4 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-white transition-colors"> <i class="fab fa-apple"></i> <span>Sign in with Apple</span> </button> </form> <p class="mt-6 text-center text-sm text-white/60"> Don't have an account? <a href="#" class="text-amber-300 hover:text-amber-200 transition-colors">Sign up</a> </p> </div> <div class="bg-black/20 px-8 py-4"> <div class="flex justify-between text-xs text-white/50"> <span>© 2023 CoffeeShop</span> <div class="space-x-4"> <a href="#" class="hover:text-white/70 transition-colors">Terms</a> <a href="#" class="hover:text-white/70 transition-colors">Privacy</a> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Password toggle functionality const togglePassword = document.getElementById('togglePassword'); const password = document.getElementById('password'); togglePassword.addEventListener('click', function() { const type = password.getAttribute('type') === 'password' ? 'text' : 'password'; password.setAttribute('type', type); togglePassword.innerHTML = type === 'password' ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>'; }); // Form submission const loginForm = document.getElementById('loginForm'); loginForm.addEventListener('submit', function(e) { e.preventDefault(); // Get form values const email = document.getElementById('email').value; const password = document.getElementById('password').value; const rememberMe = document.getElementById('remember-me').checked; // Here you would typically send this data to your server console.log('Login attempt:', { email, password, rememberMe }); // For demo, just show a success message alert(`Welcome back! (This is a demo)\nEmail: ${email}`); // Reset form loginForm.reset(); }); // Steam animation (just for visual effect) const steamElements = document.querySelectorAll('.steam'); steamElements.forEach(el => { el.style.animation = 'steamAnimation 3s infinite'; }); }); </script> <style> @keyframes steamAnimation { 0% { transform: translateY(0) scale(0.2); opacity: 0; width: 6px; height: 6px; } 20% { opacity: 0.5; transform: translateY(-10px) scale(0.5); width: 10px; height: 10px; } 70% { opacity: 0; transform: translateY(-30px) scale(1); width: 16px; height: 16px; } 100% { opacity: 0; transform: translateY(-40px) scale(1.2); width: 20px; height: 20px; } } .animation-steam { animation: steamAnimation 3s infinite ease-out; } .animation-delay-200 { animation-delay: 0.2s; } .animation-delay-400 { animation-delay: 0.4s; } </style> </body> </html>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */
Validating your code, please wait...
HTML
CSS
JS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CoffeeShop L.A Glass Design | Login</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> .glass-effect { backdrop-filter: blur(5px); background: rgba(20, 20, 20, 0.35); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15); border: 1px solid rgba(255, 255, 255, 0.18); } .gradient-text { background: linear-gradient(90deg, #f5d7a1, #d4a54e); -webkit-background-clip: text; background-clip: text; color: transparent; } .coffee-drops { position: relative; } .coffee-drops::after { content: ''; position: absolute; width: 120%; height: 40px; background: radial-gradient(ellipse at center, rgba(20,20,20,0.15) 0%, rgba(0,0,0,0) 70%); bottom: -10px; left: -10%; border-radius: 50%; opacity: 0; transition: opacity 0.3s ease; } .coffee-drops:hover::after { opacity: 1; } </style> </head> <body class="bg-[url('https://images.unsplash.com/photo-1507133750040-46a0a0e12976?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80')] bg-cover bg-center min-h-screen flex items-center justify-center p-4"> <div class="relative w-full max-w-md"> <!-- Coffee steam animation --> <div class="absolute -top-24 left-1/2 transform -translate-x-1/2 w-32 h-24 flex justify-center"> <span class="steam absolute bg-white rounded-full opacity-0 animation-steam"></span> <span class="steam absolute bg-white rounded-full opacity-0 animation-steam animation-delay-200"></span> <span class="steam absolute bg-white rounded-full opacity-0 animation-steam animation-delay-400"></span> </div> <!-- Main login card --> <div class="glass-effect rounded-2xl overflow-hidden transition-all duration-500 hover:shadow-xl hover:backdrop-filter hover:blur-[6px]"> <div class="p-8"> <div class="text-center mb-8"> <h1 class="text-4xl font-bold gradient-text mb-2">CoffeeShop</h1> <p class="text-white/80">L.A Glass Design</p> <div class="mt-4 flex justify-center space-x-2"> <span class="w-3 h-3 rounded-full bg-amber-600"></span> <span class="w-3 h-3 rounded-full bg-amber-500"></span> <span class="w-3 h-3 rounded-full bg-amber-400"></span> </div> </div> <form id="loginForm" class="space-y-6"> <div> <label for="email" class="block text-sm font-medium text-white/70 mb-1">Email</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <i class="fas fa-envelope text-amber-400"></i> </div> <input id="email" name="email" type="email" required class="bg-black/20 text-white placeholder-amber-100/40 w-full pl-10 pr-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-transparent border border-white/10" placeholder="your@email.com"> </div> </div> <div> <label for="password" class="block text-sm font-medium text-white/70 mb-1">Password</label> <div class="relative"> <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> <i class="fas fa-key text-amber-400"></i> </div> <input id="password" name="password" type="password" required class="bg-black/20 text-white placeholder-amber-100/40 w-full pl-10 pr-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-amber-400 focus:border-transparent border border-white/10" placeholder="••••••••"> <button type="button" id="togglePassword" class="absolute right-3 top-3 text-amber-300 hover:text-amber-100"> <i class="fas fa-eye"></i> </button> </div> </div> <div class="flex items-center justify-between"> <div class="flex items-center"> <input id="remember-me" name="remember-me" type="checkbox" class="h-4 w-4 rounded bg-black/20 border-white/30 focus:ring-amber-400 text-amber-400 cursor-pointer"> <label for="remember-me" class="ml-2 block text-sm text-white/70 cursor-pointer">Remember me</label> </div> <div class="text-sm"> <a href="#" class="font-medium text-amber-300 hover:text-amber-200 transition-colors">Forgot password?</a> </div> </div> <button type="submit" class="coffee-drops group w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-sm font-medium text-white bg-gradient-to-r from-amber-600 to-amber-500 hover:from-amber-500 hover:to-amber-400 focus:outline-none focus:ring-2 focus:ring-amber-400 transition-all duration-300 transform hover:scale-[1.02]"> <span class="relative"> Sign in <span class="absolute -bottom-1 left-0 w-0 h-0.5 bg-white group-hover:w-full transition-all duration-300 ease-out"></span> </span> </button> <div class="w-full h-px bg-gradient-to-r from-transparent via-amber-400/30 to-transparent my-4"></div> <button type="button" class="w-full flex items-center justify-center space-x-2 py-3 px-4 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-white transition-colors"> <i class="fab fa-google text-red-400"></i> <span>Sign in with Google</span> </button> <button type="button" class="w-full flex items-center justify-center space-x-2 py-3 px-4 rounded-lg bg-white/5 hover:bg-white/10 border border-white/10 text-white transition-colors"> <i class="fab fa-apple"></i> <span>Sign in with Apple</span> </button> </form> <p class="mt-6 text-center text-sm text-white/60"> Don't have an account? <a href="#" class="text-amber-300 hover:text-amber-200 transition-colors">Sign up</a> </p> </div> <div class="bg-black/20 px-8 py-4"> <div class="flex justify-between text-xs text-white/50"> <span>© 2023 CoffeeShop</span> <div class="space-x-4"> <a href="#" class="hover:text-white/70 transition-colors">Terms</a> <a href="#" class="hover:text-white/70 transition-colors">Privacy</a> </div> </div> </div> </div> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Password toggle functionality const togglePassword = document.getElementById('togglePassword'); const password = document.getElementById('password'); togglePassword.addEventListener('click', function() { const type = password.getAttribute('type') === 'password' ? 'text' : 'password'; password.setAttribute('type', type); togglePassword.innerHTML = type === 'password' ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>'; }); // Form submission const loginForm = document.getElementById('loginForm'); loginForm.addEventListener('submit', function(e) { e.preventDefault(); // Get form values const email = document.getElementById('email').value; const password = document.getElementById('password').value; const rememberMe = document.getElementById('remember-me').checked; // Here you would typically send this data to your server console.log('Login attempt:', { email, password, rememberMe }); // For demo, just show a success message alert(`Welcome back! (This is a demo)\nEmail: ${email}`); // Reset form loginForm.reset(); }); // Steam animation (just for visual effect) const steamElements = document.querySelectorAll('.steam'); steamElements.forEach(el => { el.style.animation = 'steamAnimation 3s infinite'; }); }); </script> <style> @keyframes steamAnimation { 0% { transform: translateY(0) scale(0.2); opacity: 0; width: 6px; height: 6px; } 20% { opacity: 0.5; transform: translateY(-10px) scale(0.5); width: 10px; height: 10px; } 70% { opacity: 0; transform: translateY(-30px) scale(1); width: 16px; height: 16px; } 100% { opacity: 0; transform: translateY(-40px) scale(1.2); width: 20px; height: 20px; } } .animation-steam { animation: steamAnimation 3s infinite ease-out; } .animation-delay-200 { animation-delay: 0.2s; } .animation-delay-400 { animation-delay: 0.4s; } </style> </body> </html>
/* Replace with your CSS Code (Leave empty if not needed) */
/* Replace with your JS Code (Leave empty if not needed) */