Hugging Face's logo

Spaces:
Vinarator
/
undefined
Running

App Files Community
Vinarator commited on
Commit
e44cae2
·
verified ·
1 Parent(s): f0dcfbe

Create a Notes App, with a notes section, and a history section.

Browse files
Files changed (4) hide show
  1. README.md +9 -5
  2. history.html +17 -0
  3. index.html +349 -18
  4. trash.html +213 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 🔥
4
- colorFrom: red
5
- colorTo: green
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: undefined
3
+ colorFrom: pink
4
+ colorTo: purple
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
history.html ADDED
@@ -0,0 +1,17 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>ScribbleSync - History</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <style>
12
+ .history-item {
13
+ transition: all 0.2s ease;
14
+ }
15
+ .history-item
16
+ </head>
17
+ </html>
index.html CHANGED
@@ -1,19 +1,350 @@
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>ScribbleSync - Digital Notepad</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
12
+ <style>
13
+ .note-card {
14
+ transition: all 0.3s ease;
15
+ }
16
+ .note-card:hover {
17
+ transform: translateY(-5px);
18
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
19
+ }
20
+ #vanta-bg {
21
+ position: fixed;
22
+ top: 0;
23
+ left: 0;
24
+ width: 100%;
25
+ height: 100%;
26
+ z-index: -1;
27
+ opacity: 0.1;
28
+ }
29
+ </style>
30
+ </head>
31
+ <body class="bg-gray-50">
32
+ <div id="vanta-bg"></div>
33
+
34
+ <!-- Navigation -->
35
+ <nav class="bg-white shadow-sm fixed w-full z-10">
36
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
37
+ <div class="flex justify-between h-16">
38
+ <div class="flex">
39
+ <div class="flex-shrink-0 flex items-center">
40
+ <i data-feather="edit-3" class="text-indigo-600 h-6 w-6"></i>
41
+ <span class="ml-2 text-xl font-bold text-indigo-600">ScribbleSync</span>
42
+ </div>
43
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
44
+ <a href="index.html" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
45
+ Notes
46
+ </a>
47
+ <a href="history.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
48
+ History
49
+ </a>
50
+ </div>
51
+ </div>
52
+ <div class="hidden sm:ml-6 sm:flex sm:items-center">
53
+ <button id="new-note-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center">
54
+ <i data-feather="plus" class="mr-1 h-4 w-4"></i> New Note
55
+ </button>
56
+ </div>
57
+ <div class="-mr-2 flex items-center sm:hidden">
58
+ <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
59
+ <i data-feather="menu"></i>
60
+ </button>
61
+ </div>
62
+ </div>
63
+ </div>
64
+
65
+ <!-- Mobile menu -->
66
+ <div id="mobile-menu" class="sm:hidden hidden">
67
+ <div class="pt-2 pb-3 space-y-1">
68
+ <a href="index.html" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
69
+ Notes
70
+ </a>
71
+ <a href="history.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
72
+ History
73
+ </a>
74
+ <button id="mobile-new-note-btn" class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center ml-3 mt-2 mb-2">
75
+ <i data-feather="plus" class="mr-1 h-4 w-4"></i> New Note
76
+ </button>
77
+ </div>
78
+ </div>
79
+ </nav>
80
+
81
+ <!-- Main Content -->
82
+ <main class="pt-20 pb-10 px-4 sm:px-6 lg:px-8">
83
+ <div class="max-w-7xl mx-auto">
84
+ <div class="mb-8">
85
+ <h1 class="text-3xl font-bold text-gray-900">Your Notes</h1>
86
+ <p class="mt-2 text-sm text-gray-500">Create, edit and organize your thoughts</p>
87
+ </div>
88
+
89
+ <!-- Notes Grid -->
90
+ <div id="notes-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
91
+ <!-- Note cards will be added here dynamically -->
92
+ </div>
93
+
94
+ <!-- Empty State -->
95
+ <div id="empty-state" class="text-center py-16 hidden">
96
+ <i data-feather="edit" class="mx-auto h-12 w-12 text-gray-400"></i>
97
+ <h3 class="mt-2 text-lg font-medium text-gray-900">No notes</h3>
98
+ <p class="mt-1 text-sm text-gray-500">Get started by creating a new note.</p>
99
+ <div class="mt-6">
100
+ <button id="empty-new-note-btn" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
101
+ <i data-feather="plus" class="-ml-1 mr-2 h-5 w-5"></i> New Note
102
+ </button>
103
+ </div>
104
+ </div>
105
+ </div>
106
+ </main>
107
+
108
+ <!-- Note Editor Modal -->
109
+ <div id="note-modal" class="fixed z-50 inset-0 overflow-y-auto hidden" aria-labelledby="modal-title" role="dialog" aria-modal="true">
110
+ <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
111
+ <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true"></div>
112
+ <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
113
+ <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
114
+ <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
115
+ <div class="sm:flex sm:items-start">
116
+ <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
117
+ <h3 class="text-lg leading-6 font-medium text-gray-900 mb-4" id="modal-title">
118
+ <span id="modal-title-text">New Note</span>
119
+ </h3>
120
+ <div class="mt-2">
121
+ <input type="text" id="note-title" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md mb-4 p-2" placeholder="Note title">
122
+ <textarea id="note-content" class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md p-2 h-64" placeholder="Write your note here..."></textarea>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
128
+ <button type="button" id="save-note-btn" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm">
129
+ Save
130
+ </button>
131
+ <button type="button" id="cancel-note-btn" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
132
+ Cancel
133
+ </button>
134
+ <button type="button" id="delete-note-btn" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-red-600 text-white font-medium hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm hidden">
135
+ Delete
136
+ </button>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+
142
+ <script>
143
+ // Initialize Vanta.js background
144
+ VANTA.NET({
145
+ el: "#vanta-bg",
146
+ color: 0x6366f1,
147
+ backgroundColor: 0xf9fafb,
148
+ points: 10,
149
+ maxDistance: 20,
150
+ spacing: 15
151
+ });
152
+
153
+ // Initialize Feather Icons
154
+ document.addEventListener('DOMContentLoaded', function() {
155
+ feather.replace();
156
+
157
+ // Mobile menu toggle
158
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
159
+ const mobileMenu = document.getElementById('mobile-menu');
160
+
161
+ mobileMenuButton.addEventListener('click', function() {
162
+ if (mobileMenu.classList.contains('hidden')) {
163
+ mobileMenu.classList.remove('hidden');
164
+ } else {
165
+ mobileMenu.classList.add('hidden');
166
+ }
167
+ });
168
+
169
+ // Note management
170
+ let notes = JSON.parse(localStorage.getItem('notes')) || [];
171
+ let currentNoteId = null;
172
+
173
+ // DOM elements
174
+ const notesContainer = document.getElementById('notes-container');
175
+ const emptyState = document.getElementById('empty-state');
176
+ const noteModal = document.getElementById('note-modal');
177
+ const noteTitle = document.getElementById('note-title');
178
+ const noteContent = document.getElementById('note-content');
179
+ const saveNoteBtn = document.getElementById('save-note-btn');
180
+ const cancelNoteBtn = document.getElementById('cancel-note-btn');
181
+ const deleteNoteBtn = document.getElementById('delete-note-btn');
182
+ const modalTitle = document.getElementById('modal-title-text');
183
+
184
+ // New note buttons
185
+ const newNoteBtn = document.getElementById('new-note-btn');
186
+ const mobileNewNoteBtn = document.getElementById('mobile-new-note-btn');
187
+ const emptyNewNoteBtn = document.getElementById('empty-new-note-btn');
188
+
189
+ // Event listeners for new note buttons
190
+ [newNoteBtn, mobileNewNoteBtn, emptyNewNoteBtn].forEach(btn => {
191
+ btn.addEventListener('click', () => {
192
+ openNewNoteModal();
193
+ });
194
+ });
195
+
196
+ // Cancel note button
197
+ cancelNoteBtn.addEventListener('click', closeNoteModal);
198
+
199
+ // Save note button
200
+ saveNoteBtn.addEventListener('click', saveNote);
201
+
202
+ // Delete note button
203
+ deleteNoteBtn.addEventListener('click', deleteNote);
204
+
205
+ // Initial render
206
+ renderNotes();
207
+
208
+ // Functions
209
+ function openNewNoteModal() {
210
+ currentNoteId = null;
211
+ noteTitle.value = '';
212
+ noteContent.value = '';
213
+ modalTitle.textContent = 'New Note';
214
+ deleteNoteBtn.classList.add('hidden');
215
+ noteModal.classList.remove('hidden');
216
+ noteTitle.focus();
217
+ }
218
+
219
+ function openEditNoteModal(id) {
220
+ const note = notes.find(note => note.id === id);
221
+ if (note) {
222
+ currentNoteId = id;
223
+ noteTitle.value = note.title;
224
+ noteContent.value = note.content;
225
+ modalTitle.textContent = 'Edit Note';
226
+ deleteNoteBtn.classList.remove('hidden');
227
+ noteModal.classList.remove('hidden');
228
+ noteTitle.focus();
229
+ }
230
+ }
231
+
232
+ function closeNoteModal() {
233
+ noteModal.classList.add('hidden');
234
+ }
235
+
236
+ function saveNote() {
237
+ const title = noteTitle.value.trim();
238
+ const content = noteContent.value.trim();
239
+
240
+ if (!title) {
241
+ alert('Please enter a title for your note');
242
+ return;
243
+ }
244
+
245
+ const now = new Date();
246
+ const timestamp = now.toISOString();
247
+
248
+ if (currentNoteId) {
249
+ // Update existing note
250
+ const noteIndex = notes.findIndex(note => note.id === currentNoteId);
251
+ if (noteIndex !== -1) {
252
+ notes[noteIndex] = {
253
+ ...notes[noteIndex],
254
+ title,
255
+ content,
256
+ updatedAt: timestamp
257
+ };
258
+ }
259
+ } else {
260
+ // Create new note
261
+ const newNote = {
262
+ id: Date.now().toString(),
263
+ title,
264
+ content,
265
+ createdAt: timestamp,
266
+ updatedAt: timestamp
267
+ };
268
+ notes.unshift(newNote);
269
+ }
270
+
271
+ saveToLocalStorage();
272
+ renderNotes();
273
+ closeNoteModal();
274
+ }
275
+ function deleteNote() {
276
+ if (confirm('Are you sure you want to delete this note?')) {
277
+ const noteIndex = notes.findIndex(note => note.id === currentNoteId);
278
+ if (noteIndex !== -1) {
279
+ const deletedNote = notes[noteIndex];
280
+
281
+ // Add to trash
282
+ const trash = JSON.parse(localStorage.getItem('trash')) || [];
283
+ trash.push({
284
+ ...deletedNote,
285
+ deletedAt: new Date().toISOString()
286
+ });
287
+ localStorage.setItem('trash', JSON.stringify(trash));
288
+
289
+ // Remove from notes
290
+ notes.splice(noteIndex, 1);
291
+ saveToLocalStorage();
292
+ renderNotes();
293
+ closeNoteModal();
294
+ }
295
+ }
296
+ }
297
+ function saveToLocalStorage() {
298
+ localStorage.setItem('notes', JSON.stringify(notes));
299
+ }
300
+
301
+ function renderNotes() {
302
+ notesContainer.innerHTML = '';
303
+
304
+ if (notes.length === 0) {
305
+ emptyState.classList.remove('hidden');
306
+ return;
307
+ }
308
+
309
+ emptyState.classList.add('hidden');
310
+
311
+ notes.forEach(note => {
312
+ const noteDate = new Date(note.updatedAt);
313
+ const formattedDate = noteDate.toLocaleDateString('en-US', {
314
+ year: 'numeric',
315
+ month: 'short',
316
+ day: 'numeric',
317
+ hour: '2-digit',
318
+ minute: '2-digit'
319
+ });
320
+
321
+ const truncatedContent = note.content.length > 150
322
+ ? note.content.substring(0, 150) + '...'
323
+ : note.content;
324
+
325
+ const noteCard = document.createElement('div');
326
+ noteCard.className = 'bg-white overflow-hidden shadow rounded-lg note-card cursor-pointer';
327
+ noteCard.innerHTML = `
328
+ <div class="px-4 py-5 sm:p-6" onclick="openEditNoteModal('${note.id}')">
329
+ <div class="flex items-center justify-between">
330
+ <h3 class="text-lg leading-6 font-medium text-gray-900">${note.title}</h3>
331
+ <span class="text-xs text-gray-500">${formattedDate}</span>
332
+ </div>
333
+ <div class="mt-2 text-sm text-gray-600">
334
+ <p>${truncatedContent}</p>
335
+ </div>
336
+ </div>
337
+ `;
338
+
339
+ notesContainer.appendChild(noteCard);
340
+ });
341
+
342
+ feather.replace();
343
+ }
344
+
345
+ // Expose functions to global scope for inline event handlers
346
+ window.openEditNoteModal = openEditNoteModal;
347
+ });
348
+ </script>
349
+ </body>
350
  </html>
