Promote version 4549c0d to main

Promoted commit 4549c0d2bdafddf68bbb5a3ac5890cefe286b3ca to main branch

components/tag-item.js

@@ -1,3 +1,112 @@
+// 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);
+                }
+                
+                .delete-btn i {
+                    width: 14px;
+                    height: 14px;
+                }
+            </style>
+            
+            <div class="tag-content">
+                <span class="tag-name">${tagName}</span>
+                <button class="delete-btn" @click="${this.handleDelete}">
+                    <i data-feather="x"></i>
+                </button>
+            </div>
+        `;
+        
+        // Replace feather icon
+        const iconEl = this.shadowRoot.querySelector('i[data-feather]');
+        if (iconEl) {
+            iconEl.outerHTML = feather.icons.x.toSvg({ width: 14, height: 14 });
+        }
+    }
+
+    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,101 +1,355 @@
-
-// Tag Item Component
-class TagItem extends HTMLElement {
+// Task Item Component
+class TaskItem 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 ['tag-id', 'tag-name', 'tag-color'];
+        return ['task-id', 'completed'];
     }
 
-    attributeChangedCallback() {
+    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();
     }
 
-    render() {
-        const tagName = this.getAttribute('tag-name') || '';
-        const tagColor = this.getAttribute('tag-color') || '#f97316';
-        const tagId = this.getAttribute('tag-id') || '';
+    loadTaskData() {
+        if (!window.state || !window.state.tasks) return;
+        
+        this.task = window.state.tasks.find(t => t.id === this.taskId);
+        this.tags = window.state.tags || [];
+    }
 
-        this.shadowRoot.innerHTML = `
+    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('');
+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;
+                    display: block;
+                    background: #1f2937;
+                    border-radius: 8px;
+                    padding: 12px;
+                    margin-bottom: 8px;
+                    transition: all 0.3s ease;
+                    cursor: pointer;
                 }
                 
-                .tag-content {
-                    background-color: ${tagColor}20;
-                    color: ${tagColor};
-                    padding: 4px 12px;
-                    border-radius: 16px;
+                :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;
-                    gap: 6px;
+                    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;
                 }
                 
