Alles, was interaktiv ist, wird nicht geladen. Implementiere gutes logging und versuche, die Integration des js sicherzustellen. Hast du irgendeinen Fehler gemacht?

```sh
cdn.tailwindcss.com should not be used in production. To use Tailwind CSS in production, install it as a PostCSS plugin or use the Tailwind CLI: https://tailwindcss.com/docs/installation cdn.tailwindcss.com:64:1711
Uncaught SyntaxError: unexpected token: keyword 'class' task-item.js:47:33
Uncaught SyntaxError: expected expression, got ')' script.js:751:10
feather: 'focus' is not a valid icon feather-icons:12:5197
Content script loaded, initializing... content.js:1719:13
Error parsing watch history: SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
loadWatchHistory moz-extension://fbbd56d3-98cc-4e3b-a6f1-5229548dd187/content.js:794
content.js:848:17
Initial watch history loaded. content.js:936:13
Could not extract video UUID from URL content.js:1684:21
SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data content.js:574:73
[PeerTube Companion] Retrieved item "getUrlService-fadikkop-taskforge-pro.static.hf.space" from cache redirection-content-script.f3b7260b.js:1:21789
Source-Map-Fehler: Error: request failed with status 404
Stack in the worker:networkRequest@resource://devtools/client/shared/source-map-loader/utils/network-request.js:43:9

Ressourcen-Adresse: https://unpkg.com/feather-icons
Source-Map-Adresse: feather.min.js.map 2
```

components/feather-icons-fix.js

@@ -0,0 +1,18 @@
+// Feather Icons Fix - Ensure icons are properly loaded
+class FeatherIconsFix extends HTMLElement {
+    connectedCallback() {
+        console.log('TaskForge Pro: Feather icons fix component loaded');
+        
+        // Wait for DOM to be fully ready
+        setTimeout(() => {
+            if (typeof feather !== 'undefined') {
+                console.log('TaskForge Pro: Feather icons library found, replacing icons...');
+                feather.replace();
+            } else {
+                console.warn('TaskForge Pro: Feather icons library not found');
+            }
+        }, 100);
+    }
+}
+
+customElements.define('feather-icons-fix', FeatherIconsFix);

components/tag-item.js

@@ -1,101 +1,3 @@
 
-// Tag Item Component
-class TagItem extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-    }
 
-    connectedCallback() {
-        this.render();
-        this.setupEventListeners();
-    }
 
-    static get observedAttributes() {
-        return ['tag-id', 'tag-name', 'tag-color'];
-    }
-
-    attributeChangedCallback() {
-        this.render();
-    }
-
-    render() {
-        const tagName = this.getAttribute('tag-name') || '';
-        const tagColor = this.getAttribute('tag-color') || '#f97316';
-        const tagId = this.getAttribute('tag-id') || '';
-
-        this.shadowRoot.innerHTML = `
-            <style>
-                :host {
-                    display: inline-flex;
-                    align-items: center;
-                    gap: 6px;
-                    padding: 4px 12px;
-                    border-radius: 16px;
-                    font-size: 14px;
-                    font-weight: 500;
-                    transition: all 0.2s ease;
-                }
-                
-                .tag-content {
-                    background-color: ${tagColor}20;
-                    color: ${tagColor};
-                    padding: 4px 12px;
-                    border-radius: 16px;
-                    display: flex;
-                    align-items: center;
-                    gap: 6px;
-                }
-                
-                .tag-name {
-                    user-select: none;
-                }
-                
-                .delete-btn {
-                    background: none;
-                    border: none;
-                    color: inherit;
-                    cursor: pointer;
-                    padding: 2px;
-                    border-radius: 50%;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
-                    transition: all 0.2s ease;
-                }
-                
-                .delete-btn:hover {
-                    background-color: rgba(0, 0, 0, 0.1);
-                    transform: scale(1.1);
-                }
-            </style>
-            
-            <div class="tag-content">
-                <span class="tag-name">${tagName}</span>
-                <button class="delete-btn">
-                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
-                </button>
-            </div>
-        `;
-    }
-setupEventListeners() {
-        this.shadowRoot.addEventListener('click', (e) => {
-            const deleteBtn = e.target.closest('.delete-btn');
-            if (deleteBtn) {
-                e.stopPropagation();
-                this.handleDelete(e);
-            }
-        });
-    }
-
-    handleDelete(e) {
-        if (confirm('Tag wirklich löschen?')) {
-            this.dispatchEvent(new CustomEvent('delete', { 
-                bubbles: true,
-                detail: { tagId: this.getAttribute('tag-id') }
-            }));
-        }
-    }
-}
-
-customElements.define('tag-item', TagItem);

components/task-item.js

@@ -1,273 +1,101 @@
 
-// Task Item Component
-class TaskItem extends HTMLElement {
+// Tag Item Component
+class TagItem extends HTMLElement {
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });
     }
 
     connectedCallback() {
-        this.taskId = this.getAttribute('task-id');
-        this.completed = this.getAttribute('completed') === 'true';
-        this.loadTaskData();
         this.render();
         this.setupEventListeners();
     }
 
     static get observedAttributes() {
-        return ['task-id', 'completed'];
+        return ['tag-id', 'tag-name', 'tag-color'];
     }
 
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (name === 'task-id' && oldValue !== newValue) {
-            this.taskId = newValue;
-            this.loadTaskData();
-        } else if (name === 'completed') {
-            this.completed = newValue === 'true';
-        }
+    attributeChangedCallback() {
         this.render();
     }
 
-    loadTaskData() {
-        if (!window.state || !window.state.tasks) return;
-        
-        this.task = window.state.tasks.find(t => t.id === this.taskId);
-        this.tags = window.state.tags || [];
-    }
-
     render() {
-        if (!this.task) {
-            this.shadowRoot.innerHTML = `<div class="loading" data-task-id="${this.taskId}">Lädt...</div>';
-            return;
-        }
-        const { title, estimatedTime, spentTime, tags } = this.task;
-        const progress = estimatedTime > 0 ? (spentTime / estimatedTime) * 100 : 0;
-        const tagElements = (tags || []).map(tagId => {
-            const tag = this.tags?.find(t => t.id === tagId);
-            return tag ? `<span class="tag-badge" style="background-color: ${tag.color}20; color: ${tag.color}">${tag.name}</span>' : '';
-        }).join('');
-        
+        const tagName = this.getAttribute('tag-name') || '';
+        const tagColor = this.getAttribute('tag-color') || '#f97316';
+        const tagId = this.getAttribute('tag-id') || '';
+
         this.shadowRoot.innerHTML = `
             <style>
                 :host {
-                    display: block;
-                    background: #1f2937;
-                    border-radius: 8px;
-                    padding: 12px;
-                    margin-bottom: 8px;
-                    transition: all 0.3s ease;
-                    cursor: pointer;
-                }
-                
-                :host(:hover) {
-                    transform: translateY(-2px);
-                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-                }
-                
-                :host(.completed) {
-                    opacity: 0.6;
-                }
-                
-                .task-header {
-                    display: flex;
+                    display: inline-flex;
                     align-items: center;
-                    justify-content: space-between;
-                    margin-bottom: 8px;
-                }
-                
-                .task-title {
-                    font-size: 16px;
+                    gap: 6px;
+                    padding: 4px 12px;
+                    border-radius: 16px;
+                    font-size: 14px;
                     font-weight: 500;
-                    color: #f3f4f6;
-                    flex: 1;
-                    margin-left: 8px;
-                    text-decoration: none;
-                }
-                
-                :host(.completed) .task-title {
-                    text-decoration: line-through;
-                    color: #9ca3af;
+                    transition: all 0.2s ease;
                 }
                 
-                .task-checkbox {
-                    width: 20px;
-                    height: 20px;
-                    cursor: pointer;
+                .tag-content {
+                    background-color: ${tagColor}20;
+                    color: ${tagColor};
+                    padding: 4px 12px;
+                    border-radius: 16px;
+                    display: flex;
+                    align-items: center;
+                    gap: 6px;
                 }
                 
-                .task-actions {
-                    display: flex;
-                    gap: 8px;
+                .tag-name {
+                    user-select: none;
                 }
                 
-                .task-action {
+                .delete-btn {
                     background: none;
                     border: none;
-                    color: #6b7280;
+                    color: inherit;
                     cursor: pointer;
-                    padding: 4px;
-                    transition: color 0.2s ease;
-                }
-                
-                .task-action:hover {
-                    color: #f97316;
-                }
-                
-                .task-info {
+                    padding: 2px;
+                    border-radius: 50%;
                     display: flex;
                     align-items: center;
-                    gap: 16px;
-                    margin-top: 8px;
+                    justify-content: center;
+                    transition: all 0.2s ease;
                 }
                 
-                .time-info {
-                    font-size: 14px;
-                    color: #9ca3af;
-                }
-                
-                .progress-bar {
-                    width: 100%;
-                    height: 4px;
-                    background: #374151;
-                    border-radius: 2px;
-                    overflow: hidden;
-                    margin-top: 8px;
-                }
-                
-                .progress-fill {
-                    height: 100%;
-                    background: linear-gradient(90deg, #f97316, #ea580c);
-                    transition: width 0.3s ease;
-                }
-                
-                .tags {
-                    display: flex;
-                    gap: 4px;
-                    flex-wrap: wrap;
-                }
-                
-                .tag-badge {
-                    font-size: 12px;
-                    padding: 2px 8px;
-                    border-radius: 12px;
-                    font-weight: 500;
+                .delete-btn:hover {
+                    background-color: rgba(0, 0, 0, 0.1);
+                    transform: scale(1.1);
                 }
             </style>
-            <div class="task-header">
-                <input type="checkbox" class="task-checkbox" ${this.completed ? 'checked' : ''}>
-                <span class="task-title">${title}</span>
-                <div class="task-actions">
-                    <button class="task-action" title="Bearbeiten">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 0-3-3L9 12"></path></svg>
-                    </button>
-                    <button class="task-action" title="Löschen">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
-                    </button>
-                </div>
-            </div>
             
-            <div class="task-info">
-                <span class="time-info">${formatTime(spentTime)} / ${formatTime(estimatedTime)}</span>
-                <div class="tags">${tagElements}</div>
-            </div>
-            
-            <div class="progress-bar">
-                <div class="progress-fill" style="width: ${progress}%"></div>
+            <div class="tag-content">
+                <span class="tag-name">${tagName}</span>
+                <button class="delete-btn">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+                </button>
             </div>
         `;