trash.html ADDED
@@ -0,0 +1,213 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>ScribbleSync - Trash</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <style>
12
+ .trash-item {
13
+ transition: all 0.2s ease;
14
+ }
15
+ .trash-item:hover {
16
+ transform: translateY(-2px);
17
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
18
+ }
19
+ </style>
20
+ </head>
21
+ <body class="bg-gray-50">
22
+ <!-- Navigation -->
23
+ <nav class="bg-white shadow-sm fixed w-full z-10">
24
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
25
+ <div class="flex justify-between h-16">
26
+ <div class="flex">
27
+ <div class="flex-shrink-0 flex items-center">
28
+ <i data-feather="edit-3" class="text-indigo-600 h-6 w-6"></i>
29
+ <span class="ml-2 text-xl font-bold text-indigo-600">ScribbleSync</span>
30
+ </div>
31
+ <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
32
+ <a href="index.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
33
+ Notes
34
+ </a>
35
+ <a href="history.html" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
36
+ History
37
+ </a>
38
+ <a href="trash.html" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">
39
+ Trash
40
+ </a>
41
+ </div>
42
+ </div>
43
+ <div class="-mr-2 flex items-center sm:hidden">
44
+ <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
45
+ <i data-feather="menu"></i>
46
+ </button>
47
+ </div>
48
+ </div>
49
+ </div>
50
+
51
+ <!-- Mobile menu -->
52
+ <div id="mobile-menu" class="sm:hidden hidden">
53
+ <div class="pt-2 pb-3 space-y-1">
54
+ <a href="index.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
55
+ Notes
56
+ </a>
57
+ <a href="history.html" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
58
+ History
59
+ </a>
60
+ <a href="trash.html" class="bg-indigo-50 border-indigo-500 text-indigo-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">
61
+ Trash
62
+ </a>
63
+ </div>
64
+ </div>
65
+ </nav>
66
+
67
+ <!-- Main Content -->
68
+ <main class="pt-20 pb-10 px-4 sm:px-6 lg:px-8">
69
+ <div class="max-w-7xl mx-auto">
70
+ <div class="mb-8">
71
+ <h1 class="text-3xl font-bold text-gray-900">Trash</h1>
72
+ <p class="mt-2 text-sm text-gray-500">Deleted notes will be permanently removed after 30 days</p>
73
+ </div>
74
+
75
+ <!-- Trash Items -->
76
+ <div id="trash-container" class="space-y-4">
77
+ <!-- Trash items will be added here dynamically -->
78
+ <div id="empty-trash" class="text-center py-16">
79
+ <i data-feather="trash-2" class="mx-auto h-12 w-12 text-gray-400"></i>
80
+ <h3 class="mt-2 text-lg font-medium text-gray-900">Trash is empty</h3>
81
+ <p class="mt-1 text-sm text-gray-500">Deleted notes will appear here</p>
82
+ </div>
83
+ </div>
84
+ </div>
85
+ </main>
86
+
87
+ <script>
88
+ document.addEventListener('DOMContentLoaded', function() {
89
+ feather.replace();
90
+
91
+ // Mobile menu toggle
92
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
93
+ const mobileMenu = document.getElementById('mobile-menu');
94
+
95
+ mobileMenuButton.addEventListener('click', function() {
96
+ if (mobileMenu.classList.contains('hidden')) {
97
+ mobileMenu.classList.remove('hidden');
98
+ } else {
99
+ mobileMenu.classList.add('hidden');
100
+ }
101
+ });
102
+
103
+ // Load trash items from localStorage
104
+ const trash = JSON.parse(localStorage.getItem('trash')) || [];
105
+ const trashContainer = document.getElementById('trash-container');
106
+ const emptyTrash = document.getElementById('empty-trash');
107
+
108
+ function renderTrashItems() {
109
+ trashContainer.innerHTML = '';
110
+
111
+ if (trash.length === 0) {
112
+ emptyTrash.classList.remove('hidden');
113
+ return;
114
+ }
115
+
116
+ emptyTrash.classList.add('hidden');
117
+
118
+ trash.forEach(item => {
119
+ const itemDate = new Date(item.deletedAt);
120
+ const formattedDate = itemDate.toLocaleDateString('en-US', {
121
+ year: 'numeric',
122
+ month: 'short',
123
+ day: 'numeric',
124
+ hour: '2-digit',
125
+ minute: '2-digit'
126
+ });
127
+
128
+ const daysLeft = 30 - Math.floor((new Date() - itemDate) / (1000 * 60 * 60 * 24));
129
+
130
+ const trashItem = document.createElement('div');
131
+ trashItem.className = 'bg-white overflow-hidden shadow rounded-lg trash-item p-6';
132
+ trashItem.innerHTML = `
133
+ <div class="flex justify-between items-start">
134
+ <div>
135
+ <h3 class="text-lg font-medium text-gray-900">${item.title}</h3>
136
+ <p class="text-sm text-gray-500 mt-1">Deleted ${formattedDate}</p>
137
+ <p class="text-sm ${daysLeft > 7 ? 'text-green-600' : 'text-red-600'} mt-1">
138
+ ${daysLeft > 0 ? `Will be permanently deleted in ${daysLeft} days` : 'Will be deleted soon'}
139
+ </p>
140
+ </div>
141
+ <div class="flex space-x-2">
142
+ <button class="restore-btn p-2 rounded-full hover:bg-gray-100" data-id="${item.id}">
143
+ <i data-feather="rotate-ccw" class="text-indigo-600"></i>
144
+ </button>
145
+ <button class="delete-forever-btn p-2 rounded-full hover:bg-red-50" data-id="${item.id}">
146
+ <i data-feather="trash" class="text-red-600"></i>
147
+ </button>
148
+ </div>
149
+ </div>
150
+ <div class="mt-4 text-sm text-gray-600">
151
+ <p>${item.content.substring(0, 200)}${item.content.length > 200 ? '...' : ''}</p>
152
+ </div>
153
+ `;
154
+
155
+ trashContainer.appendChild(trashItem);
156
+ });
157
+
158
+ feather.replace();
159
+
160
+ // Add event listeners to buttons
161
+ document.querySelectorAll('.restore-btn').forEach(btn => {
162
+ btn.addEventListener('click', restoreItem);
163
+ });
164
+
165
+ document.querySelectorAll('.delete-forever-btn').forEach(btn => {
166
+ btn.addEventListener('click', deleteForever);
167
+ });
168
+ }
169
+
170
+ function restoreItem(e) {
171
+ const id = e.currentTarget.getAttribute('data-id');
172
+ const itemIndex = trash.findIndex(item => item.id === id);
173
+
174
+ if (itemIndex !== -1) {
175
+ const restoredItem = trash[itemIndex];
176
+
177
+ // Add back to notes
178
+ const notes = JSON.parse(localStorage.getItem('notes')) || [];
179
+ notes.unshift({
180
+ id: restoredItem.id,
181
+ title: restoredItem.title,
182
+ content: restoredItem.content,
183
+ createdAt: restoredItem.createdAt,
184
+ updatedAt: new Date().toISOString()
185
+ });
186
+ localStorage.setItem('notes', JSON.stringify(notes));
187
+
188
+ // Remove from trash
189
+ trash.splice(itemIndex, 1);
190
+ localStorage.setItem('trash', JSON.stringify(trash));
191
+
192
+ renderTrashItems();
193
+ }
194
+ }
195
+
196
+ function deleteForever(e) {
197
+ if (confirm('Are you sure you want to permanently delete this note? This action cannot be undone.')) {
198
+ const id = e.currentTarget.getAttribute('data-id');
199
+ const itemIndex = trash.findIndex(item => item.id === id);
200
+
201
+ if (itemIndex !== -1) {
202
+ trash.splice(itemIndex, 1);
203
+ localStorage.setItem('trash', JSON.stringify(trash));
204
+ renderTrashItems();
205
+ }
206
+ }
207
+ }
208
+
209
+ renderTrashItems();
210
+ });
211
+ </script>
212
+ </body>
213
+ </html>