Merge branch 'master' of linz:/srv/git/lantea
[lantea.git] / index.html
... / ...
CommitLineData
1<!-- This Source Code Form is subject to the terms of the Mozilla Public
2 - License, v. 2.0. If a copy of the MPL was not distributed with this file,
3 - You can obtain one at http://mozilla.org/MPL/2.0/. -->
4
5<!DOCTYPE html>
6<html manifest="manifest.appcache">
7<head>
8 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
9 <!-- try to force a 1:1 scaling and disable pinch-zoom on mobile, see
10 https://developer.mozilla.org/en/Mobile/Viewport_meta_tag -->
11 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
12 <title>Lantea Maps</title>
13 <script src="js/map.js" type="application/javascript;version=1.8"></script>
14 <script src="js/ui.js" type="application/javascript;version=1.8"></script>
15 <script src="js/library.js" type="application/javascript;version=1.8"></script>
16 <script src="js/piwik.js" async="" defer=""></script>
17 <link rel="stylesheet" href="style/lantea.css">
18 <link rel="manifest" href="/pwa.manifest">
19 <link rel="shortcut icon" href="style/lanteaIcon16.png" type="image/png">
20</head>
21<body id="body">
22<noscript><p><img src="https://piwik.kairo.at/piwik.php?idsite=2" style="border:0;" alt="" /></p></noscript>
23<h1>Lantea Map</h1>
24
25<div id="trackArea" class="menuDrawer secondaryUI hidden">
26<h2 onclick="toggleTrackArea();">
27<image src="style/track.svg" alt=""> Track
28</h2>
29<p id="trackData"><span id="trackLength"><span id="trackLengthNum">0</span> km</span>,
30<span id="trackDuration"><span id="trackDurationH"><span id="trackDurationHNum">0</span> h</span>
31<span id="trackDurationM"><span id="trackDurationMNum">0</span> min</span></span>
32</p>
33<p>
34<input type="button" id="saveTrackButton" value="Save"
35 onclick="saveTrack();">
36<input type="button" id="dumpTrackButton" value="Dump"
37 onclick="saveTrackDump();" class="debugHide">
38<input type="button" id="uploadTrackButton" value="Upload" disabled="true"
39 onclick="showUploadDialog();">
40<input type="button" id="clearTrackButton" value="Clear"
41 onclick="clearTrack();">
42</p>
43<p id="libraryShowLine" class="hidden">
44<input type="button" id="libraryShowButton" value="View uploaded tracks"
45 onclick="showLibrary();">
46</p>
47<div id="trackDialogArea" class="hidden">
48<div id="uploadDialog">
49<p class="subTitle">Upload Track to Lantea Maps Server:</p>
50<label for="uploadPublic">Visibility:</label>
51<select id="uploadPublic">
52<option value="true">Public Domain</option>
53<option value="false">Private</option>
54</select>
55<p class="dialogHelp">Public Domain tracks can be forwarded by the server
56operator to any other services, e.g. OpenStreetMap.</p>
57<p>
58<label for="uploadDesc">Comment:</label>
59<input type="text" id="uploadDesc" maxlength="255" size="25"
60 value="Lantea Maps">
61</p>
62<p>
63<input type="button" id="uploadDialogUploadButton" value="Upload Track"
64 onclick="uploadTrack();">
65<input type="button" id="uploadDialogCancelButton" value="Cancel"
66 onclick="cancelTrackDialog();">
67</p>
68</div>
69<div id="uploadStatus">
70<p class="subTitle">Track Upload to Lantea Maps Server</p>
71<p id="uploadInProgress"><img id="actionimg" src="style/loading_action.png">
72 Upload in progress&hellip;</p>
73<p id="uploadSuccess" style="display:none;">Track upload successful!</p>
74<p id="uploadFailed" style="display:none;">Track upload failed.</p>
75<p id="uploadError" style="display:none;">Error:<br>
76 <span id="uploadErrorMsg"></span></p>
77<input type="button" id="uploadStatusCloseButton" value="Close"
78 onclick="cancelTrackDialog();" disabled="true">
79</div>
80</div>
81<p class="loginbox">
82<button type="button" id="loginbtn" class="hidden">Sign in</button>
83<span id="logindesc" class="hidden">to enable uploads</span>
84<span id="username" class="hidden"></span>
85<button type="button" id="logoutbtn" class="hidden">Log out</button>
86</p>
87<p>
88<input type="checkbox" id="trackCheckbox"
89 onchange="setTracking(this);">
90<label for="trackCheckbox">Enable tracking</label><br/>
91</p>
92<p>
93<input type="checkbox" id="centerCheckbox"
94 onchange="setCentering(this);">
95<label for="centerCheckbox">Center Map</label><br/>
96</p>
97</div>
98
99<div id="settingsArea" class="menuDrawer secondaryUI hidden">
100<h2 onclick="toggleSettings();">
101<image src="style/settings.svg" alt=""> Settings
102</h2>
103<p>
104<label for="mapSelector">Map style:</label>
105<select id="mapSelector" onchange="setMapStyle();">
106<!-- option value="osm_mapnik">OpenStreetMap (Mapnik)</option -->
107</select>
108</p>
109<p>
110<input type="button" id="clearCacheButton" value="Clear Cached Maps"
111 onclick="gTileService.clearDB();">
112</p>
113<div id="uploadSettingsArea">
114<p class="subTitle">Track Upload:</p>
115<p>
116<label for="uploadDevName">Device name:</label>
117<input type="text" id="uploadDevName" maxlength="255" placeholder="My Device"
118 onchange="setUploadField(this);">
119</p>
120<p class="dialogHelp">The device name enables you to tell apart tracks you may
121upload from multiple devices.</p>
122</div>
123</div>
124
125<div id="menuArea" class="autoFade overlayArea">
126<image src="style/track.svg" class="controlButton" id="trackButton" value="Track"
127 onclick="toggleTrackArea();"><br/>
128<image src="style/settings.svg" class="controlButton" id="settingsButton" alt="Settings"
129 onclick="toggleSettings();"><br/>
130</div>
131
132<div id="zoomArea" class="autoFade overlayArea">
133<input type="button" id="zoomInButton" value="+"
134 onclick="zoomIn();">
135<p id="zoomLevel">Z</p>
136<input type="button" id="zoomOutButton" value="&minus;"
137 onclick="zoomOut();">
138</div>
139
140<div id="fullscreenArea" class="autoFade overlayArea">
141<!-- other possible characters: &#x25F0; -->
142<input type="button" id="fullscreenButton" value="&#x25A3;"
143 onclick="toggleFullscreen();">
144</div>
145
146<div id="dialogArea" class="overlayArea hidden">
147<div id="noGLwarning">
148 Unable to initialize WebGL. You need a browser that supports it.
149</div>
150<div id="firstRunIntro">
151<p class="dialogTitle">Welcome to Lantea Maps!</p>
152<p>This web app lets you record GPS tracks of your journeys, which you can
153 upload to our backend servers and download as GPX files.</p>
154<p>You can find track details, upload, etc. in the "track" drawer that you can
155 access via the <image src="style/track.svg"> icon at the left top of the
156 window.</p>
157<p>Right underneath that icon, you find <image src="style/settings.svg">
158 settings.</p>
159<p>Both track and settings "drawers" can be closed by clicking/tapping on their
160 title line.</p>
161<p>From the track "drawer", you can also access a library of uploaded tracks,
162 their name/comment links to the GPX download of the specific track.</p>
163<p class="dialogButtonLine">
164 <button id="firstRunDialogCloseButton"
165 onclick="closeDialog();">Close</button>
166</p>
167</div>
168<div id="infoDialog">
169<p class="dialogTitle">Lantea Maps has changed!</p>
170<p>Lantea Maps has been updated with a few significant changes.</p>
171<p>Most importantly, the previously broken upload functionality for tracks has
172 been fixed and improved to use our own Lantea Maps server instead of
173 OpenStreetMaps. For using it, you need to log in with KaiRo.at via their
174 "sign in" button now in the track "drawer".</p>
175<p>From there, you can also access a library of uploaded tracks, their
176 name/comment links to the GPX download of the specific track.</p>
177<p>If you set a device name in the settings, you can even distinguish tracks
178 uploaded to the same account by different devices you're using.</p>
179<p class="dialogButtonLine">
180 <button id="firstRunDialogCloseButton"
181 onclick="closeDialog();">Close</button>
182</p>
183</div>
184</div>
185
186<div id="libraryArea" class="overlayArea fullScreenOverlay secondaryUI hidden">
187<p>The following tracks are saved on the Lantea Maps Server:</p>
188<ul id="libTrackList">
189</ul>
190<p id="libTrackPages" class="hidden"></p>
191<p class="closeButtonContainer"><button id="libCloseButton" class="closeButton">X</button></p>
192</div>
193
194<p id="action">
195 <img id="actionimg" src="style/loading_action.png">
196 <span id="actionlabel">Loading</span>&hellip;
197</p>
198<p id="copyright" class="autoFade overlayArea"></p>
199
200<canvas id="map" width="500" height="500">
201 Please use a browser that supports &lt;canvas&gt; elements.
202</canvas>
203<canvas id="track" width="500" height="500">
204</canvas>
205
206</body>
207</html>