| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>WallFlick - Login</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> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| body { |
| font-family: 'Inter', sans-serif; |
| } |
| .bg-blur { |
| backdrop-filter: blur(8px); |
| background-color: rgba(255, 255, 255, 0.1); |
| } |
| </style> |
| </head> |
| <body class="h-screen overflow-hidden"> |
| <div class="absolute inset-0 bg-gray-900"> |
| <img src="http://static.photos/workspace/1200x630/42" alt="Background" class="w-full h-full object-cover"> |
| </div> |
|
|
| <div class="relative h-full flex items-stretch flex-row-reverse"> |
| <div class="w-[40%] h-full bg-white/20 bg-blur rounded-r-xl shadow-xl p-10 backdrop-blur-lg ml-auto border border-white/30"> |
| <div class="flex justify-center mb-8 mt-10"> |
| <div class="bg-indigo-600/80 p-3 rounded-full backdrop-blur-sm"> |
| <i data-feather="lock" class="text-white w-8 h-8"></i> |
| </div> |
| </div> |
| |
| <h2 class="text-3xl font-bold text-center text-white mb-2">Welcome Back</h2> |
| <p class="text-white/80 text-center mb-8">Login to access your account</p> |
| |
| <form> |
| <div class="mb-5"> |
| <label for="email" class="block text-sm font-medium text-white mb-2">Email Address</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-gray-400"></i> |
| </div> |
| <input type="email" id="email" class="pl-10 w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition duration-200" placeholder="you@example.com"> |
| </div> |
| </div> |
| |
| <div class="mb-5"> |
| <label for="password" class="block text-sm font-medium text-white mb-2">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-gray-400"></i> |
| </div> |
| <input type="password" id="password" class="pl-10 pr-10 w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none transition duration-200" placeholder="••••••••"> |
| <div class="absolute inset-y-0 right-0 pr-3 flex items-center cursor-pointer" onclick="togglePasswordVisibility()"> |
| <i data-feather="eye" id="togglePassword" class="text-gray-400 hover:text-gray-600"></i> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex items-center justify-between mb-6"> |
| <div class="flex items-center"> |
| <input type="checkbox" id="remember" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-white/50 rounded bg-white/20"> |
| <label for="remember" class="ml-2 block text-sm text-white">Remember me</label> |
| </div> |
| <a href="#" class="text-sm text-indigo-600 hover:text-indigo-500">Forgot password?</a> |
| </div> |
| |
| <button type="submit" class="w-full bg-indigo-600/90 hover:bg-indigo-700/90 text-white font-semibold py-3 px-4 rounded-lg shadow-md transition duration-200 flex items-center justify-center transform hover:scale-105 transition-transform backdrop-blur-sm"> |
| <span>Sign In</span> |
| <i data-feather="arrow-right" class="ml-2 w-5 h-5"></i> |
| </button> |
| |
| <div class="mt-6 text-center"> |
| <p class="text-sm text-white/80">Don't have an account? <a href="#" class="text-white font-medium hover:text-white/90">Sign up</a></p> |
| </div> |
| </form> |
| </div> |
| </div> |
|
|
| <script> |
| feather.replace(); |
| |
| function togglePasswordVisibility() { |
| const passwordInput = document.getElementById('password'); |
| const toggleIcon = document.getElementById('togglePassword'); |
| |
| if (passwordInput.type === 'password') { |
| passwordInput.type = 'text'; |
| toggleIcon.setAttribute('data-feather', 'eye-off'); |
| } else { |
| passwordInput.type = 'password'; |
| toggleIcon.setAttribute('data-feather', 'eye'); |
| } |
| feather.replace(); |
| } |
| |
| |
| document.addEventListener('DOMContentLoaded', () => { |
| anime({ |
| targets: '.bg-blur', |
| opacity: [0, 1], |
| translateX: [100, 0], |
| duration: 800, |
| easing: 'easeOutExpo' |
| }); |
| |
| anime({ |
| targets: 'input', |
| opacity: [0, 1], |
| translateY: [20, 0], |
| delay: anime.stagger(100, {start: 300}), |
| duration: 600, |
| easing: 'easeOutBack' |
| }); |
| |
| anime({ |
| targets: 'button', |
| scale: [0.9, 1], |
| opacity: [0, 1], |
| delay: 800, |
| duration: 600, |
| easing: 'easeOutElastic' |
| }); |
| }); |
| |
| |
| setInterval(() => { |
| const categories = ['technology', 'minimal', 'abstract', 'gradient', 'monochrome']; |
| const randomCategory = categories[Math.floor(Math.random() * categories.length)]; |
| const randomSeed = Math.floor(Math.random() * 1000); |
| const bgImage = document.querySelector('img'); |
| |
| anime({ |
| targets: bgImage, |
| opacity: 0, |
| duration: 800, |
| easing: 'easeInOutQuad', |
| complete: function() { |
| bgImage.src = `http://static.photos/workspace/1200x630/${randomSeed}`; |
| bgImage.onload = function() { |
| anime({ |
| targets: bgImage, |
| opacity: [0, 1], |
| duration: 1200, |
| easing: 'easeInOutQuad' |
| }); |
| } |
| } |
| }); |
| }, 30000); |
| </script> |
| </body> |
| </html> |
|
|
