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>Admin Dashboard | 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 .admin-card {13 backdrop-filter: blur(10px);14 background: rgba(255, 255, 255, 0.1);15 }16 .nav-link.active {17 background: rgba(79, 70, 229, 0.2);18 border-left: 4px solid #4f46e5;19 }20 </style>21</head>22<body class="min-h-screen bg-gradient-to-br from-gray-900 to-gray-800 text-white">23 <div id="vanta-bg" class="fixed inset-0 z-0"></div>24 25 <div class="relative z-10 flex min-h-screen">26 <!-- Sidebar -->27 <div class="w-64 bg-gray-800 border-r border-gray-700">28 <div class="p-6 flex items-center space-x-2">29 <i data-feather="shield" class="w-8 h-8 text-indigo-400"></i>30 <h1 class="text-xl font-bold">Admin Panel</h1>31 </div>32 <nav class="mt-6">33 <a href="admin.html" class="nav-link active flex items-center space-x-3 px-6 py-3 text-gray-300 hover:bg-gray-700">34 <i data-feather="home"></i>35 <span>Dashboard</span>36 </a>37 <a href="admin-users.html" class="nav-link flex items-center space-x-3 px-6 py-3 text-gray-300 hover:bg-gray-700">38 <i data-feather="users"></i>39 <span>User Management</span>40 </a>41 <a href="admin-attendance.html" class="nav-link flex items-center space-x-3 px-6 py-3 text-gray-300 hover:bg-gray-700">42 <i data-feather="calendar"></i>43 <span>Attendance Records</span>44 </a>45 <a href="admin-settings.html" class="nav-link flex items-center space-x-3 px-6 py-3 text-gray-300 hover:bg-gray-700">46 <i data-feather="settings"></i>47 <span>Settings</span>48 </a>49 </nav>50 </div>51 52 <!-- Main Content -->53 <div class="flex-1 p-8">54 <div class="flex justify-between items-center mb-8">55 <h2 class="text-2xl font-bold">Admin Dashboard</h2>56 <div class="flex items-center space-x-4">57 <div class="relative">58 <i data-feather="bell" class="w-6 h-6 text-gray-300"></i>59 <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full h-4 w-4 flex items-center justify-center">3</span>60 </div>61 <div class="flex items-center space-x-2">62 <div class="h-8 w-8 rounded-full bg-indigo-500 flex items-center justify-center">63 <i data-feather="user" class="w-4 h-4 text-white"></i>64 </div>65 <span class="text-sm font-medium">Admin</span>66 </div>67 </div>68 </div>69 70 <!-- Stats Cards -->71 <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">72 <div class="admin-card p-6 rounded-xl border border-gray-700">73 <div class="flex items-center justify-between">74 <div>75 <p class="text-gray-400 mb-1">Total Users</p>76 <h3 class="text-2xl font-bold">142</h3>77 </div>78 <div class="p-3 rounded-lg bg-indigo-500/20">79 <i data-feather="users" class="text-indigo-400"></i>80 </div>81 </div>82 </div>83 <div class="admin-card p-6 rounded-xl border border-gray-700">84 <div class="flex items-center justify-between">85 <div>86 <p class="text-gray-400 mb-1">Active Today</p>87 <h3 class="text-2xl font-bold">87%</h3>88 </div>89 <div class="p-3 rounded-lg bg-green-500/20">90 <i data-feather="activity" class="text-green-400"></i>91 </div>92 </div>93 </div>94 <div class="admin-card p-6 rounded-xl border border-gray-700">95 <div class="flex items-center justify-between">96 <div>97 <p class="text-gray-400 mb-1">Late Today</p>98 <h3 class="text-2xl font-bold">12</h3>99 </div>100 <div class="p-3 rounded-lg bg-yellow-500/20">101 <i data-feather="clock" class="text-yellow-400"></i>102 </div>103 </div>104 </div>105 <div class="admin-card p-6 rounded-xl border border-gray-700">106 <div class="flex items-center justify-between">107 <div>108 <p class="text-gray-400 mb-1">Pending Requests</p>109 <h3 class="text-2xl font-bold">5</h3>110 </div>111 <div class="p-3 rounded-lg bg-purple-500/20">112 <i data-feather="alert-circle" class="text-purple-400"></i>113 </div>114 </div>115 </div>116 </div>117 118 <!-- Recent Activity -->119 <div class="admin-card p-6 rounded-xl border border-gray-700 mb-8">120 <h3 class="text-lg font-semibold mb-4">Recent Activity</h3>121 <div class="space-y-4">122 <div class="flex items-start">123 <div class="p-2 rounded-full bg-gray-700 mr-4">124 <i data-feather="user-plus" class="w-4 h-4 text-green-400"></i>125 </div>126 <div>127 <p class="text-sm">New user registered: Jane Cooper</p>128 <p class="text-xs text-gray-400">2 hours ago</p>129 </div>130 </div>131 <div class="flex items-start">132 <div class="p-2 rounded-full bg-gray-700 mr-4">133 <i data-feather="alert-triangle" class="w-4 h-4 text-yellow-400"></i>134 </div>135 <div>136 <p class="text-sm">Attendance issue reported by John Doe</p>137 <p class="text-xs text-gray-400">5 hours ago</p>138 </div>139 </div>140 <div class="flex items-start">141 <div class="p-2 rounded-full bg-gray-700 mr-4">142 <i data-feather="clock" class="w-4 h-4 text-red-400"></i>143 </div>144 <div>145 <p class="text-sm">3 late clock-ins detected today</p>146 <p class="text-xs text-gray-400">8 hours ago</p>147 </div>148 </div>149 </div>150 </div>151 152 <!-- Quick Actions -->153 <div class="admin-card p-6 rounded-xl border border-gray-700">154 <h3 class="text-lg font-semibold mb-4">Quick Actions</h3>155 <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">156 <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-gray-700 hover:bg-gray-600 transition">157 <i data-feather="plus-circle" class="w-6 h-6 text-indigo-400 mb-2"></i>158 <span class="text-sm">Add User</span>159 </button>160 <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-gray-700 hover:bg-gray-600 transition">161 <i data-feather="file-text" class="w-6 h-6 text-blue-400 mb-2"></i>162 <span class="text-sm">Generate Report</span>163 </button>164 <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-gray-700 hover:bg-gray-600 transition">165 <i data-feather="settings" class="w-6 h-6 text-yellow-400 mb-2"></i>166 <span class="text-sm">System Settings</span>167 </button>168 <button class="flex flex-col items-center justify-center p-4 rounded-lg bg-gray-700 hover:bg-gray-600 transition">169 <i data-feather="message-square" class="w-6 h-6 text-green-400 mb-2"></i>170 <span class="text-sm">Send Announcement</span>171 </button>172 </div>173 </div>174 </div>175 </div>176 177 <script>178 // Initialize Vanta.js background179 VANTA.NET({180 el: "#vanta-bg",181 mouseControls: true,182 touchControls: true,183 gyroControls: false,184 minHeight: 200.00,185 minWidth: 200.00,186 scale: 1.00,187 scaleMobile: 1.00,188 color: 0x4f46e5,189 backgroundColor: 0x111827,190 points: 10.00,191 maxDistance: 20.00,192 spacing: 15.00193 });194 195 // Initialize feather icons196 feather.replace();197 198 // Activate current nav link199 document.querySelectorAll('.nav-link').forEach(link => {200 link.addEventListener('click', function() {201 document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));202 this.classList.add('active');203 });204 });205 </script>206</body>207</html>