-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathadmin.html
executable file
·137 lines (125 loc) · 4.04 KB
/
admin.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Product List</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We"
crossorigin="anonymous"
/>
<style>
#form-container {
display: block;
}
.template {
display: none;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Admin</a>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNav"
aria-controls="navbarNav"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li id="add-product-button" class="nav-item">
<a class="nav-link active" aria-current="page" href="#"
>Add Product</a
>
</li>
<li id="list-product-button" class="nav-item">
<a class="nav-link" href="#">Show Products</a>
</li>
<li class="nav-item">
<h4>
<span class="badge bg-secondary"
>Cart <span id="cartCount"></span
></span>
</h4>
</li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid mt-3 row">
<div id="form-container" class="mt-4 col-4">
<div class="mx-auto border rounded shadow p-3">
<h1>Product Form</h1>
<hr />
<form id="productForm">
<div class="mb-3">
<label class="form-label">Product Name</label>
<input type="text" class="form-control" id="productNameInput" />
</div>
<div class="mb-3">
<label class="form-label">Product Description</label>
<textarea
name="description"
id="productDescriptionInput"
class="form-control"
></textarea>
</div>
<div class="mb-3">
<label class="form-label">Product Image URL</label>
<input
type="text"
class="form-control"
id="productImageUrlInput"
/>
</div>
<div class="mb-3">
<input type="submit" value="Add Product" class="btn btn-dark" />
</div>
</form>
</div>
</div>
<div id="list-container" class="col">
<h1>List of products</h1>
<div id="list" class="mt-3 row"></div>
</div>
</div>
<div class="col-4 template">
<div>
<div class="card">
<img
src="https://cdn.pixabay.com/photo/2015/01/08/18/25/desk-593327_960_720.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Title</h5>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores
eius praesentium vel, blanditiis amet culpa velit reiciendis
mollitia ipsa ab, cumque tempora atque deleniti dolorem harum sunt
veniam repellendus dignissimos.
</p>
<a href="#" id="addtocart" class="btn btn-dark">Add to cart</a>
<a href="#" id="removeFromCart" class="btn btn-danger hidden"
>Remove from cart</a
>
</div>
</div>
</div>
</div>
</body>
<script src="admin.js"></script>
</html>