-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathpopup.html
More file actions
161 lines (151 loc) · 11 KB
/
popup.html
File metadata and controls
161 lines (151 loc) · 11 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
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Quick Notes</title>
<link rel="stylesheet" href="popup.css">
<script src="popup-init.js"></script>
</head>
<body>
<!-- SVG icon defs (referenced via <use>) -->
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<defs>
<symbol id="i-plus" viewBox="0 0 24 24"><path d="M12 5v14M5 12h14"/></symbol>
<symbol id="i-minus" viewBox="0 0 24 24"><path d="M5 12h14"/></symbol>
<symbol id="i-x" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6L6 18"/></symbol>
<symbol id="i-trash" viewBox="0 0 24 24"><path d="M3 6h18"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></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-clock" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></symbol>
<symbol id="i-gear" viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.7 1.7 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.7 1.7 0 0 0-1.8-.3 1.7 1.7 0 0 0-1 1.5V21a2 2 0 1 1-4 0v-.1a1.7 1.7 0 0 0-1.1-1.5 1.7 1.7 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.7 1.7 0 0 0 .3-1.8 1.7 1.7 0 0 0-1.5-1H3a2 2 0 1 1 0-4h.1a1.7 1.7 0 0 0 1.5-1.1 1.7 1.7 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1a1.7 1.7 0 0 0 1.8.3H9a1.7 1.7 0 0 0 1-1.5V3a2 2 0 1 1 4 0v.1a1.7 1.7 0 0 0 1 1.5 1.7 1.7 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.7 1.7 0 0 0-.3 1.8V9a1.7 1.7 0 0 0 1.5 1H21a2 2 0 1 1 0 4h-.1a1.7 1.7 0 0 0-1.5 1z"/></symbol>
<symbol id="i-pin" viewBox="0 0 24 24"><path d="M12 17v5"/><path d="M9 3h6l-1 6 3 3H7l3-3-1-6z"/></symbol>
<symbol id="i-clipboard" viewBox="0 0 24 24"><rect x="8" y="2" width="8" height="4" rx="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></symbol>
<symbol id="i-copy" viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15V5a2 2 0 0 1 2-2h10"/></symbol>
<symbol id="i-link" viewBox="0 0 24 24"><path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7"/><path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7"/></symbol>
<symbol id="i-scissors" viewBox="0 0 24 24"><circle cx="6" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M20 4L8.1 15.9"/><path d="M14.5 14.5L20 20"/><path d="M8.1 8.1L12 12"/></symbol>
<symbol id="i-check" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 12l2 2 4-4"/></symbol>
<symbol id="i-eye" viewBox="0 0 24 24"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></symbol>
<symbol id="i-target" viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="5"/><circle cx="12" cy="12" r="1.5" fill="currentColor"/></symbol>
<symbol id="i-download" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M7 10l5 5 5-5"/><path d="M12 15V3"/></symbol>
<symbol id="i-shape" viewBox="0 0 24 24"><polygon points="12,3 21,20 3,20" /></symbol>
<symbol id="i-sun" viewBox="0 0 24 24"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"/></symbol>
<symbol id="i-bat" viewBox="0 0 24 24"><path d="M12 7c-2 0-3 1-3 1s-2-3-5-3c0 2 1 3 1 3s-2 1-2 3c2 0 4-1 4-1l2 3 3 1 3-1 2-3s2 1 4 1c0-2-2-3-2-3s1-1 1-3c-3 0-5 3-5 3s-1-1-3-1z"/></symbol>
<symbol id="i-arrow-left" viewBox="0 0 24 24"><path d="M15 18l-6-6 6-6"/></symbol>
<symbol id="i-window" viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18"/></symbol>
<symbol id="i-tag" viewBox="0 0 24 24"><path d="M20 12V4a1 1 0 0 0-1-1h-8L3 11l9 9 8-8z"/><circle cx="8" cy="8" r="1.5" fill="currentColor"/></symbol>
<symbol id="i-pencil" viewBox="0 0 24 24"><path d="M12 20h9"/><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4 12.5-12.5z"/></symbol>
<symbol id="i-bold" viewBox="0 0 24 24"><path d="M7 4h7a4 4 0 0 1 0 8H7z"/><path d="M7 12h8a4 4 0 0 1 0 8H7z"/></symbol>
<symbol id="i-code" viewBox="0 0 24 24"><path d="M9 8l-5 4 5 4M15 8l5 4-5 4"/></symbol>
<symbol id="i-colorText" viewBox="0 0 24 24"><path d="M6 20l6-14 6 14M8.5 16h7"/><rect x="4" y="20" width="16" height="2" fill="currentColor" stroke="none"/></symbol>
</defs>
</svg>
<div id="shapeFrame">
<!-- Editor view -->
<div id="editorView" class="view">
<div class="header">
<span class="brand"><span class="brand-dot"></span>NOTES</span>
<select id="noteSelect" title="Switch note"></select>
<button id="pinNote" class="icon-btn" title="Pin / unpin this note"><svg class="ico"><use href="#i-pin"/></svg></button>
<button id="renameNote" class="icon-btn" title="Rename this note"><svg class="ico"><use href="#i-pencil"/></svg></button>
<button id="newNote" class="icon-btn" title="New note"><svg class="ico"><use href="#i-plus"/></svg></button>
<button id="deleteNote" class="icon-btn" title="Delete / clear note"><svg class="ico"><use href="#i-trash"/></svg></button>
<button id="tagBtn" class="icon-btn" title="Color tag this note"><svg class="ico"><use href="#i-tag"/></svg></button>
<div class="sep"></div>
<button id="searchBtn" class="icon-btn" title="Search (Ctrl+F)"><svg class="ico"><use href="#i-search"/></svg></button>
<button id="historyBtn" class="icon-btn" title="History"><svg class="ico"><use href="#i-clock"/></svg></button>
<button id="shapeBtn" class="icon-btn" title="Change popup shape"><svg class="ico"><use href="#i-shape"/></svg></button>
<button id="themeBtn" class="icon-btn" title="Toggle theme"><svg class="ico"><use href="#i-sun"/></svg></button>
<button id="optionsBtn" class="icon-btn" title="Options"><svg class="ico"><use href="#i-gear"/></svg></button>
</div>
<!-- Shape picker dropdown -->
<div id="shapeMenu" class="shapeMenu" hidden>
<button data-shape="rectangle" title="Rectangle">▭</button>
<button data-shape="rounded" title="Rounded">▢</button>
<button data-shape="hexagon" title="Hexagon">⬡</button>
<button data-shape="circle" title="Circle">●</button>
</div>
<div class="toolbar">
<div class="tool-group">
<button id="pasteBtn" class="text-btn" title="Paste clipboard at cursor"><svg class="ico"><use href="#i-clipboard"/></svg></button>
<button id="copyBtn" class="text-btn" title="Copy whole note"><svg class="ico"><use href="#i-copy"/></svg></button>
</div>
<div class="tool-sep"></div>
<div class="tool-group">
<button id="urlBtn" class="text-btn" title="Insert current page URL"><svg class="ico"><use href="#i-link"/></svg></button>
<button id="selectionBtn" class="text-btn" title="Insert page selection"><svg class="ico"><use href="#i-scissors"/></svg></button>
<button id="timeBtn" class="text-btn" title="Insert timestamp with timezone"><svg class="ico"><use href="#i-clock"/></svg></button>
</div>
<div class="tool-sep"></div>
<div class="tool-group">
<button id="divBtn" class="text-btn" title="Insert divider">━</button>
<button id="checkBtn" class="text-btn" title="Insert checklist item"><svg class="ico"><use href="#i-check"/></svg></button>
</div>
<div class="tool-sep"></div>
<div class="tool-group">
<button id="boldBtn" class="text-btn" title="Bold (wrap **selection**)"><svg class="ico"><use href="#i-bold"/></svg></button>
<button id="codeBtn" class="text-btn" title="Code (inline or fenced block)"><svg class="ico"><use href="#i-code"/></svg></button>
<button id="colorBtn" class="text-btn" title="Text color"><svg class="ico"><use href="#i-colorText"/></svg></button>
<button id="previewBtn" class="text-btn" title="Toggle Markdown / checklist preview"><svg class="ico"><use href="#i-eye"/></svg></button>
</div>
<div class="tool-sep"></div>
<div class="tool-group">
<button id="defaultBtn" class="text-btn" title="Set as default note for current site"><svg class="ico"><use href="#i-target"/></svg></button>
<button id="downloadBtn" class="text-btn" title="Download as .txt"><svg class="ico"><use href="#i-download"/></svg></button>
<button id="floatBtn" class="text-btn" title="Toggle floating panel on current page (Alt+Shift+N)"><svg class="ico"><use href="#i-window"/></svg></button>
</div>
<div class="tool-sep"></div>
<div class="opacity-group" title="Popup opacity">
<span class="op-icon"><svg class="ico"><use href="#i-eye"/></svg></span>
<input type="range" id="opacitySlider" class="opacity-slider" min="30" max="100" step="5" value="100">
<span id="opacityLabel" class="op-label">100%</span>
</div>
</div>
<textarea id="editor" spellcheck="true" placeholder="Start typing… Auto-saved."></textarea>
<div id="preview" class="preview" hidden></div>
<div class="footer">
<span id="counter">0 words · 0 chars</span>
<span id="status" class="ok">ready</span>
</div>
</div>
<!-- Search view -->
<div id="searchView" class="view" hidden>
<div class="header">
<button id="backFromSearch" class="icon-btn" title="Back"><svg class="ico"><use href="#i-arrow-left"/></svg></button>
<input id="searchInput" type="text" placeholder="Search notes and history…" autofocus>
<select id="searchScope" title="Scope">
<option value="all">All</option>
<option value="notes">Notes</option>
<option value="history">History</option>
</select>
</div>
<ul id="searchResults" class="historyList"></ul>
<div class="footer">
<span id="searchCount">type to search</span>
<span class="muted">esc to close</span>
</div>
</div>
<!-- History view -->
<div id="historyView" class="view" hidden>
<div class="header">
<button id="backFromHistory" class="icon-btn" title="Back"><svg class="ico"><use href="#i-arrow-left"/></svg></button>
<span class="viewTitle">History</span>
<span class="spacer"></span>
<button id="clearHistoryBtn" class="text-btn" title="Clear all history">Clear</button>
</div>
<ul id="historyList" class="historyList"></ul>
<div class="footer">
<span id="historyCount">0 entries</span>
<span class="muted">click to insert · ✕ to delete</span>
</div>
</div>
</div>
<div class="rz rz-n" data-dir="n"></div>
<div class="rz rz-s" data-dir="s"></div>
<div class="rz rz-e" data-dir="e"></div>
<div class="rz rz-w" data-dir="w"></div>
<div class="rz rz-ne" data-dir="ne"></div>
<div class="rz rz-nw" data-dir="nw"></div>
<div class="rz rz-se" data-dir="se"></div>
<div class="rz rz-sw" data-dir="sw"></div>
<script src="popup.js"></script>
</body>
</html>