test/demo.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="manifest" href="manifest.json" />
    <link rel="icon" sizes="48x48" href="favicon.ico" />
    <link rel="stylesheet" href="style.css" />
    <title>Chii</title>
    <script src="demo.js"></script>
  </head>
  <body onload="onLoad()">
    <header class="header">
      <canvas id="c"></canvas>
      <h1 class="title">Chii</h1>
      <h2 class="subtitle">Remote Debugging Tool</h2>
    </header>
    <svg id="triangle" width="800" height="70" viewBox="0,0,80,5" preserveAspectRatio="none">
      <polygon points="0,0 0,5 80,5 80,0 60,5 20,5" style="fill: #fff"></polygon>
    </svg>
    <p class="github-link">View it on <a href="https://github.com/liriliri/chii">GitHub</a></p>
    <p class="hint">
      Open index page to inspect this page! <br /><br />
      Also scan the qrcode below to test it on your phone.
    </p>
    <div class="qrcode"><img src="https://res.liriliri.io/chii/qrcode.png" /></div>
    <ul class="buttons">
      <li id="start-btn" class="yellow" ontouchstart>Start Stuff</li>
      <li id="clear-btn" class="red" ontouchstart>Clear Output</li>
      <li id="error-btn" class="green" ontouchstart onclick="triggerError()">Trigger Error</li>
    </ul>
    <div id="output"></div>
  </body>
</html>