-
Notifications
You must be signed in to change notification settings - Fork 0
/
home.html
119 lines (113 loc) · 4.09 KB
/
home.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap"
rel="stylesheet"
/>
<script src="
https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js
"></script>
<link rel="stylesheet" href="css/globals.css" />
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/animate.css" />
<link rel="stylesheet" href="./css/contact.css" />
<script src="js/navigation.js" defer></script>
<script src="js/app.js" defer></script>
<script src="js/animated.js"></script>
<title>Landmark Guessr | Home</title>
</head>
<body>
<header>
<nav>
<a onclick="toLocation(`./index.html`)"><- Back To Map</a>
</nav>
</header>
<main>
<h1 class="animated-text" id="animated-heading">Landmark Guessr</h1>
<div class="landmark-icons-container">
<img class="landmark-icon" src="icons/landmark1.png" alt="Landmark 1" />
<img class="landmark-icon" src="icons/landmark2.png" alt="Landmark 2" />
<img class="landmark-icon" src="icons/landmark3.png" alt="Landmark 3" />
<img class="landmark-icon" src="icons/landmark4.png" alt="Landmark 4" />
<img class="landmark-icon" src="icons/landmark5.png" alt="Landmark 5" />
<img class="landmark-icon" src="icons/landmark6.png" alt="Landmark 6" />
<img class="landmark-icon" src="icons/landmark7.png" alt="Landmark 7" />
<img class="landmark-icon" src="icons/landmark9.png" alt="Landmark 9" />
<img
class="landmark-icon"
src="icons/landmark10.png"
alt="Landmark 10"
/>
<img
class="landmark-icon"
src="icons/landmark11.png"
alt="Landmark 11"
/>
</div>
<p>
This game tests the knowledge of the player on guessing the right
location of landmarks in various countries. The players attempt to guess
the country location of the shown landmark. If a wrong location is
given, the image zooms out to give more clue of the right location.
</p>
<form id="nameForm">
<fieldset>
<legend>Enter your name and Submit to play</legend>
<label for="name">Name:</label>
<input
type="text"
autocomplete="off"
id="name"
name="name"
required
/>
<input
id="buttonSubmit"
type="submit"
value="Submit..."
/><br /><br />
<span id="message"></span>
</fieldset>
</form>
<div id="loading" style="display: none">
<img src="loading.gif" alt="Loading" id="loading-icon" />
<p>Loading...</p>
</div>
<div class="instruction-div">
<h2>Instructions</h2>
<ul>
<li>Enter your name and press enter</li>
<li>Type in the location. You have 5 attempts</li>
<li>Check the leaderboard to view your rank</li>
</ul>
</div>
</main>
<footer>
<div>
<p class="pclass">
Want to work with us? Fill the contact form below to give your details
</p>
<form id="details">
<label class="labelclass" for="name" autcomplete="off"
>Please enter your name</label
>
<input type="text" name="name" id="name" />
<label class="labelclass" for="email" autcomplete="off"
>Please enter your email</label
>
<input type="email" name="email" id="email" />
<button class="buttonclass" type="submit">Enter</button>
</form>
</div>
<a href="https://github.com/26june/LandmarkGuessr"
><img id="githubLogo" src="./icons/github.png" alt="Github"
/></a>
</footer>
</body>
</html>