index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>SHAlala</title>
    <style>
      body {
        line-height: 1.4;
          font-size: 16px;
          padding: 0 10px;
          margin: 10px auto;
          max-width: 650px;
      }

      #maincontent {
        max-width:42em;margin:15 auto;
      }

      label {
        /* make text not selectable to prevent selection when clicking a checkbox label */
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      div {
        padding-top: 5px;
      }
    </style>
  </head>

  <body>
    <div class="maincontent">
      <h1>SHAlala</h1>
      <h2>Turn Your SHA1 into Music If You Want to Do That For Some Reason</h2>

      <form id="form">
        <h3>Provide a Hash</h3>
        <div>
          <label for="hashInput">Hash input:</label>
          <input id="hashInput" placeholder="enter SHA1 here" type="text">
          <button type="button" id="hashInputClear">X</button>
          <br>
          <p style="margin: 0; font-size: .8em;">(All other inputs are ignored when this is used)</p>
          <div id="hashInputError" style="color:red"></div>
        </div>
        <div>
          <h3>Load a Github Repo</h3>
          <div>
            <p style="margin:0">Grabs the most recent commit of the Github Repo</p>
            <p style="margin: 0; font-size: .8em">(Text/File input are ignored if a repo has been specified)</p>
            <div>
              <label for="githubInput">Github URL: </label>
              <input id="githubInput" type="text" placeholder="https://github.com/UserName/Repository" style="width:50%">
              <button id="githubInputButton" type="button">Load</button>
              <button id="githubClearButton" type="button">X</button>
            </div>
          </div>
          <div id="githubResults"></div>
        </div>
        <hr/>
        <h3>Generate a Hash</h3>
        <p style="margin: 0px">
          Text and File inputs are concatenated when generating the SHA1
        </p>
        <div>
          <label for="formInput">Text Input:</label>
          <input id="formInput" type="text" placeholder="enter text here" />
        </div>
        <div>
          <label for="fileInput">Upload a file (Does not get sent to a server):</label>
          <input id="fileInput" type="file" style="padding-top: 5px"/>
          <button type="button" id="clearFile">X</button>
        </div>
        <hr/>

        <div style="margin-top:10px;">
          <h3>Configure</h3>
          <label for="scaleSelect">Select a scale:</label>
          <select id="scaleSelect">
            <option value="ionian">Ionian</option>
            <option value="dorian">Dorian</option>
            <option value="phrygian">Phrygian</option>
            <option value="lydian">Lydian</option>
            <option value="mixolydian">Mixolydian</option>
            <option value="aeolian">Aeolian</option>
            <option value="locrian">Locrian</option>
            <option value="chromatic">Chromatic</option>
            <option value="diminished">Diminished</option>
            <option value="wholetone">Whole tone</option>
            <option value="minorpenta">Minor Pentatonic</option>
            <option value="majorpenta">Major Pentatonic</option>
            <option value="mccoy" selected>McCoy Tyner</option>
          </select>
          <label for="instrumentSelect">Select an instrument:</label>
          <select id="instrumentSelect">
            <option value="piano">Piano</option>
            <option value="guitar-electric">Electric Guitar</option>
            <option value="guitar-acoustic">Acoustic Guitar</option>
            <option value="xylophone">Xylophone</option>
            <option value="harp">Harp</option>
            <option value="clarinet">Clarinet</option>
            <option value="violin">Violin</option>
            <option value="cello">Cello</option>
            <option value="harmonium">Harmonium</option>
            <option value="organ">Organ</option>
          </select>
          <input type="checkbox" checked="true" id="playShortHashCheckbox" />
          <label for="playShortHashCheckbox">play the short hash</label>
          <div>
            tempo:<br/>
            <input id="range-input" value="200" type="range" min="60" max="240" />
            <span id="range-value">180 BPM</span>
          </div>
        </div>
        <h3>Play</h3>
        <button type="submit" style="margin-top: 10px">SHAlala</button>
        <button id="stop">stop</button>
        <div id="sha"></div>
      </form>

      <hr style="margin-top:30px;">
      <a href="https://github.com/Garrett-Bodley/SHAlala">Source code</a>
    </div>
    <script src="https://unpkg.com/tone@14.8.49/build/Tone.js"></script>
    <script type="module" src="/index.js"></script>
  </body>
</html>