94 lines
3.1 KiB
HTML
94 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>OPLabs Band Channel</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="channel-strip" id="channelStrip">
|
|
<!-- Header: label + instrument badge -->
|
|
<div class="ch-header">
|
|
<span class="ch-label">Band Channel</span>
|
|
<span class="ch-instrument-badge" id="instrumentBadge">Guitar</span>
|
|
</div>
|
|
|
|
<!-- Mute & Solo buttons -->
|
|
<div class="ch-mute-solo">
|
|
<button class="ch-btn mute" id="btnMute" title="Mute">M</button>
|
|
<button class="ch-btn solo" id="btnSolo" title="Solo">S</button>
|
|
</div>
|
|
|
|
<!-- Level Meter -->
|
|
<div class="ch-meter-section">
|
|
<div class="meter-stereo">
|
|
<div class="meter-channel">
|
|
<span class="meter-label">L</span>
|
|
<div class="meter-track" id="meterTrackL">
|
|
<div class="meter-fill" id="meterFillL"></div>
|
|
<div class="meter-peak" id="meterPeakL"></div>
|
|
<div class="meter-tick" style="bottom:80%"></div>
|
|
<div class="meter-tick" style="bottom:50%"></div>
|
|
<div class="meter-tick" style="bottom:20%"></div>
|
|
</div>
|
|
</div>
|
|
<div class="meter-channel">
|
|
<span class="meter-label">R</span>
|
|
<div class="meter-track" id="meterTrackR">
|
|
<div class="meter-fill" id="meterFillR"></div>
|
|
<div class="meter-peak" id="meterPeakR"></div>
|
|
<div class="meter-tick" style="bottom:80%"></div>
|
|
<div class="meter-tick" style="bottom:50%"></div>
|
|
<div class="meter-tick" style="bottom:20%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="meter-db-readout" id="meterDbReadout">
|
|
<span>-∞</span>
|
|
<span>-∞</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rotary Knobs Row -->
|
|
<div class="ch-knobs-row">
|
|
<!-- Volume knob -->
|
|
<div class="knob-container">
|
|
<div class="knob-label">Volume</div>
|
|
<div class="knob-rotary" id="knobVolume">
|
|
<div class="knob-arc" id="knobVolumeArc">
|
|
<div class="knob-grip" id="knobVolumeGrip"></div>
|
|
</div>
|
|
</div>
|
|
<div class="knob-value" id="volumeReadout">0.0 dB</div>
|
|
</div>
|
|
|
|
<!-- Pan knob -->
|
|
<div class="knob-container">
|
|
<div class="knob-label">Pan</div>
|
|
<div class="knob-rotary" id="knobPan">
|
|
<div class="knob-arc" id="knobPanArc">
|
|
<div class="knob-grip" id="knobPanGrip"></div>
|
|
</div>
|
|
</div>
|
|
<div class="knob-value" id="panReadout">C</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Instrument selector -->
|
|
<div class="ch-instrument-section">
|
|
<label class="ch-instrument-label">Instrument</label>
|
|
<select class="ch-instrument-select" id="instrumentSelect">
|
|
<option value="0">Guitar</option>
|
|
<option value="1">Bass</option>
|
|
<option value="2">Keys</option>
|
|
<option value="3">Vocals</option>
|
|
<option value="4">Backing</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|