Spaces:
Running
Running
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Notizblock App</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #4f46e5; | |
| --secondary-color: #f3f4f6; | |
| --accent-color: #10b981; | |
| --danger-color: #ef4444; | |
| --text-color: #1f2937; | |
| --light-text: #6b7280; | |
| --border-color: #e5e7eb; | |
| --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| --radius: 8px; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| color: var(--text-color); | |
| min-height: 100vh; | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| } | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px 0; | |
| margin-bottom: 30px; | |
| border-bottom: 2px solid var(--border-color); | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 15px; | |
| } | |
| .logo i { | |
| font-size: 2.5rem; | |
| color: var(--primary-color); | |
| } | |
| .logo h1 { | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| } | |
| .header-links { | |
| display: flex; | |
| gap: 15px; | |
| align-items: center; | |
| } | |
| .header-links a { | |
| color: var(--light-text); | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| transition: color 0.3s; | |
| } | |
| .header-links a:hover { | |
| color: var(--primary-color); | |
| } | |
| .app-container { | |
| display: grid; | |
| grid-template-columns: 300px 1fr; | |
| gap: 30px; | |
| } | |
| @media (max-width: 768px) { | |
| .app-container { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| .sidebar { | |
| background: white; | |
| border-radius: var(--radius); | |
| padding: 25px; | |
| box-shadow: var(--shadow); | |
| height: fit-content; | |
| } | |
| .sidebar h2 { | |
| margin-bottom: 20px; | |
| font-size: 1.3rem; | |
| color: var(--primary-color); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .category-list { | |
| list-style: none; | |
| margin-bottom: 30px; | |
| } | |
| .category-item { | |
| padding: 12px 15px; | |
| border-radius: var(--radius); | |
| margin-bottom: 8px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| transition: background 0.3s; | |
| } | |
| .category-item:hover { | |
| background: var(--secondary-color); | |
| } | |
| .category-item.active { | |
| background: var(--primary-color); | |
| color: white; | |
| } | |
| .category-item i { | |
| font-size: 1.1rem; | |
| } | |
| .notes-count { | |
| margin-left: auto; | |
| background: var(--light-text); | |
| color: white; | |
| padding: 2px 8px; | |
| border-radius: 12px; | |
| font-size: 0.8rem; | |
| } | |
| .active .notes-count { | |
| background: rgba(255, 255, 255, 0.3); | |
| } | |
| .action-buttons { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 15px; | |
| } | |
| .btn { | |
| padding: 12px 15px; | |
| border-radius: var(--radius); | |
| border: none; | |
| font-weight: 600; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 10px; | |
| transition: all 0.3s; | |
| } | |
| .btn-primary { | |
| background: var(--primary-color); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background: #4338ca; | |
| transform: translateY(-2px); | |
| } | |
| .btn-secondary { | |
| background: var(--secondary-color); | |
| color: var(--text-color); | |
| } | |
| .btn-secondary:hover { | |
| background: #e5e7eb; | |
| } | |
| .btn-danger { | |
| background: var(--danger-color); | |
| color: white; | |
| } | |
| .btn-danger:hover { | |
| background: #dc2626; | |
| } | |
| .main-content { | |
| background: white; | |
| border-radius: var(--radius); | |
| box-shadow: var(--shadow); | |
| overflow: hidden; | |
| } | |
| .search-bar { | |
| padding: 20px; | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| gap: 15px; | |
| } | |
| .search-input { | |
| flex: 1; | |
| padding: 12px 15px; | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius); | |
| font-size: 1rem; | |
| outline: none; | |
| transition: border 0.3s; | |
| } | |
| .search-input:focus { | |
| border-color: var(--primary-color); | |
| } | |
| .notes-header { | |
| padding: 20px; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| .notes-header h2 { | |
| font-size: 1.5rem; | |
| color: var(--primary-color); | |
| } | |
| .notes-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 20px; | |
| padding: 20px; | |
| } | |
| .note-card { | |
| background: white; | |
| border-radius: var(--radius); | |
| padding: 20px; | |
| box-shadow: var(--shadow); | |
| border-left: 4px solid var(--primary-color); | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| cursor: pointer; | |
| position: relative; | |
| } | |
| .note-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .note-title { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| margin-bottom: 10px; | |
| color: var(--text-color); | |
| } | |
| .note-content { | |
| color: var(--light-text); | |
| margin-bottom: 15px; | |
| line-height: 1.5; | |
| max-height: 80px; | |
| overflow: hidden; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 3; | |
| -webkit-box-orient: vertical; | |
| } | |
| .note-meta { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| font-size: 0.8rem; | |
| color: var(--light-text); | |
| } | |
| .note-category { | |
| background: var(--secondary-color); | |
| padding: 4px 10px; | |
| border-radius: 12px; | |
| } | |
| .note-actions { | |
| position: absolute; | |
| top: 15px; | |
| right: 15px; | |
| display: flex; | |
| gap: 10px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .note-card:hover .note-actions { | |
| opacity: 1; | |
| } | |
| .note-action-btn { | |
| background: rgba(255, 255, 255, 0.8); | |
| border: none; | |
| border-radius: 50%; | |
| width: 30px; | |
| height: 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: background 0.3s; | |
| } | |
| .note-action-btn:hover { | |
| background: white; | |
| } | |
| .empty-state { | |
| text-align: center; | |
| padding: 60px 20px; | |
| color: var(--light-text); | |
| } | |
| .empty-state i { | |
| font-size: 4rem; | |
| margin-bottom: 20px; | |
| color: var(--border-color); | |
| } | |
| .empty-state h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 10px; | |
| } | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.5); | |
| z-index: 1000; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .modal-content { | |
| background: white; | |
| border-radius: var(--radius); | |
| width: 90%; | |
| max-width: 600px; | |
| box-shadow: var(--shadow); | |
| animation: modalFadeIn 0.3s; | |
| } | |
| @keyframes modalFadeIn { | |
| from { opacity: 0; transform: translateY(-20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .modal-header { | |
| padding: 20px; | |
| border-bottom: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .modal-header h2 { | |
| color: var(--primary-color); | |
| } | |
| .close-btn { | |
| background: none; | |
| border: none; | |
| font-size: 1.5rem; | |
| cursor: pointer; | |
| color: var(--light-text); | |
| } | |
| .modal-body { | |
| padding: 20px; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 600; | |
| } | |
| .form-control { | |
| width: 100%; | |
| padding: 12px 15px; | |
| border: 1px solid var(--border-color); | |
| border-radius: var(--radius); | |
| font-size: 1rem; | |
| outline: none; | |
| transition: border 0.3s; | |
| } | |
| .form-control:focus { | |
| border-color: var(--primary-color); | |
| } | |
| textarea.form-control { | |
| min-height: 150px; | |
| resize: vertical; | |
| } | |
| .form-footer { | |
| padding: 20px; | |
| border-top: 1px solid var(--border-color); | |
| display: flex; | |
| justify-content: flex-end; | |
| gap: 15px; | |
| } | |
| .stats-container { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .stat-card { | |
| background: var(--secondary-color); | |
| padding: 15px; | |
| border-radius: var(--radius); | |
| text-align: center; | |
| } | |
| .stat-number { | |
| font-size: 1.8rem; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| } | |
| .stat-label { | |
| font-size: 0.9rem; | |
| color: var(--light-text); | |
| } | |
| footer { | |
| text-align: center; | |
| margin-top: 40px; | |
| padding: 20px; | |
| color: var(--light-text); | |
| font-size: 0.9rem; | |
| } | |
| .color-picker { | |
| display: flex; | |
| gap: 10px; | |
| margin-top: 10px; | |
| } | |
| .color-option { | |
| width: 30px; | |
| height: 30px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| border: 2px solid transparent; | |
| } | |
| .color-option.active { | |
| border-color: var(--text-color); | |
| } | |
| .color-1 { background: #4f46e5; } | |
| .color-2 { background: #10b981; } | |
| .color-3 { background: #f59e0b; } | |
| .color-4 { background: #ef4444; } | |
| .color-5 { background: #8b5cf6; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <div class="logo"> | |
| <i class="fas fa-sticky-note"></i> | |
| <h1>Notizblock App</h1> | |
| </div> | |
| <div class="header-links"> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">Built with anycoder</a> | |
| <a href="#"><i class="fas fa-user"></i> Benutzer</a> | |
| </div> | |
| </header> | |
| <div class="app-container"> | |
| <div class="sidebar"> | |
| <h2><i class="fas fa-folder"></i> Kategorien</h2> | |
| <ul class="category-list"> | |
| <li class="category-item active"> | |
| <i class="fas fa-inbox"></i> Alle Notizen | |
| <span class="notes-count">8</span> | |
| </li> | |
| <li class="category-item"> | |
| <i class="fas fa-briefcase"></i> Arbeit | |
| <span class="notes-count">3</span> | |
| </li> | |
| <li class="category-item"> | |
| <i class="fas fa-home"></i> Persönlich | |
| <span class="notes-count">4</span> | |
| </li> | |
| <li class="category-item"> | |
| <i class="fas fa-shopping-cart"></i> Einkaufen | |
| <span class="notes-count">1</span> | |
| </li> | |
| <li class="category-item"> | |
| <i class="fas fa-lightbulb"></i> Ideen | |
| <span class="notes-count">2</span> | |
| </li> | |
| </ul> | |
| <div class="action-buttons"> | |
| <button class="btn btn-primary" id="addNoteBtn"> | |
| <i class="fas fa-plus"></i> Neue Notiz | |
| </button> | |
| <button class="btn btn-secondary"> | |
| <i class="fas fa-cloud-upload-alt"></i> Sichern | |
| </button> | |
| <button class="btn btn-secondary"> | |
| <i class="fas fa-cog"></i> Einstellungen | |
| </button> | |
| </div> | |
| <div class="stats-container"> | |
| <div class="stat-card"> | |
| <div class="stat-number">8</div> | |
| <div class="stat-label">Notizen</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number">5</div> | |
| <div class="stat-label">Kategorien</div> | |
| </div> | |
| <div class="stat-card"> | |
| <div class="stat-number">3</div> | |
| <div class="stat-label">Favoriten</div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="main-content"> | |
| <div class="search-bar"> | |
| <input type="text" class="search-input" placeholder="Notizen durchsuchen..."> | |
| <button class="btn btn-secondary"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <div class="notes-header"> | |
| <h2>Alle Notizen</h2> | |
| <div> | |
| <button class="btn btn-secondary"> | |
| <i class="fas fa-sort"></i> Sortieren | |
| </button> | |
| </div> | |
| </div> | |
| <div class="notes-grid" id="notesGrid"> | |
| <!-- Notes will be dynamically added here --> | |
| </div> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>© 2023 Notizblock App. Alle Rechte vorbehalten.</p> | |
| </footer> | |
| </div> | |
| <!-- Add/Edit Note Modal --> | |
| <div class="modal" id="noteModal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2 id="modalTitle">Neue Notiz</h2> | |
| <button class="close-btn" id="closeModal">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="form-group"> | |
| <label for="noteTitle">Titel</label> | |
| <input type="text" class="form-control" id="noteTitle" placeholder="Titel der Notiz"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="noteContent">Inhalt</label> | |
| <textarea class="form-control" id="noteContent" placeholder="Notizinhalt..."></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="noteCategory">Kategorie</label> | |
| <select class="form-control" id="noteCategory"> | |
| <option value="all">Alle</option> | |
| <option value="work">Arbeit</option> | |
| <option value="personal">Persönlich</option> | |
| <option value="shopping">Einkaufen</option> | |
| <option value="ideas">Ideen</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>Farbe</label> | |
| <div class="color-picker"> | |
| <div class="color-option color-1 active" data-color="#4f46e5"></div> | |
| <div class="color-option color-2" data-color="#10b981"></div> | |
| <div class="color-option color-3" data-color="#f59e0b"></div> | |
| <div class="color-option color-4" data-color="#ef4444"></div> | |
| <div class="color-option color-5" data-color="#8b5cf6"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-footer"> | |
| <button class="btn btn-secondary" id="cancelNote">Abbrechen</button> | |
| <button class="btn btn-primary" id="saveNote">Speichern</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Sample notes data | |
| const notes = [ | |
| { | |
| id: 1, | |
| title: "Einkaufsliste", | |
| content: "Milch, Eier, Brot, Obst, Gemüse, Käse", | |
| category: "shopping", | |
| color: "#10b981", | |
| date: "2023-05-15", | |
| favorite: false | |
| }, | |
| { | |
| id: 2, | |
| title: "Projektideen", | |
| content: "Neue App für Zeitmanagement entwickeln. UI/UX Konzept erstellen und Funktionen definieren.", | |
| category: "ideas", | |
| color: "#8b5cf6", | |
| date: "2023-05-14", | |
| favorite: true | |
| }, | |
| { | |
| id: 3, | |
| title: "Meeting mit Kunde", | |
| content: "Termin: Donnerstag, 10:00 Uhr. Vorbereiten: Projektstatus, nächste Schritte, Budget.", | |
| category: "work", | |
| color: "#4f46e5", | |
| date: "2023-05-13", | |
| favorite: false | |
| }, | |
| { | |
| id: 4, | |
| title: "Buchtipps", | |
| content: "'Atomic Habits' von James Clear, 'Deep Work' von Cal Newport, 'The Pragmatic Programmer' von Andrew Hunt", | |
| category: "personal", | |
| color: "#f59e0b", | |
| date: "2023-05-12", | |
| favorite: true | |
| }, | |
| { | |
| id: 5, | |
| title: "Reiseplanung", | |
| content: "Flüge für Sommerurlaub buchen. Hotel in Barcelona reservieren. Aktivitäten planen.", | |
| category: "personal", | |
| color: "#ef4444", | |
| date: "2023-05-10", | |
| favorite: false | |
| }, | |
| { | |
| id: 6, | |
| title: "Team-Besprechung", | |
| content: "Agenda: Q2-Ziele, Ressourcenplanung, Schulungsbedarf.", | |
| category: "work", | |
| color: "#4f46e5", | |
| date: "2023-05-08", | |
| favorite: false | |
| }, | |
| { | |
| id: 7, | |
| title: "Geburtstagsgeschenk", | |
| content: "Geschenk für Mama besorgen. Blumen bestellen. Karte schreiben.", | |
| category: "personal", | |
| color: "#10b981", | |
| date: "2023-05-07", | |
| favorite: true | |
| }, | |
| { | |
| id: 8, | |
| title: "App-Features", | |
| content: "Dark Mode implementieren. Offline-Funktionalität hinzufügen. Synchronisation verbessern.", | |
| category: "ideas", | |
| color: "#8b5cf6", | |
| date: "2023-05-05", | |
| favorite: false | |
| } | |
| ]; | |
| // DOM Elements | |
| const notesGrid = document.getElementById('notesGrid'); | |
| const noteModal = document.getElementById('noteModal'); | |
| const addNoteBtn = document.getElementById('addNoteBtn'); | |
| const closeModal = document.getElementById('closeModal'); | |
| const cancelNote = document.getElementById('cancelNote'); | |
| const saveNote = document.getElementById('saveNote'); | |
| const noteTitle = document.getElementById('noteTitle'); | |
| const noteContent = document.getElementById('noteContent'); | |
| const noteCategory = document.getElementById('noteCategory'); | |
| const colorOptions = document.querySelectorAll('.color-option'); | |
| const categoryItems = document.querySelectorAll('.category-item'); | |
| const searchInput = document.querySelector('.search-input'); | |
| // Initialize the app | |
| document.addEventListener('DOMContentLoaded', function() { | |
| renderNotes(notes); | |
| setupEventListeners(); | |
| }); | |
| // Render notes to the grid | |
| function renderNotes(notesToRender) { | |
| notesGrid.innerHTML = ''; | |
| if (notesToRender.length === 0) { | |
| notesGrid.innerHTML = ` | |
| <div class="empty-state"> | |
| <i class="far fa-file-alt"></i> | |
| <h3>Keine Notizen gefunden</h3> | |
| <p>Erstellen Sie Ihre erste Notiz, indem Sie auf "Neue Notiz" klicken.</p> | |
| </div> | |
| `; | |
| return; | |
| } | |
| notesToRender.forEach(note => { | |
| const noteCard = document.createElement('div'); | |
| noteCard.className = 'note-card'; | |
| noteCard.style.borderLeftColor = note.color; | |
| noteCard.setAttribute('data-id', note.id); | |
| const categoryNames = { | |
| 'all': 'Alle', | |
| 'work': 'Arbeit', | |
| 'personal': 'Persönlich', | |
| 'shopping': 'Einkaufen', | |
| 'ideas': 'Ideen' | |
| }; | |
| noteCard.innerHTML = ` | |
| <div class="note-title">${note.title}</div> | |
| <div class="note-content">${note.content}</div> | |
| <div class="note-meta"> | |
| <div class="note-category">${categoryNames[note.category]}</div> | |
| <div class="note-date">${formatDate(note.date)}</div> | |
| </div> | |
| <div class="note-actions"> | |
| <button class="note-action-btn favorite-btn" title="Favorit"> | |
| <i class="fas fa-star${note.favorite ? '' : '-o'}"></i> | |
| </button> | |
| <button class="note-action-btn delete-btn" title="Löschen"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| `; | |
| notesGrid.appendChild(noteCard); | |
| }); | |
| } | |
| // Format date for display | |
| function formatDate(dateString) { | |
| const options = { day: '2-digit', month: '2-digit', year: 'numeric' }; | |
| return new Date(dateString).toLocaleDateString('de-DE', options); | |
| } | |
| // Set up event listeners | |
| function setupEventListeners() { | |
| // Modal controls | |
| addNoteBtn.addEventListener('click', () => openModal()); | |
| closeModal.addEventListener('click', () => closeModalFunc()); | |
| cancelNote.addEventListener('click', () => closeModalFunc()); | |
| // Save note | |
| saveNote.addEventListener('click', () => saveNoteFunc()); | |
| // Color picker | |
| colorOptions.forEach(option => { | |
| option.addEventListener('click', function() { | |
| colorOptions.forEach(opt => opt.classList.remove('active')); | |
| this.classList.add('active'); | |
| }); | |
| }); | |
| // Category selection | |
| categoryItems.forEach(item => { | |
| item.addEventListener('click', function() { | |
| categoryItems.forEach(cat => cat.classList.remove('active')); | |
| this.classList.add('active'); | |
| filterNotesByCategory(this.textContent.trim()); | |
| }); | |
| }); | |
| // Search functionality | |
| searchInput.addEventListener('input', function() { | |
| filterNotesBySearch(this.value); | |
| }); | |
| // Note actions (delegated) | |
| notesGrid.addEventListener('click', function(e) { | |
| const noteCard = e.target.closest('.note-card'); | |
| if (!noteCard) return; | |
| const noteId = parseInt(noteCard.getAttribute('data-id')); | |
| const note = notes.find(n => n.id === noteId); | |
| if (e.target.closest('.favorite-btn')) { | |
| toggleFavorite(noteId); | |
| } else if (e.target.closest('.delete-btn')) { | |
| deleteNote(noteId); | |
| } else { | |
| // Clicked on note content - open for editing | |
| openModal(note); | |
| } | |
| }); | |
| } | |
| // Open modal for adding/editing note | |
| function openModal(note = null) { | |
| if (note) { | |
| document.getElementById('modalTitle').textContent = 'Notiz bearbeiten'; | |
| noteTitle.value = note.title; | |
| noteContent.value = note.content; | |
| noteCategory.value = note.category; | |
| // Set active color | |
| colorOptions.forEach(option => { | |
| if (option.getAttribute('data-color') === note.color) { | |
| option.classList.add('active'); | |
| } else { | |
| option.classList.remove('active'); | |
| } | |
| }); | |
| } else { | |
| document.getElementById('modalTitle').textContent = 'Neue Notiz'; | |
| noteTitle.value = ''; | |
| noteContent.value = ''; | |
| noteCategory.value = 'all'; | |
| } | |
| noteModal.style.display = 'flex'; | |
| } | |
| // Close modal | |
| function closeModalFunc() { | |
| noteModal.style.display = 'none'; | |
| } | |
| // Save note | |
| function saveNoteFunc() { | |
| const title = noteTitle.value.trim(); | |
| const content = noteContent.value.trim(); | |
| const category = noteCategory.value; | |
| const activeColor = document.querySelector('.color-option.active').getAttribute('data-color'); | |
| if (!title) { | |
| alert('Bitte geben Sie einen Titel für die Notiz ein.'); | |
| return; | |
| } | |
| // In a real app, you would save to a database | |
| // For this demo, we'll just show an alert | |
| alert(`Notiz "${title}" wurde erfolgreich gespeichert.`); | |
| closeModalFunc(); | |
| } | |
| // Filter notes by category | |
| function filterNotesByCategory(categoryName) { | |
| const categoryMap = { | |
| 'Alle Notizen': 'all', | |
| 'Arbeit': 'work', | |
| 'Persönlich': 'personal', | |
| 'Einkaufen': 'shopping', | |
| 'Ideen': 'ideas' | |
| }; | |
| const category = categoryMap[categoryName]; | |
| if (category === 'all') { | |
| renderNotes(notes); | |
| } else { | |
| const filteredNotes = notes.filter(note => note.category === category); | |
| renderNotes(filteredNotes); | |
| } | |
| } | |
| // Filter notes by search term | |
| function filterNotesBySearch(searchTerm) { | |
| if (!searchTerm) { | |
| renderNotes(notes); | |
| return; | |
| } | |
| const filteredNotes = notes.filter(note => | |
| note.title.toLowerCase().includes(searchTerm.toLowerCase()) || | |
| note.content.toLowerCase().includes(searchTerm.toLowerCase()) | |
| ); | |
| renderNotes(filteredNotes); | |
| } | |
| // Toggle favorite status | |
| function toggleFavorite(noteId) { | |
| const noteIndex = notes.findIndex(note => note.id === noteId); | |
| if (noteIndex !== -1) { | |
| notes[noteIndex].favorite = !notes[noteIndex].favorite; | |
| renderNotes(notes); | |
| } | |
| } | |
| // Delete note | |
| function deleteNote(noteId) { | |
| if (confirm('Möchten Sie diese Notiz wirklich löschen?')) { | |
| const noteIndex = notes.findIndex(note => note.id === noteId); | |
| if (noteIndex !== -1) { | |
| notes.splice(noteIndex, 1); | |
| renderNotes(notes); | |
| } | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |