-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
142 lines (141 loc) · 4.03 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BeatMachine</title>
<link
rel="shortcut icon"
type="image/png"
href="./dist/public/images/favicon.png"
/>
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.12.1/css/all.css"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="styling.css" />
<script src="./dist/bundle.js"></script>
<script src="input-knobs.js"></script>
<script
src="https://kit.fontawesome.com/7c368e1b59.js"
crossorigin="anonymous"
></script>
<meta property="og:title" content="BeatMachine" />
<meta
property="og:image"
content="./dist/public/images/linkedInImage.png"
/>
<meta
property="og:description"
content="BeatMachine is a great introduction to programming beats for budding musicians. It allows the user to program in custom beats and also apply fun audio effects to alter their sound."
/>
<meta
property="og:url"
content="https://julian-tipler.github.io/Javascript-Project/"
/>
</head>
<body>
<h1>BeatMachine</h1>
<div class="navbar"></div>
<!-- <script type="module" src="./src/app.js"></script> -->
<div class="drum-machine-body">
<div class="effects-controls hidden">
<div class="bpm">
<div class="bpm-slider-and-genre knob-unit">
<div>
Tempo:
<div class="bpm-visual">80</div>
</div>
<input
type="range"
min="70"
max="160"
value="80"
class="bpm-wetness input-knob"
/>
<div class="genre">Hip Hop/Slow Rock</div>
</div>
<div class="swing knob-unit">
<div>Swing:</div>
<input
type="range"
min="0"
max="50"
value="0"
class="bpm-swing input-knob"
/>
</div>
</div>
<div class="non-bpm">
<div class="auto-filter knob-unit">
<div>AutoFilter:</div>
<input
type="range"
min="1"
max="100"
value="100"
class="auto-filter-frequency input-knob"
/>
</div>
<div class="bitcrush knob-unit">
<div>Bitcrusher:</div>
<input
type="range"
min="0"
max="50"
value="0"
class="bitcrush-wetness input-knob"
/>
</div>
<div class="delay knob-unit">
<div>Delay:</div>
<input
type="range"
min="0"
max="50"
value="0"
class="delay-wetness input-knob"
/>
</div>
</div>
</div>
<div class="play-pause-stop-buttons">
<button class="play-pause-button time-button">
<i class="fas fa-play-circle"></i>
</button>
<button class="stop-button time-button">
<i class="fas fa-stop-circle"></i>
</button>
<button class="clear-button time-button">clear</button>
</div>
<div class="drum-machine-most">
<div class="drum-machine-left-column"></div>
<div class="drum-machine-board">
<div class="drum-machine-top-row"></div>
<div class="drum-machine-buttons"></div>
</div>
</div>
</div>
<footer class="footer">
<a
href="https://github.com/Julian-Tipler"
class="links"
target="_blank"
rel="noreferrer"
>
<i class="fab fa-github"></i>
<p>Julian Tipler</p>
</a>
<a
href="https://www.linkedin.com/in/julian-t-87a2a0a4/"
class="links"
target="_blank"
rel="noreferrer"
>
<i class="fab fa-linkedin"></i>
<p>Julian Tipler</p>
</a>
</footer>
</body>
</html>