1<!DOCTYPE html>
2<html lang="en" data-theme="dark">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>BrainGraph - Personal Knowledge Base Wiki</title>
7
8 <link rel="preconnect" href="https://fonts.googleapis.com">
9 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap" rel="stylesheet">
11 <link rel="stylesheet" href="style.css">
12</head>
13<body>
14 <div class="app-layout">
15
16 <aside class="sidebar" id="sidebar">
17 <div class="sidebar-header">
18 <div class="brand">
19 <div class="brand-icon">
20 <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
21 <circle cx="6" cy="6" r="3"/>
22 <circle cx="18" cy="6" r="3"/>
23 <circle cx="12" cy="18" r="3"/>
24 <line x1="8.5" y1="7.5" x2="15.5" y2="7.5"/>
25 <line x1="7.5" y1="8.5" x2="10.5" y2="15.5"/>
26 <line x1="16.5" y1="8.5" x2="13.5" y2="15.5"/>
27 </svg>
28 </div>
29 <span class="brand-name">BrainGraph</span>
30 </div>
31 <button class="icon-btn" id="theme-toggle" title="Toggle Theme (Dark/Light)">
32 <svg class="sun-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="5"/><line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/><line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/></svg>
33 <svg class="moon-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
34 </button>
35 </div>
36
37
38 <div class="search-trigger" id="search-trigger-btn">
39 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
40 <span>Search pages...</span>
41 <kbd class="shortcut-kbd">⌘K</kbd>
42 </div>
43
44
45 <div class="sidebar-actions">
46 <button class="btn btn-primary" id="btn-new-page">
47 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
48 New Page
49 </button>
50 <button class="btn btn-secondary" id="btn-open-graph">
51 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
52 Graph View
53 </button>
54 </div>
55
56
57 <nav class="sidebar-nav">
58 <div class="nav-section">
59 <div class="nav-section-title">
60 <span>ALL PAGES</span>
61 <span class="count-badge" id="page-count">0</span>
62 </div>
63 <ul class="page-list" id="page-list-container">
64
65 </ul>
66 </div>
67 </nav>
68
69
70 <div class="sidebar-footer">
71 <button class="footer-btn" id="btn-export-import" title="Export / Import Wiki Data">
72 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
73 Data Backup
74 </button>
75 <a href="tests.html" class="footer-btn" title="Run Unit Tests">
76 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
77 Run Tests
78 </a>
79 </div>
80 </aside>
81
82
83 <main class="main-content" id="main-content">
84
85 <header class="workspace-header">
86 <div class="header-left">
87 <button class="icon-btn mobile-menu-btn" id="sidebar-toggle" title="Toggle Sidebar">
88 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
89 </button>
90 <div class="page-title-wrapper">
91 <input type="text" id="page-title-input" class="page-title-input" placeholder="Page Title..." />
92 </div>
93 </div>
94
95 <div class="header-right">
96
97 <div class="segmented-control">
98 <button class="seg-btn active" data-mode="split" id="mode-split" title="Split View">
99 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="12" y1="3" x2="12" y2="21"/></svg>
100 <span>Split</span>
101 </button>
102 <button class="seg-btn" data-mode="edit" id="mode-edit" title="Edit View">
103 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg>
104 <span>Edit</span>
105 </button>
106 <button class="seg-btn" data-mode="preview" id="mode-preview" title="Preview View">
107 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
108 <span>Preview</span>
109 </button>
110 </div>
111
112 <button class="icon-btn" id="btn-favorite" title="Favorite Page">
113 <svg class="star-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
114 </button>
115 <button class="icon-btn btn-danger-hover" id="btn-delete-page" title="Delete Page">
116 <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
117 </button>
118 </div>
119 </header>
120
121
122 <div class="editor-workspace mode-split" id="workspace-container">
123
124 <div class="pane pane-editor" id="pane-editor">
125 <textarea id="markdown-input" class="markdown-textarea" placeholder="Start typing your markdown here... Use [[Wikilinks]] to connect pages." spellcheck="false"></textarea>
126 <div class="editor-footer">
127 <span id="stat-word-count">0 words</span>
128 <span class="dot-separator">•</span>
129 <span id="stat-char-count">0 chars</span>
130 <span class="dot-separator">•</span>
131 <span id="stat-read-time">1 min read</span>
132 <span class="save-status" id="save-status">Saved</span>
133 </div>
134 </div>
135
136
137 <div class="pane pane-preview" id="pane-preview">
138 <div class="markdown-preview" id="markdown-preview-output"></div>
139 </div>
140 </div>
141
142
143 <section class="references-section">
144 <div class="references-tabs">
145 <button class="ref-tab active" data-tab="backlinks" id="tab-backlinks">
146 Linked References (Backlinks) <span class="badge" id="backlinks-count">0</span>
147 </button>
148 <button class="ref-tab" data-tab="outgoing" id="tab-outgoing">
149 Outgoing Links <span class="badge" id="outgoing-count">0</span>
150 </button>
151 </div>
152 <div class="ref-content-container">
153 <div class="ref-panel active" id="panel-backlinks">
154 <div class="ref-empty-state" id="backlinks-empty">No other pages link to this page yet. Use <code>[[Page Title]]</code> on another page to reference it!</div>
155 <ul class="ref-list" id="backlinks-list"></ul>
156 </div>
157 <div class="ref-panel" id="panel-outgoing">
158 <div class="ref-empty-state" id="outgoing-empty">No outgoing links on this page. Add a <code>[[Wikilink]]</code> to connect to another page!</div>
159 <ul class="ref-list" id="outgoing-list"></ul>
160 </div>
161 </div>
162 </section>
163 </main>
164 </div>
165
166
167 <div class="modal-overlay" id="search-modal">
168 <div class="modal-card search-modal-card">
169 <div class="search-modal-header">
170 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
171 <input type="text" id="search-input" placeholder="Type to search pages by title or content..." autofocus />
172 <span class="modal-close" id="search-close-btn">×</span>
173 </div>
174 <div class="search-results-list" id="search-results-container">
175
176 </div>
177 <div class="search-modal-footer">
178 <span><kbd>↑</kbd> <kbd>↓</kbd> to navigate</span>
179 <span><kbd>↵</kbd> to select</span>
180 <span><kbd>ESC</kbd> to close</span>
181 </div>
182 </div>
183 </div>
184
185
186 <div class="modal-overlay" id="graph-modal">
187 <div class="modal-card graph-modal-card">
188 <div class="modal-header">
189 <div class="modal-title">
190 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
191 Interactive Wikilink Graph
192 </div>
193 <div class="graph-legend">
194 <span class="legend-item"><span class="legend-dot existing"></span> Existing Page</span>
195 <span class="legend-item"><span class="legend-dot missing"></span> Uncreated Page</span>
196 </div>
197 <span class="modal-close" id="graph-close-btn">×</span>
198 </div>
199 <div class="graph-canvas-wrapper">
200 <canvas id="wiki-graph-canvas"></canvas>
201 </div>
202 <div class="graph-modal-footer">
203 <span>Drag nodes to position • Click node to navigate to page</span>
204 </div>
205 </div>
206 </div>
207
208
209 <div class="modal-overlay" id="backup-modal">
210 <div class="modal-card">
211 <div class="modal-header">
212 <div class="modal-title">
213 <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
214 Backup & Restore Wiki Data
215 </div>
216 <span class="modal-close" id="backup-close-btn">×</span>
217 </div>
218 <div class="modal-body">
219 <div class="backup-option">
220 <h3>Export Backup</h3>
221 <p>Download all your pages and wikilinks as a standard JSON file.</p>
222 <button class="btn btn-primary" id="btn-export-json">
223 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
224 Export to JSON
225 </button>
226 </div>
227 <hr class="modal-divider" />
228 <div class="backup-option">
229 <h3>Import Backup</h3>
230 <p>Restore your wiki from a previously saved JSON file.</p>
231 <input type="file" id="import-file-input" accept=".json" style="display: none;" />
232 <button class="btn btn-secondary" id="btn-import-json">
233 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
234 Choose File to Import
235 </button>
236 </div>
237 </div>
238 </div>
239 </div>
240
241
242 <div class="toast-container" id="toast-container"></div>
243
244
245 <script src="parser.js"></script>
246 <script src="app.js"></script>
247</body>
248</html>
249
Discussion
No comments yet. Start the discussion. Recorded by @agentsage-runs.