-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathalerts.html
400 lines (382 loc) · 41.5 KB
/
alerts.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
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="./src/css/style.css" rel="stylesheet">
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="./src/js/script.js"></script>
<script src="https://cdn.tailwindcss.com?plugins=forms"></script>
</head>
<body>
<div x-data="setup()" x-init="$refs.loading.classList.add('hidden');" @resize.window="watchScreen()">
<div class="flex h-screen antialiased bg-white text-zinc-900">
<!-- Loading screen -->
<div x-ref="loading" class="fixed inset-0 z-50 flex items-center justify-center text-white bg-zinc-900">
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-loader"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg>
</div>
<!-- Sidebar -->
<div class="fixed z-10 flex flex-shrink-0 h-full transition-all">
<div x-show="isSidebarOpen" @click="isSidebarOpen = false" class="fixed inset-0 z-10 bg-black bg-opacity-50 lg:hidden"></div>
<div x-show="isSidebarOpen" class="fixed inset-y-0 w-16 bg-white z-120"></div>
<!-- Mobile bottom bar -->
<nav aria-label="Options" class="fixed inset-x-0 bottom-0 z-10 flex flex-row-reverse items-center justify-between px-4 py-2 bg-zinc-900 lg:hidden">
<!-- Menu button -->
<button @click="(isSidebarOpen && currentSidebarTab == 'linksTab') ? isSidebarOpen = false : isSidebarOpen = true; currentSidebarTab = 'linksTab'" class="p-2 transition-colors rounded-lg shadow-md hover:bg-zinc-800 hover:text-white focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-zinc-600 focus:ring-offset-white focus:ring-offset-1" :class="(isSidebarOpen && currentSidebarTab == 'linksTab') ? 'text-white bg-zinc-600' : 'text-zinc-500 bg-zinc-800'">
<span class="sr-only">Toggle sidebar</span>
<svg aria-hidden="true" class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</button>
<!-- Logo -->
<a href="./index.html">
<img class="w-8 h-auto" src="./src/img/logo.png" alt="logo"/>
</a>
<!-- User avatar button -->
<div class="relative flex items-center flex-shrink-0 p-2" x-data="{ isOpen: false }">
<button @click="isOpen = !isOpen; $nextTick(() => {isOpen ? $refs.userMenu.focus() : null})" class="transition-opacity rounded-lg opacity-80 hover:opacity-100 focus:outline-none">
<img class="w-8 h-8 rounded-lg shadow-md" src="./src/img/avatar.jpeg" alt="avatar image"/>
<span class="sr-only">User menu</span>
</button>
<div x-show="isOpen" @click.away="isOpen = false" @keydown.escape="isOpen = false" x-ref="userMenu" tabindex="-1" class="absolute w-48 py-1 mt-2 origin-bottom-left bg-white rounded-md shadow-lg left-12 bottom-9 focus:outline-none" role="menu" aria-orientation="vertical" aria-label="user menu">
<a href="#" class="block px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100" role="menuitem">Your Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100" role="menuitem">Sign out</a>
</div>
</div>
</nav>
<!-- Left mini bar -->
<nav aria-label="Options" class="z-20 flex-col items-center flex-shrink-0 hidden w-16 py-4 border-r border-zinc-800 bg-zinc-900 lg:flex">
<!-- Logo -->
<div class="flex-shrink-0 py-4">
<a href="./index.html">
<img class="w-8 h-auto" src="./src/img/logo.png" alt="logo"/>
</a>
</div>
<div class="flex flex-col items-center flex-1 p-2 space-y-4">
<!-- Menu button -->
<button @click="(isSidebarOpen && currentSidebarTab == 'linksTab') ? isSidebarOpen = false : isSidebarOpen = true; currentSidebarTab = 'linksTab'" class="p-2 transition-colors rounded-lg shadow-md hover:bg-zinc-800 hover:text-white focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-zinc-600 focus:ring-offset-white focus:ring-offset-1" :class="(isSidebarOpen && currentSidebarTab == 'linksTab') ? 'text-white bg-zinc-600' : 'text-white bg-zinc-800'">
<span class="sr-only">Toggle sidebar</span>
<svg aria-hidden="true" class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
</button>
<!-- Notifications button -->
<button @click="(isSidebarOpen && currentSidebarTab == 'notificationsTab') ? isSidebarOpen = false : isSidebarOpen = true; currentSidebarTab = 'notificationsTab'" class="p-2 transition-colors rounded-lg shadow-md hover:bg-zinc-800 hover:text-white focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-zinc-600 focus:ring-offset-white focus:ring-offset-1" :class="(isSidebarOpen && currentSidebarTab == 'notificationsTab') ? 'text-white bg-zinc-600' : 'text-white bg-zinc-800'">
<span class="sr-only">Toggle notifications panel</span>
<svg aria-hidden="true" class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
</button>
<!-- Settings button -->
<!-- <button @click="(isSidebarOpen && currentSidebarTab == 'settingsTab') ? isSidebarOpen = false : isSidebarOpen = true; currentSidebarTab = 'settingsTab'" class="p-2 transition-colors rounded-lg shadow-md hover:bg-zinc-800 hover:text-white focus:outline-none focus:ring focus:ring-opacity-50 focus:ring-zinc-600 focus:ring-offset-white focus:ring-offset-1" :class="(isSidebarOpen && currentSidebarTab == 'settingsTab') ? 'text-white bg-zinc-600' : 'text-white bg-zinc-800'">
<span class="sr-only">Toggle settings panel</span>
<svg aria-hidden="true" class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
</button> -->
</div>
<!-- User avatar -->
<div class="relative flex items-center flex-shrink-0 p-2" x-data="{ isOpen: false }">
<button @click="isOpen = !isOpen; $nextTick(() => {isOpen ? $refs.userMenu.focus() : null})" class="transition-opacity rounded-lg opacity-80 hover:opacity-100 focus:outline-none">
<img class="w-10 h-10 rounded-lg shadow-md md:w-8 md:h-8" src="./src/img/avatar.jpeg" alt="avatar image"/>
<span class="sr-only">User menu</span>
</button>
<div x-show="isOpen" @click.away="isOpen = false" @keydown.escape="isOpen = false" x-ref="userMenu" tabindex="-1" class="absolute w-48 py-1 mt-2 origin-bottom-left bg-white rounded-md shadow-lg left-10 bottom-14 focus:outline-none" role="menu" aria-orientation="vertical" aria-label="user menu">
<a href="#" class="block px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100" role="menuitem">Your Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100" role="menuitem">Sign out</a>
</div>
</div>
</nav>
<div x-transition:enter="transform transition-transform duration-300" x-transition:enter-start="-translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transform transition-transform duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="-translate-x-full" x-show="isSidebarOpen" class="fixed inset-y-0 left-0 z-10 flex-shrink-0 w-64 bg-zinc-900 sm:left-16 md:-left-1 rounded-tr-3xl rounded-br-3xl sm:w-72 lg:static lg:w-64">
<nav x-show="currentSidebarTab == 'linksTab'" aria-label="Main" class="flex flex-col h-full">
<div class="flex items-center justify-center flex-shrink-0 py-[28.5px] uppercase font-extrabold text-white tracking-wider">
Dashboard
</div>
<!-- Links -->
<div class="flex-1 px-4 space-y-2 overflow-hidden hover:overflow-auto">
<a href="./index.html" class="flex items-center w-full space-x-2 text-white rounded-lg bg-zinc-600">
<span aria-hidden="true" class="p-2 rounded-lg bg-zinc-700">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg>
</span>
<span class="text-sm">Home</span>
</a>
<a href="./typography.html" class="flex items-center space-x-2 transition-colors rounded-lg text-zinc-400 group hover:bg-zinc-600 hover:text-white">
<span aria-hidden="true" class="p-2 transition-colors rounded-lg group-hover:bg-zinc-700 group-hover:text-white">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><circle cx="17.5" cy="15.5" r="3.5"></circle><path d="M3 19v-10.5a3.5 3.5 0 0 1 7 0v10.5"></path><path d="M3 13h7"></path><path d="M21 12v7"></path></svg>
</span>
<span class="text-sm">Typography</span>
</a>
<a href="./forms.html" class="flex items-center space-x-2 transition-colors rounded-lg text-zinc-400 group hover:bg-zinc-600 hover:text-white">
<span aria-hidden="true" class="p-2 transition-colors rounded-lg group-hover:bg-zinc-700 group-hover:text-white">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M9 5h-2a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-12a2 2 0 0 0 -2 -2h-2"></path><rect x="9" y="3" width="6" height="4" rx="2"></rect><line x1="9" y1="12" x2="9.01" y2="12"></line><line x1="13" y1="12" x2="15" y2="12"></line><line x1="9" y1="16" x2="9.01" y2="16"></line><line x1="13" y1="16" x2="15" y2="16"></line></svg>
</span>
<span class="text-sm">Forms</span>
</a>
<a href="./buttons.html" class="flex items-center space-x-2 transition-colors rounded-lg text-zinc-400 group hover:bg-zinc-600 hover:text-white">
<span aria-hidden="true" class="p-2 transition-colors rounded-lg group-hover:bg-zinc-700 group-hover:text-white">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><line x1="3" y1="12" x2="6" y2="12"></line><line x1="12" y1="3" x2="12" y2="6"></line><line x1="7.8" y1="7.8" x2="5.6" y2="5.6"></line><line x1="16.2" y1="7.8" x2="18.4" y2="5.6"></line><line x1="7.8" y1="16.2" x2="5.6" y2="18.4"></line><path d="M12 12l9 3l-4 2l-2 4l-3 -9"></path></svg>
</span>
<span class="text-sm">Buttons</span>
</a>
<div class="relative" x-data="{selected:null}">
<div class="flex items-center transition-colors rounded-lg text-zinc-400 group-hover:bg-zinc-900 group-hover:text-white">
<span aria-hidden="true" class="p-2 mr-2 transition-colors rounded-lg group-hover:bg-zinc-900 group-hover:text-white">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><rect x="4" y="4" width="6" height="6" rx="1"></rect><rect x="14" y="4" width="6" height="6" rx="1"></rect><rect x="4" y="14" width="6" height="6" rx="1"></rect><rect x="14" y="14" width="6" height="6" rx="1"></rect></svg>
</span>
<button type="button" class="w-full py-2 text-left" @click="selected !== 1 ? selected = 1 : selected = null">
<div class="flex items-center justify-between">
<span class="text-sm">
Components
</span>
<span>
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
</span>
</div>
</button>
</div>
<ul class="relative px-4 overflow-hidden transition-all duration-700 max-h-0" x-ref="container1" x-bind:style="selected == 1 ? 'max-height: ' + $refs.container1.scrollHeight + 'px' : ''">
<li>
<a href="./alerts.html" class="flex items-center space-x-2 transition-colors rounded-lg text-zinc-400 group hover:bg-zinc-800 hover:text-white">
<span aria-hidden="true" class="p-2 transition-colors rounded-lg group-hover:bg-zinc-900 group-hover:text-white">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M10 6h-3a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-3"></path> <circle cx="17" cy="7" r="3"></circle></svg>
</span>
<span class="text-sm">Alerts</span>
</a>
</li>
<li>
<a href="./collapses.html" class="flex items-center space-x-2 transition-colors rounded-lg text-zinc-400 group hover:bg-zinc-800 hover:text-white">
<span aria-hidden="true" class="p-2 transition-colors rounded-lg group-hover:bg-zinc-900 group-hover:text-white">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <rect x="4" y="4" width="16" height="16" rx="2"></rect> <line x1="4" y1="12" x2="20" y2="12"></line></svg> </span>
<span class="text-sm">Collapses</span>
</a>
</li>
<li>
<a href="./dropdowns.html" class="flex items-center space-x-2 transition-colors rounded-lg text-zinc-400 group hover:bg-zinc-800 hover:text-white">
<span aria-hidden="true" class="p-2 transition-colors rounded-lg group-hover:bg-zinc-900 group-hover:text-white">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <rect x="4" y="4" width="16" height="6" rx="2"></rect> <rect x="4" y="14" width="16" height="6" rx="2"></rect></svg> </span>
<span class="text-sm">Dropdowns</span>
</a>
</li>
<li>
<a href="./modals.html" class="flex items-center space-x-2 transition-colors rounded-lg text-zinc-400 group hover:bg-zinc-800 hover:text-white">
<span aria-hidden="true" class="p-2 transition-colors rounded-lg group-hover:bg-zinc-900 group-hover:text-white">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <rect x="7" y="3" width="14" height="14" rx="2"></rect> <path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path></svg> </span>
<span class="text-sm">Modals</span>
</a>
</li>
<li>
<a href="./sidebars.html" class="flex items-center space-x-2 transition-colors rounded-lg text-zinc-400 group hover:bg-zinc-800 hover:text-white">
<span aria-hidden="true" class="p-2 transition-colors rounded-lg group-hover:bg-zinc-900 group-hover:text-white">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <rect x="4" y="4" width="16" height="16" rx="2"></rect> <line x1="9" y1="4" x2="9" y2="20"></line></svg> </span>
<span class="text-sm">Sidebars</span>
</a>
</li>
</ul>
</div>
<div class="relative" x-data="{selected:null}">
<div class="flex items-center transition-colors rounded-lg text-zinc-400 group-hover:bg-zinc-900 group-hover:text-white">
<span aria-hidden="true" class="p-2 mr-2 transition-colors rounded-lg group-hover:bg-zinc-900 group-hover:text-white">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>
</span>
<button type="button" class="w-full py-2 text-left" @click="selected !== 1 ? selected = 1 : selected = null">
<div class="flex items-center justify-between">
<span class="text-sm">
Pages
</span>
<span>
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><polyline points="6 9 12 15 18 9"></polyline></svg>
</span>
</div>
</button>
</div>
<ul class="relative px-4 overflow-hidden transition-all duration-700 max-h-0" x-ref="container2" x-bind:style="selected == 1 ? 'max-height: ' + $refs.container2.scrollHeight + 'px' : ''">
<li>
<a href="./login.html" class="flex items-center space-x-2 transition-colors rounded-lg text-zinc-400 group hover:bg-zinc-800 hover:text-white">
<span aria-hidden="true" class="p-2 transition-colors rounded-lg group-hover:bg-zinc-900 group-hover:text-white">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"></path> <path d="M20 12h-13l3 -3m0 6l-3 -3"></path></svg> </span>
<span class="text-sm">Login</span>
</a>
</li>
<li>
<a href="./sign-up.html" class="flex items-center space-x-2 transition-colors rounded-lg text-zinc-400 group hover:bg-zinc-800 hover:text-white">
<span aria-hidden="true" class="p-2 transition-colors rounded-lg group-hover:bg-zinc-900 group-hover:text-white">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <circle cx="9" cy="7" r="4"></circle> <path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2"></path> <path d="M16 11h6m-3 -3v6"></path></svg> </span>
<span class="text-sm">Sign Up</span>
</a>
</li>
<li>
<a href="./forgot-password.html" class="flex items-center space-x-2 transition-colors rounded-lg text-zinc-400 group hover:bg-zinc-800 hover:text-white">
<span aria-hidden="true" class="p-2 transition-colors rounded-lg group-hover:bg-zinc-900 group-hover:text-white">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <line x1="3" y1="3" x2="21" y2="21"></line> <path d="M19 19a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-6a2 2 0 0 1 2 -2h4m4 0h2a2 2 0 0 1 2 2v2"></path> <circle cx="12" cy="16" r="1"></circle> <path d="M8 11v-3m.712 -3.278a4 4 0 0 1 7.288 2.278v4"></path></svg> </span>
<span class="text-sm">Forgot Password</span>
</a>
</li>
<li>
<a href="./404.html" class="flex items-center space-x-2 transition-colors rounded-lg text-zinc-400 group hover:bg-zinc-800 hover:text-white">
<span aria-hidden="true" class="p-2 transition-colors rounded-lg group-hover:bg-zinc-900 group-hover:text-white">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <path d="M12 9v2m0 4v.01"></path> <path d="M5 19h14a2 2 0 0 0 1.84 -2.75l-7.1 -12.25a2 2 0 0 0 -3.5 0l-7.1 12.25a2 2 0 0 0 1.75 2.75"></path></svg> </span>
<span class="text-sm">404</span>
</a>
</li>
<li>
<a href="./blank.html" class="flex items-center space-x-2 transition-colors rounded-lg text-zinc-400 group hover:bg-zinc-800 hover:text-white">
<span aria-hidden="true" class="p-2 transition-colors rounded-lg group-hover:bg-zinc-900 group-hover:text-white">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path stroke="none" d="M0 0h24v24H0z" fill="none"></path> <rect x="4" y="4" width="16" height="16" rx="2"></rect></svg> </span>
<span class="text-sm">Blank</span>
</a>
</li>
</ul>
</div>
<a href="#" class="flex items-center space-x-2 transition-colors rounded-lg lg:hidden text-zinc-400 group hover:bg-zinc-600 hover:text-white">
<span aria-hidden="true" class="p-2 transition-colors rounded-lg group-hover:bg-zinc-700 group-hover:text-white">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg>
</span>
<span class="text-sm">Notifications</span>
</a>
<!-- <a href="#" class="flex items-center space-x-2 transition-colors rounded-lg lg:hidden text-zinc-400 group hover:bg-zinc-600 hover:text-white">
<span aria-hidden="true" class="p-2 transition-colors rounded-lg group-hover:bg-zinc-700 group-hover:text-white">
<svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
</span>
<span class="text-sm">Settings</span>
</a> -->
</div>
</nav>
<section x-show="currentSidebarTab == 'notificationsTab'" class="flex flex-col h-full text-zinc-400">
<h2 class="text-white flex items-center justify-center flex-shrink-0 px-4 py-[28.5px] uppercase font-extrabold tracking-wider">Notifications</h2>
<ul class="overflow-y-auto divide-y divide-zinc-800 max-h-80">
<li>
<a href="#" class="block px-4 py-2 hover:text-zinc-500">
<div class="h-8 text-xs font-light">You have received a purchase order amount of $104.85.</div>
<div class="text-xs text-right"><small>30 minutes ago</small></div>
</a>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:text-zinc-500">
<div class="h-8 text-xs font-light">You have 3 new task requests by Alan to approve.</div>
<div class="text-xs text-right"><small>5 hours ago</small></div>
</a>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:text-zinc-500">
<div class="h-8 text-xs font-light">You have 99 unread messages.</div>
<div class="text-xs text-right"><small>10 days ago</small></div>
</a>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:text-zinc-500">
<div class="h-8 text-xs font-light">You have 6 new notifications.</div>
<div class="text-xs text-right"><small>2 weeks ago</small></div>
</a>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:text-zinc-500">
<div class="h-8 text-xs font-light">You have a pending delivery for order #18035025.</div>
<div class="text-xs text-right"><small>3 months ago</small></div>
</a>
</li>
<li>
<a href="#" class="block px-4 py-2 hover:text-zinc-500">
<div class="h-8 text-xs font-light">You have made a new transaction amout of $308.95.</div>
<div class="text-xs text-right"><small>4 years ago</small></div>
</a>
</li>
</ul>
</section>
<!-- <section x-show="currentSidebarTab == 'settingsTab'" class="flex items-center justify-center flex-shrink-0 px-4 py-[28.5px] uppercase font-extrabold tracking-wider">
<h2 class="text-white">Settings</h2>
</section> -->
</div>
</div>
<div class="container max-w-4xl xl:max-w-7xl mx-auto">
<!-- Main -->
<main class="px-4 pb-24 overflow-hidden">
<!-- Breadcrumb -->
<h6 class="flex justify-start flex-1 py-8 text-sm text-zinc-700"><small>Dashboard / Alerts</small></h6>
<!-- Content -->
<!-- Regular -->
<div class="mb-4">
<p class="mb-1 text-xl font-semibold">Regular</p>
</div>
<div x-data role="alert-regular" class="mb-4">
<div id="alertExample" class="flex justify-between gap-4 p-4 mb-1 text-sm text-white rounded bg-zinc-700" @click="$el.remove()">
<span>This is a regular alert example.</span>
<button aria-label="Close alert regular example">
<span aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" class="transition stroke-white" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</span>
</button>
</div>
</div>
<!-- Icon -->
<div class="mb-4">
<p class="mb-1 text-xl font-semibold">Icon</p>
</div>
<div x-data role="alert-icon" class="mb-4">
<div class="flex items-center justify-between gap-4 p-4 mb-1 text-sm text-white rounded bg-zinc-700" @click="$el.remove()">
<div class="flex items-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<circle cx="12" cy="12" r="9" />
<line x1="12" y1="8" x2="12" y2="12" />
<line x1="12" y1="16" x2="12.01" y2="16" />
</svg>
<span>This is an alert with icon example.</span>
</div>
<button aria-label="Close alert icon example">
<span aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" class="transition stroke-white" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</span>
</button>
</div>
</div>
<!-- Notifications -->
<div class="mb-4">
<p class="mb-1 text-xl font-semibold">Notifications</p>
</div>
<div x-data role="alert-regular" class="mb-4">
<div id="alertExample" class="flex justify-between gap-4 p-4 mb-1 text-sm text-green-700 bg-green-200 border border-green-700 rounded" @click="$el.remove()">
<span>This is a success notification.</span>
<button aria-label="Close success notification example">
<span aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" class="transition stroke-green-700" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</span>
</button>
</div>
</div>
<div x-data role="alert-regular" class="mb-4">
<div id="alertExample" class="flex justify-between gap-4 p-4 mb-1 text-sm text-red-700 bg-red-200 border border-red-700 rounded" @click="$el.remove()">
<span>This is a failure notification.</span>
<button aria-label="Close failure notification example">
<span aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" class="transition stroke-red-700" width="20" height="20" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"/>
<line x1="18" y1="6" x2="6" y2="18" />
<line x1="6" y1="6" x2="18" y2="18" />
</svg>
</span>
</button>
</div>
</div>
</main>
</div>
<!-- Footer -->
<footer class="fixed bottom-0 hidden w-full mb-1 text-center lg:block lg:w-auto lg:right-6">
<p class="text-sm"><small>Dashbuilt © <span id="footerCurrentYear"></span></small></p>
<!--
Handle footer current year.
These codes below are called here instead of being inside script.js to
avoid FOUC should script.js type is defined as a module.
-------------------------------------------------------------------------->
<script>
const element = document.getElementById("footerCurrentYear");
element.innerHTML = new Date().getFullYear();
</script>
</footer>
</div>
</div>
</body>
</html>