-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
150 lines (125 loc) · 5.27 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
144
145
146
147
148
149
150
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- FAVICON -->
<link rel="shortcut icon" type="image/png" href="assets/images/Computer-Hardware-Keyboard-icon.png">
<!-- FONTAWESOME -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<!-- CSS STYLING -->
<link rel="stylesheet" href="styles/styles.css">
<!-- GOOGLE FONTS -->
<link href="https://fonts.googleapis.com/css?family=Anonymous+Pro" rel="stylesheet">
<title>Are You My Type?</title>
</head>
<body>
<!-- ENTIRE GAME SECTION -->
<main class="game-section">
<!-- TOP CODE EDITOR BAR -->
<div class="bg-top"><i class="fas fa-caret-left"></i><i class="fas fa-caret-right"></i>
<div class="file-name">are_you_my_type.game</div>
<i class="fas fa-caret-down"></i>
</div>
<div class="stats">
<h2 class="score">SCORE:
<span class="metric"></span>
</h2>
<h2 class="timer">TIMER:
<span class="metric"></span>
</h2>
</div>
<!-- BOTTOM CODE EDITOR BAR -->
<div class="bg-bottom">Line 1, Column 1</div>
<!-- INTRO SLIDES -->
<section class="intro">
<!-- TOP WINDOW BAR -->
<div class="window-line">
<i class="fas fa-circle circle-red"></i>
<i class="fas fa-circle circle-orange"></i>
<i class="fas fa-circle circle-green"></i>
<p class="bash-window">1. project_3</p>
</div>
<!-- FIRST SLIDE: INTRO -->
<section class="intro-title">
<h1><span class="blink-text">> </span><span class="welcome blink-cursor">Welcome to: ARE YOU MY TYPE? ;)</span>
</h1>
<a href="http://khoipham.net">
<h4 class="author">BY: KHOI PHAM</h4>
</a>
<button class="read-rules">PRESS ENTER TO CONTINUE</button>
</section>
<!-- SECOND SLIDE: RULES -->
<section class="intro-rules ">
<h3>> <span class="rules-title">RULES</span></h3>
<ul class="rules">
<li class="rule-1">Type any of the words you see on your screen to get points.</li>
<li class="rule-2">Longer words give more points.</li>
<li class="rule-3">Press ENTER to quickly erase your current input.</li>
</ul>
<h3>> <span class="win-title">YOU WIN IF:</span></h3>
<ul class="win-conditions">
<li class="win-1">Your score reaches 2500.</li>
</ul>
<h3>> <span class="lose-title">YOU LOSE IF:</span></h3>
<ul class="lose-conditions">
<li class="lose-1">You have more than 10 words unanswered on your screen.</li>
<li class="lose-2">Timer reaches ZERO.</li>
</ul>
<button class="game-start">PRESS <span>ENTER</span> TO START</button>
</section>
</section>
<!-- WRAPPER FOR ACTUAL WORDS GENERATED IN GAME -->
<div class="word-wrapper ">
<form class="user-form" action="" autocomplete="off">
<label for="user-input" class="visuallyhidden ">User Input</label>
<input type="text" name="user-input" id="user-input" class="user-input" autocomplete="off">
</form>
<div class="words">
</div>
</div>
<!-- ENDING SLIDES -->
<section class="ending ">
<!-- VICTORY SLIDE -->
<section class="ending-win ">
<h2 class="ending-win-title">CONGRATULATIONS!</h2>
<p class="ending-win-msg">You ARE my type.</p>
<div class="ending-stats ">
<p class="stat-container">You typed: <span class="ending-stat ending-number-of-words">0</span> words</p>
<p class="stat-container">Average rate (per second): <span
class="ending-stat ending-average-typing-second">0</span>
words/second</p>
<p class="stat-container">Average rate (per minute): <span
class="ending-stat ending-average-typing-minute">0</span>
words/minute</p>
</div>
<button class="reset">PRESS <span>ENTER</span> TO PLAY AGAIN</button>
</section>
<!-- LOSING SLIDE -->
<section class="ending-lose ">
<h2 class="ending-lose-title">GAME OVER</h2>
<p class="ending-sorry"> Sorry, you're not my type.</p>
<button class="reset ">PRESS <span>ENTER</span> TO PLAY AGAIN</button>
</section>
<!-- CREDITS -->
<section class="credits">
<p>Word bank from <a href="https://www.vocabulary.com/lists/191545">https://www.vocabulary.com</a></p>
<p>Favicon from <a href="http://icons8.com/license/">http://icons8.com/license</a></p>
<p>
Icons from <a href="https://fontawesome.com/">https://fontawesome.com</a></p>
</section>
</section>
</main>
<!-- FOR REGULAR JQUERY -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js "></script>
<!-- FOR JQUERY UI -->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js "></script>
<!-- FOR JS SCRIPTS -->
<script src="./js/words.js "></script>
<script src="./js/utils.js "></script>
<script src="./js/animation.js "></script>
<script src="script.js "></script>
</body>
</html>