forked from UsainBloot/wheel-of-lunch
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (118 loc) · 5.53 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
<!DOCTYPE HTML>
<html>
<head>
<title>Wheel of Lunch</title>
<link rel="shortcut icon" href="favicon.ico"/>
<!-- Stylesheets -->
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/global.css">
<!-- Scripts -->
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDnM4OGSqM7nNwL5YXIjJikowkI9fEwXp8&libraries=places"></script>
<script type="text/javascript" src="js/map.js"></script>
<!-- Meta -->
<meta name="viewport" content="width=device-width, initial-scale=0.6, maximum-scale=1">
</head>
<body>
<div class="panel panel-default select-localisation">
<div class="panel-body">
<p>Please select an option</p>
<button type="button" id="location-option-current" class="btn btn-success">Use my location</button>
<button type="button" id="location-option-find" class="btn btn-info">Find a location</button>
</div>
</div>
<div class="panel panel-default localisation search-localisation" style="display:none;">
<div class="panel-body">
<p>Hang on a moment, we are just getting your location<span class="one">.</span><span class="two">.</span><span class="three">.</span></p>
</div>
</div>
<div class="panel panel-default panel-map" style="display:none;">
<div class="panel-body">
<div id="map-header">
<input type="text" id="search" class="controls" name="search" placeholder="Enter postcode or place name"/>
<button type="button" id="select-location" class="btn btn-primary btn-lg">Select Location</button>
<input type="hidden" name="lat" id="latBox" disabled/>
<input type="hidden" name="lng" id="lngBox" disabled/>
</div>
<div id="map-canvas"></div>
</div>
</div>
<div class="alert alert-danger localisation" role="alert" style="display:none;">
<p>Oops! We can't find your location.
<button id="localistion-failure" type="button" class="btn btn-danger btn-sm">
Continue anyway
</button>
</p>
</div>
<div class="panel panel-default result" style="display:none;">
<div class="panel-body">
<h2></h2>
<p class="vicinity"></p>
<p class="rating"></p>
<p>
<a class="map" target="_blank" href="">View on map</a>
</p>
</div>
</div>
<a class="btn btn-primary btn-lg blur settings" role="button">
<span class="glyphicon glyphicon-cog"></span>
</a>
<div class="clickme blur">
<p>Click me!</p>
</div>
<div class="panel panel-default settings blur">
<div class="panel-body">
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="type-restaurant" value="restaurant">
Restaurant
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="type-food" value="food">
Food
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="type-bar" value="bar">
Bar
</label>
</div>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-pushpin"></span> Latitude</span>
<input type="number" id="latitude" class="form-control" placeholder="Latitude">
</div>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-pushpin"></span> Longitude</span>
<input type="number" id="longitude" class="form-control" placeholder="Longitude">
</div>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-record"></span> Radius (m)</span>
<input type="number" min="1" id="radius" class="form-control" placeholder="Radius">
</div>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-stats"></span> # of Places</span>
<input type="number" min="1" max="12" id="maxPlaces" class="form-control" placeholder="# of Places">
</div>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-share"></span> Share link</span>
<input type="text" id="shareLink" class="form-control" value="">
</div>
<button type="submit" id="settings-search" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Search</button>
</div>
</div>
<button type="button" id="new-location" class="btn btn-primary blur"><span class="glyphicon glyphicon-globe"></span> New Location</button>
<canvas id="confetti-world"></canvas>
<button type="button" id="spin" class="btn btn-success blur"><span class="glyphicon glyphicon-repeat"></span> Spin</button>
<canvas id="wheel" class="blur" width="600" height="600"></canvas>
<a href="https://github.com/UsainBloot/Wheel-Of-Lunch"><img class="blur" style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<script type="text/javascript" src="js/init.js"></script>
<script type="text/javascript" src="js/wheel.js"></script>
<script type="text/javascript" src="js/geolocation.js"></script>
<script type="text/javascript" src="js/confetti.js"></script>
</body>
</html>