-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
146 lines (143 loc) · 8.21 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
<!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.0, maximum-scale=1.0, minimum-scale=1.0, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>sunSettings</title>
<link rel="stylesheet" href="css/css.css">
</head>
<body>
<div id="nav-bar" data-bind="attr: {class: menuStatus}">
<section class="search">
<div class="travel-mode row" data-bind="click: travelModeClick">
<button type="button" value="DRIVING" class="selected">🚗</button>
<button type="button" value="BICYCLING">🚲</button>
<button type="button" value="WALKING">🚶</button>
<button type"button" id="locate" data-bind="click: $root.toggleGeoMarker"><p class='character'>➤</p></button>
</div>
<div class="departure row" data-bind="with: startPlace">
<div class="label">Start</div>
<input type="text" class="field" data-bind="value: displayRead, event: {keypress: keyHandler}">
<div class="row buttons">
<button type="button" class="set-time" data-bind="click: $root.showTimeSettings">Departure time</button>
<button type="button" class="submit" data-bind="click: displayWrite">Submit</button>
<button type="button" class="geo-submit hidden" data-bind="click: $root.submitGeolocation">Update</button>
<button type="button" class="reset hidden" data-bind="click: $root.reset">Reset</button>
</div>
</div>
<div class="arrival row" data-bind="with: finishPlace">
<div class="label">Finish</div>
<input type="text" class="field" data-bind="value: displayRead, event: {keypress: keyHandler}">
<div class="row buttons">
<button type="button" class="set-time hidden" data-bind="click: $root.showTimeSettings">Arrival time</button>
<button type="button" class="submit" data-bind="click: displayWrite">Submit</button>
<button type="button" class="return-trip hidden" data-bind="click: $root.getReturnTrip">Return trip</button>
</div>
</div>
</section>
<section class="stats">
<div class="tabs row" data-bind="click: tabClick">
<div id="start-tab" class="selected inactive">Start</div>
<div id="finish-tab" class="deselected inactive">Finish</div>
<div id="trip-tab" class="deselected inactive">Trip</div>
</div>
<hr>
<div class="places" data-bind="visible: showPlace">
<div class="row">
<div class="label">Sunrise:</div>
<div class="data" data-bind="text: selectedSunrise"></div>
</div>
<div class="row">
<div class="label">Sunset:</div>
<div class="data" data-bind="text: selectedSunset"></div>
</div>
<div class="row">
<div class="label">Day length:</div>
<div class="data" data-bind="text: dayLength"></div>
</div>
<div class="weather" data-bind="visible: showWeather">
<div class="label">Weather:</div>
<div class="cur-condition">
<p class="cond-text" data-bind="text: currentCondition"></p>
<div class="cond-figure">
<div class="cond-img" data-bind="style: { backgroundImage: conditionImg() }" alt=''></div>
<p class="temp" data-bind="text: currentTemp"></p>
</div>
</div>
</div>
</div>
<div class="journey hidden">
<div class="row">
<div class="label">Daylight gain/loss:</div>
<div class="data" data-bind="text: daylightChangeDisplay"></div>
</div>
<div class="row">
<div class="label">Travel time:</div>
<div class="data" data-bind="text: durationDisplay"></div>
</div>
<div class="row">
<div class="label">Distance:</div>
<div class="data" data-bind="text: distanceDisplay"></div>
</div>
<div class="pace row">
<div class="label">Pace:</div>
<div class="data" data-bind="text: paceDisplay"></div>
<input type="text" class="hidden">
</div>
<button type="button" class="show-set-pace" data-bind="click: showPaceSettings">Change pace</button>
<button type="button" class="set-pace hidden" data-bind="click: changePace">Submit</button>
<button type="button" class="set-pace hidden" data-bind="click: resetPace">Reset</button>
<div class="directions-container">
<div class="label row">Directions:</div>
<div class="directions row"></div>
</div>
</div>
</section>
</div>
<div id="hamburger" data-bind="attr: {class: menuStatus}, click: toggleMenu">
<div class="icon">></div>
</div>
<div class="alert-container" data-bind="visible: showAlert">
<div class="alert-window">
<div class="start-container content">
<div class="message label">Allow geolocation or enter starting location:</div>
<div class="form-container">
<input type="text" class="field" placeholder="">
<button type="button" data-bind="click: inputStart">Submit</button>
</div>
</div>
<div class="time-container content hidden">
<div class="message label"></div>
<form>
<div class="date label">Date:
<input type="text" class="field month"><span>/</span>
<input type="text" class="field day"><span>/</span>
<input type="text" class="field year">
</div>
<div class="time label">Time:
<input type="text" class="field hours"><span>:</span>
<input type="text" class="field minutes"><span>:</span>
<input type="text" class="field seconds">
<select class="field meridies">
<option value="AM">AM</option>
<option value="PM">PM</option>
</select>
</div>
</form>
<button type="button" class="current time-button" data-bind="click: removeDepartureTime">Use current time</button>
<button type="button" class="cancel time-button" data-bind="click: cancelTime">Cancel</button>
<button type="button" class="submit">Submit</button>
</div>
</div>
</div>
<div id="map"></div>
<!--build:js js/main.min.js -->
<script src="js/libs/knockout-3.4.0.js"></script>
<script src="js/libs/jquery-1.12.0.js"></script>
<script src="js/sunCalc/suncalc.js"></script>
<script src="js/app.js"></script>
<!-- endbuild -->
</body>
</html>