-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
163 lines (138 loc) · 6.31 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
<!DOCTYPE html>
<html>
<head>
<title>Track Heat</title>
<link rel="stylesheet" href="static/css/style.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
</head>
<body>
<!-- 1. UPLOAD PANEL -->
<div id="upload">
<div id="upload-title">Upload GPX files:</div>
<div id="upload-container">
<div id="upload-container-names"></div>
<button id="upload-container-browse"
onclick="document.getElementById('upload-input').click();"><span>📁</span><span>Browse</span></button>
<button id="upload-container-upload" onclick="main.upload.upload();"><span>⇧</span><span>Upload</span></button>
</div>
<div id="upload-drag">
<span>or drag and drop GPX files here</span>
</div>
<div id="upload-history-title">Upload History:</div>
<div id="upload-history-elements">
<table id="upload-history-table">
<tbody>
</tbody>
</table>
</div>
<img id="upload-empty" src="static/images/empty.png">
<button class="next-stage" id="upload-next" onclick="main.upload.next();" disabled>Next Stage</button>
<input type="file" id="upload-input" name="upload-input" accept=".gpx" hidden multiple />
</div>
<!-- 2. PROCESSING PANEL -->
<div id="process">
<div id="process-title">Choose quality:</div>
<div id="form-wrapper">
<form action="#" method="GET">
<div id="debt-amount-slider">
<input type="radio" name="debt-amount" id="1" value="50" required>
<label for="1" data-debt-amount="poor"></label>
<input type="radio" name="debt-amount" id="2" value="20" required>
<label for="2" data-debt-amount="low"></label>
<input type="radio" name="debt-amount" id="3" value="10" required checked>
<label for="3" data-debt-amount="medium"></label>
<input type="radio" name="debt-amount" id="4" value="2" required>
<label for="4" data-debt-amount="high"></label>
<input type="radio" name="debt-amount" id="5" value="1" required>
<label for="5" data-debt-amount="best"></label>
<div id="debt-amount-pos"></div>
</div>
</form>
</div>
<div>
<p style="margin-top:5vh;text-align:center;">Recomended settings for your PC: <span style="font-weight:bold;"
id="process-recomended">medium</span></p>
<p class="processs-info ">higher quality will result in greater accuracy of the heatmap,
but it will also increase the time needed for calculations and if
the total amount of data is larger than the available RAM on your computer,
it may cause a crash.</p>
<p class="processs-info "> It is recommended that your machine has at least 8GB of RAM</p>
</div>
<button class="next-stage" id="process-next" onclick="main.process.next();">Next Stage</button>
</div>
<!-- 3. LOADING PANEL -->
<div id="loading">
<p id="loading-text">LOADING</p>
<section><span id="spinner"> </span></section>
</div>
<!-- 4. MAP PANEL -->
<div id="map">
<div id="return-button" onclick="main.paralax.returnToStart();">⏎</div>
<div id="heatmap-options">
<h3>Heat Map Options</h3>
<p>heat style:</p>
<div>
<input oninput="main.map.updateHeatMap();" id="gradient-opacity" name="opacity" type="range" step="0.1" min="0"
max="1" value="1" /><label for="opacity">opacity</label>
</div>
<div>
<input oninput="main.map.updateHeatMap();" id="gradient-radius" name="radius" type="range" step="1" min="1"
max="100" value="25" /><label for="radius">radius</label>
</div>
<div>
<input oninput="main.map.updateHeatMap();" id="gradient-blur" name="blur" type="range" step="1" min="1" max="50"
value="15" /><label for="blur">blur</label>
</div>
<p>heat gradient:</p>
<button class="heatmap-add-color" onclick="gradient.addNewColor();">add new color</button>
<div id="heatmap-gradient-container"></div>
<div id="heatmap-gradient"></div>
<div class="heatmap-buttons">
<button onclick="main.map.saveOptions();">save</button>
<button style="float:right;" onclick="main.map.resetOptions();">reset</button>
</div>
</div>
<div id="map-canvas"></div>
</div>
<!-- BACKGROUND PARALAX -->
<div id="paralax">
<div id="paralax-1" class="paralax-element"></div>
<img src="static/images/paralax-2.svg" id="paralax-2" class="paralax-element" />
<img src="static/images/paralax-3.svg" id="paralax-3" class="paralax-element" />
<img src="static/images/paralax-4.svg" id="paralax-4" class="paralax-element" />
<img src="static/images/paralax-5.svg" id="paralax-5" class="paralax-element" />
<img src="static/images/paralax-6.svg" id="paralax-6" class="paralax-element" />
<img src="static/images/paralax-7.svg" id="paralax-7" class="paralax-element" />
<div id="paralax-8" class="paralax-element">
<div class="paralax-8-sun"></div>
<div class="paralax-8-sun"></div>
<div class="paralax-8-sun"></div>
<div class="paralax-8-sun"></div>
</div>
<div id="paralax-9" class="paralax-element"></div>
<div id="paralax-reflect"></div>
<!-- BACKGROUND PARALAX WATER EFFECT-->
<svg>
<filter id="filter" filterUnits="objectBoundingBox" x="0" y="0">
<feTurbulence id="feturbulence" type="fractalNoise" baseFrequency="0.01 0.1" numOctaves="10" seed="1">
</feTurbulence>
<feDisplacementMap xChannelSelector="B" yChannelSelector="G" scale="100" in="SourceGraphic" result="result">
<animate attributeName="scale" dur="5s" values="100;-100;100" repeatCount="indefinite" />
</feDisplacementMap>
</filter>
</svg>
</div>
<!-- ALL JS INPORTS -->
<script src="static/js/gradient.js"></script>
<script src="static/js/heat.js"></script>
<script src="static/js/map.js"></script>
<script src="static/js/loading.js"></script>
<script src="static/js/process.js"></script>
<script src="static/js/upload.js"></script>
<script src="static/js/paralax.js"></script>
<script src="static/js/main.js"></script>
</body>
</html>