-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex2.html
132 lines (110 loc) · 4.39 KB
/
index2.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Compute your Commute</title>
<!-- Materialize compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Link to CSS style sheet -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<header>
<!-- Navigation Bar -->
<nav>
<div class="container">
<div id="navWrapper" class="nav-wrapper">
<a href="#" class="brand-logo">Compute your Commute</a>
</div>
</div>
</nav>
</header>
<main>
<!-- Main body Container -->
<!-- Parallax -->
<div class="parallax-container">
<div class="parallax">
<img id="top-img" src="assets/images/City-Road-HD-Wallpapers-4.jpg">
</div>
<h5 id="instructions">Use this form to calculate the <br>cost of your daily commute!</h5>
</div>
<div class="container">
<!-- Instructions -->
<!-- <div class="row">
<h5 id="instructions">Use this form to calculate the cost of your daily commute!</h5>
</div> -->
<!-- Form section with input fields -->
<div class="section">
<!-- Home Address and Work Address input fields -->
<div class="row">
<div class="input-field col s12 m6 l6">
<input id="homeAddress" type="text" class="validate">
<label for="homeAddress">Home Address</label>
</div>
<div class="input-field col s12 m6 l6">
<input id="workAddress" type="text" class="validate">
<label for="workAddress">Work Address</label>
</div>
</div>
<!-- Vehicle Year, Make, and Model Input Fields -->
<div class="row" id="vehicleInputs">
<div class="input-field col s12 m4 l4" id="year">
<input id="vehicleYear" type="text" class="validate">
<label for='vehicleYear'>Vehicle Year</label>
</div>
<div class="input-field col s12 m4 l4" id="make">
<input id="vehicleMake" type="text" class="validate">
<label for='vehicleMake'>Vehicle Make</label>
</div>
<div class="input-field col s12 m4 l4" id="model">
<input id="vehicleModel" type="text" class="validate">
<label for='vehicleModel'>Vehicle Model</label>
</div>
</div>
<!-- Compute button -->
<div class="row">
<div class="col s12" id="submitBtn">
<button class="btn z-depth-4 waves-effect waves-light" type="submit" name="action" id="compute">Compute
<i class="material-icons right">send</i>
</button>
</div>
</div>
</div>
<!-- Average Gas Price and Vehicle MPG display here -->
<div class=" row center-align">
<div class=" averages col s12"></div>
</div>
<!-- Daily, Weekly, Monthly, Yearly cards display here -->
<div class="row" id="results"> </div>
<!-- Displays Map Title and Map -->
<div class="row mapRow">
<div class="col s12">
<div id="mapHeader"></div>
<div id="mapDisplay"></div>
</div>
</div>
<!-- End Main Body Container -->
</div>
</main>
<footer class="page-footer">
<div class="footer-copyright">
<div class="container">
Cesar, Nick, and Jalil
<a class="grey-text text-lighten-4 right">UA Coding Bootcamp 2017</a>
</div>
</div>
</footer>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Materialize compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>
<!-- Google maps Javascript API with Places library-->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCmkxML5e32lP-WBlO5KaQ3vAsIYppGCkI&libraries=places"></script>
<!-- Link to JS file -->
<script type="text/javascript" src="assets/javascript/script2.js"></script>
</body>
</html>