Sent21/timetrack-titanium
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Login | ClockWise Chronicles</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://unpkg.com/feather-icons"></script>10 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>11 <style>12 .login-card {13 backdrop-filter: blur(10px);14 background: rgba(255, 255, 255, 0.05);15 border: 1px solid rgba(255, 255, 255, 0.1);16 }17 .input-field {18 background: rgba(255, 255, 255, 0.05);19 border: 1px solid rgba(255, 255, 255, 0.2);20 }21 .input-field:focus {22 border-color: rgba(99, 102, 241, 0.8);23 }24 </style>25</head>26<body class="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 text-white">27 <div id="vanta-bg" class="fixed inset-0 z-0"></div>28 29 <div class="relative z-10 flex items-center justify-center min-h-screen px-4 py-12">30 <div class="login-card w-full max-w-md p-8 rounded-xl shadow-2xl">31 <div class="text-center mb-8">32 <div class="flex justify-center mb-4">33 <i data-feather="clock" class="w-12 h-12 text-indigo-400"></i>34 </div>35 <h2 class="text-3xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-500 mb-2">36 ClockWise Chronicles37 </h2>38 <p class="text-gray-400">Track your attendance with precision</p>39 </div>40 41 <form class="space-y-6">42 <div>43 <label for="email" class="block text-sm font-medium text-gray-300 mb-2">Email</label>44 <div class="relative">45 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">46 <i data-feather="mail" class="h-5 w-5 text-gray-400"></i>47 </div>48 <input id="email" name="email" type="email" autocomplete="email" required 49 class="input-field pl-10 w-full px-4 py-3 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500">50 </div>51 </div>52 53 <div>54 <label for="password" class="block text-sm font-medium text-gray-300 mb-2">Password</label>55 <div class="relative">56 <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">57 <i data-feather="lock" class="h-5 w-5 text-gray-400"></i>58 </div>59 <input id="password" name="password" type="password" autocomplete="current-password" required 60 class="input-field pl-10 w-full px-4 py-3 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500">61 </div>62 </div>63 64 <div class="flex items-center justify-between">65 <div class="flex items-center">66 <input id="remember-me" name="remember-me" type="checkbox" 67 class="h-4 w-4 rounded bg-gray-700 border-gray-600 text-indigo-600 focus:ring-indigo-500">68 <label for="remember-me" class="ml-2 block text-sm text-gray-300">Remember me</label>69 </div>70 71 <div class="text-sm">72 <a href="#" class="font-medium text-indigo-400 hover:text-indigo-300">Forgot password?</a>73 </div>74 </div>75 76 <div>77 <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition duration-150">78 Sign in79 </button>80 </div>81 </form>82 83 <div class="mt-6 text-center">84 <p class="text-sm text-gray-400">85 Don't have an account? 86 <a href="#" class="font-medium text-indigo-400 hover:text-indigo-300">Sign up</a> or 87 <a href="admin.html" class="font-medium text-indigo-400 hover:text-indigo-300">Admin Login</a>88 </p>89</div>90 </div>91 </div>92 93 <script>94 // Initialize Vanta.js background95 VANTA.NET({96 el: "#vanta-bg",97 mouseControls: true,98 touchControls: true,99 gyroControls: false,100 minHeight: 200.00,101 minWidth: 200.00,102 scale: 1.00,103 scaleMobile: 1.00,104 color: 0x4f46e5,105 backgroundColor: 0x111827,106 points: 10.00,107 maxDistance: 20.00,108 spacing: 15.00109 });110 111 // Initialize feather icons112 feather.replace();113 </script>114</body>115</html>