Hugging Face's logo

Spaces:
Multimedix
/
anycoder-d3e748a0
Running

App Files Community
Multimedix commited on
Commit
60df019
·
verified ·
1 Parent(s): 73f3882

Upload folder using huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +939 -19
index.html CHANGED
@@ -1,19 +1,939 @@
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
+ --secondary-color: #f3f4f6;
12
+ --accent-color: #10b981;
13
+ --danger-color: #ef4444;
14
+ --text-color: #1f2937;
15
+ --light-text: #6b7280;
16
+ --border-color: #e5e7eb;
17
+ --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
18
+ --radius: 8px;
19
+ }
20
+
21
+ * {
22
+ margin: 0;
23
+ padding: 0;
24
+ box-sizing: border-box;
25
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
26
+ }
27
+
28
+ body {
29
+ background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
30
+ color: var(--text-color);
31
+ min-height: 100vh;
32
+ padding: 20px;
33
+ }
34
+
35
+ .container {
36
+ max-width: 1200px;
37
+ margin: 0 auto;
38
+ }
39
+
40
+ header {
41
+ display: flex;
42
+ justify-content: space-between;
43
+ align-items: center;
44
+ padding: 20px 0;
45
+ margin-bottom: 30px;
46
+ border-bottom: 2px solid var(--border-color);
47
+ }
48
+
49
+ .logo {
50
+ display: flex;
51
+ align-items: center;
52
+ gap: 15px;
53
+ }
54
+
55
+ .logo i {
56
+ font-size: 2.5rem;
57
+ color: var(--primary-color);
58
+ }
59
+
60
+ .logo h1 {
61
+ font-size: 2rem;
62
+ font-weight: 700;
63
+ color: var(--primary-color);
64
+ }
65
+
66
+ .header-links {
67
+ display: flex;
68
+ gap: 15px;
69
+ align-items: center;
70
+ }
71
+
72
+ .header-links a {
73
+ color: var(--light-text);
74
+ text-decoration: none;
75
+ font-size: 0.9rem;
76
+ transition: color 0.3s;
77
+ }
78
+
79
+ .header-links a:hover {
80
+ color: var(--primary-color);
81
+ }
82
+
83
+ .app-container {
84
+ display: grid;
85
+ grid-template-columns: 300px 1fr;
86
+ gap: 30px;
87
+ }
88
+
89
+ @media (max-width: 768px) {
90
+ .app-container {
91
+ grid-template-columns: 1fr;
92
+ }
93
+ }
94
+
95
+ .sidebar {
96
+ background: white;
97
+ border-radius: var(--radius);
98
+ padding: 25px;
99
+ box-shadow: var(--shadow);
100
+ height: fit-content;
101
+ }
102
+
103
+ .sidebar h2 {
104
+ margin-bottom: 20px;
105
+ font-size: 1.3rem;
106
+ color: var(--primary-color);
107
+ display: flex;
108
+ align-items: center;
109
+ gap: 10px;
110
+ }
111
+
112
+ .category-list {
113
+ list-style: none;
114
+ margin-bottom: 30px;
115
+ }
116
+
117
+ .category-item {
118
+ padding: 12px 15px;
119
+ border-radius: var(--radius);
120
+ margin-bottom: 8px;
121
+ cursor: pointer;
122
+ display: flex;
123
+ align-items: center;
124
+ gap: 10px;
125
+ transition: background 0.3s;
126
+ }
127
+
128
+ .category-item:hover {
129
+ background: var(--secondary-color);
130
+ }
131
+
132
+ .category-item.active {
133
+ background: var(--primary-color);
134
+ color: white;
135
+ }
136
+
137
+ .category-item i {
138
+ font-size: 1.1rem;
139
+ }
140
+
141
+ .notes-count {
142
+ margin-left: auto;
143
+ background: var(--light-text);
144
+ color: white;
145
+ padding: 2px 8px;
146
+ border-radius: 12px;
147
+ font-size: 0.8rem;
148
+ }
149
+
150
+ .active .notes-count {
151
+ background: rgba(255, 255, 255, 0.3);
152
+ }
153
+
154
+ .action-buttons {
155
+ display: flex;
156
+ flex-direction: column;
157
+ gap: 15px;
158
+ }
159
+
160
+ .btn {
161
+ padding: 12px 15px;
162
+ border-radius: var(--radius);
163
+ border: none;
164
+ font-weight: 600;
165
+ cursor: pointer;
166
+ display: flex;
167
+ align-items: center;
168
+ justify-content: center;
169
+ gap: 10px;
170
+ transition: all 0.3s;
171
+ }
172
+
173
+ .btn-primary {
174
+ background: var(--primary-color);
175
+ color: white;
176
+ }
177
+
178
+ .btn-primary:hover {
179
+ background: #4338ca;
180
+ transform: translateY(-2px);
181
+ }
182
+
183
+ .btn-secondary {
184
+ background: var(--secondary-color);
185
+ color: var(--text-color);
186
+ }
187
+
188
+ .btn-secondary:hover {
189
+ background: #e5e7eb;
190
+ }
191
+
192
+ .btn-danger {
193
+ background: var(--danger-color);
194
+ color: white;
195
+ }
196
+
197
+ .btn-danger:hover {
198
+ background: #dc2626;
199
+ }
200
+
201
+ .main-content {
202
+ background: white;
203
+ border-radius: var(--radius);
204
+ box-shadow: var(--shadow);
205
+ overflow: hidden;
206
+ }
207
+
208
+ .search-bar {
209
+ padding: 20px;
210
+ border-bottom: 1px solid var(--border-color);
211
+ display: flex;
212
+ gap: 15px;
213
+ }
214
+
215
+ .search-input {
216
+ flex: 1;
217
+ padding: 12px 15px;
218
+ border: 1px solid var(--border-color);
219
+ border-radius: var(--radius);
220
+ font-size: 1rem;
221
+ outline: none;
222
+ transition: border 0.3s;
223
+ }
224
+
225
+ .search-input:focus {
226
+ border-color: var(--primary-color);
227
+ }
228
+
229
+ .notes-header {
230
+ padding: 20px;
231
+ display: flex;
232
+ justify-content: space-between;
233
+ align-items: center;
234
+ border-bottom: 1px solid var(--border-color);
235
+ }
236
+
237
+ .notes-header h2 {
238
+ font-size: 1.5rem;
239
+ color: var(--primary-color);
240
+ }
241
+
242
+ .notes-grid {
243
+ display: grid;
244
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
245
+ gap: 20px;
246
+ padding: 20px;
247
+ }
248
+
249
+ .note-card {
250
+ background: white;
251
+ border-radius: var(--radius);
252
+ padding: 20px;
253
+ box-shadow: var(--shadow);
254
+ border-left: 4px solid var(--primary-color);
255
+ transition: transform 0.3s, box-shadow 0.3s;
256
+ cursor: pointer;
257
+ position: relative;
258
+ }
259
+
260
+ .note-card:hover {
261
+ transform: translateY(-5px);
262
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
263
+ }
264
+
265
+ .note-title {
266
+ font-size: 1.2rem;
267
+ font-weight: 600;
268
+ margin-bottom: 10px;
269
+ color: var(--text-color);
270
+ }
271
+
272
+ .note-content {
273
+ color: var(--light-text);
274
+ margin-bottom: 15px;
275
+ line-height: 1.5;
276
+ max-height: 80px;
277
+ overflow: hidden;
278
+ display: -webkit-box;
279
+ -webkit-line-clamp: 3;
280
+ -webkit-box-orient: vertical;
281
+ }
282
+
283
+ .note-meta {
284
+ display: flex;
285
+ justify-content: space-between;
286
+ align-items: center;
287
+ font-size: 0.8rem;
288
+ color: var(--light-text);
289
+ }
290
+
291
+ .note-category {
292
+ background: var(--secondary-color);
293
+ padding: 4px 10px;
294
+ border-radius: 12px;
295
+ }
296
+
297
+ .note-actions {
298
+ position: absolute;
299
+ top: 15px;
300
+ right: 15px;
301
+ display: flex;
302
+ gap: 10px;
303
+ opacity: 0;
304
+ transition: opacity 0.3s;
305
+ }
306
+
307
+ .note-card:hover .note-actions {
308
+ opacity: 1;
309
+ }
310
+
311
+ .note-action-btn {
312
+ background: rgba(255, 255, 255, 0.8);
313
+ border: none;
314
+ border-radius: 50%;
315
+ width: 30px;
316
+ height: 30px;
317
+ display: flex;
318
+ align-items: center;
319
+ justify-content: center;
320
+ cursor: pointer;
321
+ transition: background 0.3s;
322
+ }
323
+
324
+ .note-action-btn:hover {
325
+ background: white;
326
+ }
327
+
328
+ .empty-state {
329
+ text-align: center;
330
+ padding: 60px 20px;
331
+ color: var(--light-text);
332
+ }
333
+
334
+ .empty-state i {
335
+ font-size: 4rem;
336
+ margin-bottom: 20px;
337
+ color: var(--border-color);
338
+ }
339
+
340
+ .empty-state h3 {
341
+ font-size: 1.5rem;
342
+ margin-bottom: 10px;
343
+ }
344
+
345
+ .modal {
346
+ display: none;
347
+ position: fixed;
348
+ top: 0;
349
+ left: 0;
350
+ width: 100%;
351
+ height: 100%;
352
+ background: rgba(0, 0, 0, 0.5);
353
+ z-index: 1000;
354
+ align-items: center;
355
+ justify-content: center;
356
+ }
357
+
358
+ .modal-content {
359
+ background: white;
360
+ border-radius: var(--radius);
361
+ width: 90%;
362
+ max-width: 600px;
363
+ box-shadow: var(--shadow);
364
+ animation: modalFadeIn 0.3s;
365
+ }
366
+
367
+ @keyframes modalFadeIn {
368
+ from { opacity: 0; transform: translateY(-20px); }
369
+ to { opacity: 1; transform: translateY(0); }
370
+ }
371
+
372
+ .modal-header {
373
+ padding: 20px;
374
+ border-bottom: 1px solid var(--border-color);
375
+ display: flex;
376
+ justify-content: space-between;
377
+ align-items: center;
378
+ }
379
+
380
+ .modal-header h2 {
381
+ color: var(--primary-color);
382
+ }
383
+
384
+ .close-btn {
385
+ background: none;
386
+ border: none;
387
+ font-size: 1.5rem;
388
+ cursor: pointer;
389
+ color: var(--light-text);
390
+ }
391
+
392
+ .modal-body {
393
+ padding: 20px;
394
+ }
395
+
396
+ .form-group {
397
+ margin-bottom: 20px;
398
+ }
399
+
400
+ .form-group label {
401
+ display: block;
402
+ margin-bottom: 8px;
403
+ font-weight: 600;
404
+ }
405
+
406
+ .form-control {
407
+ width: 100%;
408
+ padding: 12px 15px;
409
+ border: 1px solid var(--border-color);
410
+ border-radius: var(--radius);
411
+ font-size: 1rem;
412
+ outline: none;
413
+ transition: border 0.3s;
414
+ }
415
+
416
+ .form-control:focus {
417
+ border-color: var(--primary-color);
418
+ }
419
+
420
+ textarea.form-control {
421
+ min-height: 150px;
422
+ resize: vertical;
423
+ }
424
+
425
+ .form-footer {
426
+ padding: 20px;
427
+ border-top: 1px solid var(--border-color);
428
+ display: flex;
429
+ justify-content: flex-end;
430
+ gap: 15px;
431
+ }
432
+
433
+ .stats-container {
434
+ display: grid;
435
+ grid-template-columns: repeat(3, 1fr);
436
+ gap: 15px;
437
+ margin-top: 20px;
438
+ }
439
+
440
+ .stat-card {
441
+ background: var(--secondary-color);
442
+ padding: 15px;
443
+ border-radius: var(--radius);
444
+ text-align: center;
445
+ }
446
+
447
+ .stat-number {
448
+ font-size: 1.8rem;
449
+ font-weight: 700;
450
+ color: var(--primary-color);
451
+ }
452
+
453
+ .stat-label {
454
+ font-size: 0.9rem;
455
+ color: var(--light-text);
456
+ }
457
+
458
+ footer {
459
+ text-align: center;
460
+ margin-top: 40px;
461
+ padding: 20px;
462
+ color: var(--light-text);
463
+ font-size: 0.9rem;
464
+ }
465
+
466
+ .color-picker {
467
+ display: flex;
468
+ gap: 10px;
469
+ margin-top: 10px;
470
+ }
471
+
472
+ .color-option {
473
+ width: 30px;
474
+ height: 30px;
475
+ border-radius: 50%;
476
+ cursor: pointer;
477
+ border: 2px solid transparent;
478
+ }
479
+
480
+ .color-option.active {
481
+ border-color: var(--text-color);
482
+ }
483
+
484
+ .color-1 { background: #4f46e5; }
485
+ .color-2 { background: #10b981; }
486
+ .color-3 { background: #f59e0b; }
487
+ .color-4 { background: #ef4444; }
488
+ .color-5 { background: #8b5cf6; }
489
+ </style>
490
+ </head>
491
+ <body>
492
+ <div class="container">
493
+ <header>
494
+ <div class="logo">
495
+ <i class="fas fa-sticky-note"></i>
496
+ <h1>Notizblock App</h1>
497
+ </div>
498
+ <div class="header-links">
499
+ <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a>
500
+ <a href="#"><i class="fas fa-user"></i> Benutzer</a>
501
+ </div>
502
+ </header>
503
+
504
+ <div class="app-container">
505
+ <div class="sidebar">
506
+ <h2><i class="fas fa-folder"></i> Kategorien</h2>
507
+ <ul class="category-list">
508
+ <li class="category-item active">
509
+ <i class="fas fa-inbox"></i> Alle Notizen
510
+ <span class="notes-count">8</span>
511
+ </li>
512
+ <li class="category-item">
513
+ <i class="fas fa-briefcase"></i> Arbeit
514
+ <span class="notes-count">3</span>
515
+ </li>
516
+ <li class="category-item">
517
+ <i class="fas fa-home"></i> Persönlich
518
+ <span class="notes-count">4</span>
519
+ </li>
520
+ <li class="category-item">
521
+ <i class="fas fa-shopping-cart"></i> Einkaufen
522
+ <span class="notes-count">1</span>
523
+ </li>
524
+ <li class="category-item">
525
+ <i class="fas fa-lightbulb"></i> Ideen
526
+ <span class="notes-count">2</span>
527
+ </li>
528
+ </ul>
529
+
530
+ <div class="action-buttons">
531
+ <button class="btn btn-primary" id="addNoteBtn">
532
+ <i class="fas fa-plus"></i> Neue Notiz
533
+ </button>
534
+ <button class="btn btn-secondary">
535
+ <i class="fas fa-cloud-upload-alt"></i> Sichern
536
+ </button>
537
+ <button class="btn btn-secondary">
538
+ <i class="fas fa-cog"></i> Einstellungen
539
+ </button>
540
+ </div>
541
+
542
+ <div class="stats-container">
543
+ <div class="stat-card">
544
+ <div class="stat-number">8</div>
545
+ <div class="stat-label">Notizen</div>
546
+ </div>
547
+ <div class="stat-card">
548
+ <div class="stat-number">5</div>
549
+ <div class="stat-label">Kategorien</div>
550
+ </div>
551
+ <div class="stat-card">
552
+ <div class="stat-number">3</div>
553
+ <div class="stat-label">Favoriten</div>
554
+ </div>
555
+ </div>
556
+ </div>
557
+
558
+ <div class="main-content">
559
+ <div class="search-bar">
560
+ <input type="text" class="search-input" placeholder="Notizen durchsuchen...">
561
+ <button class="btn btn-secondary">
562
+ <i class="fas fa-search"></i>
563
+ </button>
564
+ </div>
565
+
566
+ <div class="notes-header">
567
+ <h2>Alle Notizen</h2>
568
+ <div>
569
+ <button class="btn btn-secondary">
570
+ <i class="fas fa-sort"></i> Sortieren
571
+ </button>
572
+ </div>
573
+ </div>
574
+
575
+ <div class="notes-grid" id="notesGrid">
576
+ <!-- Notes will be dynamically added here -->
577
+ </div>
578
+ </div>
579
+ </div>
580
+
581
+ <footer>
582
+ <p>© 2023 Notizblock App. Alle Rechte vorbehalten.</p>
583
+ </footer>
584
+ </div>
585
+
586
+ <!-- Add/Edit Note Modal -->
587
+ <div class="modal" id="noteModal">
588
+ <div class="modal-content">
589
+ <div class="modal-header">
590
+ <h2 id="modalTitle">Neue Notiz</h2>
591
+ <button class="close-btn" id="closeModal">&times;</button>
592
+ </div>
593
+ <div class="modal-body">
594
+ <div class="form-group">
595
+ <label for="noteTitle">Titel</label>
596
+ <input type="text" class="form-control" id="noteTitle" placeholder="Titel der Notiz">
597
+ </div>
598
+ <div class="form-group">
599
+ <label for="noteContent">Inhalt</label>
600
+ <textarea class="form-control" id="noteContent" placeholder="Notizinhalt..."></textarea>
601
+ </div>
602
+ <div class="form-group">
603
+ <label for="noteCategory">Kategorie</label>
604
+ <select class="form-control" id="noteCategory">
605
+ <option value="all">Alle</option>
606
+ <option value="work">Arbeit</option>
607
+ <option value="personal">Persönlich</option>
608
+ <option value="shopping">Einkaufen</option>
609
+ <option value="ideas">Ideen</option>
610
+ </select>
611
+ </div>
612
+ <div class="form-group">
613
+ <label>Farbe</label>
614
+ <div class="color-picker">
615
+ <div class="color-option color-1 active" data-color="#4f46e5"></div>
616
+ <div class="color-option color-2" data-color="#10b981"></div>
617
+ <div class="color-option color-3" data-color="#f59e0b"></div>
618
+ <div class="color-option color-4" data-color="#ef4444"></div>
619
+ <div class="color-option color-5" data-color="#8b5cf6"></div>
620
+ </div>
621
+ </div>
622
+ </div>
623
+ <div class="form-footer">
624
+ <button class="btn btn-secondary" id="cancelNote">Abbrechen</button>
625
+ <button class="btn btn-primary" id="saveNote">Speichern</button>
626
+ </div>
627
+ </div>
628
+ </div>
629
+
630
+ <script>
631
+ // Sample notes data
632
+ const notes = [
633
+ {
634
+ id: 1,
635
+ title: "Einkaufsliste",
636
+ content: "Milch, Eier, Brot, Obst, Gemüse, Käse",
637
+ category: "shopping",
638
+ color: "#10b981",
639
+ date: "2023-05-15",
640
+ favorite: false
641
+ },
642
+ {
643
+ id: 2,
644
+ title: "Projektideen",
645
+ content: "Neue App für Zeitmanagement entwickeln. UI/UX Konzept erstellen und Funktionen definieren.",
646
+ category: "ideas",
647
+ color: "#8b5cf6",
648
+ date: "2023-05-14",
649
+ favorite: true
650
+ },
651
+ {
652
+ id: 3,
653
+ title: "Meeting mit Kunde",
654
+ content: "Termin: Donnerstag, 10:00 Uhr. Vorbereiten: Projektstatus, nächste Schritte, Budget.",
655
+ category: "work",
656
+ color: "#4f46e5",
657
+ date: "2023-05-13",
658
+ favorite: false
659
+ },
660
+ {
661
+ id: 4,
662
+ title: "Buchtipps",
663
+ content: "'Atomic Habits' von James Clear, 'Deep Work' von Cal Newport, 'The Pragmatic Programmer' von Andrew Hunt",
664
+ category: "personal",
665
+ color: "#f59e0b",
666
+ date: "2023-05-12",
667
+ favorite: true
668
+ },
669
+ {
670
+ id: 5,
671
+ title: "Reiseplanung",
672
+ content: "Flüge für Sommerurlaub buchen. Hotel in Barcelona reservieren. Aktivitäten planen.",
673
+ category: "personal",
674
+ color: "#ef4444",
675
+ date: "2023-05-10",
676
+ favorite: false
677
+ },
678
+ {
679
+ id: 6,
680
+ title: "Team-Besprechung",
681
+ content: "Agenda: Q2-Ziele, Ressourcenplanung, Schulungsbedarf.",
682
+ category: "work",
683
+ color: "#4f46e5",
684
+ date: "2023-05-08",
685
+ favorite: false
686
+ },
687
+ {
688
+ id: 7,
689
+ title: "Geburtstagsgeschenk",
690
+ content: "Geschenk für Mama besorgen. Blumen bestellen. Karte schreiben.",
691
+ category: "personal",
692
+ color: "#10b981",
693
+ date: "2023-05-07",
694
+ favorite: true
695
+ },
696
+ {
697
+ id: 8,
698
+ title: "App-Features",
699
+ content: "Dark Mode implementieren. Offline-Funktionalität hinzufügen. Synchronisation verbessern.",
700
+ category: "ideas",
701
+ color: "#8b5cf6",
702
+ date: "2023-05-05",
703
+ favorite: false
704
+ }
705
+ ];
706
+
707
+ // DOM Elements
708
+ const notesGrid = document.getElementById('notesGrid');
709
+ const noteModal = document.getElementById('noteModal');
710
+ const addNoteBtn = document.getElementById('addNoteBtn');
711
+ const closeModal = document.getElementById('closeModal');
712
+ const cancelNote = document.getElementById('cancelNote');
713
+ const saveNote = document.getElementById('saveNote');
714
+ const noteTitle = document.getElementById('noteTitle');
715
+ const noteContent = document.getElementById('noteContent');
716
+ const noteCategory = document.getElementById('noteCategory');
717
+ const colorOptions = document.querySelectorAll('.color-option');
718
+ const categoryItems = document.querySelectorAll('.category-item');
719
+ const searchInput = document.querySelector('.search-input');
720
+
721
+ // Initialize the app
722
+ document.addEventListener('DOMContentLoaded', function() {
723
+ renderNotes(notes);
724
+ setupEventListeners();
725
+ });
726
+
727
+ // Render notes to the grid
728
+ function renderNotes(notesToRender) {
729
+ notesGrid.innerHTML = '';
730
+
731
+ if (notesToRender.length === 0) {
732
+ notesGrid.innerHTML = `
733
+ <div class="empty-state">
734
+ <i class="far fa-file-alt"></i>
735
+ <h3>Keine Notizen gefunden</h3>
736
+ <p>Erstellen Sie Ihre erste Notiz, indem Sie auf "Neue Notiz" klicken.</p>
737
+ </div>
738
+ `;
739
+ return;
740
+ }
741
+
742
+ notesToRender.forEach(note => {
743
+ const noteCard = document.createElement('div');
744
+ noteCard.className = 'note-card';
745
+ noteCard.style.borderLeftColor = note.color;
746
+ noteCard.setAttribute('data-id', note.id);
747
+
748
+ const categoryNames = {
749
+ 'all': 'Alle',
750
+ 'work': 'Arbeit',
751
+ 'personal': 'Persönlich',
752
+ 'shopping': 'Einkaufen',
753
+ 'ideas': 'Ideen'
754
+ };
755
+
756
+ noteCard.innerHTML = `
757
+ <div class="note-title">${note.title}</div>
758
+ <div class="note-content">${note.content}</div>
759
+ <div class="note-meta">
760
+ <div class="note-category">${categoryNames[note.category]}</div>
761
+ <div class="note-date">${formatDate(note.date)}</div>
762
+ </div>
763
+ <div class="note-actions">
764
+ <button class="note-action-btn favorite-btn" title="Favorit">
765
+ <i class="fas fa-star${note.favorite ? '' : '-o'}"></i>
766
+ </button>
767
+ <button class="note-action-btn delete-btn" title="Löschen">
768
+ <i class="fas fa-trash"></i>
769
+ </button>
770
+ </div>
771
+ `;
772
+
773
+ notesGrid.appendChild(noteCard);
774
+ });
775
+ }
776
+
777
+ // Format date for display
778
+ function formatDate(dateString) {
779
+ const options = { day: '2-digit', month: '2-digit', year: 'numeric' };
780
+ return new Date(dateString).toLocaleDateString('de-DE', options);
781
+ }
782
+
783
+ // Set up event listeners
784
+ function setupEventListeners() {
785
+ // Modal controls
786
+ addNoteBtn.addEventListener('click', () => openModal());
787
+ closeModal.addEventListener('click', () => closeModalFunc());
788
+ cancelNote.addEventListener('click', () => closeModalFunc());
789
+
790
+ // Save note
791
+ saveNote.addEventListener('click', () => saveNoteFunc());
792
+
793
+ // Color picker
794
+ colorOptions.forEach(option => {
795
+ option.addEventListener('click', function() {
796
+ colorOptions.forEach(opt => opt.classList.remove('active'));
797
+ this.classList.add('active');
798
+ });
799
+ });
800
+
801
+ // Category selection
802
+ categoryItems.forEach(item => {
803
+ item.addEventListener('click', function() {
804
+ categoryItems.forEach(cat => cat.classList.remove('active'));
805
+ this.classList.add('active');
806
+ filterNotesByCategory(this.textContent.trim());
807
+ });
808
+ });
809
+
810
+ // Search functionality
811
+ searchInput.addEventListener('input', function() {
812
+ filterNotesBySearch(this.value);
813
+ });
814
+
815
+ // Note actions (delegated)
816
+ notesGrid.addEventListener('click', function(e) {
817
+ const noteCard = e.target.closest('.note-card');
818
+ if (!noteCard) return;
819
+
820
+ const noteId = parseInt(noteCard.getAttribute('data-id'));
821
+ const note = notes.find(n => n.id === noteId);
822
+
823
+ if (e.target.closest('.favorite-btn')) {
824
+ toggleFavorite(noteId);
825
+ } else if (e.target.closest('.delete-btn')) {
826
+ deleteNote(noteId);
827
+ } else {
828
+ // Clicked on note content - open for editing
829
+ openModal(note);
830
+ }
831
+ });
832
+ }
833
+
834
+ // Open modal for adding/editing note
835
+ function openModal(note = null) {
836
+ if (note) {
837
+ document.getElementById('modalTitle').textContent = 'Notiz bearbeiten';
838
+ noteTitle.value = note.title;
839
+ noteContent.value = note.content;
840
+ noteCategory.value = note.category;
841
+
842
+ // Set active color
843
+ colorOptions.forEach(option => {
844
+ if (option.getAttribute('data-color') === note.color) {
845
+ option.classList.add('active');
846
+ } else {
847
+ option.classList.remove('active');
848
+ }
849
+ });
850
+ } else {
851
+ document.getElementById('modalTitle').textContent = 'Neue Notiz';
852
+ noteTitle.value = '';
853
+ noteContent.value = '';
854
+ noteCategory.value = 'all';
855
+ }
856
+
857
+ noteModal.style.display = 'flex';
858
+ }
859
+
860
+ // Close modal
861
+ function closeModalFunc() {
862
+ noteModal.style.display = 'none';
863
+ }
864
+
865
+ // Save note
866
+ function saveNoteFunc() {
867
+ const title = noteTitle.value.trim();
868
+ const content = noteContent.value.trim();
869
+ const category = noteCategory.value;
870
+ const activeColor = document.querySelector('.color-option.active').getAttribute('data-color');
871
+
872
+ if (!title) {
873
+ alert('Bitte geben Sie einen Titel für die Notiz ein.');
874
+ return;
875
+ }
876
+
877
+ // In a real app, you would save to a database
878
+ // For this demo, we'll just show an alert
879
+ alert(`Notiz "${title}" wurde erfolgreich gespeichert.`);
880
+ closeModalFunc();
881
+ }
882
+
883
+ // Filter notes by category
884
+ function filterNotesByCategory(categoryName) {
885
+ const categoryMap = {
886
+ 'Alle Notizen': 'all',
887
+ 'Arbeit': 'work',
888
+ 'Persönlich': 'personal',
889
+ 'Einkaufen': 'shopping',
890
+ 'Ideen': 'ideas'
891
+ };
892
+
893
+ const category = categoryMap[categoryName];
894
+
895
+ if (category === 'all') {
896
+ renderNotes(notes);
897
+ } else {
898
+ const filteredNotes = notes.filter(note => note.category === category);
899
+ renderNotes(filteredNotes);
900
+ }
901
+ }
902
+
903
+ // Filter notes by search term
904
+ function filterNotesBySearch(searchTerm) {
905
+ if (!searchTerm) {
906
+ renderNotes(notes);
907
+ return;
908
+ }
909
+
910
+ const filteredNotes = notes.filter(note =>
911
+ note.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
912
+ note.content.toLowerCase().includes(searchTerm.toLowerCase())
913
+ );
914
+
915
+ renderNotes(filteredNotes);
916
+ }
917
+
918
+ // Toggle favorite status
919
+ function toggleFavorite(noteId) {
920
+ const noteIndex = notes.findIndex(note => note.id === noteId);
921
+ if (noteIndex !== -1) {
922
+ notes[noteIndex].favorite = !notes[noteIndex].favorite;
923
+ renderNotes(notes);
924
+ }
925
+ }
926
+
927
+ // Delete note
928
+ function deleteNote(noteId) {
929
+ if (confirm('Möchten Sie diese Notiz wirklich löschen?')) {
930
+ const noteIndex = notes.findIndex(note => note.id === noteId);
931
+ if (noteIndex !== -1) {
932
+ notes.splice(noteIndex, 1);
933
+ renderNotes(notes);
934
+ }
935
+ }
936
+ }
937
+ </script>
938
+ </body>
939
+ </html>