-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (129 loc) · 7.19 KB
/
index.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TaimY - Task Timer</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>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.14.0/Sortable.min.js"></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">
<!-- 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-8">
<a href="index.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="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 hover:bg-slate-200 dark:hover: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 flex flex-col overflow-hidden">
<!-- Header -->
<header class="bg-white dark:bg-slate-800 shadow-md">
<div class="flex justify-between items-center p-4">
<h2 class="text-lg">Current Tasks</h2>
<div class="flex items-center space-x-4">
<button id="darkModeToggle" class="p-1 rounded-md hover:bg-slate-200 dark:hover:bg-slate-700">
<i data-lucide="moon" class="w-5 h-5"></i>
</button>
<div class="relative">
<button id="menuToggle" class="p-1 rounded-md hover:bg-slate-200 dark:hover:bg-slate-700">
<i data-lucide="menu" class="w-5 h-5"></i>
</button>
<div id="dropdownMenu" class="hidden absolute right-0 mt-2 w-48 bg-white dark:bg-slate-800 rounded-md shadow-lg z-10">
<a href="#" class="block px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700" id="exportJSON">Export JSON</a>
<a href="#" class="block px-4 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-700" id="importJSON">Import JSON</a>
<a href="#" class="block px-4 py-2 text-sm text-red-700 dark:text-red-300 hover:bg-slate-200 dark:hover:bg-slate-700" id="resetStorage">Reset Storage</a>
</div>
</div>
</div>
</div>
</header>
<!-- Task list -->
<div class="flex-1 overflow-y-auto p-4">
<div id="taskList" class="task-grid">
<!-- Tasks will be dynamically inserted here -->
</div>
</div>
<!-- Add new task -->
<div class="p-4 bg-slate-200 dark:bg-slate-700">
<div class="flex space-x-2">
<input type="text" id="newTaskInput" placeholder="Add a new task" class="flex-1 p-2 text-sm border rounded-md bg-slate-100 dark:bg-slate-800 dark:border-slate-700">
<button id="addTaskBtn" class="px-4 py-1 bg-sky-500 text-white text-xs border-none outline-none rounded-md hover:bg-sky-600">Add Task</button>
</div>
</div>
<!-- Completed and Postponed tasks -->
<div class="flex justify-between p-4 bg-slate-200 dark:bg-slate-700">
<div id="completedTasks" class="w-1/2 p-4 bg-white dark:bg-slate-800 rounded-md shadow-md mr-2 cursor-pointer">
<h3 class="text-lg font-semibold mb-2">Completed Tasks</h3>
<p class="text-2xl font-bold">0</p>
</div>
<div id="postponedTasks" class="w-1/2 p-4 bg-white dark:bg-slate-800 rounded-md shadow-md ml-2 cursor-pointer">
<h3 class="text-lg font-semibold mb-2">Postponed Tasks</h3>
<p class="text-2xl font-bold">0</p>
</div>
</div>
</main>
</div>
<!-- Модальное окно -->
<div id="taskModal" class="fixed inset-0 bg-slate-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
<div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white dark:bg-slate-800">
<div class="mt-3 text-center">
<h3 class="text-lg leading-6 font-medium text-slate-900 dark:text-slate-100" id="modalTitle"></h3>
<div class="mt-2 px-7 py-3">
<ul id="modalTaskList" class="space-y-2"></ul>
</div>
<div class="items-center px-4 py-3">
<button id="closeModal" class="px-4 py-2 bg-slate-500 text-white text-sm font-medium rounded-md w-full shadow-sm hover:bg-slate-600 focus:outline-none focus:ring-2 focus:ring-slate-300">
Close
</button>
</div>
</div>
</div>
</div>
<script src="js/app.js"></script>
<script>
lucide.createIcons();
</script>
</body>
</html>