-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
96 lines (90 loc) · 4.4 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
<!DOCTYPE html>
<html>
<head>
<title>OpenStreetGuesser</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"
integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script src="js/logic.js" async></script>
<script src="js/config.js"></script>
<script src="js/confetti.js"></script>
</head>
<body>
<div id="map"></div>
<div id="pano"></div>
<!-- Introduction Modal -->
<div id="introductionModal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="introductionModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="introductionModalCenterTitle">Hi there!👋🗺</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="introductionModalCenterText">
Welcome to OpenStreetGuesser, an open-source street guessing game with custom functionalities.🏙🌐
<br><br>
<b>How to play🎮</b>
<br>
1. Guess the location of the shown street view frame.
<br>
2. Set a marker on the map to indicate your guess.
<br>
3. Click the "Guess!" button.
<br><br>
The target location is always within the map frame. You can navigate the map and street view to pin down the
exact location. The closer you are, the higher your score will be.🎯
<br><br>
Choose your city:
<input type="text" id="cityInput" placeholder="Enter a city">
<a href="#" id="currentLocationButton" onclick="getCurrentLocation()">📍</a>
<svg xmlns="http://www.w3.org/2000/svg" id="validityMarkCheck" width="32" height="32" fill="currentColor"
class="bi bi-check" viewBox="0 0 16 16" style="color: rgb(0, 207, 0); visibility: hidden;">
<path
d="M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z" />
</svg>
<br><br>
Check out the source code at <a href="https://github.com/louis-e/OpenStreetGuesser" target="_blank">GitHub</a>!👩💻
</div>
<div class="modal-footer">
<button class="btn" id="informationButton" aria-hidden="true">More information</button>
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Let's go!🚀</button>
</div>
</div>
</div>
</div>
<button class="button-1" id="guessBtn" onclick="guessBtnClick()">Guess!</button>
<!-- Guess Result Modal -->
<div id="resultModalCenter" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="resultModalCenterTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="resultModalCenterTitle">RESULT-PLACEHOLDER</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="resultModalCenterText">
DISTANCE-PLACEHOLDER
</div>
</div>
</div>
</div>
</body>
</html>