index.html

<!doctype html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <title>派对抽奖</title>
  <meta name="application-name" content="派对抽奖">
  <meta name="description" content="在派对、婚礼、公司年会等活动现场举行抽奖活动">
  <meta name="author" content="James Shih">
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <link rel="icon" type="image/png" href="/favicon.png">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">
</head>

<body>
  <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1"
    xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <symbol id="icon-undo2" viewBox="0 0 32 32">
        <path
          d="M23.808 32c3.554-6.439 4.153-16.26-9.808-15.932v7.932l-12-12 12-12v7.762c16.718-0.436 18.58 14.757 9.808 24.238z">
        </path>
      </symbol>
      <symbol id="icon-spinner11" viewBox="0 0 32 32">
        <path
          d="M32 12h-12l4.485-4.485c-2.267-2.266-5.28-3.515-8.485-3.515s-6.219 1.248-8.485 3.515c-2.266 2.267-3.515 5.28-3.515 8.485s1.248 6.219 3.515 8.485c2.267 2.266 5.28 3.515 8.485 3.515s6.219-1.248 8.485-3.515c0.189-0.189 0.371-0.384 0.546-0.583l3.010 2.634c-2.933 3.349-7.239 5.464-12.041 5.464-8.837 0-16-7.163-16-16s7.163-16 16-16c4.418 0 8.418 1.791 11.313 4.687l4.687-4.687v12z">
        </path>
      </symbol>
      <symbol id="icon-wrench" viewBox="0 0 32 32">
        <path
          d="M31.342 25.559l-14.392-12.336c0.67-1.259 1.051-2.696 1.051-4.222 0-4.971-4.029-9-9-9-0.909 0-1.787 0.135-2.614 0.386l5.2 5.2c0.778 0.778 0.778 2.051 0 2.828l-3.172 3.172c-0.778 0.778-2.051 0.778-2.828 0l-5.2-5.2c-0.251 0.827-0.386 1.705-0.386 2.614 0 4.971 4.029 9 9 9 1.526 0 2.963-0.38 4.222-1.051l12.336 14.392c0.716 0.835 1.938 0.882 2.716 0.104l3.172-3.172c0.778-0.778 0.731-2-0.104-2.716z">
        </path>
      </symbol>
      <symbol id="icon-checkmark" viewBox="0 0 32 32">
        <path d="M27 4l-15 15-7-7-5 5 12 12 20-20z"></path>
      </symbol>
    </defs>
  </svg>
  <div id="wrapper">
    <div id="namesPanel" class="panel">
      <a id="click-area" aria-label="点此开始新一轮抽奖"></a>
      <button id="reset-btn" aria-label="复位" data-title="复位" data-confirm="确实要复位吗？">
        <svg class="icon icon-spinner11">
          <use xlink:href="#icon-spinner11"></use>
        </svg>
      </button>
      <button id="options-btn" aria-label="设置" data-title="设置">
        <svg class="icon icon-wrench">
          <use xlink:href="#icon-wrench"></use>
        </svg>
      </button>
    </div>
    <div id="optionsPanel" class="panel">
      <div id="options">
        <form id="options-form">
          <div id="options-left">
            <textarea id="names" placeholder="在此输入参与者的姓名，以空格、顿号或中英文逗号分隔"></textarea>
          </div>
          <div id="options-right">
            <fieldset>
              <legend>选项</legend>
              <dl>
                <dt>不能重复中奖</dt>
                <dd><input type="checkbox" id="removeAfterHit"><label for="removeAfterHit"></label></dd>
                <dt>朗读中奖者名字</dt>
                <dd><input type="checkbox" id="readOutNames"><label for="readOutNames"></label></dd>
                <dt>手动停止</dt>
                <dd><input type="checkbox" id="stopOnDemand"><label for="stopOnDemand"></label></dd>
                <dt>浅色主题</dt>
                <dd><input type="checkbox" id="lightTheme"><label for="lightTheme"></label></dd>
              </dl>
            </fieldset>
          </div>
          <div id="options-bottom">
            <button type="submit" id="optionSubmit" style="float:right" aria-label="保存" data-title="保存">
              <svg class="icon icon-checkmark">
                <use xlink:href="#icon-checkmark"></use>
              </svg>
            </button>
            <button type="button" id="optionCancel" aria-label="取消" data-title="取消">
              <svg class="icon icon-undo2">
                <use xlink:href="#icon-undo2"></use>
              </svg>
            </button>
          </div>
        </form>
      </div>
      <copyright>&copy; MMXIII-MMXXIV <a href="https://jshih.dev">James Shih</a></copyright>
      <a id="github-link" href="https://github.com/hyjk2000/party-lottery">Fork me on GitHub</a>
    </div>
    <div id="pwa-toast" role="alert" aria-labelledby="toast-message">
      <div class="message">
        <span id="toast-message"></span>
      </div>
      <div class="buttons">
        <button id="pwa-refresh" type="button">刷新</button>
        <button id="pwa-close" type="button">关闭</button>
      </div>
    </div>
  </div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>