chrome-bookmark
/
popup.html

<!doctype html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Chrome Bookmark</title>
  <link rel="stylesheet" href="./style/style.css">
</head>

<body>
  <div class="container">
    <header>
      <div class="switch">
        <div class="icon" id="toggle">
          <span class="icon-setting" title="设置"></span>
        </div>
      </div>
    </header>
    <section>
      <div class="main" id="main">
        <h3>Chrome Bookmark</h3>
        <div class="message-wrapper">
          <div class="counter">
            <div>本地有<strong id="count-local">--</strong>条书签</div>
            <div>线上有<strong id="count-repo">--</strong>个备份版本</div>
            <div>当前远程版本<strong id="current-repo">--</strong></div>
          </div>
        </div>
        <div class="btn-group" style="margin-bottom: 20px;">
          <input type="text" name="greeting" id="filename" list="greetings" placeholder="选取备份文件（可自定义输入）">
          <!-- 使用style="display:none;"将datalist元素设定为不显示 -->
          <datalist id="greetings" style="display:none;"></datalist>
        </div>
        <div class="btn-group">
          <button type="button" id="upload" class="btn">全量同步上传</button>
          <button type="button" id="download" class="btn">全量更新下载</button>
          <button type="button" id="clearonline" class="btn btn-danger">删除远程书签</button>
          <button type="button" id="clear" class="btn btn-danger">清空本地书签</button>
        </div>
      </div>
      <div class="setting" id="setting">
        <h3>配置Github书签仓库</h3>
        <div class="message-wrapper text-left">
          <p>Chrome Bookmark 需要一个私有仓库来保存您的个人书签。<a href="https://gitee.com/CLCoding/chrome-bookmark">详细配置说明</a></p>
        </div>
        <div class="form-group">
          <input type="text" id="repos" placeholder="仓库完整URL地址" title="仓库完整URL地址" maxlength="200">
          <input type="text" id="token" placeholder="私有访问接口Token" title="私有访问接口Token" maxlength="200">
          <button type="button" class="btn" id="commit">保存配置</button>
        </div>
      </div>
      <div id="message-error" class="message error"></div>
      <div id="message-success" class="message success"></div>
    </section>
    <footer>
      <a href="https://github.com/CLDeveloping/chrome-bookmark" target="_blank">
        <svg height="24" class="octicon octicon-mark-github d-block mr-2 float-left" viewBox="0 0 16 16" version="1.1"
          width="24" aria-hidden="true">
          <path fill-rule="evenodd"
            d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
          </path>
        </svg>
        <a href="https://gitee.com/CLCoding/chrome-bookmark" target="_blank">
          <svg width="24px" height="24px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="logo_lightbg" transform="translate(-163.000000, -92.000000)">
                <g id="logo" transform="translate(163.000000, 91.000000)">
                  <path
                    d="M86,37 L40,37 L40,37.0010476 C37.7912701,37.0010476 36.0005785,38.7912703 36.0000001,41.0000001 L35.9963338,51.0000001 L35.9952531,50.9999999 C35.9946746,53.2091388 37.7850666,55.0004687 39.9942055,55.0010472 C39.9945658,55.0010473 39.994926,55.0010473 39.9952863,55.0010473 L68,54.9997333 L68,54.9997 C70.209139,54.9996816 72.0000149,56.7905277 72.0000333,58.9996667 C72.0000333,58.9996778 72.0000333,58.9996889 72.0000333,58.9997 L72,59.9997 L72,61 L72,61 C72,67.627417 66.627417,73 60,73 L21.9970229,73 L21.9970229,72.9998897 C19.788201,72.9998897 17.99758,71.2093181 17.9975191,69.0004962 L17.9963613,31 L17.9960306,31 C17.9958479,24.372583 23.3682828,18.9998519 29.9956998,18.9996692 C29.99581,18.9996692 29.9959203,18.9996692 29.9960306,18.9996692 L85.988836,19 L85.988836,18.9975183 C88.1970062,18.9975183 89.9874656,17.208169 89.9888352,14.9999992 L89.9975191,4.99999923 L89.9999992,5.00000077 C90.0013694,2.79086219 88.2116195,0.998890802 86.0024809,0.997520639 C86.0016539,0.997520127 86.000827,0.99751987 86,0.99751987 L30,1 L30,1.00016539 C13.4315221,1.00016539 9.13442924e-05,14.4315221 4.58559413e-10,31 L-0.000474127419,87 L-0.000496179797,87 C-0.000508359022,89.209139 1.79034277,91.0000099 3.99948177,91.0000221 C3.99948912,91.0000221 3.99949647,91.0000221 3.99950382,91.0000221 L63,91 L63,91 C77.9116882,91 90,78.9116882 90,64 L90,41 L90,41 C90,38.790861 88.209139,37 86,37 Z"
                    id="G" fill="#cccccc"></path>
                </g>
              </g>
            </g>
          </svg>
        </a>
      </a>&nbsp;作者：<a href="https://github.com/lflxp" target="_blank">lflxp</a>,&nbsp;<a href="https://gitee.com/chiroc"
        target="_blank">Chiroc</a>
    </footer>
  </div>
  <script type="text/javascript" src="js/popup.js"></script>
</body>
</html>