-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
226 lines (224 loc) · 11.7 KB
/
index.html
File metadata and controls
226 lines (224 loc) · 11.7 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>World Cup 2026 Mexico Guide</title>
<link href="icon.svg" rel="icon" type="image/svg+xml">
<link href="manifest.json" rel="manifest">
<meta content="#17364d" name="theme-color">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<header class="ns_pageHeader">
<div class="ns_headerContent">
<img alt="icon" class="ns_headerIcon" src="icon.svg">
<div class="ns_headerText">
<h1>World Cup 2026 Mexico Guide</h1>
<p>Explore Mexico City, Guadalajara, and Monterrey as host city destinations for World Cup 2026 travel.</p>
</div>
<button class="ns_menuButton" title="Menu" type="button">
<span></span>
<span></span>
<span></span>
</button>
<nav class="ns_cityControls">
<button class="ns_cityButton" type="button" value="0">Mexico City</button>
<button class="ns_cityButton" type="button" value="1">Guadalajara</button>
<button class="ns_cityButton" type="button" value="2">Monterrey</button>
</nav>
</div>
</header>
<main>
<form class="ns_searchForm">
<label>
<input class="ns_searchInput" placeholder="Search a place on the map" type="search">
</label>
<button class="ns_searchButton" title="Search" type="submit">
<img alt="search" src="images/search.png">
</button>
<p class="ns_searchError" hidden></p>
</form>
<section class="ns_mapSection">
<div class="ns_mapTools">
<div id="ns_map"></div>
<aside class="ns_categoryPanel">
<span class="ns_filterTitle">Places</span>
<button class="ns_categoryButton" disabled type="button" value="hotel">
<img alt="hotel_marker" src="images/markers/hotel.png">
<span>Hotels</span>
</button>
<button class="ns_categoryButton" disabled type="button" value="restaurant">
<img alt="restaurant_marker" src="images/markers/restaurant.png">
<span>Restaurants</span>
</button>
<button class="ns_categoryButton" disabled type="button" value="cafe">
<img alt="caffe_marker" src="images/markers/caffe.png">
<span>Cafes</span>
</button>
<button class="ns_categoryButton" disabled type="button" value="attraction">
<img alt="attraction_marker" src="images/markers/attractions.png">
<span>Attractions</span>
</button>
<button class="ns_categoryButton" disabled type="button" value="bar">
<img alt="bar_marker" src="images/markers/bar.png">
<span>Bars</span>
</button>
<button class="ns_categoryButton" disabled type="button" value="parking">
<img alt="parking_marker" src="images/markers/parking.png">
<span>Parking</span>
</button>
<div class="ns_ratingFilter">
<span>Rating</span>
<div class="ns_ratingButtons">
<button class="ns_ratingButton ns_active" disabled type="button" value="5">5</button>
<button class="ns_ratingButton ns_active" disabled type="button" value="4">4</button>
<button class="ns_ratingButton ns_active" disabled type="button" value="3">3</button>
<button class="ns_ratingButton ns_active" disabled type="button" value="2">2</button>
<button class="ns_ratingButton ns_active" disabled type="button" value="1">1</button>
</div>
</div>
</aside>
</div>
<aside class="ns_dayPanel">
<h2>One Day Trip Plan</h2>
<p class="ns_dayIntro"><strong>Start by choosing a host city.</strong>
Select a trip slot, then click any map place to add it to your match day plan.
</p>
<div class="ns_weatherPanel">
<strong>Match day weather</strong>
<span class="ns_weatherText">Choose a city to see the current weather near its stadium.</span>
</div>
<div class="ns_travelMode">
<span>Travel by</span>
<button class="ns_travelButton ns_active" title="By car" type="button" value="DRIVING">
🚗 Car
</button>
<button class="ns_travelButton" title="On foot" type="button" value="WALKING">
🚶 Walking
</button>
</div>
<div class="ns_routeScroll">
<div class="ns_routeBuilder">
<div class="ns_routeSlot">
<button class="ns_routeSlotAction" type="button">
<span class="ns_routeSlotLabel">Start</span>
</button>
<button aria-label="Delete Start" class="ns_routeDeleteButton" type="button">×</button>
</div>
<div class="ns_routeSlot">
<button class="ns_routeSlotAction" type="button">
<span class="ns_routeSlotLabel">Place 1</span>
</button>
<button aria-label="Delete Place 1" class="ns_routeDeleteButton" type="button">×</button>
</div>
<div class="ns_routeSlot">
<button class="ns_routeSlotAction" type="button">
<span class="ns_routeSlotLabel">Place 2</span>
</button>
<button aria-label="Delete Place 2" class="ns_routeDeleteButton" type="button">×</button>
</div>
<div class="ns_routeSlot">
<button class="ns_routeSlotAction" type="button">
<span class="ns_routeSlotLabel">Place 3</span>
</button>
<button aria-label="Delete Place 3" class="ns_routeDeleteButton" type="button">×</button>
</div>
<div class="ns_routeSlot">
<button class="ns_routeSlotAction" type="button">
<span class="ns_routeSlotLabel">Place 4</span>
</button>
<button aria-label="Delete Place 4" class="ns_routeDeleteButton" type="button">×</button>
</div>
<div class="ns_routeSlot">
<button class="ns_routeSlotAction" type="button">
<span class="ns_routeSlotLabel">Place 5</span>
</button>
<button aria-label="Delete Place 5" class="ns_routeDeleteButton" type="button">×</button>
</div>
<div class="ns_routeSlot">
<button class="ns_routeSlotAction" type="button">
<span class="ns_routeSlotLabel">Place 6</span>
</button>
<button aria-label="Delete Place 6" class="ns_routeDeleteButton" type="button">×</button>
</div>
<div class="ns_routeSlot">
<button class="ns_routeSlotAction" type="button">
<span class="ns_routeSlotLabel">Place 7</span>
</button>
<button aria-label="Delete Place 7" class="ns_routeDeleteButton" type="button">×</button>
</div>
<div class="ns_routeSlot">
<button class="ns_routeSlotAction" type="button">
<span class="ns_routeSlotLabel">Place 8</span>
</button>
<button aria-label="Delete Place 8" class="ns_routeDeleteButton" type="button">×</button>
</div>
<div class="ns_routeSlot">
<button class="ns_routeSlotAction" type="button">
<span class="ns_routeSlotLabel">Place 9</span>
</button>
<button aria-label="Delete Place 9" class="ns_routeDeleteButton" type="button">×</button>
</div>
<div class="ns_routeSlot">
<button class="ns_routeSlotAction" type="button">
<span class="ns_routeSlotLabel">Place 10</span>
</button>
<button aria-label="Delete Place 10" class="ns_routeDeleteButton" type="button">×</button>
</div>
<div class="ns_routeSlot">
<button class="ns_routeSlotAction" type="button">
<span class="ns_routeSlotLabel">Place 11</span>
</button>
<button aria-label="Delete Place 11" class="ns_routeDeleteButton" type="button">×</button>
</div>
<div class="ns_routeSlot">
<button class="ns_routeSlotAction" type="button">
<span class="ns_routeSlotLabel">Place 12</span>
</button>
<button aria-label="Delete Place 12" class="ns_routeDeleteButton" type="button">×</button>
</div>
<div class="ns_routeSlot">
<button class="ns_routeSlotAction" type="button">
<span class="ns_routeSlotLabel">Place 13</span>
</button>
<button aria-label="Delete Place 13" class="ns_routeDeleteButton" type="button">×</button>
</div>
<div class="ns_routeSlot">
<button class="ns_routeSlotAction" type="button">
<span class="ns_routeSlotLabel">Place 14</span>
</button>
<button aria-label="Delete Place 14" class="ns_routeDeleteButton" type="button">×</button>
</div>
<div class="ns_routeSlot">
<button class="ns_routeSlotAction" type="button">
<span class="ns_routeSlotLabel">Place 15</span>
</button>
<button aria-label="Delete Place 15" class="ns_routeDeleteButton" type="button">×</button>
</div>
<button class="ns_routeAddButton" type="button">+</button>
</div>
</div>
</aside>
</section>
</main>
<script>
if ("serviceWorker" in navigator) {
navigator.serviceWorker.register("sw.js")
}
window.initialiseGoogleMapPage = async () => {
const {initialiseMapPage} = await import("./index.js")
await initialiseMapPage()
}
</script>
<!-- API key loaded from config.js -->
<script src="config.js"></script>
<!-- Google Maps — key is read from config.js -->
<script>
const ns_mapsScript = document.createElement("script")
ns_mapsScript.async = true
ns_mapsScript.src = `https://maps.googleapis.com/maps/api/js?key=${window.GOOGLE_MAPS_API_KEY}&loading=async&callback=initialiseGoogleMapPage&libraries=marker,places`
document.body.appendChild(ns_mapsScript)
</script>
</body>
</html>