Skip to content

Commit ddc6ee3

Browse files
klekleklekleklekleklekleklekle
kleklekleklekle
authored and
kleklekleklekle
committed
WIP, frontend changes
1 parent 5dc68b3 commit ddc6ee3

File tree

4 files changed

+228
-175
lines changed

4 files changed

+228
-175
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
"# visualizer"
1+
"# visualizer"

‎css/style.css

+56-14
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,56 @@
1-
2-
#ui-container {
3-
margin-top: 50px;
4-
width: 50%;
5-
}
6-
7-
#file-input {
8-
display: none;
9-
}
10-
11-
#canvas {
12-
width: 100%;
13-
height: 100%;
14-
}
1+
html {
2+
height: 100%;
3+
}
4+
5+
body {
6+
min-height: 100%;
7+
}
8+
9+
#top-bar {
10+
height: 50px;
11+
}
12+
13+
.item {
14+
padding: none;
15+
}
16+
17+
.field {
18+
margin-top: .42857143em;
19+
}
20+
21+
#ui-container {
22+
margin-top: 10px;
23+
width: 100%;
24+
}
25+
26+
#file-input {
27+
display: none;
28+
}
29+
30+
#audio {
31+
width: 100%;
32+
bottom: 0;
33+
}
34+
35+
#label-file-input {
36+
height: 38px;
37+
text-align: center;
38+
}
39+
40+
#fft-input {
41+
margin: 0;
42+
}
43+
44+
#label-file-input, #fft-input {
45+
display: inline-block;
46+
width: 250px;
47+
margin: 0 auto;
48+
}
49+
50+
#canvas {
51+
position: relative;
52+
width: 100%;
53+
height: 450px;
54+
}
55+
56+

‎index.html

+49-42
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,50 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>Visualizer</title>
6-
<meta name="viewport" content="width=device-width,initial-scale=1">
7-
<link rel="stylesheet" href="css/style.css">
8-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
9-
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
10-
<script src="scripts/visualizer.js"></script>
11-
</head>
12-
<body>
13-
<div id="ui-container" class="ui center aligned container">
14-
<h1 class="ui header">Visualizer</h1>
15-
<form class="ui form">
16-
<div class="field">
17-
<label for="file-input" class="ui icon button">
18-
<i class="file icon"></i>
19-
Upload File
20-
</label>
21-
<select id="fft-input" class="ui dropdown">
22-
<option value="fft">FFT (Fast Fourier Transform)</option>
23-
<option value="32">32</option>
24-
<option value="64">64</option>
25-
<option value="128">128</option>
26-
<option value="256">256</option>
27-
<option value="512">512</option>
28-
<option value="1024">1024</option>
29-
<option value="2048">2048</option>
30-
<option value="4096">4096</option>
31-
<option value="8192">8192</option>
32-
<option value="16384">16384</option>
33-
<option value="32768">32768</option>
34-
</select>
35-
<input id="file-input" type="file" accept="audio/*,video/*">
36-
<canvas id="canvas"></canvas>
37-
<audio id="audio" controls></audio>
38-
<h3 id="filename"></h3>
39-
</div>
40-
</form>
41-
</div>
42-
</body>
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Visualizer</title>
6+
<meta name="viewport" content="width=device-width,initial-scale=1">
7+
<link rel="stylesheet" href="css/style.css">
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.css">
9+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/semantic.min.js"></script>
10+
<script src="scripts/visualizer.js"></script>
11+
</head>
12+
<body>
13+
<div id="top-bar" class="ui secondary menu">
14+
<div id="right-menu" class="right menu">
15+
<div class="field">
16+
<label for="file-input" id="label-file-input" class="ui icon button">
17+
<i id="upload-text" class="file icon"></i>
18+
Upload File
19+
</label>
20+
</div>
21+
<input id="file-input" type="file" accept="audio/*,video/*">
22+
<div class="item">
23+
<select id="fft-input" class="ui dropdown">
24+
<option value="32">32</option>
25+
<option value="64">64</option>
26+
<option value="128">128</option>
27+
<option value="256">256</option>
28+
<option value="512">512</option>
29+
<option value="1024">1024</option>
30+
<option value="2048">2048</option>
31+
<option value="4096">4096</option>
32+
<option value="8192">8192</option>
33+
<option value="16384">16384</option>
34+
<option value="32768">32768</option>
35+
</select>
36+
</div>
37+
</div>
38+
</div>
39+
<div id="ui-container" class="ui center aligned container">
40+
<form class="ui form">
41+
<div class="field">
42+
<canvas id="canvas"></canvas>
43+
<div id="audio-container">
44+
<audio id="audio" controls></audio>
45+
</div>
46+
</div>
47+
</form>
48+
</div>
49+
</body>
4350
</html>

0 commit comments

Comments
 (0)