bosca-ceoil-electron/index.html

149 lines
7.1 KiB
HTML
Raw Normal View History

2019-07-16 09:31:45 +02:00
<html>
<head>
2019-07-16 10:03:12 +02:00
<script src="/bosca-coeil-js/assets/index.js"></script>
2019-07-16 09:31:45 +02:00
2019-07-16 10:03:12 +02:00
<link rel="stylesheet" href="/bosca-coeil-js/assets/md-icons.css">
<link rel="stylesheet" href="/bosca-coeil-js/assets/material.indigo-pink.min.css">
<script defer src="/bosca-coeil-js/assets/material.min.js"></script>
2019-07-16 09:31:45 +02:00
2019-07-16 10:03:12 +02:00
<link rel="stylesheet" href="/bosca-coeil-js/assets/mdl-selectfield.min.css">
<script defer src="/bosca-coeil-js/assets/mdl-selectfield.min.js"></script>
2019-07-16 09:31:45 +02:00
<link rel="stylesheet" href="/bosca-coeil-js/assets/dialog-polyfill.min.css">
2019-07-16 10:03:12 +02:00
<link rel="stylesheet" href="/bosca-coeil-js/index.css">
2019-07-16 09:31:45 +02:00
</head>
<body>
<div id="app">
<div class="mui-form--inline metaWorkspace">
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary mdl-js-ripple-effect"
id="playButton">
Play
</button>
<div class="mdl-selectfield mdl-js-selectfield mdl-selectfield--floating-label">
<select class="mdl-selectfield__select" id="instruments">
<option value="midi.piano1">midi.piano1</option>
</select>
<label class="mdl-selectfield__label">Instrument</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label shortInput">
<input class="mdl-textfield__input" id="bpm" type="number" min="10" max="220" step="5" value="120"
required />
<label class="mdl-textfield__label">BPM</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label shortInput">
<input class="mdl-textfield__input" id="volume" type="number" min="0" max="200" step="5" value="100"
required />
<label class="mdl-textfield__label">Volume</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label shortInput">
<input class="mdl-textfield__input" id="swing" type="number" min="0" max="1" step="0.1" value="0"
required />
<label class="mdl-textfield__label">Swing</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label shortInput">
<input class="mdl-textfield__input" id="resonance" type="number" min="0" max="1" step="0.05" value="0"
required />
<label class="mdl-textfield__label">Resonance</label>
</div>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label shortInput">
<input class="mdl-textfield__input" id="dampening" type="number" min="0" max="3000" step="100"
value="3000" required />
<label class="mdl-textfield__label">Dampening</label>
</div>
<button id="effectsButton"
class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary mdl-js-ripple-effect">
Effects <i class="material-icons">arrow_drop_down</i>
</button>
<ul id="effectsMenu" class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
for="effectsButton">
<li>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
<input class="mdl-textfield__input" id="delayEffect" type="number" min="0" max="1" step="0.05"
value="0" required />
<label class="mdl-textfield__label">Delay</label>
</div>
</li>
<li>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
<input class="mdl-textfield__input" id="chorusEffect" type="number" min="0" max="1" step="0.05"
value="0" required />
<label class="mdl-textfield__label">Chorus</label>
</div>
</li>
<li>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
<input class="mdl-textfield__input" id="reverbEffect" type="number" min="0" max="1" step="0.05"
value="0" required />
<label class="mdl-textfield__label">Reverb</label>
</div>
</li>
<li>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
<input class="mdl-textfield__input" id="distortionEffect" type="number" min="0" max="8" step="1"
value="0" required />
<label class="mdl-textfield__label">Distortion</label>
</div>
</li>
<li>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
<input class="mdl-textfield__input" id="lowBoostEffect" type="number" min="0" max="3000"
step="100" value="0" required />
<label class="mdl-textfield__label">Low boost</label>
</div>
</li>
<li>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
<input class="mdl-textfield__input" id="compressorEffect" type="number" min="-100" max="0"
step="5" value="0" required />
<label class="mdl-textfield__label">Compressor</label>
</div>
</li>
<li>
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label flexInput">
<input class="mdl-textfield__input" id="highPassEffect" type="number" min="0" max="3000"
step="100" value="0" required />
<label class="mdl-textfield__label">High pass</label>
</div>
</li>
</ul>
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--primary mdl-js-ripple-effect"
id="helpButton">
Help
</button>
</div>
<div id="patternWorkspace">
<table id="pattern">
</table>
</div>
</div>
<dialog id="helpModal" class="mdl-dialog">
<h4 class="mdl-dialog__title">Help</h4>
<div class="mdl-dialog__content">
<ul>
<li>Click in a box to add or remove a note.</li>
<li>Shift click to extend a note, and ctrl-shift click to shorten it.</li>
<li>Press the space bar to play or stop the song.</li>
<li>After clicking in an entry field, use the arrow keys to quickly change the value.</li>
</ul>
</div>
<div class="mdl-dialog__actions">
<button type="button" class="mdl-button close">Close</button>
</div>
</dialog>
</body>
</html>