-
Notifications
You must be signed in to change notification settings - Fork 2
/
index2.html
103 lines (95 loc) · 9.88 KB
/
index2.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
<!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, maximum-scale=1, user-scalable=0">
<link rel="stylesheet" type="text/css" href="styles/main.css">
<script src="scripts/prefsalert.js" type="module"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.1/mapbox-gl-directions.css"
rel="stylesheet" type="text/css">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles/main.css">
<link rel="stylesheet" type="text/css" href="styles/help.css">
<link href="styles/map.css" rel="stylesheet">
<link href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.css"
rel="stylesheet" />
</head>
<body>
<div id="alert-container">
<div id="alert-box">
<p>To create your custom route, you will need to have Location Services enabled in your Operating System Preferences.</p>
<label>
<input type="checkbox" id="do-not-show-again">
Do not show again
</label>
<button>OK</button>
</div>
</div>
<main class="main2" id="main">
<div class="background"></div>
<div class="header">
<div class="logo">
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<image xlink:href="/logo.svg" width="100%" height="100%" z-index="1" />
<!--<span class="logo-glow"/>-->
</svg>
</div>
<a class="site-fest-btn map-site-btn3">
<div class="site-fest-div">
<svg viewbox="0 0 50 25" xmlns="http://www.w3.org/2000/svg">
<path xmlns="http://www.w3.org/2000/svg"
d="M 3.9827026 0.14211019 C 3.9598392 0.1423746 3.9357161 0.1441906 3.9093221 0.1477946 C 3.6896039 0.14357354 0.70730789 2.8037783 0.48214111 2.9884481 C 0.012749583 3.3734182 0.47904053 3.6865967 0.47904053 3.6865967 C 0.47904053 3.6865967 3.5913677 6.4652384 3.924825 6.4652384 C 4.2582895 6.4652384 4.2674398 6.1598307 4.2674398 6.1598307 L 4.2720907 4.7438965 L 12.720154 4.7438965 C 12.899758 4.7438965 13.044165 4.5994891 13.044165 4.4198853 L 13.044165 2.2334554 C 13.044165 2.0538516 12.899758 1.9094442 12.720154 1.9094442 L 4.2813924 1.9094442 L 4.2860433 0.48834229 L 4.2860433 0.48679199 C 4.2860433 0.48679199 4.325662 0.13814319 3.9827026 0.14211019 z M 11.346077 2.2308716 C 11.349714 2.2306966 11.353225 2.2308716 11.35693 2.2308716 C 11.475458 2.2308716 11.560018 2.3212313 11.560018 2.4566976 L 11.560018 3.4220133 L 12.051461 2.9476237 C 12.082505 2.9165787 12.130526 2.8773437 12.203906 2.8773437 C 12.302685 2.8801659 12.395325 2.9587585 12.392525 3.0716471 C 12.392525 3.1393804 12.353362 3.1962305 12.260234 3.2752523 L 11.992033 3.5062459 L 12.367204 4.0426473 C 12.415184 4.1132026 12.463554 4.1698143 12.455054 4.2488363 C 12.440943 4.370191 12.336232 4.4151544 12.231812 4.4038656 C 12.155612 4.3953989 12.11045 4.3502373 12.04836 4.2571045 L 11.718148 3.7548096 L 11.560018 3.8958862 L 11.560018 4.1950928 C 11.560018 4.330559 11.475461 4.4209188 11.35693 4.4209188 C 11.2384 4.4209188 11.153841 4.330559 11.153841 4.1950928 L 11.153841 2.4566976 C 11.153841 2.3254646 11.233348 2.2362969 11.346077 2.2308716 z M 3.1977376 2.3605794 C 3.3840037 2.3605794 3.8132039 2.4258205 3.8132039 2.6628866 C 3.8132039 2.7757749 3.7256679 2.8515055 3.6240682 2.8515055 C 3.4857796 2.8515055 3.4493115 2.7502197 3.1812012 2.7502197 C 2.8453576 2.7502197 2.6675374 3.0577879 2.6675374 3.3992757 C 2.6675374 3.743586 2.8393165 4.0483317 3.1977376 4.0483317 C 3.3529595 4.0483317 3.4743699 4.017123 3.5703247 3.9155233 L 3.5703247 3.6023641 L 3.3755046 3.6023641 C 3.2597934 3.6023641 3.1781006 3.5206709 3.1781006 3.4049601 C 3.1781006 3.2864273 3.2682604 3.2127238 3.3755046 3.2127238 L 3.7821981 3.2158244 C 3.9035534 3.2158244 3.9940715 3.2948552 3.9940715 3.435966 L 3.9940715 3.9635824 C 3.9940715 4.0228484 3.9770968 4.0710706 3.9516968 4.1077596 C 3.7936527 4.3194257 3.4884257 4.437972 3.1977376 4.437972 C 2.6248281 4.437972 2.2272542 3.9834741 2.2272542 3.3992757 C 2.2272542 2.8122552 2.6220059 2.3605794 3.1977376 2.3605794 z M 6.8295573 2.3946859 C 6.8335408 2.3945376 6.8373859 2.3946859 6.8414429 2.3946859 L 7.3835286 2.3946859 C 7.6770391 2.3946859 7.9137288 2.5921417 7.9137288 2.8912964 C 7.9137288 3.0888514 7.8318343 3.2215913 7.6512126 3.3062581 L 7.6512126 3.3119425 C 7.8911007 3.3458092 8.0806437 3.5459673 8.0806437 3.7914998 C 8.0806437 4.1894321 7.8153689 4.4038656 7.4259033 4.4038656 L 6.8440267 4.4038656 C 6.7142043 4.4038656 6.6187174 4.3220523 6.6187174 4.1894084 L 6.6187174 2.6060425 C 6.6187174 2.4748095 6.7060672 2.3992835 6.8295573 2.3946859 z M 7.0419474 2.7672729 L 7.0419474 3.1905029 L 7.262089 3.1905029 C 7.4003777 3.1905029 7.4904989 3.1083715 7.4904989 2.9672607 C 7.4904989 2.8346164 7.3862665 2.7672729 7.262089 2.7672729 L 7.0419474 2.7672729 z M 4.9506022 2.8685588 C 5.3795788 2.8685588 5.6787231 3.2440642 5.6787231 3.6561076 C 5.6787231 4.0794398 5.3880455 4.437972 4.9506022 4.437972 C 4.513159 4.437972 4.2224813 4.0794398 4.2224813 3.6561076 C 4.2224813 3.2440642 4.5216255 2.8685588 4.9506022 2.8685588 z M 8.8873128 2.8685588 C 9.3162894 2.8685588 9.6154338 3.0575124 9.6154338 3.4695557 L 9.6154338 4.1558187 C 9.6154338 4.2602407 9.6158632 4.4209188 9.4211304 4.4209188 C 9.3025974 4.4209188 9.2545322 4.3560805 9.2263102 4.2488363 C 9.1218882 4.3730136 8.9695881 4.437972 8.7296997 4.437972 C 8.4757005 4.437972 8.2046672 4.3162008 8.2046672 3.977535 C 8.2046672 3.7263578 8.3739851 3.5176147 8.8227173 3.5176147 L 9.209257 3.5176147 C 9.209257 3.2946603 9.0938113 3.21014 8.8821452 3.21014 C 8.6366125 3.21014 8.6196615 3.3202108 8.441862 3.3202108 C 8.3317951 3.3202108 8.2863159 3.2099789 8.2863159 3.1507121 C 8.2863159 2.9277575 8.6587135 2.8685588 8.8873128 2.8685588 z M 10.516154 2.8685588 C 10.67702 2.8685588 11.012764 2.9278356 11.012764 3.1253906 C 11.012764 3.2100572 10.953178 3.3202108 10.857218 3.3202108 C 10.75562 3.3202108 10.665613 3.2411458 10.535791 3.2411458 C 10.304369 3.2411458 10.19421 3.4472637 10.19421 3.6561076 C 10.19421 3.8564848 10.315658 4.0653849 10.535791 4.0653849 C 10.637391 4.0653849 10.789601 3.9806356 10.837581 3.9806356 C 10.933538 3.9806356 11.012764 4.0624477 11.012764 4.1584025 C 11.012764 4.3672459 10.662909 4.437972 10.516154 4.437972 C 10.07871 4.437972 9.788033 4.0794398 9.788033 3.6561076 C 9.788033 3.2440642 10.087176 2.8685588 10.516154 2.8685588 z M 4.9402669 3.2411458 C 4.7246097 3.2478585 4.628658 3.4644175 4.628658 3.6561076 C 4.628658 3.8508404 4.7304694 4.0653849 4.9506022 4.0653849 C 5.1707349 4.0653849 5.2725464 3.8508404 5.2725464 3.6561076 C 5.2725464 3.4613748 5.1735571 3.2411458 4.9506022 3.2411458 C 4.9471185 3.2411458 4.9436901 3.2410393 4.9402669 3.2411458 z M 7.0419474 3.56309 L 7.0419474 4.0312785 L 7.3747437 4.0312785 C 7.5271432 4.0312785 7.6403605 3.9438595 7.6403605 3.7858154 C 7.6403605 3.6531714 7.538709 3.56309 7.341154 3.56309 L 7.0419474 3.56309 z M 8.847522 3.7718628 C 8.6983734 3.7762709 8.6108439 3.8486873 8.6108439 3.9553141 C 8.6108439 4.0823143 8.7153947 4.1273966 8.8480387 4.1273966 C 9.0427715 4.1273966 9.209257 4.0145733 9.209257 3.7718628 L 8.8619914 3.7718628 C 8.8570525 3.7718628 8.8523332 3.7717206 8.847522 3.7718628 z " />
</svg>
</div>
</a>
</div>
<button class="dark-mode-toggle-btn">
<p class="darkmodep"> Light Mode </p>
<div class="moonglow"></div>
<div class="darkmodeimg">
<div class="moon light-mode">
<div class="moon-border"></div>
<div class="moonspot1 spots light-mode"></div>
<div class="moonspot2 spots light-mode"></div>
</div>
<div class="mooncover light-mode"></div>
</div>
</button>
<div class="help">
<button id="openModalBtn">Help</button>
<div id="helpModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<ol>
<li>On the homepage scroll through the slides of the Open Studios directory (which is the same as the <a href="https://static1.squarespace.com/static/5aaa85dd697a985c81246146/t/64676335009e71330276c9f4/1684497228549/DIRECTORY_2023_JL_19.05.23.+12.52pm.pdf" target="_blank">online PDF</a> and the printed directory)</li>
<li>
At the bottom of most slides there is an option to “Add this location to your map” with a tick box, so you can add as many locations as you like
</li>
<li>
Click the button to find ‘Your Map’ and you will see that an automated route has been created for you!
</li>
<li>
You can add and remove studios directly within the map as well, by clicking a marker popup.
</li>
<li>
If something isn’t working, you may need to double check your browser settings - you will probably need to consent to the website accessing your location, and make sure your Mac/Window preferences for Location Services are turned on.
</li>
<li>
Please note, at the moment, there is a limitation of only having 25 studios in a route on the map at one time.
</li>
</ol>
</div>
</div>
</div>
<div class="map-container">
<div id="map"></div>
</div>
</main>
<script src="scripts/script2.js" type="module"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-directions/v4.1.1/mapbox-gl-directions.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.7.0/mapbox-gl-geocoder.min.js"></script>
<script src="scripts/map.js" type="module"></script>
<script src="scripts/help.js" type="module"></script>
</body>
</html>