-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
110 lines (102 loc) · 5.72 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- bootstartp icon link -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<!-- css file -->
<link rel="stylesheet" href="./styles/output.css" />
<link rel="stylesheet" href="./styles/mini.css">
<link rel="icon" href="https://e-jurnal-one.vercel.app/assets/img/logo.png">
<title>ADMIN-DASHBOAR</title>
</head>
<body class="bg-slate-50">
<!-- HEADER START -->
<header class="fixed top-0 z-30 bg-white py-4 w-full shadow-lg shadow-slate-150">
<nav class="containr-fill flex items-center justify-between ">
<ul class="flex items-center gap-6">
<li>
<a href="#" class="flex items-center gap-3 font-medium">
<img class="w-[32px] h-[32px]" src="https://e-jurnal-one.vercel.app/assets/img/logo.png"
alt="icon">
ADMIN DASHBOAR
</a>
</li>
<li>
<button id="navigition-menu" class="text-[24px]"><i class="bi bi-list"></i></button>
</li>
<li class="border w-[300px] relative rounded-md">
<input
class="w-full py-1 px-4 pr-9 rounded-md outline-none focus:shadow-slate-300 focus:shadow-md"
type="text" id="search" placeholder="search.....">
<i class="bi bi-search absolute right-2 top-1"></i>
</li>
</ul>
<button id="togl-btn" class="flex items-center gap-2 relative">
<img class="rounded-full" src="https://picsum.photos/id/12/36/36" alt="icon">
<span>M. Akbarov</span>
<ul id="togl-menyu"
class="togl-menyu absolute top-[180%] right-[10px] flex flex-col items-start rounded-md bg-white ">
<li class="py-3 px-5 hover:bg-slate-100 w-full rounded-t-md duration-200 cursor-pointer ">
<a href="#" class="flex items-center gap-3 w-full font-medium duration-200 hover:text-blue-600">
<i class="block bi bi-person-fill"></i>
<span class="block">My Profil</span>
</a>
</li>
<li class="py-3 px-5 hover:bg-slate-100 w-full duration-200 cursor-pointer ">
<a href="#" class="flex items-center gap-3 w-full font-medium duration-200 hover:text-blue-600">
<i class="block bi bi-gear-fill"></i>
<span class="block"> Setting</span>
</a>
</li>
<li id="login-out" class="py-3 px-5 hover:bg-slate-100 w-full duration-200 cursor-pointer " onclick="logiOut()">
<a href="./pages/login.html" class="flex items-center gap-3 w-full font-medium duration-200 hover:text-blue-600">
<i class="block bi bi-box-arrow-right"></i>
<span class="block">Sign Out</span>
</a>
</li>
<li class="py-3 px-5 hover:bg-slate-100 w-full rounded-b-md duration-200 cursor-pointer">
<a href="./pages/registration.html" class="flex items-center gap-3 w-full font-medium duration-200 hover:text-blue-600">
<i class="block bi bi-person-fill-check"></i>
<span class="block">Registration</span>
</a>
</li>
</ul>
</button>
</nav>
</header>
<!-- HEADER END -->
<!-- MAIN START -->
<main class="pt-[67px] flex ">
<!-- ASIDE START -->
<aside id="aside" class="min-w-[350px] absolute md:static min-h-screen shadow-lg shadow-slate-150 bg-white ">
<ul class="nav-menu p-3">
<!-- DIYNAMIK LIST -->
</ul>
</aside>
<!-- ASIDE END -->
<!-- INTRO SECTION START -->
<section id="intro" class="w-full p-5 pt-8">
<div class="w-full border-2 p-5">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia exercitationem ipsam, in accusamus
aut placeat accusantium at alias debitis tenetur velit numquam, sequi voluptas ratione quam ut
eveniet excepturi, fugiat natus culpa? Provident sequi soluta doloremque minima excepturi? Tempora
illo odit voluptate in ducimus dolor dolores, natus porro maiores sed corporis libero eum aperiam
blanditiis optio ut exercitationem, dolorem amet, necessitatibus alias! Repellendus in aut voluptate
delectus eaque, maiores quae. Nostrum ipsam incidunt nemo ut facere! Veritatis, ex excepturi fugit
porro quis blanditiis incidunt quidem, dolore atque quae ipsam quas, quos quo recusandae! Aut alias
veniam recusandae tempore consequatur quidem similique delectus voluptas possimus dolorum iste sed
repudiandae eaque, maiores autem est pariatur cumque accusamus quisquam aperiam consequuntur ducimus
voluptates placeat incidunt? In, beatae dolores.</p>
</div>
</section>
<!-- INTRO SECTION END -->
</main>
<!-- MAIN END -->
</body>
<script src="./assets/js/utils.js"></script>
<script src="./assets/js/constants.js"></script>
<script src="./assets/js/main.js"></script>
</html>