-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathaccount.html
138 lines (132 loc) · 6.97 KB
/
account.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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags and other head content -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Account - FashionVerse</title>
<!-- Favicon-->
<link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
<!-- Bootstrap icons-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel="stylesheet" />
<!-- Core theme CSS (includes Bootstrap)-->
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container px-4 px-lg-5">
<a class="navbar-brand" href="index.html">FashionVerse</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-4">
<li class="nav-item"><a class="nav-link active" aria-current="page" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#!">About</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Shop</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#!">All Products</a></li>
<li><hr class="dropdown-divider" /></li>
<li><a class="dropdown-item" href="#!">Popular Items</a></li>
<li><a class="dropdown-item" href="#!">New Arrivals</a></li>
</ul>
</li>
</ul>
<form class="d-flex">
<button class="btn btn-outline-dark me-2" type="button" onclick="openCartPage()">
<i class="bi bi-cart-fill me-1"></i>
Cart
<span class="badge bg-dark text-white ms-1 rounded-pill" id="cartItemCount">0</span>
</button>
<div style="width: 10px;"></div>
<button class="btn btn-outline-dark" type="button" onclick="openAccountPage()">
<i class="bi bi-person me-1"></i>
Account
</button>
</form>
</div>
</div>
</nav>
<!-- Header-->
<header class="bg-dark py-5">
<div class="container px-4 px-lg-5 my-5">
<div class="text-center text-white">
<h1 class="display-4 fw-bolder">FashionVerse Account</h1>
<p class="lead fw-normal text-white-50 mb-0">Welcome to your FashionVerse account</p>
</div>
</div>
</header>
<section class="py-5">
<div class="container px-4 px-lg-5 mt-5">
<!-- Sign Up / Sign In Form -->
<div class="card">
<div class="card-body">
<div class="mb-3">
<h5 class="card-title">Sign Up or Sign In</h5>
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-bs-toggle="tab" href="#signupTab">Sign Up</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#signinTab">Sign In</a>
</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade show active" id="signupTab">
<div class="mb-3">
<label for="signupUsername" class="form-label">Username</label>
<input type="text" class="form-control" id="signupUsername" required>
</div>
<div class="mb-3">
<label for="signupEmail" class="form-label">Email</label>
<input type="email" class="form-control" id="signupEmail" required>
</div>
<div class="mb-3">
<label for="signupPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="signupPassword" required minlength="6">
</div>
<div class="mb-3">
<label for="verifyPassword" class="form-label">Verify Password</label>
<input type="password" class="form-control" id="verifyPassword" required minlength="6">
</div>
<button type="button" class="btn btn-primary" id="signupBtn">Sign Up</button>
</div>
<div class="tab-pane fade" id="signinTab">
<div class="mb-3">
<label for="signinEmail" class="form-label">Email</label>
<input type="email" class="form-control" id="signinEmail" required>
</div>
<div class="mb-3">
<label for="signinPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="signinPassword" required>
</div>
<button type="button" class="btn btn-primary" id="signinBtn">Sign In</button>
</div>
</div>
</div>
</div>
</div>
</section>
<footer class="py-5 bg-dark">
<div class="container">
<p class="m-0 text-center text-white">Copyright © FashionVerse 2023</p>
</div>
</footer>
<!-- Bootstrap core JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script src="js/scripts.js"></script>
<!-- Include the cartscript.js file -->
<script src="js/cartscript.js"></script>
<!-- Include the updated accountscript.js file -->
<script src="js/accountscript.js"></script>
<script>
// Fetch and display cart items on page load
document.addEventListener('DOMContentLoaded', fetchCartItems);
</script>
</body>
</html>