-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
286 lines (253 loc) · 16.2 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
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
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!DOCTYPE html>
<html lang="en" dir="ltr">
<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>Kie's Snacks</title>
<link rel="shortcut icon" type="image/x-icon" href="images/Logo-transp%203.png"/>
<!---------------------------------------------------------------------------------------------->
<link rel="stylesheet" href="new-css/style.css">
<script type="text/javascript" src="script.js"></script>
<!---------------------------------------------------------------------------------------------->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
<!---------------------------------------------------------------------------------------------->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous">
</script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
crossorigin="anonymous">
</head>
<!---------------------------------------------------------------------------------------------->
<body onload="onloadAll()">
<!---------------------------------------HOME----------------------------------------->
<div class="container-fluid p-0" style="padding-top: 80px; background: #474B4F">
<nav id="menu" style="position: fixed; z-index: 999; background-color: #222629;" >
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<a href="home.html" class="logo">
<img src="images/Logo-transp%203.png" style="height: 3rem;padding: 0px 3px; margin-bottom:30px;margin-top: 12px; margin-left: 95px">
</a>
<!-------------------------------------HEADER NAV------------------------------------->
<ul>
<li><a href="home.html" class="text-white">HOME</a></li>
<li><a href="about.html" class="text-white">ABOUT</a></li>
<li><a onclick="home_page()" class="text-white">PRODUCTS</a></li>
<li><a href="contact.html" class="text-white">CONTACT</a></li>
<li><a href="faqs.html" class="text-white">FAQs</a></li>
<li><a data-toggle="modal" data-target=".orderCart">
<img src="images/round_shopping_cart_white_1x.png" style="height: 2rem;cursor: pointer">
<div style="width: 20px;height: 20px;background: #86c232;position: absolute; top: 20px; margin-left: 30px;border-radius: 50%">
<p id="order_number" style="position: absolute;margin-top: -7px;margin-left: 5px;color: #fff;font-size: 80%">0</p>
</div>
</a></li>
<li><a id="menu_login_button" data-toggle="modal" data-target=".login"><img src="images/user.png"></a></li>
<li><a id="menu_account_login" class="menu_account_hide" style="color: #fff; display: none;"></a></li>
</ul>
<!-------------------------------------HEADER NAV------------------------------------->
<div id="menu_logout">
<div id="menu_header22" class="khung p-3" style="margin: 0 auto;width: 200px; background: #86c232; border-radius: 8px; font-family: Helvetica, Arial, sans-serif;padding: 0.5rem;position: absolute;z-index: 999;margin-left: calc(100vw - 250px);margin-top: 5px;display: none;">
<p id="hello_user" class="text-white" style="opacity: 0.9"></p>
<div id="quanlydon" class="box p-1" style="height: 35px;display: none;">
<a href="dashboard.html">
<p style="cursor: pointer"><i class="fa fa-list-alt text-white mr-3" aria-hidden="true"></i>Dashboard</p></a>
</div>
<div class="box p-1" data-toggle="modal" data-target=".bd-example-modal-lg22" style="height: 35px">
<p style="cursor: pointer"><i class="fa fa-list-alt text-white mr-3" aria-hidden="true"></i>My Order</p>
</div>
<div class="box p-1" data-toggle="modal" data-target=".bd-example-modal-sm33" style="height: 35px">
<p style="cursor: pointer;"><i class="fa fa-key text-white mr-3" aria-hidden="true"></i>Change Pass</p>
</div>
<div class="box p-1" style="height: 35px">
<p style="cursor: pointer" onclick="Logout()"><i class="fa fa-sign-out text-white mr-3" aria-hidden="true"></i>Logout</p>
</div>
</div>
</div>
</nav>
<!---------------------------------------------------------------------------------------------------------------------------------->
<div class="modal fade bd-example-modal-lg22" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" >
<div class="modal-content p-3" style="width: 150%;left: -200px;">
<p class="font-weight-bold" style="font-size: 110%">My Order</p>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="10"
style="height:520px;overflow-y: scroll;padding-top: 5px;padding-right: 10px;">
<table class="table table-borderless">
<thead>
<tr>
<th scope="col" style="width: 20%;font-size: 115%;" >Customer Name</th>
<th scope="col" style="width: 44%;font-size: 115%;" class="text-center">Food</th>
<th scope="col" style="width: 18%;font-size: 115%;" class="text-center">Total</th>
<th scope="col" style="width: 18%;font-size: 115%;" class="text-center">Status</th>
</tr>
</thead>
<tbody id="prinfPaymentUser">
</tbody>
</table>
</div>
</div>
</div>
</div>
<!---------------------------------------------------------------------------------------------------------------------------------->
<div class="modal fade bd-example-modal-sm33 mt-5" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel33" aria-hidden="true" >
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div id="changepass" class=" iconpopup mt-4" style="margin: 0 auto; width: 80%;margin-bottom: 10%;">
<p class="text-center mb-3" style="font-weight: bold;margin-bottom: 2%;font-size: 120%">Change Password</p>
<p class="mt-3" style="margin-bottom: 2%;">Enter current password</p>
<input type="password" name="pass" id="passcurrent" class="form-control " >
<p class="mt-1" style="margin-bottom: 2%;">Enter New Password</p>
<input type="password" name="pass" id="passnew" class="form-control " >
<p class="mt-1" style="margin-bottom: 2%;">Confirm New Password</p>
<input type="password" name="pass" id="passnewrepeat" class="form-control " >
<p id="notification_change_pass" class="mt-4 text-center mb-0 " style="font-size: 90%;color: red;"></p>
<button class="btn btn-warning float-right mt-3" style=" background: #86c232; border: #86c232; color: white" onclick="Changepassword()">Change</button>
</div>
</div>
</div>
</div>
<!---------------------------------------------------------------------------------------------------------------------------------->
<div class="modal fade login mt-5 " tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content ">
<div class="cart_box" style="width: 100%;margin: auto;">
<div class="login_img_box float-left" style="width: 50%;height: 450px;background: #222629">
<img src="images/Transparent%203.png" width="100%" height="100%">
</div>
<div id="login_box" >
<div class="login_info_box float-right p-5" style="width: 50%;height: 450px;">
<p class="text-center font-weight-bold" style="font-size: 140%">Login</p>
<label class="font-weight-bold mt-3">Username</label>
<input id="usernameLogin" type="text" class="form-control" aria-describedby="emailHelp" placeholder="" style="outline: none;">
<label class="mt-3 font-weight-bold">Password</label>
<input id="passwordLogin" type="password" class="form-control" aria-describedby="emailHelp" placeholder="">
<button onclick="Login()" class="btn btn-primary mt-4" style="width: 100%;background: #86c232;border: 0;outline: none;">Login</button>
<p id="statusLogin" class="text-center mt-4" style="font-size: 90%;color: red;"></p>
<p onclick="move_signup()" class="text-center mt-3" style="font-size: 90%">Dont have an account? <strong style="color:#86c232; cursor: pointer">Sign up here</strong> </p>
</div>
</div>
<div id="signup_box" style="display: none;">
<div class="signup_info_box float-right p-4 pl-5 pr-5" style="width: 50%;height: 450px;">
<p class="text-center font-weight-bold" style="font-size: 140%">Sign up</p>
<label class="font-weight-bold mt-1">Username</label>
<input id="usernameSignup" type="email" class="form-control" aria-describedby="emailHelp" placeholder="" style="outline: none;">
<label class="mt-3 font-weight-bold">Password</label>
<input id="passwordSignup" type="password" class="form-control" aria-describedby="emailHelp" placeholder="">
<label class="mt-3 font-weight-bold">Confirm Password</label>
<input id="RepasswordSignup" type="password" class="form-control" aria-describedby="emailHelp" placeholder="">
<button onclick="Signup()" class="btn btn-primary mt-4" style="width: 100%;background: #86c232;border: 0;outline: none;">
Login</button>
<p id="statusSignup" class="text-center mt-3 mb-1" style="font-size: 90%;color: red;"></p>
<p onclick="move_login()" class="text-center mt-0" style="font-size: 90%">Already have an account,<strong style="color:#86c232;cursor: pointer"> Login here</strong> </p>
</div>
</div>
<div style="clear: both;">
</div>
</div>
</div>
</div>
</div>
<!---------------------------------------------------------------------------------------------------------------------------------->
<div class="modal fade orderCart mt-3 " tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content" style="background: #ddd">
<div id="checkout_form" class="cart_box pl-5 pt-2 shadow-sm mt-3 pb-4" style="width: 100%;margin: auto; ">
<p class="ml-2" style="font-size: 130%;font-weight: bold;">My Cart</p>
<div data-spy="scroll" data-target="#myScrollspy" data-offset="10"
style="height:340px; overflow-y: scroll;padding-top: 5px;padding-right: 10px;">
<table class="table table-borderless">
<thead>
<tr>
<th scope="col" style="width: 40%;font-size: 115%;" >Order</th>
<th scope="col" style="width: 20%;font-size: 115%;" class="text-center">Quantity</th>
<th scope="col" style="width: 20%;font-size: 115%;" class="text-center">Price</th>
<th scope="col" style="width: 20%;font-size: 115%;" class="text-center">Action</th>
</tr>
</thead>
<tbody id="prinf_order_cart">
</tbody>
</table>
</div>
<div class="float-left pl-2" style="width: 30%;">
<p class="font-weight-bold mt-2" style="font-size: 115%">Total</p>
</div>
<div class="float-right pr-5" style="width: 30%;">
<p id="total_money" class="font-weight-bold float-right mt-2" style="font-size: 115%"> </p>
</div>
<div style="clear: both;"></div>
<div onclick="checkout()" class="btn mr-5 text-white float-right" style="cursor: pointer; background: #86c232;">Payment</div>
<div style="clear: both;"></div>
</div>
<div id="payment_form" class="p-5" style="width: 100%;height: 400px;display: none;">
<div class="choose_box float-left" style="width: 60%;">
<p class="font-weight-bold" style="font-size: 130%">Payment</p>
<p class="mb-2 font-weight-bold">Choose Payment</p>
<div class="payment_choose_box" style="width: 60%">
<div class="float-left pr-1 pb-1" style="width: 50%;height: 80px;">
<img onclick="nama()" class="payment_nama" src="images/payment/GCash.png" width="100%" height="100%" style="border: 1px solid #d7d7d7; background: #fff">
</div>
<div class="float-right pr-1 pb-1" style="width: 50%;height: 80px;">
<img onclick="sacom()" class="payment_sacom pl-3 pr-3" src="images/payment/images.png" width="100%" height="100%" style="border: 1px solid #d7d7d7; background: #fff">
</div>
<div style="clear: both;">
</div>
</div>
</div>
<div class="choose_box p-3 float-right" style="width: 40%;height: 100px;">
<label for="exampleInputEmail1">Name</label>
<input id="name_customer" type="text" class="form-control " id="exampleInputEmail1" aria-describedby="emailHelp">
<label for="exampleInputEmail1" class="mt-3">Phone Number</label>
<input id="phone_customer" type="text" class="form-control " id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="">
<label for="exampleInputEmail1" class="mt-3">Address</label>
<input id="address_customer" type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="">
<button onclick="payment()" class="btn btn-primary float-right mt-3" style="border: #86c232;background-color: #86c232">Confirm Order</button>
</div>
</div>
</div>
</div>
</div>
<!---------------------------------------------------------------------------------------------------------------------------------->
<!--Products-->
<div id="list_food_home" class="container" >
<div class="row" id="prinf_food" >
</div>
</div>
<!---------------------------------------------------------------------------------------------------------------------------------->
</div>
<section class="foot">
<div class="share">
<a href="https://www.facebook.com/kiessnacks" class="fa fa-facebook-f"></a>
<a href="https://www.instagram.com/explore/locations/113260140101108/kies-snacks/" class="fa fa-instagram"></a>
</div>
<div class="links">
<a href="home.html">home</a>
<a href="about.html">about Us</a>
<a href="index.html">products</a>
<a href="contact.html">contact Us</a>
<a href="faqs.html">fAQs</a>
</div>
<div class="credit">created by <span>Group 6</span> | all rights reserved</div>
</section>
<!---------------------------------------------------------------------------------------------------------------------------------->
<script src="script.js"></script>
</body>
</html>