generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathgame.html
151 lines (151 loc) · 5.34 KB
/
game.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WRESTLE~MATCH! Game</title>
<meta name="author" content="Gary Hughes" />
<link rel="icon" type="image/png" href="assets/images/favicon.png" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
crossorigin="anonymous"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;1,100;1,300;1,400&family=Rubik&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="assets/css/style.css" type="text/css" />
<script
src="https://kit.fontawesome.com/ea1959dd8c.js"
crossorigin="anonymous"
></script>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
</head>
<!-- Backgrounds -->
<body id="desktop-wrapper">
<div class="flex-container ring-bg">
<!-- Header -->
<header>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<i class="far fa-star"></i>
<div id="head-brand">
<a href="index.html" id="home-anchor">
<h1 style="display: flex;">
<span>
WRESTLE<i class="fas fa-wave-square"></i
><span>MATCH!</span></span
>
</h1>
</a>
</div>
<h2 class="mode-head">''</h2>
</header>
<main>
<!-- Scoreboard including timer -->
<section class="score-panel">
<div class="rating-panel">
<h3>MATCH RATING</h3>
<ul id="match-rating" class="match-rating">
<li class="star"><i class="fa fa-star"></i></li>
<li class="star"><i class="fa fa-star"></i></li>
<li class="star"><i class="fa fa-star"></i></li>
<li class="star"><i class="fa fa-star"></i></li>
<li class="star"><i class="fa fa-star"></i></li>
</ul>
</div>
<div class="move-panel"><span class="move-count">0</span>MOVES</div>
<div class="timer-panel">
<div class="timer">
<span> MATCH TIME <i class="fas fa-stopwatch"></i></span
><br /><span>00:00</span>
</div>
</div>
<div class="score-panel-footer">
<div class="container-fluid">
<div class="row">
<div class="home col">
<a href="index.html" aria-label="home" class="btn home-btn">
HOME <i class="fas fa-home" aria-hidden="true"></i>
</a>
</div>
<div class="restart col ml-auto">
<button class="btn restart-btn">
RESTART <i class="fas fa-history"></i>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Game Won Modal -->
<section class="game-won-modal">
<div
class="modal"
id="gameWon"
data-backdrop="static"
data-keyboard="false"
tabindex="-1"
aria-labelledby="gameWonLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title" id="gameWonLabel">
Congratulations Winner!
</h2>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img
class="modal-img"
src="assets/images/referee.png"
alt="Referee pointing in the air declaring the winner"
/>
</div>
<div class="modal-footer">
<button class="btn-lg new-game-btn">
<i class="fas fa-star"></i> NEW GAME?
<i class="fas fa-star"></i>
</button>
</div>
</div>
</div>
</div>
</section>
<!-- Game board -->
<ul class="deck"></ul>
</main>
<!-- Footer -->
<footer>
<p>
WRESTLE-MATCH!<br />© Copyright 2020 Gary Hughes<br />All rights
reserved.
</p>
</footer>
</div>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"
></script>
<script src="assets/js/main.js"></script>
</body>
</html>