-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
133 lines (119 loc) · 5.92 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Dashboard</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="sidebar-overlay" class="overlay w-100 vh-100 position-fixed d-none"></div>
<!-- sidebar -->
<div class="col-md-3 col-lg-2 px-0 position-fixed h-100 bg-white shadow-sm sidebar" id="sidebar">
<h1 class="bi bi-bootstrap text-primary d-flex my-4 justify-content-center"></h1>
<div class="list-group rounded-0">
<a href="#" class="list-group-item list-group-item-action active border-0 d-flex align-items-center">
<span class="bi bi-border-all"></span>
<span class="ml-2">Dashboard</span>
</a>
<a href="#" class="list-group-item list-group-item-action border-0 align-items-center">
<span class="bi bi-box"></span>
<span class="ml-2">Products</span>
</a>
<button
class="list-group-item list-group-item-action border-0 d-flex justify-content-between align-items-center"
data-toggle="collapse" data-target="#sale-collapse">
<div>
<span class="bi bi-cart-dash"></span>
<span class="ml-2">Sale</span>
</div>
<span class="bi bi-chevron-down small"></span>
</button>
<div class="collapse" id="sale-collapse" data-parent="#sidebar">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action border-0 pl-5">Customers</a>
<a href="#" class="list-group-item list-group-item-action border-0 pl-5">Sales</a>
</div>
</div>
<button
class="list-group-item list-group-item-action border-0 d-flex justify-content-between align-items-center"
data-toggle="collapse" data-target="#purchase-collapse">
<div>
<span class="bi bi-cart-plus"></span>
<span class="ml-2">Purchase</span>
</div>
<span class="bi bi-chevron-down small"></span>
</button>
<div class="collapse" id="purchase-collapse" data-parent="#sidebar">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action border-0 pl-5">Sellers</a>
<a href="#" class="list-group-item list-group-item-action border-0 pl-5">Purchases</a>
</div>
</div>
</div>
</div>
<div class="col-md-9 col-lg-10 ml-md-auto px-0 ms-md-auto">
<!-- top nav -->
<nav class="w-100 d-flex px-4 py-2 mb-4 shadow-sm">
<!-- close sidebar -->
<button class="btn py-0 d-lg-none" id="open-sidebar">
<span class="bi bi-list text-primary h3"></span>
</button>
<div class="dropdown ml-auto">
<button class="btn py-0 d-flex align-items-center" id="logout-dropdown" data-toggle="dropdown"
aria-expanded="false">
<span class="bi bi-person text-primary h4"></span>
<span class="bi bi-chevron-down ml-1 mb-2 small"></span>
</button>
<div class="dropdown-menu dropdown-menu-right border-0 shadow-sm" aria-labelledby="logout-dropdown">
<a class="dropdown-item" href="#">Logout</a>
<a class="dropdown-item" href="#">Settings</a>
</div>
</div>
</nav>
<!-- main content -->
<main class="p-4 min-vh-100">
<section class="row">
<div class="col-md-6 col-lg-4">
<!-- card -->
<article class="p-4 rounded shadow-sm border-left
mb-4">
<a href="#" class="d-flex align-items-center">
<span class="bi bi-box h5"></span>
<h5 class="ml-2">Products</h5>
</a>
</article>
</div>
<div class="col-md-6 col-lg-4">
<article class="p-4 rounded shadow-sm border-left mb-4">
<a href="#" class="d-flex align-items-center">
<span class="bi bi-person h5"></span>
<h5 class="ml-2">Customers</h5>
</a>
</article>
</div>
<div class="col-md-6 col-lg-4">
<article class="p-4 rounded shadow-sm border-left mb-4">
<a href="#" class="d-flex align-items-center">
<span class="bi bi-person-check h5"></span>
<h5 class="ml-2">Sellers</h5>
</a>
</article>
</div>
</section>
<div class="jumbotron jumbotron-fluid rounded bg-white border-0 shadow-sm border-left px-4">
<div class="container">
<h1 class="display-4 mb-2 text-primary">Simple</h1>
<p class="lead text-muted">Simple Admin Dashboard with Bootstrap.</p>
</div>
</div>
</main>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<script src="main.js"></script>
</body>
</html>