-
Notifications
You must be signed in to change notification settings - Fork 0
/
fixit.html
505 lines (419 loc) · 24.1 KB
/
fixit.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
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
<!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">
<title>CycleON</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<link href="assets/css/fixit.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js">
</script>
<link rel="stylesheet" href="assets/css/app.css" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
.card .card-action a {
color: #fff;
}
.card .card-action a:hover {
color: lightgrey;
}
</style>
</head>
<body ng-app="cycleapp" style="background-color:#14A3DE;">
<nav>
<div id="profile" ng-controller="AccountController">
<ul>
<img class="titleImage" style="float:right;margin-right:130px;margin-top:3px;margin-bottom:3px;height:50px;padding-right:30px;" src="assets/img/170whilwithguy.png" />
<img style="float:right;margin-right:-280px;margin-top:11px;" src="assets/img/shoppingcartwhite2%20copy.png" />
</ul>
<ul id="slide-out" class="side-nav">
<li>
<p style="color:black;line-height: 16px;"><img class="faceimage" align="center" src="http://lorempixel.com/70/70/"> <b id="name">{{name}}</b>
<br> </p>
</li>
<hr>
<div id="nav" ng-controller="NavController">
<div ng-repeat="link in links">
<li><a ng-href="{{link.url}}">{{link.title}}</a></li>
</div>
</div>
<br>
<br>
<hr>
<li><a href="#!">My Account</a></li>
<li><a href="login.html">Logout</a></li>
</ul>
<a href="#" data-activates="slide-out" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</div>
</nav>
<!--Menu End-->
<!--Main Content-->
<div class="main" ng-controller="RewardsController">
<!--Header-->
<div id="header">
<div class="content">
<div class="col s4">
<div id="logo"></div>
</div>
<div class="col s8">
<h1>Fix it</h1>
<br>
</div>
</div>
</div>
<!--Header End-->
<!--Rewards-->
<div id="ProblemBike" class="col s12 m6">
<div class="card hoverable">
<div class="card-content">
<span class="card-title grey-text text-darken-4">
Please Select Problem Area:
</span>
<br>
<br>
<div class="col s10">
<img id="repairBike" style="margin-left:5%;" src="assets/img/FixItBike.png"> </div>
</div>
</div>
</div>
<div id="OptionsSelectable" class="col s12 m6">
<div class="card hoverable">
<div class="card-content">
<br>
<div class="col s10">
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header"><i class="material-icons">settings</i>Wheels</div>
<div class="collapsible-body">
<!-- Input Check -->
<p>
<input type="checkbox" id="test1" />
<label for="test1">Repair Bent Spokes</label>
</p>
<!-- End Input Check -->
<!-- Input Check -->
<p>
<input type="checkbox" id="test2" />
<label for="test2">Repair Buckled Wheel</label>
</p>
<!-- End Input Check -->
<!-- Input Check -->
<p>
<input type="checkbox" id="test3" />
<label for="test3">Repair Wheel Bearing</label>
</p>
<!-- End Input Check -->
<!-- Input Check -->
<p>
<input type="checkbox" id="test4" />
<label for="test4">Repair Loose Reflectors</label>
</p>
<!-- End Input Check -->
</div>
</li>
<li>
<div id="keepMe" class="collapsible-header"><i class="material-icons">settings</i>Tyre</div>
<div class="collapsible-body">
<!-- Input Check -->
<p id="OptionOne">
<input type="checkbox" id="test6" />
<label for="test6">Repair Puncture</label>
</p>
<!-- End Input Check -->
<!-- Input Check -->
<p>
<input type="checkbox" id="test7" />
<label for="test7">Repair Ripped Tyre</label>
</p>
<!-- End Input Check -->
<!-- Input Check -->
<p>
<input type="checkbox" id="test8" />
<label for="test8">Repair Valve</label>
</p>
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">settings</i>Chain</div>
<div class="collapsible-body">
<!-- Input Check -->
<p>
<input type="checkbox" id="test99" />
<label for="test99">Repair Slipped Chain (Fallen Off)</label>
</p>
<!-- End Input Check -->
<!-- Input Check -->
<p>
<input type="checkbox" id="test10" />
<label for="test10">Repair Broken Link</label>
</p>
<!-- End Input Check -->
<!-- Input Check -->
<p>
<input type="checkbox" id="test11" />
<label for="test11">Repair Skipping Noise</label>
</p>
<!-- End Input Check -->
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">settings</i>Seat</div>
<div class="collapsible-body">
<!-- Input Check -->
<p>
<input type="checkbox" id="test13" />
<label for="test13">Repair Loose Seat</label>
</p>
<!-- End Input Check -->
<!-- Input Check -->
<p>
<input type="checkbox" id="test14" />
<label for="test14">Repair Torn Material</label>
</p>
<!-- End Input Check -->
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">settings</i>Handlebar</div>
<div class="collapsible-body">
<!-- Input Check -->
<p>
<input type="checkbox" id="test15" />
<label for="test15">Repair Loose Handlebar</label>
</p>
<!-- End Input Check -->
<!-- Input Check -->
<p>
<input type="checkbox" id="test17" />
<label for="test17">Repair Loose Grips</label>
</p>
<!-- End Input Check -->
<!-- Input Check -->
<p>
<input type="checkbox" id="test16" />
<label for="test16">Repair Brake Lever</label>
</p>
<!-- End Input Check -->
<!-- Input Check -->
<p>
<input type="checkbox" id="test18" />
<label for="test18">Repair Gear Leaver</label>
</p>
<!-- End Input Check -->
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">settings</i>Brakes (V-Shape)</div>
<div class="collapsible-body">
<!-- Input Check -->
<p>
<input type="checkbox" id="test19" />
<label for="test19">Repair Sloppy Brakes</label>
</p>
<!-- End Input Check -->
<!-- Input Check -->
<p>
<input type="checkbox" id="test20" />
<label for="test20">Repair Worn Pads</label>
</p>
<!-- End Input Check -->
<!-- Input Check -->
<p>
<input type="checkbox" id="test21" />
<label for="test21">Repair Retaining Spring</label>
</p>
<!-- End Input Check -->
</div>
</li>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">settings</i>Brakes (Disc Brakes)</div>
<div class="collapsible-body">
<!-- Input Check -->
<p>
<input type="checkbox" id="test22" />
<label for="test22">Repair Sloppy Brakes</label>
</p>
<!-- End Input Check -->
<!-- Input Check -->
<p>
<input type="checkbox" id="test23" />
<label for="test23">Repair Worn Pads</label>
</p>
<!-- End Input Check -->
<!-- Input Check -->
<p>
<input type="checkbox" id="test24" />
<label for="test24">Repair Retaining Spring</label>
</p>
<!-- End Input Check -->
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">settings</i>Suspension</div>
<div class="collapsible-body">
<!-- Input Check -->
<p>
<input type="checkbox" id="test25" />
<label for="test25">Repair Leaking Suspension</label>
</p>
<!-- End Input Check -->
<!-- Input Check -->
<p>
<input type="checkbox" id="test26" />
<label for="test26">Repair Rubber Seal</label>
</p>
<!-- End Input Check -->
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">settings</i>Pedal</div>
<div class="collapsible-body">
<!-- Input Check -->
<p>
<input type="checkbox" id="test27" />
<label for="test27">Repair Cracked Pedel</label>
</p>
<!-- End Input Check -->
<!-- Input Check -->
<p>
<input type="checkbox" id="test28" />
<label for="test28">Replace Reflectors</label>
</p>
<!-- End Input Check -->
<!-- Input Check -->
<p>
<input type="checkbox" id="test24" />
<label for="test24">Repair Retaining Spring</label>
</p>
<!-- End Input Check -->
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--Rewards-->
<div id="repair" class="col s12 m6">
<div class="card hoverable">
<div class="card-content">
<span class="card-title grey-text text-darken-4">
Punctre Repair
</span>
</span>
<br>
<div class="col s10">
<img style="margin-left:20%;" src="assets/img/icon00002.png">
<br>
<br>
<p>Punctured tires seem to be an inevitable part of bicycling. Experienced cyclists make a habit of carrying the necessary repair materials on their bike at all times. With a little preparation you'll never need to worry about being stranded. Want even more safety and peace of mind on the road? Practice this repair at home.</p>
<br>
<p> <b>Things You Will Need: </b>
<br>
<br>
<i> Parts can be purchased below, or you can book it into your local repair store</i>
<br>
<br> - Replacement Inner Tube
<br> - Tire Pump
<br> - Set Of Three Tire Tools (tire Irons)
<br> - Tire patch kit (rubber patches, glue, sandpaper)
<br>
<br>
<br>
<p>
1. Remove the wheel from the bike. Most bikes now have a quick-release lever on each axle. Simply flip one of the levers to loosen the wheel. Once loose, the wheel can be pulled free.
<br>
<br> 2. Older bikes usually have two axle nuts holding each wheel in place. Use an adjustable wrench to loosen one of the nuts, thus allowing the wheel to come free. Completely deflate the tire.
<br>
<br> 3. Slide the rounded end of one of the tire tools between the tire and the rim. Working slowly and taking care not to pinch the tube, pry the tire away from the rim by locking the free end of the tire tool into the spokes.
<br>
<br> 4. Slide a second tire tool between the tire and rim. Work this tool around the rim until the tire pops free (see A).
<br>
<br> 5. If the tool gets stuck, lock the free end into the spokes and begin working with the third tire tool.
<br>
<br> 6. Remove the tire and inner tube from the rim.
<br>
<br>
<img src="assets/img/tut/1.jpg">
<br>
<br> 7. Inspect the inner tube for holes by inflating it with a bicycle-tire pump until you can hear air escaping. Many holes are not visible until the tube is highly pressurized.
<br>
<br> 8. Locate the hole. Hold the tube close to your cheek and feel for escaping air if necessary (see A). Lightly rough up the area around the hole with sandpaper.
<br>
<br>
<img src="assets/img/tut/2.jpg">
<br>
<br> 9. Apply glue both to the tube and a rubber patch. Wait for the glue to become tacky before applying the patch.
<br>
<br> 10. Firmly press the patch onto the hole (see B) and allow it to dry for several minutes.
<br>
<br>
<img src="assets/img/tut/fix-punctured-bicycle-1.5-800x800.jpg">
<br>
<br> 11. Check the tire to fine the source of the puncture by running your fingers around the inside of the tire. Be careful, sharp objects may be imbedded in the tire. Visually inspect the outside of the tire for rips, tears or sharp objects. Be sure to remove the offending object so you don't get another flat!
<br>
<br> 12. Take a new tire and slip one edge of it all the way around the rim. It should be possible to do this by hand, although you can use one of the tire tools if necessary.
<br>
<br> 13. Place the inner tube completely inside the new tire, taking care to line up the inner tube valve with the valve hole in the rim (see B). Push the tube as far into the tire as possible. It might help to inflate the tube very slightly.
<br>
<br>
<img src="assets/img/tut/change-bicycle-tire-2.2-800x800.jpg">
<br>
<br> 14. Using your hands, push as much of the second edge of the tire onto the rim as possible. Continue pushing the tube into the tire as needed.
<br>
<br> 15. Insert a tire tool between the rim and the portion of the tire that is not yet installed.
<br>
<br> 16. Slowly lever the tool upward and force the tire over the rim edge. Use a second tool to push the tube into place if necessary.
<br>
<br> 17. Gently roll the tire into place over the rim edge. Work slowly and avoid snapping the tire into place as this tends to pinch the tube and cause air leaks.
<br>
<br> 18. Inflate the tire to the recommended pressure written on the side of the tire, and replace the wheel on the bike.
<br>
<br>
<br>
<br>
<b>Tips & Warnings</b>
<br>
<br> There are two types of valves used on bicycle inner tubes: Schrader valves and Presta valves. Schrader valves are identical to the type used on car tires and can be inflated at most gas stations. Presta valves are smaller and lighter and require a special pump.
</p>
</p>
</div>
</div>
<div class="card-action">
<button class="btn waves-effect waves-light blue darken-2" name="action" type="submit"><a href="shop.html">Buy Parts</a><i class="material-icons right">grade</i></button>
<button class="btn waves-effect waves-dark red darken-1 darken-2" name="send" type="submit">Book to repair<i class="material-icons right">grade</i></button>
</div>
</div>
</div>
<!--Rewards
</div>
<!--Rewards End-->
</div>
<!--Main Content End-->
<script src="assets/js/app.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
<script src="assets/js/Controllers/RewardsController.js"></script>
<script src="assets/js/Controllers/AccountController.js"></script>
<script src="assets/js/Controllers/NavController.js"></script>
<script>
$(document).ready(function () {
$('.button-collapse').sideNav();
});
$('#repair').hide();
$('#repairBike').on('click',function(){
$('.collapsible-header').hide();
$('#keepMe').show();
});
$('#OptionOne').on('click',function(){
$('#ProblemBike').hide();
$('#OptionsSelectable').hide();
$('#repair').show();
});
</script>
</body>
</html>