-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcountries.html
133 lines (124 loc) · 8.12 KB
/
countries.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="A speed typing game that also includes information of all the countries in the world">
<!-- Bootstrap CDN -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Courgette&family=Montserrat:wght@400;700&display=swap" rel="stylesheet" />
<!-- Fontawesome CDN -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.1/css/all.css" integrity="sha384-vp86vTRFVJgpjF9jiIGPEEqYqlDwgyBgEF109VFjmqGmIY/Y4HV4d3Gp2irVfcrp" crossorigin="anonymous" />
<!-- JQuery CDN -->
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<!-- Fancy Heading Display CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<!-- Styles CSS -->
<link rel="stylesheet" href="assets/css/style.css" />
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<title>Speed Typing Game</title>
</head>
<body>
<header>
<div class="alert alert-danger d-lg-none" role="alert">
<h5>Note <i class="fas fa-exclamation-circle"></i></h5>
<i id="close-alert" class="fas fa-times"></i>
<p>Speed Typing game is available on <span class="bold">Laptop / Desktop</span> ONLY as a key board is required to play it</p>
</div>
<!-- Credit: Bootstrap Navbar @ https://getbootstrap.com/docs/4.5/components/navbar/ -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="index.html"><img src="assets/images/logo.png" alt="Website Logo" /></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active menu-home">
<a class="nav-link" href="index.html">Speed Typing</a>
</li>
<li class="nav-item menu-instructions">
<a class="nav-link" data-toggle="modal" data-target="#game-instructions">Game Instructions</a>
</li>
<li class="nav-item">
<a class="nav-link" href="countries.html">Country Info <i class="fas fa-street-view current"></i><span class="sr-only">(current)</span></a>
</li>
</ul>
</div>
</nav>
<!-- /End of Credit -->
</header>
<section>
<h1 class="ml3">Let's Learn About The Countries!</h1>
<p>You can learn about the countries that you have come across in <a class="bold" href="index.html">"Speed Typing"</a> game <i class="fas fa-globe"></i></p>
<div id="countries" class="container-fluid">
<div class="row">
<div id="countries-info" class="col-lg col-lg-4">
<h3 id="country-name">Ireland</h3>
<div id="country-flag">
<img id="flag" src="https://restcountries.eu/data/irl.svg" alt="Country Flag of Ireland">
</div>
<h4><i class="fas fa-map-marked"></i> Region: <span id="region" class="font-montserrat"></span></h4>
<h4><i class="fas fa-city"></i> Capital: <span id="capital" class="font-montserrat"></span></h4>
<h4><i class="fas fa-users"></i> Population: <span id="population" class="font-montserrat"></span></h4>
<h4><i class="fas fa-language"></i> Language(s): <span id="language" class="font-montserrat"></span></h4>
<h4><i class="fab fa-wikipedia-w"></i> Wikipedia: <a id="wikipedia" class="font-montserrat" href="https://en.wikipedia.org/wiki/ireland" target="_blank" rel="noopener">Country Details</a></h4>
<!-- Credit: Bootstrap Input @ https://getbootstrap.com/docs/4.0/components/input-group/#custom-select -->
<div id="country-dropdown" class="input-group">
<i class="fas fa-info-circle"></i> <select id="list-of-countries" class="custom-select"></select>
</div>
<!-- /End of Credit -->
<p id="country-info">Country Info from <a class="bold" href="https://restcountries.com/" target="_blank" rel="noopener">REST Countries API</a></p>
<a class="d-none d-lg-block btn btn-primary btn-speed-typing buzz-out-on-hover" href="index.html">Speed Typing</a>
</div>
<div id="google-maps" class="col-lg col-lg-8">
<h3 id="google-maps-title" class="d-none d-lg-block">Google Maps</h3>
<div id="maps"></div>
</div>
</div>
</div>
</section>
<footer>
<p>© Toto Tanaka 2021
<p>
</footer>
<!-- Credit: Bootstrap Modal @ https://getbootstrap.com/docs/4.0/components/modal/ -->
<div class="modal fade" id="game-instructions" tabindex="-1" role="dialog" aria-labelledby="game-instructions" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 id="game-instructions-title">Game Instructions</h5>
</div>
<div class="modal-body">
<ul>
<li><span class="bold">60</span> seconds per game</li>
<li>Country names pop up randomly & type them in input box. Note <span class="bold">letter case</span> and <span class="bold">space</span> matter</li>
<li><span class="bold">10</span> points per correct typing</li>
<li>You get a medal at the end of each game;
<ol>
<li>Gold Medal <i class="fas fa-medal"></i> - Over <span class="bold">230</span> points</li>
<li>Silver Medal <i class="fas fa-medal"></i> - Between <span class="bold">180</span> and <span class="bold">220</span> points</li>
<li>Bronze Medal <i class="fas fa-medal"></i> - Below <span class="bold">170</span> points</li>
</ol>
</li>
<li>To play game, click <span class="bold">Play <i class="far fa-play-circle"></i></span> button below input box. Input box will be focused automatically so no need to click it</li>
</ul>
<p class="modal-important">*** IMPORTANT *** <br>Speed Typing game is available on <span class="bold">Laptop or Desktop</span> ONLY as a key board is required</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary btn-instructions btn-modal buzz-out-on-hover btn-ready" data-dismiss="modal">I'm ready!</button>
</div>
</div>
</div>
</div>
<!-- /End of Credit -->
<!-- Bootstrap JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- Google Maps API -->
<script defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAkbz8-laedt47Nf9xezHGdFanPZEAYVZo&callback=initMap"></script>
<!-- Main JavaScript -->
<script src="assets/javascript/main.js"></script>
</body>
</html>