Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
108 lines (101 loc) · 7.18 KB
/
Copy pathindex.html
File metadata and controls
108 lines (101 loc) · 7.18 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="A beautiful, minimal sticky notes app that runs entirely in your browser. Rich text, checklists, pins, archive, trash, themes — saved automatically, works offline.">
<meta name="theme-color" content="#24243e">
<meta property="og:type" content="website">
<meta property="og:title" content="Sticky Notes — capture your ideas">
<meta property="og:description" content="A beautiful, minimal sticky notes app that runs entirely in your browser. Auto-saved, installable, works offline.">
<meta property="og:url" content="https://note.ryn.bd/">
<meta property="og:image" content="https://note.ryn.bd/assets/DEMO.png">
<meta name="twitter:card" content="summary_large_image">
<title>Sticky Notes — capture your ideas</title>
<link rel="icon" href="assets/icon.svg" type="image/svg+xml">
<link rel="manifest" href="manifest.webmanifest">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header>
<h1><span class="title-icon">📝</span> Sticky Notes</h1>
<p class="subtitle">Capture your ideas — they're saved automatically</p>
</header>
<div class="toolbar" role="toolbar" aria-label="Notes toolbar">
<button id="newNoteBtn" class="btn btn-primary" title="New note (Alt+N)">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
New Note
</button>
<div class="search-wrap">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.5" y2="16.5"/></svg>
<input id="searchInput" type="search" placeholder="Search notes…" aria-label="Search notes" autocomplete="off">
</div>
<select id="viewSelect" class="view-select" aria-label="Which notes to show">
<option value="notes">📝 Notes</option>
<option value="favorites">⭐ Favorites</option>
<option value="pinned">📌 Pinned</option>
<option value="archive">📦 Archive</option>
<option value="trash">🗑️ Trash</option>
</select>
<button id="exportBtn" class="btn btn-ghost" title="Download all notes as a JSON file">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3v12"/><polyline points="8 11 12 15 16 11"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
Export
</button>
<button id="importBtn" class="btn btn-ghost" title="Import notes from a JSON file">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 15V3"/><polyline points="8 7 12 3 16 7"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/></svg>
Import
</button>
<input id="importFile" type="file" accept="application/json,.json" hidden>
<button id="clearBtn" class="btn btn-danger">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
<span id="clearLabel">Clear All</span>
</button>
<button id="themeBtn" class="btn btn-ghost btn-icon" title="Toggle light/dark theme" aria-label="Toggle light/dark theme"></button>
<button id="helpBtn" class="btn btn-ghost btn-icon" title="Keyboard shortcuts (Ctrl+/)" aria-label="Keyboard shortcuts">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><path d="M9.5 9a2.5 2.5 0 1 1 3.4 2.3c-.8.3-.9 1-.9 1.7"/><line x1="12" y1="16.5" x2="12" y2="16.6"/></svg>
</button>
<span class="note-count" id="noteCount" aria-live="polite">0 notes</span>
<span class="save-status" id="saveStatus" aria-live="polite"></span>
</div>
<main id="container" aria-label="Notes canvas">
<!-- Sticky notes are rendered here -->
</main>
<footer class="credits">
Made with ❤️ by <a href="https://ryn.bd" target="_blank" rel="noopener noreferrer">ryn.bd</a>
<span class="hint">Tip: double-click the canvas to add a note · Alt+N for new · / to search · Ctrl+/ for all shortcuts</span>
</footer>
<div id="toast" class="toast" role="status">
<span id="toastMessage"></span>
<button id="toastUndo" class="toast-undo" type="button" hidden>Undo</button>
</div>
<dialog id="helpDialog" class="help-dialog" aria-label="Keyboard shortcuts">
<h2>Keyboard shortcuts</h2>
<table>
<tr><td><kbd>Alt</kbd>+<kbd>N</kbd></td><td>New note</td></tr>
<tr><td><kbd>/</kbd> or <kbd>Ctrl</kbd>+<kbd>F</kbd></td><td>Search</td></tr>
<tr><td><kbd>Ctrl</kbd>+<kbd>/</kbd></td><td>This help</td></tr>
<tr><td>Double-click canvas</td><td>New note at that spot</td></tr>
<tr><th colspan="2">Inside a note</th></tr>
<tr><td><kbd>Ctrl</kbd>+<kbd>B</kbd> / <kbd>I</kbd> / <kbd>U</kbd></td><td>Bold / Italic / Underline</td></tr>
<tr><td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd></td><td>Strikethrough</td></tr>
<tr><td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>L</kbd> / <kbd>8</kbd></td><td>Bullet list</td></tr>
<tr><td><kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>7</kbd></td><td>Numbered list</td></tr>
<tr><td><kbd>Ctrl</kbd>+<kbd>D</kbd></td><td>Duplicate note</td></tr>
<tr><td><kbd>Ctrl</kbd>+<kbd>P</kbd></td><td>Pin / unpin note</td></tr>
<tr><th colspan="2">Markdown-style (type at line start, then space)</th></tr>
<tr><td><code>-</code> or <code>*</code></td><td>Bullet list</td></tr>
<tr><td><code>1.</code></td><td>Numbered list</td></tr>
<tr><td><code>[]</code></td><td>Checklist</td></tr>
<tr><td><code>#</code></td><td>Heading</td></tr>
<tr><td><code>></code></td><td>Quote</td></tr>
<tr><td><code>```</code></td><td>Code block</td></tr>
</table>
<button id="helpClose" class="btn btn-primary" type="button">Close</button>
</dialog>
<noscript><p class="noscript-msg">Sticky Notes needs JavaScript to run — please enable it.</p></noscript>
<script src="javascript/script.js"></script>
</body>
</html>