Hugging Face's logo

Spaces:
Multimedix
/
anycoder-287351b8
Running

App Files Community
Multimedix commited on
Commit
30ee50f
·
verified ·
1 Parent(s): 6e4327f

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +715 -19
index.html CHANGED
@@ -1,19 +1,715 @@
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="de">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Notizblock App</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary-color: #4f46e5;
11
+ --primary-light: #818cf8;
12
+ --primary-dark: #3730a3;
13
+ --secondary-color: #f3f4f6;
14
+ --text-color: #1f2937;
15
+ --text-light: #6b7280;
16
+ --success-color: #10b981;
17
+ --warning-color: #f59e0b;
18
+ --danger-color: #ef4444;
19
+ --border-color: #e5e7eb;
20
+ --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
21
+ --radius: 8px;
22
+ }
23
+
24
+ * {
25
+ margin: 0;
26
+ padding: 0;
27
+ box-sizing: border-box;
28
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
29
+ }
30
+
31
+ body {
32
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
33
+ color: var(--text-color);
34
+ min-height: 100vh;
35
+ padding: 20px;
36
+ }
37
+
38
+ .container {
39
+ max-width: 1200px;
40
+ margin: 0 auto;
41
+ }
42
+
43
+ .header {
44
+ display: flex;
45
+ justify-content: space-between;
46
+ align-items: center;
47
+ padding: 20px 0;
48
+ margin-bottom: 30px;
49
+ border-bottom: 2px solid var(--border-color);
50
+ }
51
+
52
+ .header h1 {
53
+ font-size: 2.5rem;
54
+ background: linear-gradient(90deg, var(--primary-color), var(--primary-light));
55
+ -webkit-background-clip: text;
56
+ background-clip: text;
57
+ color: transparent;
58
+ display: flex;
59
+ align-items: center;
60
+ gap: 10px;
61
+ }
62
+
63
+ .header h1 i {
64
+ font-size: 2.2rem;
65
+ }
66
+
67
+ .header .anycoder {
68
+ color: var(--text-light);
69
+ font-size: 0.9rem;
70
+ text-decoration: none;
71
+ transition: color 0.3s;
72
+ }
73
+
74
+ .header .anycoder:hover {
75
+ color: var(--primary-color);
76
+ }
77
+
78
+ .app-container {
79
+ display: grid;
80
+ grid-template-columns: 300px 1fr;
81
+ gap: 30px;
82
+ }
83
+
84
+ @media (max-width: 768px) {
85
+ .app-container {
86
+ grid-template-columns: 1fr;
87
+ }
88
+ }
89
+
90
+ .sidebar {
91
+ background: white;
92
+ border-radius: var(--radius);
93
+ padding: 25px;
94
+ box-shadow: var(--shadow);
95
+ height: fit-content;
96
+ }
97
+
98
+ .note-form {
99
+ margin-bottom: 30px;
100
+ }
101
+
102
+ .note-form h2 {
103
+ margin-bottom: 15px;
104
+ font-size: 1.3rem;
105
+ color: var(--primary-color);
106
+ }
107
+
108
+ .form-group {
109
+ margin-bottom: 15px;
110
+ }
111
+
112
+ .form-group label {
113
+ display: block;
114
+ margin-bottom: 5px;
115
+ font-weight: 500;
116
+ }
117
+
118
+ .form-group input,
119
+ .form-group textarea,
120
+ .form-group select {
121
+ width: 100%;
122
+ padding: 10px;
123
+ border: 1px solid var(--border-color);
124
+ border-radius: var(--radius);
125
+ font-size: 1rem;
126
+ transition: border-color 0.3s;
127
+ }
128
+
129
+ .form-group input:focus,
130
+ .form-group textarea:focus,
131
+ .form-group select:focus {
132
+ outline: none;
133
+ border-color: var(--primary-color);
134
+ }
135
+
136
+ .form-group textarea {
137
+ min-height: 120px;
138
+ resize: vertical;
139
+ }
140
+
141
+ .btn {
142
+ padding: 10px 20px;
143
+ border: none;
144
+ border-radius: var(--radius);
145
+ cursor: pointer;
146
+ font-weight: 600;
147
+ transition: all 0.3s;
148
+ display: inline-flex;
149
+ align-items: center;
150
+ justify-content: center;
151
+ gap: 8px;
152
+ }
153
+
154
+ .btn-primary {
155
+ background: var(--primary-color);
156
+ color: white;
157
+ }
158
+
159
+ .btn-primary:hover {
160
+ background: var(--primary-dark);
161
+ }
162
+
163
+ .btn-danger {
164
+ background: var(--danger-color);
165
+ color: white;
166
+ }
167
+
168
+ .btn-danger:hover {
169
+ background: #dc2626;
170
+ }
171
+
172
+ .btn-success {
173
+ background: var(--success-color);
174
+ color: white;
175
+ }
176
+
177
+ .btn-success:hover {
178
+ background: #059669;
179
+ }
180
+
181
+ .btn-full {
182
+ width: 100%;
183
+ }
184
+
185
+ .filter-section {
186
+ margin-top: 25px;
187
+ }
188
+
189
+ .filter-section h3 {
190
+ margin-bottom: 15px;
191
+ font-size: 1.1rem;
192
+ color: var(--primary-color);
193
+ }
194
+
195
+ .filter-options {
196
+ display: flex;
197
+ flex-direction: column;
198
+ gap: 10px;
199
+ }
200
+
201
+ .filter-option {
202
+ display: flex;
203
+ align-items: center;
204
+ gap: 10px;
205
+ padding: 8px 12px;
206
+ border-radius: var(--radius);
207
+ cursor: pointer;
208
+ transition: background 0.3s;
209
+ }
210
+
211
+ .filter-option:hover {
212
+ background: var(--secondary-color);
213
+ }
214
+
215
+ .filter-option.active {
216
+ background: var(--primary-light);
217
+ color: white;
218
+ }
219
+
220
+ .notes-grid {
221
+ display: grid;
222
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
223
+ gap: 20px;
224
+ }
225
+
226
+ .note-card {
227
+ background: white;
228
+ border-radius: var(--radius);
229
+ padding: 20px;
230
+ box-shadow: var(--shadow);
231
+ transition: transform 0.3s, box-shadow 0.3s;
232
+ position: relative;
233
+ overflow: hidden;
234
+ }
235
+
236
+ .note-card:hover {
237
+ transform: translateY(-5px);
238
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
239
+ }
240
+
241
+ .note-card.pinned::before {
242
+ content: '';
243
+ position: absolute;
244
+ top: 10px;
245
+ right: 10px;
246
+ width: 20px;
247
+ height: 20px;
248
+ background: var(--warning-color);
249
+ border-radius: 50%;
250
+ }
251
+
252
+ .note-header {
253
+ display: flex;
254
+ justify-content: space-between;
255
+ align-items: flex-start;
256
+ margin-bottom: 10px;
257
+ }
258
+
259
+ .note-title {
260
+ font-size: 1.2rem;
261
+ font-weight: 600;
262
+ color: var(--primary-color);
263
+ margin-right: 10px;
264
+ word-break: break-word;
265
+ }
266
+
267
+ .note-category {
268
+ display: inline-block;
269
+ padding: 4px 8px;
270
+ border-radius: 20px;
271
+ font-size: 0.8rem;
272
+ font-weight: 500;
273
+ background: var(--secondary-color);
274
+ }
275
+
276
+ .note-content {
277
+ margin-bottom: 15px;
278
+ color: var(--text-color);
279
+ line-height: 1.5;
280
+ word-break: break-word;
281
+ }
282
+
283
+ .note-footer {
284
+ display: flex;
285
+ justify-content: space-between;
286
+ align-items: center;
287
+ margin-top: 15px;
288
+ padding-top: 15px;
289
+ border-top: 1px solid var(--border-color);
290
+ }
291
+
292
+ .note-date {
293
+ font-size: 0.8rem;
294
+ color: var(--text-light);
295
+ }
296
+
297
+ .note-actions {
298
+ display: flex;
299
+ gap: 8px;
300
+ }
301
+
302
+ .note-actions button {
303
+ background: none;
304
+ border: none;
305
+ cursor: pointer;
306
+ font-size: 1rem;
307
+ color: var(--text-light);
308
+ transition: color 0.3s;
309
+ padding: 5px;
310
+ }
311
+
312
+ .note-actions button:hover {
313
+ color: var(--primary-color);
314
+ }
315
+
316
+ .empty-state {
317
+ grid-column: 1 / -1;
318
+ text-align: center;
319
+ padding: 60px 20px;
320
+ color: var(--text-light);
321
+ }
322
+
323
+ .empty-state i {
324
+ font-size: 4rem;
325
+ margin-bottom: 20px;
326
+ color: var(--border-color);
327
+ }
328
+
329
+ .empty-state h3 {
330
+ font-size: 1.5rem;
331
+ margin-bottom: 10px;
332
+ }
333
+
334
+ .search-bar {
335
+ margin-bottom: 20px;
336
+ position: relative;
337
+ }
338
+
339
+ .search-bar input {
340
+ width: 100%;
341
+ padding: 12px 15px 12px 45px;
342
+ border: 1px solid var(--border-color);
343
+ border-radius: var(--radius);
344
+ font-size: 1rem;
345
+ transition: border-color 0.3s;
346
+ }
347
+
348
+ .search-bar input:focus {
349
+ outline: none;
350
+ border-color: var(--primary-color);
351
+ }
352
+
353
+ .search-bar i {
354
+ position: absolute;
355
+ left: 15px;
356
+ top: 50%;
357
+ transform: translateY(-50%);
358
+ color: var(--text-light);
359
+ }
360
+
361
+ .category-work { background: #e0f2fe; color: #0369a1; }
362
+ .category-personal { background: #f0fdf4; color: #15803d; }
363
+ .category-ideas { background: #fef7cd; color: #a16207; }
364
+ .category-todo { background: #fef2f2; color: #dc2626; }
365
+ .category-other { background: #f3f4f6; color: #4b5563; }
366
+
367
+ .stats {
368
+ display: flex;
369
+ justify-content: space-between;
370
+ margin-bottom: 20px;
371
+ padding: 15px;
372
+ background: white;
373
+ border-radius: var(--radius);
374
+ box-shadow: var(--shadow);
375
+ }
376
+
377
+ .stat-item {
378
+ text-align: center;
379
+ }
380
+
381
+ .stat-number {
382
+ font-size: 1.8rem;
383
+ font-weight: 700;
384
+ color: var(--primary-color);
385
+ }
386
+
387
+ .stat-label {
388
+ font-size: 0.9rem;
389
+ color: var(--text-light);
390
+ }
391
+
392
+ @media (max-width: 480px) {
393
+ .header {
394
+ flex-direction: column;
395
+ align-items: flex-start;
396
+ gap: 10px;
397
+ }
398
+
399
+ .notes-grid {
400
+ grid-template-columns: 1fr;
401
+ }
402
+
403
+ .stats {
404
+ flex-direction: column;
405
+ gap: 15px;
406
+ }
407
+ }
408
+ </style>
409
+ </head>
410
+ <body>
411
+ <div class="container">
412
+ <div class="header">
413
+ <h1><i class="fas fa-sticky-note"></i> Notizblock App</h1>
414
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder">Built with anycoder</a>
415
+ </div>
416
+
417
+ <div class="app-container">
418
+ <div class="sidebar">
419
+ <div class="note-form">
420
+ <h2>Neue Notiz</h2>
421
+ <div class="form-group">
422
+ <label for="note-title">Titel</label>
423
+ <input type="text" id="note-title" placeholder="Titel der Notiz">
424
+ </div>
425
+ <div class="form-group">
426
+ <label for="note-content">Inhalt</label>
427
+ <textarea id="note-content" placeholder="Notizinhalt..."></textarea>
428
+ </div>
429
+ <div class="form-group">
430
+ <label for="note-category">Kategorie</label>
431
+ <select id="note-category">
432
+ <option value="personal">Persönlich</option>
433
+ <option value="work">Arbeit</option>
434
+ <option value="ideas">Ideen</option>
435
+ <option value="todo">Aufgaben</option>
436
+ <option value="other">Sonstiges</option>
437
+ </select>
438
+ </div>
439
+ <div class="form-group">
440
+ <label>
441
+ <input type="checkbox" id="note-pinned">
442
+ Notiz anheften
443
+ </label>
444
+ </div>
445
+ <button class="btn btn-primary btn-full" id="save-note">
446
+ <i class="fas fa-save"></i> Notiz speichern
447
+ </button>
448
+ </div>
449
+
450
+ <div class="filter-section">
451
+ <h3>Filter</h3>
452
+ <div class="filter-options">
453
+ <div class="filter-option active" data-filter="all">
454
+ <i class="fas fa-list"></i> Alle Notizen
455
+ </div>
456
+ <div class="filter-option" data-filter="personal">
457
+ <i class="fas fa-user"></i> Persönlich
458
+ </div>
459
+ <div class="filter-option" data-filter="work">
460
+ <i class="fas fa-briefcase"></i> Arbeit
461
+ </div>
462
+ <div class="filter-option" data-filter="ideas">
463
+ <i class="fas fa-lightbulb"></i> Ideen
464
+ </div>
465
+ <div class="filter-option" data-filter="todo">
466
+ <i class="fas fa-tasks"></i> Aufgaben
467
+ </div>
468
+ <div class="filter-option" data-filter="pinned">
469
+ <i class="fas fa-thumbtack"></i> Angeheftet
470
+ </div>
471
+ </div>
472
+ </div>
473
+ </div>
474
+
475
+ <div class="main-content">
476
+ <div class="search-bar">
477
+ <i class="fas fa-search"></i>
478
+ <input type="text" id="search-input" placeholder="Notizen durchsuchen...">
479
+ </div>
480
+
481
+ <div class="stats">
482
+ <div class="stat-item">
483
+ <div class="stat-number" id="total-notes">0</div>
484
+ <div class="stat-label">Notizen</div>
485
+ </div>
486
+ <div class="stat-item">
487
+ <div class="stat-number" id="pinned-notes">0</div>
488
+ <div class="stat-label">Angeheftet</div>
489
+ </div>
490
+ <div class="stat-item">
491
+ <div class="stat-number" id="categories-count">0</div>
492
+ <div class="stat-label">Kategorien</div>
493
+ </div>
494
+ </div>
495
+
496
+ <div class="notes-grid" id="notes-container">
497
+ <!-- Notizen werden hier dynamisch eingefügt -->
498
+ </div>
499
+ </div>
500
+ </div>
501
+ </div>
502
+
503
+ <script>
504
+ document.addEventListener('DOMContentLoaded', function() {
505
+ // Elemente referenzieren
506
+ const noteTitleInput = document.getElementById('note-title');
507
+ const noteContentInput = document.getElementById('note-content');
508
+ const noteCategorySelect = document.getElementById('note-category');
509
+ const notePinnedCheckbox = document.getElementById('note-pinned');
510
+ const saveNoteButton = document.getElementById('save-note');
511
+ const searchInput = document.getElementById('search-input');
512
+ const notesContainer = document.getElementById('notes-container');
513
+ const filterOptions = document.querySelectorAll('.filter-option');
514
+ const totalNotesElement = document.getElementById('total-notes');
515
+ const pinnedNotesElement = document.getElementById('pinned-notes');
516
+ const categoriesCountElement = document.getElementById('categories-count');
517
+
518
+ // Notizen aus dem localStorage laden oder leeres Array erstellen
519
+ let notes = JSON.parse(localStorage.getItem('notes')) || [];
520
+ let currentFilter = 'all';
521
+ let searchQuery = '';
522
+
523
+ // Funktion zum Speichern der Notizen im localStorage
524
+ function saveNotesToStorage() {
525
+ localStorage.setItem('notes', JSON.stringify(notes));
526
+ }
527
+
528
+ // Funktion zum Hinzufügen einer neuen Notiz
529
+ function addNote() {
530
+ const title = noteTitleInput.value.trim();
531
+ const content = noteContentInput.value.trim();
532
+ const category = noteCategorySelect.value;
533
+ const pinned = notePinnedCheckbox.checked;
534
+ const date = new Date().toLocaleDateString('de-DE');
535
+
536
+ if (title === '' || content === '') {
537
+ alert('Bitte geben Sie einen Titel und Inhalt für die Notiz ein.');
538
+ return;
539
+ }
540
+
541
+ const newNote = {
542
+ id: Date.now(),
543
+ title,
544
+ content,
545
+ category,
546
+ pinned,
547
+ date
548
+ };
549
+
550
+ notes.unshift(newNote);
551
+ saveNotesToStorage();
552
+ renderNotes();
553
+
554
+ // Formular zurücksetzen
555
+ noteTitleInput.value = '';
556
+ noteContentInput.value = '';
557
+ notePinnedCheckbox.checked = false;
558
+ }
559
+
560
+ // Funktion zum Löschen einer Notiz
561
+ function deleteNote(id) {
562
+ if (confirm('Möchten Sie diese Notiz wirklich löschen?')) {
563
+ notes = notes.filter(note => note.id !== id);
564
+ saveNotesToStorage();
565
+ renderNotes();
566
+ }
567
+ }
568
+
569
+ // Funktion zum Bearbeiten einer Notiz
570
+ function editNote(id) {
571
+ const note = notes.find(note => note.id === id);
572
+ if (note) {
573
+ noteTitleInput.value = note.title;
574
+ noteContentInput.value = note.content;
575
+ noteCategorySelect.value = note.category;
576
+ notePinnedCheckbox.checked = note.pinned;
577
+
578
+ // Nach dem Bearbeiten die Notiz löschen
579
+ deleteNote(id);
580
+ }
581
+
582
+ // Funktion zum Anheften/Abheften einer Notiz
583
+ function togglePin(id) {
584
+ const note = notes.find(note => note.id === id);
585
+ if (note) {
586
+ note.pinned = !note.pinned;
587
+ saveNotesToStorage();
588
+ renderNotes();
589
+ }
590
+ }
591
+
592
+ // Funktion zum Rendern der Notizen
593
+ function renderNotes() {
594
+ let filteredNotes = notes;
595
+
596
+ // Filter anwenden
597
+ if (currentFilter !== 'all') {
598
+ if (currentFilter === 'pinned') {
599
+ filteredNotes = notes.filter(note => note.pinned);
600
+ } else {
601
+ filteredNotes = notes.filter(note => note.category === currentFilter);
602
+ }
603
+
604
+ // Suche anwenden
605
+ if (searchQuery) {
606
+ const query = searchQuery.toLowerCase();
607
+ filteredNotes = filteredNotes.filter(note =>
608
+ note.title.toLowerCase().includes(query) ||
609
+ note.content.toLowerCase().includes(query)
610
+ );
611
+ }
612
+
613
+ // Statistik aktualisieren
614
+ updateStats();
615
+
616
+ // Notizen in den Container rendern
617
+ if (filteredNotes.length === 0) {
618
+ notesContainer.innerHTML = `
619
+ <div class="empty-state">
620
+ <i class="fas fa-sticky-note"></i>
621
+ <h3>Keine Notizen gefunden</h3>
622
+ <p>Erstellen Sie Ihre erste Notiz oder ändern Sie Ihre Filtereinstellungen.</p>
623
+ </div>
624
+ `;
625
+ return;
626
+ }
627
+
628
+ // Sortieren: Angeheftete Notizen zuerst, dann nach Datum (neueste zuerst)
629
+ filteredNotes.sort((a, b) => {
630
+ if (a.pinned && !b.pinned) return -1;
631
+ if (!a.pinned && b.pinned) return 1;
632
+ return b.id - a.id;
633
+ });
634
+
635
+ notesContainer.innerHTML = filteredNotes.map(note => `
636
+ <div class="note-card ${note.pinned ? 'pinned' : ''}">
637
+ <div class="note-header">
638
+ <div class="note-title">${note.title}</div>
639
+ <span class="note-category category-${note.category}">
640
+ ${getCategoryLabel(note.category)}
641
+ </span>
642
+ </div>
643
+ <div class="note-content">${note.content}</div>
644
+ <div class="note-footer">
645
+ <div class="note-date">${note.date}</div>
646
+ <div class="note-actions">
647
+ <button onclick="togglePin(${note.id})" title="${note.pinned ? 'Abheften' : 'Anheften'}">
648
+ <i class="fas fa-thumbtack"></i>
649
+ </button>
650
+ <button onclick="editNote(${note.id})" title="Bearbeiten">
651
+ <i class="fas fa-edit"></i>
652
+ </button>
653
+ <button onclick="deleteNote(${note.id})" title="Löschen">
654
+ <i class="fas fa-trash"></i>
655
+ </button>
656
+ </div>
657
+ </div>
658
+ </div>
659
+ `).join('');
660
+ }
661
+
662
+ // Funktion zum Aktualisieren der Statistik
663
+ function updateStats() {
664
+ totalNotesElement.textContent = notes.length;
665
+ pinnedNotesElement.textContent = notes.filter(note => note.pinned).length;
666
+
667
+ const uniqueCategories = new Set(notes.map(note => note.category));
668
+ categoriesCountElement.textContent = uniqueCategories.size;
669
+ }
670
+
671
+ // Kategorielabel basierend auf Wert abrufen
672
+ function getCategoryLabel(category) {
673
+ const labels = {
674
+ 'personal': 'Persönlich',
675
+ 'work': 'Arbeit',
676
+ 'ideas': 'Ideen',
677
+ 'todo': 'Aufgaben',
678
+ 'other': 'Sonstiges'
679
+ };
680
+ return labels[category] || 'Sonstiges';
681
+ }
682
+
683
+ // Event-Listener für das Speichern einer Notiz
684
+ saveNoteButton.addEventListener('click', addNote);
685
+
686
+ // Event-Listener für die Filteroptionen
687
+ filterOptions.forEach(option => {
688
+ option.addEventListener('click', function() {
689
+ // Aktive Klasse entfernen
690
+ filterOptions.forEach(opt => opt.classList.remove('active'));
691
+ // Aktive Klasse zur ausgewählten Option hinzufügen
692
+ this.classList.add('active');
693
+ // Filter aktualisieren
694
+ currentFilter = this.getAttribute('data-filter');
695
+ renderNotes();
696
+ });
697
+ });
698
+
699
+ // Event-Listener für die Suche
700
+ searchInput.addEventListener('input', function() {
701
+ searchQuery = this.value;
702
+ renderNotes();
703
+ });
704
+
705
+ // Funktionen global verfügbar machen
706
+ window.deleteNote = deleteNote;
707
+ window.editNote = editNote;
708
+ window.togglePin = togglePin;
709
+
710
+ // Beim Laden der Seite Notizen rendern
711
+ renderNotes();
712
+ });
713
+ </script>
714
+ </body>
715
+ </html>