86 lines
3.7 KiB
HTML
86 lines
3.7 KiB
HTML
|
<!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>
|