-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
109 lines (95 loc) · 10.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Style -->
<link rel="stylesheet" href="./style/theme.css">
<link rel="stylesheet" href="./style/index.css">
<!-- Graphics -->
<link rel="icon" href="./image/favcon.png">
<!-- Content -->
<title>Hydle</title>
</head>
<body>
<header class="underline-2">
<button class="fg-3 bg-1 hover radius" onclick="showDaily()" id="button-daily">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M 0 0 L 0 20 C 0 22.199219 1.800781 24 4 24 L 20 24 C 22.199219 24 24 22.199219 24 20 L 24 4 L 18 4 L 18 0 Z M 2 2 L 16 2 L 16 20 C 16 20.742188 16.265625 21.402344 16.625 22 L 4 22 C 2.882813 22 2 21.117188 2 20 Z M 4 4 L 4 7 L 14 7 L 14 4 Z M 18 6 L 22 6 L 22 20 C 22 21.117188 21.117188 22 20 22 C 18.882813 22 18 21.117188 18 20 L 18 19 L 20 19 L 20 17 L 18 17 L 18 16 L 20 16 L 20 14 L 18 14 L 18 13 L 20 13 L 20 11 L 18 11 L 18 10 L 20 10 L 20 8 L 18 8 Z M 4 9 L 4 11 L 8 11 L 8 9 Z M 10 9 L 10 11 L 14 11 L 14 9 Z M 4 12 L 4 14 L 8 14 L 8 12 Z M 10 12 L 10 14 L 14 14 L 14 12 Z M 4 15 L 4 17 L 8 17 L 8 15 Z M 10 15 L 10 17 L 14 17 L 14 15 Z M 4 18 L 4 20 L 8 20 L 8 18 Z M 10 18 L 10 20 L 14 20 L 14 18 Z"></path></svg>
<h1>Daily</h1>
</button>
<button class="fg-3 bg-1 hover radius" onclick="showPractice()" id="button-practice">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M 12 0 C 11.585938 0 11.183594 0.0195313 10.78125 0.0625 C 4.75 0.679688 0 5.8125 0 12 C 0 12.328125 0.0351563 12.644531 0.0625 12.96875 C 0.078125 13.179688 0.0976563 13.386719 0.125 13.59375 C 0.199219 14.15625 0.289063 14.714844 0.4375 15.25 C 0.484375 15.417969 0.539063 15.585938 0.59375 15.75 C 0.695313 16.058594 0.8125 16.363281 0.9375 16.65625 C 1.09375 17.027344 1.277344 17.375 1.46875 17.71875 C 1.519531 17.808594 1.542969 17.910156 1.59375 18 L 1.625 17.96875 C 2.6875 19.804688 4.195313 21.3125 6.03125 22.375 L 6 22.40625 C 6.089844 22.457031 6.1875 22.484375 6.28125 22.53125 C 6.417969 22.605469 6.546875 22.683594 6.6875 22.75 C 6.898438 22.855469 7.125 22.96875 7.34375 23.0625 C 7.351563 23.066406 7.367188 23.058594 7.375 23.0625 C 7.851563 23.261719 8.339844 23.425781 8.84375 23.5625 C 9.089844 23.628906 9.339844 23.699219 9.59375 23.75 C 9.601563 23.753906 9.617188 23.746094 9.625 23.75 C 9.808594 23.789063 10 23.816406 10.1875 23.84375 C 10.253906 23.855469 10.308594 23.867188 10.375 23.875 C 10.511719 23.894531 10.644531 23.921875 10.78125 23.9375 C 11.179688 23.976563 11.589844 24 12 24 C 12.824219 24 13.625 23.910156 14.40625 23.75 C 14.796875 23.667969 15.1875 23.585938 15.5625 23.46875 C 15.9375 23.351563 16.296875 23.214844 16.65625 23.0625 C 17.375 22.757813 18.046875 22.371094 18.6875 21.9375 C 19.964844 21.074219 21.074219 19.964844 21.9375 18.6875 C 22.152344 18.367188 22.347656 18.058594 22.53125 17.71875 C 23.457031 16.019531 24 14.0625 24 12 C 24 11.726563 23.988281 11.457031 23.96875 11.1875 C 23.960938 11.050781 23.949219 10.914063 23.9375 10.78125 C 23.921875 10.644531 23.894531 10.511719 23.875 10.375 C 23.785156 9.710938 23.660156 9.058594 23.46875 8.4375 C 23.429688 8.308594 23.386719 8.1875 23.34375 8.0625 C 23.261719 7.816406 23.160156 7.578125 23.0625 7.34375 C 22.90625 6.972656 22.722656 6.625 22.53125 6.28125 C 22.480469 6.191406 22.457031 6.089844 22.40625 6 L 22.375 6.03125 C 21.3125 4.195313 19.804688 2.6875 17.96875 1.625 L 18 1.59375 C 17.910156 1.542969 17.8125 1.515625 17.71875 1.46875 C 17.585938 1.398438 17.449219 1.316406 17.3125 1.25 C 17.082031 1.140625 16.859375 1.035156 16.625 0.9375 C 16.148438 0.738281 15.660156 0.574219 15.15625 0.4375 C 14.71875 0.316406 14.269531 0.226563 13.8125 0.15625 C 13.75 0.148438 13.6875 0.132813 13.625 0.125 C 13.492188 0.105469 13.351563 0.0742188 13.21875 0.0625 C 13.085938 0.046875 12.949219 0.0390625 12.8125 0.03125 C 12.542969 0.0117188 12.273438 0 12 0 Z M 17.25 2.90625 C 18.84375 3.828125 20.171875 5.15625 21.09375 6.75 L 16.75 9.25 C 16.269531 8.433594 15.566406 7.730469 14.75 7.25 Z M 12 8 C 14.199219 8 16 9.800781 16 12 C 16 14.199219 14.199219 16 12 16 C 9.800781 16 8 14.199219 8 12 C 8 9.800781 9.800781 8 12 8 Z M 12 10.90625 C 11.390625 10.90625 10.90625 11.390625 10.90625 12 C 10.90625 12.609375 11.390625 13.09375 12 13.09375 C 12.609375 13.09375 13.09375 12.609375 13.09375 12 C 13.09375 11.390625 12.609375 10.90625 12 10.90625 Z M 7.25 14.75 C 7.730469 15.566406 8.433594 16.269531 9.25 16.75 L 6.75 21.09375 C 5.15625 20.171875 3.828125 18.84375 2.90625 17.25 Z"></path></svg>
<h1>Practice</h1>
</button>
<button class="fg-3 bg-1 hover radius" onclick="showHelp()" id="button-help">
<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"width="100" height="100"viewBox="0 0 24 24"><path d="M 12 0 C 5.371094 0 0 5.371094 0 12 C 0 18.628906 5.371094 24 12 24 C 18.628906 24 24 18.628906 24 12 C 24 5.371094 18.628906 0 12 0 Z M 12 2 C 17.523438 2 22 6.476563 22 12 C 22 17.523438 17.523438 22 12 22 C 6.476563 22 2 17.523438 2 12 C 2 6.476563 6.476563 2 12 2 Z M 12 5.8125 C 11.816406 5.8125 11.664063 5.808594 11.5 5.84375 C 11.335938 5.878906 11.183594 5.96875 11.0625 6.0625 C 10.941406 6.15625 10.851563 6.285156 10.78125 6.4375 C 10.710938 6.589844 10.6875 6.769531 10.6875 7 C 10.6875 7.226563 10.710938 7.40625 10.78125 7.5625 C 10.851563 7.71875 10.941406 7.84375 11.0625 7.9375 C 11.183594 8.03125 11.335938 8.085938 11.5 8.125 C 11.664063 8.164063 11.816406 8.1875 12 8.1875 C 12.179688 8.1875 12.371094 8.164063 12.53125 8.125 C 12.691406 8.085938 12.816406 8.03125 12.9375 7.9375 C 13.058594 7.84375 13.148438 7.71875 13.21875 7.5625 C 13.289063 7.410156 13.34375 7.226563 13.34375 7 C 13.34375 6.769531 13.289063 6.589844 13.21875 6.4375 C 13.148438 6.285156 13.058594 6.15625 12.9375 6.0625 C 12.816406 5.96875 12.691406 5.878906 12.53125 5.84375 C 12.371094 5.808594 12.179688 5.8125 12 5.8125 Z M 10.78125 9.15625 L 10.78125 18.125 L 13.21875 18.125 L 13.21875 9.15625 Z"></path></svg>
<h1>Help</h1>
</button>
</header>
<!-- A puzzle -->
<section id="puzzle">
<p id="id" class="fg-2" style="display: none;">#</p>
<div class="guess border radius" id="guess-1">
<h1>1</h1>
<input list="options" id="guess-1">
</div>
<div class="guess border radius" id="guess-2">
<h1>2</h1>
<input list="options" id="guess-2">
</div>
<div class="guess border radius" id="guess-3">
<h1>3</h1>
<input list="options" id="guess-3">
</div>
<div class="guess border radius" id="guess-4">
<h1>4</h1>
<input list="options" id="guess-4">
</div>
<div class="guess border radius" id="guess-5">
<h1>5</h1>
<input list="options" id="guess-5">
</div>
<div class="guess border radius" id="guess-6">
<h1>6</h1>
<input list="options" id="guess-6">
</div>
<h1 class="fg-4" id="answer" style="display: none;"></h1>
<datalist id="options"></datalist>
<audio src="" id="audio"></audio>
<div class="controls">
<button class="fg-3 bg-1" onclick="pastAudio()" id="button-past">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover-fill"><path d="M 3.9882812 1 C 2.3499049 1 1 2.3499048 1 3.9882812 L 1 12 L 1 20.011719 C 1 21.650095 2.3499048 23 3.9882812 23 L 12 23 L 20.011719 23 C 21.650095 23 23 21.650095 23 20.011719 L 23 12 L 23 3.9882812 C 23 2.3499049 21.650095 1 20.011719 1 L 12 1 L 3.9882812 1 z M 3.9882812 3 L 12 3 L 20.011719 3 C 20.569342 3 21 3.4306577 21 3.9882812 L 21 12 L 21 20.011719 C 21 20.569342 20.569342 21 20.011719 21 L 12 21 L 3.9882812 21 C 3.4306577 21 3 20.569342 3 20.011719 L 3 12 L 3 3.9882812 C 3 3.4306577 3.4306577 3 3.9882812 3 z M 12.40625 4 L 8 12 L 12.40625 20 L 15 18.462891 L 11.439453 12 L 15 5.5371094 L 12.40625 4 z"></path></svg>
</button>
<button class="fg-3 bg-1" onclick="toggleAudio()" id="button-play">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover-fill" id="svg-play"><path d="M 4 2 L 4 22 L 21.3125 12 Z"></path></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover-fill" id="svg-pause"><path d="M 3 3 L 3 21 L 10 21 L 10 3 Z M 14 3 L 14 21 L 21 21 L 21 3 Z"></path></svg>
</button>
<button class="fg-3 bg-1 hover radius" onclick="guess()" id="button-enter">
<h1>Guess</h1>
</button>
<button class="fg-3 bg-1" onclick="nextAudio()" id="button-next">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="hover-fill"><path d="M 3.9882812 1 C 2.3499049 1 1 2.3499048 1 3.9882812 L 1 12 L 1 20.011719 C 1 21.650095 2.3499048 23 3.9882812 23 L 12 23 L 20.011719 23 C 21.650095 23 23 21.650095 23 20.011719 L 23 12 L 23 3.9882812 C 23 2.3499049 21.650095 1 20.011719 1 L 12 1 L 3.9882812 1 z M 3.9882812 3 L 12 3 L 20.011719 3 C 20.569342 3 21 3.4306577 21 3.9882812 L 21 12 L 21 20.011719 C 21 20.569342 20.569342 21 20.011719 21 L 12 21 L 3.9882812 21 C 3.4306577 21 3 20.569342 3 20.011719 L 3 12 L 3 3.9882812 C 3 3.4306577 3.4306577 3 3.9882812 3 z M 11.59375 4 L 9 5.5371094 L 12.560547 12 L 9 18.462891 L 11.59375 20 L 16 12 L 11.59375 4 z"></path></svg>
</button>
</div>
</section>
<!-- The practice menu-->
<section id="practice">
<!--<button class="bg-1 border radius hover" onclick="showPuzzle()" id="button-play">
<h1>A Level</h1>
</button>-->
<button class="bg-1 border radius hover" onclick="showPuzzle();playlistAll();runPlaylist()" id="button-play">
<h1>All</h1>
</button>
<button class="bg-1 border radius hover" onclick="showPuzzle();playlistALevel();runPlaylist()" id="button-play">
<h1>A Level</h1>
</button>
</section>
<!-- The help menu -->
<section id="help">
</section>
</body>
<!-- Scripts -->
<script src="./script/header.js"></script>
<script src="./script/data.js"></script>
<script src="./script/index.js"></script>
</html>