-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
197 lines (175 loc) · 8.46 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<title>World Map Skiller</title>
<link rel="apple-touch-icon" sizes="120x120" href="icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="manifest" href="icons/manifest.json">
<link rel="shortcut icon" href="icons/favicon.ico">
<meta name="msapplication-config" content="icons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<meta name="author" content="Michael Müller, Valéry Febvre">
<meta name="copyright" content="Copyright 2015 Valéry Febvre, 2017 Michael Müller">
<link rel="resource" type="application/l10n" href="locales/locales.ini">
<link rel="stylesheet" href="css/bb.css">
<link rel="stylesheet" href="css/icomoon.css">
<link rel="stylesheet" href="css/flags.css">
<link rel="stylesheet" href="lib/animate.css">
<link rel="stylesheet" href="css/style.css">
<script defer src="lib/jquery-3.2.1.slim.min.js"></script>
<script defer src="lib/l10n.js"></script>
<link rel="stylesheet" href="lib/leaflet-0.7.3/leaflet.css">
<script>
window.L_PREFER_CANVAS = true;
</script>
<script defer src="lib/leaflet-0.7.3/leaflet.js"></script>
<script defer src="js/app.js"></script>
<script defer src="js/stats.js"></script>
<script defer src="js/world-map.js"></script>
</head>
<body role="application" class="skin-organic">
<!--···························· World Map ····························-->
<section role="region" id="world-map" data-position="current">
<header class="fixed">
<button id="about-open" class="icon-info"></button>
<menu type="toolbar">
<button id="stats-open" class="icon-stats2"></button>
</menu>
<h1>World Map Skiller</h1>
</header>
<article>
<div id="map"></div>
<div class="map-box" id="map-box-top"><div></div></div>
<div class="map-box" id="map-box-bottom"><div></div></div>
</article>
<div role="toolbar">
<button id="btn-start" class="icon-play-arrow"></button>
<button id="btn-next" class="icon-navigate-next" style="visibility: hidden"></button>
<span></span>
<span></span>
<button id="btn-reset-map-view" class="icon-open-with"></button>
</div>
</section>
<!--···························· Statistics ····························-->
<section role="region" id="stats" data-position="right">
<header class="fixed">
<button id="stats-back" class="icon icon-back"></button>
<h1 data-l10n-id="statistics">Statistics</h1>
</header>
<article class="content header scrollable">
<header>
<h2 data-l10n-id="overall-score">Overall score</h2>
</header>
<section>
<div id="stats-bar">
<div>
<div class="title" data-l10n-id="best">Best</div>
<div id="overall-score-min"></div>
</div>
<div>
<div class="title" data-l10n-id="last">Last</div>
<div id="overall-score-last"></div>
</div>
<div>
<div class="title" data-l10n-id="average">Avg.</div>
<div id="overall-score-avg"></div>
</div>
</div>
<div id="stats-bar-help">
<p data-l10n-id="best-help"></p>
<p data-l10n-id="last-help"></p>
<p data-l10n-id="average-help"></p>
</div>
</section>
<header id="stats-list-header">
<h2 data-l10n-id="scores-by-country">Scores by country</h2>
</header>
<section data-type="list">
<ul id="stats-list"></ul>
</section>
<section>
<p>
<button id="stats-clear" class="button" type="button" data-l10n-id="clear-scores">Clear scores</button>
</p>
</section>
</article>
<form id="stats-clear-dialog" role="dialog" data-type="confirm" class="hide">
<section>
<h1 data-l10n-id="clear-scores">Clear scores</h1>
<p data-l10n-id="clear-scores-are-you-sure">Are you sure to clear your scores?</p>
</section>
<menu>
<button id="stats-clear-cancel" class="button" data-l10n-id="cancel">Cancel</button>
<button id="stats-clear-validate" class="button danger" data-l10n-id="ok">OK</button>
</menu>
</form>
</section>
<!--···························· About ····························-->
<section id="about" role="region" data-position="left">
<form role="dialog" data-type="confirm">
<section>
<h1 data-l10n-id="description">Description</h1>
<p>
<span><strong data-l10n-id="description-info-1">Geography app to learn world countries in a fun way.</strong></span><br>
<span data-l10n-id="description-info-2">Your mission, should you decide to accept it, is to validate all countries.</span><br>
<span data-l10n-id="description-info-3">A country is validated as soon as you found it two times in only one try.</span><br>
<span data-l10n-id="description-info-4">Included are the following countries: All 193 members of the UN, Vatican City, 6 partially recognized states (Palestine, Western Sahara, Kosovo, Taiwan, Cook Islands, Niue), Antarctica, and 15 dependent regions (Greenland, Pitcairn Islands, American Samoa, Guam, Northern Mariana Islands, Puerto Rico, French Guiana, French Polynesia, Guadeloupe, Mayotte, Martinique, New Caledonia, Réunion, Wallis and Futuna, Tokelau) that are so big and so near to other countries, that they can’t be omitted.</span>
</p>
<h1 data-l10n-id="settings">Settings</h1>
<p>
<span data-l10n-id="settings-info">If the challenge is too easy for you, you can try to make it harder with the following settings:</span><br>
<span style="line-height: 2;">
<label><input type="checkbox" id="settings-name"><span data-l10n-id="settings-name">Show name of the country</span></label><br>
<label><input type="checkbox" id="settings-capital"><span data-l10n-id="settings-capital">Show capital</span></label><br>
<label><input type="checkbox" id="settings-flag"><span data-l10n-id="settings-flag">Show flag</span></label><br>
<label><input type="checkbox" id="settings-details"><span data-l10n-id="settings-details">Show region and population</span></label><br>
<select id="settings-group">
<option value="" data-l10n-id="settings-group-all">Show all countries</option>
<option value="un" data-l10n-id="settings-group-un">Show only UN members and Vatican</option>
<option value="Africa" data-l10n-id="settings-group-africa">Show only countries in Africa</option>
<option value="Americas" data-l10n-id="settings-group-america">Show only countries in America</option>
<option value="Asia" data-l10n-id="settings-group-asia">Show only countries in Asia</option>
<option value="Europe" data-l10n-id="settings-group-europe">Show only countries in Europe</option>
<option value="Oceania" data-l10n-id="settings-group-oceania">Show only countries in Oceania</option>
</select><br>
<label><input type="checkbox" id="settings-colors"><span data-l10n-id="settings-colors">Randomize colors at start</span></label>
</span>
</p>
<h1 data-l10n-id="version">Version</h1>
<p>
<span>3.14</span>
</p>
<h1 data-l10n-id="license">License</h1>
<p>
<span>GNU Affero GPL v3.0</span>
</p>
<h1 data-l10n-id="libraries">Libraries</h1>
<p>
<span><a href="https://github.com/daneden/animate.css" target="_blank" rel="noopener">animate.css</a>, <a href="https://icomoon.io" target="_blank" rel="noopener">icomoon</a>, <a href="https://jquery.com/" target="_blank" rel="noopener">jQuery</a>, <a href="https://github.com/fabi1cazenave/webL10n" target="_blank" rel="noopener">l10n.js</a>, <a href="http://leafletjs.com/" target="_blank" rel="noopener">leaflet</a>
</p>
<h1 data-l10n-id="authors">Authors</h1>
<p>
<span>Michael Müller, Valéry Febvre</span>
</p>
<ul>
<li>
<i class="icon-bug"></i>
<a href="https://github.com/Schnark/world-map-skiller/issues" target="_blank" rel="noopener" data-l10n-id="report-bug">Report a bug</a>
</li>
<li>
<i class="icon-embed2"></i>
<a href="https://github.com/Schnark/world-map-skiller" target="_blank" rel="noopener" data-l10n-id="source">Source code</a>
</li>
</ul>
</section>
<menu>
<button id="about-close" class="button" type="button" data-l10n-id="close">Close</button>
</menu>
</form>
</section>
<div id="splash-message"><span></span></div>
</body>
</html>