-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
165 lines (151 loc) · 7.71 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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Nyakotey">
<link rel="shortcut icon" href="img/favicon.png" type="image/x-icon">
<link rel="stylesheet" href="fontawesome-5.15.4/css/all.css">
<link rel="stylesheet" href="css/themes.css">
<link rel="stylesheet" href="css/infinitap.css">
<script src="js/infinitap.js"></script>
<title>Infinitap Game</title>
</head>
<body>
<!-- splash screen -->
<aside class="splash-screen">
<img class="splash-screen__icon" src="img/infinitap@0,5x.png"/>
<div class="splash-screen__motto">Tap Tap & Away!</div>
</aside>
<!-- main page -->
<main class="page home-page">
<div class="home-page__opt menu-new">
<button class="btn home-page__btn" data-page="game-page"><i class="fas fa-play fa-lg"></i> New Game</button>
</div>
<div class="home-page__opt menu-scores">
<button class="btn home-page__btn" data-page="score-page"><i class="fas fa-trophy fa-lg"></i> ScoreBoard</button>
</div>
<div class="home-page__opt menu-help">
<button class="btn home-page__btn" data-page="help-page"><i class="fas fa-info-circle fa-lg"></i> Help</button>
</div>
<div class="home-page__opt menu-settings">
<button class="btn home-page__btn" data-page="settings-page"><i class="fas fa-cog fa-lg"></i> Settings</button>
</div>
<div class="home-page__opt menu-about">
<button class="btn home-page__btn" data-page="about-page"><i class="fas fa-copyright fa-lg"></i> About</button>
</div>
<div class="status">
<div id="status__date"></div>
<div id="status__note">Made with <i class="fas fa-heart" style="color: tomato;"></i></div>
</div>
</main>
<!-- option 1 new game: game page -->
<section class="page game-page">
<button class="btn quit-btn"> <i class="fas fa-home"></i> </button>
<span class="game-page__level"></span>
<div class="game-page__show-quote"></div>
<div class="game-page__user">
<button class="btn game-btn"> Tap Me <span class="game-page__notification"></span></button>
</div>
</section>
<!-- option 2 scores: score page -->
<section class="page score-page">
<div class="info score-info">
<ol class="score-list"></ol>
</div>
</section>
<!-- option 3 help: help page -->
<section class="page help-page">
<div class="info help-info">
<div class="help-info__sect">
<h3>How To Play</h3>
<p> A simple clicker game; tap the game button until you are tired :)</p>
<p>Keep setting and breaking highscores!</p>
<p>A number of taps equals a new level depending on difficulty you choose.</p>
<p>Watch out, clicking the button when it goes Skull means Game Over!</p>
</div>
<div class="help-info__sect">
<h3>Game Progress</h3>
<p> You can save and restore your game data from the settings menu</p>
</div>
</div>
</section>
<!-- option 4 setting: settings page -->
<section class="page settings-page">
<div class="info settings-info">
<details class="settings-info__sect" open>
<summary>Difficulty</summary>
<label class="label"><input type="radio" name="difficulty" value="easy" checked> Easy </label>
<label class="label"><input type="radio" name="difficulty" value="medium" > Medium </label>
<label class="label"><input type="radio" name="difficulty"value="hard" > Hard </label>
</details>
<details class="settings-info__sect" open>
<summary>Music</summary>
<label class="label">
<input type="checkbox" name="enable-audio" class="enable-audio" checked> Enable Audio
</label>
</details>
<details class="settings-info__sect" open>
<summary>Themes</summary>
<div>
<span class="settings-info__theme light-theme-thumbnail" title="light"></span>
<span class="settings-info__theme dark-theme-thumbnail" title="dark"></span>
<span class="settings-info__theme nat-theme-thumbnail" title="nat"></span>
<span class="settings-info__theme alt1-theme-thumbnail" title="alt1"></span>
<span class="settings-info__theme minimal-theme-thumbnail" title="minimal"></span>
</div>
<div>
<label class="label bg-theme__label">
<input type="checkbox" name="enableAnimatedBg" class="bg-theme__enable" checked> use animated backgrounds
</label>
<div class="bg-theme-ico">
</div>
</div>
</details>
<details class="settings-info__sect" >
<summary>Custom Additions</summary>
<p class="user-alert"><i class="fas fa-info-circle"></i> Your input here will be added to the game</p>
<p class="label-grid">
<label for="user-quote" class="label">Quote: </label>
<input type="text" class="user-input user-quote" id="user-quote">
<label for="user-emoji" class="label">Emoji: </label>
<input type="text" class="user-input user-emoji" id="user-emoji">
</p>
<p><input type="submit" value="Submit" class="btn submit-btn"></p>
</details>
<details class="settings-info__sect" open>
<summary>Sync data</summary>
<button class="btn load-btn"><i class="fas fa-history"></i> Load game</button>
<button class="btn save-btn"><i class="fas fa-save"></i> Save game</button>
</details>
</div>
</section>
<!-- option 5 about: about page -->
<section class="page about-page">
<div class="info about-info">
<div class="about-info__grid">
<p class="grid__items">Title</p>
<p class="grid__items">Infinitap v3</p>
<p class="grid__items">Author</p>
<p class="grid__items">Nyakotey</p>
<p class="grid__items">Date</p>
<p class="grid__items">2021</p>
<p class="grid__items">Desc</p>
<p class="grid__items">A simple clicker game with with greater focus on the game's architecture</p>
<p class="grid__items">Stack</p>
<p class="grid__items">HTML5, CSS3 and ES6</p>
</div>
<div class="about-info__text">Enjoy!</div>
<details class="about-info__changelog">
<summary>View changelog</summary>
<ul class="changelog__list">
<li class="changelog__list__item">v1 - simple tapping game</li>
<li class="changelog__list__item">v2 - several sections now added</li>
<li class="changelog__list__item">v3 - massive revamp; customization features added</li>
</ul>
<div><a class="changelog__link" href="changelog.txt" target="_blank"> Read the full changelog here</a></div>
</details>
</div>
</section>
</body>
</html>