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>ClockWise Chronicles | Attendance System</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 src="https://unpkg.com/feather-icons"></script>11 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>12 <style>13 .time-card {14 backdrop-filter: blur(10px);15 background: rgba(255, 255, 255, 0.1);16 }17 .attendance-btn {18 transition: all 0.3s ease;19 }20 .attendance-btn:hover {21 transform: translateY(-2px);22 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);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 container mx-auto px-4 py-8">30 <!-- Header -->31 <header class="flex justify-between items-center mb-12">32 <div class="flex items-center space-x-2">33 <i data-feather="clock" class="w-8 h-8 text-indigo-400"></i>34 <h1 class="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-indigo-400 to-purple-500">35 ClockWise Chronicles36 </h1>37 </div>38 <div class="flex items-center space-x-4">39 <a href="login.html" class="flex items-center space-x-2 bg-gray-800 hover:bg-gray-700 px-4 py-2 rounded-lg transition">40 <i data-feather="log-in" class="w-5 h-5"></i>41 <span>Login</span>42 </a>43 <a href="admin.html" class="flex items-center space-x-2 bg-indigo-900 hover:bg-indigo-800 px-4 py-2 rounded-lg transition">44 <i data-feather="shield" class="w-5 h-5"></i>45 <span>Admin</span>46 </a>47<button class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">48 <i data-feather="settings" class="w-5 h-5"></i>49 </button>50 </div>51</header>52 53 <!-- Main Content -->54 <main class="grid grid-cols-1 lg:grid-cols-3 gap-8">55 <!-- Time Card -->56 <div class="time-card col-span-1 lg:col-span-2 p-6 rounded-xl border border-gray-700 shadow-lg">57 <div class="flex justify-between items-center mb-6">58 <h2 class="text-xl font-semibold">Today's Attendance</h2>59 <span class="text-sm text-gray-300">Monday, June 5, 2023</span>60 </div>61 62 <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">63 <div class="bg-gray-800 p-6 rounded-lg">64 <h3 class="text-gray-400 mb-2">Clock In</h3>65 <p class="text-3xl font-bold">08:30 AM</p>66 <p class="text-sm text-gray-400 mt-2">On time</p>67 </div>68 <div class="bg-gray-800 p-6 rounded-lg">69 <h3 class="text-gray-400 mb-2">Clock Out</h3>70 <p class="text-3xl font-bold">--:-- --</p>71 <p class="text-sm text-gray-400 mt-2">Pending</p>72 </div>73 </div>74 75 <div class="flex flex-col sm:flex-row gap-4">76 <button class="attendance-btn flex-1 bg-indigo-600 hover:bg-indigo-700 py-4 px-6 rounded-lg text-lg font-medium flex items-center justify-center space-x-2">77 <i data-feather="log-in" class="w-5 h-5"></i>78 <span>Clock In</span>79 </button>80 <button class="attendance-btn flex-1 bg-purple-600 hover:bg-purple-700 py-4 px-6 rounded-lg text-lg font-medium flex items-center justify-center space-x-2">81 <i data-feather="log-out" class="w-5 h-5"></i>82 <span>Clock Out</span>83 </button>84 </div>85 </div>86 87 <!-- Stats Card -->88 <div class="time-card p-6 rounded-xl border border-gray-700 shadow-lg">89 <h2 class="text-xl font-semibold mb-6">This Month</h2>90 91 <div class="space-y-6">92 <div>93 <div class="flex justify-between mb-2">94 <span class="text-gray-400">Work Days</span>95 <span class="font-medium">22/24</span>96 </div>97 <div class="w-full bg-gray-700 rounded-full h-2">98 <div class="bg-indigo-500 h-2 rounded-full" style="width: 91%"></div>99 </div>100 </div>101 102 <div>103 <div class="flex justify-between mb-2">104 <span class="text-gray-400">On Time</span>105 <span class="font-medium">90%</span>106 </div>107 <div class="w-full bg-gray-700 rounded-full h-2">108 <div class="bg-green-500 h-2 rounded-full" style="width: 90%"></div>109 </div>110 </div>111 112 <div>113 <div class="flex justify-between mb-2">114 <span class="text-gray-400">Late Days</span>115 <span class="font-medium">2</span>116 </div>117 <div class="w-full bg-gray-700 rounded-full h-2">118 <div class="bg-yellow-500 h-2 rounded-full" style="width: 8%"></div>119 </div>120 </div>121 122 <div>123 <div class="flex justify-between mb-2">124 <span class="text-gray-400">Overtime</span>125 <span class="font-medium">5h 30m</span>126 </div>127 <div class="w-full bg-gray-700 rounded-full h-2">128 <div class="bg-purple-500 h-2 rounded-full" style="width: 25%"></div>129 </div>130 </div>131 </div>132 133 <button class="w-full mt-8 py-3 px-4 bg-gray-800 hover:bg-gray-700 rounded-lg flex items-center justify-center space-x-2 transition">134 <i data-feather="calendar" class="w-5 h-5"></i>135 <span>View Full History</span>136 </button>137 </div>138 </main>139 140 <!-- Recent Activity -->141 <section class="mt-12">142 <h2 class="text-xl font-semibold mb-6">Recent Activity</h2>143 144 <div class="time-card p-6 rounded-xl border border-gray-700 shadow-lg">145 <div class="overflow-x-auto">146 <table class="w-full">147 <thead>148 <tr class="text-gray-400 border-b border-gray-700">149 <th class="pb-4 text-left">Date</th>150 <th class="pb-4 text-left">Clock In</th>151 <th class="pb-4 text-left">Clock Out</th>152 <th class="pb-4 text-left">Status</th>153 <th class="pb-4 text-left">Hours</th>154 </tr>155 </thead>156 <tbody class="divide-y divide-gray-700">157 <tr>158 <td class="py-4">June 5, 2023</td>159 <td>08:30 AM</td>160 <td>--:-- --</td>161 <td><span class="px-2 py-1 bg-indigo-900 text-indigo-300 rounded-full text-xs">In Progress</span></td>162 <td>-</td>163 </tr>164 <tr>165 <td class="py-4">June 4, 2023</td>166 <td>08:45 AM</td>167 <td>05:30 PM</td>168 <td><span class="px-2 py-1 bg-yellow-900 text-yellow-300 rounded-full text-xs">Late</span></td>169 <td>8h 45m</td>170 </tr>171 <tr>172 <td class="py-4">June 3, 2023</td>173 <td>08:20 AM</td>174 <td>06:15 PM</td>175 <td><span class="px-2 py-1 bg-green-900 text-green-300 rounded-full text-xs">On Time</span></td>176 <td>9h 55m</td>177 </tr>178 <tr>179 <td class="py-4">June 2, 2023</td>180 <td>08:25 AM</td>181 <td>05:40 PM</td>182 <td><span class="px-2 py-1 bg-green-900 text-green-300 rounded-full text-xs">On Time</span></td>183 <td>9h 15m</td>184 </tr>185 </tbody>186 </table>187 </div>188 </div>189 </section>190 </div>191 192 <script>193 // Initialize Vanta.js background194 VANTA.NET({195 el: "#vanta-bg",196 mouseControls: true,197 touchControls: true,198 gyroControls: false,199 minHeight: 200.00,200 minWidth: 200.00,201 scale: 1.00,202 scaleMobile: 1.00,203 color: 0x4f46e5,204 backgroundColor: 0x111827,205 points: 10.00,206 maxDistance: 20.00,207 spacing: 15.00208 });209 210 // Initialize feather icons211 feather.replace();212 </script>213</body>214</html>215