Hugging Face's logo

Spaces:
sumitjangir
/
app
Running

App Files Community
sumitjangir commited on
Commit
cb2f81c
·
verified ·
1 Parent(s): 57103f9

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +296 -19
  3. prompts.txt +1 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: App
3
- emoji: 🌖
4
- colorFrom: gray
5
- colorTo: yellow
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: app
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: purple
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,296 @@
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>Advanced Note Taking App</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
+ .note-content {
11
+ min-height: 200px;
12
+ border: 1px solid #e2e8f0;
13
+ padding: 1rem;
14
+ border-radius: 0.5rem;
15
+ outline: none;
16
+ }
17
+
18
+ .dark .note-content {
19
+ background-color: #1e293b;
20
+ border-color: #475569;
21
+ color: #f8fafc;
22
+ }
23
+
24
+ .dark .note-content:focus {
25
+ border-color: #60a5fa;
26
+ }
27
+
28
+ .ql-toolbar.ql-snow {
29
+ border-radius: 0.5rem 0.5rem 0 0;
30
+ }
31
+
32
+ .ql-container.ql-snow {
33
+ border-radius: 0 0 0.5rem 0.5rem;
34
+ min-height: 200px;
35
+ }
36
+
37
+ .dark .ql-toolbar.ql-snow {
38
+ background-color: #1e293b;
39
+ border-color: #475569;
40
+ }
41
+
42
+ .dark .ql-container.ql-snow {
43
+ background-color: #1e293b;
44
+ border-color: #475569;
45
+ color: #f8fafc;
46
+ }
47
+
48
+ .dark .ql-editor {
49
+ color: #f8fafc;
50
+ }
51
+
52
+ .tag {
53
+ display: inline-flex;
54
+ align-items: center;
55
+ padding: 0.25rem 0.5rem;
56
+ border-radius: 9999px;
57
+ font-size: 0.75rem;
58
+ font-weight: 500;
59
+ }
60
+
61
+ .tag-remove {
62
+ margin-left: 0.25rem;
63
+ cursor: pointer;
64
+ }
65
+
66
+ .transition-all {
67
+ transition: all 0.3s ease;
68
+ }
69
+
70
+ .note-card {
71
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
72
+ }
73
+
74
+ .note-card:hover {
75
+ transform: translateY(-2px);
76
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
77
+ }
78
+
79
+ .dark .note-card:hover {
80
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
81
+ }
82
+ </style>
83
+ <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
84
+ </head>
85
+ <body class="bg-gray-50 dark:bg-gray-900 transition-all">
86
+ <div class="container mx-auto px-4 py-8 max-w-6xl">
87
+ <!-- Header -->
88
+ <header class="flex justify-between items-center mb-8">
89
+ <h1 class="text-3xl font-bold text-gray-800 dark:text-white">
90
+ <i class="fas fa-book mr-2"></i> Notes App
91
+ </h1>
92
+ <div class="flex items-center space-x-4">
93
+ <button id="theme-toggle" class="p-2 rounded-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200">
94
+ <i class="fas fa-moon dark:hidden"></i>
95
+ <i class="fas fa-sun hidden dark:inline"></i>
96
+ </button>
97
+ <button id="new-note-btn" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
98
+ <i class="fas fa-plus mr-2"></i> New Note
99
+ </button>
100
+ </div>
101
+ </header>
102
+
103
+ <!-- Search and Filter -->
104
+ <div class="mb-6 flex flex-col md:flex-row gap-4">
105
+ <div class="relative flex-grow">
106
+ <input type="text" id="search-notes" placeholder="Search notes..."
107
+ class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white">
108
+ <i class="fas fa-search absolute right-3 top-3 text-gray-400"></i>
109
+ </div>
110
+ <div class="flex gap-2">
111
+ <select id="filter-tags" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white">
112
+ <option value="">All Tags</option>
113
+ </select>
114
+ <select id="sort-notes" class="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white">
115
+ <option value="newest">Newest First</option>
116
+ <option value="oldest">Oldest First</option>
117
+ <option value="title-asc">Title (A-Z)</option>
118
+ <option value="title-desc">Title (Z-A)</option>
119
+ </select>
120
+ </div>
121
+ </div>
122
+
123
+ <!-- Main Content -->
124
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
125
+ <!-- Notes List -->
126
+ <div class="lg:col-span-1 bg-white dark:bg-gray-800 rounded-lg shadow p-4 h-fit max-h-[600px] overflow-y-auto">
127
+ <h2 class="text-xl font-semibold mb-4 text-gray-800 dark:text-white">Your Notes</h2>
128
+ <div id="notes-list" class="space-y-3">
129
+ <!-- Notes will be added here dynamically -->
130
+ <div class="text-center py-8 text-gray-500 dark:text-gray-400">
131
+ <i class="fas fa-sticky-note text-4xl mb-2"></i>
132
+ <p>No notes yet. Create your first note!</p>
133
+ </div>
134
+ </div>
135
+ </div>
136
+
137
+ <!-- Note Editor -->
138
+ <div class="lg:col-span-2 bg-white dark:bg-gray-800 rounded-lg shadow p-6">
139
+ <div id="empty-state" class="text-center py-16 text-gray-500 dark:text-gray-400">
140
+ <i class="fas fa-edit text-5xl mb-4"></i>
141
+ <h3 class="text-xl font-medium mb-2">Select or create a note</h3>
142
+ <p>Start writing your thoughts, ideas, and reminders</p>
143
+ </div>
144
+
145
+ <div id="editor-container" class="hidden">
146
+ <input type="text" id="note-title" placeholder="Note Title"
147
+ class="w-full px-4 py-3 text-2xl font-bold border-b border-gray-200 dark:border-gray-700 mb-4 focus:outline-none dark:bg-gray-800 dark:text-white">
148
+
149
+ <div class="flex flex-wrap gap-2 mb-4" id="tags-container">
150
+ <input type="text" id="tag-input" placeholder="Add tags..."
151
+ class="px-3 py-1 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:text-white">
152
+ </div>
153
+
154
+ <!-- Rich Text Editor -->
155
+ <div id="editor" class="note-content dark:bg-gray-800"></div>
156
+
157
+ <div class="flex justify-between items-center mt-6">
158
+ <div class="text-sm text-gray-500 dark:text-gray-400" id="note-date">
159
+ Created: Just now
160
+ </div>
161
+ <div class="space-x-2">
162
+ <button id="delete-note" class="px-4 py-2 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors">
163
+ <i class="fas fa-trash mr-2"></i> Delete
164
+ </button>
165
+ <button id="save-note" class="px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition-colors">
166
+ <i class="fas fa-save mr-2"></i> Save
167
+ </button>
168
+ </div>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+
175
+ <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
176
+ <script>
177
+ document.addEventListener('DOMContentLoaded', function() {
178
+ // Initialize theme
179
+ if (localStorage.getItem('theme') === 'dark' || (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
180
+ document.documentElement.classList.add('dark');
181
+ } else {
182
+ document.documentElement.classList.remove('dark');
183
+ }
184
+
185
+ // Theme toggle
186
+ document.getElementById('theme-toggle').addEventListener('click', function() {
187
+ document.documentElement.classList.toggle('dark');
188
+ localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
189
+ });
190
+
191
+ // Initialize Quill editor
192
+ const quill = new Quill('#editor', {
193
+ theme: 'snow',
194
+ modules: {
195
+ toolbar: [
196
+ [{ 'header': [1, 2, 3, false] }],
197
+ ['bold', 'italic', 'underline', 'strike'],
198
+ [{ 'color': [] }, { 'background': [] }],
199
+ [{ 'list': 'ordered'}, { 'list': 'bullet' }],
200
+ ['link', 'image'],
201
+ ['clean']
202
+ ]
203
+ },
204
+ placeholder: 'Write your note here...'
205
+ });
206
+
207
+ // Notes data
208
+ let notes = JSON.parse(localStorage.getItem('notes')) || [];
209
+ let currentNoteId = null;
210
+ let allTags = new Set();
211
+
212
+ // Initialize the app
213
+ function initApp() {
214
+ updateNotesList();
215
+ updateTagFilter();
216
+
217
+ // Set up event listeners
218
+ document.getElementById('new-note-btn').addEventListener('click', createNewNote);
219
+ document.getElementById('save-note').addEventListener('click', saveNote);
220
+ document.getElementById('delete-note').addEventListener('click', deleteNote);
221
+ document.getElementById('search-notes').addEventListener('input', searchNotes);
222
+ document.getElementById('filter-tags').addEventListener('change', filterNotesByTag);
223
+ document.getElementById('sort-notes').addEventListener('change', sortNotes);
224
+
225
+ // Tag input
226
+ const tagInput = document.getElementById('tag-input');
227
+ tagInput.addEventListener('keydown', function(e) {
228
+ if (e.key === 'Enter' && tagInput.value.trim()) {
229
+ addTag(tagInput.value.trim());
230
+ tagInput.value = '';
231
+ }
232
+ });
233
+ }
234
+
235
+ // Create a new note
236
+ function createNewNote() {
237
+ const newNote = {
238
+ id: Date.now().toString(),
239
+ title: 'Untitled Note',
240
+ content: '',
241
+ tags: [],
242
+ createdAt: new Date().toISOString(),
243
+ updatedAt: new Date().toISOString()
244
+ };
245
+
246
+ notes.unshift(newNote);
247
+ currentNoteId = newNote.id;
248
+ localStorage.setItem('notes', JSON.stringify(notes));
249
+
250
+ showEditor(newNote);
251
+ updateNotesList();
252
+ document.getElementById('note-title').focus();
253
+ }
254
+
255
+ // Save the current note
256
+ function saveNote() {
257
+ if (!currentNoteId) return;
258
+
259
+ const noteIndex = notes.findIndex(note => note.id === currentNoteId);
260
+ if (noteIndex === -1) return;
261
+
262
+ const title = document.getElementById('note-title').value;
263
+ const content = quill.root.innerHTML;
264
+ const tags = Array.from(document.querySelectorAll('.tag')).map(tag => tag.textContent.replace('×', '').trim());
265
+
266
+ notes[noteIndex].title = title;
267
+ notes[noteIndex].content = content;
268
+ notes[noteIndex].tags = tags;
269
+ notes[noteIndex].updatedAt = new Date().toISOString();
270
+
271
+ localStorage.setItem('notes', JSON.stringify(notes));
272
+ updateNotesList();
273
+ updateTagFilter();
274
+
275
+ // Show success message
276
+ const saveBtn = document.getElementById('save-note');
277
+ const originalText = saveBtn.innerHTML;
278
+ saveBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Saved!';
279
+ setTimeout(() => {
280
+ saveBtn.innerHTML = originalText;
281
+ }, 2000);
282
+ }
283
+
284
+ // Delete the current note
285
+ function deleteNote() {
286
+ if (!currentNoteId || !confirm('Are you sure you want to delete this note?')) return;
287
+
288
+ notes = notes.filter(note => note.id !== currentNoteId);
289
+ localStorage.setItem('notes', JSON.stringify(notes));
290
+
291
+ currentNoteId = null;
292
+ document.getElementById('editor-container').classList.add('hidden');
293
+ document.getElementById('empty-state').classList.remove('hidden');
294
+
295
+ updateNotes
296
+ </html>
prompts.txt ADDED
@@ -0,0 +1 @@
 
 
1
+ I can't type any note or Text solve this and add more features try searching the internet about the best features and add theme button for UI for day/night