-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtask_mgt_dashboard.html
More file actions
178 lines (176 loc) · 13.6 KB
/
Copy pathtask_mgt_dashboard.html
File metadata and controls
178 lines (176 loc) · 13.6 KB
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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="" />
<link
rel="stylesheet"
as="style"
onload="this.rel='stylesheet'"
href="https://fonts.googleapis.com/css2?display=swap&family=Noto+Sans%3Awght%40400%3B500%3B700%3B900&family=Work+Sans%3Awght%40400%3B500%3B700%3B900"
/>
<title>Task Manager</title>
<link rel="icon" type="image/x-icon" href="data:image/x-icon;base64," />
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
</head>
<body>
<div class="relative flex size-full min-h-screen flex-col bg-[#F8F9FB] group/design-root overflow-x-hidden" style='font-family: "Work Sans", "Noto Sans", sans-serif;'>
<div class="layout-container flex h-full grow flex-col">
<div class="gap-1 px-6 flex flex-1 justify-center py-5">
<div class="layout-content-container flex flex-col w-80">
<div class="flex h-full min-h-[700px] flex-col justify-between bg-[#F8F9FB] p-4">
<div class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<div class="flex items-center gap-3 px-3 py-2">
<div class="text-[#141C24]" data-icon="House" data-size="24px" data-weight="regular">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
<path
d="M218.83,103.77l-80-75.48a1.14,1.14,0,0,1-.11-.11,16,16,0,0,0-21.53,0l-.11.11L37.17,103.77A16,16,0,0,0,32,115.55V208a16,16,0,0,0,16,16H96a16,16,0,0,0,16-16V160h32v48a16,16,0,0,0,16,16h48a16,16,0,0,0,16-16V115.55A16,16,0,0,0,218.83,103.77ZM208,208H160V160a16,16,0,0,0-16-16H112a16,16,0,0,0-16,16v48H48V115.55l.11-.1L128,40l79.9,75.43.11.1Z"
></path>
</svg>
</div>
<p class="text-[#141C24] text-sm font-medium leading-normal">Home</p>
</div>
<div class="flex items-center gap-3 px-3 py-2 rounded-xl bg-[#E4E9F1]">
<div class="text-[#141C24]" data-icon="Check" data-size="24px" data-weight="fill">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
<path
d="M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM205.66,85.66l-96,96a8,8,0,0,1-11.32,0l-40-40a8,8,0,0,1,11.32-11.32L104,164.69l90.34-90.35a8,8,0,0,1,11.32,11.32Z"
></path>
</svg>
</div>
<p class="text-[#141C24] text-sm font-medium leading-normal">Tasks</p>
</div>
<div class="flex items-center gap-3 px-3 py-2">
<div class="text-[#141C24]" data-icon="ChartBar" data-size="24px" data-weight="regular">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
<path
d="M224,200h-8V40a8,8,0,0,0-8-8H152a8,8,0,0,0-8,8V80H96a8,8,0,0,0-8,8v40H48a8,8,0,0,0-8,8v64H32a8,8,0,0,0,0,16H224a8,8,0,0,0,0-16ZM160,48h40V200H160ZM104,96h40V200H104ZM56,144H88v56H56Z"
></path>
</svg>
</div>
<p class="text-[#141C24] text-sm font-medium leading-normal">Reports</p>
</div>
<div class="flex items-center gap-3 px-3 py-2">
<div class="text-[#141C24]" data-icon="Users" data-size="24px" data-weight="regular">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
<path
d="M117.25,157.92a60,60,0,1,0-66.5,0A95.83,95.83,0,0,0,3.53,195.63a8,8,0,1,0,13.4,8.74,80,80,0,0,1,134.14,0,8,8,0,0,0,13.4-8.74A95.83,95.83,0,0,0,117.25,157.92ZM40,108a44,44,0,1,1,44,44A44.05,44.05,0,0,1,40,108Zm210.14,98.7a8,8,0,0,1-11.07-2.33A79.83,79.83,0,0,0,172,168a8,8,0,0,1,0-16,44,44,0,1,0-16.34-84.87,8,8,0,1,1-5.94-14.85,60,60,0,0,1,55.53,105.64,95.83,95.83,0,0,1,47.22,37.71A8,8,0,0,1,250.14,206.7Z"
></path>
</svg>
</div>
<p class="text-[#141C24] text-sm font-medium leading-normal">Members</p>
</div>
<div class="flex items-center gap-3 px-3 py-2">
<div class="text-[#141C24]" data-icon="Gear" data-size="24px" data-weight="regular">
<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" fill="currentColor" viewBox="0 0 256 256">
<path
d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm88-29.84q.06-2.16,0-4.32l14.92-18.64a8,8,0,0,0,1.48-7.06,107.21,107.21,0,0,0-10.88-26.25,8,8,0,0,0-6-3.93l-23.72-2.64q-1.48-1.56-3-3L186,40.54a8,8,0,0,0-3.94-6,107.71,107.71,0,0,0-26.25-10.87,8,8,0,0,0-7.06,1.49L130.16,40Q128,40,125.84,40L107.2,25.11a8,8,0,0,0-7.06-1.48A107.6,107.6,0,0,0,73.89,34.51a8,8,0,0,0-3.93,6L67.32,64.27q-1.56,1.49-3,3L40.54,70a8,8,0,0,0-6,3.94,107.71,107.71,0,0,0-10.87,26.25,8,8,0,0,0,1.49,7.06L40,125.84Q40,128,40,130.16L25.11,148.8a8,8,0,0,0-1.48,7.06,107.21,107.21,0,0,0,10.88,26.25,8,8,0,0,0,6,3.93l23.72,2.64q1.49,1.56,3,3L70,215.46a8,8,0,0,0,3.94,6,107.71,107.71,0,0,0,26.25,10.87,8,8,0,0,0,7.06-1.49L125.84,216q2.16.06,4.32,0l18.64,14.92a8,8,0,0,0,7.06,1.48,107.21,107.21,0,0,0,26.25-10.88,8,8,0,0,0,3.93-6l2.64-23.72q1.56-1.48,3-3L215.46,186a8,8,0,0,0,6-3.94,107.71,107.71,0,0,0,10.87-26.25,8,8,0,0,0-1.49-7.06Zm-16.1-6.5a73.93,73.93,0,0,1,0,8.68,8,8,0,0,0,1.74,5.48l14.19,17.73a91.57,91.57,0,0,1-6.23,15L187,173.11a8,8,0,0,0-5.1,2.64,74.11,74.11,0,0,1-6.14,6.14,8,8,0,0,0-2.64,5.1l-2.51,22.58a91.32,91.32,0,0,1-15,6.23l-17.74-14.19a8,8,0,0,0-5-1.75h-.48a73.93,73.93,0,0,1-8.68,0,8,8,0,0,0-5.48,1.74L100.45,215.8a91.57,91.57,0,0,1-15-6.23L82.89,187a8,8,0,0,0-2.64-5.1,74.11,74.11,0,0,1-6.14-6.14,8,8,0,0,0-5.1-2.64L46.43,170.6a91.32,91.32,0,0,1-6.23-15l14.19-17.74a8,8,0,0,0,1.74-5.48,73.93,73.93,0,0,1,0-8.68,8,8,0,0,0-1.74-5.48L40.2,100.45a91.57,91.57,0,0,1,6.23-15L69,82.89a8,8,0,0,0,5.1-2.64,74.11,74.11,0,0,1,6.14-6.14A8,8,0,0,0,82.89,69L85.4,46.43a91.32,91.32,0,0,1,15-6.23l17.74,14.19a8,8,0,0,0,5.48,1.74,73.93,73.93,0,0,1,8.68,0,8,8,0,0,0,5.48-1.74L155.55,40.2a91.57,91.57,0,0,1,15,6.23L173.11,69a8,8,0,0,0,2.64,5.1,74.11,74.11,0,0,1,6.14,6.14,8,8,0,0,0,5.1,2.64l22.58,2.51a91.32,91.32,0,0,1,6.23,15l-14.19,17.74A8,8,0,0,0,199.87,123.66Z"
></path>
</svg>
</div>
<p class="text-[#141C24] text-sm font-medium leading-normal">Settings</p>
</div>
</div>
</div>
<button
class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-xl h-10 px-4 bg-[#F4C753] text-[#141C24] text-sm font-bold leading-normal tracking-[0.015em]"
>
<span class="truncate">New task</span>
</button>
</div>
</div>
<div class="layout-content-container flex flex-col max-w-[960px] flex-1">
<div class="flex flex-wrap justify-between gap-3 p-4"><p class="text-[#141C24] tracking-light text-[32px] font-bold leading-tight min-w-72">Today's tasks</p></div>
<h3 class="text-[#141C24] text-lg font-bold leading-tight tracking-[-0.015em] px-4 pb-2 pt-4">Task Queue</h3>
<div class="flex flex-wrap gap-4 px-4 py-6">
<div class="flex min-w-72 flex-1 flex-col gap-2 rounded-xl border border-[#D4DBE8] p-6">
<div class="grid min-h-[180px] grid-flow-col gap-6 grid-rows-[1fr_auto] items-end justify-items-center px-3">
<div class="border-[#3F5374] bg-[#E4E9F1] border-t-2 w-full" style="height: 40%;"></div>
<p class="text-[#3F5374] text-[13px] font-bold leading-normal tracking-[0.015em]">fr-FR</p>
<div class="border-[#3F5374] bg-[#E4E9F1] border-t-2 w-full" style="height: 70%;"></div>
<p class="text-[#3F5374] text-[13px] font-bold leading-normal tracking-[0.015em]">de-DE</p>
<div class="border-[#3F5374] bg-[#E4E9F1] border-t-2 w-full" style="height: 80%;"></div>
<p class="text-[#3F5374] text-[13px] font-bold leading-normal tracking-[0.015em]">sv-SE</p>
<div class="border-[#3F5374] bg-[#E4E9F1] border-t-2 w-full" style="height: 80%;"></div>
<p class="text-[#3F5374] text-[13px] font-bold leading-normal tracking-[0.015em]">ja-JP</p>
<div class="border-[#3F5374] bg-[#E4E9F1] border-t-2 w-full" style="height: 100%;"></div>
<p class="text-[#3F5374] text-[13px] font-bold leading-normal tracking-[0.015em]">en-US</p>
</div>
</div>
</div>
<h3 class="text-[#141C24] text-lg font-bold leading-tight tracking-[-0.015em] px-4 pb-2 pt-4">Task list</h3>
<div class="flex gap-4 bg-[#F8F9FB] px-4 py-3 justify-between">
<div class="flex flex-1 flex-col justify-center">
<p class="text-[#141C24] text-base font-medium leading-normal">Review website</p>
<p class="text-[#3F5374] text-sm font-normal leading-normal">Deadline: 12/12/2022, Progress: 75%</p>
<p class="text-[#3F5374] text-sm font-normal leading-normal">Priority: High</p>
</div>
<div class="shrink-0">
<button
class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-xl h-8 px-4 bg-[#E4E9F1] text-[#141C24] text-sm font-medium leading-normal w-fit"
>
<span class="truncate">View Assignee</span>
</button>
</div>
</div>
<div class="flex gap-4 bg-[#F8F9FB] px-4 py-3 justify-between">
<div class="flex flex-1 flex-col justify-center">
<p class="text-[#141C24] text-base font-medium leading-normal">Create new logo</p>
<p class="text-[#3F5374] text-sm font-normal leading-normal">Deadline: 12/12/2022, Progress: 25%</p>
<p class="text-[#3F5374] text-sm font-normal leading-normal">Priority: Medium</p>
</div>
<div class="shrink-0">
<button
class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-xl h-8 px-4 bg-[#E4E9F1] text-[#141C24] text-sm font-medium leading-normal w-fit"
>
<span class="truncate">View Assignee</span>
</button>
</div>
</div>
<div class="flex gap-4 bg-[#F8F9FB] px-4 py-3 justify-between">
<div class="flex flex-1 flex-col justify-center">
<p class="text-[#141C24] text-base font-medium leading-normal">Write blog post</p>
<p class="text-[#3F5374] text-sm font-normal leading-normal">Deadline: 12/12/2022, Progress: 0%</p>
<p class="text-[#3F5374] text-sm font-normal leading-normal">Priority: Low</p>
</div>
<div class="shrink-0">
<button
class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-xl h-8 px-4 bg-[#E4E9F1] text-[#141C24] text-sm font-medium leading-normal w-fit"
>
<span class="truncate">View Assignee</span>
</button>
</div>
</div>
<div class="flex gap-4 bg-[#F8F9FB] px-4 py-3 justify-between">
<div class="flex flex-1 flex-col justify-center">
<p class="text-[#141C24] text-base font-medium leading-normal">Design new UI</p>
<p class="text-[#3F5374] text-sm font-normal leading-normal">Deadline: 12/12/2022, Progress: 25%</p>
<p class="text-[#3F5374] text-sm font-normal leading-normal">Priority: High</p>
</div>
<div class="shrink-0">
<button
class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-xl h-8 px-4 bg-[#E4E9F1] text-[#141C24] text-sm font-medium leading-normal w-fit"
>
<span class="truncate">View Assignee</span>
</button>
</div>
</div>
<div class="flex gap-4 bg-[#F8F9FB] px-4 py-3 justify-between">
<div class="flex flex-1 flex-col justify-center">
<p class="text-[#141C24] text-base font-medium leading-normal">Update landing page</p>
<p class="text-[#3F5374] text-sm font-normal leading-normal">Deadline: 12/12/2022, Progress: 0%</p>
<p class="text-[#3F5374] text-sm font-normal leading-normal">Priority: Medium</p>
</div>
<div class="shrink-0">
<button
class="flex min-w-[84px] max-w-[480px] cursor-pointer items-center justify-center overflow-hidden rounded-xl h-8 px-4 bg-[#E4E9F1] text-[#141C24] text-sm font-medium leading-normal w-fit"
>
<span class="truncate">View Assignee</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>