Cipher/index.html at master · voidful/Cipher · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
<!doctype html>
<html lang="zh-Hant">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; base-uri 'none'; object-src 'none'; frame-ancestors 'none'; form-action 'none'; connect-src 'none'; img-src 'self' data: blob: https://images.unsplash.com; media-src 'self' blob:; font-src 'self'; script-src 'self'; style-src 'self'; worker-src 'none'; frame-src 'none'; manifest-src 'none';"
    >
    <meta name="referrer" content="no-referrer">
    <meta name="color-scheme" content="light">
    <title>CIPHER</title>
    <link rel="icon" href="assets/icons/icon.png">
    <link rel="apple-touch-icon" href="assets/icons/icon.png">
    <link rel="stylesheet" href="assets/styles.css">
    <script src="assets/vendor/jsQR.js" defer></script>
    <script type="module" src="assets/cipher.js"></script>
  </head>
  <body>
    <noscript>
      <div class="noscript">CIPHER needs JavaScript because all cryptography runs locally in your browser.</div>
    </noscript>

    <div class="app-shell">
      <header class="topbar" aria-label="CIPHER">
        <div class="brand">
          <img class="brand-icon" src="assets/icons/icon.png" alt="" width="40" height="40">
          <div>
            <h1>CIPHER</h1>
            <p>本機運算</p>
          </div>
        </div>
        <button id="keyStatusButton" class="key-status" type="button">
          <span id="keyStatusDot" class="status-dot" aria-hidden="true"></span>
          <span id="keyStatusText">Key 未設定</span>
        </button>
      </header>
      <p class="app-intro">Cipher Key + 專屬輸入，重現同一組強密碼。</p>

      <main class="app-grid">
        <nav class="mode-list" aria-label="功能">
          <button class="mode-card is-active" type="button" data-mode="text">
            <img src="assets/icons/cipher_text.png" alt="" width="56" height="56">
            <span>文字</span>
          </button>
          <button class="mode-card" type="button" data-mode="gesture">
            <img src="assets/icons/cipher_gesture.png" alt="" width="56" height="56">
            <span>手勢</span>
          </button>
          <button class="mode-card" type="button" data-mode="link">
            <img src="assets/icons/cipher_link.png" alt="" width="56" height="56">
            <span>連線</span>
          </button>
          <button class="mode-card" type="button" data-mode="scan">
            <img src="assets/icons/cipher_scan.png" alt="" width="56" height="56">
            <span>掃描</span>
          </button>
          <button class="mode-card" type="button" data-action="key">
            <img src="assets/icons/cipher_doublepassword.png" alt="" width="56" height="56">
            <span>Cipher Key</span>
          </button>
          <section class="quick-guide" aria-label="使用說明">
            <span class="guide-step"><b>1</b>設定 Key</span>
            <span class="guide-step"><b>2</b>輸入服務名</span>
            <span class="guide-step"><b>3</b>生成複製</span>
          </section>
        </nav>

        <section class="workspace" aria-labelledby="modeTitle">
          <div class="workspace-header">
            <div>
              <p class="eyebrow">CIPHER</p>
              <h2 id="modeTitle">文字</h2>
            </div>
            <div class="workspace-actions">
              <button id="closeToolButton" class="ghost-button mobile-back-button" type="button">返回功能</button>
              <button id="resetInputButton" class="ghost-button" type="button">清空輸入</button>
            </div>
          </div>

          <div class="input-stack">
            <section class="input-panel is-active" data-panel="text" aria-labelledby="textPanelTitle">
              <label id="textPanelTitle" for="textInput">文字輸入</label>
              <p class="helper-text">輸入網站、App 或你容易記住的一段字；不同服務請用不同文字。</p>
              <div class="secret-row">
                <input
                  id="textInput"
                  type="password"
                  autocomplete="off"
                  autocapitalize="none"
                  autocorrect="off"
                  spellcheck="false"
                  inputmode="text"
                >
                <button id="toggleTextInput" class="icon-text-button" type="button" aria-pressed="false">顯示</button>
              </div>
            </section>

            <section class="input-panel" data-panel="gesture" aria-labelledby="gesturePanelTitle" hidden>
              <div class="panel-line">
                <span id="gesturePanelTitle">手勢</span>
                <button id="clearGestureButton" class="ghost-button compact" type="button">清空</button>
              </div>
              <p class="helper-text">在灰色區域往上、下、左、右滑動，方向順序會成為生成密碼的輸入。</p>
              <div id="gesturePad" class="gesture-pad" tabindex="0" aria-label="手勢輸入區">
                <img id="gestureArrow" src="assets/icons/gesterate_arrow.png" alt="" width="76" height="74">
              </div>
              <output id="gestureTrail" class="input-trail">--</output>
            </section>

            <section class="input-panel" data-panel="link" aria-labelledby="linkPanelTitle" hidden>
              <div class="panel-line">
                <span id="linkPanelTitle">連線</span>
                <button id="clearPatternButton" class="ghost-button compact" type="button">清空</button>
              </div>
              <p class="helper-text">依序連點圓點，點選順序會成為生成密碼的輸入。</p>
              <div id="patternPad" class="pattern-wrap" aria-label="連線輸入區">
                <svg id="patternLines" class="pattern-lines" aria-hidden="true"></svg>
                <button class="pattern-dot" type="button" data-cell="1" aria-label="1"></button>
                <button class="pattern-dot" type="button" data-cell="2" aria-label="2"></button>
                <button class="pattern-dot" type="button" data-cell="3" aria-label="3"></button>
                <button class="pattern-dot" type="button" data-cell="4" aria-label="4"></button>
                <button class="pattern-dot" type="button" data-cell="5" aria-label="5"></button>
                <button class="pattern-dot" type="button" data-cell="6" aria-label="6"></button>
                <button class="pattern-dot" type="button" data-cell="7" aria-label="7"></button>
                <button class="pattern-dot" type="button" data-cell="8" aria-label="8"></button>
                <button class="pattern-dot" type="button" data-cell="9" aria-label="9"></button>
              </div>
              <output id="patternTrail" class="input-trail">--</output>
            </section>

            <section class="input-panel" data-panel="scan" aria-labelledby="scanPanelTitle" hidden>
              <div class="panel-line">
                <span id="scanPanelTitle">掃描</span>
                <button id="stopCameraButton" class="ghost-button compact" type="button">停止</button>
              </div>
              <p class="helper-text">可用相機掃描 QR，也可以讀取 QR 圖片；掃到的文字會拿來生成密碼。</p>
              <div class="scanner">
                <video id="scanVideo" playsinline muted></video>
                <canvas id="scanCanvas" hidden></canvas>
                <div id="scanStatus" class="scan-status">未啟動</div>
              </div>
              <div class="scan-actions">
                <button id="startCameraButton" class="primary-button" type="button">開啟相機</button>
                <label class="file-button" for="scanFile">讀取圖片</label>
                <input id="scanFile" class="sr-only" type="file" accept="image/*">
              </div>
              <label for="scanText">掃描內容</label>
              <textarea
                id="scanText"
                rows="3"
                autocomplete="off"
                autocapitalize="none"
                autocorrect="off"
                spellcheck="false"
              ></textarea>
            </section>
          </div>
        </section>

        <aside class="output-panel" aria-labelledby="outputTitle">
          <div>
            <p class="eyebrow">Generate</p>
            <h2 id="outputTitle">Password</h2>
          </div>

          <output id="passwordOutput" class="password-output" aria-live="polite">Password</output>
          <p id="messageLine" class="message-line" role="status" aria-live="polite"></p>

          <div class="setting-group">
            <label for="lengthInput">位數</label>
            <div class="length-row">
              <input id="lengthInput" type="number" min="16" max="64" step="1" inputmode="numeric">
              <input id="lengthRange" type="range" min="16" max="64" step="1">
            </div>
          </div>

          <div class="setting-group">
            <span>組合</span>
            <div class="segmented" role="group" aria-label="字元組合">
              <button class="segment" type="button" data-charset="number">數字</button>
              <button class="segment" type="button" data-charset="alnum">數字+字母</button>
              <button class="segment is-active" type="button" data-charset="symbols">全部</button>
            </div>
          </div>

          <div class="button-grid">
            <button id="generateButton" class="primary-button" type="button">生成</button>
            <button id="copyButton" class="secondary-button" type="button">複製</button>
            <button id="revealButton" class="secondary-button" type="button" aria-pressed="false">顯示</button>
            <button id="clearOutputButton" class="secondary-button" type="button">清除</button>
          </div>
        </aside>
      </main>
    </div>

    <dialog id="keyDialog" class="key-dialog">
      <div class="dialog-surface">
        <div class="dialog-head">
          <div>
            <p class="eyebrow">CIPHER</p>
            <h2>Cipher Key</h2>
          </div>
          <button id="closeKeyDialogButton" class="close-button" type="button" aria-label="關閉">x</button>
        </div>
        <label for="keyInput">Key</label>
        <input
          id="keyInput"
          type="password"
          autocomplete="off"
          autocapitalize="none"
          autocorrect="off"
          spellcheck="false"
        >
        <label for="keyConfirmInput">確認</label>
        <input
          id="keyConfirmInput"
          type="password"
          autocomplete="off"
          autocapitalize="none"
          autocorrect="off"
          spellcheck="false"
        >
        <p id="keyStrength" class="message-line">至少 16 字元，建議使用長片語。</p>
        <p id="keyMessage" class="message-line" role="status" aria-live="polite"></p>
        <div class="dialog-actions">
          <button id="saveKeyButton" class="primary-button" type="button">確定</button>
          <button id="clearKeyButton" class="secondary-button" type="button">清除 Key</button>
        </div>
      </div>
    </dialog>
  </body>
</html>