Hugging Face's logo

Spaces:
Jdifb
/
linknotemaster-pro
Running

App Files Community
Jdifb commited on
Commit
43c33a1
·
verified ·
1 Parent(s): 1020731

build me a app where I can write notes store links. like a note app but with more features add more features

Browse files
Files changed (3) hide show
  1. README.md +9 -5
  2. index.html +35 -17
  3. notes.html +284 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Linknotemaster Pro
3
- emoji: 🔥
4
- colorFrom: blue
5
- colorTo: purple
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: LinkNoteMaster Pro 🚀
3
+ colorFrom: yellow
4
+ colorTo: blue
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
+
index.html CHANGED
@@ -1,19 +1,37 @@
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>
3
+ <head>
4
+ <title>My app</title>
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <meta charset="utf-8">
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ </head>
9
+ <body class="flex justify-center items-center h-screen overflow-hidden bg-white font-sans text-center px-6">
10
+ <div class="w-full max-w-2xl mx-auto">
11
+ <span class="text-xs rounded-full mb-4 inline-block px-3 py-1 border border-blue-500/20 bg-blue-500/10 text-blue-600">🚀 LinkNoteMaster Pro</span>
12
+ <h1 class="text-4xl lg:text-6xl font-bold font-sans mb-8">
13
+ <span class="text-2xl lg:text-4xl text-gray-500 block font-medium mb-4">Your Ultimate Note-Taking Companion</span>
14
+ Organize Links & Notes<br>Like Never Before
15
+ </h1>
16
+ <p class="text-lg text-gray-600 mb-8 max-w-xl mx-auto">
17
+ Capture ideas, save links, and stay organized with our powerful note-taking app. Features include favorites, private notes, and smart search.
18
+ </p>
19
+ <div class="flex flex-col sm:flex-row gap-4 justify-center">
20
+ <a href="notes.html" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-4 rounded-lg font-semibold text-lg transition-colors shadow-lg hover:shadow-xl">
21
+ <i data-feather="play" class="w-5 h-5 inline mr-2"></i>
22
+ Get Started
23
+ </a>
24
+ <button class="border border-gray-300 hover:bg-gray-50 text-gray-700 px-8 py-4 rounded-lg font-semibold text-lg transition-colors">
25
+ <i data-feather="info" class="w-5 h-5 inline mr-2"></i>
26
+ Learn More
27
+ </button>
28
+ </div>
29
+ </div>
30
+ <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="absolute bottom-8 left-0 w-[100px] transform rotate-[30deg]" />
31
+ <script src="https://unpkg.com/feather-icons"></script>
32
+ <script>
33
+ feather.replace();
34
+ </script>
35
+ <script></script>
36
+ </body>
37
  </html>
