-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
304 lines (284 loc) · 23.9 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
<!doctype html>
<html lang="en">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3GZ0H710YL"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-3GZ0H710YL');
</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Site information -->
<title>Guess the city from satellite images - Satle</title>
<meta name="description" property="description" content="Satle is a Wordle-like geography game where you have 6 tries to guess the city based on satellite images. A new puzzle is available each day.">
<meta name="twitter:card" content="summary">
<meta name="og:title" content="Satle - A daily geography puzzle">
<meta name="og:url" content="https://satle.ca">
<meta name="og:description" content="Satle is a Wordle-like geography game where you have 6 tries to guess the city based on satellite images. A new puzzle is available each day.">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="styles/style.css">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5">
<link rel="canonical" href="https://satle.ca" />
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff">
<!-- Twemoji -->
<script src="https://unpkg.com/twemoji@latest/dist/twemoji.min.js" crossorigin="anonymous"></script>
<!-- Source scripts -->
<script type="module" src="js/app/util.js"></script>
<script type="module" src="js/app/clipboard.js"></script>
<script type="module" src="js/app/map.js"></script>
<script type="module" src="js/app/storage.js"></script>
<script type="module" src="js/app/time.js"></script>
<script type="module" src="js/app/geolocation.js"></script>
<script type="module" src="js/app/settings.js"></script>
<script type="module" src="js/app/game.js"></script>
</head>
<body>
<nav class="navbar navbar-expand navbar-dark bg-dark">
<div class="container-fluid">
<div class="div-spacer" style="width: 180px;"></div>
<span class="navbar-brand mx-auto my-auto h1">Satle</span>
<ul class="navbar-nav">
<li class="nav-item">
<a href="#" data-bs-toggle="modal" data-bs-target="#helpModal">
<svg class="icon-img" width="60" height="60" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg" style="padding:6px 0 6px 0">
<path d="m600 259.93c-187.55 0-340.07 152.52-340.07 340.07 0 187.55 152.52 340.07 340.07 340.07 187.55 0 340.07-152.52 340.07-340.07 0-187.55-152.52-340.07-340.07-340.07zm0 45.344c163.04 0 294.73 131.69 294.73 294.73 0 163.04-131.69 294.73-294.73 294.73-163.04 0-294.73-131.69-294.73-294.73 0-163.04 131.69-294.73 294.73-294.73zm0 105.8c-62.336 0-113.36 51.02-113.36 113.36-0.085937 6.0703 2.2656 11.918 6.5273 16.238 4.2578 4.3242 10.074 6.7578 16.145 6.7578 6.0703 0 11.883-2.4336 16.145-6.7578 4.2617-4.3203 6.6133-10.168 6.5273-16.238 0-37.832 30.18-68.016 68.012-68.016s68.016 30.184 68.016 68.016c0.26953 31.047-15.719 46.934-38.023 68.016-11.148 10.539-23.531 21.504-34.004 35.895-10.477 14.391-18.656 33.094-18.656 54.789-0.085937 6.0703 2.2617 11.918 6.5234 16.242 4.2617 4.3203 10.078 6.7539 16.145 6.7539 6.0703 0 11.887-2.4336 16.148-6.7539 4.2617-4.3242 6.6094-10.172 6.5234-16.242 0-11.203 3.2852-18.984 9.9219-28.102 6.6328-9.1172 16.965-18.785 28.574-29.758 23.172-21.906 52.508-52.547 52.191-100.84v-0.23438c-0.12891-62.23-51.102-113.12-113.36-113.12zm0 317.4c-16.691 0-30.227 13.535-30.227 30.23 0 16.691 13.535 30.227 30.227 30.227 16.695 0 30.23-13.535 30.23-30.227 0-16.695-13.535-30.23-30.23-30.23z"/>
</svg>
</a>
</li>
<li class="nav-item">
<a href="#" data-bs-toggle="modal" data-bs-target="#statsModal">
<svg class="icon-img" width="60" height="60" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
<path d="m484.28 350.62c-5.5938 0.58594-10.77 3.2305-14.523 7.4219-3.7539 4.1875-5.8164 9.625-5.7852 15.25v143.59h-204.04c-0.78516-0.042969-1.5742-0.042969-2.3594 0-5.5977 0.58594-10.773 3.2305-14.527 7.418-3.7539 4.1914-5.8125 9.625-5.7852 15.25v287.17c0 6.0156 2.3906 11.781 6.6406 16.031 4.2539 4.25 10.02 6.6406 16.031 6.6406h680.14c6.0117 0 11.777-2.3906 16.031-6.6406 4.25-4.25 6.6367-10.016 6.6406-16.031v-196.48c-0.003906-6.0117-2.3906-11.777-6.6406-16.031-4.2539-4.25-10.02-6.6406-16.031-6.6406h-204.04v-234.27c0-6.0156-2.3906-11.781-6.6406-16.031-4.2539-4.2539-10.02-6.6406-16.031-6.6406h-226.71c-0.78516-0.042969-1.5742-0.042969-2.3633 0zm25.035 45.34h181.37v408.09h-181.37zm-226.71 166.26h181.37v241.83h-181.37zm453.43 90.688h181.37v151.14h-181.37z"/>
</svg>
</a>
</li>
<li class="nav-item">
<a href="#" data-bs-toggle="modal" data-bs-target="#settingsModal">
<svg class="icon-img" width="60" height="60" version="1.1" viewBox="0 0 1200 1200" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="m788.85 542.98h-28.078c-2.0039-5.5391-4.2891-10.961-6.8398-16.23l19.949-19.977c15.602-15.621 15.594-41.027-0.019531-56.637l-23.98-23.98c-15.617-15.625-41.035-15.617-56.652 0l-20.387 20.383c-5.1523-2.4336-10.434-4.5898-15.816-6.4648v-28.918c0-22.094-17.969-40.062-40.062-40.062h-33.926c-22.094 0-40.062 17.969-40.062 40.062v28.898c-5.3906 1.8984-10.668 4.0703-15.805 6.5l-20.398-20.398c-15.613-15.621-41.031-15.633-56.652-0.003906l-23.965 23.961c-7.5664 7.5703-11.734 17.637-11.73 28.344 0.003907 10.703 4.1797 20.766 11.758 28.332l19.902 19.883c-2.5938 5.3398-4.8984 10.785-6.8945 16.312h-28.043c-22.094 0-40.062 17.969-40.062 40.062v33.926c0 22.094 17.969 40.062 40.062 40.062h27.07c1.9961 5.8555 4.3281 11.609 6.957 17.18l-19.016 19.012c-7.5703 7.5664-11.738 17.633-11.738 28.34 0.003906 10.699 4.1758 20.766 11.75 28.332l23.953 23.922c15.621 15.613 41.031 15.602 56.637-0.011718l18.562-18.562c5.6797 2.7578 11.562 5.2031 17.648 7.332v26.285c0 22.094 17.969 40.062 40.062 40.062h33.926c22.094 0 40.062-17.969 40.062-40.062v-26.273c6.0391-2.1133 11.938-4.5664 17.648-7.3438l18.562 18.562c15.617 15.613 41.02 15.625 56.645 0.011718l23.953-23.93c7.5703-7.5664 11.746-17.629 11.75-28.328 0-10.703-4.168-20.77-11.734-28.336l-19.086-19.086c2.6094-5.543 4.9219-11.246 6.9375-17.109h27.156c22.094 0 40.062-17.969 40.062-40.062v-33.926c-0.003907-22.094-17.973-40.062-40.066-40.062zm9.8359 73.988c0 5.4219-4.4141 9.832-9.832 9.832h-38.359c-6.9375 0-12.98 4.7188-14.664 11.449l-0.10156 0.49219c-2.8164 10.301-6.8281 20.266-12.195 30.164-3.7891 5.9336-2.9844 13.77 2.0547 18.812l26.883 26.887c1.8594 1.8555 2.8828 4.3242 2.8828 6.9531-0.003907 2.6289-1.0273 5.0977-2.8867 6.9531l-23.953 23.93c-3.8359 3.832-10.07 3.8203-13.898-0.011719l-26.465-26.461c-4.5977-4.5977-11.633-5.7344-17.445-2.832-0.46094 0.23438-0.92969 0.49609-1.4102 0.78906-0.023437 0.011719-0.046875 0.027344-0.074219 0.039063-9.5156 5.4336-19.805 9.7148-30.199 12.629-0.12109 0.03125-0.64844 0.15234-0.76953 0.17969-6.7305 1.6836-11.449 7.7266-11.449 14.664v37.422c0 5.4219-4.4141 9.832-9.832 9.832h-33.926c-5.4219 0-9.832-4.4141-9.832-9.832v-37.422c0-6.9375-4.7188-12.98-11.449-14.664l-0.40234-0.078125c-10.766-3.0156-21.051-7.3008-30.566-12.73-0.035156-0.019532-0.066406-0.035157-0.10156-0.054688-0.42187-0.25391-1.0352-0.59766-1.3828-0.77344-5.8203-2.9062-12.848-1.7734-17.445 2.832l-26.469 26.465c-3.832 3.8359-10.066 3.832-13.898 0.003906l-23.953-23.922c-1.8594-1.8594-2.8828-4.3281-2.8867-6.957 0-2.6289 1.0234-5.0977 2.8828-6.957l26.82-26.82c4.6016-4.5977 5.7422-11.629 2.832-17.445-0.27734-0.54688-0.59766-1.1055-0.70703-1.2617-5.4609-9.9453-9.6328-20.367-12.41-30.977-1.7422-6.6523-7.75-11.293-14.625-11.293h-38.297c-5.4219 0-9.832-4.4141-9.832-9.832v-33.926c0-5.4219 4.4141-9.832 9.832-9.832h39.043c6.7617 0 12.699-4.4922 14.543-10.992 3.0078-10.617 7.3945-20.992 13.039-30.848 3.3945-5.9219 2.3945-13.383-2.4336-18.207l-27.801-27.766c-1.8594-1.8555-2.8867-4.3242-2.8867-6.9531 0-2.6328 1.0234-5.0977 2.8789-6.957l23.961-23.961c3.8359-3.8359 10.07-3.832 13.906 0l28.199 28.199c4.7852 4.793 12.18 5.8008 18.09 2.4922 9.5039-5.3398 19.75-9.5547 30.445-12.52 6.543-1.8164 11.07-7.7734 11.07-14.566v-39.977c0-5.4219 4.4141-9.832 9.832-9.832h33.926c5.4219 0 9.832 4.4141 9.832 9.832v40.039c0 6.8008 4.5391 12.746 11.055 14.562 0.28516 0.097657 0.57422 0.18359 0.86719 0.26563 9.7227 2.6719 19.129 6.4648 28.492 11.555 1.6055 1.0781 3.4141 1.832 5.3008 2.2383 1.0156 0.21875 2.0664 0.33594 3.1445 0.33984h0.007813 0.011719 0.023437 0.042969 0.027344c2.4922-0.007812 4.8359-0.62109 6.9023-1.6953 1.3672-0.70703 2.6289-1.6289 3.7344-2.7344l28.199-28.199c3.832-3.832 10.062-3.8359 13.906 0l23.98 23.98c3.832 3.832 3.832 10.07 0.003906 13.902l-27.848 27.891c-5.1211 5.125-5.8555 13.125-1.875 19.074 5.2773 9.3477 9.4805 19.398 12.496 29.883 0.70312 2.4609 2.0273 4.6992 3.8359 6.5078 1.1484 1.1523 2.4922 2.1211 3.9453 2.8477 2.1016 1.0469 4.4141 1.5938 6.7617 1.5938h39.043c5.4219 0 9.832 4.4141 9.832 9.832z"/>
<path d="m667.5 477.73c-0.0625-0.035156-0.12109-0.066406-0.18359-0.10156 0.11328 0.070312 0.22656 0.13672 0.33984 0.19922-0.054688-0.03125-0.10547-0.066407-0.15625-0.097657z"/>
<path d="m600 510.07c-50.305 0-91.234 40.93-91.234 91.238 0 50.305 40.93 91.234 91.234 91.234s91.234-40.93 91.234-91.234c0.003906-50.309-40.926-91.238-91.234-91.238zm0 152.25c-33.637 0-61.008-27.367-61.008-61.008s27.367-61.012 61.008-61.012c33.637 0 61.008 27.367 61.008 61.012 0 33.637-27.367 61.008-61.008 61.008z"/>
</g>
</svg>
</a>
</li>
</ul>
</div>
</nav>
<!-- Main Container -->
<div id="container" class="container-fluid">
<div id="map"></div>
<div id="guessArea" class="row position-absolute w-100">
<div class="row">
<div id="guesses" class="col-md-auto pb-3 mx-auto">
</div>
</div>
<div class="col-md-2 col-sm-0"></div>
<div class="col-md-8 col-sm-12">
<form id="guessForm" class="row align-items-center text-center" autocomplete="off">
<div class="col-md-10 col-sm-12">
<input id="guessBox" class="form-control form-control-lg" type="text" placeholder="Guess a city" aria-label="Guess a city">
</div>
<div class="col-md-2 col-sm-12 pb-1 pt-1 pl-1 pr-1 flex">
<button id="submitBtn" type="submit" class="btn btn-primary">Guess</button>
</div>
</form>
</div>
<div class="col-md-2 col-sm-0"></div>
</div>
<div id="autocompleteArea" class="row position-absolute w-100">
<div class="col-md-2 col-sm-0"></div>
<div class="col-md-8 col-sm-12">
<div class="row">
<div class="col-md-10 col-sm-12">
<ul id="autocompleteList" class="list-group">
</ul>
</div>
<div class="col-md-2 col-sm-12 pb-1 pt-1 pl-1 pr-1 flex">
</div>
</div>
</div>
<div class="col-md-2 col-sm-0"></div>
</div>
</div>
<div id="guessWarning">
<div class="alert alert-warning text-center" role="alert">
That guess is not in the list.<br/>Pick a city and country from the autofill list, then guess again.
</div>
</div>
<!-- Help Modal -->
<div class="modal fade" id="helpModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content bg-dark text-light">
<div class="modal-header">
<h5 class="modal-title" id="helpModalLabel">How to play</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p class="h6">Guess the <strong>CITY</strong> in 6 tries.</p>
<br/>
<p class="h6">You will be shown a satellite image of a city somewhere in the world. You try to guess which city is shown in the image.</p>
<p class="h6">Each incorrect guess will cause the satellite image to be zoomed out further. You will be shown the direction and distance of the correct city from your guess.</p>
<p class="h6">You can click previous guesses to see the previous images.</p>
</div>
<div class="modal-footer">
<p class="h6"><strong>A new SATLE will be available each day!</strong></p>
</div>
</div>
</div>
</div>
<!-- Update Modals -->
<div class="modal fade" id="update1Modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="update1ModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content bg-dark text-light">
<div class="modal-header">
<h5 class="modal-title" id="update1ModalLabel">Satle Update 02/24/2023</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>🚛 Satle has moved!</p>
<br/>
<p>Welcome to the new home of Satle at <strong>https://satle.ca</strong>.</p>
<br/>
<p>Your stats have been migrated from the old site. Please remember to update your bookmarks.</p>
<hr/>
<p>There will be new puzzles and more exciting changes coming to Satle soon!</p>
</div>
</div>
</div>
</div>
<div class="modal fade" id="update2Modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="update2ModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content bg-dark text-light">
<div class="modal-header">
<h5 class="modal-title" id="update2ModalLabel">Satle Update 07/24/2024</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h6>🆕 New features and puzzles!</h6>
<br/>
<p>Satle has just had its biggest update since launch.</p>
<p><strong>What's new?</strong></p>
<ul>
<li>New puzzles from around the world 🌍</li>
<li>Country names are now displayed in the autofill list 🏙️</li>
<li>Location information included in the end screen 📍</li>
<li>A few bugs have been squashed 🐞</li>
</ul>
<br/>
<p>Thank you for enjoying Satle,<br>Brendan</p>
</div>
</div>
</div>
</div>
<!-- Stats Modal -->
<div class="modal fade" id="statsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="statsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content bg-dark text-light">
<div class="modal-header">
<h5 class="modal-title" id="statsModalLabel">Statistics</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div id="stats" class="row text-center">
<div class="col-2"></div>
<div class="col-2">
<p id="playedValue" class="display-6">0</p>
<p>Played</p>
</div>
<div class="col-2">
<p id="winPercentValue" class="display-6">0</p>
<p>Win %</p>
</div>
<div class="col-2">
<p id="currentStreakValue" class="display-6">0</p>
<p>Current<br/>Streak</p>
</div>
<div class="col-2">
<p id="longestStreakValue" class="display-6">0</p>
<p>Longest<br/>Streak</p>
</div>
<div class="col-2"></div>
</div>
<div class="row mt-3 mb-2">
<div class="col-12 text-center">
<p class="h5">Guess Distribution</p>
</div>
<div class="col-2"></div>
<div id="distributions" class="col-8">
</div>
<div class="col-2"></div>
</div>
</div>
</div>
</div>
</div>
<!-- Settings Modal -->
<div class="modal fade" id="settingsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="settingsModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content bg-dark text-light">
<div class="modal-header">
<h5 class="modal-title" id="settingsModalLabel">Settings</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div id="settings-list" class="modal-body" style="padding-right: 0;">
<p class="h4 mb-3 text-muted">Show distance
<span class="me-3 form-check-reverse form-check form-switch" style="float:right;">
<input id="show-distance-switch" class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
</span>
</p>
<p class="h4 pt-3 mb-3 text-muted">Distance units
<span class="me-3 form-check-reverse form-check form-switch" style="float:right;">
<input id="distance-units-switch" class="form-check-input" type="checkbox" role="switch">
<label id="distance-units-value" class="form-check-label text-light" for="distance-units-switch">km</label>
</span>
</p>
<p class="h4 pt-3 mb-3 text-muted">Feedback<a id="emailButton" class="me-3" href="#" style="float: right;">Email</a></p>
<p class="h4 pt-3 pb-3 mb-3 text-muted" style="border-bottom: 1px solid grey;">Issues<a class="me-3" href="https://github.com/brendaninnis/satle" target="_blank" style="float: right;">Github</a></p>
<script type='text/javascript' src='https://storage.ko-fi.com/cdn/widget/Widget_2.js'></script><script type='text/javascript'>kofiwidget2.init('Support Satle on Ko-fi', '#1b9aaa', 'O5O0F4YRT');kofiwidget2.draw();</script>
</div>
<div class="modal-footer">
<p class="h6"><strong>Next Satle available in <span class="satle-countdown"></span></strong></p>
</div>
</div>
</div>
</div>
<!-- Game End Modal -->
<div class="modal fade" id="gameEndModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="gameEndModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content bg-dark text-light">
<div class="modal-header">
<h3 class="modal-title" id="gameEndTitle"></h3>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body text-center">
<p id="gameEndText" class="h4 mb-4"></p>
<button id="shareButton" type="button" class="btn btn-success" style="width: 100%;" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Copied results to clipboard.">Share results</button>
<p id="gameEndAnswer" class="h6 mt-4"></p>
<div id="gameEndMap" class="m-3" style="aspect-ratio: 1.62 / 1;"></div>
<p id="gameEndName" class="h4"></p>
<p id="gameEndDescription" class="text-white text-opacity-75"></p>
</div>
<div class="modal-footer text-center">
<p class="h6"><strong>Next Satle available in <span class="satle-countdown"></span></strong></p>
<script type='text/javascript' src='https://storage.ko-fi.com/cdn/widget/Widget_2.js'></script><script type='text/javascript'>kofiwidget2.init('Support Satle on Ko-fi', '#1b9aaa', 'O5O0F4YRT');kofiwidget2.draw();</script>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
</body>
</html>