DJCtrlEmu/view/index.html

86 lines
3.7 KiB
HTML
Raw Normal View History

2023-10-03 06:53:25 -04:00
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>DJ Controller Emulator</title>
<link rel="stylesheet" href="assets/stylesheets/style.css">
<script src="assets/scripts/main.js" charset="utf-8"></script>
</head>
<body>
<main>
<div id="sections">
<div class="deck">
<div class="deck-effects">
</div>
<div class="deck-playback">
<input class="speed-slider" type="range" min="0" value="63" step="1" max="127" oninput="controller.speed(0, 127 - this.value);" ondblclick="controller.speed(0, this.value = 63);">
</div>
<div class="play">
<div class="deck-pads">
<button type="button" class="deck-pad" onclick="controller.pad(0, 0);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 1);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 2);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 3);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 4);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 5);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 6);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(0, 7);"></button>
</div>
<button type="button" onclick="controller.load(0);">Load</button>
<button type="button" onclick="controller.play_pause(0);">PlayPause</button>
</div>
</div>
<div id="mixer">
<div id="knobs">
<div class="deck-eq-knobs">
</div>
<div class="deck-eq-knobs">
</div>
</div>
<div id="volume">
<input class="volume-slider" type="range" min="0" value="127" step="1" max="127" oninput="controller.volume(0, this.value);">
<div id="volume-meters">
<div class="volume-meter">
<div id="volume-meter-left" class="volume-meter-level"></div>
<div class="silence-meter-level"></div>
</div>
<div class="volume-meter">
<div id="volume-meter-right" class="volume-meter-level"></div>
<div class="silence-meter-level"></div>
</div>
</div>
<input class="volume-slider" type="range" min="0" value="127" step="1" max="127" oninput="controller.volume(1, this.value);">
</div>
<input id="crossfader" type="range" min="0" value="63" step="1" max="127" oninput="controller.crossfade(this.value);">
</div>
<div class="reverse deck">
<div class="deck-effects">
</div>
<div class="deck-playback">
<input class="speed-slider" type="range" min="0" value="63" step="1" max="127" oninput="controller.speed(1, 127 - this.value);" ondblclick="controller.speed(1, this.value = 63);">
</div>
<div class="play">
<div class="deck-pads">
<button type="button" class="deck-pad" onclick="controller.pad(1, 0);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 1);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 2);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 3);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 4);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 5);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 6);"></button>
<button type="button" class="deck-pad" onclick="controller.pad(1, 7);"></button>
</div>
<button type="button" onclick="controller.load(1);">Load</button>
<button type="button" onclick="controller.play_pause(1);">PlayPause</button>
</div>
</div>
</div>
</main>
</body>
</html>