Xoanws/codestream-academy-learn-java-online
0
1<!DOCTYPE html>2<html lang="vi">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Đăng nhập - Học trực tuyến</title>7 <link rel="icon" type="image/x-icon" href="/static/favicon.ico">8 <script src="https://cdn.tailwindcss.com"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script>11 tailwind.config = {12 theme: {13 extend: {14 colors: {15 primary: '#3B82F6',16 secondary: '#1E40AF',17 accent: '#F59E0B'18 }19 }20 }21 }22 </script>23 <style>24 .gradient-bg {25 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);26 }27 .login-card {28 backdrop-filter: blur(10px);29 background: rgba(255, 255, 255, 0.95);30 }31 .floating {32 animation: floating 3s ease-in-out infinite;33 }34 @keyframes floating {35 0%, 100% { transform: translateY(0px); }36 50% { transform: translateY(-10px); }37 }38 </style>39</head>40<body class="gradient-bg min-h-screen flex items-center justify-center p-4">41 <div class="max-w-md w-full space-y-8">42 <!-- Header -->43 <div class="text-center">44 <div class="floating inline-block mb-4">45 <div class="w-16 h-16 bg-white rounded-full flex items-center justify-center shadow-lg">46 <i data-feather="book-open" class="text-primary w-8 h-8"></i>47 </div>48 </div>49 <h2 class="text-3xl font-bold text-white">Chào mừng trở lại</h2>50 <p class="mt-2 text-blue-100">Đăng nhập để tiếp tục học tập</p>51 </div>52 53 <!-- Login Form -->54 <div class="login-card rounded-2xl shadow-2xl p-8">55 <form class="space-y-6">56 <!-- Email Input -->57 <div>58 <label for="email" class="block text-sm font-medium text-gray-700 mb-2">59 <i data-feather="mail" class="w-4 h-4 inline mr-2"></i>60 Email61 </label>62 <input 63 id="email" 64 name="email" 65 type="email" 66 required 67 class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition duration-200"68 placeholder="nhập email của bạn"69 >70 </div>71 72 <!-- Password Input -->73 <div>74 <label for="password" class="block text-sm font-medium text-gray-700 mb-2">75 <i data-feather="lock" class="w-4 h-4 inline mr-2"></i>76 Mật khẩu77 </label>78 <input 79 id="password" 80 name="password" 81 type="password" 82 required 83 class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent transition duration-200"84 placeholder="nhập mật khẩu"85 >86 </div>87 88 <!-- Remember Me & Forgot Password -->89 <div class="flex items-center justify-between">90 <div class="flex items-center">91 <input id="remember" name="remember" type="checkbox" class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">92 <label for="remember" class="ml-2 block text-sm text-gray-700">Ghi nhớ đăng nhập</label>93 </div>94 <a href="#" class="text-sm text-primary hover:text-secondary font-medium">Quên mật khẩu?</a>95 </div>96 97 <!-- Submit Button -->98 <button 99 type="submit" 100 class="w-full bg-primary hover:bg-secondary text-white py-3 px-4 rounded-lg font-semibold transition duration-200 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"101 >102 <i data-feather="log-in" class="w-4 h-4 inline mr-2"></i>103 Đăng nhập104 </button>105 106 <!-- Divider -->107 <div class="relative">108 <div class="absolute inset-0 flex items-center">109 <div class="w-full border-t border-gray-300"></div>110 </div>111 <div class="relative flex justify-center text-sm">112 <span class="px-2 bg-white text-gray-500">hoặc</span>113 </div>114 </div>115 116 <!-- Social Login -->117 <div class="grid grid-cols-2 gap-3">118 <button type="button" class="w-full inline-flex justify-center items-center py-2 px-4 border border-gray-300 rounded-lg shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 transition duration-200">119 <i data-feather="facebook" class="w-4 h-4 text-blue-600 mr-2"></i>120 Facebook121 </button>122 <button type="button" class="w-full inline-flex justify-center items-center py-2 px-4 border border-gray-300 rounded-lg shadow-sm bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 transition duration-200">123 <i data-feather="google" class="w-4 h-4 text-red-500 mr-2"></i>124 Google125 </button>126 </div>127 128 <!-- Register Link -->129 <div class="text-center">130 <p class="text-sm text-gray-600">131 Chưa có tài khoản?132 <a href="#" class="font-medium text-primary hover:text-secondary">Đăng ký ngay</a>133 </p>134 </div>135 </form>136 </div>137 138 <!-- Footer -->139 <div class="text-center">140 <p class="text-blue-100 text-sm">© 2024 Học Trực Tuyến. Tất cả quyền được bảo lưu.</p>141 </div>142 </div>143 144 <script>145 feather.replace();146 147 // Form submission handling148 document.querySelector('form').addEventListener('submit', function(e) {149 e.preventDefault();150 const email = document.getElementById('email').value;151 const password = document.getElementById('password').value;152 153 // Simulate login process154 const submitBtn = this.querySelector('button[type="submit"]');155 const originalText = submitBtn.innerHTML;156 157 submitBtn.innerHTML = '<i data-feather="loader" class="w-4 h-4 inline mr-2 animate-spin"></i> Đang đăng nhập...';158 submitBtn.disabled = true;159 160 // Simulate API call161 setTimeout(() => {162 submitBtn.innerHTML = originalText;163 submitBtn.disabled = false;164 feather.replace();165 166 // Here you would typically redirect or show success message167 alert('Đăng nhập thành công!');168 }, 2000);169 });170 </script>171</body>172</html>