-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
143 lines (134 loc) · 8.03 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./styles/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="./styles/styles.css">
<title>Earth, Wind and Fire</title>
</head>
<body>
<header class="dark p-1">
<h1 class="text-center text-light">Earth, Wind and Fire</h1>
</header>
<!-- <nav class="dark">
</nav> -->
<main>
<div class="container-fluid">
<section class="row justify-content-center mt-2 mt-md-3 mt-xl-4">
<div class="col-md-7 border shadow p-3 bg-body rounded">
<div>
<p class="text-center fw-bold">
How to play?
</p>
</div>
<div
class="d-flex flex-row justify-content-evenly mt-3 border border-2 pt-2 pb-2 rounded border-warning">
<img src="./images/earth.svg" class="inline-img" alt="" srcset="">
<p class="align-self-center"><span class="fw-bold text-warning">Earth</span> beats <span
class="fw-light">Wind</span></p>
<img src="./images/wind.svg" class="inline-img" alt="" srcset="">
</div>
<div
class="d-flex flex-row justify-content-evenly mt-2 border border-2 pt-2 pb-2 rounded border-info">
<img src="./images/wind.svg" class="inline-img" alt="" srcset="">
<p class="align-self-center"><span class="fw-bold text-info">Wind</span> beats Fire</p>
<img src="./images/fire.svg" class="inline-img" alt="" srcset="">
</div>
<div
class="d-flex flex-row justify-content-evenly mt-2 border border-2 pt-2 pb-2 rounded border-danger">
<img src="./images/fire.svg" class="inline-img" alt="" srcset="">
<p class="align-self-center"><span class="fw-bold text-danger">Fire</span> beats Earth</p>
<img src="./images/earth.svg" class="inline-img" alt="" srcset="">
</div>
<!-- Move below to different area of page -->
</div>
</section>
<section class="row justify-content-evenly mt-2 mt-md-3 mt-xl-4">
<div class="col-11 col-md-3 border shadow bg-body rounded">
<div class="pt-2 pb-2 d-md-none d-flex flex-column justify-content-center align-items-center">
<p class="fw-bold">Current Round:</p>
<div>
<span id="round-counter-mobile">0</span> <span>out of 5</span>
</div>
</div>
<div class="pt-2 pb-2 d-none d-md-flex flex-column justify-content-center align-items-center">
<p class="fw-bold">Your Score:</p>
<p id="player-score-mobile">0</p>
</div>
</div>
<div class="col-5 col-md-3 mt-2 mt-md-0 border shadow bg-body rounded">
<div class="pt-2 pb-2 d-none d-md-flex flex-column justify-content-center align-items-center">
<p class="fw-bold">Current Round:</p>
<div>
<span id="round-counter">0</span> <span>out of 5</span>
</div>
</div>
<div class="pt-2 pb-2 d-md-none d-flex flex-column justify-content-center align-items-center">
<p class="fw-bold">Your Score:</p>
<p id="player-score">0</p>
</div>
</div>
<div class="col-5 col-md-3 mt-2 mt-md-0 border shadow bg-body rounded">
<div class="pt-2 pb-2 d-flex flex-column justify-content-center align-items-center"
data-bs-toggle="tooltip" data-bs-placement="top" title="Computer Score">
<p class="fw-bold">Computer Score:</p>
<p id="computer-score">0</p>
</div>
</div>
</section>
<section class="row justify-content-center mt-3">
<div class="col col-md-9 border shadow p-1 p-md-2 bg-body rounded d-none" id="game-screen">
<p class="text-center mb-3 fw-bold" id="game-text">
Choose an element below to start the game.
</p>
<p class="text-center mb-3 font-monospace" id="selection-text">
</p>
<div class="d-flex flex-row justify-content-evenly mb-3">
<div class="btn border border-2 border-warning rounded" id="earth-btn">
<img src="./images/earth.svg" alt="" srcset="" data-bs-toggle="tooltip"
data-bs-placement="top" title="Earth">
<p class="text-center text-warning">Earth</p>
</div>
<div class="btn border border-2 border-info rounded" id="wind-btn">
<img src="./images/wind.svg" alt="" srcset="" data-bs-toggle="tooltip"
data-bs-placement="top" title="Wind">
<p class="text-center text-info">Wind</p>
</div>
<div class="btn border border-2 border-danger rounded" id="fire-btn">
<img src="./images/fire.svg" alt="" srcset="" data-bs-toggle="tooltip"
data-bs-placement="top" title="Fire">
<p class="text-center text-danger">Fire</p>
</div>
</div>
</div>
<div class="col col-md-9 border shadow p-1 p-md-2 bg-body rounded" id="game-over-div">
<div class="d-flex flex-column align-items-center p-2">
<p class="mb-3 mt-2 fw-bold text-center" id="game-over-text">
</p>
<p class="mb-3 font-monospace fw-bold">
Click below to start a new game.
</p>
<button type="button" class="btn btn-outline-primary btn-lg m-2" id="new-game">New
Game</button>
</div>
</div>
</section>
</div>
</main>
<!-- <footer class="p-2 footer-bs">
<div class="d-flex flex-column align-items-center">
<div class="align-self-center">Made with 💟 by: Redmondking</div>
<div class="d-flex flex-row align-content-center">
<a href="https://github.com/redmondking" target="_blank"><i class="bi-github me-3" role="img"
aria-label="GitHub"></i></a>
<a href="https://www.linkedin.com/in/calvin-coleman-7686b2a3/" target="_blank"><i
class="bi-linkedin me-3" role="img" aria-label="Linkedin"></i></a>
</div>
</div>
</footer> -->
<script src="./scripts/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="./scripts/app.js"></script>
</body>
</html>