-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (118 loc) · 5.05 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="css/all.css">
<link rel="icon" href="favicon.png">
<title>TYPO</title>
</head>
<body>
<!-- intro page view -->
<div id="intro-view" class="intro-view">
<div class="logo-container">
<div class="logo">
<span><i class="fa fa-stopwatch"></i></span>
</div>
<p class="logo-name"><b>TYPO</b></p>
<h2>HOW FAST CAN YOU TYPE?</h2>
</div>
<div class="how-to">
<h4>HOW TO PLAY</h4>
<hr>
<p>Well the game is pretty easy to play. <br>
A text is given in a box alongside a time limit. You are required to type the
given text within the given time limit.
</p>
<p>
For every letter typed, 1pt is being added to the score board located at the top of the page.
</p>
<p class="naru-designs">NARU DESIGNS © 2020</p>
</p>
</div>
<button id="start-button" class="start-button">START</button>
</div>
<!-- setup page view -->
<div id="setup-view" class="setup-view">
<div class="logo-container">
<div class="logo">
<span><i class="fa fa-stopwatch"></i></span>
</div>
<p class="logo-name"><b>TYPO</b></p>
</div>
<h4>HIGH SCORE : <p id="high-score" class="high-score">0</p></h4>
<div class="game-text-input">
<div class="time"><p>10s</p></div>
<p class="game-text">TYPOGRAPHY</p>
<button type="text" class="game-input">TYPOGRAPHY</button>
</div>
<div class="difficulty">
<div id="tool-tip" class="tool-tip-container">
<div class="tool-tip">
<p id="tool-tip-message">
<b>Newbie</b> <br>
1s is allocated to a letter, so for 5 letter word like
'GAMER', 5s is the given time limit to complete typing.
</p>
<div class="triangle"></div>
</div>
</div>
<section id="difficulty-selection" class="difficulty-selection">
<p id="difficulty">NEWBIE</p>
<i class="fa fa-caret-down"></i>
</section>
<div id="difficulty-levels-container" class="difficulty-levels-container">
<p id="newbie" class="difficulty-levels">NEWBIE</p>
<p id="master" class="difficulty-levels">MASTER</p>
<p id="pro" class="difficulty-levels">PRO</p>
</div>
<button id="play-button" class="start-button">PLAY</button>
</div>
</div>
<!-- game page view -->
<div id="game-view" class="game-view">
<div class="head-container">
<div class="logo-container">
<div class="logo">
<span><i class="fa fa-stopwatch"></i></span>
</div>
<p class="logo-name"><b>TYPO</b></p>
</div>
<div class="score-container">
<h4>SCORE</h4>
<p id="score" class="score">0</p>
</div>
<div class="pause-restart">
<span id="pause" class="pause"><i class="fa fa-pause"></i></span>
<span id="restart" class="restart"><i class="fa fa-redo-alt"></i></span>
</div>
</div>
<div class="game-text-input">
<div id="time-limit-container" class="time"><p id="game-time">...</p></div>
<p id="game-text" class="game-text">...</p>
<input type="text" id="game-input" class="game-input" placeholder="click to start typing" autocomplete="off">
<audio src="sound/glitch-in-the-matrix.mp3" id="error-sound"></audio>
<audio src="sound/juntos.mp3" id="success-sound"></audio>
</div>
<div id="dim" class="dim"></div>
<div id="game-paused" class="game-paused">
<h3>SCORE <p id="paused-score" class="paused-high-score">0</p></h3>
<button id="resume" class="resume">RESUME</button>
</div>
<div id="game-restart" class="game-restart">
<h4>Are you sure you want to restart game ?</h4>
<button id="no-restart" class="no-restart">NO</button>
<button id="yes-restart" class="yes-restart">YES</button>
</div>
<div id="game-over" class="game-over">
<p id="game-over-difficulty" class="game-over-difficulty"><b>• NEWBIE •</b></p>
<h1>GAME OVER</h1>
<h3 id="new-high-score">SCORE</h3>
<p id="game-over-score">0</p>
<button id="play-again" class="play-again">PLAY AGAIN</button>
</div>
</div>
<script src="app.js"></script>
</body>
</html>