Die drei Seiten werden irgendwie unterteinander angezeigt und nicht richtig ausgeblendet. In der Timeline soll die aktuelle Zeit ersichtlich sein. Stelle sicher, dass Drag-and-Drop der Aufgaben in die Timeline funktioniert. Überlege, was noch zu verbessern ist und verbessere das.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Taskforge Pro
-emoji: 🐢
-colorFrom: pink
-colorTo: purple
+title: TaskForge Pro 🛠️
+colorFrom: gray
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/tag-item.js

@@ -0,0 +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

@@ -0,0 +1,349 @@
+// Task Item Component
+class TaskItem extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({ mode: 'open' });
+    }
+
+    connectedCallback() {
+        this.render();
+        this.setupEventListeners();
+    }
+
+    static get observedAttributes() {
+        return ['task-id', 'completed'];
+    }
+
+    attributeChangedCallback() {
+        this.render();
+    }
+
+    render() {
+        const taskId = this.getAttribute('task-id');
+        const completed = this.getAttribute('completed') === 'true';
+        
+        if (!this.task) {
+            this.shadowRoot.innerHTML = '<div class="loading">Lädt...</div>';
+            return;
+        }
+
+        const { title, estimatedTime, spentTime, tags } = this.task;
+        const progress = (spentTime / estimatedTime) * 100;
+        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;
+                }
+                
+                .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;
+                }
+                
+                .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" ${completed ? 'checked' : ''} 
+                       @change="${this.handleToggleComplete}">
+                <span class="task-title">${title}</span>
+                <div class="task-actions">
+                    <button class="task-action" @click="${this.handleFocus}" title="Fokus-Modus">
+                        <i data-feather="focus"></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="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-${taskId}">
+                <div class="input-group">
+                    <input type="text" value="${title}" id="edit-title-${taskId}" placeholder="Titel">
+                    <input type="number" value="${Math.floor(estimatedTime / 60)}" id="edit-hours-${taskId}" 
+                           placeholder="h" min="0" max="24" style="width: 60px">
+                    <input type="number" value="${estimatedTime % 60}" id="edit-minutes-${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 (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() {
+        this.shadowRoot.addEventListener('click', (e) => {
+            const action = e.target.closest('button')?.getAttribute('@click');
+            if (action) {
+                e.stopPropagation();
+                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) {
+        this.dispatchEvent(new CustomEvent('focus-task', { 
+            detail: { taskId: this.getAttribute('task-id') },
+            bubbles: true 
+        }));
+    }
+
+    handleEdit(e) {
+        const editForm = this.shadowRoot.querySelector('.edit-form');
+        editForm.classList.add('active');
+    }
+
+    handleDelete(e) {
+        if (confirm('Aufgabe wirklich löschen?')) {
+            this.dispatchEvent(new CustomEvent('delete-task', { 
+                detail: { taskId: this.getAttribute('task-id') },
+                bubbles: true 
+            }));
+        }
+    }
+
+    handleSave(e) {
+        const taskId = this.getAttribute('task-id');
+        const title = this.shadowRoot.getElementById(`edit-title-${taskId}`).value;
+        const hours = parseInt(this.shadowRoot.getElementById(`edit-hours-${taskId}`).value) || 0;
+        const minutes = parseInt(this.shadowRoot.getElementById(`edit-minutes-${taskId}`).value) || 0;
+        const estimatedTime = hours * 60 + minutes;
+        
+        this.dispatchEvent(new CustomEvent('update-task', { 
+            detail: { taskId, updates: { title, estimatedTime } },
+            bubbles: true 
+        }));
+    }
+
+    handleCancel(e) {
+        const editForm = this.shadowRoot.querySelector('.edit-form');
+        editForm.classList.remove('active');
+    }
+
+    handleAddTime(e) {
+        const minutes = prompt('Wie viele Minuten willst du hinzufügen?', '15');
+        if (minutes && !isNaN(minutes)) {
+            this.dispatchEvent(new CustomEvent('add-time', { 
+                detail: { 
+                    taskId: this.getAttribute('task-id'), 
+                    minutes: parseInt(minutes) 
+                },
+                bubbles: true 
+            }));
+        }
+    }
+}
+
+customElements.define('task-item', TaskItem);

index.html

@@ -1,19 +1,236 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!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>
+
+            <!-- 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>
+
+                <!-- 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>
+                    <div id="completed-tasks" class="p-4 space-y-3 max-h-96 overflow-y-auto"></div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 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>
+
+        <!-- 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>
+
+                    <!-- 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>
+
+                    <!-- 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>
+
+    <!-- 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 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="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="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="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" 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>
+            </form>
+        </div>
+    </div>
+
+    <!-- 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>
+
+    <script src="components/task-item.js"></script>
+    <script src="components/tag-item.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

@@ -0,0 +1,704 @@
+// TaskForge Pro - Main JavaScript
+
+// State management
+const 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;
+}
+
+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);
+
+    // Timeline
+    document.getElementById('timeline-now').addEventListener('click', scrollToCurrentTime);
+}
+
+// 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);
+    });
+    
+    // Update views
+    document.querySelectorAll('.view').forEach(v => {
+        v.classList.toggle('active', v.id === `${view}-view`);
+    });
+    
+    if (view === 'timeline') {
+        renderTimeline();
+    }
+}
+
+// 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) {
+    const task = state.tasks.find(t => t.id === taskId);
+    if (task) {
+        task.completed = !task.completed;
+        saveToLocalStorage();
+        render();
+    }
+}
+
+// Modal Functions
+function openAddTaskModal() {
+    const modal = document.getElementById('add-task-modal');
+    modal.classList.remove('hidden');
+    renderModalTags();
+}
+
+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 = [];
+    
+    lines.forEach(line => {
+        const match = line.match(/^\s*-\s*\[([ x])\]\s+(.+?)\s*\|\s*(.+?)(?:\s*\|\s*(.+?))?\s*$/);
+        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+)h\s*(?:(\d+)m)?/);
+            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.map(task => `
+            <task-item task-id="${task.id}" completed="false"></task-item>
+        `).join('');
+    }
+    
+    // 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.map(task => `
+            <task-item task-id="${task.id}" completed="true"></task-item>
+        `).join('');
+    }
+    
+    document.getElementById('open-count').textContent = openTasks.length;
+    document.getElementById('completed-count').textContent = completedTasks.length;
+    
+    // Render task components
+    document.querySelectorAll('task-item').forEach(el => {
+        const taskId = el.getAttribute('task-id');
+        const task = state.tasks.find(t => t.id === taskId);
+        if (task) {
+            el.task = task;
+            el.tags = state.tags;
+        }
+    });
+}
+
+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
+    const container = document.getElementById('tag-progress-container');
+    container.innerHTML = state.tags.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">
+                <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" 
+                         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();
+}
+
+function highlightCurrentHour() {
+    const now = new Date();
+    const currentHour = now.getHours();
+    const hourElement = document.querySelector(`.timeline-hour[data-hour="${currentHour}"]`);
+    
+    if (hourElement) {
+        hourElement.classList.add('bg-gray-750');
+        hourElement.classList.remove('bg-gray-800');
+    }
+}
+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' });
+    }
+}
+
+// Focus Mode & Pomodoro
+function enterFocusMode() {
+    const unfinishedTasks = state.tasks.filter(t => !t.completed);
+    if (unfinishedTasks.length === 0) {
+        alert('Keine offenen Aufgaben für den Fokus-Modus!');
+        return;
+    }
+    
+    const task = unfinishedTasks[0]; // Use first incomplete task
+    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 and drop
+    document.addEventListener('dragstart', handleDragStart);
+    document.addEventListener('dragover', handleDragOver);
+    document.addEventListener('drop', handleDrop);
+    document.addEventListener('dragend', handleDragEnd);
+}
+
+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 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);
+    }
+}
+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();
+    renderTimeline();
+}
+// 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();
+}

style.css

@@ -1,28 +1,216 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* 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;
+}
+
+.task-item:hover {
+    @apply transform scale-105 shadow-lg;
+}
+
+/* Progress bar animation */
+.progress-bar-fill {
+    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Focus mode animations */
+@keyframes pulse {
+    0%, 100% {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+.focus-pulse {
+    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+/* Button focus styles */
+.btn:focus {
+    @apply outline-none ring-2 ring-orange-500 ring-offset-2 ring-offset-gray-900;
+}
+
+/* Tag badge styles */
+.tag-badge {
+    @apply inline-flex items-center px-2 py-1 rounded-full text-xs font-medium;
+}
+
+/* Timeline styles */
+.timeline-hour {
+    @apply relative border-b border-gray-700;
+    min-height: 60px;
+}
+
+.timeline-task-block {
+    @apply absolute rounded-lg cursor-move transition-all;
+    transition: all 0.2s ease;
+}
+
+.timeline-task-block:hover {
+    @apply transform scale-105 shadow-lg;
+}
+
+.timeline-task-block.dragging {
+    @apply opacity-50;
+}
+
+/* Modal backdrop blur */
+.modal-backdrop {
+    backdrop-filter: blur(4px);
+}
+
+/* Custom input styles */
+input[type="text"], input[type="number"], textarea, select {
+    @apply bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 text-gray-100;
+    @apply focus:outline-none focus:ring-2 focus:ring-orange-500 focus:border-transparent;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+input[type="color"] {
+    @apply cursor-pointer;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* 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;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.nav-btn.active {
+    @apply text-orange-500 bg-gray-700;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* View transitions */
+.view {
+    @apply hidden;
 }
+
+.view.active {
+    @apply block;
+    animation: fadeIn 0.3s ease-in-out;
+}
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+/* Drag and drop styles */
+.drag-over {
+    @apply bg-gray-700 border-2 border-dashed border-orange-500;
+}
+
+/* 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;
+}
+
+.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;
+    }
+    
+    #timeline-hours {
+        margin-left: 0;
+    }
+    
+    .timeline-task-block {
+        position: relative !important;
+        width: 100% !important;
+        left: 0 !important;
+        top: auto !important;
+    }
+}
+
+/* Loading animation */
+.loading {
+    @apply animate-pulse;
+}
+
+.loading::after {
+    content: '';
+    @apply absolute inset-0 bg-gray-700 rounded-lg;
+    animation: loading 1.5s ease-in-out infinite;
+}
+
+@keyframes loading {
+    0% {
+        transform: translateX(-100%);
+    }
+    100% {
+        transform: translateX(100%);
+    }
+}
+
+/* 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;
+}