-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
183 lines (150 loc) · 7.89 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="vendor/normalize.css" type="text/css" rel="stylesheet">
<link href="styles/base.css" type="text/css" rel="stylesheet">
<link href="styles/layout.css" type="text/css" rel="stylesheet">
<link href="styles/module.css" type="text/css" rel="stylesheet">
<link href="styles/icons.css" type="text/css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script id="handlebars-template" type="text/x-handlebars-template">
</script>
<title>gitTherePDX - Intersect with Transit</title>
</head>
<body>
<div id="parallax-container">
<main>
<!-- hidden images to use later on canvas -->
<img id="bike-logo" class="logo-aspect" src="assets/biketown-logo.png" style="display:none">
<img id="uber-logo" class="logo-aspect" src="assets/uber-logo.png" style="display:none">
<img id="lyft-logo" class="logo-aspect" src="assets/lyft-logo.png" style="display:none">
<header id="title-bar" class="clearfix corner-curve">
<img id="header-logo" src="assets/bike-car-tire.png" alt="spinning bike/car wheel" />
<h1 id="title-gitthere">gitTherePDX</h1>
<nav class="main-nav">
<!-- Hamburger Menu -->
<div class="icon-menu"></div>
<ul>
<li class="tab corner-curve" data-content="articles"><a href="/" class="icon-home"> Home</a></li>
<li class="tab corner-curve" data-content="about"><a href="/about" class="icon-address-book"> About</a></li>
</ul>
</nav>
</header>
<section id="app">
<div id="searchable" class="corner-curve">
<form action="">
<div id="location" class="corner-curve">
<label>Location </label><input class="corner-curve" id="address" name="Location" style="width: 65%" placeholder="Enter address or intersection" value="Pioneer Courthouse Square" required>
</div>
<!-- <div>
<input id="option" type="checkbox" name="field" value="option">
<label for="option"><span><span></span></span>Value</label>
</div> -->
<div id="transit-options" class="corner-curve">
<span>Transit Options</span><br>
<input id="biketown-check" name="Biketown" type="checkbox" value="Biketown">
<label for="biketown-check"><span></span>Biketown</label>
<input id="lyft-check" name="Lyft" type="checkbox" value="Lyft">
<label for="lyft-check"><span></span>Lyft</label>
<input id="uber-check" name="Uber" type="checkbox" value="Uber">
<label for="uber-check"><span></span>Uber</label>
</div>
<div id="search">
<input class="button" id="submit" type="submit" value="submit">
</div>
</form>
<!-- <div id="wait-time" class="corner-curve">
<span>Max Wait/Walk Time</span><br>
<input id="max-5" name="max-time" type="radio" value="18">
<label for="max-5"><span><span></span></span>5 min</label>
<input id="max-7" name="max-time" type="radio" value="17" checked="true">
<label for="max-7"><span><span></span></span>7 min</label>
<input id="max-15" name="max-time" type="radio" value="16">
<label for="max-15"><span><span></span></span>15 min</label>
</div> -->
</div>
<div id="results" class="corner-curve">
<div id="scroll-prompt">Pick option and scroll down for info</div>
<ul id="result-clickables">
<li><img class="results-logo" src="assets/biketown-logo.png" alt="biketown"></li>
<li><img class="results-logo" src="assets/uber-logo.png" alt="uber"></li>
<li><img class="results-logo" src="assets/lyft-logo.png" alt="lyft"></li>
</ul>
<div id="eta-visualization" class="corner-curve">
<!-- <canvas id="eta-canvas" height="400px" width="600px"></canvas> -->
<!-- programmatically find method to re-size the canvas with new width and height if that doesn't work then find method to create the dom in javascript then attach the canvas to the dom -->
<canvas id="eta-canvas" class="corner-curve"></canvas>
</div>
</div>
</section>
<section id="about" class="corner-curve">
<h1>gitTherePDX: Intersect with Transit!</h1>
<p>This app was designed by a team of developers who take multiple forms of transportation every day.</p>
<div id="background"><img src="/assets/taxi-cab.png"</div>
<p> The goal is to show the user the quickest possible ride in their vicinity and provide a healthy alternative that they might not have known about.</p>
<h2>Meet the team</h2>
<div class="portrait">
<h3>Chris Bruner</h3>
<img src="assets/chris3.png">
<p>Chris Bruner is a web developer, engineer, chemist and complete nerd. He is interested in data analysis, automation and technology education. He ultimately hopes to be a full time web developer while making apps to help in STEM (Science, Technology, Engineering and Mathematics) purposes.</p>
</div>
<div class="portrait">
<h3>David Chase</h3>
<img src="assets/david-chase.png">
<p>David Chase is learning a ton right now! His goal is to become a full time web developer and hopefully switch to a freelance job.</p>
</div>
<div class="portrait">
<h3>Tim Combs</h3>
<img src="assets/tim-tie.png">
<p>Tim Combs is an artist/community organizer turned coder. He is interested in UX/UI, project management and stewarding technology toward social good.<br>
<a href="https://www.linkedin.com/in/timothycombs
">LinkedIn</a></p>
</div>
</section>
<!-- map is now a pop-up if user picks biketown -->
<section id="more-info">
<div class="biketown-map corner-curve">
</div>
<!-- uber popup -->
<div class="uber-pop">
<a href="https://uber.com"><img src="assets/uber-logo-2.png"/></a>
<div>
<h2>The closest Uber is <span id="uber-eta"></span> seconds away</h2>
</div>
</div>
<!-- lyft popup -->
<div class="lyft-pop">
<a href="https://lyft.com"><img src="assets/lyft-logo-2.png"/></a>
<div>
<h2>The closest Lyft is <span id="lyft-eta"></span> seconds away</h2>
</div>
</div>
</section>
<footer class="corner-curve">©2016 | gitTherePDX | Intersect With Transit!</footer>
</main>
</div>
<!-- vendor scripts -->
<script src="vendor/page.js" type="text/javascript"></script>
<script src="vendor/jquery-3.1.1.js" type="text/javascript"></script>
<script src="vendor/handlebars-v4.0.5.js" type="text/javascript"></script>
<script src="vendor/marked.js" type="text/javascript"></script>
<script src="vendor/highlight.pack.js" type="text/javascript"></script>
<script src="vendor/webdb.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAahQMqz5qcN3p3ERfaOUGKP17YBSJz1hA" type="text/javascript"></script>
<!-- app scripts -->
<script src="scripts/model/googleDataMapping.js" type="text/javascript"></script>
<script src="/scripts/controller/aboutController.js" type="text/javascript"></script>
<script src="/scripts/controller/appController.js"></script>
<script src="scripts/controller/routes.js" type="text/javascript"></script>
<script src="scripts/controller/filterData.js" type="text/javascript"></script>
<script src="scripts/model/lyft-api.js" type="text/javascript"></script>
<script src="scripts/model/uber-api.js" type="text/javascript"></script>
<script src="scripts/model/biketown-api.js" type="text/javascript"></script>
<script src="scripts/controller/canvasControl.js" type="text/javascript"></script>
<script src="scripts/view/mapView.js" type="text/javascript"></script>
<script src="scripts/view/time-visualize.js" type="text/javascript"></script>
<script src="scripts/view/moreInfo.js" type="text/javascript"></script>
</body>
</html>