-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
240 lines (221 loc) · 9.71 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
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
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo App</title>
<link rel="shortcut icon" href="//rptech.qa/cdn/shop/files/favicon_32x32.png?v=1657849654" type="image/png">
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<script src="https://kit.fontawesome.com/3280a7d2eb.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="flex flex-col bg-slate">
<!-- Navbar -->
<div class="flex justify-center items-center px-16 py-4 w-full text-3xl font-semibold max-md:font-medium text-orange-400 bg-gray-800 max-md:px-5 max-md:max-w-full">
<div class="navbar-content flex gap-5 justify-between px-0.5 w-full max-w-[1214px] max-md:flex-wrap max-md:max-w-full">
<div class="navbar-logo flex-auto">RP Tech</div>
<div class="navbar-heading flex-auto flex-shrink-0">Todo List</div>
<div class="navbar-profile flex gap-5 justify-center text-center text-xl text-white whitespace-nowrap">
<div class="navbar-user flex flex-col font-extralight text-sm hover:cursor-pointer transition duration-500 hover:text-green-400">
<div>G0866</div>
<div class="mt-1">Akhil Raj</div>
</div>
<div class="logout_icon pt-1">
<i class="fa-solid fa-arrow-right-from-bracket pt-2 w-9 h-9 pl-1 rounded-md transition duration-300 hover:cursor-pointer bg-white text-red-600 hover:text-white hover:bg-red-600"
onclick="logout_Function()"></i>
</div>
</div>
</div>
</div>
<!-- Page -->
<div class="container-main flex flex-col self-center px-5 mt-8 w-full max-w-[1227px] max-md:max-w-full">
<!-- User Welcome Title -->
<div class="user-name-title self-center text-2xl font-medium text-white whitespace-nowrap">
Welcome Back Akhil!
</div>
<!-- Tasks Subtitle -->
<div class="task-subtitle mt-2 text-2xl font-medium text-white max-md:max-w-full">
Tasks
</div>
<!-- Task Sorting -->
<div>
<div class="task-sort flex gap-5 justify-center self-start font-normal text-white whitespace-nowrap max-md:flex-wrap max-md:max-w-full">
<div class="justify-center px-5 py-3 rounded-2xl border transition duration-200 hover:text-slate hover:cursor-pointer hover:bg-orange-400 border-solid border-stone-600 max-md:px-5">
All
</div>
<div class="justify-center px-14 py-3 rounded-2xl transition duration-200 hover:text-slate cursor-pointer hover:bg-orange-400 border border-solid border-stone-600 max-md:px-5">
Assigned to Me
</div>
<div class="justify-center px-14 py-3 rounded-2xl transition duration-200 hover:text-slate cursor-pointer hover:bg-orange-400 border border-solid border-stone-600 max-md:px-5">
Assigned by Me
</div>
</div>
</div>
<!-- Second Subtitle -->
<div class="task-head-row flex gap-5 justify-between self-center mt-9 w-full text-base text-white max-w-[1200px]">
<button class="task-create-btn ">
<div class="justify-center px-7 py-5 rounded-xl bg-stone-600 bg-opacity-50 hover:bg-orange-400 hover:text-slate transition duration-300 max-md:px-5">
Create New Task
</div>
</button>
<div class="px-7 py-5 rounded-xl bg-stone-600 bg-opacity-50">
<table>
<thead>
<tr class="flex justify-between w-custom_w1">
<th class="font-medium">Priority</th>
<th class="font-medium">Created By</th>
<th class="font-medium">Deadline</th>
<th class="font-medium">Status</th>
</tr>
</thead>
</table>
</div>
</div>
<!-- Task Listing -->
<div class="mt-5 mb-5 rounded-r-lg py-5 rounded-lg hover:shadow-2xl transition duration-300 hover:cursor-pointer">
<table class="w-full text-lg tracking-normal text-white text-center">
<tbody class="flex">
<tr>
<td class=" font-normal flex w-custom_w pl-5">
<div class="flex items-center tracking-wide">
<span class="text-base">1 ·</span>
</div>
<div class="text-xl tracking-normal ml-3">
Landmark Opening
</div>
</td>
</tr>
<tr class="w-[866px] flex justify-between px-5">
<td class="w-36 text-start text-red-600">High</td>
<td class="w-60">Sudharshan</td>
<td class="w-56">12/2/24</td>
<td class="w-36 text-end text-orange-400">
In Progress
</td>
</tr>
</tbody>
</table>
</div>
<div class="flex flex-col items-center pb-5 rounded-2xl bg-gray-800 bg-opacity-90 max-md:px-5 max-md:max-w-full">
<div class="flex gap-5 justify-between self-stretch max-md:flex-wrap max-md:max-w-full">
<div class="flex flex-col flex-1 max-md:max-w-full">
<div class="rounded-r-lg py-5 rounded-lg">
<table class="w-full text-lg tracking-normal text-white text-center">
<tbody class="flex">
<tr>
<td class=" font-normal flex w-custom_w pl-5">
<div class="flex items-center tracking-wide">
<span class="text-base">1 ·</span>
</div>
<div class="text-xl tracking-normal ml-3">
Landmark Opening
</div>
</td>
</tr>
<tr class="w-[866px] flex justify-between px-5">
<td class="w-36 text-start text-red-600">High</td>
<td class="w-60">Me</td>
<td class="w-56">12/2/24</td>
<td class="w-36 text-end text-orange-400">
In Progress
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Assign To Button & Progress Bar -->
<div class="flex w-[650px] px-5 self-end justify-between items-center">
<div class="px-10 py-2 font-medium tracking-normal text-white rounded-md bg-stone-600">
Assigned to
</div>
<!-- Progress Bar -->
<div class="w-[200px] bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
<div class="bg-lime-600 h-2.5 rounded-full" style="width: 45%"></div>
<div class="text-sm font-medium text-lime-600 dark:text-white">45%</div>
</div>
</div>
<div class="py-5 rounded-lg">
<table class="w-full text-lg tracking-normal text-white text-center">
<tbody class="flex">
<tr>
<td class=" font-normal flex w-custom_w pl-10 text-stone-300">
<div class="flex items-center tracking-wide">
<span class="text-base">-</span>
</div>
<div class="text-lg tracking-normal ml-3">
Landmark Opening and Design flyer for promotion
</div>
</td>
</tr>
<tr class="w-[866px] flex justify-between px-5">
<td class="w-36 text-start text-red-600">High</td>
<td class="w-60 text-stone-300">Sudharshan</td>
<td class="w-56 text-stone-300 text-lg">12/2/24</td>
<td class="w-36 text-end text-orange-400">
In Progress
</td>
</tr>
</tbody>
</table>
</div>
<div class="rounded-r-lg py-5 rounded-lg">
<table class="w-full text-lg tracking-normal text-white text-center">
<tbody class="flex">
<tr>
<td class=" font-normal flex w-custom_w pl-10 text-stone-300">
<div class="flex items-center tracking-wide">
<span class="text-base">-</span>
</div>
<div class="text-lg tracking-normal ml-3">
Landmark Opening and Design flyer for promotion
</div>
</td>
</tr>
<tr class="w-[866px] flex justify-between px-5">
<td class="w-36 text-start text-red-600">High</td>
<td class="w-60 text-stone-300">Sudharshan</td>
<td class="w-56 text-stone-300 text-lg">12/2/24</td>
<td class="w-36 text-end text-orange-400">
In Progress
</td>
</tr>
</tbody>
</table>
</div>
<!-- Delete Button -->
<div class="justify-center">
<i class="fa-sharp fa-solid fa-trash-can px-5 py-2.5 text-xl tracking-normal text-red-600 whitespace-nowrap bg-white hover:text-white hover:bg-red-600 hover:cursor-pointer transition duration-300 rounded-md max-md:pr-5"></i>
</div>
</div>
</div>
<div class="mt-44 w-full min-h-[7px] max-md:mt-10 max-md:max-w-full"></div>
</div>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
slate: 'rgb(38, 57, 69)',
logout_red: "rgb(179, 13, 13)",
},
width: {
custom_w: "325px",
custom_w1: "810px"
},
},
},
variants: {},
plugins: [],
}
</script>
<style>
.shadow-slate {
/* Apply shadow with a lighter gray color */
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
</style>
</body>
</html>