-                .tag-name {
-                    user-select: none;
+                .task-actions {
+                    display: flex;
+                    gap: 8px;
                 }
                 
-                .delete-btn {
+                .task-action {
                     background: none;
                     border: none;
-                    color: inherit;
+                    color: #6b7280;
                     cursor: pointer;
-                    padding: 2px;
-                    border-radius: 50%;
+                    padding: 4px;
+                    transition: color 0.2s ease;
+                }
+                
+                .task-action:hover {
+                    color: #f97316;
+                }
+                
+                .task-info {
                     display: flex;
                     align-items: center;
-                    justify-content: 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;
+                }
+                
+                .edit-form {
+                    display: none;
+                    margin-top: 12px;
+                    padding-top: 12px;
+                    border-top: 1px solid #374151;
+                }
+                
+                .edit-form.active {
+                    display: block;
+                }
+                
+                .input-group {
+                    display: flex;
+                    gap: 8px;
+                    margin-bottom: 8px;
+                }
+                
+                .input-group input {
+                    background: #374151;
+                    border: 1px solid #4b5563;
+                    border-radius: 4px;
+                    padding: 6px 12px;
+                    color: #f3f4f6;
+                    font-size: 14px;
+                }
+                
+                .input-group input:focus {
+                    outline: none;
+                    border-color: #f97316;
+                }
+                
+                .edit-actions {
+                    display: flex;
+                    gap: 8px;
+                    justify-content: flex-end;
+                }
+                
+                .btn-small {
+                    padding: 6px 12px;
+                    border-radius: 4px;
+                    border: none;
+                    font-size: 14px;
+                    cursor: pointer;
                     transition: all 0.2s ease;
                 }
                 
-                .delete-btn:hover {
-                    background-color: rgba(0, 0, 0, 0.1);
-                    transform: scale(1.1);
+                .btn-save {
+                    background: #059669;
+                    color: white;
+                }
+                
+                .btn-save:hover {
+                    background: #047857;
+                }
+                
+                .btn-cancel {
+                    background: #374151;
+                    color: #d1d5db;
+                }
+                
+                .btn-cancel:hover {
+                    background: #4b5563;
                 }
             </style>
+            <div class="task-header">
+                <input type="checkbox" class="task-checkbox" ${this.completed ? 'checked' : ''} 
+                       @change="${this.handleToggleComplete}">
+<span class="task-title">${title}</span>
+                <div class="task-actions">
+                    <button class="focus-btn" @click="${this.handleFocus}" title="Pomodoro starten">
+                        <i data-feather="clock"></i>
+                    </button>
+<button class="task-action" @click="${this.handleEdit}" title="Bearbeiten">
+                        <i data-feather="edit-2"></i>
+                    </button>
+                    <button class="task-action" @click="${this.handleDelete}" title="Löschen">
+                        <i data-feather="trash-2"></i>
+                    </button>
+                </div>
+            </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 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>
+            <div class="edit-form" id="edit-form-${this.taskId}">
+<div class="input-group">
+                    <input type="text" value="${title}" id="edit-title-${this.taskId}" placeholder="Titel">
+                    <input type="number" value="${Math.floor(estimatedTime / 60)}" id="edit-hours-${this.taskId}" 
+                           placeholder="h" min="0" max="24" style="width: 60px">
+                    <input type="number" value="${estimatedTime % 60}" id="edit-minutes-${this.taskId}" 
+                           placeholder="m" min="0" max="59" step="15" style="width: 60px">
+<button class="btn-small btn-add-time" @click="${this.handleAddTime}" title="Zeit hinzufügen">
+                        <i data-feather="clock" style="width: 14px; height: 14px;"></i>
+                    </button>
+                </div>
+                <div class="edit-actions">
+                    <button class="btn-small btn-save" @click="${this.handleSave}">Speichern</button>
+                    <button class="btn-small btn-cancel" @click="${this.handleCancel}">Abbrechen</button>
+                </div>
             </div>
         `;
+        if (this.completed) {
+this.classList.add('completed');
+        } else {
+            this.classList.remove('completed');
+        }
+        
+        // Replace feather icons
+        this.shadowRoot.querySelectorAll('i[data-feather]').forEach(icon => {
+            const iconName = icon.getAttribute('data-feather');
+            icon.outerHTML = feather.icons[iconName].toSvg({ width: 16, height: 16 });
+        });
     }
-setupEventListeners() {
+
+    setupEventListeners() {
         this.shadowRoot.addEventListener('click', (e) => {
-            const deleteBtn = e.target.closest('.delete-btn');
-            if (deleteBtn) {
+            const action = e.target.closest('button')?.getAttribute('@click');
+            if (action) {
                 e.stopPropagation();
-                this.handleDelete(e);
+                this[action.replace('${this.', '').replace('}', '')](e);
+            }
+        });
+        
+        this.shadowRoot.addEventListener('change', (e) => {
+            if (e.target.classList.contains('task-checkbox')) {
+                e.stopPropagation();
+                this.handleToggleComplete(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 editForm = this.shadowRoot.querySelector('.edit-form');
+        editForm.classList.add('active');
+    }
+
     handleDelete(e) {
-        if (confirm('Tag wirklich löschen?')) {
-            this.dispatchEvent(new CustomEvent('delete', { 
-                bubbles: true,
-                detail: { tagId: this.getAttribute('tag-id') }
+        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 
             }));
         }
     }
 }
 
-customElements.define('tag-item', TagItem);
+customElements.define('task-item', TaskItem);

components/timeline-sidebar.js

@@ -1,273 +1,154 @@
+class TimelineSidebar extends HTMLElement {
+  connectedCallback() {
+    this.attachShadow({ mode: 'open' });
+    this.render();
+    this.setupEventListeners();
+  }
 
-// Task Item Component
-class TaskItem extends HTMLElement {
-    constructor() {
-        super();
-        this.attachShadow({ mode: 'open' });
-    }
+  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;
+        }
 
-    connectedCallback() {
-        this.taskId = this.getAttribute('task-id');
-        this.completed = this.getAttribute('completed') === 'true';
-        this.loadTaskData();
-        this.render();
-        this.setupEventListeners();
-    }
+        :host(.open) {
+          transform: translateX(0);
+        }
 
-    static get observedAttributes() {
-        return ['task-id', 'completed'];
-    }
+        .header {
+          padding: 1rem;
+          border-bottom: 1px solid #374151;
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
 
-    attributeChangedCallback(name, oldValue, newValue) {
-        if (name === 'task-id' && oldValue !== newValue) {
-            this.taskId = newValue;
-            this.loadTaskData();
-        } else if (name === 'completed') {
-            this.completed = newValue === 'true';
+        .timeline-container {
+          padding: 1rem;
         }
-        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 || [];
-    }
+        .timeline-hour {
+          position: relative;
+          min-height: 60px;
+          border-bottom: 1px solid #374151;
+          padding-left: 50px;
+        }
 
-    render() {
-        if (!this.task) {
-            this.shadowRoot.innerHTML = `<div class="loading" data-task-id="${this.taskId}">Lädt...</div>';
-            return;
+        .hour-label {
+          position: absolute;
+          left: 10px;
+          top: 5px;
+          font-size: 12px;
+          color: #9ca3af;
         }
-        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');
+
+        .task-drop-area {
+          height: 100%;
+          min-height: 60px;
         }
-    }
-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);
-            }
-        });
-    }
 
