Skip to content

Commit 597c9d8

Browse files
AnonymousUser98AnonymousUser98
authored
Update WavePlayerJS.html
Change button layout Add dark mode Add an unused "Load Preset" button (just displays a message saying that this feature hasn't been added yet) Fix minor positioning issues with the right side of text inputs Improve indentation of raw code
1 parent 74c4dba commit 597c9d8

1 file changed

Lines changed: 99 additions & 31 deletions

File tree

‎WavePlayerJS.html‎

Lines changed: 99 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -10,54 +10,96 @@
1010
background: #f0f0f0;
1111
color: #333;
1212
}
13+
1314
h1 { text-align: center; }
15+
1416
input, textarea, button {
1517
font-size: 1rem;
1618
margin: 5px 0;
1719
width: 100%;
20+
box-sizing: border-box;
1821
}
22+
1923
textarea { height: 80px; }
2024
label { font-weight: bold; }
25+
div { width: 100%; }
26+
2127
button {
22-
border-radius: 20px;
23-
padding-top: 10px;
24-
padding-bottom: 10px;
25-
flex: 0 0 50%;
28+
border-radius: 10px;
29+
padding-top: 10px;
30+
padding-bottom: 10px;
31+
width: 120px;
2632
}
27-
.buttons {
28-
display: flex;
29-
gap: 0.5rem;
33+
34+
.buttons{
35+
display: flex;
36+
flex-direction: row;
37+
justify-content: space-between;
38+
flex: 0 0 100%
39+
}
40+
41+
.buttons .main-buttons{
42+
display: flex;
43+
flex: 4;
44+
gap: 0.5rem;
45+
flex-direction: row;
46+
justify-content: start;
47+
}
48+
49+
.buttons .load-preset {
50+
display: flex;
51+
gap: 0;
52+
justify-content: end;
53+
}
54+
55+
#dark-button {
56+
position: absolute;
57+
width: 120px;
58+
top: 41px;
59+
right: 28px;
3060
}
3161
</style>
3262
</head>
3363
<body>
34-
35-
<h1>WavePlayerJS</h1>
36-
37-
<label for="formula">Enter your waveform formula (use "t" as time in seconds):</label>
38-
<textarea id="formula">(2/Math.PI)*Math.asin(Math.sin(2*t*vf))*va + (2/Math.PI)*Math.tan(Math.sin(t*vf))*va*vp</textarea>
39-
40-
<label for="vf">Frequency (vf, Hz):</label>
41-
<input type="number" id="vf" value="2000" step="0.1">
42-
43-
<label for="va">Amplitude (va, 0-1):</label>
44-
<input type="number" id="va" value="0.5" step="0.1" min="0" max="1">
45-
46-
<label for="vp">Parameter (vp):</label>
47-
<input type="number" id="vp" value="1" step="0.1">
48-
49-
<div class="buttons">
50-
<button id="playBtn">Play Wave</button>
51-
<button id="stopBtn">Stop Wave</button>
52-
</div>
53-
54-
<br/>
55-
<p>Use ** instead of ^ for exponents</p>
64+
<header>
65+
<div id="dark-button">
66+
<button onclick="switchTheme();" id="theme-button">Dark Mode</button>
67+
</div>
68+
<h1>WavePlayerJS</h1>
69+
</header>
70+
71+
<label for="formula">Enter your waveform formula (use "t" as time in seconds):</label>
72+
<textarea id="formula">(2/Math.PI)*Math.asin(Math.sin(2*t*vf))*va + (2/Math.PI)*Math.tan(Math.sin(t*vf))*va*vp</textarea>
73+
74+
<label for="vf">Frequency (vf, Hz):</label>
75+
<input type="number" id="vf" value="2000" step="1">
76+
77+
<label for="va">Amplitude (va, 0-1):</label>
78+
<input type="number" id="va" value="0.5" step="0.1" min="0" max="1">
79+
80+
<label for="vp">Parameter (vp):</label>
81+
<input type="number" id="vp" value="1" step="1">
82+
83+
<div style="display: flex; margin-top: 8px">
84+
<div class="buttons">
85+
<div class="main-buttons">
86+
<button id="playBtn">Play Wave</button>
87+
<button id="stopBtn">Stop Wave</button>
88+
</div>
89+
<button id="loadPresetBtn" style="margin-left: auto;" onclick="alert('This feature hasn\'t been added yet.');">Load Preset</button>
90+
</div>
91+
</div>
92+
93+
<br/>
94+
<p>Use ** instead of ^ for exponents</p>
5695

5796
<script>
5897
let audioCtx;
5998
let bufferSource;
6099

100+
var dark;
101+
dark=0;
102+
61103
document.getElementById("playBtn").addEventListener("click", playWave);
62104
document.getElementById("stopBtn").addEventListener("click", stopWave);
63105

@@ -100,8 +142,34 @@ <h1>WavePlayerJS</h1>
100142
bufferSource.disconnect();
101143
}
102144
}
145+
146+
function switchTheme() {
147+
let themeBtn = document.getElementById("theme-button");
148+
let pagebody = document.body;
149+
let elements = document.querySelectorAll("button, input, textarea");
150+
151+
if (dark==0) {
152+
// Switch to dark mode
153+
themeBtn.textContent = "Light Mode";
154+
pagebody.style.background = "#232323";
155+
pagebody.style.color = "#f0f0f0";
156+
for (let el of elements) {
157+
el.style.background = "#323232";
158+
el.style.color = "#f0f0f0";
159+
}
160+
dark = 1;
161+
} else if (dark==1) {
162+
// Switch to light mode
163+
themeBtn.textContent = "Dark Mode";
164+
pagebody.style.background = "#f0f0f0";
165+
pagebody.style.color = "#333";
166+
for (let el of elements) {
167+
el.style.background = "";
168+
el.style.color = "";
169+
}
170+
dark = 0;
171+
}
172+
}
103173
</script>
104174
</body>
105175
</html>
106-
107-

0 commit comments

Comments
 (0)