-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathorder.html
186 lines (176 loc) · 7.45 KB
/
order.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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>We-Go Order</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<!-- Remote Style Sheets -->
<link href="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css" rel="stylesheet">
<link rel="stylesheet"
href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.css"
type="text/css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!-- Local CSS files-->
<link href="css/order.css" rel="stylesheet" />
<!-- Local Common Services CSS files -->
<link href="../common/css/common.css" rel="stylesheet" />
<!-- Remote Javascript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf"
crossorigin="anonymous"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script
src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.min.js"></script>
<!-- Promise polyfill script required to use Mapbox GL Geocoder in IE 11 -->
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script>
<!-- Local Common Services JS files-->
<script src="../common/js/fetchLoggedInUser.js"></script>
<script src="../common/js/logoutUser.js"></script>
<script src="../common/js/validation.js"></script>
<script src="../common/js/common.js"></script>
<!-- Local Javascript -->
<script src="js/order.js"></script>
</head>
<body class="m-0 h-100">
<!-- Navigation Bar -->
<header class="p-3 fixed-top bg-white">
<div id="mainAlert" class="alert alert-danger d-none alert-height" role="alert">
An error has occurred.
</div>
<div class="container-fluid container-xl d-flex align-items-center justify-content-between">
<a class="navbar-brand-text text-primary text-decoration-none" href="/index.html">WeGo</a>
<nav id="navbar" class="navbar">
<ul>
<li id="usernameList" class="nav-item dropdown logged-in-user">
<a class="nav-link dropdown-toggle px-3 py-2 text-dark" href="#" id="usernameLabel"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
Username
</a>
<div class="dropdown-menu" aria-labelledby="usernameLabel">
<a class="pe-4 dropdown-item" href="dashboard.html">Dashboard</a>
<a class="pe-4 dropdown-item" href="#">Account</a>
<a class="pe-4 dropdown-item" href="orders.html">Orders</a>
</div>
</li>
<li class="nav-item mx-3">
<button id="logoutButton" class="w-100 nav-item btn color-primary px-3 py-2 text-light"
style="text-align: left!important;">Log out</button>
</li>
</ul>
<i id="mobile-nav-toggle" class="bi text-secondary mobile-nav-toggle bi-list"></i>
</nav>
</div>
</header>
<main id="main" class="d-flex justify-content-center align-items-center min-vh-100 nav-height-padding">
<div class="container">
<div class="card shadow-lg p-3 bg-white card-rounded">
<div class="card-body p-5">
<h2 id="orderTitle" class="mb-4">Plugin Order</h2>
<h5 class="mb-3">Delivery Address</h5>
<div class="row mb-2">
<div class="col-sm">
<label class="col-form-label-sm" for="firstName">First Name</label>
<input type="text" class="form-control" id="firstName" disabled>
</div>
<div class="col-sm">
<label class="col-form-label-sm" for="lastName">Last Name</label>
<input type="text" class="form-control" id="lastName" disabled>
</div>
</div>
<div class="col-12 mb-2">
<label class="col-form-label-sm" for="phoneNumber">Phone Number</label>
<input type="text" class="form-control" id="phoneNumber" disabled>
</div>
<div class="col-12 mb-2">
<label class="col-form-label-sm" for="email">Email</label>
<input type="email" class="form-control" id="email" disabled>
</div>
<div class="col-12 mb-2">
<label class="col-form-label-sm" for="streetAddress">Street Address</label>
<div id="geocoder"></div>
<div class="invalid-feedback">
Make sure street address is valid.
</div>
</div>
<div class="col-12 mb-2">
<label class="col-form-label-sm" for="city">City</label>
<input type="text" class="form-control" id="city" required>
<div class="invalid-feedback">
Make sure city is valid.
</div>
</div>
<div class="row mb-2">
<div class="col-sm">
<label class="col-form-label-sm" for="state">State</label>
<input type="text" class="form-control" id="state" required>
<div class="invalid-feedback">
Make sure state is valid.
</div>
</div>
<div class="col-sm">
<label class="col-form-label-sm" for="zipCode">Zip Code</label>
<input type="text" class="form-control" id="zipCode" required>
<div class="invalid-feedback">
Make sure zip code valid.
</div>
</div>
</div>
<hr class="my-4">
<h5 class="mb-3">Payment</h5>
<div class="form-check">
<input class="form-check-input" checked type="radio" name="flexRadioDefault" id="creditCardRadio">
<label class="form-check-label" for="creditCardRadio">
Credit Card
</label>
</div>
<div class="form-check pb-2">
<input class="form-check-input" type="radio" name="flexRadioDefault" id="debitCardRadio">
<label class="form-check-label" for="debitCardRadio">
Debit Card
</label>
</div>
<div class="col-12 mb-2">
<label class="col-form-label-sm" for="cardholderName">Cardholder's Name</label>
<input type="text" class="form-control" id="cardholderName" required>
<div class="invalid-feedback">
Make sure cardholder's name is not empty.
</div>
</div>
<div class="col-12 mb-2">
<label class="col-form-label-sm" for="cardNumber">Card Number</label>
<input type="number" class="form-control" id="cardNumber" required>
<div class="invalid-feedback">
Make sure card number is not empty and valid.
</div>
</div>
<div class="row mb-2">
<div class="col-sm">
<label class="col-form-label-sm" for="expiration">Expiration</label>
<input type="month" class="form-control" id="expiration" required>
<div class="invalid-feedback">
Make sure cvv is not empty.
</div>
</div>
<div class="col-sm">
<label class="col-form-label-sm" for="cvv">CVV</label>
<input type="number" class="form-control" id="cvv" required>
<div class="invalid-feedback">
Make sure cvv is not empty.
</div>
</div>
</div>
<hr class="my-4">
<button id="orderButton" type="submit" class="w-100 btn btn-primary btn-lg">
<span id="orderButtonSpinner" role="status" aria-hidden="true" class="d-none spinner-border spinner-border-sm align-middle" role="status" aria-hidden="true"></span>
Submit Order
</button>
</div>
</div>
</div>
</main>
</body>
</html>