notes.html ADDED
@@ -0,0 +1,284 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>LinkNoteMaster Pro - Notes</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ </head>
11
+ <body class="bg-gray-50 min-h-screen">
12
+ <!-- Header -->
13
+ <header class="bg-white shadow-sm border-b">
14
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
15
+ <div class="flex justify-between items-center py-4">
16
+ <div class="flex items-center space-x-4">
17
+ <a href="index.html" class="text-gray-600 hover:text-gray-900">
18
+ <i data-feather="arrow-left"></i>
19
+ </a>
20
+ <h1 class="text-2xl font-bold text-gray-900">LinkNoteMaster Pro</h1>
21
+ </div>
22
+ <button id="newNoteBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-colors">
23
+ <i data-feather="plus"></i>
24
+ <span>New Note</span>
25
+ </button>
26
+ </div>
27
+ </div>
28
+ </header>
29
+
30
+ <!-- Main Content -->
31
+ <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
32
+ <!-- Search and Filter -->
33
+ <div class="mb-8">
34
+ <div class="flex flex-col sm:flex-row gap-4">
35
+ <div class="flex-1">
36
+ <div class="relative">
37
+ <input type="text" id="searchInput" placeholder="Search notes and links..." class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
38
+ <i data-feather="search" class="absolute left-3 top-3.5 text-gray-400"></i>
39
+ </div>
40
+ </div>
41
+ <div class="flex space-x-2">
42
+ <select id="filterSelect" class="border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent">
43
+ <option value="all">All Notes</option>
44
+ <option value="text">Text Only</option>
45
+ <option value="link">Links Only</option>
46
+ <option value="favorite">Favorites</option>
47
+ </select>
48
+ </div>
49
+ </div>
50
+ </div>
51
+
52
+ <!-- Notes Grid -->
53
+ <div id="notesContainer" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
54
+ <!-- Notes will be dynamically added here -->
55
+ </div>
56
+
57
+ <!-- Empty State -->
58
+ <div id="emptyState" class="text-center py-16 hidden">
59
+ <i data-feather="file-text" class="w-16 h-16 text-gray-300 mx-auto mb-4"></i>
60
+ <h3 class="text-lg font-medium text-gray-900 mb-2">No notes yet</h3>
61
+ <p class="text-gray-500 mb-6">Create your first note to get started!</p>
62
+ <button id="emptyNewNoteBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg transition-colors">
63
+ Create Your First Note
64
+ </button>
65
+ </div>
66
+ </main>
67
+
68
+ <!-- Add/Edit Note Modal -->
69
+ <div id="noteModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden">
70
+ <div class="bg-white rounded-xl shadow-2xl max-w-2xl w-full max-h-[90vh] overflow-hidden">
71
+ <div class="flex justify-between items-center p-6 border-b">
72
+ <h3 class="text-xl font-semibold" id="modalTitle">New Note</h3>
73
+ <button id="closeModal" class="text-gray-400 hover:text-gray-600">
74
+ <i data-feather="x"></i>
75
+ </button>
76
+ </div>
77
+ <div class="p-6">
78
+ <form id="noteForm">
79
+ <div class="space-y-4">
80
+ <div>
81
+ <label class="block text-sm font-medium text-gray-700 mb-2">Title</label>
82
+ <input type="text" id="noteTitle" class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Enter note title" required>
83
+ </div>
84
+ <div>
85
+ <label class="block text-sm font-medium text-gray-700 mb-2">Content</label>
86
+ <textarea id="noteContent" rows="6" class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="Enter your note content..."></textarea>
87
+ </div>
88
+ <div>
89
+ <label class="block text-sm font-medium text-gray-700 mb-2">Link (Optional)</label>
90
+ <input type="url" id="noteLink" class="w-full border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500 focus:border-transparent" placeholder="https://example.com">
91
+ </div>
92
+ <div class="flex items-center justify-between">
93
+ <div class="flex items-center space-x-4">
94
+ <label class="flex items-center">
95
+ <input type="checkbox" id="noteFavorite" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
96
+ <span class="ml-2 text-sm text-gray-700">Mark as favorite</span>
97
+ </label>
98
+ <label class="flex items-center">
99
+ <input type="checkbox" id="notePrivate" class="rounded border-gray-300 text-blue-600 focus:ring-blue-500">
100
+ <span class="ml-2 text-sm text-gray-700">Private note</span>
101
+ </label>
102
+ </div>
103
+ <div class="flex space-x-3">
104
+ <button type="button" id="cancelNote" class="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors">
105
+ Cancel
106
+ </button>
107
+ <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2 rounded-lg transition-colors">
108
+ Save Note
109
+ </button>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ </form>
114
+ </div>
115
+ </div>
116
+ </div>
117
+
118
+ <script>
119
+ // Notes data structure
120
+ let notes = JSON.parse(localStorage.getItem('notes')) || [];
121
+ let currentEditingId = null;
122
+
123
+ // DOM Elements
124
+ const notesContainer = document.getElementById('notesContainer');
125
+ const emptyState = document.getElementById('emptyState');
126
+ const noteModal = document.getElementById('noteModal');
127
+ const noteForm = document.getElementById('noteForm');
128
+ const searchInput = document.getElementById('searchInput');
129
+ const filterSelect = document.getElementById('filterSelect');
130
+
131
+ // Initialize
132
+ document.addEventListener('DOMContentLoaded', function() {
133
+ feather.replace();
134
+ renderNotes();
135
+ setupEventListeners();
136
+ });
137
+
138
+ function setupEventListeners() {
139
+ // New note buttons
140
+ document.getElementById('newNoteBtn').addEventListener('click', () => openModal());
141
+ document.getElementById('emptyNewNoteBtn').addEventListener('click', () => openModal());
142
+
143
+ // Modal controls
144
+ document.getElementById('closeModal').addEventListener('click', () => closeModal());
145
+ document.getElementById('cancelNote').addEventListener('click', () => closeModal());
146
+
147
+ // Form submission
148
+ noteForm.addEventListener('submit', handleNoteSubmit);
149
+
150
+ // Search and filter
151
+ searchInput.addEventListener('input', renderNotes);
152
+ filterSelect.addEventListener('change', renderNotes);
153
+ }
154
+
155
+ function openModal(note = null) {
156
+ currentEditingId = note ? note.id : null;
157
+ document.getElementById('modalTitle').textContent = note ? 'Edit Note' : 'New Note';
158
+ document.getElementById('noteTitle').value = note ? note.title : '';
159
+ document.getElementById('noteContent').value = note ? note.content : '';
160
+ document.getElementById('noteLink').value = note ? note.link || '' : '';
161
+ document.getElementById('noteFavorite').checked = note ? note.favorite : false;
162
+ document.getElementById('notePrivate').checked = note ? note.private : false;
163
+ noteModal.classList.remove('hidden');
164
+ }
165
+
166
+ function closeModal() {
167
+ noteModal.classList.add('hidden');
168
+ currentEditingId = null;
169
+ noteForm.reset();
170
+ }
171
+
172
+ function handleNoteSubmit(e) {
173
+ e.preventDefault();
174
+
175
+ const noteData = {
176
+ id: currentEditingId || Date.now().toString(),
177
+ title: document.getElementById('noteTitle').value,
178
+ content: document.getElementById('noteContent').value,
179
+ link: document.getElementById('noteLink').value,
180
+ favorite: document.getElementById('noteFavorite').checked,
181
+ private: document.getElementById('notePrivate').checked,
182
+ createdAt: currentEditingId ? notes.find(n => n.id === currentEditingId).createdAt : new Date().toISOString(),
183
+ updatedAt: new Date().toISOString()
184
+ };
185
+
186
+ if (currentEditingId) {
187
+ const index = notes.findIndex(n => n.id === currentEditingId);
188
+ notes[index] = noteData;
189
+ } else {
190
+ notes.unshift(noteData);
191
+ }
192
+
193
+ saveNotes();
194
+ renderNotes();
195
+ closeModal();
196
+ }
197
+
198
+ function saveNotes() {
199
+ localStorage.setItem('notes', JSON.stringify(notes));
200
+ }
201
+
202
+ function renderNotes() {
203
+ const searchTerm = searchInput.value.toLowerCase();
204
+ const filter = filterSelect.value;
205
+
206
+ let filteredNotes = notes.filter(note => {
207
+ const matchesSearch = note.title.toLowerCase().includes(searchTerm) ||
208
+ note.content.toLowerCase().includes(searchTerm) ||
209
+ (note.link && note.link.toLowerCase().includes(searchTerm));
210
+
211
+ if (filter === 'text') return matchesSearch && !note.link;
212
+ if (filter === 'link') return matchesSearch && note.link;
213
+ if (filter === 'favorite') return matchesSearch && note.favorite;
214
+ return matchesSearch;
215
+ });
216
+
217
+ if (filteredNotes.length === 0) {
218
+ notesContainer.classList.add('hidden');
219
+ emptyState.classList.remove('hidden');
220
+ return;
221
+ }
222
+
223
+ notesContainer.classList.remove('hidden');
224
+ emptyState.classList.add('hidden');
225
+
226
+ notesContainer.innerHTML = filteredNotes.map(note => `
227
+ <div class="bg-white rounded-xl shadow-sm border border-gray-200 hover:shadow-md transition-shadow overflow-hidden">
228
+ <div class="p-6">
229
+ <div class="flex justify-between items-start mb-3">
230
+ <h3 class="font-semibold text-gray-900 text-lg truncate">${note.title}</h3>
231
+ <div class="flex space-x-1">
232
+ ${note.favorite ? '<i data-feather="star" class="w-4 h-4 text-yellow-500 fill-current"></i>' : ''}
233
+ ${note.private ? '<i data-feather="lock" class="w-4 h-4 text-gray-400"></i>' : ''}
234
+ </div>
235
+ </div>
236
+
237
+ <p class="text-gray-600 text-sm mb-4 line-clamp-3">${note.content}</p>
238
+
239
+ ${note.link ? `
240
+ <div class="mb-4">
241
+ <a href="${note.link}" target="_blank" class="text-blue-600 hover:text-blue-800 text-sm truncate block">
242
+ <i data-feather="link" class="w-3 h-3 inline mr-1"></i>
243
+ ${note.link}
244
+ </a>
245
+ </div>
246
+ ` : ''}
247
+
248
+ <div class="flex justify-between items-center text-xs text-gray-500">
249
+ <span>${new Date(note.updatedAt).toLocaleDateString()}</span>
250
+ <div class="flex space-x-2">
251
+ <button onclick="editNote('${note.id}')" class="text-gray-400 hover:text-blue-600 transition-colors">
252
+ <i data-feather="edit-2" class="w-4 h-4"></i>
253
+ </button>
254
+ <button onclick="deleteNote('${note.id}')" class="text-gray-400 hover:text-red-600 transition-colors">
255
+ <i data-feather="trash-2" class="w-4 h-4"></i>
256
+ </button>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ `).join('');
262
+
263
+ feather.replace();
264
+ }
265
+
266
+ function editNote(id) {
267
+ const note = notes.find(n => n.id === id);
268
+ if (note) openModal(note);
269
+ }
270
+
271
+ function deleteNote(id) {
272
+ if (confirm('Are you sure you want to delete this note?')) {
273
+ notes = notes.filter(note => note.id !== id);
274
+ saveNotes();
275
+ renderNotes();
276
+ }
277
+ }
278
+
279
+ // Make functions globally available for onclick handlers
280
+ window.editNote = editNote;
281
+ window.deleteNote = deleteNote;
282
+ </script>
283
+ </body>
284
+ </html>