101 lines
3.6 KiB
HTML
101 lines
3.6 KiB
HTML
|
<!doctype html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Notepad</title>
|
||
|
|
<style>
|
||
|
|
:root { color-scheme: light dark;
|
||
|
|
--bg:#0e131c; --panel:#141a24; --line:rgba(255,255,255,.09);
|
||
|
|
--ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d; }
|
||
|
|
@media (prefers-color-scheme: light) {
|
||
|
|
:root { --bg:#f8faff; --panel:#ffffff; --line:rgba(0,0,0,.10);
|
||
|
|
--ink:#1a1f2b; --mut:#5c6577; --dim:#8a93a5; }
|
||
|
|
}
|
||
|
|
* { box-sizing: border-box; }
|
||
|
|
html, body { margin: 0; height: 100%; }
|
||
|
|
body { background: var(--bg); color: var(--ink);
|
||
|
|
font: 14px/1.55 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||
|
|
display: flex; flex-direction: column; }
|
||
|
|
header { display: flex; align-items: center; justify-content: space-between;
|
||
|
|
padding: 10px 14px; border-bottom: 1px solid var(--line);
|
||
|
|
background: var(--panel); }
|
||
|
|
header .t { font-weight: 600; letter-spacing: .2px; display: flex; gap: 8px; align-items: center; }
|
||
|
|
header .t .em { font-size: 15px; }
|
||
|
|
header .m { color: var(--dim); font-size: 11.5px; font-variant-numeric: tabular-nums; }
|
||
|
|
textarea {
|
||
|
|
flex: 1; width: 100%; padding: 14px 16px; border: none; outline: none; resize: none;
|
||
|
|
background: transparent; color: var(--ink);
|
||
|
|
font: 13.5px/1.65 ui-monospace, "Cascadia Code", Consolas, monospace;
|
||
|
|
}
|
||
|
|
textarea::placeholder { color: var(--dim); }
|
||
|
|
footer { padding: 6px 14px 10px; border-top: 1px solid var(--line);
|
||
|
|
color: var(--dim); font-size: 11px; display: flex; justify-content: space-between; }
|
||
|
|
footer .l { display: flex; gap: 10px; }
|
||
|
|
footer .l b { color: var(--mut); font-weight: 500; }
|
||
|
|
footer button { border: none; background: transparent; color: var(--mut);
|
||
|
|
cursor: pointer; font: inherit; padding: 0; }
|
||
|
|
footer button:hover { color: var(--acid); }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<header>
|
||
|
|
<div class="t"><span class="em">📝</span> <span>Notepad</span></div>
|
||
|
|
<div class="m" id="status">saved</div>
|
||
|
|
</header>
|
||
|
|
<textarea id="pad" placeholder="Notes. Autosaves as you type."
|
||
|
|
spellcheck="false" autofocus></textarea>
|
||
|
|
<footer>
|
||
|
|
<div class="l"><b><span id="cchars">0</span></b> chars · <b><span id="cwords">0</span></b> words</div>
|
||
|
|
<button id="clear" title="Clear all notes">clear</button>
|
||
|
|
</footer>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
const pad = document.getElementById("pad");
|
||
|
|
const status = document.getElementById("status");
|
||
|
|
const cchars = document.getElementById("cchars");
|
||
|
|
const cwords = document.getElementById("cwords");
|
||
|
|
|
||
|
|
function updateCounts() {
|
||
|
|
const v = pad.value;
|
||
|
|
cchars.textContent = v.length;
|
||
|
|
cwords.textContent = v.trim() ? v.trim().split(/\s+/).length : 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Load previous text on open.
|
||
|
|
(async () => {
|
||
|
|
try {
|
||
|
|
const text = await window.silentmode.storage.get("text", "");
|
||
|
|
pad.value = text || "";
|
||
|
|
updateCounts();
|
||
|
|
} catch (e) { console.warn("load failed:", e); }
|
||
|
|
})();
|
||
|
|
|
||
|
|
// Debounced autosave.
|
||
|
|
let saveTimer = null;
|
||
|
|
pad.addEventListener("input", () => {
|
||
|
|
updateCounts();
|
||
|
|
status.textContent = "saving…";
|
||
|
|
clearTimeout(saveTimer);
|
||
|
|
saveTimer = setTimeout(async () => {
|
||
|
|
try {
|
||
|
|
await window.silentmode.storage.set("text", pad.value);
|
||
|
|
status.textContent = "saved";
|
||
|
|
} catch (e) {
|
||
|
|
status.textContent = "save failed";
|
||
|
|
console.warn("save failed:", e);
|
||
|
|
}
|
||
|
|
}, 400);
|
||
|
|
});
|
||
|
|
|
||
|
|
document.getElementById("clear").addEventListener("click", async () => {
|
||
|
|
if (!pad.value) return;
|
||
|
|
if (!confirm("Clear all notes?")) return;
|
||
|
|
pad.value = "";
|
||
|
|
updateCounts();
|
||
|
|
try { await window.silentmode.storage.set("text", ""); status.textContent = "saved"; } catch {}
|
||
|
|
pad.focus();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|