ionote.github.io/index.html at main · ionote/ionote.github.io · 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
<!doctype html>
<html lang="en" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover,interactive-widget=resizes-content">
<meta name="theme-color" content="#FDFDFD" id="metaTheme">
<meta name="color-scheme" content="light dark">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="ioNote">
<meta name="description" content="ioNote: simple, private notes that work offline. No account, no tracking.">
<meta name="referrer" content="no-referrer">
<meta property="og:type" content="website">
<meta property="og:title" content="ioNote">
<meta property="og:description" content="Simple, private notes that work offline. No account, no tracking.">
<meta property="og:url" content="https://ionote.github.io/">
<meta property="og:image" content="https://ionote.github.io/icons/icon-512.png">
<meta name="twitter:card" content="summary">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'; style-src 'self'; img-src 'self' data:; connect-src 'self'; base-uri 'none'; form-action 'none'; object-src 'none'">
<title>ioNote</title>
<link rel="manifest" href="manifest.webmanifest">
<link rel="icon" href="icons/icon-192.png">
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
<script src="theme.js"></script>
<link rel="preload" href="fonts/comfortaa.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="style.css">
</head>
<body>

<svg class="sprite" aria-hidden="true">
  <symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
  <symbol id="i-gear" viewBox="0 0 24 24"><path d="M9.84 4.92 L10.23 1.95 L13.77 1.95 L14.16 4.92 L15.47 5.47 L17.85 3.64 L20.36 6.15 L18.53 8.53 L19.08 9.84 L22.05 10.23 L22.05 13.77 L19.08 14.16 L18.53 15.47 L20.36 17.85 L17.85 20.36 L15.47 18.53 L14.16 19.08 L13.77 22.05 L10.23 22.05 L9.84 19.08 L8.53 18.53 L6.15 20.36 L3.64 17.85 L5.47 15.47 L4.92 14.16 L1.95 13.77 L1.95 10.23 L4.92 9.84 L5.47 8.53 L3.64 6.15 L6.15 3.64 L8.53 5.47Z"/><circle cx="12" cy="12" r="3.2"/></symbol>
  <symbol id="i-search" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></symbol>
  <symbol id="i-x" viewBox="0 0 24 24"><path d="M18 6L6 18M6 6l12 12"/></symbol>
  <symbol id="i-lock" viewBox="0 0 24 24"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></symbol>
  <symbol id="i-back" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></symbol>
  <symbol id="i-pin" viewBox="0 0 24 24"><path d="M9 4h6l-1 6 3 3v1H7v-1l3-3-1-6zM12 14v6"/></symbol>
  <symbol id="i-trash" viewBox="0 0 24 24"><path d="M3 6h18M8 6V4h8v2M6 6l1 14h10l1-14M10 11v5M14 11v5"/></symbol>
  <symbol id="i-note" viewBox="0 0 24 24"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8zM14 3v5h5M9 13h6M9 17h4"/></symbol>
  <symbol id="i-ext" viewBox="0 0 24 24"><path d="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5"/></symbol>
  <symbol id="i-share" viewBox="0 0 24 24"><path d="M12 15V3M8 7l4-4 4 4M5 13v6a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-6"/></symbol>
</svg>

<noscript><p class="noscript">ioNote needs JavaScript to run. Please turn it on and reload the page.</p></noscript>

<h1 class="sr">Notes</h1>
<main id="list"></main>

<div id="pane" aria-hidden="true">
  <svg class="ic"><use href="#i-note"/></svg>
  <p>Select a note, or press <kbd>N</kbd> for a new one</p>
</div>

<div id="tray" aria-hidden="true"></div>

<div id="dock">
  <button class="ib" id="btnSettings" aria-label="Settings"><svg class="ic" aria-hidden="true" focusable="false"><use href="#i-gear"/></svg></button>
  <button class="ib" id="btnSearch" aria-label="Search" hidden><svg class="ic" aria-hidden="true" focusable="false"><use href="#i-search"/></svg></button>
  <button class="ib" id="btnLock" aria-label="Lock now" hidden><svg class="ic" aria-hidden="true" focusable="false"><use href="#i-lock"/></svg></button>
</div>

<div id="sbar" role="search" hidden>
  <svg class="ic" aria-hidden="true" focusable="false"><use href="#i-search"/></svg>
  <input id="q" name="search" type="search" placeholder="Search notes" dir="auto" autocomplete="off" enterkeyhint="search" spellcheck="false" aria-label="Search notes">
  <button class="ib" id="qClose" aria-label="Close search"><svg class="ic" aria-hidden="true" focusable="false"><use href="#i-x"/></svg></button>
</div>

<button id="add" aria-label="New note"><svg class="ic" aria-hidden="true" focusable="false"><use href="#i-plus"/></svg></button>

