-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
97 lines (76 loc) · 4.28 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
<!DOCTYPE html>
<html>
<head>
<title>iNatGuessr</title>
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<link rel="stylesheet" href="style.css"/>
</head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2NRGG98YT1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-2NRGG98YT1');
</script>
<body>
<div id="pictureModal" class="pictureModal">
<img id="modal-content" class="modal-content">
<p style="color:aliceblue; text-align: center;">Click image to exit</p>
</div>
<a href="javascript:window.location.href=window.location.href"><h1>🔎🐦🌍 iNatGuessr</h1></a>
<h4>Guess the location based on the <a href="https://www.inaturalist.org/" target="_blank">iNaturalist</a> observations!</h4>
<span id="tutorial">
<p>Welcome to iNatGuessr. A Guessr-style game where you are given a selection of images from iNaturalist observations. From these <input type="number" id="nPhotos" name="nPhotos" min="2" max="12" value = "12"> images it is your task to work out where they are from. When you make a guess the actual location will be revealed. The game is played over 5 rounds with 5000 points per round. Good luck! New to iNatGuessr? <b><a href="help.html">View the guide</a></b></p>
</span>
<div id="tutorial2">
<p><b>Game type:</b> <a href="?">Everything, everywhere</a> 🌍 | <a href="?taxon_id=3">Birds</a> 🐦🌍 | <a href="?iconic_taxa=Plantae">Plants</a> 🌳🌹🌻🌍 | <a href="?iconic_taxa=Amphibia,Reptilia">Herptiles</a> 🐸🦎🐊🌍 | <a href="?iconic_taxa=Actinopterygii">Fish</a> 🐟🐠🌍 | <a href="?place_id=1">USA only 🦅</a> | <a href="?project_id=freshwater-fishes-of-north-america&place_id=97394">North American freshwater fish 🐟</a> | <a href ="?project_id=the-arborsphere-b67c5e40-6b86-4a75-bab7-279c46405b3b">Trees 🌳🌲🌴🌍</a> | <a href ="?project_id=water-birds-of-the-world">Water birds 🦆🌍</a> | <a href ="?taxon_id=47115">Molluscs 🐌🐚🌍</a></p>
<form style="font-size:20px;">
<b>Game mode:</b>
<label class="radio-inline">
<input type="radio" name="optradio" id="endlessRadio" checked>
<span>Endless mode</span>
</label>
|
<label class="radio-inline">
<input type="radio" name="optradio" id="dailyRadio">
<span>Daily challenge</span>
</label>
|
<label class="radio-inline">
<input type="radio" name="optradio" id="customRadio">
<span>Custom seed:</span>
<input type="text" id="fname" name="fname">
</label>
</form>
</div>
<p><b>Current game set-up:</b> <span id="parameter_info">Everything, everywhere</span></p>
<button id="playButton" class="greenButton">Start game</button>
<span id ="game" style="display: none;">
<div id="imageContainer"><p>Loading observations...</p></div>
<p style="font-size: 16px;">Click an image to get a closer look. Images may be subject to copyright.</p>
<h4>Click the map to guess a location</h4>
<p id="placeContainer"></p>
<div id="mapContainer">
<div id="map" class="disabled"></div>
</div>
<div id="scoreFactorContainer"></div>
<button id="confirmGuessButton" class="greenButton">Confirm Guess</button>
<p id="inatOutwardContainer"></p>
<br>
<button id="refreshButton" class="greenButton" style="display: none;">Next round</button>
<span id="gameFinishMessage"></span>
<br>
<h4>Your results:</h4>
<div id="scoreContainer" ></div>
<button id="copyButton">Copy results to Clipboard</button>
</span>
<p>By Simon Rolph v0.1.6</p>
<img src="images/powered_by.png" style="width: 150px;">
<br>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="js/seedrandom.min.js"></script>
<script src="script2.js"></script>
</body>
</html>