Spaces:

Fadikkop
/

taskforge-pro

Running

App Files Files Community

Fadikkop commited on Nov 30, 2025

Commit

3d9c9a5

verified ·

1 Parent(s): ed0e7ff

```sh

Browse files

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

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

```

```html
<body class="bg-gray-900 text-gray-100 min-h-screen">

<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">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-home"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path><polyline points="9 22 9 12 15 12 15 22"></polyline></svg> Übersicht
</button>
<button id="view-settings" class="nav-btn" data-view="settings">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg> Einstellungen
</button>
</nav>
</div>
</div>
</header>

<main class="container mx-auto px-4 py-6">

<div id="home-view" class="view active">

<div id="tag-progress-container" class="mb-6 space-y-3"></div>


<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>


<div class="flex gap-6">

<div class="flex-1 bg-gray-800 rounded-xl shadow-lg">
<div class="p-4 border-b border-gray-700">
<h3 class="text-lg font-semibold flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-circle text-orange-500 mr-2"><circle cx="12" cy="12" r="10"></circle></svg>
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>


<div class="flex-1 bg-gray-800 rounded-xl shadow-lg">
<div class="p-4 border-b border-gray-700">
<h3 class="text-lg font-semibold flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-check-circle text-emerald-500 mr-2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
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>

<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>


<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>


<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">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
</button>
</div>
<div id="tags-list" class="flex flex-wrap gap-2"></div>
</div>


<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>


<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>

Files changed (5) hide show

components/tag-item.js +4 -15
components/task-item.js +6 -95
components/timeline-tasks.js +2 -0
index.html +0 -1
script.js +1 -1

components/tag-item.js CHANGED Viewed

@@ -1,3 +1,4 @@
 // Tag Item Component
 class TagItem extends HTMLElement {
     constructor() {
@@ -67,29 +68,17 @@ class TagItem extends HTMLElement {
                     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) {

 // Tag Item Component
 class TagItem extends HTMLElement {
     constructor() {
                     background-color: rgba(0, 0, 0, 0.1);
                     transform: scale(1.1);
                 }
             </style>
             <div class="tag-content">
                 <span class="tag-name">${tagName}</span>
+                <button class="delete-btn">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
                 </button>
             </div>
         `;
     }
+setupEventListeners() {
         this.shadowRoot.addEventListener('click', (e) => {
             const deleteBtn = e.target.closest('.delete-btn');
             if (deleteBtn) {

components/task-item.js CHANGED Viewed

@@ -1,3 +1,4 @@
 // Task Item Component
 class TaskItem extends HTMLElement {
     constructor() {
@@ -151,83 +152,16 @@ class TaskItem extends HTMLElement {
                     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" ${this.completed ? 'checked' : ''}>
-<span class="task-title">${title}</span>
                 <div class="task-actions">
-                    <button class="focus-btn" title="Pomodoro starten">
-                        <i data-feather="clock"></i>
-                    </button>
-<button class="task-action" title="Bearbeiten">
-                        <i data-feather="edit-2"></i>
                     </button>
                     <button class="task-action" title="Löschen">
-                        <i data-feather="trash-2"></i>
                     </button>
                 </div>
             </div>
@@ -240,22 +174,6 @@ class TaskItem extends HTMLElement {
             <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" 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">Speichern</button>
-                    <button class="btn-small btn-cancel">Abbrechen</button>
-                </div>
-            </div>
         `;
         if (this.completed) {
@@ -263,15 +181,8 @@ class TaskItem extends HTMLElement {
         } 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 target = e.target.closest('button');
             if (target) {

 // Task Item Component
 class TaskItem extends HTMLElement {
     constructor() {
                     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="progress-bar">
                 <div class="progress-fill" style="width: ${progress}%"></div>
             </div>
         `;
         if (this.completed) {
         } else {
             this.classList.remove('completed');
         }
     }
+setupEventListeners() {
         this.shadowRoot.addEventListener('click', (e) => {
             const target = e.target.closest('button');
             if (target) {

components/timeline-tasks.js CHANGED Viewed

	@@ -1 +1,3 @@
1


1
2	+
3	+

index.html CHANGED Viewed

@@ -6,7 +6,6 @@
     <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">

     <title>TaskForge Pro</title>
     <link rel="stylesheet" href="style.css">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/feather-icons"></script>
 </head>
 <body class="bg-gray-900 text-gray-100 min-h-screen">

script.js CHANGED Viewed

@@ -16,7 +16,7 @@ window.state = {
     timelineTasks: []
 };
 // Initialize
-document.addEventListener('DOMContentLoaded', () => {
     loadFromLocalStorage();
     initializeUI();
     setupEventListeners();

     timelineTasks: []
 };
 // Initialize
+document.addEventListener('DOMContentLoaded', function() {
     loadFromLocalStorage();
     initializeUI();
     setupEventListeners();