Spaces:
Running
Running
| <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 - [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> | |
| <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> |