-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
334 lines (323 loc) · 18.5 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
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
<!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">
<meta name="description"
content="Mapify Inc. converts any image into map. It supports Material You theming! 6 different custom preset Material You theme. Easter Egg available.">
<meta name="theme-color" content="#3367D6">
<title>Mapify</title>
<script src="./utils/material-theme-control.js"></script>
<link rel="apple-touch-icon" href="./ico/tab-ico.png">
<link rel="manifest" href="./manifest.json">
<link rel="icon" href="./ico/tab-ico.png">
<link rel="stylesheet" href="./libs/materialize/css/materialize.min.css">
<link href="./css/material-icons.css" rel="stylesheet">
<link rel="stylesheet" href="./css/map.css">
<script src="./libs/materialize/js/materialize.min.js" defer></script>
<script src="./utils/lottie-player.js" defer></script>
<script src="./scripts/map.js" defer></script>
<script src="./scripts/algorithm.js" defer></script>
</head>
<body>
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper">
<a href="#" class="brand-logo">Mapify<sub style="font-size: xx-small;">inc.</sub></a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
<ul id="nav-mobile" class="right hide-on-med-and-down"
style="display: flex; justify-content: space-around;">
<li><a class="waves-effect waves-light blue btn tooltipped hoverable" data-position="bottom"
data-tooltip="Source" id="source"><i class="material-icons" id="src-icon">place</i></a></li>
<li><a class="waves-effect waves-light green btn tooltipped hoverable" id="dest"
data-position="bottom" data-tooltip="Destination"><i class="material-icons"
id="dest-icon">pin_drop
</i></a></li>
<li><a class="waves-effect waves-light red btn tooltipped hoverable" id="sp" data-position="bottom"
data-tooltip="Show Path"><i class="material-icons" id="sp-icon">play_circle_outline</i></a>
</li>
<li><a class="waves-effect waves-light purple btn tooltipped hoverable" id="reset"
data-position="bottom" data-tooltip="Reset Map"><i class="material-icons"
id="reset-icon">refresh</i></a>
</li>
<li><a class="waves-effect waves-light indigo modal-trigger btn tooltipped hoverable" id="help"
href="#modal1" data-position="bottom" data-tooltip="Help"><i class="material-icons"
id="help-icon">import_contacts</i></a>
</li>
<li><a id="fullscreen" class="waves-effect waves-light orange btn tooltipped hoverable"
data-position="bottom" data-tooltip="Fullscreen Mode"><i class="material-icons"
id="fullscreen-icon">fullscreen</i></a>
</li>
<li><a id="zoom" class="waves-effect waves-light amber btn tooltipped hoverable"
data-position="bottom" data-tooltip="Toggle Theatre Mode"><i class="material-icons"
id="zoom-icon">zoom_in</i></a>
</li>
<li><a id="download" class="waves-effect waves-light pink btn tooltipped hoverable"
data-position="bottom" data-tooltip="Download Map"><i class="material-icons"
id="download-icon">download</i></a>
</li>
<li><a class="waves-effect waves-light cyan accent-3 btn modal-trigger tooltipped hoverable"
href="#modal2" data-position="bottom" data-tooltip="Settings"><i class="material-icons"
id="settings-icon">settings</i></a>
</li>
<li>
<div class="switch">
<label>
Light Mode
<input id="switch-dark" type="checkbox" onclick="switchTheme()">
<span class="lever"></span>
Dark Mode
</label>
</div>
</li>
</ul>
</div>
</nav>
</div>
<!-- Modal for User Guide -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4>User Guide</h4>
<div class="divider"></div>
<h6>N.B. Even you can scroll the map with mouse.</h6>
<div class="row">
<div class="col s7">
<ol class="helpText">
<li class="src">To add source, please click on the source button and click anywhere on the path!
</li>
<li class="dest">To add a destination, please click on the destination button and click anywhere
on the path!</li>
<li class="return">To find your shortest path, please click on the show path button. Make sure
you don't forget to add source and destination before!</li>
<li class="reset">You can select any location or add your own map using add your map! It's so
easy!</li>
<li class="toggle">Have you change your mind and wanna go somewhere else? Don't worry! Just
click on reset and add new destination keeping all your customization as it is!</li>
</ol>
</div>
<div class="col s5">
<lottie-player style="width: 100%; height: 100%;" src="./utils/animations/86746-loading-blash.json"
autoplay loop></lottie-player>
</div>
</div>
</div>
<div class="modal-footer">
<a href="#!" class="modal-close waves-effect waves-green btn-flat">Good to go</a>
</div>
</div>
<!-- Modal for settings -->
<div id="modal2" class="modal">
<div class="modal-content">
<h4>Settings</h4>
<div class="divider"></div>
<h6>More customizations on the way!</h6>
<div class="row">
<div class="col s7">
<ul class="helpText">
<li>
<span class="src">Choose Map Path Color</span>
<input id="custom-color" type="color" value="#fafafa">
</li>
<br>
<li>
<span class="dest">Sensitivity</span>
<input type="range" id="sensitivity" min="0" max="20" />
<span id="badge-sensitivity" class="badge blue white-text"></span>
</li>
<br>
<li>
<span class="return">Path Size</span>
<input type="range" id="path-size" min="1" max="5" />
<span id="badge-pathSize" class="badge blue white-text"></span>
</li>
</ul>
</div>
<div class="col s5">
<lottie-player style="width: 100%; height: 100%;" src="./utils/animations/92803-loading.json"
autoplay loop></lottie-player>
</div>
</div>
</div>
<div class="modal-footer">
<a onclick="resetAll()" class="modal-close waves-effect waves-red btn-flat">Reset All</a>
<a onclick="resetDefault()" class="modal-close waves-effect waves-orange btn-flat">Reset Settings</a>
<a onclick="saveSettings()" class="modal-close waves-effect waves-green btn-flat">Save All</a>
</div>
</div>
<ul class="sidenav" id="mobile-demo">
<li class="sidenav__li">You can't add source/destination without a laptop or computer.</li>
</ul>
<!-- For themeing purpose (in future) -->
<div class="fixed-action-btn">
<a class="btn-floating btn-large red tooltipped hoverable" data-position="left"
data-tooltip="Theme (Material You)" id="floating-action">
<i class="large material-icons">palette</i>
</a>
<ul>
<li id="m-u" style="display: none;"><a
class="waves-effect waves-light blue lighten-2 btn-floating tooltipped hoverable pulse"
data-position="left" data-tooltip="Love You Infinity!">
<material-theme-control></material-theme-control>
</a>
</li>
<li><a class="waves-effect waves-light pink lighten-2 btn-floating tooltipped hoverable" id="m-colorful"
data-position="left" data-tooltip="Reset Colorful"><i class="material-icons">refresh</i></a>
</li>
<li><a class="waves-effect waves-light teal btn-floating tooltipped hoverable" id="m-teal"
data-position="left" data-tooltip="Material Teal"><i class="material-icons">album</i></a>
</li>
<li><a class="waves-effect waves-light purple btn-floating tooltipped hoverable" id="m-purple"
data-position="left" data-tooltip="Material Purple"><i class="material-icons">album</i></a>
</li>
<li><a class="waves-effect waves-light orange btn-floating tooltipped hoverable" id="m-yellow"
data-position="left" data-tooltip="Material Yellow"><i class="material-icons">album</i></a>
</li>
<li><a class="waves-effect waves-light red accent-2 btn-floating tooltipped hoverable" id="m-red"
data-position="left" data-tooltip="Material Red"><i class="material-icons">album</i></a></li>
<li><a class="waves-effect waves-light green btn-floating tooltipped hoverable" id="m-green"
data-position="left" data-tooltip="Material Green"><i class="material-icons">album
</i></a></li>
<li><a class="waves-effect waves-light blue accent-2 btn-floating tooltipped hoverable" data-position="left"
data-tooltip="Material Blue" id="m-blue"><i class="material-icons">album</i></a></li>
</ul>
</div>
<!-- Main Body section starts -->
<div class="row">
<div class="col s7" id="body-left">
<div class="map-container" id="map-container">
<canvas id="canvas">
<img id="map-image" src="./maps/Abstract_Maps/absMap3.png" alt="Map Here">
</canvas>
</div>
</div>
<div class="col s5" id="body-right">
<div class="input-field col s5">
<select class="icons" id="mapSelect" onchange="swapMap()">
<option disabled>Choose Map</option>
<option value="./maps/Abstract_Maps/absMap3.png" data-icon="./maps/Abstract_Maps/absMap3.png"
selected>Map 1</option>
<option value="./maps/Real_Maps/gMaps5.png" data-icon="./maps/Real_Maps/gMaps5.png">Map 2</option>
<option value="./maps/Real_Maps/gMaps6.png" data-icon="./maps/Real_Maps/gMaps6.png">Map 3</option>
<option value="./maps/Real_Maps/gMaps7.png" data-icon="./maps/Real_Maps/gMaps7.png">Map 4</option>
<option value="./maps/Real_Maps/gMaps8.png" data-icon="./maps/Real_Maps/gMaps8.png">Map 5</option>
<option value="./maps/Real_Maps/gMaps9.png" data-icon="./maps/Real_Maps/gMaps9.png">Map 6</option>
<option value="./maps/Industries/indMap1.jpg" data-icon="./maps/Industries/indMap1.jpg">Map 7
</option>
<option value="./maps/Industries/indMap2.jpg" data-icon="./maps/Industries/indMap2.jpg">Map 8
</option>
<option value="./maps/Industries/indMap3.png" data-icon="./maps/Industries/indMap3.png">Map 9
</option>
</select>
<label>Maps in select</label>
</div>
<div class="input-field col s7">
<input pattern="[a-zA-Z ]+" type="text" id="easter" class="validate" />
<label for="easter">Quest for INFINITY!</label>
<span class="helper-text" data-error="wrong" data-success="right">Easter Egg</span>
<button type="button" class="btn waves-effect blue accent-2 hoverable right" onclick="easterEgg()"><i
class="material-icons">all_inclusive</i></button>
</div>
<div class="col s10">
<div class="file-field input-field">
<a id="map-upload-button" class="btn waves-effect">
<i class="material-icons left">cloud_upload</i>Add Your Map
<input id="input-map" type="file" accept="image/jpeg, image/png, image/jpg, image/webp">
</a>
<div class="file-path-wrapper">
<input class="file-path validate" type="text">
</div>
</div>
</div>
<div class="carousel">
<a class="carousel-item" href="#one!">
<div class="card red darken-2" id="card-1">
<div class="card-content white-text">
<span class="card-title">Your Mapify</span>
<div class="divider"></div>
<p>Introducing Google's latest Material You. It's all about you. Change the colors, change
the themes as you want! We follow how you feel! Make it yours!</p>
</div>
</div>
</a>
<a class="carousel-item" href="#two!">
<div class="card blue darken-2" id="card-2">
<div class="card-content white-text">
<span class="card-title">Add Any Map</span>
<div class="divider"></div>
<p>Your Mapify supports color images, grayscale images, red, white, green paths and many
more..! Add any map you want, we got your back!</p>
</div>
</div>
</a>
<a class="carousel-item" href="#three!">
<div class="card green darken-2" id="card-3">
<div class="card-content white-text">
<span class="card-title">Stops In The Middle</span>
<div class="divider"></div>
<p>Got more than one place to visit in a go? Add as many intermediate stops as you need!
Mapify will navigate through all!</p>
</div>
</div>
</a>
<a class="carousel-item" href="#four!">
<div class="card orange darken-2" id="card-4">
<div class="card-content white-text">
<span class="card-title">Easter Egg</span>
<div class="divider"></div>
<p>Write a secret word (Related to our app) in the search box, and voila! A limitless visual
treat is waiting for you.</p>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="pre-loader">
<lottie-player src="./utils/animations/51777-infinite-loop-inspired-by-google.json" background="transparent"
speed="1" loop autoplay></lottie-player>
</div>
<footer class="page-footer blue darken-2" id="aboutus">
<div class="container">
<div class="row">
<div class="col l6 s12">
<h5 class="white-text">About Us</h5>
<div class="divider"></div>
<p class="white-text text-lighten-4">All rights reserved by <a href="#"
style="color: rgb(255, 255, 255);">Soumyadeep Arka Souvik.</a> We've created this website
only
for Project Purpose. Use of this website's source code without any permission will be marked as
an illegal step. Find Us on Google Maps.</p>
</div>
<div class="col l4 offset-l2 s12">
<h5 class="white-text">Links</h5>
<div class="divider"></div>
<ul>
<li><a class="grey-text text-lighten-3" target="_blank"
href="https://www.facebook.com/profile.php?id=100056571030622"><button
class="btn waves-effect blue pulse" id="link-fb" href="">Facebook</button></a></li>
<br>
<li><a class="grey-text text-lighten-3" target="_blank"
href="https://www.instagram.com/_s_o_u_v_i_k__m_o_n_d_a_l_/"><button
class="btn waves-effect red pulse" id="link-insta">Instagram</button></a></li>
<br>
<li><a class="grey-text text-lighten-3" target="_blank"
href="https://github.com/soumya-99"><button class="btn waves-effect green pulse"
id="link-github">Github</button></a></li>
<br>
<li><a class="grey-text text-lighten-3" target="_blank"
href="https://twitter.com/Soumyadeep5000"><button class="btn waves-effect orange pulse"
id="link-twitter">Twitter</button></a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
© 2022 Copyright By Mapify Inc.
<a class="grey-text text-lighten-4 right" href="./disclaimer.html">Disclaimer</a>
</div>
</div>
</footer>
</body>
</html>