-
Notifications
You must be signed in to change notification settings - Fork 0
/
customer.html
135 lines (135 loc) · 4.85 KB
/
customer.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JAMBODROP</title>
<link rel="stylesheet" href="./css/customer.css" />
<script defer src="./js/customer.js"></script>
<!-- <script defer src="./js/index.js"></script> -->
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
crossorigin="anonymous"
></script>
<script src="https://kit.fontawesome.com/a8cbbd77a3.js" crossorigin="anonymous"></script>
</head>
<body>
<!-- This section will hold the navigatio -->
<section id="navigation">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<p class="navbar-brand">AnimeWonders</p>
<form class="d-flex" role="search">
<input
id="searchInput"
class="form-control me-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button id="searchButton" class="btn btn-outline-success" type="submit">
Search
</button>
</form>
<section>
<!-- This will deal with showing the customer what they have ordered once they click the cart
button -->
<i id="cartMenu" class="fa-solid fa-cart-shopping"></i>
<div>
<ul id="cartList">
<!-- This is where the list items will go -->
</ul>
<p>Total: Ksh <span id="total">0</span></p>
</div>
</section>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link" aria-current="page" href="#">Home</a>
<a class="nav-link" href="#">Products</a>
<a class="nav-link" href="#">Reviews</a>
<a class="nav-link" href="#">Contact</a>
</div>
</div>
</div>
</nav>
</section>
<section>
<!-- This will hold the headings and the introductory/greetings -->
<h1>Welcome To AnimeWonders Emporium</h1>
<h5>Venue for all your Anime Needs</h5>
<p>
<em
><strong
>Unlock the Magic of Anime, One Collectible at a Time</strong
></em
>
</p>
<p>
<em
>Welcome to our Shop remember to always buy everything with a smile,
and leave a good review.It never hurts to be nice. Incase of any
problem you can can use the contacts below or leave a review and we'll
get back to you. LOVE
</em>
</p>
</section>
<section>
<!-- This will hold all the products -->
<ul id="item-list" class="row">
</ul>
</section>
<section>
<!-- This will deal with showing the customer what they have ordered once they click the cart
button -->
<div>
<ul id="cartList">
<!-- This is where the list items will go -->
</ul>
</div>
</section>
<section>
<!-- This will hold the review forms, and the reviews on the products -->
<form action="POST" id="review-form">
<div>
<label for="customerName">Name:</label>
<input type="text" id="customerName" placeholder="Enter your name..." required>
</div>
<div>
<label for="customerReview">Review:</label>
<input type="text" id="customerReview" required placeholder="Enter your Review">
</div>
<button type="submit" id="submitReview">Submit</button>
</form>
<div>
<ul id="review-list"></ul>
</div>
</section>
<section>
<!-- This will hold the footer of the website, it will contain
contact information, location, links to the socials -->
<footer>
<div id="icons">
<p>Follow us on:
<img src="./main/facebook.svg" alt="facebook logo">
<img src="./main/instagram.svg" alt="Instagram logo">
<img src="./main/whatsapp.svg" alt="Whatsapp logo">
</p>
</div>
<span id="location">We are Located at:</span>
<p>Thank You for Shoppin with us</p>
</footer>
</section>
</body>
</html>