-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdashboard.html
105 lines (101 loc) · 5.24 KB
/
dashboard.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaimY - Dashboard</title>
<link rel="apple-touch-icon" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzN2I5ZjMiIHN0cm9rZS13aWR0aD0iMi41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWxheW91dC10ZW1wbGF0ZSI+PHJlY3Qgd2lkdGg9IjE4IiBoZWlnaHQ9IjciIHg9IjMiIHk9IjMiIHJ4PSIxIi8+PHJlY3Qgd2lkdGg9IjkiIGhlaWdodD0iNyIgeD0iMyIgeT0iMTQiIHJ4PSIxIi8+PHJlY3Qgd2lkdGg9IjUiIGhlaWdodD0iNyIgeD0iMTYiIHk9IjE0Ii byeD0iMSIvPjwvc3ZnPg==">
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Nunito', 'sans-serif'],
},
colors: {
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
200: '#bae6fd',
300: '#7dd3fc',
400: '#38bdf8',
500: '#0ea5e9',
600: '#0284c7',
700: '#0369a1',
800: '#075985',
900: '#0c4a6e',
}
}
}
}
}
</script>
<script src="https://unpkg.com/lucide@latest"></script>
<link rel="stylesheet" href="css/styles.css">
<script src="js/script.js"></script>
</head>
<body class="bg-slate-100 dark:bg-slate-900 text-slate-800 dark:text-slate-200 font-sans">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<aside class="w-64 bg-white dark:bg-slate-800 shadow-md">
<div class="p-4">
<h1 class="text-xl font-bold text-sky-600 dark:text-sky-400"><i data-lucide="chart-gantt" stroke-width="2.8" class="w-5 h-5 mb-1 mr-1 inline-block"></i>TaimY</h1>
</div>
<nav class="mt-4">
<a href="index.html" class="flex items-center px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700">
<i data-lucide="list-todo" class="w-5 h-5 mr-2"></i>Tasks
</a>
<a href="dashboard.html" class="flex items-center px-4 py-2 text-sm text-slate-700 dark:text-slate-300 bg-slate-200 dark:bg-slate-700">
<i data-lucide="layout-dashboard" class="w-5 h-5 mr-2"></i>Dashboard
</a>
</nav>
</aside>
<!-- Main content -->
<main class="flex-1 overflow-x-hidden overflow-y-auto">
<!-- Header -->
<header class="bg-white dark:bg-slate-800 shadow-md p-4 flex justify-between items-center">
<h1 class="text-lg">Dashboard</h1>
<div class="flex items-center space-x-4">
<button id="resetStorage" class="px-4 py-1 bg-red-500 text-white text-sm rounded-md hover:bg-red-600">
Reset Storage
</button>
<button id="darkModeToggle" class="p-1 rounded-md hover:bg-slate-200 dark:hover:bg-slate-700">
<i data-lucide="moon" class="hidden dark:block w-5 h-5"></i>
<i data-lucide="sun" class="block dark:hidden w-5 h-5"></i>
</button>
</div>
</header>
<!-- Dashboard content -->
<div class="p-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-6">
<div class="bg-white dark:bg-slate-800 rounded-md shadow-md p-6">
<h2 class="text-lg font-semibold mb-4">Total Tasks</h2>
<p class="text-2xl font-bold" id="totalTasks">0</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-md shadow-md p-6">
<h2 class="text-lg font-semibold mb-4">Completed Tasks</h2>
<p class="text-2xl font-bold" id="completedTasks">0</p>
</div>
<div class="bg-white dark:bg-slate-800 rounded-md shadow-md p-6">
<h2 class="text-lg font-semibold mb-4">Postponed Tasks</h2>
<p class="text-2xl font-bold" id="postponedTasks">0</p>
</div>
</div>
<!-- Gantt Chart -->
<div class="bg-white dark:bg-slate-800 rounded-md shadow-md p-6">
<h2 class="text-lg font-semibold mb-4">Task Timeline</h2>
<div id="miniCalendar" class="mb-4"></div>
<div id="gantt" class="overflow-x-auto"></div>
</div>
</div>
</main>
</div>
<script src="js/dashboard.js"></script>
<script>
lucide.createIcons();
</script>
</body>
</html>