index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fingermap</title>
  <script src="lib/html2canvas.min.js"></script>
  <script defer src="lib/jquery-3.5.1.min.js"></script>
  <script defer src="script/index.js" type="module"></script>
  <link rel="stylesheet" href="css/style.css">
  <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
      integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w=="
      crossorigin="anonymous"
    />
</head>
<body>
  <!-- <div class="mousemenu"> -->
    <!-- <div class="top">
      <box class="li"></box>Left Index
    </div> -->
  <!-- </div> -->
  <div id="notificationCenter">
    <div class="history"></div>
  </div>
  <div class="content hidden">
    <!-- Nav primary menu -->
    <div class="nav">
      <div class="title">
        <div class="top">fingermap</div>
        <div class="bottom">
          by
          <img src="images/logo_small.png" alt>
          monkeytype
        </div>
      </div>
      <div class="buttons">
        <div class="button hamburger">
          <div class="icon">
            <i class="fas fa-bars"></i>
          </div>
        </div>
        <div class="button toggleLayout">
          <div class="icon">
            <i class="fas fa-keyboard"></i>
          </div>
        </div>
        <div class="button clear">
          <div class="icon">
            <i class="fas fa-trash-alt"></i>
          </div>
        </div>
        <div class="button share">
          <div class="icon">
            <i class="fas fa-share-square"></i>
          </div>
        </div>
        <div class="button screenshot">
          <div class="icon">
            <i class="fas fa-image"></i>
          </div>
        </div>
        <div class="button save">
          <div class="icon">
            <i class="fas fa-save"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- Nav hamburger menu -->
    <div class="nav navHamburger hidden">
      <div class="buttons">
        <div class="button toggleLayout">
          <div class="icon">
            <i class="fas fa-keyboard"></i>
          </div>
          <div class="text">
            Toggle layout
          </div>
        </div>
        <div class="button clear">
          <div class="icon">
            <i class="fas fa-trash-alt"></i>
          </div>
          <div class="text">
            Clear
          </div>
        </div>
        <div class="button share">
          <div class="icon">
            <i class="fas fa-share-square"></i>
          </div>
          <div class="text">
            Share
          </div>
        </div>
        <div class="button screenshot">
          <div class="icon">
            <i class="fas fa-image"></i>
          </div>
          <div class="text">
            Screenshot
          </div>
        </div>
        <div class="button save">
          <div class="icon">
            <i class="fas fa-save"></i>
          </div>
          <div class="text">
            Save
          </div>
        </div>
      </div>
    </div>


    <div class="ratioScalingContainer">
      <div class="ratioScalingSpacer">
      </div>
      <div class="keyboardFingersWrapper">
        <div class="keyboardContainer">
          <keyboard>
            <row>
              <key>
                <upper>`</upper>
                <lower>~</lower>
              </key>
              <key>
                <upper>!</upper>
                <lower>1</lower>
              </key>
              <key>
                <upper>@</upper>
                <lower>2</lower>
              </key>
            </row>
          </keyboard>
          <div class="screenshotBottom hidden">
            <div class="fingers">
              <div class="finger">
                <div class="box lp"></div>
                <div class="box rp"></div>
                <div class="text">Pinky</div>
              </div>
              <div class="finger">
                <div class="box lr"></div>
                <div class="box rr"></div>
                <div class="text">Ring</div>
              </div>
              <div class="finger">
                <div class="box lm"></div>
                <div class="box rm"></div>
                <div class="text">Middle</div>
              </div>
              <div class="finger">
                <div class="box li"></div>
                <div class="box ri"></div>
                <div class="text">Index</div>
              </div>
              <div class="finger">
                <div class="box lt"></div>
                <div class="box rt"></div>
                <div class="text">Thumb</div>
              </div>
            </div>
            <div class="url">
              fingermap.monkeytype.com
            </div>
          </div>
        </div>
        <div class="fingerbuttons">
          <div class="left">
            <!-- <div class="title">left</div> -->
            <div class="buttons">
              <div class="button lp" finger="lp">
                <div class="icon">
                  <i class="fas fas fa-check"></i>
                </div>
              </div>
              <div class="button lr" finger="lr">
                <div class="icon">
                  <i class="fas fas fa-check"></i>
                </div>
              </div>
              <div class="button lm" finger="lm">
                <div class="icon">
                  <i class="fas fas fa-check"></i>
                </div>
              </div>
              <div class="button li active" finger="li">
                <div class="icon">
                  <i class="fas fas fa-check"></i>
                </div>
              </div>
              <div class="button lt" finger="lt">
                <div class="icon">
                  <i class="fas fas fa-check"></i>
                </div>
              </div>
            </div>
          </div>
          <div class="right">
            <!-- <div class="title">right</div> -->
            <div class="buttons">
              <div class="button rt" finger="rt">
                <div class="icon">
                  <i class="fas fas fa-check"></i>
                </div>
              </div>
              <div class="button ri" finger="ri">
                <div class="icon">
                  <i class="fas fas fa-check"></i>
                </div>
              </div>
              <div class="button rm" finger="rm">
                <div class="icon">
                  <i class="fas fas fa-check"></i>
                </div>
              </div>
              <div class="button rr" finger="rr">
                <div class="icon">
                  <i class="fas fas fa-check"></i>
                </div>
              </div>
              <div class="button rp" finger="rp">
                <div class="icon">
                  <i class="fas fas fa-check"></i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="tips">
      Left Click - Add<br>
      Right Click - Remove<br>
      Hold Shift - Overwrite / Clear<br>
      Scroll / Arrows - Change Finger<br>
    </div>
  </div>
</body>
</html>