/
index.html
133 lines (122 loc) · 4.65 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
<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Purple+Purse' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Mad Gab</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="js/app.js"></script>
</head>
<body>
<div id="startContainer">
<h1 id="title" class="center">Mad Gab</h1>
<div id="credit">
<h4>By Sane Gab</h4>
</div>
<div id="instructions" class="center vertical-align">
<h3>Say this out loud:</h3>
<h3 class="example">“Itsy Citing Foe Wall.”</h3>
<br>
<h3>What did you say?</h3>
<h3 class="example">It’s Exciting For All.</h3>
<article>
<h4>The game where even winners sound like losers.
<br> Take turns to translate as many Mad Gabs you can in 1 minute.</h4>
</article>
<button id="next" class="button">Next</button>
</div>
</div>
<div id="aboutContainer" class="center vertical-align">
<ul><h5>Pro Tips:</h5>
<h3>
<li> The phrases have to be spoken out loud and listened to.</li>
<li>Answers are case insensitive</li>
<li>Unanswered questions go to the next player</li>
<li>Press enter or click submit to check answer</li>
</h3>
</ul>
<button id="letsPlay" class="button center">Let's Play!</button>
</div>
<div id="gameContainer">
<h3 id="question" class="example">Question Here</h3>
<h3>Answer:</h3>
<div id="answer">
<input type="text" placeholder="Hint:">
<span></span>
</div>
<div id="skip-submit">
<button id="skip" class="button">Skip</button>
<button id="submit" class="button">Submit</button>
</div>
<container>
<left>
<h3 class="underlined">Player 1's Score: </h3>
<score1>0</score1>
</left>
<div id="timerDiv">
<h3 class="currentPlayer redText" id="player">Player no</h3>
<h2>Time Left: </h2>
<h2 class="redText" id="timer">60</h2>
<button id="pause" class="button">Pause Game</button>
</div>
<right>
<h3 class="underlined">Player 2's Score: </h3>
<score2>0</score2>
</right>
</container>
</div>
<div id="endContainer">
<h5 id="roundOver">Round Over</h5>
<div id="scoreBoxes">
<div class="scoreBox">
<h2 class="underlined">Player 1:</h2>
<score1>0</score1>
<hr>
<h3 id="remarks1"></h3>
</div>
<div class="scoreBox">
<h2 class="underlined">Player 2:</h2>
<score2>0</score2>
<hr>
<h3 id="remarks2"></h3>
</div>
</div>
<div id="reset-next">
<button class="reset button">Reset Game</button>
<button id="nextRound" class="button">Next Round</button>
</div>
</div>
<div id="pauseContainer">
<h5 id="title" class="center">Game Paused</h5>
<div id="reset-resume">
<button class="reset button">Reset Game</button>
<button id="resume" class="button">Resume Game</button>
</div>
</div>
<div id="switchContainer">
<h5 id="switchContainerRound" class="underlined"></h5>
<h5 class="currentPlayer">Player no</h5>
<h5>Ready?</h5>
<button id="begin" class="button" class="center">Begin</button>
</div>
<div id="noMoreQuestions">
<h1>Game Over</h1>
<h2>You have gone through all the questions of the game!</h2>
<br>
<div id="finalScoreBox">
<div class="scoreBox">
<h2 class="underlined">Player 1:</h2>
<score1 id="finalScore1">0/25</score1>
</div>
<div class="scoreBox">
<h2 class="underlined">Player 2:</h2>
<score2 id="finalScore2">0/25</score2>
</div>
</div>
<h2>Play Again?</h2>
<button class="reset button">Reset Game</button>
</div>
<body>
<html>