Mod-sdk - HTML5

dabblet.css

/** * Mod-sdk - HTML5 */
div { float: left;}

#pedal1 {
  --pedal-background: #cda;
  --pedal-width: 300px;
  --pedal-height: 380px;
}
#pedal1 .knobs span:first-child {
  margin: 0 calc(var(--knob-size) / 2);
}

#pedal2 { --pedal-background: gray; }

dabblet.html

<link rel="stylesheet" href="https://pedalpi.github.io/Mod-sdk-HTML5/css/pedal-base.css">
<link rel="stylesheet" href="https://pedalpi.github.io/Mod-sdk-HTML5/css/pedal-boxy.css">
<link rel="stylesheet" href="https://pedalpi.github.io/Mod-sdk-HTML5/css/pedal-japanese.css">

<div id="pedal1" class="pedal boxy">
  <div class="logo">MOD</div>
  <div class="name">Default</div>
  <div class="knobs">
    <span>Depth</span>
    <span>Wet</span>
    <span>Size</span>
    <span class="little">Drive</span>
    <span class="little">Ratio</span>
    <span class="little">Ratio</span>
    <span class="little">Ratio</span>
  </div>
  <div class="led"></div>
  <div class="footswitch"></div>
</div>

<div id="pedal2" class="pedal japanese">
  <div class="logo">MOD</div>
  <div class="name">Default japanese</div>
  <div class="knobs">
    <span class="bottom">Depth</span>
    <span class="bottom">Wet</span>
    <span class="bottom">Size</span>
    <span class="bottom">Ratio</span>
    <span>Depth 2</span>
    <span>Wet 2</span>
    <span>Size 2</span>
    <span>Ratio 2</span>
  </div>
  <div class="led"></div>
  <div class="footswitch"></div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}