redesign: white left sidebar, no top bar, inline rename, floating share
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
King Omar
parent
abf25b34ae
commit
c8be1d679e
1 changed files with 320 additions and 262 deletions
582
index.html
582
index.html
|
|
@ -18,31 +18,27 @@
|
|||
--accent: #FFD700;
|
||||
--accent-hover: #FFA500;
|
||||
--controls-bg: #f1f1f1;
|
||||
--border: #ddd;
|
||||
--sidebar-bg: #f8f8f8;
|
||||
--sidebar-hover: #efefef;
|
||||
--border: #e0e0e0;
|
||||
--sidebar-bg: #fff;
|
||||
--sidebar-hover: #f5f5f5;
|
||||
--sidebar-active-bg: #FFD700;
|
||||
--sidebar-active-fg: #000;
|
||||
--input-bg: #fff;
|
||||
--muted: #888;
|
||||
--header-bg: #FFD700;
|
||||
--header-fg: #000;
|
||||
--muted: #999;
|
||||
}
|
||||
[data-dark] {
|
||||
--bg: #1a1a1a;
|
||||
--fg: #e0e0e0;
|
||||
--accent: #c9a800;
|
||||
--accent-hover: #a88800;
|
||||
--controls-bg: #252525;
|
||||
--border: #3a3a3a;
|
||||
--sidebar-bg: #1f1f1f;
|
||||
--sidebar-hover: #2a2a2a;
|
||||
--controls-bg: #222;
|
||||
--border: #333;
|
||||
--sidebar-bg: #1e1e1e;
|
||||
--sidebar-hover: #272727;
|
||||
--sidebar-active-bg: #3a2e00;
|
||||
--sidebar-active-fg: #FFD700;
|
||||
--input-bg: #2a2a2a;
|
||||
--muted: #666;
|
||||
--header-bg: #2a2200;
|
||||
--header-fg: #c9a800;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
|
@ -50,148 +46,209 @@
|
|||
body {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Header ── */
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 44px;
|
||||
padding: 0 10px;
|
||||
gap: 8px;
|
||||
background: var(--header-bg);
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.header-title {
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
flex: 1;
|
||||
color: var(--header-fg);
|
||||
}
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.save-indicator {
|
||||
font-size: 11px;
|
||||
color: var(--header-fg);
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.save-indicator.visible { opacity: 0.7; }
|
||||
|
||||
/* ── Buttons ── */
|
||||
button {
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
background: var(--accent);
|
||||
color: #000;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
button:hover { background: var(--accent-hover); }
|
||||
button.on { background: var(--accent-hover); box-shadow: inset 0 2px 3px rgba(0,0,0,0.2); }
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
padding: 4px 7px;
|
||||
font-size: 15px;
|
||||
}
|
||||
.btn-ghost:hover { background: rgba(0,0,0,0.1); }
|
||||
[data-dark] .btn-ghost:hover { background: rgba(255,255,255,0.1); }
|
||||
|
||||
/* ── Layout ── */
|
||||
.body {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ── Sidebar ── */
|
||||
/* ── Left sidebar ── */
|
||||
.sidebar {
|
||||
width: 190px;
|
||||
width: 220px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--sidebar-bg);
|
||||
border-right: 1px solid var(--border);
|
||||
overflow: hidden;
|
||||
transition: width 0.2s;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sidebar.closed { width: 0; }
|
||||
.sidebar.closed { width: 42px; }
|
||||
|
||||
.sidebar-top {
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px 8px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
height: 44px;
|
||||
}
|
||||
.sidebar-top button { width: 100%; text-align: left; }
|
||||
.notes-list { flex: 1; overflow-y: auto; }
|
||||
.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);
|
||||
font-size: 12px;
|
||||
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); font-weight: 700; }
|
||||
.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;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.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;
|
||||
padding: 0 3px;
|
||||
border: none;
|
||||
padding: 0 2px;
|
||||
font-size: 13px;
|
||||
opacity: 0;
|
||||
color: inherit;
|
||||
color: var(--fg);
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.note-item:hover .note-del { opacity: 0.5; }
|
||||
.note-del:hover { opacity: 1 !important; background: transparent; }
|
||||
.note-item:hover .note-del { opacity: 0.4; }
|
||||
.note-del:hover { opacity: 1 !important; }
|
||||
.sidebar.closed .note-del { display: none; }
|
||||
|
||||
/* ── Editor ── */
|
||||
.editor {
|
||||
.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;
|
||||
}
|
||||
.note-title-bar {
|
||||
|
||||
/* floating share + dark toggle */
|
||||
.float-actions {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-bottom: 1px solid var(--border);
|
||||
flex-shrink: 0;
|
||||
gap: 6px;
|
||||
z-index: 10;
|
||||
}
|
||||
#note-title {
|
||||
flex: 1;
|
||||
padding: 10px 14px;
|
||||
font-size: 17px;
|
||||
font-weight: 700;
|
||||
font-family: 'Roboto Mono', monospace;
|
||||
.float-btn {
|
||||
padding: 5px 12px;
|
||||
background: var(--accent);
|
||||
border: none;
|
||||
outline: none;
|
||||
background: var(--bg);
|
||||
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); }
|
||||
.float-icon-btn {
|
||||
background: none;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 4px;
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
color: var(--fg);
|
||||
}
|
||||
#note-title::placeholder { color: var(--muted); }
|
||||
.float-icon-btn:hover { background: var(--sidebar-hover); }
|
||||
|
||||
/* save flash */
|
||||
.save-flash {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s;
|
||||
pointer-events: none;
|
||||
}
|
||||
.save-flash.show { opacity: 1; }
|
||||
|
||||
/* ── Editor ── */
|
||||
.notepad {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
padding: 40px 20px 14px;
|
||||
font-size: 24px;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
|
@ -203,7 +260,7 @@
|
|||
}
|
||||
.md-view {
|
||||
flex: 1;
|
||||
padding: 14px 18px;
|
||||
padding: 40px 20px 14px;
|
||||
overflow-y: auto;
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
|
|
@ -242,7 +299,7 @@
|
|||
}
|
||||
.draw-controls.visible { display: flex; }
|
||||
|
||||
/* ── Main controls ── */
|
||||
/* ── Bottom controls ── */
|
||||
.controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -257,6 +314,19 @@
|
|||
.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;
|
||||
|
|
@ -267,13 +337,9 @@
|
|||
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;
|
||||
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; }
|
||||
|
||||
|
|
@ -291,45 +357,28 @@
|
|||
|
||||
/* ── Share modal ── */
|
||||
.overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.55);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
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;
|
||||
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;
|
||||
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 view ── */
|
||||
.share-page {
|
||||
padding: 40px;
|
||||
max-width: 760px;
|
||||
margin: 0 auto;
|
||||
overflow-y: auto;
|
||||
height: 100vh;
|
||||
}
|
||||
/* ── 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; }
|
||||
|
|
@ -340,36 +389,41 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="header">
|
||||
<button class="btn-ghost" id="sidebar-toggle">☰</button>
|
||||
<span class="header-title">noted.</span>
|
||||
<div class="header-right">
|
||||
<span class="save-indicator" id="save-indicator">✓ saved</span>
|
||||
<button class="btn-ghost" id="dark-toggle" title="Toggle dark mode">🌙</button>
|
||||
<button id="share-btn">Share</button>
|
||||
|
||||
<!-- 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>
|
||||
</div>
|
||||
<div class="notes-list" id="notes-list"></div>
|
||||
<div class="sidebar-bottom">
|
||||
<button class="sidebar-bottom-btn" id="new-note-btn" title="New note">
|
||||
<span>+</span>
|
||||
</button>
|
||||
<button class="sidebar-bottom-btn" id="dark-toggle" title="Toggle dark mode">
|
||||
<span id="dark-icon">🌙</span>
|
||||
<span class="btn-label" id="dark-label">Dark mode</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="body">
|
||||
<div class="sidebar" id="sidebar">
|
||||
<div class="sidebar-top">
|
||||
<button id="new-note-btn">+ New Note</button>
|
||||
</div>
|
||||
<div class="notes-list" id="notes-list"></div>
|
||||
<!-- Main editor -->
|
||||
<div class="main" id="main">
|
||||
<div class="float-actions">
|
||||
<span class="save-flash" id="save-flash">✓ saved</span>
|
||||
<button class="float-icon-btn" id="dark-toggle-alt" title="Dark mode" style="display:none">🌙</button>
|
||||
<button class="float-btn" id="share-btn">Share</button>
|
||||
</div>
|
||||
|
||||
<div class="editor">
|
||||
<div class="note-title-bar">
|
||||
<input type="text" id="note-title" placeholder="Untitled">
|
||||
</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>
|
||||
<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>
|
||||
|
||||
<!-- Drawing controls -->
|
||||
<div class="draw-controls" id="draw-controls">
|
||||
<div class="cgroup">
|
||||
<label>Size</label>
|
||||
|
|
@ -380,10 +434,10 @@
|
|||
<label>Color</label>
|
||||
<input type="color" id="pen-color" value="#000000">
|
||||
</div>
|
||||
<button id="eraser-btn">Eraser</button>
|
||||
<button id="undo-btn">↩ Undo</button>
|
||||
<button id="redo-btn">↪ Redo</button>
|
||||
<button id="clear-canvas-btn">Clear</button>
|
||||
<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">
|
||||
|
|
@ -400,20 +454,20 @@
|
|||
</div>
|
||||
<div class="cgroup">
|
||||
<label>Size</label>
|
||||
<button id="dec-font">A-</button>
|
||||
<span id="font-size-label">24px</span>
|
||||
<button id="inc-font">A+</button>
|
||||
<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 id="md-btn" title="Toggle Markdown preview (Ctrl+M)">MD</button>
|
||||
<button id="draw-btn" title="Toggle drawing mode (Ctrl+D)">Draw</button>
|
||||
<button id="export-btn">Export</button>
|
||||
<button id="save-btn" title="Save (Ctrl+S)">Save</button>
|
||||
<button id="clear-btn">Clear</button>
|
||||
<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>
|
||||
|
||||
|
|
@ -424,7 +478,6 @@
|
|||
|
||||
<script>
|
||||
(() => {
|
||||
// ── State ────────────────────────────────────────────────────────────────
|
||||
const USER_ID = (() => {
|
||||
let id = localStorage.getItem('noted_uid');
|
||||
if (!id) { id = crypto.randomUUID(); localStorage.setItem('noted_uid', id); }
|
||||
|
|
@ -433,35 +486,31 @@
|
|||
|
||||
let notes = JSON.parse(localStorage.getItem('noted_notes') || '{}');
|
||||
let currentId = null;
|
||||
let dark = document.documentElement.hasAttribute('data-dark');
|
||||
let isMd = false;
|
||||
let isDraw = false;
|
||||
let isEraser = false;
|
||||
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, saveFlashTimer = null;
|
||||
let autoSaveTimer = null, syncTimer = null, flashTimer = null;
|
||||
|
||||
// ── DOM ──────────────────────────────────────────────────────────────────
|
||||
const $ = id => document.getElementById(id);
|
||||
const notepad = $('notepad');
|
||||
const noteTitle = $('note-title');
|
||||
const mdView = $('md-view');
|
||||
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 saveInd = $('save-indicator');
|
||||
const wordCount = $('word-count');
|
||||
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');
|
||||
|
||||
// ── Persist ──────────────────────────────────────────────────────────────
|
||||
function persist() { localStorage.setItem('noted_notes', JSON.stringify(notes)); }
|
||||
|
||||
function flashSaved() {
|
||||
saveInd.classList.add('visible');
|
||||
clearTimeout(saveFlashTimer);
|
||||
saveFlashTimer = setTimeout(() => saveInd.classList.remove('visible'), 2000);
|
||||
saveFlash.classList.add('show');
|
||||
clearTimeout(flashTimer);
|
||||
flashTimer = setTimeout(() => saveFlash.classList.remove('show'), 1800);
|
||||
}
|
||||
|
||||
function updateWordCount() {
|
||||
|
|
@ -473,14 +522,12 @@
|
|||
// ── Dark mode ─────────────────────────────────────────────────────────────
|
||||
function applyDark() {
|
||||
document.documentElement.toggleAttribute('data-dark', dark);
|
||||
$('dark-toggle').textContent = dark ? '☀️' : '🌙';
|
||||
const icon = dark ? '☀️' : '🌙';
|
||||
$('dark-icon').textContent = icon;
|
||||
$('dark-label').textContent = dark ? 'Light mode' : 'Dark mode';
|
||||
}
|
||||
|
||||
$('dark-toggle').addEventListener('click', () => {
|
||||
dark = !dark;
|
||||
localStorage.setItem('noted_dark', dark);
|
||||
applyDark();
|
||||
});
|
||||
function toggleDark() { dark = !dark; localStorage.setItem('noted_dark', dark); applyDark(); }
|
||||
$('dark-toggle').addEventListener('click', toggleDark);
|
||||
|
||||
// ── Sidebar ──────────────────────────────────────────────────────────────
|
||||
let sidebarOpen = localStorage.getItem('noted_sidebar') !== 'false';
|
||||
|
|
@ -498,20 +545,62 @@
|
|||
for (const n of sorted) {
|
||||
const el = document.createElement('div');
|
||||
el.className = 'note-item' + (n.id === currentId ? ' active' : '');
|
||||
el.innerHTML = `<span class="note-item-name">${n.title || 'Untitled'}</span><button class="note-del" title="Delete">✕</button>`;
|
||||
el.querySelector('.note-item-name').addEventListener('click', () => openNote(n.id));
|
||||
el.querySelector('.note-del').addEventListener('click', e => { e.stopPropagation(); deleteNote(n.id); });
|
||||
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);
|
||||
noteTitle.focus();
|
||||
// immediately enter rename on the new item
|
||||
setTimeout(() => {
|
||||
const el = notesList.querySelector(`[data-id="${id}"]`);
|
||||
if (el) startRename(el, id);
|
||||
}, 50);
|
||||
scheduleSync();
|
||||
}
|
||||
|
||||
|
|
@ -520,14 +609,13 @@
|
|||
if (currentId) saveNote(true);
|
||||
currentId = id;
|
||||
const n = notes[id];
|
||||
noteTitle.value = n.title || '';
|
||||
notepad.value = n.content || '';
|
||||
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';
|
||||
$('font-family').value = n.fontFamily || "'Roboto Mono', monospace";
|
||||
$('text-color').value = n.textColor || '#000000';
|
||||
updateWordCount();
|
||||
renderMd();
|
||||
undoStack = []; redoStack = [];
|
||||
|
|
@ -537,12 +625,12 @@
|
|||
}
|
||||
localStorage.setItem('noted_last', id);
|
||||
renderList();
|
||||
if (!sidebarOpen) notepad.focus();
|
||||
}
|
||||
|
||||
function saveNote(silent = false) {
|
||||
if (!currentId || !notes[currentId]) return;
|
||||
const n = notes[currentId];
|
||||
n.title = noteTitle.value;
|
||||
n.content = notepad.value;
|
||||
n.fontSize = notepad.style.fontSize || '24px';
|
||||
n.fontFamily = notepad.style.fontFamily || "'Roboto Mono', monospace";
|
||||
|
|
@ -562,9 +650,7 @@
|
|||
currentId = null;
|
||||
const ids = Object.keys(notes);
|
||||
if (ids.length) openNote(ids[0]); else createNote();
|
||||
} else {
|
||||
renderList();
|
||||
}
|
||||
} else renderList();
|
||||
}
|
||||
|
||||
$('new-note-btn').addEventListener('click', createNote);
|
||||
|
|
@ -574,9 +660,7 @@
|
|||
clearTimeout(autoSaveTimer);
|
||||
autoSaveTimer = setTimeout(() => saveNote(), 3000);
|
||||
}
|
||||
|
||||
notepad.addEventListener('input', () => { updateWordCount(); renderMd(); scheduleAutoSave(); });
|
||||
noteTitle.addEventListener('input', () => { if (notes[currentId]) notes[currentId].title = noteTitle.value; renderList(); scheduleAutoSave(); });
|
||||
|
||||
// ── Markdown ──────────────────────────────────────────────────────────────
|
||||
function renderMd() { if (isMd) mdView.innerHTML = marked.parse(notepad.value || ''); }
|
||||
|
|
@ -603,15 +687,12 @@
|
|||
|
||||
// ── 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 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' })),
|
||||
|
|
@ -626,7 +707,7 @@
|
|||
const data = ctx ? canvas.toDataURL() : null;
|
||||
canvas.width = canvasWrap.clientWidth;
|
||||
canvas.height = canvasWrap.clientHeight;
|
||||
if (data) { const img = new Image(); img.onload = () => ctx.drawImage(img, 0, 0); img.src = data; }
|
||||
if (data && ctx) { const img = new Image(); img.onload = () => ctx.drawImage(img, 0, 0); img.src = data; }
|
||||
};
|
||||
resize();
|
||||
ctx = canvas.getContext('2d');
|
||||
|
|
@ -641,16 +722,13 @@
|
|||
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 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?.();
|
||||
const [x,y] = pt(e); ctx.lineTo(x,y); ctx.stroke(); e.preventDefault?.();
|
||||
}
|
||||
function stop() {
|
||||
if (!drawing) return; drawing = false;
|
||||
|
|
@ -664,7 +742,7 @@
|
|||
$('draw-btn').addEventListener('click', () => {
|
||||
isDraw = !isDraw;
|
||||
$('draw-btn').classList.toggle('on', isDraw);
|
||||
canvasWrap.style.display = isDraw ? 'block' : 'none';
|
||||
canvasWrap.style.display = isDraw ? 'block' : 'none';
|
||||
drawCtrls.classList.toggle('visible', isDraw);
|
||||
notepad.style.display = (!isDraw && !isMd) ? '' : 'none';
|
||||
mdView.style.display = (!isDraw && isMd) ? 'block' : 'none';
|
||||
|
|
@ -672,28 +750,24 @@
|
|||
});
|
||||
|
||||
$('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();
|
||||
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();
|
||||
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);
|
||||
pushUndo(); ctx.clearRect(0,0,canvas.width,canvas.height);
|
||||
if (notes[currentId]) { notes[currentId].drawing = null; persist(); }
|
||||
});
|
||||
|
||||
|
|
@ -709,8 +783,7 @@
|
|||
// ── Share ─────────────────────────────────────────────────────────────────
|
||||
$('share-btn').addEventListener('click', async () => {
|
||||
saveNote(true);
|
||||
const n = notes[currentId];
|
||||
if (!n) return;
|
||||
const n = notes[currentId]; if (!n) return;
|
||||
try {
|
||||
const res = await fetch('/api/notes/' + n.id + '/share', {
|
||||
method: 'POST', headers: { 'Content-Type': 'application/json' },
|
||||
|
|
@ -718,7 +791,7 @@
|
|||
});
|
||||
const data = await res.json();
|
||||
if (data.token) showShareModal(location.origin + '/share/' + data.token);
|
||||
else alert('Share failed: ' + (data.error || 'unknown error'));
|
||||
else alert('Share failed: ' + (data.error || 'unknown'));
|
||||
} catch { alert('Share failed — are you online?'); }
|
||||
});
|
||||
|
||||
|
|
@ -730,14 +803,12 @@
|
|||
<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 id="_copy">Copy Link</button>
|
||||
<button id="_close">Close</button>
|
||||
<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('#_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(); });
|
||||
}
|
||||
|
|
@ -746,8 +817,7 @@
|
|||
function scheduleSync() { clearTimeout(syncTimer); syncTimer = setTimeout(syncCurrent, 5000); }
|
||||
|
||||
async function syncCurrent() {
|
||||
const n = notes[currentId];
|
||||
if (!n) return;
|
||||
const n = notes[currentId]; if (!n) return;
|
||||
try {
|
||||
syncStatus.textContent = 'syncing…';
|
||||
await fetch('/api/notes/' + n.id, {
|
||||
|
|
@ -759,12 +829,8 @@
|
|||
}
|
||||
|
||||
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 */ }
|
||||
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() {
|
||||
|
|
@ -784,17 +850,14 @@
|
|||
|
||||
// ── Share read-only view ──────────────────────────────────────────────────
|
||||
async function loadShareView(token) {
|
||||
document.querySelector('.body').remove();
|
||||
document.querySelector('.draw-controls').remove();
|
||||
document.querySelector('.controls').remove();
|
||||
document.querySelector('.status-bar').remove();
|
||||
document.querySelector('.header').innerHTML = '<span class="header-title" style="padding:0 12px">noted.</span>';
|
||||
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 or link expired.</p>'; }
|
||||
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>`;
|
||||
|
|
@ -807,7 +870,6 @@
|
|||
const shareMatch = location.pathname.match(/^\/share\/([a-zA-Z0-9]+)$/);
|
||||
if (shareMatch) { loadShareView(shareMatch[1]); return; }
|
||||
|
||||
dark = localStorage.getItem('noted_dark') === 'true';
|
||||
applyDark();
|
||||
applySidebar();
|
||||
|
||||
|
|
@ -817,15 +879,11 @@
|
|||
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(() => {});
|
||||
}
|
||||
window.addEventListener('beforeunload', () => saveNote(true));
|
||||
if ('serviceWorker' in navigator) navigator.serviceWorker.register('service-worker.js').catch(() => {});
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue