-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
108 lines (95 loc) · 6.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
<!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="A Wordle inspired game where you guess which country a picture was taken in">
<meta name="application-name" content="Locatle">
<meta name="author" content="strct">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="google-site-verification" content="DnQqwEBWiou-9sr0nft_ob0dDZ7O-1MnEQ-2fs3Zp5U" />
<meta property="og:title" content="Locatle" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://locatle.strct.net" />
<meta property="og:description"
content="A Wordle inspired game where you guess which country a picture was taken in" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<title>Locatle</title>
<link rel="stylesheet" href="main.css">
<script defer data-domain="locatle.strct.net" src="stats.js"></script>
</head>
<body>
<main>
<h1 id="title">Locatle</h1>
<h2>Guess which country the picture was taken in</h2>
<div id="picture-frame">
<div id="zoom-buttons">
<button id="zoom-in" class="zoom-button bold">
<img width="16" src="plus.svg" alt="+">
</button>
<button id="zoom-out" class="zoom-button bold">
<img width="16" src="minus.svg" alt="-">
</button>
</div>
<img id="picture">
</div>
<p class="hint">Distance is estimated using this picture's location and the guessed country's center</p>
<section class="results">
<div class="result-row">
<span class="given-country"> </span>
<span class="distance"> </span>
</div>
<div class="result-row">
<span class="given-country"> </span>
<span class="distance"> </span>
</div>
<div class="result-row">
<span class="given-country"> </span>
<span class="distance"> </span>
</div>
<div class="result-row">
<span class="given-country"> </span>
<span class="distance"> </span>
</div>
<div class="result-row">
<span class="given-country"> </span>
<span class="distance"> </span>
</div>
<div class="result-row">
<span class="given-country"> </span>
<span class="distance"> </span>
</div>
</section>
<section class="guess-area">
<input list="countries" type="text" id="input" placeholder="Enter a country name...">
<button id="guess-button">Guess</button>
</section>
<section class="end-area" hidden>
<h3 class="text"></h3>
<div>
<button id="share-button">Share</button>
</div>
</section>
<div id="suggestions"></div>
</main>
<footer>
<div class="attribution">
<span>Images provided by</span>
<a href="https://mapillary.com">
<svg xmlns="http://www.w3.org/2000/svg" class="mapillary" width="143" height="35" fill="none"
viewBox="0 0 143 35">
<path fill="#05cb63" fill-rule="evenodd"
d="M16.468 25.735c.624.327 15.734 8.542 16.21 8.807.954.528 1.963-.494 1.444-1.45-.261-.48-8.446-15.977-8.722-16.451-.276-.475-.956-.714-1.467-.396-.5.312-1.077.663-1.4.832-.651.34-.731.851-.439 1.42.643 1.248 2.664 5.038 2.896 5.435.484.831-.596 1.78-1.329 1.366-.31-.176-5.107-2.768-5.446-2.971-.339-.203-.94-.201-1.351.484a53.63 53.63 0 00-.837 1.425c-.334.61-.182 1.172.441 1.499zM.517 17.069c-.805-.448-.658-1.613.357-1.91.86-.252 7.844-2.657 9.957-3.386.382-.131.679-.434.807-.82L15.032.724c.317-.957 1.466-.96 1.935-.034.166.33 6.49 12.106 6.71 12.606.22.5.078 1.053-.42 1.372-.5.319-1.312.796-1.596.977-.513.328-1.004.1-1.238-.408-.234-.507-2.038-3.78-2.774-5.169-.368-.694-1.476-.96-1.848.162l-1.224 3.689a1.343 1.343 0 01-.812.827l-3.683 1.254c-.727.247-1.08 1.392-.099 1.874.205.1 4.626 2.538 5.082 2.76.457.224.71.867.443 1.323-.364.622-.83 1.411-1 1.668-.293.444-.87.591-1.353.33C12.671 23.69.804 17.228.517 17.068z"
clip-rule="evenodd"></path>
<path fill="#000" fill-rule="evenodd"
d="M59.703 8.872v18.982h-3.65v-9.875l-4.105 9.875h-1.986l-4.105-9.875v9.875h-3.65V8.872h3.757l4.991 11.96 4.992-11.96h3.756zm15.927 4.142h3.194v1.234c.215-.439.644-.814 1.288-1.125a4.812 4.812 0 012.12-.466c.733 0 1.422.17 2.066.508.644.338 1.203.836 1.677 1.495.475.658.85 1.472 1.128 2.44.277.97.416 2.076.416 3.32 0 1.28-.135 2.405-.403 3.374-.268.97-.635 1.783-1.1 2.441-.466.659-1.016 1.152-1.65 1.481a4.451 4.451 0 01-2.08.494c-.805 0-1.454-.128-1.946-.384s-.845-.576-1.06-.96v5.916l-3.65.8V13.014zm5.743 11.658c1.771 0 2.657-1.409 2.657-4.225 0-1.371-.22-2.414-.658-3.127-.438-.713-1.069-1.07-1.891-1.07-.609 0-1.114.215-1.517.645a4.43 4.43 0 00-.925 1.523v4.224c.25.676.585 1.184 1.006 1.522.42.338.863.508 1.328.508zm11.405-11.658v14.84h-3.676v-14.84h3.676zm-3.676-3.292a2 2 0 01.51-1.372c.34-.384.778-.576 1.315-.576.5 0 .934.192 1.301.576.367.384.55.842.55 1.372 0 .512-.183.946-.55 1.303-.367.357-.8.535-1.301.535-.537 0-.976-.178-1.315-.535-.34-.357-.51-.791-.51-1.303zm5.581-.603l3.65-1.262v19.997h-3.65V9.119zm5.555 0l3.65-1.262v19.997h-3.65V9.119zm23.453 3.895v1.015c.251-.421.662-.755 1.235-1.002a4.492 4.492 0 011.798-.37c.411 0 .809.064 1.194.192.385.128.684.338.899.631l-1.315 3.32c-.447-.403-.939-.604-1.476-.604-.447 0-.854.169-1.221.507-.367.338-.666.864-.899 1.577v9.574h-3.649v-14.84h3.434zm-9.003 13.757c-.972.864-2.105 1.463-3.315 1.463-4.188 0-5.943-3.475-5.943-7.762 0-4.287 1.755-7.762 5.943-7.762 1.302 0 2.408.558 3.315 1.397V12.91h3.719v15.122h-3.719V26.77zm0-3.747c-.466 1.03-1.289 1.674-2.479 1.695-2.25.04-3.113-1.853-3.154-4.206-.04-2.354.757-4.276 3.007-4.316 1.16-.02 2.101.73 2.626 1.939v4.888zM70.472 26.77c-.973.864-2.106 1.463-3.315 1.463-4.188 0-5.944-3.475-5.944-7.762 0-4.287 1.756-7.762 5.944-7.762 1.302 0 2.408.558 3.315 1.397V12.91h3.719v15.122h-3.72V26.77zm0-3.747c-.466 1.03-1.29 1.674-2.48 1.695-2.25.04-3.113-1.853-3.153-4.206-.04-2.354.757-4.276 3.007-4.316 1.16-.02 2.1.73 2.626 1.939v4.888zm65.08 10.096h-3.81l2.281-6.556-4.777-13.55h4.025l2.711 8.613 2.71-8.613h3.945l-7.085 20.106z"
clip-rule="evenodd" style="transition: fill 0.2s ease 0s;"></path>
</svg>
</a>
</div>
</footer>
<script src="out.js"></script>
</body>
</html>