-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
131 lines (123 loc) · 5.33 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
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML5 APIs - Master</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/overrides.css">
<script src="js/vendor/modernizr.js"></script>
<!-- include the places service in the map api script -->
<script src="https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzaSyAsbjHGrC87yr_ideL9nuhdITjAXu540hI&sensor=false"></script>
</head>
<body>
<!-- map modal -->
<!-- top nav -> not functional yet -->
<header class="topNav">
<nav>
<img src="images/logo-s.png" alt="mini logo" class="left">
<ul class="no-bullet inline-list">
<li>MODELS<img class="right chevron" src="images/down-arrow.png"></li>
<li>SHOPPING TOOLS<img class="right chevron" src="images/down-arrow.png"></li>
<li>DISCOVER<img class="right chevron" src="images/down-arrow.png"></li>
<li>OWNERS<img class="right chevron" src="images/down-arrow.png"></li>
</ul>
<div class="global-nav-item right findDealer"><i class="fa fa-map-marker"></i>find a dealer</div>
</nav>
</header>
<!-- large images / models -->
<div class="row">
<div class="small-12 columns">
<div class="mainContainer">
<!-- added this div called cars for the roundabout -->
<div id="cars">
<img class="F55" src="images/F55-en.png" alt="blue mini">
<img src="images/F56-en.png" alt="yellow mini" class="F56">
<img src="images/R57-en.png" alt="convertible mini" class="R58">
</div>
</div>
</div>
</div>
<!-- thumbnail images -->
<div class="row">
<div class="small-6 columns">
<h4 class="subhead">SELECT YOUR MODEL :<span> </span></h4>
<div class="thumbInfo">
<img src="images/F55.jpg" alt="blue mini" id="F55" data-roundaboutindex="0">
<img src="images/F56.jpg" alt="yellow mini" id="F56" data-roundaboutindex="1">
<img src="images/R57.jpg" alt="convertible mini" id="R58" data-roundaboutindex="2">
</div>
<hr>
<!-- social media icons / save to localstorage -->
<div class="socialIcons">
<span class="right"><i class="fa fa-refresh"></i></span>
<ul class="inline-list">
<li><i class="fa fa-download"></i>Save selection</li>
<li><i class="fa fa-facebook-official" data-tooltip aria-haspopup="true" class="has-tip" title="Post this"></i></li>
<li><i class="fa fa-pinterest-p" data-tooltip aria-haspopup="true" class="has-tip" title="pin this"></i></li>
<li><i class="fa fa-thumbs-up" data-tooltip aria-haspopup="true" class="has-tip" title="Like this"></i></li>
<li><i class="fa fa-twitter" data-tooltip aria-haspopup="true" class="has-tip" title="Tweet this"></i></li>
</ul>
</div>
</div>
<!-- model info block -->
<div class="small-6 columns modelInfo">
<ul class="no-bullet">
<li><h4 class="modelDesc">Model Description Here</h4><p class="priceInfo">Pricing here</p></li>
<li><h5 class="subM">SubModel 1</h5></li>
<li><p>some info here...</p></li>
<li><p>more info here... add more li elements if you need to</p></li>
<li></li>
<li><h5 class="subM">SubModel 2</h5></li>
<li><p>some info here...</p></li>
<li><h5 class="subM">SubModel 3 ( if your model has one )</h5></li>
<li><p>some info here...</p></li>
</ul>
</div>
</div> <!-- end model info / thumbs -->
<hr>
<div class="row"><!-- geolocation stuff / mapping -->
<div class="small-6 columns">
<div id="map-canvas"></div>
<i class="fa fa-expand left"> Click to expand map</i>
</div>
<div class="small-6 columns">
<div>
<h4>Find a dealer close to you!</h4>
<div class="row searchButtons">
<div class="small-6 columns">
<button id="findAtCurrent">Find Dealer</button>
</div>
<div class="small-6 columns">
<button id="directionsButton">Get Directions</button>
</div>
<div class="small-8 columns">
<input id="changeLoc" type="text" placeholder="change your location ie Toronto, Ontario">
</div>
<div class="small-4 columns">
<button class="doGeo">Go!</button>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="row"><!-- footer div -->
<footer class="small-12 columns">
footer info here
</footer>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<!-- added the roundabout jQuery plugin -->
<script src="js/jquery.roundabout.min.js"></script>
<script src="js/jquery-scrollto.js"></script>
<!-- adding the Google Maps api -->
<script src="js/mappingScript.js"></script>
<script src="js/master.js"></script>
</body>
</html>