File size: 6,574 Bytes
83faa89 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard - TimeTracker Pro</title>
<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
<link rel="stylesheet" href="style.css">
<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>
</head>
<body class="min-h-screen bg-gray-50 flex flex-col">
<custom-navbar></custom-navbar>
<main class="flex-1 pt-20">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<div class="mb-8">
<h1 class="text-3xl font-bold text-gray-800">Work Dashboard</h1>
<p class="text-gray-600">Track your time and manage tasks like a pro</p>
</div>
<!-- Stats Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Today's Hours</p>
<p class="text-2xl font-bold text-blue-600">8.5h</p>
</div>
<div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
<i data-feather="clock" class="text-blue-600"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Tasks Completed</p>
<p class="text-2xl font-bold text-green-600">12</p>
</div>
<div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
<i data-feather="check-square" class="text-green-600"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Breaks Taken</p>
<p class="text-2xl font-bold text-purple-600">3</p>
</div>
<div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
<i data-feather="coffee" class="text-purple-600"></i>
</div>
</div>
</div>
<div class="bg-white rounded-xl p-6 shadow-lg card-hover">
<div class="flex items-center justify-between">
<div>
<p class="text-sm text-gray-500">Overtime</p>
<p class="text-2xl font-bold text-orange-600">0.5h</p>
</div>
<div class="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center">
<i data-feather="alert-triangle" class="text-orange-600"></i>
</div>
</div>
</div>
</div>
<!-- Main Content -->
<div class="grid lg:grid-cols-3 gap-8">
<!-- Time Tracking Section -->
<div class="lg:col-span-2">
<div class="bg-white rounded-xl p-6 shadow-lg">
<h2 class="text-xl font-semibold mb-4 text-gray-800">Time Tracking</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
<button class="btn-primary w-full py-3 rounded-lg font-semibold text-white">
<i data-feather="play" class="inline mr-2"></i>
Clock In
</button>
<button class="bg-gray-600 hover:bg-gray-700 w-full py-3 rounded-lg font-semibold text-white">
<i data-feather="pause" class="inline mr-2"></i>
Clock Out
</button>
</div>
<!-- Recent Activity -->
<div class="space-y-4">
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<div class="flex items-center">
<i data-feather="clock" class="text-green-500 mr-3"></i>
<span>Clocked in at 9:00 AM</span>
</div>
<span class="text-sm text-gray-500">Today</span>
</div>
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
<div class="flex items-center">
<i data-feather="coffee" class="text-purple-500 mr-3"></i>
<span>Lunch break started</span>
</div>
<span class="text-sm text-gray-500">Yesterday</span>
</div>
</div>
</div>
<!-- Task Management -->
<div class="bg-white rounded-xl p-6 shadow-lg">
<h2 class="text-xl font-semibold mb-4 text-gray-800">Task Management</h2>
<div class="space-y-3">
<div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
<div class="flex items-center">
<input type="checkbox" class="mr-3">
<span>Complete project documentation</span>
</div>
<span class="text-sm text-blue-600">2h</span>
</div>
<div class="flex items-center justify-between p-3 border border-gray-200 rounded-lg">
<div class="flex items-center">
<input type="checkbox" class="mr-3" checked>
<span class="line-through text-gray-400">Team meeting</span>
</div>
<span class="text-sm text-green-600">1h</span>
</div>
</div>
</div>
</div>
</div>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
</script>
</body>
</html> |