-    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');
+        .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;
         }
-    }
 
-    handleFocus(e) {
-        const taskId = this.getAttribute('task-id');
-        const task = state.tasks.find(t => t.id === taskId);
-        if (task) {
-            startFocusMode(task);
+        .task-block {
+          background: #374151;
+          border-left: 3px solid #f97316;
+          padding: 0.5rem;
+          margin: 0.5rem 0;
+          border-radius: 4px;
         }
-    }
+      </style>
 
-    handleEdit(e) {
-        const taskId = this.getAttribute('task-id');
-        openEditTaskModal(taskId);
-    }
+      <button class="toggle-btn">
+        <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="15 18 9 12 15 6"></polyline>
+        </svg>
+      </button>
 
-    handleDelete(e) {
-        if (confirm('Aufgabe wirklich löschen?')) {
-            this.dispatchEvent(new CustomEvent('delete-task', { 
-            detail: { taskId: this.getAttribute('task-id') },
-            bubbles: true 
-        }));
-    }
+      <div class="header">
+        <h3>Timeline</h3>
+        <button id="close-timeline">
+          <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">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
 
-    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 
-        }));
-    }
+      <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>
+    `;
+  }
 
-    handleCancel(e) {
-        const editForm = this.shadowRoot.querySelector('.edit-form');
-        editForm.classList.remove('active');
-    }
+  setupEventListeners() {
+    const toggleBtn = this.shadowRoot.querySelector('.toggle-btn');
+    toggleBtn.addEventListener('click', () => {
+      this.classList.toggle('open');
+      const icon = toggleBtn.querySelector('svg');
+      if (this.classList.contains('open')) {
+        icon.innerHTML = '<polyline points="15 18 9 12 15 6"></polyline>';
+      } else {
+        icon.innerHTML = '<polyline points="9 18 15 12 9 6"></polyline>';
+      }
+    });
 
-    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 
+    // 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 }
         }));
-    }
+      }
+    });
+  }
 }
 
-customElements.define('task-item', TaskItem);
+customElements.define('timeline-sidebar', TimelineSidebar);

components/timeline-tasks.js

@@ -1,8 +1,7 @@
-class TimelineSidebar extends HTMLElement {
+class TimelineTasks extends HTMLElement {
   connectedCallback() {
     this.attachShadow({ mode: 'open' });
     this.render();
-    this.setupEventListeners();
   }
 
   render() {
@@ -10,202 +9,74 @@ class TimelineSidebar extends HTMLElement {
       <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;
+          height: 100%;
+          width: 300px;
+          position: fixed;
+          right: 0;
+          top: 80px;
           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;
+        
+        h3 {
+          margin-top: 0;
+          color: #f97316;
+          padding-bottom: 1rem;
           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-list {
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
         }
-
-        .task-block {
+        
+        .task-item {
           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;
+          border-radius: 6px;
+          padding: 8px;
+          cursor: grab;
           transition: all 0.2s ease;
         }
-
-        .task-block:hover {
+        
+        .task-item:hover {
           background: #4b5563;
-          transform: scale(1.02);
+          transform: translateX(-4px);
         }
-
-        .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;
+        
+        .task-title {
+          font-size: 14px;
+          margin-bottom: 4px;
         }
-
-        .current-time {
-          background: #ef444420;
-          border-left: 2px solid #ef4444;
+        
+        .task-time {
+          font-size: 12px;
+          color: #9ca3af;
         }
       </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>
+      
+      <h3>Timeline</h3>
+      <div class="task-list" id="timeline-task-list"></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);
-      }
-    });
+  updateTasks(tasks) {
+    const container = this.shadowRoot.getElementById('timeline-task-list');
+    container.innerHTML = tasks.map(task => `
+      <div class="task-item" draggable="true" data-task-id="${task.id}">
+        <div class="task-title">${task.title}</div>
+        <div class="task-time">${formatTime(task.estimatedTime)}</div>
+      </div>
+    `).join('');
   }
 }
 
-customElements.define('timeline-sidebar', TimelineSidebar);
+customElements.define('timeline-tasks', TimelineTasks);
+
+function formatTime(minutes) {
+  const h = Math.floor(minutes / 60);
+  const m = minutes % 60;
+  return `${h}h ${m}m`;
+}

index.html

@@ -1,824 +1,237 @@
+<!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://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></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-timeline" class="nav-btn" data-view="timeline">
+                        <i data-feather="clock"></i> Timeline
+                    </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>
 
-// 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);
-    });
-
-    // 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 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>
+            <!-- Task Lists -->
+            <div class="grid md:grid-cols-2 gap-6">
+                <!-- Open Tasks -->
+                <div class="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>
-            `;
-        }).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' });
-    }
-}
-
-// 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;
-    }
 
