Hugging Face's logo

Spaces:
sumitjangir
/
notion-lite
Running

App Files Community
sumitjangir commited on
Commit
24a4f6d
·
verified ·
1 Parent(s): 3c38f69

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +913 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Notion Lite
3
- emoji: 🌖
4
- colorFrom: green
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: notion-lite
3
+ emoji: 🐳
4
+ colorFrom: yellow
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,913 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Notion Lite - Professional Note Taking</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .sidebar {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .note-content {
14
+ min-height: calc(100vh - 150px);
15
+ }
16
+ .drag-handle {
17
+ cursor: move;
18
+ }
19
+ .block-menu {
20
+ opacity: 0;
21
+ transition: opacity 0.2s ease;
22
+ }
23
+ .note-block:hover .block-menu {
24
+ opacity: 1;
25
+ }
26
+ .prose :where(h1):not(:where([class~="not-prose"] *)) {
27
+ font-size: 2em;
28
+ margin-top: 0;
29
+ margin-bottom: 0.5em;
30
+ font-weight: 700;
31
+ }
32
+ .prose :where(h2):not(:where([class~="not-prose"] *)) {
33
+ font-size: 1.5em;
34
+ margin-top: 1.5em;
35
+ margin-bottom: 0.5em;
36
+ font-weight: 600;
37
+ }
38
+ .prose :where(p):not(:where([class~="not-prose"] *)) {
39
+ margin-top: 0.5em;
40
+ margin-bottom: 0.5em;
41
+ }
42
+ .prose :where(ul):not(:where([class~="not-prose"] *)) {
43
+ list-style-type: disc;
44
+ padding-left: 1.5em;
45
+ margin-top: 0.5em;
46
+ margin-bottom: 0.5em;
47
+ }
48
+ .prose :where(ol):not(:where([class~="not-prose"] *)) {
49
+ list-style-type: decimal;
50
+ padding-left: 1.5em;
51
+ margin-top: 0.5em;
52
+ margin-bottom: 0.5em;
53
+ }
54
+ .prose :where(blockquote):not(:where([class~="not-prose"] *)) {
55
+ border-left: 4px solid #e5e7eb;
56
+ padding-left: 1em;
57
+ margin-left: 0;
58
+ font-style: italic;
59
+ color: #6b7280;
60
+ }
61
+ .prose :where(code):not(:where([class~="not-prose"] *)) {
62
+ background-color: #f3f4f6;
63
+ padding: 0.2em 0.4em;
64
+ border-radius: 0.25em;
65
+ font-family: monospace;
66
+ }
67
+ .prose :where(pre):not(:where([class~="not-prose"] *)) {
68
+ background-color: #1e293b;
69
+ color: white;
70
+ padding: 1em;
71
+ border-radius: 0.5em;
72
+ overflow-x: auto;
73
+ }
74
+ </style>
75
+ </head>
76
+ <body class="bg-gray-50 text-gray-800 flex h-screen overflow-hidden">
77
+ <!-- Sidebar -->
78
+ <div class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col h-full">
79
+ <div class="p-4 border-b border-gray-200 flex items-center justify-between">
80
+ <h1 class="text-xl font-bold text-gray-800 flex items-center">
81
+ <i class="fas fa-book-open mr-2 text-blue-500"></i>
82
+ Notion Lite
83
+ </h1>
84
+ <button id="sidebar-toggle" class="text-gray-500 hover:text-gray-700">
85
+ <i class="fas fa-chevron-left"></i>
86
+ </button>
87
+ </div>
88
+
89
+ <div class="p-4">
90
+ <button id="new-note-btn" class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md flex items-center justify-center">
91
+ <i class="fas fa-plus mr-2"></i> New Note
92
+ </button>
93
+ </div>
94
+
95
+ <div class="px-2">
96
+ <div class="flex items-center px-2 py-1 text-gray-500 text-sm font-medium">
97
+ <i class="fas fa-thumbtack mr-2 text-xs"></i>
98
+ <span>Pinned</span>
99
+ </div>
100
+ <div id="pinned-notes" class="mt-1">
101
+ <!-- Pinned notes will appear here -->
102
+ </div>
103
+
104
+ <div class="flex items-center px-2 py-1 mt-4 text-gray-500 text-sm font-medium">
105
+ <i class="fas fa-file-alt mr-2 text-xs"></i>
106
+ <span>All Notes</span>
107
+ </div>
108
+ <div id="all-notes" class="mt-1">
109
+ <!-- All notes will appear here -->
110
+ </div>
111
+ </div>
112
+
113
+ <div class="mt-auto p-4 border-t border-gray-200">
114
+ <div class="flex items-center">
115
+ <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-500">
116
+ <i class="fas fa-user"></i>
117
+ </div>
118
+ <div class="ml-2">
119
+ <div class="text-sm font-medium">User</div>
120
+ <div class="text-xs text-gray-500">Free Plan</div>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ </div>
125
+
126
+ <!-- Main Content -->
127
+ <div class="flex-1 flex flex-col overflow-hidden">
128
+ <!-- Toolbar -->
129
+ <div class="bg-white border-b border-gray-200 p-3 flex items-center justify-between">
130
+ <div class="flex items-center">
131
+ <button id="sidebar-toggle-mobile" class="mr-4 text-gray-500 md:hidden">
132
+ <i class="fas fa-bars"></i>
133
+ </button>
134
+ <div id="note-title" class="text-xl font-semibold px-2 py-1 rounded hover:bg-gray-100 cursor-text" contenteditable="true">Untitled Note</div>
135
+ </div>
136
+
137
+ <div class="flex items-center space-x-2">
138
+ <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded">
139
+ <i class="fas fa-search"></i>
140
+ </button>
141
+ <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded">
142
+ <i class="fas fa-share-alt"></i>
143
+ </button>
144
+ <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded">
145
+ <i class="fas fa-ellipsis-h"></i>
146
+ </button>
147
+ </div>
148
+ </div>
149
+
150
+ <!-- Formatting Toolbar -->
151
+ <div class="bg-white border-b border-gray-200 p-2 flex items-center overflow-x-auto">
152
+ <div class="flex space-x-1">
153
+ <button class="format-btn p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded" data-format="bold">
154
+ <i class="fas fa-bold"></i>
155
+ </button>
156
+ <button class="format-btn p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded" data-format="italic">
157
+ <i class="fas fa-italic"></i>
158
+ </button>
159
+ <button class="format-btn p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded" data-format="underline">
160
+ <i class="fas fa-underline"></i>
161
+ </button>
162
+ <button class="format-btn p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded" data-format="strikethrough">
163
+ <i class="fas fa-strikethrough"></i>
164
+ </button>
165
+ <div class="border-l border-gray-300 mx-1 h-6"></div>
166
+ <button class="format-btn p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded" data-format="heading1">
167
+ <span class="font-bold">H1</span>
168
+ </button>
169
+ <button class="format-btn p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded" data-format="heading2">
170
+ <span class="font-bold">H2</span>
171
+ </button>
172
+ <div class="border-l border-gray-300 mx-1 h-6"></div>
173
+ <button class="format-btn p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded" data-format="bulletedList">
174
+ <i class="fas fa-list-ul"></i>
175
+ </button>
176
+ <button class="format-btn p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded" data-format="numberedList">
177
+ <i class="fas fa-list-ol"></i>
178
+ </button>
179
+ <button class="format-btn p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded" data-format="checklist">
180
+ <i class="fas fa-tasks"></i>
181
+ </button>
182
+ <div class="border-l border-gray-300 mx-1 h-6"></div>
183
+ <button class="format-btn p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded" data-format="quote">
184
+ <i class="fas fa-quote-right"></i>
185
+ </button>
186
+ <button class="format-btn p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded" data-format="code">
187
+ <i class="fas fa-code"></i>
188
+ </button>
189
+ <div class="border-l border-gray-300 mx-1 h-6"></div>
190
+ <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded" id="add-image-btn">
191
+ <i class="fas fa-image"></i>
192
+ </button>
193
+ <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded" id="add-table-btn">
194
+ <i class="fas fa-table"></i>
195
+ </button>
196
+ </div>
197
+ </div>
198
+
199
+ <!-- Note Content -->
200
+ <div id="note-editor" class="flex-1 overflow-y-auto p-6 prose max-w-4xl mx-auto note-content">
201
+ <div class="note-block relative" data-block-type="paragraph">
202
+ <div class="block-menu absolute -left-8 top-0 text-gray-400 flex flex-col">
203
+ <button class="drag-handle p-1 hover:text-gray-600 hover:bg-gray-100 rounded">
204
+ <i class="fas fa-grip-vertical"></i>
205
+ </button>
206
+ <button class="delete-block p-1 hover:text-red-500 hover:bg-gray-100 rounded">
207
+ <i class="fas fa-trash"></i>
208
+ </button>
209
+ </div>
210
+ <div class="block-content" contenteditable="true" data-placeholder="Type '/' for commands or start writing..."></div>
211
+ </div>
212
+ </div>
213
+
214
+ <!-- Status Bar -->
215
+ <div class="bg-white border-t border-gray-200 p-2 text-xs text-gray-500 flex justify-between items-center">
216
+ <div>
217
+ <span id="word-count">0 words</span>
218
+ <span class="mx-2">•</span>
219
+ <span id="char-count">0 characters</span>
220
+ </div>
221
+ <div>
222
+ <button id="toggle-dark-mode" class="p-1 hover:bg-gray-100 rounded">
223
+ <i class="fas fa-moon"></i>
224
+ </button>
225
+ </div>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- Block Menu (hidden by default) -->
230
+ <div id="block-menu" class="hidden absolute z-10 w-56 bg-white rounded-md shadow-lg border border-gray-200">
231
+ <div class="p-1">
232
+ <div class="block-option px-3 py-2 text-sm hover:bg-gray-100 rounded cursor-pointer flex items-center" data-block-type="heading1">
233
+ <div class="w-6 h-6 rounded bg-gray-100 flex items-center justify-center mr-2">
234
+ <span class="font-bold text-sm">H1</span>
235
+ </div>
236
+ <span>Heading 1</span>
237
+ </div>
238
+ <div class="block-option px-3 py-2 text-sm hover:bg-gray-100 rounded cursor-pointer flex items-center" data-block-type="heading2">
239
+ <div class="w-6 h-6 rounded bg-gray-100 flex items-center justify-center mr-2">
240
+ <span class="font-bold text-sm">H2</span>
241
+ </div>
242
+ <span>Heading 2</span>
243
+ </div>
244
+ <div class="block-option px-3 py-2 text-sm hover:bg-gray-100 rounded cursor-pointer flex items-center" data-block-type="paragraph">
245
+ <div class="w-6 h-6 rounded bg-gray-100 flex items-center justify-center mr-2">
246
+ <i class="fas fa-paragraph text-xs"></i>
247
+ </div>
248
+ <span>Text</span>
249
+ </div>
250
+ <div class="border-t border-gray-200 my-1"></div>
251
+ <div class="block-option px-3 py-2 text-sm hover:bg-gray-100 rounded cursor-pointer flex items-center" data-block-type="bulletedList">
252
+ <div class="w-6 h-6 rounded bg-gray-100 flex items-center justify-center mr-2">
253
+ <i class="fas fa-list-ul text-xs"></i>
254
+ </div>
255
+ <span>Bulleted List</span>
256
+ </div>
257
+ <div class="block-option px-3 py-2 text-sm hover:bg-gray-100 rounded cursor-pointer flex items-center" data-block-type="numberedList">
258
+ <div class="w-6 h-6 rounded bg-gray-100 flex items-center justify-center mr-2">
259
+ <i class="fas fa-list-ol text-xs"></i>
260
+ </div>
261
+ <span>Numbered List</span>
262
+ </div>
263
+ <div class="block-option px-3 py-2 text-sm hover:bg-gray-100 rounded cursor-pointer flex items-center" data-block-type="checklist">
264
+ <div class="w-6 h-6 rounded bg-gray-100 flex items-center justify-center mr-2">
265
+ <i class="fas fa-tasks text-xs"></i>
266
+ </div>
267
+ <span>Checklist</span>
268
+ </div>
269
+ <div class="border-t border-gray-200 my-1"></div>
270
+ <div class="block-option px-3 py-2 text-sm hover:bg-gray-100 rounded cursor-pointer flex items-center" data-block-type="quote">
271
+ <div class="w-6 h-6 rounded bg-gray-100 flex items-center justify-center mr-2">
272
+ <i class="fas fa-quote-right text-xs"></i>
273
+ </div>
274
+ <span>Quote</span>
275
+ </div>
276
+ <div class="block-option px-3 py-2 text-sm hover:bg-gray-100 rounded cursor-pointer flex items-center" data-block-type="code">
277
+ <div class="w-6 h-6 rounded bg-gray-100 flex items-center justify-center mr-2">
278
+ <i class="fas fa-code text-xs"></i>
279
+ </div>
280
+ <span>Code Block</span>
281
+ </div>
282
+ <div class="border-t border-gray-200 my-1"></div>
283
+ <div class="block-option px-3 py-2 text-sm hover:bg-gray-100 rounded cursor-pointer flex items-center" data-block-type="image">
284
+ <div class="w-6 h-6 rounded bg-gray-100 flex items-center justify-center mr-2">
285
+ <i class="fas fa-image text-xs"></i>
286
+ </div>
287
+ <span>Image</span>
288
+ </div>
289
+ <div class="block-option px-3 py-2 text-sm hover:bg-gray-100 rounded cursor-pointer flex items-center" data-block-type="table">
290
+ <div class="w-6 h-6 rounded bg-gray-100 flex items-center justify-center mr-2">
291
+ <i class="fas fa-table text-xs"></i>
292
+ </div>
293
+ <span>Table</span>
294
+ </div>
295
+ </div>
296
+ </div>
297
+
298
+ <script>
299
+ // State management
300
+ let notes = [];
301
+ let currentNoteId = null;
302
+ let isDarkMode = false;
303
+
304
+ // DOM elements
305
+ const sidebar = document.querySelector('.sidebar');
306
+ const sidebarToggle = document.getElementById('sidebar-toggle');
307
+ const sidebarToggleMobile = document.getElementById('sidebar-toggle-mobile');
308
+ const newNoteBtn = document.getElementById('new-note-btn');
309
+ const noteEditor = document.getElementById('note-editor');
310
+ const noteTitle = document.getElementById('note-title');
311
+ const pinnedNotesContainer = document.getElementById('pinned-notes');
312
+ const allNotesContainer = document.getElementById('all-notes');
313
+ const blockMenu = document.getElementById('block-menu');
314
+ const formatButtons = document.querySelectorAll('.format-btn');
315
+ const wordCountEl = document.getElementById('word-count');
316
+ const charCountEl = document.getElementById('char-count');
317
+ const toggleDarkModeBtn = document.getElementById('toggle-dark-mode');
318
+ const addImageBtn = document.getElementById('add-image-btn');
319
+ const addTableBtn = document.getElementById('add-table-btn');
320
+
321
+ // Initialize the app
322
+ document.addEventListener('DOMContentLoaded', () => {
323
+ loadNotes();
324
+ setupEventListeners();
325
+ createNewNote();
326
+ updateCounts();
327
+ });
328
+
329
+ function setupEventListeners() {
330
+ // Sidebar toggle
331
+ sidebarToggle.addEventListener('click', toggleSidebar);
332
+ sidebarToggleMobile.addEventListener('click', toggleSidebar);
333
+
334
+ // New note button
335
+ newNoteBtn.addEventListener('click', createNewNote);
336
+
337
+ // Note title editing
338
+ noteTitle.addEventListener('blur', saveCurrentNote);
339
+ noteTitle.addEventListener('keydown', (e) => {
340
+ if (e.key === 'Enter') {
341
+ e.preventDefault();
342
+ noteTitle.blur();
343
+ }
344
+ });
345
+
346
+ // Formatting buttons
347
+ formatButtons.forEach(btn => {
348
+ btn.addEventListener('click', () => {
349
+ const format = btn.dataset.format;
350
+ applyFormat(format);
351
+ });
352
+ });
353
+
354
+ // Block menu
355
+ document.addEventListener('click', (e) => {
356
+ if (e.target.closest('.block-content') && e.target.closest('.block-content').textContent === '') {
357
+ const blockContent = e.target.closest('.block-content');
358
+ if (blockContent.textContent === '' || blockContent.textContent === '/') {
359
+ showBlockMenu(blockContent);
360
+ }
361
+ }
362
+ });
363
+
364
+ // Block options
365
+ document.querySelectorAll('.block-option').forEach(option => {
366
+ option.addEventListener('click', (e) => {
367
+ const blockType = option.dataset.blockType;
368
+ const blockContent = blockMenu.dataset.targetBlock;
369
+ if (blockContent) {
370
+ changeBlockType(blockContent, blockType);
371
+ }
372
+ hideBlockMenu();
373
+ });
374
+ });
375
+
376
+ // Add image button
377
+ addImageBtn.addEventListener('click', () => {
378
+ addBlock('image');
379
+ });
380
+
381
+ // Add table button
382
+ addTableBtn.addEventListener('click', () => {
383
+ addBlock('table');
384
+ });
385
+
386
+ // Dark mode toggle
387
+ toggleDarkModeBtn.addEventListener('click', toggleDarkMode);
388
+
389
+ // Click outside block menu to hide it
390
+ document.addEventListener('click', (e) => {
391
+ if (!e.target.closest('#block-menu') && !e.target.closest('.block-content')) {
392
+ hideBlockMenu();
393
+ }
394
+ });
395
+
396
+ // Handle slash commands
397
+ noteEditor.addEventListener('keydown', (e) => {
398
+ const blockContent = e.target.closest('.block-content');
399
+ if (e.key === '/' && blockContent && blockContent.textContent === '') {
400
+ e.preventDefault();
401
+ showBlockMenu(blockContent);
402
+ } else if (e.key === 'Enter' && blockContent) {
403
+ handleEnterKey(blockContent, e);
404
+ } else if (e.key === 'Backspace' && blockContent) {
405
+ handleBackspaceKey(blockContent, e);
406
+ }
407
+ });
408
+
409
+ // Update counts on input
410
+ noteEditor.addEventListener('input', () => {
411
+ updateCounts();
412
+ saveCurrentNote();
413
+ });
414
+ }
415
+
416
+ function toggleSidebar() {
417
+ sidebar.classList.toggle('-ml-64');
418
+ sidebar.classList.toggle('md:-ml-64');
419
+ sidebarToggle.querySelector('i').classList.toggle('fa-chevron-left');
420
+ sidebarToggle.querySelector('i').classList.toggle('fa-chevron-right');
421
+ }
422
+
423
+ function createNewNote() {
424
+ const newNote = {
425
+ id: Date.now().toString(),
426
+ title: 'Untitled Note',
427
+ content: '',
428
+ createdAt: new Date(),
429
+ updatedAt: new Date(),
430
+ pinned: false
431
+ };
432
+
433
+ notes.push(newNote);
434
+ currentNoteId = newNote.id;
435
+
436
+ saveNotes();
437
+ renderNotesList();
438
+ renderNote(newNote);
439
+ }
440
+
441
+ function loadNotes() {
442
+ const savedNotes = localStorage.getItem('notion-lite-notes');
443
+ if (savedNotes) {
444
+ notes = JSON.parse(savedNotes);
445
+ if (notes.length > 0) {
446
+ renderNotesList();
447
+ currentNoteId = notes[0].id;
448
+ renderNote(notes[0]);
449
+ }
450
+ }
451
+ }
452
+
453
+ function saveNotes() {
454
+ localStorage.setItem('notion-lite-notes', JSON.stringify(notes));
455
+ }
456
+
457
+ function saveCurrentNote() {
458
+ if (!currentNoteId) return;
459
+
460
+ const noteIndex = notes.findIndex(note => note.id === currentNoteId);
461
+ if (noteIndex === -1) return;
462
+
463
+ // Update title
464
+ notes[noteIndex].title = noteTitle.textContent || 'Untitled Note';
465
+
466
+ // Update content
467
+ const blocks = Array.from(document.querySelectorAll('.note-block')).map(blockEl => {
468
+ return {
469
+ type: blockEl.dataset.blockType,
470
+ content: blockEl.querySelector('.block-content').innerHTML
471
+ };
472
+ });
473
+
474
+ notes[noteIndex].content = JSON.stringify(blocks);
475
+ notes[noteIndex].updatedAt = new Date();
476
+
477
+ saveNotes();
478
+ renderNotesList();
479
+ }
480
+
481
+ function renderNotesList() {
482
+ // Clear existing notes
483
+ pinnedNotesContainer.innerHTML = '';
484
+ allNotesContainer.innerHTML = '';
485
+
486
+ // Separate pinned and unpinned notes
487
+ const pinned = notes.filter(note => note.pinned);
488
+ const unpinned = notes.filter(note => !note.pinned);
489
+
490
+ // Sort by updated date (newest first)
491
+ pinned.sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt));
492
+ unpinned.sort((a, b) => new Date(b.updatedAt) - new Date(a.updatedAt));
493
+
494
+ // Render pinned notes
495
+ pinned.forEach(note => {
496
+ pinnedNotesContainer.appendChild(createNoteListItem(note));
497
+ });
498
+
499
+ // Render unpinned notes
500
+ unpinned.forEach(note => {
501
+ allNotesContainer.appendChild(createNoteListItem(note));
502
+ });
503
+ }
504
+
505
+ function createNoteListItem(note) {
506
+ const noteEl = document.createElement('div');
507
+ noteEl.className = `note-item flex items-center px-2 py-2 rounded cursor-pointer ${note.id === currentNoteId ? 'bg-blue-50 text-blue-600' : 'hover:bg-gray-100'}`;
508
+ noteEl.innerHTML = `
509
+ <div class="flex-1 truncate">
510
+ <div class="font-medium truncate">${note.title}</div>
511
+ <div class="text-xs text-gray-500 truncate">${formatDate(note.updatedAt)}</div>
512
+ </div>
513
+ <button class="note-pin-btn p-1 text-gray-400 hover:text-yellow-500 rounded-full ml-2">
514
+ <i class="fas fa-thumbtack ${note.pinned ? 'text-yellow-500' : ''}"></i>
515
+ </button>
516
+ `;
517
+
518
+ noteEl.addEventListener('click', () => {
519
+ currentNoteId = note.id;
520
+ renderNote(note);
521
+ renderNotesList();
522
+ });
523
+
524
+ const pinBtn = noteEl.querySelector('.note-pin-btn');
525
+ pinBtn.addEventListener('click', (e) => {
526
+ e.stopPropagation();
527
+ note.pinned = !note.pinned;
528
+ saveNotes();
529
+ renderNotesList();
530
+ });
531
+
532
+ return noteEl;
533
+ }
534
+
535
+ function renderNote(note) {
536
+ // Update title
537
+ noteTitle.textContent = note.title;
538
+
539
+ // Clear editor
540
+ noteEditor.innerHTML = '';
541
+
542
+ // Parse and render content
543
+ let blocks = [];
544
+ try {
545
+ blocks = JSON.parse(note.content || '[]');
546
+ } catch (e) {
547
+ blocks = [];
548
+ }
549
+
550
+ if (blocks.length === 0) {
551
+ // Default empty block
552
+ addBlock('paragraph');
553
+ } else {
554
+ blocks.forEach(block => {
555
+ addBlock(block.type, block.content);
556
+ });
557
+ }
558
+
559
+ // Focus the first block
560
+ const firstBlock = noteEditor.querySelector('.block-content');
561
+ if (firstBlock) {
562
+ firstBlock.focus();
563
+ }
564
+
565
+ updateCounts();
566
+ }
567
+
568
+ function addBlock(type, content = '') {
569
+ const blockEl = document.createElement('div');
570
+ blockEl.className = 'note-block relative my-2 group';
571
+ blockEl.dataset.blockType = type;
572
+
573
+ let blockContent = '';
574
+ let placeholder = 'Type \'/\' for commands or start writing...';
575
+
576
+ switch (type) {
577
+ case 'heading1':
578
+ blockContent = `<h1>${content || ''}</h1>`;
579
+ placeholder = 'Heading 1';
580
+ break;
581
+ case 'heading2':
582
+ blockContent = `<h2>${content || ''}</h2>`;
583
+ placeholder = 'Heading 2';
584
+ break;
585
+ case 'bulletedList':
586
+ blockContent = `<ul><li>${content || ''}</li></ul>`;
587
+ placeholder = 'List item';
588
+ break;
589
+ case 'numberedList':
590
+ blockContent = `<ol><li>${content || ''}</li></ol>`;
591
+ placeholder = 'List item';
592
+ break;
593
+ case 'checklist':
594
+ blockContent = `<div class="flex items-center"><input type="checkbox" class="mr-2"><span>${content || ''}</span></div>`;
595
+ placeholder = 'Todo item';
596
+ break;
597
+ case 'quote':
598
+ blockContent = `<blockquote>${content || ''}</blockquote>`;
599
+ placeholder = 'Quote';
600
+ break;
601
+ case 'code':
602
+ blockContent = `<pre><code>${content || ''}</code></pre>`;
603
+ placeholder = 'Code';
604
+ break;
605
+ case 'image':
606
+ blockContent = `<div class="image-block">
607
+ <div class="flex items-center justify-center border-2 border-dashed border-gray-300 rounded p-4">
608
+ <button class="bg-blue-500 hover:bg-blue-600 text-white py-1 px-3 rounded text-sm">
609
+ <i class="fas fa-upload mr-1"></i> Upload Image
610
+ </button>
611
+ </div>
612
+ </div>`;
613
+ break;
614
+ case 'table':
615
+ blockContent = `<div class="table-block">
616
+ <table class="border-collapse w-full">
617
+ <thead>
618
+ <tr>
619
+ <th class="border border-gray-300 p-2 bg-gray-100" contenteditable="true">Header 1</th>
620
+ <th class="border border-gray-300 p-2 bg-gray-100" contenteditable="true">Header 2</th>
621
+ </tr>
622
+ </thead>
623
+ <tbody>
624
+ <tr>
625
+ <td class="border border-gray-300 p-2" contenteditable="true">Cell 1</td>
626
+ <td class="border border-gray-300 p-2" contenteditable="true">Cell 2</td>
627
+ </tr>
628
+ </tbody>
629
+ </table>
630
+ <div class="mt-2 flex">
631
+ <button class="text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded mr-1">
632
+ <i class="fas fa-plus mr-1"></i> Row
633
+ </button>
634
+ <button class="text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded mr-1">
635
+ <i class="fas fa-plus mr-1"></i> Column
636
+ </button>
637
+ <button class="text-xs bg-gray-100 hover:bg-gray-200 px-2 py-1 rounded">
638
+ <i class="fas fa-trash mr-1"></i> Delete
639
+ </button>
640
+ </div>
641
+ </div>`;
642
+ break;
643
+ default:
644
+ blockContent = `<p>${content || ''}</p>`;
645
+ }
646
+
647
+ blockEl.innerHTML = `
648
+ <div class="block-menu absolute -left-8 top-0 text-gray-400 flex flex-col opacity-0 group-hover:opacity-100 transition-opacity">
649
+ <button class="drag-handle p-1 hover:text-gray-600 hover:bg-gray-100 rounded">
650
+ <i class="fas fa-grip-vertical"></i>
651
+ </button>
652
+ <button class="delete-block p-1 hover:text-red-500 hover:bg-gray-100 rounded">
653
+ <i class="fas fa-trash"></i>
654
+ </button>
655
+ </div>
656
+ <div class="block-content" contenteditable="true" data-placeholder="${placeholder}">
657
+ ${blockContent}
658
+ </div>
659
+ `;
660
+
661
+ noteEditor.appendChild(blockEl);
662
+
663
+ // Set up event listeners for the new block
664
+ const blockContentEl = blockEl.querySelector('.block-content');
665
+ const deleteBtn = blockEl.querySelector('.delete-block');
666
+
667
+ deleteBtn.addEventListener('click', () => {
668
+ blockEl.remove();
669
+ saveCurrentNote();
670
+ });
671
+
672
+ blockContentEl.addEventListener('focus', () => {
673
+ blockEl.querySelector('.block-menu').classList.remove('opacity-0');
674
+ });
675
+
676
+ blockContentEl.addEventListener('blur', () => {
677
+ if (blockContentEl.innerHTML === '' || blockContentEl.innerHTML === '<br>') {
678
+ if (type === 'heading1') {
679
+ blockContentEl.innerHTML = '<h1><br></h1>';
680
+ } else if (type === 'heading2') {
681
+ blockContentEl.innerHTML = '<h2><br></h2>';
682
+ } else if (type === 'bulletedList') {
683
+ blockContentEl.innerHTML = '<ul><li><br></li></ul>';
684
+ } else if (type === 'numberedList') {
685
+ blockContentEl.innerHTML = '<ol><li><br></li></ol>';
686
+ } else if (type === 'quote') {
687
+ blockContentEl.innerHTML = '<blockquote><br></blockquote>';
688
+ } else if (type === 'code') {
689
+ blockContentEl.innerHTML = '<pre><code><br></code></pre>';
690
+ } else {
691
+ blockContentEl.innerHTML = '<p><br></p>';
692
+ }
693
+ }
694
+
695
+ saveCurrentNote();
696
+ });
697
+
698
+ // Focus the new block if it's empty
699
+ if (content === '') {
700
+ setTimeout(() => {
701
+ blockContentEl.focus();
702
+
703
+ // Move cursor to the end
704
+ const range = document.createRange();
705
+ const selection = window.getSelection();
706
+ range.selectNodeContents(blockContentEl);
707
+ range.collapse(false);
708
+ selection.removeAllRanges();
709
+ selection.addRange(range);
710
+ }, 10);
711
+ }
712
+
713
+ return blockEl;
714
+ }
715
+
716
+ function changeBlockType(blockContentEl, newType) {
717
+ const blockEl = blockContentEl.closest('.note-block');
718
+ const currentContent = blockContentEl.innerHTML;
719
+
720
+ // Remove all child nodes to get clean text content
721
+ const tempDiv = document.createElement('div');
722
+ tempDiv.innerHTML = currentContent;
723
+ const textContent = tempDiv.textContent || '';
724
+
725
+ blockEl.dataset.blockType = newType;
726
+
727
+ switch (newType) {
728
+ case 'heading1':
729
+ blockContentEl.innerHTML = `<h1>${textContent}</h1>`;
730
+ break;
731
+ case 'heading2':
732
+ blockContentEl.innerHTML = `<h2>${textContent}</h2>`;
733
+ break;
734
+ case 'bulletedList':
735
+ blockContentEl.innerHTML = `<ul><li>${textContent}</li></ul>`;
736
+ break;
737
+ case 'numberedList':
738
+ blockContentEl.innerHTML = `<ol><li>${textContent}</li></ol>`;
739
+ break;
740
+ case 'checklist':
741
+ blockContentEl.innerHTML = `<div class="flex items-center"><input type="checkbox" class="mr-2"><span>${textContent}</span></div>`;
742
+ break;
743
+ case 'quote':
744
+ blockContentEl.innerHTML = `<blockquote>${textContent}</blockquote>`;
745
+ break;
746
+ case 'code':
747
+ blockContentEl.innerHTML = `<pre><code>${textContent}</code></pre>`;
748
+ break;
749
+ default:
750
+ blockContentEl.innerHTML = `<p>${textContent}</p>`;
751
+ }
752
+
753
+ saveCurrentNote();
754
+ blockContentEl.focus();
755
+ }
756
+
757
+ function showBlockMenu(blockContentEl) {
758
+ hideBlockMenu();
759
+
760
+ const rect = blockContentEl.getBoundingClientRect();
761
+ blockMenu.style.top = `${rect.top + window.scrollY}px`;
762
+ blockMenu.style.left = `${rect.left + window.scrollX}px`;
763
+ blockMenu.dataset.targetBlock = blockContentEl.id || Date.now().toString();
764
+ blockContentEl.id = blockMenu.dataset.targetBlock;
765
+
766
+ blockMenu.classList.remove('hidden');
767
+ }
768
+
769
+ function hideBlockMenu() {
770
+ blockMenu.classList.add('hidden');
771
+ delete blockMenu.dataset.targetBlock;
772
+ }
773
+
774
+ function applyFormat(format) {
775
+ document.execCommand(format, false, null);
776
+
777
+ // Special handling for headings and other complex formats
778
+ const selection = window.getSelection();
779
+ if (!selection.rangeCount) return;
780
+
781
+ const range = selection.getRangeAt(0);
782
+ const blockContentEl = range.startContainer.closest('.block-content');
783
+ if (!blockContentEl) return;
784
+
785
+ switch (format) {
786
+ case 'heading1':
787
+ changeBlockType(blockContentEl, 'heading1');
788
+ break;
789
+ case 'heading2':
790
+ changeBlockType(blockContentEl, 'heading2');
791
+ break;
792
+ case 'bulletedList':
793
+ changeBlockType(blockContentEl, 'bulletedList');
794
+ break;
795
+ case 'numberedList':
796
+ changeBlockType(blockContentEl, 'numberedList');
797
+ break;
798
+ case 'checklist':
799
+ changeBlockType(blockContentEl, 'checklist');
800
+ break;
801
+ case 'quote':
802
+ changeBlockType(blockContentEl, 'quote');
803
+ break;
804
+ case 'code':
805
+ changeBlockType(blockContentEl, 'code');
806
+ break;
807
+ }
808
+ }
809
+
810
+ function handleEnterKey(blockContentEl, event) {
811
+ const blockEl = blockContentEl.closest('.note-block');
812
+ const blockType = blockEl.dataset.blockType;
813
+
814
+ // For lists, continue the same list type
815
+ if (blockType === 'bulletedList' || blockType === 'numberedList') {
816
+ // If the list item is empty, break out of the list
817
+ if (blockContentEl.textContent.trim() === '') {
818
+ event.preventDefault();
819
+ changeBlockType(blockContentEl, 'paragraph');
820
+ } else {
821
+ // Otherwise continue the list
822
+ event.preventDefault();
823
+ const newBlock = addBlock(blockType);
824
+ setTimeout(() => {
825
+ newBlock.querySelector('.block-content').focus();
826
+ }, 10);
827
+ }
828
+ } else {
829
+ // For other blocks, just add a new paragraph
830
+ event.preventDefault();
831
+ const newBlock = addBlock('paragraph');
832
+ setTimeout(() => {
833
+ newBlock.querySelector('.block-content').focus();
834
+ }, 10);
835
+ }
836
+ }
837
+
838
+ function handleBackspaceKey(blockContentEl, event) {
839
+ // Only handle if the block is empty
840
+ if (blockContentEl.textContent.trim() !== '') return;
841
+
842
+ const blockEl = blockContentEl.closest('.note-block');
843
+ const blockType = blockEl.dataset.blockType;
844
+
845
+ // For headings, convert to paragraph
846
+ if (blockType === 'heading1' || blockType === 'heading2') {
847
+ event.preventDefault();
848
+ changeBlockType(blockContentEl, 'paragraph');
849
+ }
850
+
851
+ // For lists, convert to paragraph
852
+ if (blockType === 'bulletedList' || blockType === 'numberedList' || blockType === 'checklist') {
853
+ event.preventDefault();
854
+ changeBlockType(blockContentEl, 'paragraph');
855
+ }
856
+
857
+ // For quotes and code blocks, convert to paragraph
858
+ if (blockType === 'quote' || blockType === 'code') {
859
+ event.preventDefault();
860
+ changeBlockType(blockContentEl, 'paragraph');
861
+ }
862
+ }
863
+
864
+ function updateCounts() {
865
+ const text = noteEditor.textContent;
866
+ const wordCount = text.trim() === '' ? 0 : text.trim().split(/\s+/).length;
867
+ const charCount = text.length;
868
+
869
+ wordCountEl.textContent = `${wordCount} ${wordCount === 1 ? 'word' : 'words'}`;
870
+ charCountEl.textContent = `${charCount} ${charCount === 1 ? 'character' : 'characters'}`;
871
+ }
872
+
873
+ function toggleDarkMode() {
874
+ isDarkMode = !isDarkMode;
875
+
876
+ if (isDarkMode) {
877
+ document.body.classList.add('bg-gray-900', 'text-gray-100');
878
+ document.body.classList.remove('bg-gray-50', 'text-gray-800');
879
+ toggleDarkModeBtn.innerHTML = '<i class="fas fa-sun"></i>';
880
+
881
+ // Update sidebar
882
+ sidebar.classList.add('bg-gray-800', 'border-gray-700');
883
+ sidebar.classList.remove('bg-white', 'border-gray-200');
884
+
885
+ // Update editor
886
+ noteEditor.classList.add('bg-gray-900');
887
+ noteEditor.classList.remove('bg-gray-50');
888
+ } else {
889
+ document.body.classList.remove('bg-gray-900', 'text-gray-100');
890
+ document.body.classList.add('bg-gray-50', 'text-gray-800');
891
+ toggleDarkModeBtn.innerHTML = '<i class="fas fa-moon"></i>';
892
+
893
+ // Update sidebar
894
+ sidebar.classList.remove('bg-gray-800', 'border-gray-700');
895
+ sidebar.classList.add('bg-white', 'border-gray-200');
896
+
897
+ // Update editor
898
+ noteEditor.classList.remove('bg-gray-900');
899
+ noteEditor.classList.add('bg-gray-50');
900
+ }
901
+ }
902
+
903
+ function formatDate(dateString) {
904
+ const date = new Date(dateString);
905
+ return date.toLocaleDateString('en-US', {
906
+ month: 'short',
907
+ day: 'numeric',
908
+ year: date.getFullYear() !== new Date().getFullYear() ? 'numeric' : undefined
909
+ });
910
+ }
911
+ </script>
912
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=sumitjangir/notion-lite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
913
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ Add option for note taking and make it professional and simple like notion app add more features and make it easy to use