<section id="ed" class="page" aria-label="Note">
  <div class="col">
    <div class="pbar">
      <button class="ib" id="back" aria-label="Back"><svg class="ic" aria-hidden="true" focusable="false"><use href="#i-back"/></svg></button>
      <span class="stamp" id="stamp"></span>
      <button class="ib" id="btnShare" aria-label="Share as link"><svg class="ic" aria-hidden="true" focusable="false"><use href="#i-share"/></svg></button>
      <button class="ib" id="btnPin" aria-label="Pin" aria-pressed="false"><svg class="ic" aria-hidden="true" focusable="false"><use href="#i-pin"/></svg></button>
      <button class="ib" id="btnDel" aria-label="Delete"><svg class="ic" aria-hidden="true" focusable="false"><use href="#i-trash"/></svg></button>
    </div>
    <input id="t" name="title" placeholder="Title" dir="auto" autocomplete="off" enterkeyhint="next" maxlength="200" aria-label="Title">
    <textarea id="b" name="note" placeholder="Write something…" dir="auto" aria-label="Note"></textarea>
  </div>
</section>

<section id="settings" class="page" aria-label="Settings">
  <div class="col">
    <div class="pbar">
      <button class="ib" id="setBack" aria-label="Back"><svg class="ic" aria-hidden="true" focusable="false"><use href="#i-back"/></svg></button>
      <h2>Settings</h2>
    </div>
    <div class="pbody">
      <div class="seg" id="seg" role="group" aria-label="Theme">
        <button data-v="system">System</button>
        <button data-v="light">Light</button>
        <button data-v="dark">Dark</button>
      </div>

      <div class="card">
        <button class="row" id="togLock" role="switch" aria-checked="false">
          <span><b>Encryption</b><small>Locks notes with a passphrase. No recovery if you forget it.</small></span>
          <span class="toggle"></span>
        </button>
        <div class="row" id="rowAuto" hidden>
          <b>Auto-lock</b>
          <select id="selAuto" name="auto-lock" aria-label="Auto-lock">
            <option value="0">Immediately</option>
            <option value="1">1 minute</option>
            <option value="5">5 minutes</option>
            <option value="30">30 minutes</option>
          </select>
        </div>
        <button class="row" id="btnChangePass" hidden><b>Change passphrase</b></button>
      </div>

      <div class="card">
        <button class="row" id="btnExport"><span><b>Save backup</b><small id="bkInfo"></small></span></button>
        <button class="row" id="btnImport"><b>Restore backup</b></button>
      </div>
      <input type="file" id="importFile" accept=".json,application/json" hidden>

      <div class="card">
        <button class="row" id="btnInstall"><b>Install app</b></button>
        <button class="row" id="btnAbout"><b>About ioNote</b></button>
      </div>

      <div class="card">
        <button class="row danger" id="btnClearAll"><b>Delete all notes</b></button>
      </div>
    </div>
  </div>
</section>

<section id="about" class="page" aria-label="About ioNote">
  <div class="col">
    <div class="pbar">
      <button class="ib" id="abBack" aria-label="Back"><svg class="ic" aria-hidden="true" focusable="false"><use href="#i-back"/></svg></button>
      <h2>About</h2>
    </div>
    <div class="pbody">
      <div class="about">
        <img src="icons/icon-192.png" width="64" height="64" alt="">
        <h2><span translate="no">ioNote</span></h2>
        <p>Private notes that stay on your device. No account, no tracking.</p>
      </div>
      <div class="card">
        <a class="row" href="https://github.com/ionote/ionote.github.io" target="_blank" rel="noopener noreferrer"><b>Source code</b><svg class="ic" aria-hidden="true" focusable="false"><use href="#i-ext"/></svg></a>
      </div>
      <p class="meta" id="appVersion"></p>
    </div>
  </div>
</section>

<div id="lock" role="dialog" aria-modal="true" aria-labelledby="lockTitle">
  <div class="badge"><svg class="ic" aria-hidden="true" focusable="false"><use href="#i-lock"/></svg></div>
  <h2 id="lockTitle"></h2>
  <p id="lockText"></p>
  <input class="field" id="lockPass" name="passphrase" type="password" autocomplete="current-password" placeholder="Passphrase" aria-label="Passphrase">
  <input class="field" id="lockPass2" name="passphrase-confirm" type="password" autocomplete="new-password" placeholder="Repeat passphrase" aria-label="Repeat passphrase">
  <p id="lockErr" role="alert"></p>
  <button class="btn" id="lockOk">Unlock</button>
  <button class="link" id="lockCancel">Cancel</button>
</div>

<div id="installGuide" role="dialog" aria-modal="true" aria-labelledby="guideTitle">
  <div class="sheet">
    <h3 id="guideTitle">Install <span translate="no">ioNote</span></h3>
    <ol id="guideSteps"></ol>
    <button class="btn" id="guideClose">Got it</button>
  </div>
</div>

<div id="actions" role="dialog" aria-modal="true" aria-labelledby="actTitle">
  <div class="sheet">
    <p class="sheet-title" id="actTitle"></p>
    <button class="row" id="actPin"><b>Pin</b></button>
    <button class="row danger" id="actDel"><b>Delete</b></button>
    <button class="link" id="actCancel">Cancel</button>
  </div>
</div>

<div id="toast" role="status" aria-live="polite"><span id="toastMsg"></span><button id="toastAct" hidden></button></div>

<script src="version.js"></script>
<script src="app.js"></script>
</body>
</html>