-    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>
+                <!-- Completed Tasks -->
+                <div class="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>
                     </div>
-                `).join('')}
+                    <div id="completed-tasks" class="p-4 space-y-3 max-h-96 overflow-y-auto"></div>
+                </div>
             </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);
-    }
-}
-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();
-}
+        <!-- Timeline View -->
+        <div id="timeline-view" class="view">
+            <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
+                <div class="flex items-center justify-between mb-6">
+                    <h2 class="text-xl font-semibold">Timeline - Heute</h2>
+                    <div class="flex items-center space-x-4">
+                        <button id="timeline-now" class="px-4 py-2 bg-orange-500 hover:bg-orange-600 rounded-lg transition">
+                            Jetzt
+                        </button>
+                        <span id="current-time" class="text-lg font-mono"></span>
+                    </div>
+                </div>
+                <div id="timeline-container" class="relative">
+                    <div id="timeline-tasks" class="absolute left-0 top-0 w-64 space-y-2 p-4">
+                        <p class="text-sm text-gray-400">Aufgaben hierher ziehen</p>
+                    </div>
+                    <div id="timeline-hours" class="ml-64 border-l border-gray-600"></div>
+                </div>
+            </div>
+        </div>
 
-// 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();
-    }
-}
+        <!-- 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>
 
-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);
-            }
-        });
-    });
-}
+                    <!-- 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>
 
-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;
-}
+                    <!-- 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>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
 
-// 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 = `
+    <!-- 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">
         <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">
+            <h3 class="text-xl font-semibold mb-4">Aufgabe hinzufügen</h3>
+            <form id="add-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}"
+                    <input id="task-title" type="text" required
                         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)}"
+                        <input id="task-hours" type="number" placeholder="h" min="0" max="24" value="0"
                             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}"
+                        <input id="task-minutes" type="number" placeholder="m" min="0" max="59" step="15" value="30"
                             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" 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>
+                    <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>
                 </div>
