-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
120 lines (119 loc) · 4.82 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
<!DOCTYPE html>
<html>
<head>
<title>Signing ghost by gicomong</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="./src/default.css" />
</head>
<body>
<div id="container"></div>
<div class="music-wrap"></div>
<div class="wrap">
<div class="body">
<div class="box">
<div class="wave"></div>
<div class="wave layer_1"></div>
<div class="wave layer_2"></div>
<div class="left-eye"></div>
<div class="right-eye"></div>
<div class="mouse"></div>
<svg
version="1.1"
id="sunglass"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
viewBox="0 0 102.831 102.831"
style="enable-background: new 0 0 102.831 102.831;"
xml:space="preserve"
>
<g>
<path
style="fill: #de4946;"
d="M51.415,48.435c6.98,0,7.175,21.518,25.708,22.592c18.533,1.072,20.15-14.557,21.305-21.715
c0.602-3.723,4.403-3.484,4.403-3.484V38.32c0,0-4.859-0.281-6.359-1.215c-13.968-8.701-32.501-5.385-37.284,0
c-3.016,3.396-5.581,3.629-7.773,3.629c-2.19,0-4.756-0.232-7.771-3.629c-4.783-5.385-23.316-8.701-37.285,0
C4.859,38.039,0,38.32,0,38.32v7.508c0,0,3.802-0.238,4.403,3.484c1.153,7.158,2.771,22.787,21.304,21.715
C44.241,69.953,44.437,48.435,51.415,48.435z"
/>
<path
style="fill: #343833;"
d="M43.644,46.878c0,0-0.001-8.324-11.061-10.269C21.523,34.669,8.37,36.334,8.37,46.878
c0,10.547,3.181,20.59,16.82,20.26C37.734,66.837,43.046,52.984,43.644,46.878z"
/>
<path
style="opacity: 0.15;"
d="M45.145,46.483c0,0-0.002-9.032-12.002-11.144C21.142,33.235,6.87,35.041,6.87,46.483
c0,11.444,3.451,22.342,18.251,21.983C38.732,68.14,44.496,53.108,45.145,46.483z"
/>
<path
style="opacity: 0.2; fill: #ffffff;"
d="M22.022,36.011C14.563,36.589,8.37,39.643,8.37,46.878c0,0.908,0.025,1.813,0.078,2.708
C12.973,45.061,17.497,40.537,22.022,36.011z"
/>
<path
style="opacity: 0.2; fill: #ffffff;"
d="M43.325,44.962c-0.531-1.902-1.95-4.809-5.741-6.745
c-8.192,8.192-16.383,16.384-24.576,24.575c1.955,2.116,4.664,3.598,8.356,4.131C28.685,59.603,36.005,52.283,43.325,44.962z"
/>
<path
style="fill: #343833;"
d="M59.567,46.878c0,0,0.001-8.324,11.061-10.269c11.06-1.94,24.213-0.275,24.213,10.269
c0,10.547-3.181,20.59-16.82,20.26C65.477,66.837,60.165,52.984,59.567,46.878z"
/>
<path
style="opacity: 0.15;"
d="M57.401,46.307c0,0,0.001-9.347,12.419-11.53c12.418-2.178,27.187-0.31,27.187,11.53
c0,11.843-3.571,23.119-18.886,22.748C64.036,68.718,58.072,53.163,57.401,46.307z"
/>
<path
style="opacity: 0.2; fill: #ffffff;"
d="M78.896,35.912c-2.733-0.034-5.563,0.223-8.268,0.697
c-11.06,1.945-11.061,10.269-11.061,10.269c0.171,1.744,0.728,4.122,1.727,6.634C67.161,47.646,73.028,41.779,78.896,35.912z"
/>
<path
style="opacity: 0.2; fill: #ffffff;"
d="M94.817,46.509c-0.124-3.987-2.17-6.663-5.281-8.325L66.189,61.531
c2.196,2.404,4.988,4.329,8.445,5.161C81.362,59.964,88.089,53.237,94.817,46.509z"
/>
</g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
<g></g>
</svg>
</div>
</div>
</div>
<h1 class="title">Singing with Ghost!</h1>
<button class="btn-hint">?</button>
<div id="popover">
<div class="example"></div>
<button class="btn-start">START</button>
</div>
<audio preload="auto" data-key="1" src="music/1.wav"></audio>
<audio preload="auto" data-key="2" src="music/2.wav"></audio>
<audio preload="auto" data-key="3" src="music/3.wav"></audio>
<audio preload="auto" data-key="4" src="music/4.wav"></audio>
<audio preload="auto" data-key="5" src="music/5.wav"></audio>
<audio preload="auto" data-key="6" src="music/6.wav"></audio>
<audio preload="auto" data-key="7" src="music/7.wav"></audio>
<audio preload="auto" data-key="8" src="music/8.wav"></audio>
<audio preload="auto" data-key="9" src="music/9.wav"></audio>
<audio preload="auto" data-key="0" src="music/0.wav"></audio>
<script src="src/index.js"></script>
<script src="src/music.js"></script>
</body>
</html>