-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
171 lines (162 loc) · 9.47 KB
/
Copy pathindex.html
File metadata and controls
171 lines (162 loc) · 9.47 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
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ScratchPad — Project Notes</title>
</head>
<body data-theme="dark">
<div class="app">
<!-- ===== SIDEBAR ===== -->
<aside class="sidebar">
<div class="brand">
<div class="logo"><span>S</span></div>
<h1>ScratchPad<small>Project Notes</small></h1>
<button class="nav-toggle" id="navToggle" title="Collapse sidebar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M15 6l-6 6 6 6"/></svg></button>
</div>
<div class="side-scroll">
<div class="search">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg>
<input id="search" type="text" placeholder="Search all boards…" autocomplete="off">
</div>
<div class="side-label">Projects</div>
<div class="cat-list" id="catList"></div>
<button class="add-btn" id="addBtn">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>
New scratch
</button>
<button class="add-btn canvas-side" id="newCanvasBtn" style="margin-top:7px">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="14" rx="2"/><path d="M8 21h8M12 18v3"/></svg>
New Canvas
</button>
<button class="add-btn canvas-side" id="gridBtn" style="margin-top:7px">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M9 3v18M15 3v18M3 9h18M3 15h18"/></svg>
Gridlocked
</button>
<div class="side-label" style="margin-top:18px">AI</div>
<button class="add-btn ai-side" id="askBtn">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/><path d="M11 8v6M8 11h6"/></svg>
Ask your board
</button>
<button class="add-btn ai-side" id="autopileBtn" style="margin-top:7px">
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M18 6l-2.5 2.5M8.5 15.5 6 18"/></svg>
Auto-pile notes
</button>
</div>
<div class="side-foot">
<div class="theme-toggle" id="themeToggle">
<button data-theme="light"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="4.5"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5 19 19M19 5l-1.5 1.5M6.5 17.5 5 19"/></svg>Light</button>
<button data-theme="dark"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8Z"/></svg>Dark</button>
<button data-theme="comfort"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><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"/></svg>Comfort</button>
</div>
</div>
</aside>
<!-- ===== MAIN ===== -->
<div class="main">
<div class="topbar">
<button class="nav-show" id="navShow" title="Show sidebar"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 6l6 6-6 6"/></svg></button>
<div class="crumb" id="crumb"><b>Workspace</b></div>
<div class="spacer"></div>
<div class="hint">
<span><kbd>Click</kbd> cycle</span>
<span><kbd>Drag canvas</kbd> pan</span>
<span><kbd>Right-click</kbd> menu</span>
</div>
<div class="topbar-tools">
<button class="tool-btn" id="undoBtn" title="Undo (Ctrl+Z)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 14 4 9l5-5"/><path d="M4 9h11a5 5 0 0 1 0 10h-1"/></svg></button>
<button class="tool-btn" id="redoBtn" title="Redo (Ctrl+Y)"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m15 14 5-5-5-5"/><path d="M20 9H9a5 5 0 0 0 0 10h1"/></svg></button>
<div class="prov-badge" id="provBadge" title="AI provider"></div>
<button class="tool-btn" id="settingsBtn" title="AI & settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1Z"/></svg></button>
</div>
</div>
<div class="tabbar" id="tabbar"></div>
<div class="canvas-wrap">
<div class="canvas" id="canvas">
<div class="canvas-inner" id="canvasInner"></div>
<div class="empty-state" id="emptyState" style="display:none">
<div class="big">Nothing here yet</div>
<div>Double-click the canvas or hit “New scratch” to start.</div>
</div>
</div>
<div class="zoom-ctl" id="zoomCtl">
<button class="zoom-btn" id="zoomIn" title="Zoom in">+</button>
<span class="zoom-label" id="zoomLabel">100%</span>
<button class="zoom-btn" id="zoomOut" title="Zoom out">−</button>
</div>
<div class="minimap" id="minimap" title="Click or drag to navigate · ⌂ recenters">
<canvas id="mmCanvas" width="216" height="148"></canvas>
<span class="mm-label">Map</span>
<div class="mm-home" id="mmHome" title="Recenter on all notes">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 11l9-8 9 8M5 10v10h14V10"/></svg>
</div>
</div>
</div>
</div>
</div>
<!-- context menu mount -->
<div id="ctxMount"></div>
<!-- edit modal -->
<div class="overlay" id="overlay">
<div class="modal">
<div class="modal-head"><h3>✍️ Scratch a note</h3><button class="set-x" id="editClose" title="Close"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M18 6 6 18M6 6l12 12"/></svg></button></div>
<textarea id="editText" placeholder="Write something…"></textarea>
<div class="editor-ai">
<button class="ai-chip" id="triageBtn" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5 18 18M18 6l-2.5 2.5M8.5 15.5 6 18"/></svg>Auto-triage</button>
<span class="ai-hint" id="triageHint"></span>
</div>
<label>Project</label>
<select id="editCat"></select>
<label>Paper</label>
<div class="swatches" id="editSwatches"></div>
<div class="row">
<button class="btn-ghost" id="editCancel">Cancel</button>
<button class="btn-primary" id="editSave">Save</button>
</div>
</div>
</div>
<!-- ask-your-board modal -->
<div class="overlay" id="askOverlay">
<div class="modal ask-modal">
<div class="modal-head"><h3>✨ Ask your board</h3><button class="set-x" id="askClose"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M18 6 6 18M6 6l12 12"/></svg></button></div>
<div class="ask-row">
<input id="askInput" type="text" placeholder="Ask anything about your notes…" autocomplete="off">
<button class="btn-primary ask-go" id="askGo">Ask</button>
</div>
<div class="ask-answer" id="askAnswer"><div class="ask-hint">Answers are drawn only from your notes, with citations you can click to jump to.</div></div>
<div class="ask-cites" id="askCites"></div>
</div>
</div>
<!-- settings modal -->
<div class="overlay" id="setOverlay">
<div class="modal set-modal">
<div class="set-head"><h3>⚙️ AI & Settings</h3><button class="set-x" id="setClose"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M18 6 6 18M6 6l12 12"/></svg></button></div>
<div class="set-body" id="setBody"></div>
</div>
</div>
<!-- cloud confirmation -->
<div class="overlay" id="cloudOverlay">
<div class="modal small">
<h3>☁️ Send to cloud?</h3>
<p class="dlg-msg" id="cloudMsg"></p>
<div class="row">
<button class="btn-ghost" id="cloudCancel">Keep local</button>
<button class="btn-primary" id="cloudOk">Send</button>
</div>
</div>
</div>
<!-- passphrase prompt -->
<div class="overlay" id="passOverlay">
<div class="modal small">
<h3 id="passTitle">Unlock your keys</h3>
<p class="dlg-msg">Your API keys are protected with a passphrase. Enter it to continue.</p>
<input id="passInput" type="password" class="pass-input" placeholder="Passphrase" autocomplete="off">
<div class="row">
<button class="btn-ghost" id="passCancel">Cancel</button>
<button class="btn-primary" id="passOk">Unlock</button>
</div>
</div>
</div>
<div class="toast" id="toast"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>