-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
169 lines (136 loc) · 5.08 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
166
167
168
169
<!DOCTYPE html>
<html lang="en" class="dark-theme">
<head>
<title>Primer</title>
<!-- Meta stuff -->
<meta charset="utf-8" />
<meta name="keywords" content="Primer, prime, prime numbers, mental math, mental arithmetic" />
<meta name="author" content="Alex Andrix" />
<meta name="description" content="Find all prime factors" />
<link rel="canonical" href="https://alexandrix.com/primer" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, target-densitydpi=device-dpi" />
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Annie+Use+Your+Telescope" rel="stylesheet">
<!-- Stylesheets -->
<!-- First compile from LESS with LESS npm package by running command **lessc less/main.less css/main.css** -->
<link rel="stylesheet" type="text/css" href="./css/main.css" />
</head>
<body>
<div id="play-area">
<div id="number-container">
<p id="number-to-guess">...</p>
<div id="xp-container">
<div id="xp-bar"></div>
</div>
</div>
<div id="prime-container"></div>
<div id="feedback-container">
<p id="feedback"></p>
</div>
</div>
<section id="info">
<p id="info-content">Exploration level <span>1</span></p>
</section>
<div id="step-bar-container">
<div id="step-bar"></div>
</div>
<nav id="menu" class="closed">
<div class="bar bar-1"></div>
<div class="bar bar-2"></div>
<div class="bar bar-3"></div>
</nav>
<div id="screen-overlay">
<!-- Where templates nodes go -->
</div>
<section id="landing-template" class="template">
<div id="landing-content">
<p class="tap-to-play">TAP TO START</p>
</div>
</section>
<section id="menu-template" class="template">
<div id="menu-content">
<div id="submenu-mode-selector">
<div id="mode-change-buttons" class="menu-buttons flexrow flexcenter">
<p id="mode-change-button-left" class="mode-change-button">← </p>
<p id="submenu-mode-name">EXPLORATION 🚀</p>
<p id="mode-change-button-right" class="mode-change-button"> →</p>
</div>
</div>
<div id="submenu-exploration" class="submenu">
<div class="menu-buttons flexcol flexcenter">
<button class="btn jump-to-level"></button>
<button class="btn jump-to-level"></button>
<button class="btn jump-to-level"></button>
<button class="btn jump-to-level"></button>
</div>
<div id="level-picker" class="flexrow">
<p id="minus" class="btn square-btn">-</p>
<button id="picked-level" class="btn"></button>
<p id="plus" class="btn square-btn">+</p>
</div>
</div>
<div id="submenu-workouts" class="submenu hidden">
<div id="submenu-workout-list" class="menu-buttons flexcol flexcenter">
<!--<button class="btn"><strong>Ghis</strong> workout <span>(difficulty 65)</span></button>-->
</div>
</div>
<div id="submenu-settings" class="submenu hidden">
<div id="settings" class="flexcol flexcenter">
<div class="flexrow">
<div class="switch on" id="soundtrack-toggle"><div class="switch-inner"></div></div>
<p id="soundtrack-info">Soundtrack is playing 🎵</p>
</div>
<p><br/></p>
<div class="flexrow">
<div class="switch on" id="sound-effects-toggle"><div class="switch-inner"></div></div>
<p id="sound-effects-info">Sound effects are playing 🎶</p>
</div>
<p><br/></p>
<div class="flexrow">
<div class="switch on" id="theme-toggle"><div class="switch-inner"></div></div>
<p id="theme-toggle-info">Theme: dark night 🌒</p>
</div>
<p><br/><br/></p>
<p>💫 Game design by ANDRIX® 💫<br/>💫 Audio research by Gahel 💫<br/><span class="version">version 1.0</span></p>
<p><br/></p>
<div class="flexrow" id="share">
<div id="share-button">
<p>☍</p>
</div>
<p>Share</p>
</div>
<p><br/></p>
<div class="flexrow flexcenter" id="qr">
<img src="./img/primer-qr-630x630.png" title="Share Primer with any eyed machine with this superb QR code" />
</div>
</div>
</div>
</div>
</section>
<section id="game-over-template" class="template">
<div id="game-over-content">
<h1>Game over</h1>
<p>Congratulations, you completed the game!</p>
<div class="btn-container">
<button id="game-over-restart" class="btn">Restart game</button>
</div>
</div>
</section>
<section id="workout-complete-template" class="template">
<div id="workout-complete-content" class="final-screen">
<h1>Workout complete</h1>
<p>Congratulations, you completed the workout!</p>
<div class="btn-container">
<button id="workout-complete-restart" class="btn">Workout again</button>
</div>
</div>
</section>
<!-- Scripts for libraries -->
<!-- None! -->
<!-- Our scripts -->
<script type="text/javascript" src="./js/modules/game.js"></script>
<script type="text/javascript" src="./js/modules/ui.js"></script>
<script type="text/javascript" src="./js/modules/audio.js"></script>
<script type="text/javascript" src="./js/main.js"></script>
</body>