963 lines
39 KiB
HTML
963 lines
39 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>noted.</title>
|
|
<link rel="icon" href="fry.png" type="image/png">
|
|
<link rel="manifest" href="manifest.json">
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<style>
|
|
:root {
|
|
--bg: #fff;
|
|
--fg: #000;
|
|
--accent: #FFD700;
|
|
--accent-hover: #FFA500;
|
|
--controls-bg: #f1f1f1;
|
|
--border: #e0e0e0;
|
|
--sidebar-bg: #fff;
|
|
--sidebar-hover: #f5f5f5;
|
|
--sidebar-active-bg: #FFD700;
|
|
--sidebar-active-fg: #000;
|
|
--input-bg: #fff;
|
|
--muted: #999;
|
|
}
|
|
[data-dark] {
|
|
--bg: #1a1a1a;
|
|
--fg: #e0e0e0;
|
|
--accent: #c9a800;
|
|
--accent-hover: #a88800;
|
|
--controls-bg: #222;
|
|
--border: #333;
|
|
--sidebar-bg: #1e1e1e;
|
|
--sidebar-hover: #272727;
|
|
--sidebar-active-bg: #3a2e00;
|
|
--sidebar-active-fg: #FFD700;
|
|
--input-bg: #2a2a2a;
|
|
--muted: #666;
|
|
}
|
|
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
body {
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
font-family: 'Roboto Mono', monospace;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.top-row {
|
|
display: flex;
|
|
flex: 1;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ── Left sidebar ── */
|
|
.sidebar {
|
|
width: 220px;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--sidebar-bg);
|
|
border-right: 1px solid var(--border);
|
|
transition: width 0.2s;
|
|
overflow: hidden;
|
|
}
|
|
.sidebar.closed { width: 42px; }
|
|
|
|
.sidebar-top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 8px;
|
|
border-bottom: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
height: 44px;
|
|
}
|
|
.sidebar.closed .sidebar-top { justify-content: center; }
|
|
|
|
.sidebar-title {
|
|
font-size: 13px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.05em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
opacity: 1;
|
|
transition: opacity 0.15s;
|
|
}
|
|
.sidebar.closed .sidebar-title { opacity: 0; width: 0; }
|
|
|
|
.notes-list {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.note-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 9px 10px;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid var(--border);
|
|
gap: 4px;
|
|
min-height: 38px;
|
|
}
|
|
.note-item:hover { background: var(--sidebar-hover); }
|
|
.note-item.active {
|
|
background: var(--sidebar-active-bg);
|
|
color: var(--sidebar-active-fg);
|
|
}
|
|
|
|
.note-item-name {
|
|
flex: 1;
|
|
font-size: 12px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
.sidebar.closed .note-item-name { display: none; }
|
|
|
|
/* inline rename input */
|
|
.note-rename-input {
|
|
flex: 1;
|
|
font-size: 12px;
|
|
font-family: 'Roboto Mono', monospace;
|
|
border: none;
|
|
outline: 1px solid var(--accent);
|
|
border-radius: 3px;
|
|
padding: 1px 4px;
|
|
background: var(--input-bg);
|
|
color: var(--fg);
|
|
}
|
|
|
|
.note-del {
|
|
background: transparent;
|
|
border: none;
|
|
padding: 0 2px;
|
|
font-size: 13px;
|
|
opacity: 0;
|
|
color: var(--fg);
|
|
cursor: pointer;
|
|
flex-shrink: 0;
|
|
}
|
|
.note-item:hover .note-del { opacity: 0.4; }
|
|
.note-del:hover { opacity: 1 !important; }
|
|
.sidebar.closed .note-del { display: none; }
|
|
|
|
.sidebar-bottom {
|
|
padding: 8px;
|
|
border-top: 1px solid var(--border);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── Icon buttons ── */
|
|
.icon-btn {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
padding: 4px 6px;
|
|
border-radius: 4px;
|
|
color: var(--fg);
|
|
line-height: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.icon-btn:hover { background: var(--sidebar-hover); }
|
|
|
|
.sidebar-bottom-btn {
|
|
width: 100%;
|
|
padding: 7px;
|
|
background: none;
|
|
border: 1px solid var(--border);
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
font-size: 18px;
|
|
color: var(--fg);
|
|
font-family: 'Roboto Mono', monospace;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
.sidebar-bottom-btn:hover { background: var(--sidebar-hover); }
|
|
.sidebar.closed .btn-label { display: none; }
|
|
|
|
/* ── Main area ── */
|
|
.main {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
/* ── Editor title bar ── */
|
|
.editor-title-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 14px;
|
|
height: 44px;
|
|
border-bottom: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
gap: 10px;
|
|
}
|
|
#note-title-display {
|
|
flex: 1;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
color: var(--fg);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
cursor: text;
|
|
opacity: 0.75;
|
|
}
|
|
#note-title-display:hover { opacity: 1; }
|
|
#note-title-input {
|
|
flex: 1;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
font-family: 'Roboto Mono', monospace;
|
|
border: none;
|
|
outline: none;
|
|
background: transparent;
|
|
color: var(--fg);
|
|
display: none;
|
|
}
|
|
|
|
/* floating share + dark toggle */
|
|
.float-actions {
|
|
display: flex;
|
|
gap: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
.float-btn {
|
|
padding: 5px 12px;
|
|
background: var(--accent);
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-family: 'Roboto Mono', monospace;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #000;
|
|
}
|
|
.float-btn:hover { background: var(--accent-hover); }
|
|
|
|
.save-flash {
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
opacity: 0;
|
|
transition: opacity 0.4s;
|
|
pointer-events: none;
|
|
white-space: nowrap;
|
|
}
|
|
.save-flash.show { opacity: 1; }
|
|
|
|
/* ── Editor ── */
|
|
.notepad {
|
|
flex: 1;
|
|
width: 100%;
|
|
padding: 40px 20px 14px;
|
|
font-size: 24px;
|
|
border: none;
|
|
outline: none;
|
|
resize: none;
|
|
line-height: 1.5;
|
|
font-family: 'Roboto Mono', monospace;
|
|
color: var(--fg);
|
|
background: var(--bg);
|
|
}
|
|
.md-view {
|
|
flex: 1;
|
|
padding: 40px 20px 14px;
|
|
overflow-y: auto;
|
|
background: var(--bg);
|
|
color: var(--fg);
|
|
font-family: 'Roboto', sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.7;
|
|
display: none;
|
|
}
|
|
.md-view h1,.md-view h2,.md-view h3 { margin: 16px 0 8px; border-bottom: 1px solid var(--border); padding-bottom: 4px; }
|
|
.md-view p { margin: 8px 0; }
|
|
.md-view ul,.md-view ol { margin: 8px 0 8px 20px; }
|
|
.md-view code { background: var(--controls-bg); padding: 1px 5px; border-radius: 3px; font-family: 'Roboto Mono', monospace; font-size: 14px; }
|
|
.md-view pre { background: var(--controls-bg); padding: 12px; border-radius: 4px; overflow-x: auto; margin: 8px 0; }
|
|
.md-view pre code { background: none; padding: 0; }
|
|
.md-view blockquote { border-left: 3px solid var(--accent); padding-left: 12px; color: var(--muted); margin: 8px 0; }
|
|
.md-view a { color: var(--accent); }
|
|
|
|
.canvas-wrap {
|
|
flex: 1;
|
|
display: none;
|
|
position: relative;
|
|
background: var(--bg);
|
|
}
|
|
#drawing-canvas { width: 100%; height: 100%; cursor: crosshair; display: block; }
|
|
|
|
/* ── Drawing controls ── */
|
|
.draw-controls {
|
|
display: none;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
padding: 7px 10px;
|
|
background: var(--controls-bg);
|
|
border-top: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
.draw-controls.visible { display: flex; }
|
|
|
|
/* ── Bottom controls ── */
|
|
.controls {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
padding: 7px 10px;
|
|
background: var(--controls-bg);
|
|
border-top: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
.cgroup { display: flex; align-items: center; gap: 5px; }
|
|
.cgroup label { font-size: 11px; color: var(--muted); }
|
|
.controls-right { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; }
|
|
|
|
button.ctrl {
|
|
padding: 5px 10px;
|
|
background: var(--accent);
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
font-family: 'Roboto Mono', monospace;
|
|
font-size: 12px;
|
|
color: #000;
|
|
}
|
|
button.ctrl:hover { background: var(--accent-hover); }
|
|
button.ctrl.on { background: var(--accent-hover); box-shadow: inset 0 2px 3px rgba(0,0,0,0.2); }
|
|
|
|
select {
|
|
padding: 4px 6px;
|
|
border-radius: 4px;
|
|
border: 1px solid var(--border);
|
|
background: var(--input-bg);
|
|
color: var(--fg);
|
|
font-family: 'Roboto Mono', monospace;
|
|
font-size: 12px;
|
|
}
|
|
input[type="color"] {
|
|
width: 36px; height: 28px; padding: 2px;
|
|
border-radius: 4px; border: 1px solid var(--border);
|
|
background: var(--input-bg); cursor: pointer;
|
|
}
|
|
input[type="range"] { width: 70px; }
|
|
|
|
/* ── Status bar ── */
|
|
.status-bar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 2px 12px;
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
background: var(--controls-bg);
|
|
border-top: 1px solid var(--border);
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── Share modal ── */
|
|
.overlay {
|
|
position: fixed; inset: 0;
|
|
background: rgba(0,0,0,0.5);
|
|
display: flex; align-items: center; justify-content: center;
|
|
z-index: 999;
|
|
}
|
|
.modal {
|
|
background: var(--bg); color: var(--fg);
|
|
border-radius: 8px; padding: 22px;
|
|
width: 380px; max-width: 92vw;
|
|
}
|
|
.modal h3 { margin-bottom: 10px; }
|
|
.modal p { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
|
|
.modal input[type="text"] {
|
|
width: 100%; padding: 7px;
|
|
border: 1px solid var(--border); border-radius: 4px;
|
|
font-family: 'Roboto Mono', monospace; font-size: 12px;
|
|
background: var(--input-bg); color: var(--fg); margin-bottom: 12px;
|
|
}
|
|
.modal-btns { display: flex; gap: 8px; justify-content: flex-end; }
|
|
|
|
/* ── Share read-only ── */
|
|
.share-page { padding: 40px; max-width: 760px; margin: 0 auto; overflow-y: auto; height: 100vh; }
|
|
.share-page h1 { font-size: 26px; margin-bottom: 20px; }
|
|
.share-page .content { font-family: 'Roboto', sans-serif; font-size: 16px; line-height: 1.7; }
|
|
.share-page .content h1,.share-page .content h2,.share-page .content h3 { margin: 16px 0 8px; }
|
|
.share-page .content code { background: var(--controls-bg); padding: 1px 5px; border-radius: 3px; }
|
|
.share-page .content pre { background: var(--controls-bg); padding: 12px; border-radius: 4px; overflow-x: auto; margin: 8px 0; }
|
|
.share-page .content blockquote { border-left: 3px solid var(--accent); padding-left: 12px; color: var(--muted); }
|
|
.share-banner { font-size: 12px; color: var(--muted); margin-bottom: 24px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="top-row">
|
|
<!-- Left sidebar -->
|
|
<div class="sidebar" id="sidebar">
|
|
<div class="sidebar-top">
|
|
<button class="icon-btn" id="sidebar-toggle" title="Toggle sidebar">☰</button>
|
|
<span class="sidebar-title">noted.</span>
|
|
<button class="icon-btn" id="new-note-btn" title="New note">+</button>
|
|
</div>
|
|
<div class="notes-list" id="notes-list"></div>
|
|
<div class="sidebar-bottom">
|
|
<button class="sidebar-bottom-btn" id="dark-toggle" title="Toggle dark mode">
|
|
<span id="dark-icon">🌙</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main editor -->
|
|
<div class="main" id="main">
|
|
<div class="editor-title-bar">
|
|
<span id="note-title-display">Untitled</span>
|
|
<input type="text" id="note-title-input" placeholder="Note title">
|
|
<span class="save-flash" id="save-flash">✓ saved</span>
|
|
<div class="float-actions">
|
|
<button class="float-btn" id="share-btn">Share</button>
|
|
</div>
|
|
</div>
|
|
|
|
<textarea class="notepad" id="notepad" placeholder="Start typing..."></textarea>
|
|
<div class="md-view" id="md-view"></div>
|
|
<div class="canvas-wrap" id="canvas-wrap">
|
|
<canvas id="drawing-canvas"></canvas>
|
|
</div>
|
|
</div>
|
|
</div><!-- end .top-row -->
|
|
|
|
<!-- Drawing controls -->
|
|
<div class="draw-controls" id="draw-controls">
|
|
<div class="cgroup">
|
|
<label>Size</label>
|
|
<input type="range" id="pen-size" min="1" max="30" value="3">
|
|
<span id="pen-size-val">3px</span>
|
|
</div>
|
|
<div class="cgroup">
|
|
<label>Color</label>
|
|
<input type="color" id="pen-color" value="#000000">
|
|
</div>
|
|
<button class="ctrl" id="eraser-btn">Eraser</button>
|
|
<button class="ctrl" id="undo-btn">↩ Undo</button>
|
|
<button class="ctrl" id="redo-btn">↪ Redo</button>
|
|
<button class="ctrl" id="clear-canvas-btn">Clear</button>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<div class="cgroup">
|
|
<label>Font</label>
|
|
<select id="font-family">
|
|
<option value="'Roboto Mono', monospace">Roboto Mono</option>
|
|
<option value="'Roboto', sans-serif">Roboto</option>
|
|
<option value="'Open Sans', sans-serif">Open Sans</option>
|
|
<option value="'Courier Prime', monospace">Courier Prime</option>
|
|
<option value="Arial, sans-serif">Arial</option>
|
|
<option value="'Times New Roman', serif">Times New Roman</option>
|
|
</select>
|
|
</div>
|
|
<div class="cgroup">
|
|
<label>Size</label>
|
|
<button class="ctrl" id="dec-font">A-</button>
|
|
<span id="font-size-label" style="font-size:12px">24px</span>
|
|
<button class="ctrl" id="inc-font">A+</button>
|
|
</div>
|
|
<div class="cgroup">
|
|
<label>Color</label>
|
|
<input type="color" id="text-color" value="#000000">
|
|
</div>
|
|
<div class="controls-right">
|
|
<button class="ctrl" id="md-btn" title="Markdown preview (Ctrl+M)">MD</button>
|
|
<button class="ctrl" id="draw-btn" title="Draw mode (Ctrl+D)">Draw</button>
|
|
<button class="ctrl" id="export-btn">Export</button>
|
|
<button class="ctrl" id="save-btn" title="Save (Ctrl+S)">Save</button>
|
|
<button class="ctrl" id="clear-btn">Clear</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status-bar">
|
|
<span id="word-count">0 words · 0 chars</span>
|
|
<span id="sync-status"></span>
|
|
</div>
|
|
|
|
<script>
|
|
(() => {
|
|
const USER_ID = (() => {
|
|
let id = localStorage.getItem('noted_uid');
|
|
if (!id) { id = crypto.randomUUID(); localStorage.setItem('noted_uid', id); }
|
|
return id;
|
|
})();
|
|
|
|
let notes = JSON.parse(localStorage.getItem('noted_notes') || '{}');
|
|
let currentId = null;
|
|
let dark = localStorage.getItem('noted_dark') === 'true';
|
|
let isMd = false, isDraw = false, isEraser = false;
|
|
let ctx = null;
|
|
let undoStack = [], redoStack = [];
|
|
let autoSaveTimer = null, syncTimer = null, flashTimer = null;
|
|
|
|
const $ = id => document.getElementById(id);
|
|
const notepad = $('notepad');
|
|
const mdView = $('md-view');
|
|
const canvasWrap = $('canvas-wrap');
|
|
const canvas = $('drawing-canvas');
|
|
const drawCtrls = $('draw-controls');
|
|
const sidebar = $('sidebar');
|
|
const notesList = $('notes-list');
|
|
const saveFlash = $('save-flash');
|
|
const wordCount = $('word-count');
|
|
const syncStatus = $('sync-status');
|
|
const titleDisplay = $('note-title-display');
|
|
const titleInput = $('note-title-input');
|
|
|
|
// ── Title display & rename ────────────────────────────────────────────────
|
|
function setTitleDisplay(title) {
|
|
titleDisplay.textContent = title || 'Untitled';
|
|
}
|
|
|
|
titleDisplay.addEventListener('click', () => {
|
|
titleDisplay.style.display = 'none';
|
|
titleInput.style.display = '';
|
|
titleInput.value = notes[currentId]?.title || '';
|
|
titleInput.focus();
|
|
titleInput.select();
|
|
});
|
|
|
|
titleInput.addEventListener('blur', commitTitleInput);
|
|
titleInput.addEventListener('keydown', e => {
|
|
if (e.key === 'Enter') titleInput.blur();
|
|
if (e.key === 'Escape') { renderTitle(); titleInput.style.display = 'none'; titleDisplay.style.display = ''; }
|
|
});
|
|
|
|
function commitTitleInput() {
|
|
if (!notes[currentId]) return;
|
|
notes[currentId].title = titleInput.value.trim();
|
|
notes[currentId].updatedAt = Date.now();
|
|
persist();
|
|
renderTitle();
|
|
renderList();
|
|
titleInput.style.display = 'none';
|
|
titleDisplay.style.display = '';
|
|
scheduleSync();
|
|
}
|
|
|
|
function renderTitle() {
|
|
setTitleDisplay(notes[currentId]?.title || '');
|
|
}
|
|
|
|
function autoTitleFromContent() {
|
|
const n = notes[currentId];
|
|
if (!n) return;
|
|
const firstLine = notepad.value.split('\n')[0].trim();
|
|
n.title = firstLine;
|
|
n.updatedAt = Date.now();
|
|
renderTitle();
|
|
renderList();
|
|
}
|
|
|
|
// ── Persist ──────────────────────────────────────────────────────────────
|
|
function persist() { localStorage.setItem('noted_notes', JSON.stringify(notes)); }
|
|
|
|
function flashSaved() {
|
|
saveFlash.classList.add('show');
|
|
clearTimeout(flashTimer);
|
|
flashTimer = setTimeout(() => saveFlash.classList.remove('show'), 1800);
|
|
}
|
|
|
|
function updateWordCount() {
|
|
const t = notepad.value;
|
|
const w = t.trim() ? t.trim().split(/\s+/).length : 0;
|
|
wordCount.textContent = `${w} word${w !== 1 ? 's' : ''} · ${t.length} char${t.length !== 1 ? 's' : ''}`;
|
|
}
|
|
|
|
// ── Dark mode ─────────────────────────────────────────────────────────────
|
|
function applyDark() {
|
|
document.documentElement.toggleAttribute('data-dark', dark);
|
|
$('dark-icon').textContent = dark ? '☀️' : '🌙';
|
|
}
|
|
function toggleDark() { dark = !dark; localStorage.setItem('noted_dark', dark); applyDark(); }
|
|
$('dark-toggle').addEventListener('click', toggleDark);
|
|
|
|
// ── Sidebar ──────────────────────────────────────────────────────────────
|
|
let sidebarOpen = localStorage.getItem('noted_sidebar') !== 'false';
|
|
function applySidebar() { sidebar.classList.toggle('closed', !sidebarOpen); }
|
|
$('sidebar-toggle').addEventListener('click', () => {
|
|
sidebarOpen = !sidebarOpen;
|
|
localStorage.setItem('noted_sidebar', sidebarOpen);
|
|
applySidebar();
|
|
});
|
|
|
|
// ── Notes list ───────────────────────────────────────────────────────────
|
|
function renderList() {
|
|
const sorted = Object.values(notes).sort((a, b) => b.updatedAt - a.updatedAt);
|
|
notesList.innerHTML = '';
|
|
for (const n of sorted) {
|
|
const el = document.createElement('div');
|
|
el.className = 'note-item' + (n.id === currentId ? ' active' : '');
|
|
el.dataset.id = n.id;
|
|
|
|
const nameSpan = document.createElement('span');
|
|
nameSpan.className = 'note-item-name';
|
|
nameSpan.textContent = n.title || 'Untitled';
|
|
|
|
const delBtn = document.createElement('button');
|
|
delBtn.className = 'note-del';
|
|
delBtn.textContent = '✕';
|
|
delBtn.title = 'Delete';
|
|
delBtn.addEventListener('click', e => { e.stopPropagation(); deleteNote(n.id); });
|
|
|
|
el.appendChild(nameSpan);
|
|
el.appendChild(delBtn);
|
|
|
|
// single click = open, double click = rename
|
|
el.addEventListener('click', () => openNote(n.id));
|
|
el.addEventListener('dblclick', e => { e.stopPropagation(); startRename(el, n.id); });
|
|
|
|
notesList.appendChild(el);
|
|
}
|
|
}
|
|
|
|
function startRename(el, id) {
|
|
const nameSpan = el.querySelector('.note-item-name');
|
|
const input = document.createElement('input');
|
|
input.className = 'note-rename-input';
|
|
input.value = notes[id]?.title || '';
|
|
el.replaceChild(input, nameSpan);
|
|
input.focus();
|
|
input.select();
|
|
|
|
function commit() {
|
|
const val = input.value.trim();
|
|
if (notes[id]) { notes[id].title = val; notes[id].updatedAt = Date.now(); persist(); scheduleSync(); }
|
|
renderList();
|
|
}
|
|
input.addEventListener('blur', commit);
|
|
input.addEventListener('keydown', e => {
|
|
if (e.key === 'Enter') { e.preventDefault(); input.blur(); }
|
|
if (e.key === 'Escape') { renderList(); }
|
|
e.stopPropagation();
|
|
});
|
|
}
|
|
|
|
// ── Note ops ─────────────────────────────────────────────────────────────
|
|
function createNote() {
|
|
const id = crypto.randomUUID();
|
|
notes[id] = { id, title: '', content: '', drawing: null, fontSize: '24px', fontFamily: "'Roboto Mono', monospace", textColor: '#000000', createdAt: Date.now(), updatedAt: Date.now() };
|
|
persist();
|
|
openNote(id);
|
|
// immediately enter rename on the new item
|
|
setTimeout(() => {
|
|
const el = notesList.querySelector(`[data-id="${id}"]`);
|
|
if (el) startRename(el, id);
|
|
}, 50);
|
|
scheduleSync();
|
|
}
|
|
|
|
function openNote(id) {
|
|
if (currentId === id) return;
|
|
if (currentId) saveNote(true);
|
|
currentId = id;
|
|
const n = notes[id];
|
|
notepad.value = n.content || '';
|
|
notepad.style.fontSize = n.fontSize || '24px';
|
|
notepad.style.fontFamily = n.fontFamily || "'Roboto Mono', monospace";
|
|
notepad.style.color = n.textColor || '#000000';
|
|
$('font-size-label').textContent = n.fontSize || '24px';
|
|
$('font-family').value = n.fontFamily || "'Roboto Mono', monospace";
|
|
$('text-color').value = n.textColor || '#000000';
|
|
updateWordCount();
|
|
renderMd();
|
|
renderTitle();
|
|
undoStack = []; redoStack = [];
|
|
if (ctx) {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
if (n.drawing) { const img = new Image(); img.onload = () => ctx.drawImage(img, 0, 0); img.src = n.drawing; }
|
|
}
|
|
localStorage.setItem('noted_last', id);
|
|
renderList();
|
|
if (!sidebarOpen) notepad.focus();
|
|
}
|
|
|
|
function saveNote(silent = false) {
|
|
if (!currentId || !notes[currentId]) return;
|
|
const n = notes[currentId];
|
|
n.content = notepad.value;
|
|
n.fontSize = notepad.style.fontSize || '24px';
|
|
n.fontFamily = notepad.style.fontFamily || "'Roboto Mono', monospace";
|
|
n.textColor = notepad.style.color || '#000000';
|
|
n.updatedAt = Date.now();
|
|
if (ctx && isDraw) n.drawing = canvas.toDataURL();
|
|
persist();
|
|
if (!silent) { flashSaved(); renderList(); scheduleSync(); }
|
|
}
|
|
|
|
function deleteNote(id) {
|
|
if (!confirm('Delete this note?')) return;
|
|
delete notes[id];
|
|
persist();
|
|
syncDelete(id);
|
|
if (currentId === id) {
|
|
currentId = null;
|
|
const ids = Object.keys(notes);
|
|
if (ids.length) openNote(ids[0]); else createNote();
|
|
} else renderList();
|
|
}
|
|
|
|
$('new-note-btn').addEventListener('click', createNote);
|
|
|
|
// ── Auto-save ─────────────────────────────────────────────────────────────
|
|
function scheduleAutoSave() {
|
|
clearTimeout(autoSaveTimer);
|
|
autoSaveTimer = setTimeout(() => saveNote(), 3000);
|
|
}
|
|
notepad.addEventListener('input', () => { updateWordCount(); renderMd(); autoTitleFromContent(); scheduleAutoSave(); });
|
|
|
|
// ── Markdown ──────────────────────────────────────────────────────────────
|
|
function renderMd() { if (isMd) mdView.innerHTML = marked.parse(notepad.value || ''); }
|
|
|
|
$('md-btn').addEventListener('click', () => {
|
|
isMd = !isMd;
|
|
$('md-btn').classList.toggle('on', isMd);
|
|
notepad.style.display = isMd ? 'none' : '';
|
|
mdView.style.display = isMd ? 'block' : 'none';
|
|
if (isMd) renderMd();
|
|
});
|
|
|
|
// ── Font controls ─────────────────────────────────────────────────────────
|
|
$('dec-font').addEventListener('click', () => {
|
|
const sz = parseInt(getComputedStyle(notepad).fontSize);
|
|
if (sz > 10) { const v = (sz - 2) + 'px'; notepad.style.fontSize = v; $('font-size-label').textContent = v; scheduleAutoSave(); }
|
|
});
|
|
$('inc-font').addEventListener('click', () => {
|
|
const sz = parseInt(getComputedStyle(notepad).fontSize);
|
|
const v = (sz + 2) + 'px'; notepad.style.fontSize = v; $('font-size-label').textContent = v; scheduleAutoSave();
|
|
});
|
|
$('font-family').addEventListener('change', () => { notepad.style.fontFamily = $('font-family').value; scheduleAutoSave(); });
|
|
$('text-color').addEventListener('input', () => { notepad.style.color = $('text-color').value; scheduleAutoSave(); });
|
|
|
|
// ── Save / Clear / Export ─────────────────────────────────────────────────
|
|
$('save-btn').addEventListener('click', () => saveNote());
|
|
$('clear-btn').addEventListener('click', () => {
|
|
if (!confirm('Clear this note?')) return;
|
|
notepad.value = ''; renderMd(); updateWordCount(); saveNote();
|
|
});
|
|
$('export-btn').addEventListener('click', () => {
|
|
const n = notes[currentId]; if (!n) return;
|
|
const text = (n.title ? n.title + '\n' + '='.repeat(n.title.length) + '\n\n' : '') + n.content;
|
|
const a = Object.assign(document.createElement('a'), {
|
|
href: URL.createObjectURL(new Blob([text], { type: 'text/plain' })),
|
|
download: (n.title || 'note') + '.txt'
|
|
});
|
|
a.click(); URL.revokeObjectURL(a.href);
|
|
});
|
|
|
|
// ── Drawing ───────────────────────────────────────────────────────────────
|
|
function initCanvas() {
|
|
const resize = () => {
|
|
const data = ctx ? canvas.toDataURL() : null;
|
|
canvas.width = canvasWrap.clientWidth;
|
|
canvas.height = canvasWrap.clientHeight;
|
|
if (data && ctx) { const img = new Image(); img.onload = () => ctx.drawImage(img, 0, 0); img.src = data; }
|
|
};
|
|
resize();
|
|
ctx = canvas.getContext('2d');
|
|
const n = notes[currentId];
|
|
if (n?.drawing) { const img = new Image(); img.onload = () => ctx.drawImage(img, 0, 0); img.src = n.drawing; }
|
|
window.addEventListener('resize', resize);
|
|
|
|
let drawing = false;
|
|
const pt = e => { const r = canvas.getBoundingClientRect(); const s = e.touches?.[0] ?? e; return [s.clientX - r.left, s.clientY - r.top]; };
|
|
|
|
canvas.addEventListener('mousedown', start); canvas.addEventListener('touchstart', start, { passive: false });
|
|
canvas.addEventListener('mousemove', move); canvas.addEventListener('touchmove', move, { passive: false });
|
|
window.addEventListener('mouseup', stop); window.addEventListener('touchend', stop);
|
|
|
|
function start(e) { drawing = true; pushUndo(); ctx.beginPath(); const [x,y] = pt(e); ctx.moveTo(x,y); e.preventDefault?.(); }
|
|
function move(e) {
|
|
if (!drawing) return;
|
|
ctx.lineWidth = $('pen-size').value; ctx.lineCap = 'round';
|
|
ctx.globalCompositeOperation = isEraser ? 'destination-out' : 'source-over';
|
|
ctx.strokeStyle = isEraser ? 'rgba(0,0,0,1)' : $('pen-color').value;
|
|
const [x,y] = pt(e); ctx.lineTo(x,y); ctx.stroke(); e.preventDefault?.();
|
|
}
|
|
function stop() {
|
|
if (!drawing) return; drawing = false;
|
|
ctx.globalCompositeOperation = 'source-over';
|
|
if (notes[currentId]) { notes[currentId].drawing = canvas.toDataURL(); persist(); }
|
|
}
|
|
}
|
|
|
|
function pushUndo() { undoStack.push(canvas.toDataURL()); if (undoStack.length > 40) undoStack.shift(); redoStack = []; }
|
|
|
|
$('draw-btn').addEventListener('click', () => {
|
|
isDraw = !isDraw;
|
|
$('draw-btn').classList.toggle('on', isDraw);
|
|
canvasWrap.style.display = isDraw ? 'block' : 'none';
|
|
drawCtrls.classList.toggle('visible', isDraw);
|
|
notepad.style.display = (!isDraw && !isMd) ? '' : 'none';
|
|
mdView.style.display = (!isDraw && isMd) ? 'block' : 'none';
|
|
if (isDraw && !ctx) initCanvas();
|
|
});
|
|
|
|
$('pen-size').addEventListener('input', () => { $('pen-size-val').textContent = $('pen-size').value + 'px'; });
|
|
$('eraser-btn').addEventListener('click', () => {
|
|
isEraser = !isEraser;
|
|
$('eraser-btn').classList.toggle('on', isEraser);
|
|
$('eraser-btn').textContent = isEraser ? 'Pen' : 'Eraser';
|
|
});
|
|
$('undo-btn').addEventListener('click', () => {
|
|
if (!undoStack.length) return;
|
|
redoStack.push(canvas.toDataURL());
|
|
const img = new Image(); img.onload = () => { ctx.clearRect(0,0,canvas.width,canvas.height); ctx.drawImage(img,0,0); }; img.src = undoStack.pop();
|
|
});
|
|
$('redo-btn').addEventListener('click', () => {
|
|
if (!redoStack.length) return;
|
|
undoStack.push(canvas.toDataURL());
|
|
const img = new Image(); img.onload = () => { ctx.clearRect(0,0,canvas.width,canvas.height); ctx.drawImage(img,0,0); }; img.src = redoStack.pop();
|
|
});
|
|
$('clear-canvas-btn').addEventListener('click', () => {
|
|
if (!confirm('Clear canvas?')) return;
|
|
pushUndo(); ctx.clearRect(0,0,canvas.width,canvas.height);
|
|
if (notes[currentId]) { notes[currentId].drawing = null; persist(); }
|
|
});
|
|
|
|
// ── Keyboard shortcuts ────────────────────────────────────────────────────
|
|
document.addEventListener('keydown', e => {
|
|
if (!(e.ctrlKey || e.metaKey)) return;
|
|
if (e.key === 's') { e.preventDefault(); saveNote(); }
|
|
if (e.key === 'd') { e.preventDefault(); $('draw-btn').click(); }
|
|
if (e.key === 'm') { e.preventDefault(); $('md-btn').click(); }
|
|
if (e.key === 'N' && e.shiftKey) { e.preventDefault(); createNote(); }
|
|
});
|
|
|
|
// ── Share ─────────────────────────────────────────────────────────────────
|
|
$('share-btn').addEventListener('click', async () => {
|
|
saveNote(true);
|
|
const n = notes[currentId]; if (!n) return;
|
|
try {
|
|
const res = await fetch('/api/notes/' + n.id + '/share', {
|
|
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ user_id: USER_ID })
|
|
});
|
|
const data = await res.json();
|
|
if (data.token) showShareModal(location.origin + '/share/' + data.token);
|
|
else alert('Share failed: ' + (data.error || 'unknown'));
|
|
} catch { alert('Share failed — are you online?'); }
|
|
});
|
|
|
|
function showShareModal(url) {
|
|
const ov = document.createElement('div');
|
|
ov.className = 'overlay';
|
|
ov.innerHTML = `<div class="modal">
|
|
<h3>Share Note</h3>
|
|
<p>Anyone with this link can view a read-only copy:</p>
|
|
<input type="text" value="${url}" readonly onclick="this.select()">
|
|
<div class="modal-btns">
|
|
<button class="ctrl" id="_copy">Copy Link</button>
|
|
<button class="ctrl" id="_close">Close</button>
|
|
</div>
|
|
</div>`;
|
|
document.body.appendChild(ov);
|
|
ov.querySelector('#_copy').addEventListener('click', async function() { await navigator.clipboard.writeText(url); this.textContent = 'Copied!'; });
|
|
ov.querySelector('#_close').addEventListener('click', () => ov.remove());
|
|
ov.addEventListener('click', e => { if (e.target === ov) ov.remove(); });
|
|
}
|
|
|
|
// ── D1 Sync ───────────────────────────────────────────────────────────────
|
|
function scheduleSync() { clearTimeout(syncTimer); syncTimer = setTimeout(syncCurrent, 5000); }
|
|
|
|
async function syncCurrent() {
|
|
const n = notes[currentId]; if (!n) return;
|
|
try {
|
|
syncStatus.textContent = 'syncing…';
|
|
await fetch('/api/notes/' + n.id, {
|
|
method: 'PUT', headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ ...n, user_id: USER_ID })
|
|
});
|
|
syncStatus.textContent = 'synced ✓';
|
|
} catch { syncStatus.textContent = 'offline'; }
|
|
}
|
|
|
|
async function syncDelete(id) {
|
|
try { await fetch('/api/notes/' + id, { method: 'DELETE', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ user_id: USER_ID }) }); }
|
|
catch { /* offline */ }
|
|
}
|
|
|
|
async function pullNotes() {
|
|
try {
|
|
const res = await fetch('/api/notes?user_id=' + USER_ID);
|
|
if (!res.ok) return;
|
|
const { notes: remote } = await res.json();
|
|
let changed = false;
|
|
for (const r of (remote || [])) {
|
|
const local = notes[r.id];
|
|
if (!local || r.updatedAt > local.updatedAt) { notes[r.id] = r; changed = true; }
|
|
}
|
|
if (changed) { persist(); renderList(); }
|
|
syncStatus.textContent = 'synced ✓';
|
|
} catch { syncStatus.textContent = 'offline'; }
|
|
}
|
|
|
|
// ── Share read-only view ──────────────────────────────────────────────────
|
|
async function loadShareView(token) {
|
|
document.body.innerHTML = '';
|
|
document.body.style.background = 'var(--bg)';
|
|
const page = document.createElement('div');
|
|
page.className = 'share-page';
|
|
try {
|
|
const res = await fetch('/api/share/' + token);
|
|
const { note, error } = await res.json();
|
|
if (error || !note) { page.innerHTML = '<p style="color:var(--muted)">Note not found.</p>'; }
|
|
else {
|
|
document.title = (note.title || 'noted.') + ' — noted.';
|
|
page.innerHTML = `<div class="share-banner">shared via noted.</div><h1>${note.title || 'Untitled'}</h1><div class="content">${marked.parse(note.content || '')}</div>`;
|
|
}
|
|
} catch { page.innerHTML = '<p>Failed to load note.</p>'; }
|
|
document.body.appendChild(page);
|
|
}
|
|
|
|
// ── Init ──────────────────────────────────────────────────────────────────
|
|
const shareMatch = location.pathname.match(/^\/share\/([a-zA-Z0-9]+)$/);
|
|
if (shareMatch) { loadShareView(shareMatch[1]); return; }
|
|
|
|
applyDark();
|
|
applySidebar();
|
|
|
|
const ids = Object.keys(notes);
|
|
if (!ids.length) { createNote(); }
|
|
else {
|
|
const lastId = localStorage.getItem('noted_last');
|
|
openNote(notes[lastId] ? lastId : ids[0]);
|
|
}
|
|
renderList();
|
|
pullNotes();
|
|
|
|
window.addEventListener('beforeunload', () => saveNote(true));
|
|
if ('serviceWorker' in navigator) navigator.serviceWorker.register('service-worker.js').catch(() => {});
|
|
})();
|
|
</script>
|
|
<script src="https://theradicalparty.com/footer.js" data-mode="pill" defer></script>
|
|
</body>
|
|
</html>
|