-        
-        if (this.completed) {
-            this.classList.add('completed');
-        } else {
-            this.classList.remove('completed');
-        }
     }
 setupEventListeners() {
         this.shadowRoot.addEventListener('click', (e) => {
-            const target = e.target.closest('button');
-            if (target) {
-                const action = target.getAttribute('title');
-                if (action === 'Bearbeiten') {
-                    this.handleEdit(e);
-                } else if (action === 'Löschen') {
-                    this.handleDelete(e);
-                } else if (action === 'Pomodoro starten') {
-                    this.handleFocus(e);
-                }
-            }
-        });
-        
-        this.shadowRoot.addEventListener('change', (e) => {
-            if (e.target.classList.contains('task-checkbox')) {
-                this.handleToggleComplete(e);
+            const deleteBtn = e.target.closest('.delete-btn');
+            if (deleteBtn) {
+                e.stopPropagation();
+                this.handleDelete(e);
             }
         });
     }
 
-    handleToggleComplete(e) {
-        const completed = e.target.checked;
-        this.dispatchEvent(new CustomEvent('toggle-complete', { 
-            detail: { taskId: this.getAttribute('task-id'), completed },
-            bubbles: true 
-        }));
-        
-        if (completed) {
-            this.classList.add('completed');
-        } else {
-            this.classList.remove('completed');
-        }
-    }
-
-    handleFocus(e) {
-        const taskId = this.getAttribute('task-id');
-        const task = state.tasks.find(t => t.id === taskId);
-        if (task) {
-            startFocusMode(task);
-        }
-    }
-
-    handleEdit(e) {
-        const taskId = this.getAttribute('task-id');
-        openEditTaskModal(taskId);
-    }
-
     handleDelete(e) {
-        if (confirm('Aufgabe wirklich löschen?')) {
-            this.dispatchEvent(new CustomEvent('delete-task', { 
-            detail: { taskId: this.getAttribute('task-id') },
-            bubbles: true 
-        }));
-    }
-
-    handleSave(e) {
-        const taskId = this.getAttribute('task-id');
-        const title = this.shadowRoot.getElementById(`edit-title-${taskId}`).value;
-        const hours = parseInt(this.shadowRoot.getElementById(`edit-hours-${taskId}`).value) || 0;
-        const minutes = parseInt(this.shadowRoot.getElementById(`edit-minutes-${taskId}`).value) || 0;
-        const estimatedTime = hours * 60 + minutes;
-        
-        this.dispatchEvent(new CustomEvent('update-task', { 
-            detail: { taskId, updates: { title, estimatedTime } },
-            bubbles: true 
-        }));
-    }
-
-    handleCancel(e) {
-        const editForm = this.shadowRoot.querySelector('.edit-form');
-        editForm.classList.remove('active');
-    }
-
-    handleAddTime(e) {
-        const minutes = prompt('Wie viele Minuten willst du hinzufügen?', '15');
-        if (minutes && !isNaN(minutes)) {
-            this.dispatchEvent(new CustomEvent('add-time', { 
-            detail: { 
-                taskId: this.getAttribute('task-id'), 
-                minutes: parseInt(minutes) 
-            },
-            bubbles: true 
-        }));
+        if (confirm('Tag wirklich löschen?')) {
+            this.dispatchEvent(new CustomEvent('delete', { 
+                bubbles: true,
+                detail: { tagId: this.getAttribute('tag-id') }
+            }));
+        }
     }
 }
 
-customElements.define('task-item', TaskItem);
+customElements.define('tag-item', TagItem);

components/timeline-sidebar.js

@@ -1,211 +1,273 @@
-class TimelineSidebar extends HTMLElement {
-  connectedCallback() {
-    this.attachShadow({ mode: 'open' });
-    this.render();
-    this.setupEventListeners();
-  }
 
-  render() {
-    this.shadowRoot.innerHTML = `
-      <style>
-        :host {
-          display: block;
-          position: fixed;
-          right: 0;
-          top: 0;
-          height: 100vh;
-          width: 300px;
-          background: #1f2937;
-          border-left: 1px solid #374151;
-          z-index: 30;
-          transform: translateX(100%);
-          transition: transform 0.3s ease;
-          overflow-y: auto;
-        }
-
-        :host(.open) {
-          transform: translateX(0);
-        }
-
-        .header {
-          padding: 1rem;
-          border-bottom: 1px solid #374151;
-          display: flex;
-          justify-content: space-between;
-          align-items: center;
-          background: #1f2937;
-        }
-
-        .timeline-container {
-          padding: 1rem;
-        }
-
-        .timeline-hour {
-          position: relative;
-          min-height: 60px;
-          border-bottom: 1px solid #374151;
-          padding-left: 50px;
-        }
+// Task Item Component
+class TaskItem extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
 
-        .hour-label {
-          position: absolute;
-          left: 10px;
-          top: 5px;
-          font-size: 12px;
-          color: #9ca3af;
-        }
+    connectedCallback() {
+        this.taskId = this.getAttribute('task-id');
+        this.completed = this.getAttribute('completed') === 'true';
+        this.loadTaskData();
+        this.render();
+        this.setupEventListeners();
+    }
 
-        .task-drop-area {
-          height: 100%;
-          min-height: 60px;
-          border-radius: 4px;
-          transition: background-color 0.2s ease;
-        }
+    static get observedAttributes() {
+        return ['task-id', 'completed'];
+    }
 
-        .task-drop-area:hover {
-          background-color: #37415170;
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'task-id' && oldValue !== newValue) {
+            this.taskId = newValue;
+            this.loadTaskData();
+        } else if (name === 'completed') {
+            this.completed = newValue === 'true';
         }
+        this.render();
+    }
 
-        .task-block {
-          background: #374151;
-          border-left: 3px solid #f97316;
-          padding: 0.5rem;
-          margin: 0.5rem 0;
-          border-radius: 4px;
-          font-size: 14px;
-          cursor: pointer;
-          margin-bottom: 4px;
-          transition: all 0.2s ease;
-        }
+    loadTaskData() {
+        if (!window.state || !window.state.tasks) return;
+        
+        this.task = window.state.tasks.find(t => t.id === this.taskId);
+        this.tags = window.state.tags || [];
+    }
 
-        .task-block:hover {
-          background: #4b5563;
-          transform: scale(1.02);
+    render() {
+        if (!this.task) {
+            this.shadowRoot.innerHTML = `<div class="loading" data-task-id="${this.taskId}">Lädt...</div>';
+            return;
         }
-
-        .toggle-btn {
-          position: fixed;
-          right: 300px;
-          top: 50%;
-          transform: translateY(-50%);
-          background: #1f2937;
-          border: 1px solid #374151;
-          border-right: none;
-          padding: 1rem 0.5rem;
-          border-radius: 5px 0 0 5px;
-          cursor: pointer;
-          z-index: 30;
-          color: white;
+        const { title, estimatedTime, spentTime, tags } = this.task;
+        const progress = estimatedTime > 0 ? (spentTime / estimatedTime) * 100 : 0;
+        const tagElements = (tags || []).map(tagId => {
+            const tag = this.tags?.find(t => t.id === tagId);
+            return tag ? `<span class="tag-badge" style="background-color: ${tag.color}20; color: ${tag.color}">${tag.name}</span>' : '';
+        }).join('');
+        
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    background: #1f2937;
+                    border-radius: 8px;
+                    padding: 12px;
+                    margin-bottom: 8px;
+                    transition: all 0.3s ease;
+                    cursor: pointer;
+                }
+                
+                :host(:hover) {
+                    transform: translateY(-2px);
+                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+                }
+                
+                :host(.completed) {
+                    opacity: 0.6;
+                }
+                
+                .task-header {
+                    display: flex;
+                    align-items: center;
+                    justify-content: space-between;
+                    margin-bottom: 8px;
+                }
+                
+                .task-title {
+                    font-size: 16px;
+                    font-weight: 500;
+                    color: #f3f4f6;
+                    flex: 1;
+                    margin-left: 8px;
+                    text-decoration: none;
+                }
+                
+                :host(.completed) .task-title {
+                    text-decoration: line-through;
+                    color: #9ca3af;
+                }
+                
+                .task-checkbox {
+                    width: 20px;
+                    height: 20px;
+                    cursor: pointer;
+                }
+                
+                .task-actions {
+                    display: flex;
+                    gap: 8px;
+                }
+                
+                .task-action {
+                    background: none;
+                    border: none;
+                    color: #6b7280;
+                    cursor: pointer;
+                    padding: 4px;
+                    transition: color 0.2s ease;
+                }
+                
+                .task-action:hover {
+                    color: #f97316;
+                }
+                
+                .task-info {
+                    display: flex;
+                    align-items: center;
+                    gap: 16px;
+                    margin-top: 8px;
+                }
+                
+                .time-info {
+                    font-size: 14px;
+                    color: #9ca3af;
+                }
+                
+                .progress-bar {
+                    width: 100%;
+                    height: 4px;
+                    background: #374151;
+                    border-radius: 2px;
+                    overflow: hidden;
+                    margin-top: 8px;
+                }
+                
+                .progress-fill {
+                    height: 100%;
+                    background: linear-gradient(90deg, #f97316, #ea580c);
+                    transition: width 0.3s ease;
+                }
+                
+                .tags {
+                    display: flex;
+                    gap: 4px;
+                    flex-wrap: wrap;
+                }
+                
+                .tag-badge {
+                    font-size: 12px;
+                    padding: 2px 8px;
+                    border-radius: 12px;
+                    font-weight: 500;
+                }
+            </style>
+            <div class="task-header">
+                <input type="checkbox" class="task-checkbox" ${this.completed ? 'checked' : ''}>
+                <span class="task-title">${title}</span>
+                <div class="task-actions">
+                    <button class="task-action" title="Bearbeiten">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 4H4a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-7"></path><path d="M18.5 2.5a2.121 2.121 0 0 0-3-3L9 12"></path></svg>
+                    </button>
+                    <button class="task-action" title="Löschen">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
+                    </button>
+                </div>
+            </div>
+            
+            <div class="task-info">
+                <span class="time-info">${formatTime(spentTime)} / ${formatTime(estimatedTime)}</span>
+                <div class="tags">${tagElements}</div>
+            </div>
+            
+            <div class="progress-bar">
+                <div class="progress-fill" style="width: ${progress}%"></div>
+            </div>
+        `;
+        
+        if (this.completed) {
+            this.classList.add('completed');
+        } else {
+            this.classList.remove('completed');
         }
+    }
+setupEventListeners() {
+        this.shadowRoot.addEventListener('click', (e) => {
+            const target = e.target.closest('button');
+            if (target) {
+                const action = target.getAttribute('title');
+                if (action === 'Bearbeiten') {
+                    this.handleEdit(e);
+                } else if (action === 'Löschen') {
+                    this.handleDelete(e);
+                } else if (action === 'Pomodoro starten') {
+                    this.handleFocus(e);
+                }
+            }
+        });
+        
+        this.shadowRoot.addEventListener('change', (e) => {
+            if (e.target.classList.contains('task-checkbox')) {
+                this.handleToggleComplete(e);
+            }
+        });
+    }
 
-        .toggle-btn:hover {
-          background: #374151;
+    handleToggleComplete(e) {
+        const completed = e.target.checked;
+        this.dispatchEvent(new CustomEvent('toggle-complete', { 
+            detail: { taskId: this.getAttribute('task-id'), completed },
+            bubbles: true 
+        }));
+        
+        if (completed) {
+            this.classList.add('completed');
+        } else {
+            this.classList.remove('completed');
         }
+    }
 
-        .current-time {
-          background: #ef444420;
-          border-left: 2px solid #ef4444;
+    handleFocus(e) {
+        const taskId = this.getAttribute('task-id');
+        const task = state.tasks.find(t => t.id === taskId);
+        if (task) {
+            startFocusMode(task);
         }
-      </style>
-
-      <button class="toggle-btn">
-        <i data-feather="chevron-left"></i>
-      </button>
-
-      <div class="header">
-        <h3>Timeline</h3>
-        <button id="close-timeline">
-          <i data-feather="x"></i>
-        </button>
-      </div>
-
-      <div class="timeline-container" id="timeline-hours">
-        ${Array.from({ length: 24 }, (_, i) => `
-          <div class="timeline-hour" data-hour="${i}">
-            <span class="hour-label">${i.toString().padStart(2, '0')}:00</span>
-            <div class="task-drop-area" data-hour="${i}"></div>
-          </div>
-        `).join('')}
-      </div>
-    `;
-  }
-
-  setupEventListeners() {
-    const toggleBtn = this.shadowRoot.querySelector('.toggle-btn');
-    toggleBtn.addEventListener('click', () => {
-      this.classList.toggle('open');
-      const icon = toggleBtn.querySelector('i');
-      if (this.classList.contains('open')) {
-      } else {
-      }
-    });
+    }
 
-    // Setup drag and drop
-    this.shadowRoot.addEventListener('dragover', (e) => {
-      if (e.target.classList.contains('task-drop-area')) {
-        e.preventDefault();
-        e.target.style.backgroundColor = '#37415170';
-      }
-    });
+    handleEdit(e) {
+        const taskId = this.getAttribute('task-id');
+        openEditTaskModal(taskId);
+    }
 
-    this.shadowRoot.addEventListener('dragleave', (e) => {
-      if (e.target.classList.contains('task-drop-area')) {
-        e.target.style.backgroundColor = '';
-      }
-    });
+    handleDelete(e) {
+        if (confirm('Aufgabe wirklich löschen?')) {
+            this.dispatchEvent(new CustomEvent('delete-task', { 
+            detail: { taskId: this.getAttribute('task-id') },
+            bubbles: true 
+        }));
+    }
 
-    this.shadowRoot.addEventListener('drop', (e) => {
-      if (e.target.classList.contains('task-drop-area')) {
-        e.preventDefault();
-        e.target.style.backgroundColor = '';
-        
-        const taskId = e.dataTransfer.getData('text/plain');
-        const hour = parseInt(e.target.dataset.hour);
+    handleSave(e) {
+        const taskId = this.getAttribute('task-id');
+        const title = this.shadowRoot.getElementById(`edit-title-${taskId}`).value;
+        const hours = parseInt(this.shadowRoot.getElementById(`edit-hours-${taskId}`).value) || 0;
+        const minutes = parseInt(this.shadowRoot.getElementById(`edit-minutes-${taskId}`).value) || 0;
+        const estimatedTime = hours * 60 + minutes;
         
-        this.dispatchEvent(new CustomEvent('task-dropped', {
-          detail: { taskId, hour }
+        this.dispatchEvent(new CustomEvent('update-task', { 
+            detail: { taskId, updates: { title, estimatedTime } },
+            bubbles: true 
         }));
-      }
-    });
-
-    // Initialize timeline
-    setTimeout(() => {
-      this.updateTimeline();
-    }, 100);
-  }
-
-  updateTimeline() {
-    const today = new Date().toDateString();
-    const scheduledTasks = state.timelineTasks.filter(t => 
-      new Date(t.date).toDateString() === today
-    );
+    }
 
-    const container = this.shadowRoot.querySelector('.timeline-container');
-    container.querySelectorAll('.task-block').forEach(el => el.remove());
+    handleCancel(e) {
+        const editForm = this.shadowRoot.querySelector('.edit-form');
+        editForm.classList.remove('active');
+    }
 
-    scheduledTasks.forEach(timelineTask => {
-      const task = state.tasks.find(t => t.id === timelineTask.taskId);
-      if (!task || task.completed) return;
-      
-      const startTime = new Date(timelineTask.startTime);
-      const hour = startTime.getHours();
-      const minute = startTime.getMinutes();
-      
-      const hourEl = this.shadowRoot.querySelector(`.timeline-hour[data-hour="${hour}"]`);
-      if (hourEl) {
-        const taskEl = document.createElement('div');
-        taskEl.className = 'task-block';
-        taskEl.innerHTML = `
-          <div class="task-title">${task.title}</div>
-          <div class="task-time">${formatTime(task.estimatedTime)}</div>
-        `;
-        taskEl.draggable = true;
-        taskEl.dataset.taskId = task.id;
-        
-        hourEl.appendChild(taskEl);
-      }
-    });
-  }
+    handleAddTime(e) {
+        const minutes = prompt('Wie viele Minuten willst du hinzufügen?', '15');
+        if (minutes && !isNaN(minutes)) {
+            this.dispatchEvent(new CustomEvent('add-time', { 
+            detail: { 
+                taskId: this.getAttribute('task-id'), 
+                minutes: parseInt(minutes) 
+            },
+            bubbles: true 
+        }));
+    }
 }
 
-customElements.define('timeline-sidebar', TimelineSidebar);
+customElements.define('task-item', TaskItem);

components/timeline-tasks.js

@@ -1,3 +1,211 @@
+class TimelineSidebar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.render();
+    this.setupEventListeners();
+  }
 
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          position: fixed;
+          right: 0;
+          top: 0;
+          height: 100vh;
+          width: 300px;
+          background: #1f2937;
+          border-left: 1px solid #374151;
+          z-index: 30;
+          transform: translateX(100%);
+          transition: transform 0.3s ease;
+          overflow-y: auto;
+        }
 
+        :host(.open) {
+          transform: translateX(0);
+        }
 
+        .header {
+          padding: 1rem;
+          border-bottom: 1px solid #374151;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          background: #1f2937;
+        }
+
+        .timeline-container {
+          padding: 1rem;
+        }
+
+        .timeline-hour {
+          position: relative;
+          min-height: 60px;
+          border-bottom: 1px solid #374151;
+          padding-left: 50px;
+        }
+
+        .hour-label {
+          position: absolute;
+          left: 10px;
+          top: 5px;
+          font-size: 12px;
+          color: #9ca3af;
+        }
+
+        .task-drop-area {
+          height: 100%;
+          min-height: 60px;
+          border-radius: 4px;
+          transition: background-color 0.2s ease;
+        }
+
+        .task-drop-area:hover {
+          background-color: #37415170;
+        }
+
+        .task-block {
+          background: #374151;
+          border-left: 3px solid #f97316;
+          padding: 0.5rem;
+          margin: 0.5rem 0;
+          border-radius: 4px;
+          font-size: 14px;
+          cursor: pointer;
+          margin-bottom: 4px;
+          transition: all 0.2s ease;
+        }
+
+        .task-block:hover {
+          background: #4b5563;
+          transform: scale(1.02);
+        }
+
+        .toggle-btn {
+          position: fixed;
+          right: 300px;
+          top: 50%;
+          transform: translateY(-50%);
+          background: #1f2937;
+          border: 1px solid #374151;
+          border-right: none;
+          padding: 1rem 0.5rem;
+          border-radius: 5px 0 0 5px;
+          cursor: pointer;
+          z-index: 30;
+          color: white;
+        }
+
+        .toggle-btn:hover {
+          background: #374151;
+        }
+
+        .current-time {
+          background: #ef444420;
+          border-left: 2px solid #ef4444;
+        }
+      </style>
+
+      <button class="toggle-btn">
+        <i data-feather="chevron-left"></i>
+      </button>
+
+      <div class="header">
+        <h3>Timeline</h3>
+        <button id="close-timeline">
+          <i data-feather="x"></i>
+        </button>
+      </div>
+
+      <div class="timeline-container" id="timeline-hours">
+        ${Array.from({ length: 24 }, (_, i) => `
+          <div class="timeline-hour" data-hour="${i}">
+            <span class="hour-label">${i.toString().padStart(2, '0')}:00</span>
+            <div class="task-drop-area" data-hour="${i}"></div>
+          </div>
+        `).join('')}
+      </div>
+    `;
+  }
+
+  setupEventListeners() {
+    const toggleBtn = this.shadowRoot.querySelector('.toggle-btn');
+    toggleBtn.addEventListener('click', () => {
+      this.classList.toggle('open');
+      const icon = toggleBtn.querySelector('i');
+      if (this.classList.contains('open')) {
+      } else {
+      }
+    });
+
+    // Setup drag and drop
+    this.shadowRoot.addEventListener('dragover', (e) => {
+      if (e.target.classList.contains('task-drop-area')) {
+        e.preventDefault();
+        e.target.style.backgroundColor = '#37415170';
+      }
+    });
+
+    this.shadowRoot.addEventListener('dragleave', (e) => {
+      if (e.target.classList.contains('task-drop-area')) {
+        e.target.style.backgroundColor = '';
+      }
+    });
+
+    this.shadowRoot.addEventListener('drop', (e) => {
+      if (e.target.classList.contains('task-drop-area')) {
+        e.preventDefault();
+        e.target.style.backgroundColor = '';
+        
+        const taskId = e.dataTransfer.getData('text/plain');
+        const hour = parseInt(e.target.dataset.hour);
+        
+        this.dispatchEvent(new CustomEvent('task-dropped', {
+          detail: { taskId, hour }
+        }));
+      }
+    });
+
+    // Initialize timeline
+    setTimeout(() => {
+      this.updateTimeline();
+    }, 100);
+  }
+
+  updateTimeline() {
+    const today = new Date().toDateString();
+    const scheduledTasks = state.timelineTasks.filter(t => 
+      new Date(t.date).toDateString() === today
+    );
+
+    const container = this.shadowRoot.querySelector('.timeline-container');
+    container.querySelectorAll('.task-block').forEach(el => el.remove());
+
+    scheduledTasks.forEach(timelineTask => {
+      const task = state.tasks.find(t => t.id === timelineTask.taskId);
+      if (!task || task.completed) return;
+      
+      const startTime = new Date(timelineTask.startTime);
+      const hour = startTime.getHours();
+      const minute = startTime.getMinutes();
+      
+      const hourEl = this.shadowRoot.querySelector(`.timeline-hour[data-hour="${hour}"]`);
+      if (hourEl) {
+        const taskEl = document.createElement('div');
+        taskEl.className = 'task-block';
+        taskEl.innerHTML = `
+          <div class="task-title">${task.title}</div>
+          <div class="task-time">${formatTime(task.estimatedTime)}</div>
+        `;
+        taskEl.draggable = true;
+        taskEl.dataset.taskId = task.id;
+        
+        hourEl.appendChild(taskEl);
+      }
+    });
+  }
+}
+
+customElements.define('timeline-sidebar', TimelineSidebar);

index.html

@@ -1,209 +1,824 @@
-<!DOCTYPE html>
-<html lang="de" class="dark">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TaskForge Pro</title>
-    <link rel="stylesheet" href="style.css">
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://unpkg.com/feather-icons"></script>
-</head>
-<body class="bg-gray-900 text-gray-100 min-h-screen">
-    <!-- Header with Navigation -->
-    <header class="bg-gray-800 border-b border-gray-700 sticky top-0 z-40">
-        <div class="container mx-auto px-4 py-4">
-            <div class="flex items-center justify-between">
-                <h1 class="text-2xl font-bold text-orange-500">TaskForge Pro</h1>
-                <nav class="flex items-center space-x-4">
-                    <button id="view-home" class="nav-btn active" data-view="home">
-                        <i data-feather="home"></i> Übersicht
-                </button>
-                    <button id="view-settings" class="nav-btn" data-view="settings">
-                        <i data-feather="settings"></i> Einstellungen
-                </button>
-                </nav>
-            </div>
-        </div>
-    </header>
-<!-- Main Content -->
-    <main class="container mx-auto px-4 py-6">
-        <!-- Home View -->
-        <div id="home-view" class="view active">
-            <!-- Tag Progress Bars -->
-            <div id="tag-progress-container" class="mb-6 space-y-3"></div>
-
-            <!-- Main Progress Bar -->
-            <div class="bg-gray-800 rounded-xl p-6 mb-8 shadow-lg">
-                <div class="flex items-center justify-between mb-4">
-                <h2 class="text-xl font-semibold">Gesamtfortschritt</h2>
-                <span id="total-progress-text" class="text-sm text-gray-400">0% (0h / 0h)</span>
-            </div>
-            <div class="w-full bg-gray-700 rounded-full h-4 overflow-hidden">
-                <div id="total-progress-bar" class="bg-gradient-to-r from-orange-500 to-orange-600 h-full rounded-full transition-all duration-500" style="width: 0%"></div>
-            </div>
-        </div>
 
-            <!-- Task Lists -->
-            <div class="flex gap-6">
-                <!-- Open Tasks -->
-                <div class="flex-1 bg-gray-800 rounded-xl shadow-lg">
-                <div class="p-4 border-b border-gray-700">
-                    <h3 class="text-lg font-semibold flex items-center">
-                        <i data-feather="circle" class="text-orange-500 mr-2"></i>
-                        Offene Aufgaben (<span id="open-count">0</span>)
-                    </h3>
-                </div>
-                <div id="open-tasks" class="p-4 space-y-3 max-h-96 overflow-y-auto"></div>
-                </div>
+// TaskForge Pro - Main JavaScript
+// State management
+window.state = {
+    tasks: [],
+    tags: [],
+    currentView: 'home',
+    focusTask: null,
+    pomodoro: {
+        isRunning: false,
+        isBreak: false,
+        timeRemaining: 0,
+        totalTime: 0,
+        interval: null
+    },
+    timelineTasks: []
+};
+// Initialize
+document.addEventListener('DOMContentLoaded', function() {
+    loadFromLocalStorage();
+    initializeUI();
+    setupEventListeners();
+    render();
+});
+// Local Storage
+function loadFromLocalStorage() {
+    const savedTasks = localStorage.getItem('tasks');
+    const savedTags = localStorage.getItem('tags');
+    const savedTimeline = localStorage.getItem('timeline');
+    
+    if (savedTasks) {
+        state.tasks = JSON.parse(savedTasks);
+    }
+    if (savedTags) {
+        state.tags = JSON.parse(savedTags);
+    }
+    if (savedTimeline) {
+        state.timelineTasks = JSON.parse(savedTimeline);
+    }
+    
+    // Load Pomodoro settings
+    const workTime = localStorage.getItem('pomodoroWorkTime') || 25;
+    const breakTime = localStorage.getItem('pomodoroBreakTime') || 5;
+    document.getElementById('pomodoro-work').value = workTime;
+    document.getElementById('pomodoro-break').value = breakTime;
+}
+
+function saveToLocalStorage() {
+    localStorage.setItem('tasks', JSON.stringify(state.tasks));
+    localStorage.setItem('tags', JSON.stringify(state.tags));
+    localStorage.setItem('timeline', JSON.stringify(state.timelineTasks));
+}
+
+// UI Initialization
+function initializeUI() {
+    // Current time display
+    updateCurrentTime();
+    setInterval(updateCurrentTime, 1000);
+    
+    // Initialize timeline
+    initializeTimeline();
+    
+    // Scroll to current time in timeline
+    setTimeout(scrollToCurrentTime, 100);
+// Check for default tags
+    if (state.tags.length === 0) {
+        state.tags = [
+            { id: '1', name: 'Wichtig', color: '#ef4444' },
+            { id: '2', name: 'Privat', color: '#10b981' },
+            { id: '3', name: 'Arbeit', color: '#3b82f6' }
+        ];
+        saveToLocalStorage();
+    }
+}
+
+function updateCurrentTime() {
+    const now = new Date();
+    const timeString = now.toLocaleTimeString('de-DE', { 
+        hour: '2-digit', 
+        minute: '2-digit' 
+    });
+    document.getElementById('current-time').textContent = timeString;
+}
+function setupEventListeners() {
+    // Navigation
+    document.querySelectorAll('.nav-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            const view = e.currentTarget.dataset.view;
+            switchView(view);
+        });
+    });
+
+    // FAB buttons
+    document.getElementById('add-task-fab').addEventListener('click', openAddTaskModal);
+    document.getElementById('focus-fab').addEventListener('click', enterFocusMode);
+
+    // Add task modal
+    document.getElementById('add-task-form').addEventListener('submit', handleAddTask);
+    document.getElementById('cancel-task').addEventListener('click', closeAddTaskModal);
+
+    // Settings
+    document.getElementById('import-btn').addEventListener('click', handleImport);
+    document.getElementById('export-btn').addEventListener('click', handleExport);
+    document.getElementById('add-tag-btn').addEventListener('click', handleAddTag);
+    
+    document.getElementById('pomodoro-work').addEventListener('change', savePomodoroSettings);
+    document.getElementById('pomodoro-break').addEventListener('change', savePomodoroSettings);
+
+    // Focus mode
+    document.getElementById('focus-pause').addEventListener('click', pausePomodoro);
+    document.getElementById('focus-play').addEventListener('click', resumePomodoro);
+    document.getElementById('focus-stop').addEventListener('click', stopPomodoro);
+
+    // Event delegation for task item events
+    document.addEventListener('delete-task', (e) => {
+        deleteTask(e.detail.taskId);
+    });
+
+    document.addEventListener('toggle-complete', (e) => {
+        toggleTaskComplete(e.detail.taskId, e.detail.completed);
+    });
+
+    document.addEventListener('update-task', (e) => {
+        updateTask(e.detail.taskId, e.detail.updates);
+    });
+
+    document.addEventListener('add-time', (e) => {
+        addTimeToTask(e.detail.taskId, e.detail.minutes);
+    });
 
-                <!-- Completed Tasks -->
-                <div class="flex-1 bg-gray-800 rounded-xl shadow-lg">
-                    <div class="p-4 border-b border-gray-700">
-                        <h3 class="text-lg font-semibold flex items-center">
-                            <i data-feather="check-circle" class="text-emerald-500 mr-2"></i>
-                            Erledigte Aufgaben (<span id="completed-count">0</span>)
-                        </h3>
+    // Timeline sidebar events
+    const timelineSidebar = document.getElementById('timeline-sidebar');
+    if (timelineSidebar) {
+        timelineSidebar.addEventListener('task-dropped', (e) => {
+            scheduleTask(e.detail.taskId, e.detail.hour, 0);
+        });
+    }
+}
+// View Management
+function switchView(view) {
+    state.currentView = view;
+    
+    // Update nav buttons
+    document.querySelectorAll('.nav-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.view === view);
+    });
+    
+    // Hide all views first
+    document.querySelectorAll('.view').forEach(v => {
+        v.classList.remove('active');
+        v.style.display = 'none';
+    });
+    
+    // Show only the active view
+    const activeView = document.getElementById(`${view}-view`);
+    if (activeView) {
+        activeView.style.display = 'block';
+        activeView.classList.add('active');
+    }
+}
+// Task Management
+function addTask(task) {
+    const newTask = {
+        id: Date.now().toString(),
+        title: task.title,
+        completed: false,
+        estimatedTime: task.estimatedTime, // in minutes
+        spentTime: 0, // in minutes
+        tags: task.tags || [],
+        createdAt: new Date().toISOString()
+    };
+    
+    state.tasks.push(newTask);
+    saveToLocalStorage();
+    render();
+    
+    return newTask;
+}
+
+function updateTask(taskId, updates) {
+    const task = state.tasks.find(t => t.id === taskId);
+    if (task) {
+        Object.assign(task, updates);
+        saveToLocalStorage();
+        render();
+    }
+}
+
+function deleteTask(taskId) {
+    state.tasks = state.tasks.filter(t => t.id !== taskId);
+    state.timelineTasks = state.timelineTasks.filter(t => t.taskId !== taskId);
+    saveToLocalStorage();
+    render();
+}
+function toggleTaskComplete(taskId, completed) {
+    const task = state.tasks.find(t => t.id === taskId);
+    if (task) {
+        task.completed = completed !== undefined ? completed : !task.completed;
+        saveToLocalStorage();
+        render();
+    }
+}
+// Modal Functions
+function openAddTaskModal() {
+    const modal = document.getElementById('add-task-modal');
+    modal.classList.remove('hidden');
+    renderModalTags();
+    document.getElementById('task-title').focus();
+}
+function closeAddTaskModal() {
+    const modal = document.getElementById('add-task-modal');
+    modal.classList.add('hidden');
+    document.getElementById('add-task-form').reset();
+}
+
+function handleAddTask(e) {
+    e.preventDefault();
+    
+    const title = document.getElementById('task-title').value;
+    const hours = parseInt(document.getElementById('task-hours').value) || 0;
+    const minutes = parseInt(document.getElementById('task-minutes').value) || 0;
+    const estimatedTime = hours * 60 + minutes;
+    
+    const selectedTags = Array.from(document.querySelectorAll('#modal-tags-list input:checked')).map(cb => cb.value);
+    
+    addTask({
+        title,
+        estimatedTime,
+        tags: selectedTags
+    });
+    
+    closeAddTaskModal();
+}
+
+function renderModalTags() {
+    const container = document.getElementById('modal-tags-list');
+    container.innerHTML = state.tags.map(tag => `
+        <label class="flex items-center space-x-2 cursor-pointer">
+            <input type="checkbox" value="${tag.id}" class="custom-checkbox">
+            <span class="tag-badge" style="background-color: ${tag.color}20; color: ${tag.color}">
+                ${tag.name}
+            </span>
+        </label>
+    `).join('');
+}
+
+// Tag Management
+function addTag(tag) {
+    state.tags.push({
+        id: Date.now().toString(),
+        name: tag.name,
+        color: tag.color
+    });
+    saveToLocalStorage();
+    render();
+}
+
+function deleteTag(tagId) {
+    state.tags = state.tags.filter(t => t.id !== tagId);
+    // Remove tag from all tasks
+    state.tasks.forEach(task => {
+        task.tags = task.tags.filter(t => t !== tagId);
+    });
+    saveToLocalStorage();
+    render();
+}
+
+function handleAddTag() {
+    const name = document.getElementById('new-tag-name').value;
+    const color = document.getElementById('new-tag-color').value;
+    
+    if (name) {
+        addTag({ name, color });
+        document.getElementById('new-tag-name').value = '';
+    }
+}
+
+// Import/Export
+function handleImport() {
+    const markdown = document.getElementById('import-md').value;
+    if (!markdown) return;
+    
+    const tasks = parseMarkdown(markdown);
+    tasks.forEach(task => {
+        // Check if task already exists
+        const exists = state.tasks.some(t => t.title === task.title);
+        if (!exists) {
+            state.tasks.push({
+                id: Date.now().toString() + Math.random(),
+                title: task.title,
+                completed: task.completed,
+                estimatedTime: task.estimatedTime,
+                spentTime: task.spentTime || 0,
+                tags: [],
+                createdAt: new Date().toISOString()
+            });
+        }
+    });
+    
+    saveToLocalStorage();
+    render();
+    document.getElementById('import-md').value = '';
+}
+
+function handleExport() {
+    const markdown = generateMarkdown();
+    const blob = new Blob([markdown], { type: 'text/markdown' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'tasks.md';
+    a.click();
+    URL.revokeObjectURL(url);
+}
+function parseMarkdown(markdown) {
+    const lines = markdown.split('\n');
+    const tasks = [];
+    
+    const taskRegex = /^\s*-\s*\[([ x])\]\s+(.+?)(?:\s*\|\s*(.+?)(?:\s*\|\s*(.+?))?)?\s*$/;
+    
+    lines.forEach(line => {
+        const match = line.match(taskRegex);
+        if (match) {
+            const completed = match[1] === 'x';
+            const title = match[2].trim();
+            const timePart = match[3] ? match[3].trim() : '0h';
+            const tagsPart = match[4] ? match[4].trim() : '';
+            
+            // Parse time
+            const timeMatch = timePart.match(/(\d+)(?:\s*h\s*)?(?:(?:\s*(\d+)\s*m\s*)?)?/);
+            const hours = parseInt(timeMatch[1]) || 0;
+            const minutes = parseInt(timeMatch[2]) || 0;
+            const estimatedTime = hours * 60 + minutes;
+            
+            tasks.push({
+                title,
+                completed,
+                estimatedTime
+            });
+        }
+    });
+return tasks;
+}
+
+function generateMarkdown() {
+    return state.tasks.map(task => {
+        const status = task.completed ? 'x' : ' ';
+        const hours = Math.floor(task.estimatedTime / 60);
+        const minutes = task.estimatedTime % 60;
+        const timeStr = `${hours}h${minutes > 0 ? ` ${minutes}m` : ''}`;
+        return `- [${status}] ${task.title} | ${timeStr}`;
+    }).join('\n');
+}
+
+// Rendering
+function render() {
+    renderTasks();
+    renderProgressBars();
+    renderTags();
+    renderTimeline();
+}
+function renderTasks() {
+    const openContainer = document.getElementById('open-tasks');
+    const completedContainer = document.getElementById('completed-tasks');
+    
+    const openTasks = state.tasks.filter(t => !t.completed);
+    const completedTasks = state.tasks.filter(t => t.completed);
+    
+    // Render open tasks
+    if (openTasks.length === 0) {
+        openContainer.innerHTML = '<div class="empty-state"><i data-feather="inbox"></i><p>Keine offenen Aufgaben</p></div>';
+    } else {
+        openContainer.innerHTML = '';
+        openTasks.forEach(task => {
+            const taskElement = document.createElement('task-item');
+            taskElement.setAttribute('task-id', task.id);
+            taskElement.setAttribute('completed', 'false');
+            openContainer.appendChild(taskElement);
+        });
+    }
+    
+    // Render completed tasks
+    if (completedTasks.length === 0) {
+        completedContainer.innerHTML = '<div class="empty-state"><i data-feather="check-circle"></i><p>Keine erledigten Aufgaben</p></div>';
+    } else {
+        completedContainer.innerHTML = '';
+        completedTasks.forEach(task => {
+            const taskElement = document.createElement('task-item');
+            taskElement.setAttribute('task-id', task.id);
+            taskElement.setAttribute('completed', 'true');
+            completedContainer.appendChild(taskElement);
+        });
+    }
+    
+    document.getElementById('open-count').textContent = openTasks.length;
+    document.getElementById('completed-count').textContent = completedTasks.length;
+    
+    // Setup drag and drop for task items
+    setupTaskDragAndDrop();
+    
+    // Replace feather icons
+    feather.replace();
+}
+function renderProgressBars() {
+    // Overall progress
+    const totalEstimated = state.tasks.reduce((sum, t) => sum + t.estimatedTime, 0) || 1;
+    const totalSpent = state.tasks.reduce((sum, t) => sum + t.spentTime, 0);
+    const totalProgress = (totalSpent / totalEstimated) * 100;
+    
+    document.getElementById('total-progress-bar').style.width = `${totalProgress}%`;
+    document.getElementById('total-progress-text').textContent = 
+        `${Math.round(totalProgress)}% (${formatTime(totalSpent)} / ${formatTime(totalEstimated)})`;
+    
+    // Tag progress bars - only for tags with tasks
+    const container = document.getElementById('tag-progress-container');
+    container.innerHTML = state.tags
+        .filter(tag => state.tasks.some(t => t.tags.includes(tag.id))) // Only tags with tasks
+        .map(tag => {
+            const tagTasks = state.tasks.filter(t => t.tags.includes(tag.id));
+            const tagEstimated = tagTasks.reduce((sum, t) => sum + t.estimatedTime, 0) || 1;
+            const tagSpent = tagTasks.reduce((sum, t) => sum + t.spentTime, 0);
+            const tagProgress = (tagSpent / tagEstimated) * 100;
+            
+            return `
+                <div class="bg-gray-800 rounded-lg p-4 shadow transition-all hover:scale-[1.02]">
+                    <div class="flex items-center justify-between mb-2">
+                        <span class="font-medium" style="color: ${tag.color}">${tag.name}</span>
+                        <span class="text-sm text-gray-400">
+                            ${Math.round(tagProgress)}% (${formatTime(tagSpent)} / ${formatTime(tagEstimated)})
+                        </span>
                     </div>
-                    <div id="completed-tasks" class="p-4 space-y-3 max-h-96 overflow-y-auto"></div>
-                </div>
-            </div>
-        </div>
-<!-- Settings View -->
-        <div id="settings-view" class="view">
-            <div class="max-w-4xl mx-auto">
-                <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
-                    <h2 class="text-xl font-semibold mb-6">Einstellungen</h2>
-                    
-                    <!-- Import/Export -->
-                    <div class="mb-8">
-                        <h3 class="text-lg font-medium mb-4">Import/Export</h3>
-                        <div class="space-y-4">
-                            <div>
-                                <label class="block text-sm font-medium mb-2">Markdown importieren</label>
-                                <textarea id="import-md" class="w-full h-64 bg-gray-700 rounded-lg p-4 text-gray-100" 
-                                    placeholder="- [ ] Aufgabe | 2h | #tag1 #tag2&#10;- [x] Erledigte Aufgabe | 1h 30m | #tag1"></textarea>
-                                <button id="import-btn" class="mt-2 px-4 py-2 bg-emerald-500 hover:bg-emerald-600 rounded-lg transition">
-                                    Importieren
-                                </button>
-                            </div>
-                            <div>
-                                <button id="export-btn" class="px-4 py-2 bg-orange-500 hover:bg-orange-600 rounded-lg transition">
-                                    Als Markdown exportieren
-                                </button>
-                            </div>
-                        </div>
+                    <div class="w-full bg-gray-700 rounded-full h-2 overflow-hidden">
+                        <div class="h-full rounded-full transition-all duration-500" 
+                             style="width: ${tagProgress}%; background-color: ${tag.color}"></div>
                     </div>
+                </div>
+            `;
+        }).join('');
+}
+function renderTags() {
+    const container = document.getElementById('tags-list');
+    container.innerHTML = state.tags.map(tag => `
+        <tag-item tag-id="${tag.id}" tag-name="${tag.name}" tag-color="${tag.color}"></tag-item>
+    `).join('');
+    
+    // Render tag components
+    document.querySelectorAll('tag-item').forEach(el => {
+        const tagId = el.getAttribute('tag-id');
+        el.addEventListener('delete', () => deleteTag(tagId));
+    });
+}
+function highlightCurrentHour() {
+    const now = new Date();
+    const currentHour = now.getHours();
+    const currentMinute = now.getMinutes();
+    
+    // Highlight current hour
+    document.querySelectorAll('.timeline-hour').forEach(el => {
+        el.classList.remove('bg-gray-750');
+    });
+    
+    const hourElement = document.querySelector(`.timeline-hour[data-hour="${currentHour}"]`);
+    if (hourElement) {
+        hourElement.classList.add('bg-gray-750');
+    }
+    
+    // Add current time indicator line
+    document.getElementById('current-time-indicator')?.remove();
+    
+    const timelineContainer = document.getElementById('timeline-hours');
+    if (timelineContainer) {
+        const indicator = document.createElement('div');
+        indicator.id = 'current-time-indicator';
+        indicator.style.position = 'absolute';
+        indicator.style.left = '0';
+        indicator.style.right = '0';
+        indicator.style.height = '2px';
+        indicator.style.backgroundColor = '#ef4444';
+        indicator.style.zIndex = '10';
+        
+        const hourElement = document.querySelector(`.timeline-hour[data-hour="${currentHour}"]`);
+        if (hourElement) {
+            const hourTop = hourElement.offsetTop;
+            const hourHeight = hourElement.offsetHeight;
+            const minutePosition = (currentMinute / 60) * hourHeight;
+            
+            indicator.style.top = `${hourTop + minutePosition}px`;
+            timelineContainer.appendChild(indicator);
+            
+            // Add time label
+            const timeLabel = document.createElement('div');
+            timeLabel.textContent = now.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+            timeLabel.style.position = 'absolute';
+            timeLabel.style.left = '-64px';
+            timeLabel.style.top = `${hourTop + minutePosition - 10}px`;
+            timeLabel.style.backgroundColor = '#ef4444';
+            timeLabel.style.color = 'white';
+            timeLabel.style.padding = '2px 8px';
+            timeLabel.style.borderRadius = '4px';
+            timeLabel.style.fontSize = '12px';
+            timeLabel.style.zIndex = '10';
+            
+            hourEl.appendChild(timeLabel);
+}
+    }
+}
+function scrollToCurrentTime() {
+    const now = new Date();
+    const currentHour = now.getHours();
+    const hourEl = document.querySelector(`[data-hour="${currentHour}"]`);
+    
+    if (hourEl) {
+        hourEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
+}
 
-                    <!-- Tags -->
-                    <div class="mb-8">
-                        <h3 class="text-lg font-medium mb-4">Tags verwalten</h3>
-                        <div class="flex items-center space-x-2 mb-4">
-                            <input id="new-tag-name" type="text" placeholder="Tag-Name" 
-                                class="bg-gray-700 rounded-lg px-4 py-2 text-gray-100">
-                            <input id="new-tag-color" type="color" value="#f97316" 
-                                class="w-16 h-10 bg-gray-700 rounded cursor-pointer">
-                            <button id="add-tag-btn" class="px-4 py-2 bg-emerald-500 hover:bg-emerald-600 rounded-lg transition">
-                                <i data-feather="plus"></i>
-                            </button>
-                        </div>
-                        <div id="tags-list" class="flex flex-wrap gap-2"></div>
-                    </div>
+// Focus Mode & Pomodoro
+function enterFocusMode() {
+    // Open a task selection modal
+    const openTasks = state.tasks.filter(t => !t.completed);
+    if (openTasks.length === 0) {
+        alert('Keine offenen Aufgaben für den Fokus-Modus!');
+        return;
+    }
 
-                    <!-- Pomodoro Settings -->
-                    <div>
-                        <h3 class="text-lg font-medium mb-4">Pomodoro</h3>
-                        <div class="grid grid-cols-2 gap-4">
-                            <div>
-                                <label class="block text-sm font-medium mb-2">Arbeitszeit (Min.)</label>
-                                <input id="pomodoro-work" type="number" value="25" min="1" max="60"
-                                    class="w-full bg-gray-700 rounded-lg px-4 py-2 text-gray-100">
-                            </div>
-                            <div>
-                                <label class="block text-sm font-medium mb-2">Pause (Min.)</label>
-                                <input id="pomodoro-break" type="number" value="5" min="1" max="30"
-                                    class="w-full bg-gray-700 rounded-lg px-4 py-2 text-gray-100">
-                            </div>
-                        </div>
+    const modal = document.createElement('div');
+    modal.className = 'fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4';
+    modal.innerHTML = `
+        <div class="bg-gray-800 rounded-xl p-6 max-w-md w-full max-h-[80vh] overflow-y-auto">
+            <h3 class="text-xl font-semibold mb-4">Aufgabe für Fokus-Modus auswählen</h3>
+            <div class="space-y-2">
+                ${openTasks.map(task => `
+                    <div class="bg-gray-700 p-3 rounded-lg cursor-pointer hover:bg-gray-600 transition"
+                         onclick="startFocusModeWithId('${task.id}')">
+                        <div class="font-medium">${task.title}</div>
+                        <div class="text-sm text-gray-400">${formatTime(task.estimatedTime)}</div>
                     </div>
-                </div>
+                `).join('')}
             </div>
+            <button onclick="this.closest('div[class*=\"fixed\"]').remove()" 
+                    class="mt-4 px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition w-full">
+                Abbrechen
+            </button>
         </div>
-    </main>
+    `;
+    document.body.appendChild(modal);
+}
+
+function startFocusModeWithId(taskId) {
+    const task = state.tasks.find(t => t.id === taskId);
+    if (task) {
+        document.querySelector('div[class*="fixed"]')?.remove();
+        startFocusMode(task);
+    }
+}
+function startFocusMode(task) {
+    state.focusTask = task;
+    document.getElementById('focus-task-title').textContent = task.title;
+    document.getElementById('focus-mode').classList.remove('hidden');
+    
+    // Start pomodoro
+    const workTime = parseInt(localStorage.getItem('pomodoroWorkTime')) || 25;
+    startPomodoro(workTime * 60, false);
+}
+function startPomodoro(seconds, isBreak) {
+    state.pomodoro.isRunning = true;
+    state.pomodoro.isBreak = isBreak;
+    state.pomodoro.timeRemaining = seconds;
+    state.pomodoro.totalTime = seconds;
+    
+    clearInterval(state.pomodoro.interval);
+    
+    state.pomodoro.interval = setInterval(() => {
+        if (state.pomodoro.timeRemaining > 0) {
+            state.pomodoro.timeRemaining--;
+            updatePomodoroDisplay();
+        } else {
+            handlePomodoroComplete();
+        }
+    }, 1000);
+    
+    updatePomodoroDisplay();
+}
+
+function updatePomodoroDisplay() {
+    const minutes = Math.floor(state.pomodoro.timeRemaining / 60);
+    const seconds = state.pomodoro.timeRemaining % 60;
+    document.getElementById('pomodoro-timer').textContent = 
+        `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    
+    const statusEl = document.getElementById('pomodoro-status');
+    statusEl.textContent = state.pomodoro.isBreak ? 'Pausenzeit läuft...' : 'Arbeitszeit läuft...';
+}
+
+function handlePomodoroComplete() {
+    clearInterval(state.pomodoro.interval);
+    
+    if (!state.pomodoro.isBreak) {
+        // Work session complete
+        const elapsed = state.pomodoro.totalTime;
+        state.focusTask.spentTime += elapsed;
+        saveToLocalStorage();
+        
+        // Start break
+        const breakTime = parseInt(localStorage.getItem('pomodoroBreakTime')) || 5;
+        startPomodoro(breakTime * 60, true);
+        
+        // Notification
+        if ('Notification' in window && Notification.permission === 'granted') {
+            new Notification('Pause!', { body: 'Arbeitszeit abgeschlossen. Zeit für eine Pause!' });
+        }
+    } else {
+        // Break complete
+        if ('Notification' in window && Notification.permission === 'granted') {
+            new Notification('Weiterarbeiten!', { body: 'Pausenzeit ist vorbei.' });
+        }
+    }
+}
+
+function pausePomodoro() {
+    state.pomodoro.isRunning = false;
+    clearInterval(state.pomodoro.interval);
+    document.getElementById('focus-pause').classList.add('hidden');
+    document.getElementById('focus-play').classList.remove('hidden');
+}
+
+function resumePomodoro() {
+    startPomodoro(state.pomodoro.timeRemaining, state.pomodoro.isBreak);
+    document.getElementById('focus-play').classList.add('hidden');
+    document.getElementById('focus-pause').classList.remove('hidden');
+}
+function stopPomodoro() {
+    clearInterval(state.pomodoro.interval);
+    
+    // Add elapsed time to task
+    if (state.focusTask && !state.pomodoro.isBreak) {
+        const elapsed = state.pomodoro.totalTime - state.pomodoro.timeRemaining;
+        state.focusTask.spentTime += elapsed;
+        saveToLocalStorage();
+    }
+    
+    state.focusTask = null;
+    state.pomodoro.isRunning = false;
+    document.getElementById('focus-mode').classList.add('hidden');
+    render();
+}
+function savePomodoroSettings() {
+    localStorage.setItem('pomodoroWorkTime', document.getElementById('pomodoro-work').value);
+    localStorage.setItem('pomodoroBreakTime', document.getElementById('pomodoro-break').value);
+}
+// Timeline Functions
+function initializeTimeline() {
+    // Setup drag start for task items
+    document.addEventListener('dragstart', (e) => {
+            if (e.target.tagName === 'TASK-ITEM') {
+                const taskId = e.target.getAttribute('task-id');
+            e.dataTransfer.setData('text/plain', taskId);
+        }
+    });
+}
+function handleDragStart(e) {
+    if (e.target.classList.contains('task-item')) {
+        const taskId = e.target.getAttribute('task-id');
+        e.dataTransfer.setData('text/plain', taskId);
+        e.target.classList.add('dragging');
+    }
+}
+
+function handleDragOver(e) {
+    e.preventDefault();
+    
+    if (e.target.classList.contains('timeline-hour')) {
+        e.target.classList.add('drag-over');
+    }
+}
+function handleDragEnd(e) {
+    e.target.classList.remove('dragging');
+    document.querySelectorAll('.drag-over').forEach(el => {
+        el.classList.remove('drag-over');
+    });
+}
+function scheduleTask(taskId, hour, minute) {
+    const taskDate = new Date();
+    taskDate.setHours(0, 0, 0, 0); // Set to start of day for consistent date matching
+    
+    const startTime = new Date();
+    startTime.setHours(hour, minute, 0, 0);
+    
+    // Remove existing schedule for this task today
+    state.timelineTasks = state.timelineTasks.filter(t => {
+        const scheduleDate = new Date(t.date);
+        scheduleDate.setHours(0, 0, 0, 0);
+        return !(scheduleDate.getTime() === taskDate.getTime() && t.taskId === taskId);
+    });
+    
+    // Add new schedule
+    state.timelineTasks.push({
+        taskId,
+        date: taskDate.toISOString(),
+        startTime: startTime.toISOString()
+    });
+    
+    saveToLocalStorage();
+    
+    // Update timeline sidebar
+    const timelineSidebar = document.getElementById('timeline-sidebar');
+    if (timelineSidebar && timelineSidebar.updateTimeline) {
+        timelineSidebar.updateTimeline();
+    }
+}
+// Utilities
+function formatTime(minutes) {
+    const h = Math.floor(minutes / 60);
+    const m = minutes % 60;
+    return `${h}h${m > 0 ? ` ${m}m` : ''}`;
+}
+
+// Request notification permission
+if ('Notification' in window && Notification.permission === 'default') {
+    Notification.requestPermission();
+}
+
+// New functions for task management
+function addTimeToTask(taskId, minutes) {
+    const task = state.tasks.find(t => t.id === taskId);
+    if (task) {
+        task.spentTime += minutes;
+        saveToLocalStorage();
+        render();
+    }
+}
 
-    <!-- Add Task Modal -->
-    <div id="add-task-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
+function setupTaskDragAndDrop() {
+    const openContainer = document.getElementById('open-tasks');
+    const completedContainer = document.getElementById('completed-tasks');
+    
+    // Setup drag and drop for reordering
+    [openContainer, completedContainer].forEach(container => {
+        if (!container) return;
+        
+        container.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            const afterElement = getDragAfterElement(container, e.clientY);
+            const draggable = document.querySelector('.dragging');
+            if (draggable) {
+                if (afterElement == null) {
+                    container.appendChild(draggable);
+                } else {
+                    container.insertBefore(draggable, afterElement);
+            }
+        });
+    });
+}
+
+function getDragAfterElement(container, y) {
+    const draggableElements = [...container.querySelectorAll('task-item:not(.dragging)'));
+        
+        return draggableElements.reduce((closest, child) => {
+            const box = child.getBoundingClientRect();
+            const offset = y - box.top - box.height / 2;
+        if (offset < 0 && offset > closest.offset) {
+            return { offset: offset, element: child };
+        } else {
+            return closest;
+        }
+    }, { offset: Number.NEGATIVE_INFINITY }).element;
+}
+
+// Edit task modal functionality
+function openEditTaskModal(taskId) {
+    const task = state.tasks.find(t => t.id === taskId);
+    if (!task) return;
+    
+    const modal = document.createElement('div');
+    modal.className = 'fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4';
+    modal.innerHTML = `
         <div class="bg-gray-800 rounded-xl p-6 max-w-md w-full">
-            <h3 class="text-xl font-semibold mb-4">Aufgabe hinzufügen</h3>
-            <form id="add-task-form" class="space-y-4">
+            <h3 class="text-xl font-semibold mb-4">Aufgabe bearbeiten</h3>
+            <form id="edit-task-form" class="space-y-4">
                 <div>
                     <label class="block text-sm font-medium mb-2">Titel</label>
-                    <input id="task-title" type="text" required
+                    <input id="edit-task-title" type="text" required value="${task.title}"
                         class="w-full bg-gray-700 rounded-lg px-4 py-2 text-gray-100">
                 </div>
                 <div>
                     <label class="block text-sm font-medium mb-2">Geschätzte Zeit</label>
                     <div class="flex space-x-2">
-                        <input id="task-hours" type="number" placeholder="h" min="0" max="24" value="0"
+                        <input id="edit-task-hours" type="number" placeholder="h" min="0" max="24" value="${Math.floor(task.estimatedTime / 60)}"
                             class="w-full bg-gray-700 rounded-lg px-4 py-2 text-gray-100">
-                        <input id="task-minutes" type="number" placeholder="m" min="0" max="59" step="15" value="30"
+                        <input id="edit-task-minutes" type="number" placeholder="m" min="0" max="59" step="15" value="${task.estimatedTime % 60}"
                             class="w-full bg-gray-700 rounded-lg px-4 py-2 text-gray-100">
                     </div>
                 </div>
-                <div>
-                    <label class="block text-sm font-medium mb-2">Tags</label>
-                    <div id="modal-tags-list" class="flex flex-wrap gap-2 mb-2"></div>
-                </div>
                 <div class="flex justify-end space-x-2">
-                    <button type="button" id="cancel-task" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition">
-                        Abbrechen
-                    </button>
-                    <button type="submit" class="px-4 py-2 bg-orange-500 hover:bg-orange-600 rounded-lg transition">
-                        Hinzufügen
-                    </button>
+                            <button type="button" onclick="this.closest('div[class*=\"fixed\"]').remove()" 
+                                class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition">
+                                Abbrechen
+                            </button>
+                            <button type="submit" class="px-4 py-2 bg-orange-500 hover:bg-orange-600 rounded-lg transition">
+                                Speichern
+                            </button>
+                        </div>
+                    </form>
                 </div>
-            </form>
-        </div>
-    </div>
+            `;
+    
+    document.body.appendChild(modal);
+    
+    const form = modal.querySelector('#edit-task-form');
+    form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        handleEditTask(taskId);
+        modal.remove();
+    });
+}
 
-    <!-- Focus Mode -->
-    <div id="focus-mode" class="fixed inset-0 bg-gray-900 z-50 hidden flex items-center justify-center">
-        <div class="text-center max-w-2xl mx-auto p-8">
-            <h2 id="focus-task-title" class="text-3xl font-bold mb-8"></h2>
-            
-            <div id="pomodoro-timer" class="text-6xl font-mono font-bold text-orange-500 mb-8"></div>
-            
-            <div class="flex items-center justify-center space-x-4 mb-8">
-                <button id="focus-pause" class="p-4 bg-gray-800 hover:bg-gray-700 rounded-full transition">
-                    <i data-feather="pause" class="w-8 h-8"></i>
-                </button>
-                <button id="focus-play" class="p-4 bg-gray-800 hover:bg-gray-700 rounded-full transition hidden">
-                    <i data-feather="play" class="w-8 h-8"></i>
-                </button>
-                <button id="focus-stop" class="p-4 bg-red-500 hover:bg-red-600 rounded-full transition">
-                    <i data-feather="square" class="w-8 h-8"></i>
-                </button>
-            </div>
-            
-            <div class="text-gray-400">
-                <p id="pomodoro-status">Arbeitszeit läuft...</p>
-            </div>
-        </div>
-    </div>
-    <!-- FAB Buttons -->
-    <div class="fixed bottom-6 right-6 flex flex-col space-y-3">
-        <button id="focus-fab" class="p-4 bg-orange-500 hover:bg-orange-600 rounded-full shadow-lg transition transform hover:scale-110">
-                <i data-feather="focus"></i>
-            </button>
-            <button id="add-task-fab" class="p-4 bg-emerald-500 hover:bg-emerald-600 rounded-full shadow-lg transition transform hover:scale-110">
-                <i data-feather="plus"></i>
-            </button>
-        </div>
-        <timeline-sidebar id="timeline-sidebar"></timeline-sidebar>
-<script src="components/task-item.js"></script>
-    <script src="components/tag-item.js"></script>
-    <script src="components/timeline-tasks.js"></script>
-    <script src="script.js"></script>
-<script>feather.replace();</script>
-<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
-</body>
-</html>
+function handleEditTask(taskId) {
+    const title = document.getElementById('edit-task-title').value;
+    const hours = parseInt(document.getElementById('edit-task-hours').value) || 0;
+    const minutes = parseInt(document.getElementById('edit-task-minutes').value) || 0;
+    const estimatedTime = hours * 60 + minutes;
+    
+    updateTask(taskId, { title, estimatedTime });
+}

script.js

@@ -1,824 +1,241 @@
+/* Custom styles for TaskForge Pro */
 
-// TaskForge Pro - Main JavaScript
-// State management
-window.state = {
-    tasks: [],
-    tags: [],
-    currentView: 'home',
-    focusTask: null,
-    pomodoro: {
-        isRunning: false,
-        isBreak: false,
-        timeRemaining: 0,
-        totalTime: 0,
-        interval: null
-    },
-    timelineTasks: []
-};
-// Initialize
-document.addEventListener('DOMContentLoaded', function() {
-    loadFromLocalStorage();
-    initializeUI();
-    setupEventListeners();
-    render();
-});
-// Local Storage
-function loadFromLocalStorage() {
-    const savedTasks = localStorage.getItem('tasks');
-    const savedTags = localStorage.getItem('tags');
-    const savedTimeline = localStorage.getItem('timeline');
-    
-    if (savedTasks) {
-        state.tasks = JSON.parse(savedTasks);
-    }
-    if (savedTags) {
-        state.tags = JSON.parse(savedTags);
-    }
-    if (savedTimeline) {
-        state.timelineTasks = JSON.parse(savedTimeline);
-    }
-    
-    // Load Pomodoro settings
-    const workTime = localStorage.getItem('pomodoroWorkTime') || 25;
-    const breakTime = localStorage.getItem('pomodoroBreakTime') || 5;
-    document.getElementById('pomodoro-work').value = workTime;
-    document.getElementById('pomodoro-break').value = breakTime;
+/* Scrollbar styling */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-function saveToLocalStorage() {
-    localStorage.setItem('tasks', JSON.stringify(state.tasks));
-    localStorage.setItem('tags', JSON.stringify(state.tags));
-    localStorage.setItem('timeline', JSON.stringify(state.timelineTasks));
+::-webkit-scrollbar-track {
+    @apply bg-gray-800;
 }
 
-// UI Initialization
-function initializeUI() {
-    // Current time display
-    updateCurrentTime();
-    setInterval(updateCurrentTime, 1000);
-    
-    // Initialize timeline
-    initializeTimeline();
-    
-    // Scroll to current time in timeline
-    setTimeout(scrollToCurrentTime, 100);
-// Check for default tags
-    if (state.tags.length === 0) {
-        state.tags = [
-            { id: '1', name: 'Wichtig', color: '#ef4444' },
-            { id: '2', name: 'Privat', color: '#10b981' },
-            { id: '3', name: 'Arbeit', color: '#3b82f6' }
-        ];
-        saveToLocalStorage();
-    }
+::-webkit-scrollbar-thumb {
+    @apply bg-gray-600 rounded-full;
 }
 
-function updateCurrentTime() {
-    const now = new Date();
-    const timeString = now.toLocaleTimeString('de-DE', { 
-        hour: '2-digit', 
-        minute: '2-digit' 
-    });
-    document.getElementById('current-time').textContent = timeString;
-}
-function setupEventListeners() {
-    // Navigation
-    document.querySelectorAll('.nav-btn').forEach(btn => {
-        btn.addEventListener('click', (e) => {
-            const view = e.currentTarget.dataset.view;
-            switchView(view);
-        });
-    });
-
-    // FAB buttons
-    document.getElementById('add-task-fab').addEventListener('click', openAddTaskModal);
-    document.getElementById('focus-fab').addEventListener('click', enterFocusMode);
-
-    // Add task modal
-    document.getElementById('add-task-form').addEventListener('submit', handleAddTask);
-    document.getElementById('cancel-task').addEventListener('click', closeAddTaskModal);
-
-    // Settings
-    document.getElementById('import-btn').addEventListener('click', handleImport);
-    document.getElementById('export-btn').addEventListener('click', handleExport);
-    document.getElementById('add-tag-btn').addEventListener('click', handleAddTag);
-    
-    document.getElementById('pomodoro-work').addEventListener('change', savePomodoroSettings);
-    document.getElementById('pomodoro-break').addEventListener('change', savePomodoroSettings);
-
-    // Focus mode
-    document.getElementById('focus-pause').addEventListener('click', pausePomodoro);
-    document.getElementById('focus-play').addEventListener('click', resumePomodoro);
-    document.getElementById('focus-stop').addEventListener('click', stopPomodoro);
-
-    // Event delegation for task item events
-    document.addEventListener('delete-task', (e) => {
-        deleteTask(e.detail.taskId);
-    });
-
-    document.addEventListener('toggle-complete', (e) => {
-        toggleTaskComplete(e.detail.taskId, e.detail.completed);
-    });
-
-    document.addEventListener('update-task', (e) => {
-        updateTask(e.detail.taskId, e.detail.updates);
-    });
-
-    document.addEventListener('add-time', (e) => {
-        addTimeToTask(e.detail.taskId, e.detail.minutes);
-    });
-
-    // Timeline sidebar events
-    const timelineSidebar = document.getElementById('timeline-sidebar');
-    if (timelineSidebar) {
-        timelineSidebar.addEventListener('task-dropped', (e) => {
-            scheduleTask(e.detail.taskId, e.detail.hour, 0);
-        });
-    }
+::-webkit-scrollbar-thumb:hover {
+    @apply bg-gray-500;
 }
-// View Management
-function switchView(view) {
-    state.currentView = view;
-    
-    // Update nav buttons
-    document.querySelectorAll('.nav-btn').forEach(btn => {
-        btn.classList.toggle('active', btn.dataset.view === view);
-    });
-    
-    // Hide all views first
-    document.querySelectorAll('.view').forEach(v => {
-        v.classList.remove('active');
-        v.style.display = 'none';
-    });
-    
-    // Show only the active view
-    const activeView = document.getElementById(`${view}-view`);
-    if (activeView) {
-        activeView.style.display = 'block';
-        activeView.classList.add('active');
-    }
+/* Task hover effects */
+.task-item {
+    @apply relative overflow-hidden;
+    transition: all 0.3s ease;
+    border-left: 4px solid transparent;
 }
-// Task Management
-function addTask(task) {
-    const newTask = {
-        id: Date.now().toString(),
-        title: task.title,
-        completed: false,
-        estimatedTime: task.estimatedTime, // in minutes
-        spentTime: 0, // in minutes
-        tags: task.tags || [],
-        createdAt: new Date().toISOString()
-    };
-    
-    state.tasks.push(newTask);
-    saveToLocalStorage();
-    render();
-    
-    return newTask;
+
+.task-item.completed {
+    animation: completeTask 0.6s ease forwards;
 }
 
-function updateTask(taskId, updates) {
-    const task = state.tasks.find(t => t.id === taskId);
-    if (task) {
-        Object.assign(task, updates);
-        saveToLocalStorage();
-        render();
-    }
+@keyframes completeTask {
+    0% { transform: scale(1); opacity: 1; }
+    50% { transform: scale(0.95); opacity: 0.8; }
+    100% { transform: scale(1); opacity: 1; border-left-color: #10b981; }
 }
 
-function deleteTask(taskId) {
-    state.tasks = state.tasks.filter(t => t.id !== taskId);
-    state.timelineTasks = state.timelineTasks.filter(t => t.taskId !== taskId);
-    saveToLocalStorage();
-    render();
+.task-item .focus-btn {
+    @apply absolute right-12 top-1/2 transform -translate-y-1/2;
+    @apply p-2 rounded-full bg-orange-500 bg-opacity-0 text-orange-500;
+    @apply transition-all duration-300 ease-in-out;
+    opacity: 0;
 }
-function toggleTaskComplete(taskId, completed) {
-    const task = state.tasks.find(t => t.id === taskId);
-    if (task) {
-        task.completed = completed !== undefined ? completed : !task.completed;
-        saveToLocalStorage();
-        render();
-    }
+
+.task-item:hover .focus-btn {
+    @apply bg-opacity-20;
+    opacity: 1;
 }
-// Modal Functions
-function openAddTaskModal() {
-    const modal = document.getElementById('add-task-modal');
-    modal.classList.remove('hidden');
-    renderModalTags();
-    document.getElementById('task-title').focus();
+
+.task-item .focus-btn:hover {
+    @apply bg-opacity-100 text-white;
 }
-function closeAddTaskModal() {
-    const modal = document.getElementById('add-task-modal');
-    modal.classList.add('hidden');
-    document.getElementById('add-task-form').reset();
+.task-item:hover {
+    @apply transform scale-105 shadow-lg;
 }
 
-function handleAddTask(e) {
-    e.preventDefault();
-    
-    const title = document.getElementById('task-title').value;
-    const hours = parseInt(document.getElementById('task-hours').value) || 0;
-    const minutes = parseInt(document.getElementById('task-minutes').value) || 0;
-    const estimatedTime = hours * 60 + minutes;
-    
-    const selectedTags = Array.from(document.querySelectorAll('#modal-tags-list input:checked')).map(cb => cb.value);
-    
-    addTask({
-        title,
-        estimatedTime,
-        tags: selectedTags
-    });
-    
-    closeAddTaskModal();
-}
-
-function renderModalTags() {
-    const container = document.getElementById('modal-tags-list');
-    container.innerHTML = state.tags.map(tag => `
-        <label class="flex items-center space-x-2 cursor-pointer">
-            <input type="checkbox" value="${tag.id}" class="custom-checkbox">
-            <span class="tag-badge" style="background-color: ${tag.color}20; color: ${tag.color}">
-                ${tag.name}
-            </span>
-        </label>
-    `).join('');
-}
-
-// Tag Management
-function addTag(tag) {
-    state.tags.push({
-        id: Date.now().toString(),
-        name: tag.name,
-        color: tag.color
-    });
-    saveToLocalStorage();
-    render();
-}
-
-function deleteTag(tagId) {
-    state.tags = state.tags.filter(t => t.id !== tagId);
-    // Remove tag from all tasks
-    state.tasks.forEach(task => {
-        task.tags = task.tags.filter(t => t !== tagId);
-    });
-    saveToLocalStorage();
-    render();
-}
-
-function handleAddTag() {
-    const name = document.getElementById('new-tag-name').value;
-    const color = document.getElementById('new-tag-color').value;
-    
-    if (name) {
-        addTag({ name, color });
-        document.getElementById('new-tag-name').value = '';
-    }
+/* Progress bar animation */
+.progress-bar-fill {
+    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-// Import/Export
-function handleImport() {
-    const markdown = document.getElementById('import-md').value;
-    if (!markdown) return;
-    
-    const tasks = parseMarkdown(markdown);
-    tasks.forEach(task => {
-        // Check if task already exists
-        const exists = state.tasks.some(t => t.title === task.title);
-        if (!exists) {
-            state.tasks.push({
-                id: Date.now().toString() + Math.random(),
-                title: task.title,
-                completed: task.completed,
-                estimatedTime: task.estimatedTime,
-                spentTime: task.spentTime || 0,
-                tags: [],
-                createdAt: new Date().toISOString()
-            });
-        }
-    });
-    
-    saveToLocalStorage();
-    render();
-    document.getElementById('import-md').value = '';
-}
-
-function handleExport() {
-    const markdown = generateMarkdown();
-    const blob = new Blob([markdown], { type: 'text/markdown' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = 'tasks.md';
-    a.click();
-    URL.revokeObjectURL(url);
-}
-function parseMarkdown(markdown) {
-    const lines = markdown.split('\n');
-    const tasks = [];
-    
-    const taskRegex = /^\s*-\s*\[([ x])\]\s+(.+?)(?:\s*\|\s*(.+?)(?:\s*\|\s*(.+?))?)?\s*$/;
-    
-    lines.forEach(line => {
-        const match = line.match(taskRegex);
-        if (match) {
-            const completed = match[1] === 'x';
-            const title = match[2].trim();
-            const timePart = match[3] ? match[3].trim() : '0h';
-            const tagsPart = match[4] ? match[4].trim() : '';
-            
-            // Parse time
-            const timeMatch = timePart.match(/(\d+)(?:\s*h\s*)?(?:(?:\s*(\d+)\s*m\s*)?)?/);
-            const hours = parseInt(timeMatch[1]) || 0;
-            const minutes = parseInt(timeMatch[2]) || 0;
-            const estimatedTime = hours * 60 + minutes;
-            
-            tasks.push({
-                title,
-                completed,
-                estimatedTime
-            });
-        }
-    });
-return tasks;
-}
-
-function generateMarkdown() {
-    return state.tasks.map(task => {
-        const status = task.completed ? 'x' : ' ';
-        const hours = Math.floor(task.estimatedTime / 60);
-        const minutes = task.estimatedTime % 60;
-        const timeStr = `${hours}h${minutes > 0 ? ` ${minutes}m` : ''}`;
-        return `- [${status}] ${task.title} | ${timeStr}`;
-    }).join('\n');
-}
-
-// Rendering
-function render() {
-    renderTasks();
-    renderProgressBars();
-    renderTags();
-    renderTimeline();
-}
-function renderTasks() {
-    const openContainer = document.getElementById('open-tasks');
-    const completedContainer = document.getElementById('completed-tasks');
-    
-    const openTasks = state.tasks.filter(t => !t.completed);
-    const completedTasks = state.tasks.filter(t => t.completed);
-    
-    // Render open tasks
-    if (openTasks.length === 0) {
-        openContainer.innerHTML = '<div class="empty-state"><i data-feather="inbox"></i><p>Keine offenen Aufgaben</p></div>';
-    } else {
-        openContainer.innerHTML = '';
-        openTasks.forEach(task => {
-            const taskElement = document.createElement('task-item');
-            taskElement.setAttribute('task-id', task.id);
-            taskElement.setAttribute('completed', 'false');
-            openContainer.appendChild(taskElement);
-        });
+/* Focus mode animations */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
     }
-    
-    // Render completed tasks
-    if (completedTasks.length === 0) {
-        completedContainer.innerHTML = '<div class="empty-state"><i data-feather="check-circle"></i><p>Keine erledigten Aufgaben</p></div>';
-    } else {
-        completedContainer.innerHTML = '';
-        completedTasks.forEach(task => {
-            const taskElement = document.createElement('task-item');
-            taskElement.setAttribute('task-id', task.id);
-            taskElement.setAttribute('completed', 'true');
-            completedContainer.appendChild(taskElement);
-        });
-    }
-    
-    document.getElementById('open-count').textContent = openTasks.length;
-    document.getElementById('completed-count').textContent = completedTasks.length;
-    
-    // Setup drag and drop for task items
-    setupTaskDragAndDrop();
-    
-    // Replace feather icons
-    feather.replace();
-}
-function renderProgressBars() {
-    // Overall progress
-    const totalEstimated = state.tasks.reduce((sum, t) => sum + t.estimatedTime, 0) || 1;
-    const totalSpent = state.tasks.reduce((sum, t) => sum + t.spentTime, 0);
-    const totalProgress = (totalSpent / totalEstimated) * 100;
-    
-    document.getElementById('total-progress-bar').style.width = `${totalProgress}%`;
-    document.getElementById('total-progress-text').textContent = 
-        `${Math.round(totalProgress)}% (${formatTime(totalSpent)} / ${formatTime(totalEstimated)})`;
-    
-    // Tag progress bars - only for tags with tasks
-    const container = document.getElementById('tag-progress-container');
-    container.innerHTML = state.tags
-        .filter(tag => state.tasks.some(t => t.tags.includes(tag.id))) // Only tags with tasks
-        .map(tag => {
-            const tagTasks = state.tasks.filter(t => t.tags.includes(tag.id));
-            const tagEstimated = tagTasks.reduce((sum, t) => sum + t.estimatedTime, 0) || 1;
-            const tagSpent = tagTasks.reduce((sum, t) => sum + t.spentTime, 0);
-            const tagProgress = (tagSpent / tagEstimated) * 100;
-            
-            return `
-                <div class="bg-gray-800 rounded-lg p-4 shadow transition-all hover:scale-[1.02]">
-                    <div class="flex items-center justify-between mb-2">
-                        <span class="font-medium" style="color: ${tag.color}">${tag.name}</span>
-                        <span class="text-sm text-gray-400">
-                            ${Math.round(tagProgress)}% (${formatTime(tagSpent)} / ${formatTime(tagEstimated)})
-                        </span>
-                    </div>
-                    <div class="w-full bg-gray-700 rounded-full h-2 overflow-hidden">
-                        <div class="h-full rounded-full transition-all duration-500" 
-                             style="width: ${tagProgress}%; background-color: ${tag.color}"></div>
-                    </div>
-                </div>
-            `;
-        }).join('');
-}
-function renderTags() {
-    const container = document.getElementById('tags-list');
-    container.innerHTML = state.tags.map(tag => `
-        <tag-item tag-id="${tag.id}" tag-name="${tag.name}" tag-color="${tag.color}"></tag-item>
-    `).join('');
-    
-    // Render tag components
-    document.querySelectorAll('tag-item').forEach(el => {
-        const tagId = el.getAttribute('tag-id');
-        el.addEventListener('delete', () => deleteTag(tagId));
-    });
-}
-function highlightCurrentHour() {
-    const now = new Date();
-    const currentHour = now.getHours();
-    const currentMinute = now.getMinutes();
-    
-    // Highlight current hour
-    document.querySelectorAll('.timeline-hour').forEach(el => {
-        el.classList.remove('bg-gray-750');
-    });
-    
-    const hourElement = document.querySelector(`.timeline-hour[data-hour="${currentHour}"]`);
-    if (hourElement) {
-        hourElement.classList.add('bg-gray-750');
+    50% {
+        opacity: 0.5;
     }
-    
-    // Add current time indicator line
-    document.getElementById('current-time-indicator')?.remove();
-    
-    const timelineContainer = document.getElementById('timeline-hours');
-    if (timelineContainer) {
-        const indicator = document.createElement('div');
-        indicator.id = 'current-time-indicator';
-        indicator.style.position = 'absolute';
-        indicator.style.left = '0';
-        indicator.style.right = '0';
-        indicator.style.height = '2px';
-        indicator.style.backgroundColor = '#ef4444';
-        indicator.style.zIndex = '10';
-        
-        const hourElement = document.querySelector(`.timeline-hour[data-hour="${currentHour}"]`);
-        if (hourElement) {
-            const hourTop = hourElement.offsetTop;
-            const hourHeight = hourElement.offsetHeight;
-            const minutePosition = (currentMinute / 60) * hourHeight;
-            
-            indicator.style.top = `${hourTop + minutePosition}px`;
-            timelineContainer.appendChild(indicator);
-            
-            // Add time label
-            const timeLabel = document.createElement('div');
-            timeLabel.textContent = now.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
-            timeLabel.style.position = 'absolute';
-            timeLabel.style.left = '-64px';
-            timeLabel.style.top = `${hourTop + minutePosition - 10}px`;
-            timeLabel.style.backgroundColor = '#ef4444';
-            timeLabel.style.color = 'white';
-            timeLabel.style.padding = '2px 8px';
-            timeLabel.style.borderRadius = '4px';
-            timeLabel.style.fontSize = '12px';
-            timeLabel.style.zIndex = '10';
-            
-            hourEl.appendChild(timeLabel);
 }
-    }
+
+.focus-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
-function scrollToCurrentTime() {
-    const now = new Date();
-    const currentHour = now.getHours();
-    const hourEl = document.querySelector(`[data-hour="${currentHour}"]`);
-    
-    if (hourEl) {
-        hourEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    }
+
+/* Button focus styles */
+.btn:focus {
+    @apply outline-none ring-2 ring-orange-500 ring-offset-2 ring-offset-gray-900;
 }
 
-// Focus Mode & Pomodoro
-function enterFocusMode() {
-    // Open a task selection modal
-    const openTasks = state.tasks.filter(t => !t.completed);
-    if (openTasks.length === 0) {
-        alert('Keine offenen Aufgaben für den Fokus-Modus!');
-        return;
-    }
+/* Tag badge styles */
+.tag-badge {
+    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
+}
 
-    const modal = document.createElement('div');
-    modal.className = 'fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4';
-    modal.innerHTML = `
-        <div class="bg-gray-800 rounded-xl p-6 max-w-md w-full max-h-[80vh] overflow-y-auto">
-            <h3 class="text-xl font-semibold mb-4">Aufgabe für Fokus-Modus auswählen</h3>
-            <div class="space-y-2">
-                ${openTasks.map(task => `
-                    <div class="bg-gray-700 p-3 rounded-lg cursor-pointer hover:bg-gray-600 transition"
-                         onclick="startFocusModeWithId('${task.id}')">
-                        <div class="font-medium">${task.title}</div>
-                        <div class="text-sm text-gray-400">${formatTime(task.estimatedTime)}</div>
-                    </div>
-                `).join('')}
-            </div>
-            <button onclick="this.closest('div[class*=\"fixed\"]').remove()" 
-                    class="mt-4 px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition w-full">
-                Abbrechen
-            </button>
-        </div>
-    `;
-    document.body.appendChild(modal);
-}
-
-function startFocusModeWithId(taskId) {
-    const task = state.tasks.find(t => t.id === taskId);
-    if (task) {
-        document.querySelector('div[class*="fixed"]')?.remove();
-        startFocusMode(task);
-    }
+/* Timeline styles */
+.timeline-hour {
+    @apply relative border-b border-gray-700;
+    min-height: 60px;
+    position: relative;
 }
-function startFocusMode(task) {
-    state.focusTask = task;
-    document.getElementById('focus-task-title').textContent = task.title;
-    document.getElementById('focus-mode').classList.remove('hidden');
-    
-    // Start pomodoro
-    const workTime = parseInt(localStorage.getItem('pomodoroWorkTime')) || 25;
-    startPomodoro(workTime * 60, false);
-}
-function startPomodoro(seconds, isBreak) {
-    state.pomodoro.isRunning = true;
-    state.pomodoro.isBreak = isBreak;
-    state.pomodoro.timeRemaining = seconds;
-    state.pomodoro.totalTime = seconds;
-    
-    clearInterval(state.pomodoro.interval);
-    
-    state.pomodoro.interval = setInterval(() => {
-        if (state.pomodoro.timeRemaining > 0) {
-            state.pomodoro.timeRemaining--;
-            updatePomodoroDisplay();
-        } else {
-            handlePomodoroComplete();
-        }
-    }, 1000);
-    
-    updatePomodoroDisplay();
+.timeline-task-block {
+    @apply absolute rounded-lg cursor-move transition-all;
+    transition: all 0.2s ease;
 }
 
-function updatePomodoroDisplay() {
-    const minutes = Math.floor(state.pomodoro.timeRemaining / 60);
-    const seconds = state.pomodoro.timeRemaining % 60;
-    document.getElementById('pomodoro-timer').textContent = 
-        `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
-    
-    const statusEl = document.getElementById('pomodoro-status');
-    statusEl.textContent = state.pomodoro.isBreak ? 'Pausenzeit läuft...' : 'Arbeitszeit läuft...';
+.timeline-task-block:hover {
+    @apply transform scale-105 shadow-lg;
 }
 
-function handlePomodoroComplete() {
-    clearInterval(state.pomodoro.interval);
-    
-    if (!state.pomodoro.isBreak) {
-        // Work session complete
-        const elapsed = state.pomodoro.totalTime;
-        state.focusTask.spentTime += elapsed;
-        saveToLocalStorage();
-        
-        // Start break
-        const breakTime = parseInt(localStorage.getItem('pomodoroBreakTime')) || 5;
-        startPomodoro(breakTime * 60, true);
-        
-        // Notification
-        if ('Notification' in window && Notification.permission === 'granted') {
-            new Notification('Pause!', { body: 'Arbeitszeit abgeschlossen. Zeit für eine Pause!' });
-        }
-    } else {
-        // Break complete
-        if ('Notification' in window && Notification.permission === 'granted') {
-            new Notification('Weiterarbeiten!', { body: 'Pausenzeit ist vorbei.' });
-        }
-    }
+.timeline-task-block.dragging {
+    @apply opacity-50;
 }
 
-function pausePomodoro() {
-    state.pomodoro.isRunning = false;
-    clearInterval(state.pomodoro.interval);
-    document.getElementById('focus-pause').classList.add('hidden');
-    document.getElementById('focus-play').classList.remove('hidden');
+/* Modal backdrop blur */
+.modal-backdrop {
+    backdrop-filter: blur(4px);
 }
 
-function resumePomodoro() {
-    startPomodoro(state.pomodoro.timeRemaining, state.pomodoro.isBreak);
-    document.getElementById('focus-play').classList.add('hidden');
-    document.getElementById('focus-pause').classList.remove('hidden');
+/* Custom input styles */
+input[type="text"], input[type="number"], textarea, select {
+    @apply bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-gray-100;
+    @apply focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent;
 }
-function stopPomodoro() {
-    clearInterval(state.pomodoro.interval);
-    
-    // Add elapsed time to task
-    if (state.focusTask && !state.pomodoro.isBreak) {
-        const elapsed = state.pomodoro.totalTime - state.pomodoro.timeRemaining;
-        state.focusTask.spentTime += elapsed;
-        saveToLocalStorage();
+
+input[type="color"] {
+    @apply cursor-pointer;
+}
+
+/* Navigation buttons */
+.nav-btn {
+    @apply flex items-center space-x-2 px-4 py-2 rounded-lg transition;
+    @apply text-gray-400 hover:text-white hover:bg-gray-700;
+}
+
+.nav-btn.active {
+    @apply text-orange-500 bg-gray-700;
+}
+
+/* View transitions */
+.view {
+    display: none;
+}
+
+.view.active {
+    display: block;
+    animation: fadeIn 0.3s ease-in-out;
+}
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
     }
-    
-    state.focusTask = null;
-    state.pomodoro.isRunning = false;
-    document.getElementById('focus-mode').classList.add('hidden');
-    render();
-}
-function savePomodoroSettings() {
-    localStorage.setItem('pomodoroWorkTime', document.getElementById('pomodoro-work').value);
-    localStorage.setItem('pomodoroBreakTime', document.getElementById('pomodoro-break').value);
-}
-// Timeline Functions
-function initializeTimeline() {
-    // Setup drag start for task items
-    document.addEventListener('dragstart', (e) => {
-            if (e.target.tagName === 'TASK-ITEM') {
-                const taskId = e.target.getAttribute('task-id');
-            e.dataTransfer.setData('text/plain', taskId);
-        }
-    });
-}
-function handleDragStart(e) {
-    if (e.target.classList.contains('task-item')) {
-        const taskId = e.target.getAttribute('task-id');
-        e.dataTransfer.setData('text/plain', taskId);
-        e.target.classList.add('dragging');
+    to {
+        opacity: 1;
+        transform: translateY(0);
     }
 }
 
-function handleDragOver(e) {
-    e.preventDefault();
-    
-    if (e.target.classList.contains('timeline-hour')) {
-        e.target.classList.add('drag-over');
-    }
+/* Drag and drop styles */
+.drag-over {
+    @apply bg-gray-700 border-2 border-dashed border-orange-500;
 }
-function handleDragEnd(e) {
-    e.target.classList.remove('dragging');
-    document.querySelectorAll('.drag-over').forEach(el => {
-        el.classList.remove('drag-over');
-    });
+
+/* Custom checkbox */
+.custom-checkbox {
+    @apply w-5 h-5 rounded cursor-pointer appearance-none;
+    @apply bg-gray-700 border border-gray-600;
+    @apply checked:bg-emerald-500 checked:border-emerald-500;
 }
-function scheduleTask(taskId, hour, minute) {
-    const taskDate = new Date();
-    taskDate.setHours(0, 0, 0, 0); // Set to start of day for consistent date matching
-    
-    const startTime = new Date();
-    startTime.setHours(hour, minute, 0, 0);
-    
-    // Remove existing schedule for this task today
-    state.timelineTasks = state.timelineTasks.filter(t => {
-        const scheduleDate = new Date(t.date);
-        scheduleDate.setHours(0, 0, 0, 0);
-        return !(scheduleDate.getTime() === taskDate.getTime() && t.taskId === taskId);
-    });
-    
-    // Add new schedule
-    state.timelineTasks.push({
-        taskId,
-        date: taskDate.toISOString(),
-        startTime: startTime.toISOString()
-    });
+
+.custom-checkbox:checked::after {
+    content: '✓';
+    @apply block text-white text-center leading-5;
+}
+
+/* Time display */
+.time-display {
+    @apply font-mono text-lg tabular-nums;
+}
+
+/* Empty state */
+.empty-state {
+    @apply text-center py-12 text-gray-500;
+}
+
+.empty-state i {
+    @apply w-16 h-16 mx-auto mb-4;
+}
+
+/* Responsive timeline */
+@media (max-width: 768px) {
+    #timeline-tasks {
+        width: 100%;
+        position: static;
+    }
     
-    saveToLocalStorage();
+    #timeline-hours {
+        margin-left: 0;
+    }
     
-    // Update timeline sidebar
-    const timelineSidebar = document.getElementById('timeline-sidebar');
-    if (timelineSidebar && timelineSidebar.updateTimeline) {
-        timelineSidebar.updateTimeline();
+    .timeline-task-block {
+        position: relative !important;
+        width: 100% !important;
+        left: 0 !important;
+        top: auto !important;
     }
 }
-// Utilities
-function formatTime(minutes) {
-    const h = Math.floor(minutes / 60);
-    const m = minutes % 60;
-    return `${h}h${m > 0 ? ` ${m}m` : ''}`;
+
+/* Loading animation */
+.loading {
+    @apply animate-pulse;
 }
 
-// Request notification permission
-if ('Notification' in window && Notification.permission === 'default') {
-    Notification.requestPermission();
+.loading::after {
+    content: '';
+    @apply absolute inset-0 bg-gray-700 rounded-lg;
+    animation: loading 1.5s ease-in-out infinite;
 }
 
-// New functions for task management
-function addTimeToTask(taskId, minutes) {
-    const task = state.tasks.find(t => t.id === taskId);
-    if (task) {
-        task.spentTime += minutes;
-        saveToLocalStorage();
-        render();
+@keyframes loading {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(100%);
     }
 }
 
-function setupTaskDragAndDrop() {
-    const openContainer = document.getElementById('open-tasks');
-    const completedContainer = document.getElementById('completed-tasks');
-    
-    // Setup drag and drop for reordering
-    [openContainer, completedContainer].forEach(container => {
-        if (!container) return;
-        
-        container.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            const afterElement = getDragAfterElement(container, e.clientY);
-            const draggable = document.querySelector('.dragging');
-            if (draggable) {
-                if (afterElement == null) {
-                    container.appendChild(draggable);
-                } else {
-                    container.insertBefore(draggable, afterElement);
-            }
-        });
-    });
-}
-
-function getDragAfterElement(container, y) {
-    const draggableElements = [...container.querySelectorAll('task-item:not(.dragging)'));
-        
-        return draggableElements.reduce((closest, child) => {
-            const box = child.getBoundingClientRect();
-            const offset = y - box.top - box.height / 2;
-        if (offset < 0 && offset > closest.offset) {
-            return { offset: offset, element: child };
-        } else {
-            return closest;
-        }
-    }, { offset: Number.NEGATIVE_INFINITY }).element;
-}
-
-// Edit task modal functionality
-function openEditTaskModal(taskId) {
-    const task = state.tasks.find(t => t.id === taskId);
-    if (!task) return;
-    
-    const modal = document.createElement('div');
-    modal.className = 'fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4';
-    modal.innerHTML = `
-        <div class="bg-gray-800 rounded-xl p-6 max-w-md w-full">
-            <h3 class="text-xl font-semibold mb-4">Aufgabe bearbeiten</h3>
-            <form id="edit-task-form" class="space-y-4">
-                <div>
-                    <label class="block text-sm font-medium mb-2">Titel</label>
-                    <input id="edit-task-title" type="text" required value="${task.title}"
-                        class="w-full bg-gray-700 rounded-lg px-4 py-2 text-gray-100">
-                </div>
-                <div>
-                    <label class="block text-sm font-medium mb-2">Geschätzte Zeit</label>
-                    <div class="flex space-x-2">
-                        <input id="edit-task-hours" type="number" placeholder="h" min="0" max="24" value="${Math.floor(task.estimatedTime / 60)}"
-                            class="w-full bg-gray-700 rounded-lg px-4 py-2 text-gray-100">
-                        <input id="edit-task-minutes" type="number" placeholder="m" min="0" max="59" step="15" value="${task.estimatedTime % 60}"
-                            class="w-full bg-gray-700 rounded-lg px-4 py-2 text-gray-100">
-                    </div>
-                </div>
-                <div class="flex justify-end space-x-2">
-                            <button type="button" onclick="this.closest('div[class*=\"fixed\"]').remove()" 
-                                class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition">
-                                Abbrechen
-                            </button>
-                            <button type="submit" class="px-4 py-2 bg-orange-500 hover:bg-orange-600 rounded-lg transition">
-                                Speichern
-                            </button>
-                        </div>
-                    </form>
-                </div>
-            `;
-    
-    document.body.appendChild(modal);
-    
-    const form = modal.querySelector('#edit-task-form');
-    form.addEventListener('submit', (e) => {
-        e.preventDefault();
-        handleEditTask(taskId);
-        modal.remove();
-    });
-}
-
-function handleEditTask(taskId) {
-    const title = document.getElementById('edit-task-title').value;
-    const hours = parseInt(document.getElementById('edit-task-hours').value) || 0;
-    const minutes = parseInt(document.getElementById('edit-task-minutes').value) || 0;
-    const estimatedTime = hours * 60 + minutes;
-    
-    updateTask(taskId, { title, estimatedTime });
+/* Task priority indicator */
+.priority-high {
+    @apply border-l-4 border-red-500;
+}
+
+.priority-medium {
+    @apply border-l-4 border-yellow-500;
+}
+
+.priority-low {
+    @apply border-l-4 border-emerald-500;
 }
+
+/* Focus mode glass effect */
+#focus-mode {
+    background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(17, 24, 39, 0.98) 100%);
+    backdrop-filter: blur(10px);
+}
+
+/* Smooth transitions for all interactive elements */
+* {
+    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
+}

style.css

@@ -1,241 +1,824 @@
-/* Custom styles for TaskForge Pro */
 
-/* Scrollbar styling */
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
+// TaskForge Pro - Main JavaScript
+// State management
+window.state = {
+    tasks: [],
+    tags: [],
+    currentView: 'home',
+    focusTask: null,
+    pomodoro: {
+        isRunning: false,
+        isBreak: false,
+        timeRemaining: 0,
+        totalTime: 0,
+        interval: null
+    },
+    timelineTasks: []
+};
+// Initialize
+document.addEventListener('DOMContentLoaded', function() {
+    loadFromLocalStorage();
+    initializeUI();
+    setupEventListeners();
+    render();
+});
+// Local Storage
+function loadFromLocalStorage() {
+    const savedTasks = localStorage.getItem('tasks');
+    const savedTags = localStorage.getItem('tags');
+    const savedTimeline = localStorage.getItem('timeline');
+    
+    if (savedTasks) {
+        state.tasks = JSON.parse(savedTasks);
+    }
+    if (savedTags) {
+        state.tags = JSON.parse(savedTags);
+    }
+    if (savedTimeline) {
+        state.timelineTasks = JSON.parse(savedTimeline);
+    }
+    
+    // Load Pomodoro settings
+    const workTime = localStorage.getItem('pomodoroWorkTime') || 25;
+    const breakTime = localStorage.getItem('pomodoroBreakTime') || 5;
+    document.getElementById('pomodoro-work').value = workTime;
+    document.getElementById('pomodoro-break').value = breakTime;
 }
 
-::-webkit-scrollbar-track {
-    @apply bg-gray-800;
+function saveToLocalStorage() {
+    localStorage.setItem('tasks', JSON.stringify(state.tasks));
+    localStorage.setItem('tags', JSON.stringify(state.tags));
+    localStorage.setItem('timeline', JSON.stringify(state.timelineTasks));
 }
 
-::-webkit-scrollbar-thumb {
-    @apply bg-gray-600 rounded-full;
+// UI Initialization
+function initializeUI() {
+    // Current time display
+    updateCurrentTime();
+    setInterval(updateCurrentTime, 1000);
+    
+    // Initialize timeline
+    initializeTimeline();
+    
+    // Scroll to current time in timeline
+    setTimeout(scrollToCurrentTime, 100);
+// Check for default tags
+    if (state.tags.length === 0) {
+        state.tags = [
+            { id: '1', name: 'Wichtig', color: '#ef4444' },
+            { id: '2', name: 'Privat', color: '#10b981' },
+            { id: '3', name: 'Arbeit', color: '#3b82f6' }
+        ];
+        saveToLocalStorage();
+    }
 }
 
-::-webkit-scrollbar-thumb:hover {
-    @apply bg-gray-500;
+function updateCurrentTime() {
+    const now = new Date();
+    const timeString = now.toLocaleTimeString('de-DE', { 
+        hour: '2-digit', 
+        minute: '2-digit' 
+    });
+    document.getElementById('current-time').textContent = timeString;
+}
+function setupEventListeners() {
+    // Navigation
+    document.querySelectorAll('.nav-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+            const view = e.currentTarget.dataset.view;
+            switchView(view);
+        });
+    });
+
+    // FAB buttons
+    document.getElementById('add-task-fab').addEventListener('click', openAddTaskModal);
+    document.getElementById('focus-fab').addEventListener('click', enterFocusMode);
+
+    // Add task modal
+    document.getElementById('add-task-form').addEventListener('submit', handleAddTask);
+    document.getElementById('cancel-task').addEventListener('click', closeAddTaskModal);
+
+    // Settings
+    document.getElementById('import-btn').addEventListener('click', handleImport);
+    document.getElementById('export-btn').addEventListener('click', handleExport);
+    document.getElementById('add-tag-btn').addEventListener('click', handleAddTag);
+    
+    document.getElementById('pomodoro-work').addEventListener('change', savePomodoroSettings);
+    document.getElementById('pomodoro-break').addEventListener('change', savePomodoroSettings);
+
+    // Focus mode
+    document.getElementById('focus-pause').addEventListener('click', pausePomodoro);
+    document.getElementById('focus-play').addEventListener('click', resumePomodoro);
+    document.getElementById('focus-stop').addEventListener('click', stopPomodoro);
+
+    // Event delegation for task item events
+    document.addEventListener('delete-task', (e) => {
+        deleteTask(e.detail.taskId);
+    });
+
+    document.addEventListener('toggle-complete', (e) => {
+        toggleTaskComplete(e.detail.taskId, e.detail.completed);
+    });
+
+    document.addEventListener('update-task', (e) => {
+        updateTask(e.detail.taskId, e.detail.updates);
+    });
+
+    document.addEventListener('add-time', (e) => {
+        addTimeToTask(e.detail.taskId, e.detail.minutes);
+    });
+
+    // Timeline sidebar events
+    const timelineSidebar = document.getElementById('timeline-sidebar');
+    if (timelineSidebar) {
+        timelineSidebar.addEventListener('task-dropped', (e) => {
+            scheduleTask(e.detail.taskId, e.detail.hour, 0);
+        });
+    }
 }
-/* Task hover effects */
-.task-item {
-    @apply relative overflow-hidden;
-    transition: all 0.3s ease;
-    border-left: 4px solid transparent;
+// View Management
+function switchView(view) {
+    state.currentView = view;
+    
+    // Update nav buttons
+    document.querySelectorAll('.nav-btn').forEach(btn => {
+        btn.classList.toggle('active', btn.dataset.view === view);
+    });
+    
+    // Hide all views first
+    document.querySelectorAll('.view').forEach(v => {
+        v.classList.remove('active');
+        v.style.display = 'none';
+    });
+    
+    // Show only the active view
+    const activeView = document.getElementById(`${view}-view`);
+    if (activeView) {
+        activeView.style.display = 'block';
+        activeView.classList.add('active');
+    }
 }
-
-.task-item.completed {
-    animation: completeTask 0.6s ease forwards;
+// Task Management
+function addTask(task) {
+    const newTask = {
+        id: Date.now().toString(),
+        title: task.title,
+        completed: false,
+        estimatedTime: task.estimatedTime, // in minutes
+        spentTime: 0, // in minutes
+        tags: task.tags || [],
+        createdAt: new Date().toISOString()
+    };
+    
+    state.tasks.push(newTask);
+    saveToLocalStorage();
+    render();
+    
+    return newTask;
 }
 
-@keyframes completeTask {
-    0% { transform: scale(1); opacity: 1; }
-    50% { transform: scale(0.95); opacity: 0.8; }
-    100% { transform: scale(1); opacity: 1; border-left-color: #10b981; }
+function updateTask(taskId, updates) {
+    const task = state.tasks.find(t => t.id === taskId);
+    if (task) {
+        Object.assign(task, updates);
+        saveToLocalStorage();
+        render();
+    }
 }
 
-.task-item .focus-btn {
-    @apply absolute right-12 top-1/2 transform -translate-y-1/2;
-    @apply p-2 rounded-full bg-orange-500 bg-opacity-0 text-orange-500;
-    @apply transition-all duration-300 ease-in-out;
-    opacity: 0;
+function deleteTask(taskId) {
+    state.tasks = state.tasks.filter(t => t.id !== taskId);
+    state.timelineTasks = state.timelineTasks.filter(t => t.taskId !== taskId);
+    saveToLocalStorage();
+    render();
 }
-
-.task-item:hover .focus-btn {
-    @apply bg-opacity-20;
-    opacity: 1;
+function toggleTaskComplete(taskId, completed) {
+    const task = state.tasks.find(t => t.id === taskId);
+    if (task) {
+        task.completed = completed !== undefined ? completed : !task.completed;
+        saveToLocalStorage();
+        render();
+    }
 }
-
-.task-item .focus-btn:hover {
-    @apply bg-opacity-100 text-white;
+// Modal Functions
+function openAddTaskModal() {
+    const modal = document.getElementById('add-task-modal');
+    modal.classList.remove('hidden');
+    renderModalTags();
+    document.getElementById('task-title').focus();
 }
-.task-item:hover {
-    @apply transform scale-105 shadow-lg;
+function closeAddTaskModal() {
+    const modal = document.getElementById('add-task-modal');
+    modal.classList.add('hidden');
+    document.getElementById('add-task-form').reset();
 }
 
-/* Progress bar animation */
-.progress-bar-fill {
-    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+function handleAddTask(e) {
+    e.preventDefault();
+    
+    const title = document.getElementById('task-title').value;
+    const hours = parseInt(document.getElementById('task-hours').value) || 0;
+    const minutes = parseInt(document.getElementById('task-minutes').value) || 0;
+    const estimatedTime = hours * 60 + minutes;
+    
+    const selectedTags = Array.from(document.querySelectorAll('#modal-tags-list input:checked')).map(cb => cb.value);
+    
+    addTask({
+        title,
+        estimatedTime,
+        tags: selectedTags
+    });
+    
+    closeAddTaskModal();
+}
+
+function renderModalTags() {
+    const container = document.getElementById('modal-tags-list');
+    container.innerHTML = state.tags.map(tag => `
+        <label class="flex items-center space-x-2 cursor-pointer">
+            <input type="checkbox" value="${tag.id}" class="custom-checkbox">
+            <span class="tag-badge" style="background-color: ${tag.color}20; color: ${tag.color}">
+                ${tag.name}
+            </span>
+        </label>
+    `).join('');
+}
+
+// Tag Management
+function addTag(tag) {
+    state.tags.push({
+        id: Date.now().toString(),
+        name: tag.name,
+        color: tag.color
+    });
+    saveToLocalStorage();
+    render();
+}
+
+function deleteTag(tagId) {
+    state.tags = state.tags.filter(t => t.id !== tagId);
+    // Remove tag from all tasks
+    state.tasks.forEach(task => {
+        task.tags = task.tags.filter(t => t !== tagId);
+    });
+    saveToLocalStorage();
+    render();
+}
+
+function handleAddTag() {
+    const name = document.getElementById('new-tag-name').value;
+    const color = document.getElementById('new-tag-color').value;
+    
+    if (name) {
+        addTag({ name, color });
+        document.getElementById('new-tag-name').value = '';
+    }
 }
 
-/* Focus mode animations */
-@keyframes pulse {
-    0%, 100% {
-        opacity: 1;
+// Import/Export
+function handleImport() {
+    const markdown = document.getElementById('import-md').value;
+    if (!markdown) return;
+    
+    const tasks = parseMarkdown(markdown);
+    tasks.forEach(task => {
+        // Check if task already exists
+        const exists = state.tasks.some(t => t.title === task.title);
+        if (!exists) {
+            state.tasks.push({
+                id: Date.now().toString() + Math.random(),
+                title: task.title,
+                completed: task.completed,
+                estimatedTime: task.estimatedTime,
+                spentTime: task.spentTime || 0,
+                tags: [],
+                createdAt: new Date().toISOString()
+            });
+        }
+    });
+    
+    saveToLocalStorage();
+    render();
+    document.getElementById('import-md').value = '';
+}
+
+function handleExport() {
+    const markdown = generateMarkdown();
+    const blob = new Blob([markdown], { type: 'text/markdown' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'tasks.md';
+    a.click();
+    URL.revokeObjectURL(url);
+}
+function parseMarkdown(markdown) {
+    const lines = markdown.split('\n');
+    const tasks = [];
+    
+    const taskRegex = /^\s*-\s*\[([ x])\]\s+(.+?)(?:\s*\|\s*(.+?)(?:\s*\|\s*(.+?))?)?\s*$/;
+    
+    lines.forEach(line => {
+        const match = line.match(taskRegex);
+        if (match) {
+            const completed = match[1] === 'x';
+            const title = match[2].trim();
+            const timePart = match[3] ? match[3].trim() : '0h';
+            const tagsPart = match[4] ? match[4].trim() : '';
+            
+            // Parse time
+            const timeMatch = timePart.match(/(\d+)(?:\s*h\s*)?(?:(?:\s*(\d+)\s*m\s*)?)?/);
+            const hours = parseInt(timeMatch[1]) || 0;
+            const minutes = parseInt(timeMatch[2]) || 0;
+            const estimatedTime = hours * 60 + minutes;
+            
+            tasks.push({
+                title,
+                completed,
+                estimatedTime
+            });
+        }
+    });
+return tasks;
+}
+
+function generateMarkdown() {
+    return state.tasks.map(task => {
+        const status = task.completed ? 'x' : ' ';
+        const hours = Math.floor(task.estimatedTime / 60);
+        const minutes = task.estimatedTime % 60;
+        const timeStr = `${hours}h${minutes > 0 ? ` ${minutes}m` : ''}`;
+        return `- [${status}] ${task.title} | ${timeStr}`;
+    }).join('\n');
+}
+
+// Rendering
+function render() {
+    renderTasks();
+    renderProgressBars();
+    renderTags();
+    renderTimeline();
+}
+function renderTasks() {
+    const openContainer = document.getElementById('open-tasks');
+    const completedContainer = document.getElementById('completed-tasks');
+    
+    const openTasks = state.tasks.filter(t => !t.completed);
+    const completedTasks = state.tasks.filter(t => t.completed);
+    
+    // Render open tasks
+    if (openTasks.length === 0) {
+        openContainer.innerHTML = '<div class="empty-state"><i data-feather="inbox"></i><p>Keine offenen Aufgaben</p></div>';
+    } else {
+        openContainer.innerHTML = '';
+        openTasks.forEach(task => {
+            const taskElement = document.createElement('task-item');
+            taskElement.setAttribute('task-id', task.id);
+            taskElement.setAttribute('completed', 'false');
+            openContainer.appendChild(taskElement);
+        });
     }
-    50% {
-        opacity: 0.5;
+    
+    // Render completed tasks
+    if (completedTasks.length === 0) {
+        completedContainer.innerHTML = '<div class="empty-state"><i data-feather="check-circle"></i><p>Keine erledigten Aufgaben</p></div>';
+    } else {
+        completedContainer.innerHTML = '';
+        completedTasks.forEach(task => {
+            const taskElement = document.createElement('task-item');
+            taskElement.setAttribute('task-id', task.id);
+            taskElement.setAttribute('completed', 'true');
+            completedContainer.appendChild(taskElement);
+        });
     }
+    
+    document.getElementById('open-count').textContent = openTasks.length;
+    document.getElementById('completed-count').textContent = completedTasks.length;
+    
+    // Setup drag and drop for task items
+    setupTaskDragAndDrop();
+    
+    // Replace feather icons
+    feather.replace();
+}
+function renderProgressBars() {
+    // Overall progress
+    const totalEstimated = state.tasks.reduce((sum, t) => sum + t.estimatedTime, 0) || 1;
+    const totalSpent = state.tasks.reduce((sum, t) => sum + t.spentTime, 0);
+    const totalProgress = (totalSpent / totalEstimated) * 100;
+    
+    document.getElementById('total-progress-bar').style.width = `${totalProgress}%`;
+    document.getElementById('total-progress-text').textContent = 
+        `${Math.round(totalProgress)}% (${formatTime(totalSpent)} / ${formatTime(totalEstimated)})`;
+    
+    // Tag progress bars - only for tags with tasks
+    const container = document.getElementById('tag-progress-container');
+    container.innerHTML = state.tags
+        .filter(tag => state.tasks.some(t => t.tags.includes(tag.id))) // Only tags with tasks
+        .map(tag => {
+            const tagTasks = state.tasks.filter(t => t.tags.includes(tag.id));
+            const tagEstimated = tagTasks.reduce((sum, t) => sum + t.estimatedTime, 0) || 1;
+            const tagSpent = tagTasks.reduce((sum, t) => sum + t.spentTime, 0);
+            const tagProgress = (tagSpent / tagEstimated) * 100;
+            
+            return `
+                <div class="bg-gray-800 rounded-lg p-4 shadow transition-all hover:scale-[1.02]">
+                    <div class="flex items-center justify-between mb-2">
+                        <span class="font-medium" style="color: ${tag.color}">${tag.name}</span>
+                        <span class="text-sm text-gray-400">
+                            ${Math.round(tagProgress)}% (${formatTime(tagSpent)} / ${formatTime(tagEstimated)})
+                        </span>
+                    </div>
+                    <div class="w-full bg-gray-700 rounded-full h-2 overflow-hidden">
+                        <div class="h-full rounded-full transition-all duration-500" 
+                             style="width: ${tagProgress}%; background-color: ${tag.color}"></div>
+                    </div>
+                </div>
+            `;
+        }).join('');
+}
+function renderTags() {
+    const container = document.getElementById('tags-list');
+    container.innerHTML = state.tags.map(tag => `
+        <tag-item tag-id="${tag.id}" tag-name="${tag.name}" tag-color="${tag.color}"></tag-item>
+    `).join('');
+    
+    // Render tag components
+    document.querySelectorAll('tag-item').forEach(el => {
+        const tagId = el.getAttribute('tag-id');
+        el.addEventListener('delete', () => deleteTag(tagId));
+    });
+}
+function highlightCurrentHour() {
+    const now = new Date();
+    const currentHour = now.getHours();
+    const currentMinute = now.getMinutes();
+    
+    // Highlight current hour
+    document.querySelectorAll('.timeline-hour').forEach(el => {
+        el.classList.remove('bg-gray-750');
+    });
+    
+    const hourElement = document.querySelector(`.timeline-hour[data-hour="${currentHour}"]`);
+    if (hourElement) {
+        hourElement.classList.add('bg-gray-750');
+    }
+    
+    // Add current time indicator line
+    document.getElementById('current-time-indicator')?.remove();
+    
+    const timelineContainer = document.getElementById('timeline-hours');
+    if (timelineContainer) {
+        const indicator = document.createElement('div');
+        indicator.id = 'current-time-indicator';
+        indicator.style.position = 'absolute';
+        indicator.style.left = '0';
+        indicator.style.right = '0';
+        indicator.style.height = '2px';
+        indicator.style.backgroundColor = '#ef4444';
+        indicator.style.zIndex = '10';
+        
+        const hourElement = document.querySelector(`.timeline-hour[data-hour="${currentHour}"]`);
+        if (hourElement) {
+            const hourTop = hourElement.offsetTop;
+            const hourHeight = hourElement.offsetHeight;
+            const minutePosition = (currentMinute / 60) * hourHeight;
+            
+            indicator.style.top = `${hourTop + minutePosition}px`;
+            timelineContainer.appendChild(indicator);
+            
+            // Add time label
+            const timeLabel = document.createElement('div');
+            timeLabel.textContent = now.toLocaleTimeString('de-DE', { hour: '2-digit', minute: '2-digit' });
+            timeLabel.style.position = 'absolute';
+            timeLabel.style.left = '-64px';
+            timeLabel.style.top = `${hourTop + minutePosition - 10}px`;
+            timeLabel.style.backgroundColor = '#ef4444';
+            timeLabel.style.color = 'white';
+            timeLabel.style.padding = '2px 8px';
+            timeLabel.style.borderRadius = '4px';
+            timeLabel.style.fontSize = '12px';
+            timeLabel.style.zIndex = '10';
+            
+            hourEl.appendChild(timeLabel);
 }
-
-.focus-pulse {
-    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-}
-
-/* Button focus styles */
-.btn:focus {
-    @apply outline-none ring-2 ring-orange-500 ring-offset-2 ring-offset-gray-900;
-}
-
-/* Tag badge styles */
-.tag-badge {
-    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
-}
-
-/* Timeline styles */
-.timeline-hour {
-    @apply relative border-b border-gray-700;
-    min-height: 60px;
-    position: relative;
-}
-.timeline-task-block {
-    @apply absolute rounded-lg cursor-move transition-all;
-    transition: all 0.2s ease;
-}
-
-.timeline-task-block:hover {
-    @apply transform scale-105 shadow-lg;
-}
-
-.timeline-task-block.dragging {
-    @apply opacity-50;
-}
-
-/* Modal backdrop blur */
-.modal-backdrop {
-    backdrop-filter: blur(4px);
-}
-
-/* Custom input styles */
-input[type="text"], input[type="number"], textarea, select {
-    @apply bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-gray-100;
-    @apply focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent;
-}
-
-input[type="color"] {
-    @apply cursor-pointer;
-}
-
-/* Navigation buttons */
-.nav-btn {
-    @apply flex items-center space-x-2 px-4 py-2 rounded-lg transition;
-    @apply text-gray-400 hover:text-white hover:bg-gray-700;
-}
-
-.nav-btn.active {
-    @apply text-orange-500 bg-gray-700;
+    }
 }
-
-/* View transitions */
-.view {
-    display: none;
+function scrollToCurrentTime() {
+    const now = new Date();
+    const currentHour = now.getHours();
+    const hourEl = document.querySelector(`[data-hour="${currentHour}"]`);
+    
+    if (hourEl) {
+        hourEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    }
 }
 
-.view.active {
-    display: block;
-    animation: fadeIn 0.3s ease-in-out;
-}
-@keyframes fadeIn {
-    from {
-        opacity: 0;
-        transform: translateY(10px);
+// Focus Mode & Pomodoro
+function enterFocusMode() {
+    // Open a task selection modal
+    const openTasks = state.tasks.filter(t => !t.completed);
+    if (openTasks.length === 0) {
+        alert('Keine offenen Aufgaben für den Fokus-Modus!');
+        return;
     }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
 
-/* Drag and drop styles */
-.drag-over {
-    @apply bg-gray-700 border-2 border-dashed border-orange-500;
+    const modal = document.createElement('div');
+    modal.className = 'fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4';
+    modal.innerHTML = `
+        <div class="bg-gray-800 rounded-xl p-6 max-w-md w-full max-h-[80vh] overflow-y-auto">
+            <h3 class="text-xl font-semibold mb-4">Aufgabe für Fokus-Modus auswählen</h3>
+            <div class="space-y-2">
+                ${openTasks.map(task => `
+                    <div class="bg-gray-700 p-3 rounded-lg cursor-pointer hover:bg-gray-600 transition"
+                         onclick="startFocusModeWithId('${task.id}')">
+                        <div class="font-medium">${task.title}</div>
+                        <div class="text-sm text-gray-400">${formatTime(task.estimatedTime)}</div>
+                    </div>
+                `).join('')}
+            </div>
+            <button onclick="this.closest('div[class*=\"fixed\"]').remove()" 
+                    class="mt-4 px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition w-full">
+                Abbrechen
+            </button>
+        </div>
+    `;
+    document.body.appendChild(modal);
+}
+
+function startFocusModeWithId(taskId) {
+    const task = state.tasks.find(t => t.id === taskId);
+    if (task) {
+        document.querySelector('div[class*="fixed"]')?.remove();
+        startFocusMode(task);
+    }
 }
-
-/* Custom checkbox */
-.custom-checkbox {
-    @apply w-5 h-5 rounded cursor-pointer appearance-none;
-    @apply bg-gray-700 border border-gray-600;
-    @apply checked:bg-emerald-500 checked:border-emerald-500;
+function startFocusMode(task) {
+    state.focusTask = task;
+    document.getElementById('focus-task-title').textContent = task.title;
+    document.getElementById('focus-mode').classList.remove('hidden');
+    
+    // Start pomodoro
+    const workTime = parseInt(localStorage.getItem('pomodoroWorkTime')) || 25;
+    startPomodoro(workTime * 60, false);
+}
+function startPomodoro(seconds, isBreak) {
+    state.pomodoro.isRunning = true;
+    state.pomodoro.isBreak = isBreak;
+    state.pomodoro.timeRemaining = seconds;
+    state.pomodoro.totalTime = seconds;
+    
+    clearInterval(state.pomodoro.interval);
+    
+    state.pomodoro.interval = setInterval(() => {
+        if (state.pomodoro.timeRemaining > 0) {
+            state.pomodoro.timeRemaining--;
+            updatePomodoroDisplay();
+        } else {
+            handlePomodoroComplete();
+        }
+    }, 1000);
+    
+    updatePomodoroDisplay();
 }
 
-.custom-checkbox:checked::after {
-    content: '✓';
-    @apply block text-white text-center leading-5;
+function updatePomodoroDisplay() {
+    const minutes = Math.floor(state.pomodoro.timeRemaining / 60);
+    const seconds = state.pomodoro.timeRemaining % 60;
+    document.getElementById('pomodoro-timer').textContent = 
+        `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    
+    const statusEl = document.getElementById('pomodoro-status');
+    statusEl.textContent = state.pomodoro.isBreak ? 'Pausenzeit läuft...' : 'Arbeitszeit läuft...';
 }
 
-/* Time display */
-.time-display {
-    @apply font-mono text-lg tabular-nums;
+function handlePomodoroComplete() {
+    clearInterval(state.pomodoro.interval);
+    
+    if (!state.pomodoro.isBreak) {
+        // Work session complete
+        const elapsed = state.pomodoro.totalTime;
+        state.focusTask.spentTime += elapsed;
+        saveToLocalStorage();
+        
+        // Start break
+        const breakTime = parseInt(localStorage.getItem('pomodoroBreakTime')) || 5;
+        startPomodoro(breakTime * 60, true);
+        
+        // Notification
+        if ('Notification' in window && Notification.permission === 'granted') {
+            new Notification('Pause!', { body: 'Arbeitszeit abgeschlossen. Zeit für eine Pause!' });
+        }
+    } else {
+        // Break complete
+        if ('Notification' in window && Notification.permission === 'granted') {
+            new Notification('Weiterarbeiten!', { body: 'Pausenzeit ist vorbei.' });
+        }
+    }
 }
 
-/* Empty state */
-.empty-state {
-    @apply text-center py-12 text-gray-500;
+function pausePomodoro() {
+    state.pomodoro.isRunning = false;
+    clearInterval(state.pomodoro.interval);
+    document.getElementById('focus-pause').classList.add('hidden');
+    document.getElementById('focus-play').classList.remove('hidden');
 }
 
-.empty-state i {
-    @apply w-16 h-16 mx-auto mb-4;
+function resumePomodoro() {
+    startPomodoro(state.pomodoro.timeRemaining, state.pomodoro.isBreak);
+    document.getElementById('focus-play').classList.add('hidden');
+    document.getElementById('focus-pause').classList.remove('hidden');
 }
-
-/* Responsive timeline */
-@media (max-width: 768px) {
-    #timeline-tasks {
-        width: 100%;
-        position: static;
-    }
+function stopPomodoro() {
+    clearInterval(state.pomodoro.interval);
     
-    #timeline-hours {
-        margin-left: 0;
+    // Add elapsed time to task
+    if (state.focusTask && !state.pomodoro.isBreak) {
+        const elapsed = state.pomodoro.totalTime - state.pomodoro.timeRemaining;
+        state.focusTask.spentTime += elapsed;
+        saveToLocalStorage();
     }
     
-    .timeline-task-block {
-        position: relative !important;
-        width: 100% !important;
-        left: 0 !important;
-        top: auto !important;
+    state.focusTask = null;
+    state.pomodoro.isRunning = false;
+    document.getElementById('focus-mode').classList.add('hidden');
+    render();
+}
+function savePomodoroSettings() {
+    localStorage.setItem('pomodoroWorkTime', document.getElementById('pomodoro-work').value);
+    localStorage.setItem('pomodoroBreakTime', document.getElementById('pomodoro-break').value);
+}
+// Timeline Functions
+function initializeTimeline() {
+    // Setup drag start for task items
+    document.addEventListener('dragstart', (e) => {
+            if (e.target.tagName === 'TASK-ITEM') {
+                const taskId = e.target.getAttribute('task-id');
+            e.dataTransfer.setData('text/plain', taskId);
+        }
+    });
+}
+function handleDragStart(e) {
+    if (e.target.classList.contains('task-item')) {
+        const taskId = e.target.getAttribute('task-id');
+        e.dataTransfer.setData('text/plain', taskId);
+        e.target.classList.add('dragging');
     }
 }
 
-/* Loading animation */
-.loading {
-    @apply animate-pulse;
+function handleDragOver(e) {
+    e.preventDefault();
+    
+    if (e.target.classList.contains('timeline-hour')) {
+        e.target.classList.add('drag-over');
+    }
 }
-
-.loading::after {
-    content: '';
-    @apply absolute inset-0 bg-gray-700 rounded-lg;
-    animation: loading 1.5s ease-in-out infinite;
+function handleDragEnd(e) {
+    e.target.classList.remove('dragging');
+    document.querySelectorAll('.drag-over').forEach(el => {
+        el.classList.remove('drag-over');
+    });
 }
-
-@keyframes loading {
-    0% {
-        transform: translateX(-100%);
-    }
-    100% {
-        transform: translateX(100%);
+function scheduleTask(taskId, hour, minute) {
+    const taskDate = new Date();
+    taskDate.setHours(0, 0, 0, 0); // Set to start of day for consistent date matching
+    
+    const startTime = new Date();
+    startTime.setHours(hour, minute, 0, 0);
+    
+    // Remove existing schedule for this task today
+    state.timelineTasks = state.timelineTasks.filter(t => {
+        const scheduleDate = new Date(t.date);
+        scheduleDate.setHours(0, 0, 0, 0);
+        return !(scheduleDate.getTime() === taskDate.getTime() && t.taskId === taskId);
+    });
+    
+    // Add new schedule
+    state.timelineTasks.push({
+        taskId,
+        date: taskDate.toISOString(),
+        startTime: startTime.toISOString()
+    });
+    
+    saveToLocalStorage();
+    
+    // Update timeline sidebar
+    const timelineSidebar = document.getElementById('timeline-sidebar');
+    if (timelineSidebar && timelineSidebar.updateTimeline) {
+        timelineSidebar.updateTimeline();
     }
 }
-
-/* Task priority indicator */
-.priority-high {
-    @apply border-l-4 border-red-500;
+// Utilities
+function formatTime(minutes) {
+    const h = Math.floor(minutes / 60);
+    const m = minutes % 60;
+    return `${h}h${m > 0 ? ` ${m}m` : ''}`;
 }
 
-.priority-medium {
-    @apply border-l-4 border-yellow-500;
+// Request notification permission
+if ('Notification' in window && Notification.permission === 'default') {
+    Notification.requestPermission();
 }
 
-.priority-low {
-    @apply border-l-4 border-emerald-500;
+// New functions for task management
+function addTimeToTask(taskId, minutes) {
+    const task = state.tasks.find(t => t.id === taskId);
+    if (task) {
+        task.spentTime += minutes;
+        saveToLocalStorage();
+        render();
+    }
 }
 
-/* Focus mode glass effect */
-#focus-mode {
-    background: linear-gradient(135deg, rgba(17, 24, 39, 0.95) 0%, rgba(17, 24, 39, 0.98) 100%);
-    backdrop-filter: blur(10px);
+function setupTaskDragAndDrop() {
+    const openContainer = document.getElementById('open-tasks');
+    const completedContainer = document.getElementById('completed-tasks');
+    
+    // Setup drag and drop for reordering
+    [openContainer, completedContainer].forEach(container => {
+        if (!container) return;
+        
+        container.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            const afterElement = getDragAfterElement(container, e.clientY);
+            const draggable = document.querySelector('.dragging');
+            if (draggable) {
+                if (afterElement == null) {
+                    container.appendChild(draggable);
+                } else {
+                    container.insertBefore(draggable, afterElement);
+            }
+        });
+    });
+}
+
+function getDragAfterElement(container, y) {
+    const draggableElements = [...container.querySelectorAll('task-item:not(.dragging)'));
+        
+        return draggableElements.reduce((closest, child) => {
+            const box = child.getBoundingClientRect();
+            const offset = y - box.top - box.height / 2;
+        if (offset < 0 && offset > closest.offset) {
+            return { offset: offset, element: child };
+        } else {
+            return closest;
+        }
+    }, { offset: Number.NEGATIVE_INFINITY }).element;
+}
+
+// Edit task modal functionality
+function openEditTaskModal(taskId) {
+    const task = state.tasks.find(t => t.id === taskId);
+    if (!task) return;
+    
+    const modal = document.createElement('div');
+    modal.className = 'fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4';
+    modal.innerHTML = `
+        <div class="bg-gray-800 rounded-xl p-6 max-w-md w-full">
+            <h3 class="text-xl font-semibold mb-4">Aufgabe bearbeiten</h3>
+            <form id="edit-task-form" class="space-y-4">
+                <div>
+                    <label class="block text-sm font-medium mb-2">Titel</label>
+                    <input id="edit-task-title" type="text" required value="${task.title}"
+                        class="w-full bg-gray-700 rounded-lg px-4 py-2 text-gray-100">
+                </div>
+                <div>
+                    <label class="block text-sm font-medium mb-2">Geschätzte Zeit</label>
+                    <div class="flex space-x-2">
+                        <input id="edit-task-hours" type="number" placeholder="h" min="0" max="24" value="${Math.floor(task.estimatedTime / 60)}"
+                            class="w-full bg-gray-700 rounded-lg px-4 py-2 text-gray-100">
+                        <input id="edit-task-minutes" type="number" placeholder="m" min="0" max="59" step="15" value="${task.estimatedTime % 60}"
+                            class="w-full bg-gray-700 rounded-lg px-4 py-2 text-gray-100">
+                    </div>
+                </div>
+                <div class="flex justify-end space-x-2">
+                            <button type="button" onclick="this.closest('div[class*=\"fixed\"]').remove()" 
+                                class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg transition">
+                                Abbrechen
+                            </button>
+                            <button type="submit" class="px-4 py-2 bg-orange-500 hover:bg-orange-600 rounded-lg transition">
+                                Speichern
+                            </button>
+                        </div>
+                    </form>
+                </div>
+            `;
+    
+    document.body.appendChild(modal);
+    
+    const form = modal.querySelector('#edit-task-form');
+    form.addEventListener('submit', (e) => {
+        e.preventDefault();
+        handleEditTask(taskId);
+        modal.remove();
+    });
+}
+
+function handleEditTask(taskId) {
+    const title = document.getElementById('edit-task-title').value;
+    const hours = parseInt(document.getElementById('edit-task-hours').value) || 0;
+    const minutes = parseInt(document.getElementById('edit-task-minutes').value) || 0;
+    const estimatedTime = hours * 60 + minutes;
+    
+    updateTask(taskId, { title, estimatedTime });
 }
-
-/* Smooth transitions for all interactive elements */
-* {
-    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
-}