-
Notifications
You must be signed in to change notification settings - Fork 0
/
elements.html
75 lines (75 loc) · 2.65 KB
/
elements.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Malachite</title>
<link href="./bin/main.css" rel="stylesheet"/>
<link href="font/style.css" rel="stylesheet"/>
<script src="bin/main.js" type="module"></script>
</head>
<body>
<section class="device">
<div class="decoration">
<img class="screw tl" src="assets/screw.png">
<img class="screw tr" src="assets/screw.png">
<img class="screw bl" src="assets/screw.png">
<img class="screw br" src="assets/screw.png">
<img class="vent tl" src="assets/vent.png">
<img class="vent tr" src="assets/vent.png">
</div>
<div class="controls">
<canvas class="screen"></canvas>
<div class="knob mid" data-name="FREQ">
<div>
<img class="scale" src="assets/scale_knob_mid_A.png">
<img class="filmstrip" src="assets/knobs/knob_mid_black.png">
</div>
<input type="text">
</div>
<div class="knob small" data-name="Q">
<div>
<img class="scale" src="assets/scale_knob_small_A.png">
<img class="filmstrip" src="assets/knobs/knob_small_black.png">
</div>
<input type="text">
</div>
<div class="knob big" data-name="GAIN">
<div>
<img class="scale" src="assets/scale_knob_mid.png">
<img class="filmstrip" src="assets/knobs/knob_big_black.png">
</div>
<input type="text">
</div>
<label class="checkbox vertical" data-top-name="On" data-bottom-name="Off">
<input type="checkbox">
<span></span>
</label>
<label class="checkbox vertical" data-top-name="On" data-bottom-name="Off">
<input type="checkbox">
<span></span>
</label>
<label class="checkbox button big">
<input type="checkbox">
<span>RESET</span>
</label>
<label class="checkbox button mid">
<input type="checkbox">
<span>L/R</span>
</label>
<label class="checkbox button small">
<input type="checkbox">
<span>X</span>
</label>
<label class="checkbox button small">
<input type="checkbox">
<span>⥰</span>
</label>
<div class="meter" style="--value: 0.0"></div>
<div class="meter" style="--value: 0.25"></div>
<div class="meter" style="--value: 0.5"></div>
<div class="meter" style="--value: 0.75"></div>
<div class="meter" style="--value: 1.0"></div>
</div>
</section>
</body>
</html>