-            `;
-    
-    document.body.appendChild(modal);
-    
-    const form = modal.querySelector('#edit-task-form');
-    form.addEventListener('submit', (e) => {
-        e.preventDefault();
-        handleEditTask(taskId);
-        modal.remove();
-    });
-}
+            </form>
+        </div>
+    </div>
 
-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 });
-}
+    <!-- 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-tasks id="timeline-sidebar"></timeline-tasks>
+    <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>

script.js

@@ -1,241 +1,800 @@
-/* Custom styles for TaskForge Pro */
-
-/* Scrollbar styling */
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-::-webkit-scrollbar-track {
-    @apply bg-gray-800;
-}
-
-::-webkit-scrollbar-thumb {
-    @apply bg-gray-600 rounded-full;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    @apply bg-gray-500;
-}
-/* Task hover effects */
-.task-item {
-    @apply relative overflow-hidden;
-    transition: all 0.3s ease;
-    border-left: 4px solid transparent;
-}
-
-.task-item.completed {
-    animation: completeTask 0.6s ease forwards;
+// 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', () => {
+    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;
 }
 
-@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 saveToLocalStorage() {
+    localStorage.setItem('tasks', JSON.stringify(state.tasks));
+    localStorage.setItem('tags', JSON.stringify(state.tags));
+    localStorage.setItem('timeline', JSON.stringify(state.timelineTasks));
 }
 
-.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;
+// 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();
+    }
 }
 
-.task-item:hover .focus-btn {
-    @apply bg-opacity-20;
-    opacity: 1;
-}
+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);
 
-.task-item .focus-btn:hover {
-    @apply bg-opacity-100 text-white;
-}
-.task-item:hover {
-    @apply transform scale-105 shadow-lg;
-}
+    // Focus mode
+    document.getElementById('focus-pause').addEventListener('click', pausePomodoro);
+    document.getElementById('focus-play').addEventListener('click', resumePomodoro);
+    document.getElementById('focus-stop').addEventListener('click', stopPomodoro);
 
-/* Progress bar animation */
-.progress-bar-fill {
-    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+    // Timeline
+    document.getElementById('timeline-now').addEventListener('click', scrollToCurrentTime);
 }
 
-/* Focus mode animations */
-@keyframes pulse {
-    0%, 100% {
-        opacity: 1;
+// 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');
     }
-    50% {
-        opacity: 0.5;
+    
+    if (view === 'timeline') {
+        renderTimeline();
     }
 }
-
-.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;
+// 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;
 }
 
-/* Tag badge styles */
-.tag-badge {
-    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
+function updateTask(taskId, updates) {
+    const task = state.tasks.find(t => t.id === taskId);
+    if (task) {
+        Object.assign(task, updates);
+        saveToLocalStorage();
+        render();
+    }
 }
 
-/* Timeline styles */
-.timeline-hour {
-    @apply relative border-b border-gray-700;
-    min-height: 60px;
-    position: relative;
+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) {
+    const task = state.tasks.find(t => t.id === taskId);
+    if (task) {
+        task.completed = !task.completed;
+        saveToLocalStorage();
+        
+        // Animate task completion
+        const taskElement = document.querySelector(`task-item[task-id="${taskId}"]`);
+        if (taskElement) {
+            taskElement.classList.add('completed');
+            setTimeout(() => {
+                render();
+            }, 600); // Match animation duration
+        } else {
+            render();
+        }
+    }
 }
-.timeline-task-block {
-    @apply absolute rounded-lg cursor-move transition-all;
-    transition: all 0.2s ease;
+// Modal Functions
+function openAddTaskModal() {
+    const modal = document.getElementById('add-task-modal');
+    modal.classList.remove('hidden');
+    renderModalTags();
+    document.getElementById('task-title').focus();
 }
-
-.timeline-task-block: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();
 }
 
-.timeline-task-block.dragging {
-    @apply opacity-50;
+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 = '';
+    }
 }
 
-/* Modal backdrop blur */
-.modal-backdrop {
-    backdrop-filter: blur(4px);
+// 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);
+        });
 }
-
-/* 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;
+    
+    // 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);
+        });
 }
-
-input[type="color"] {
-    @apply cursor-pointer;
+    
+    document.getElementById('open-count').textContent = openTasks.length;
+    document.getElementById('completed-count').textContent = completedTasks.length;
+    
+    // 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 renderTimeline() {
+    if (state.currentView !== 'timeline') return;
+    
+    const container = document.getElementById('timeline-hours');
+    container.innerHTML = '';
+    
+    // Generate hours
+    for (let h = 6; h <= 22; h++) {
+        const hourDiv = document.createElement('div');
+        hourDiv.className = 'timeline-hour relative border-b border-gray-700';
+        hourDiv.dataset.hour = h;
+        hourDiv.style.minHeight = '60px';
+        
+        const timeLabel = document.createElement('span');
+        timeLabel.className = 'absolute -ml-20 mt-2 text-sm text-gray-400 w-16 text-right';
+        timeLabel.textContent = `${h.toString().padStart(2, '0')}:00`;
+        
+        hourDiv.appendChild(timeLabel);
+        container.appendChild(hourDiv);
+    }
+    
+    // Highlight current hour
+    highlightCurrentHour();
+    
+    // Render scheduled tasks
+    renderScheduledTasks();
 }
-
-/* 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;
+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);
 }
-
-.nav-btn.active {
-    @apply text-orange-500 bg-gray-700;
+    }
 }
-
-/* View transitions */
-.view {
-    display: none;
+function renderScheduledTasks() {
+    const today = new Date().toDateString();
+    const scheduledTasks = state.timelineTasks.filter(t => 
+        new Date(t.date).toDateString() === today
+    );
+    
+    scheduledTasks.forEach(task => {
+        const taskData = state.tasks.find(t => t.id === task.taskId);
+        if (!taskData) return;
+        
+        const startHour = new Date(task.startTime).getHours();
+        const startMinute = new Date(task.startTime).getMinutes();
+        const duration = taskData.estimatedTime;
+        
+        const hourEl = document.querySelector(`[data-hour="${startHour}"]`);
+        if (hourEl) {
+            const taskEl = document.createElement('div');
+            taskEl.className = 'timeline-task-block';
+            taskEl.style.left = `${(startMinute / 60) * 100}%`;
+            taskEl.style.width = `${(duration / 60) * 100}%`;
+            taskEl.style.backgroundColor = task.tags[0] ? 
+                state.tags.find(t => t.id === task.tags[0])?.color + '20' : '#f9731620';
+            taskEl.textContent = taskData.title;
+            taskEl.draggable = true;
+            
+            hourEl.appendChild(taskEl);
+        }
+    });
+}
+
+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);
+
+    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);
     }
 }
-
-/* Drag and drop styles */
-.drag-over {
-    @apply bg-gray-700 border-2 border-dashed border-orange-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);
 }
 
-/* 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 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();
 }
 
-/* Loading animation */
-.loading {
-    @apply animate-pulse;
+function savePomodoroSettings() {
+    localStorage.setItem('pomodoroWorkTime', document.getElementById('pomodoro-work').value);
+    localStorage.setItem('pomodoroBreakTime', document.getElementById('pomodoro-break').value);
 }
 
-.loading::after {
-    content: '';
-    @apply absolute inset-0 bg-gray-700 rounded-lg;
-    animation: loading 1.5s ease-in-out infinite;
+// Timeline Functions
+function initializeTimeline() {
+    // Initialize timeline sidebar
+    const timelineSidebar = document.createElement('timeline-sidebar');
+    document.body.appendChild(timelineSidebar);
+    
+    // Listen for task drops
+    timelineSidebar.addEventListener('task-dropped', (e) => {
+        const { taskId, hour } = e.detail;
+        scheduleTask(taskId, hour, 0); // Schedule at top of hour
+    });
+
+    // 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');
+    }
 }
 
-@keyframes loading {
-    0% {
-        transform: translateX(-100%);
-    }
-    100% {
-        transform: translateX(100%);
+function handleDragOver(e) {
+    e.preventDefault();
+    
+    if (e.target.classList.contains('timeline-hour')) {
+        e.target.classList.add('drag-over');
     }
 }
-
-/* Task priority indicator */
-.priority-high {
-    @apply border-l-4 border-red-500;
+function handleDrop(e) {
+    e.preventDefault();
+    
+    // Remove drag-over class from all elements
+    document.querySelectorAll('.drag-over').forEach(el => {
+        el.classList.remove('drag-over');
+    });
+    
+    const taskId = e.dataTransfer.getData('text/plain');
+    const hourEl = e.target.closest('.timeline-hour');
+    
+    if (hourEl && taskId) {
+        const hour = parseInt(hourEl.dataset.hour);
+        const rect = hourEl.getBoundingClientRect();
+        const x = e.clientX - rect.left;
+        const hourWidth = rect.width;
+        const minute = Math.floor((x / hourWidth) * 60);
+        
+        scheduleTask(taskId, hour, minute);
+    }
 }
-
-.priority-medium {
-    @apply border-l-4 border-yellow-500;
+function handleDragEnd(e) {
+    e.target.classList.remove('dragging');
+    document.querySelectorAll('.drag-over').forEach(el => {
+        el.classList.remove('drag-over');
+    });
 }
-
-.priority-low {
-    @apply border-l-4 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()
+    });
+    
+    saveToLocalStorage();
+    renderTimeline();
 }
-
-/* 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);
+// Utilities
+function formatTime(minutes) {
+    const h = Math.floor(minutes / 60);
+    const m = minutes % 60;
+    return `${h}h${m > 0 ? ` ${m}m` : ''}`;
 }
 
-/* Smooth transitions for all interactive elements */
-* {
-    transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
+// Request notification permission
+if ('Notification' in window && Notification.permission === 'default') {
+    Notification.requestPermission();
 }

style.css

@@ -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;
+}