Spaces:

Multimedix
/

aufgabenmeister

Running

App Files Files Community

Multimedix commited on Nov 18, 2025

Commit

edf2ad8

verified ·

1 Parent(s): 7fe6316

Todo-tool in Deutsch

Browse files

Files changed (2) hide show

README.md +8 -5
index.html +236 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Aufgabenmeister
-emoji: 🚀
-colorFrom: indigo
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: AufgabenMeister 📝
+colorFrom: gray
+colorTo: yellow
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

index.html CHANGED Viewed

@@ -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="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="description" content="Dein ultimativer Todo-Tool zur Verwaltung deiner Aufgaben">
+    <title>AufgabenMeister - Dein Todo-Tool</title>
+    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>📝</text></svg>">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body class="min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-gray-900 dark:to-gray-800 transition-colors duration-300">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8 max-w-4xl" x-data="todoApp()">
+        <header class="text-center mb-12">
+            <h1 class="text-4xl md:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-violet-600 dark:from-indigo-400 dark:to-violet-400 mb-4">
+                AufgabenMeister
+            </h1>
+            <p class="text-slate-600 dark:text-slate-300 text-lg max-w-2xl mx-auto leading-relaxed">
+                Verwalte deine Aufgaben effizient und bleibe organisiert. Einfach, elegant und leistungsstark.
+            </p>
+        </header>
+        <!-- Eingabebereich -->
+        <section class="mb-8 transform transition-all duration-300 hover:scale-105">
+            <div class="glass-card rounded-2xl shadow-2xl p-6">
+                <form @submit.prevent="addTodo()" class="flex flex-col md:flex-row gap-4">
+                    <input
+                        type="text"
+                        x-model="newTodo"
+                        placeholder="Was möchtest du erledigen?"
+                        class="flex-1 px-4 py-3 rounded-lg bg-white dark:bg-gray-800 border-2 border-slate-200 dark:border-gray-700 text-slate-800 dark:text-slate-200 focus:outline-none focus:border-indigo-500 dark:focus:border-indigo-400 transition-colors duration-200"
+                        aria-label="Neue Aufgabe eingeben"
+                    >
+                    <button
+                        type="submit"
+                        class="flex items-center justify-center gap-2 px-6 py-3 bg-gradient-to-r from-indigo-600 to-violet-600 hover:from-indigo-700 hover:to-violet-700 text-white font-semibold rounded-lg transition-all duration-200 transform hover:scale-105 active:scale-95 shadow-lg"
+                    >
+                        <i data-feather="plus-circle" class="w-5 h-5"></i>
+                        Hinzufügen
+                    </button>
+                </form>
+            </div>
+        </section>
+        <!-- Filter und Statistiken -->
+        <section class="mb-8">
+            <div class="glass-card rounded-xl shadow-lg p-4">
+                <div class="flex flex-col md:flex-row justify-between items-center gap-4">
+                    <!-- Statistiken -->
+                    <div class="flex gap-6 text-sm">
+                        <div class="flex items-center gap-2">
+                            <i data-feather="check-circle" class="w-4 h-4 text-emerald-500"></i>
+                            <span class="text-slate-600 dark:text-slate-300">
+                                <span x-text="completedCount" class="font-bold"></span> erledigt
+                            </span>
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <i data-feather="circle" class="w-4 h-4 text-amber-500"></i>
+                            <span class="text-slate-600 dark:text-slate-300">
+                                <span x-text="activeCount" class="font-bold"></span> offen
+                            </span>
+                        </div>
+                        <div class="flex items-center gap-2">
+                            <i data-feather="list" class="w-4 h-4 text-indigo-500"></i>
+                            <span class="text-slate-600 dark:text-slate-300">
+                                <span x-text="totalCount" class="font-bold"></span> gesamt
+                            </span>
+                        </div>
+                    </div>
+                    <!-- Filter -->
+                    <div class="flex gap-2">
+                        <button
+                            @click="filter = 'all'"
+                            :class="filter === 'all' ? 'bg-indigo-600 text-white' : 'bg-slate-200 dark:bg-gray-700 text-slate-700 dark:text-slate-300'"
+                            class="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 transform hover:scale-105"
+                        >
+                            Alle
+                        </button>
+                        <button
+                            @click="filter = 'active'"
+                            :class="filter === 'active' ? 'bg-amber-500 text-white' : 'bg-slate-200 dark:bg-gray-700 text-slate-700 dark:text-slate-300'"
+                            class="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 transform hover:scale-105"
+                        >
+                            Offen
+                        </button>
+                        <button
+                            @click="filter = 'completed'"
+                            :class="filter === 'completed' ? 'bg-emerald-500 text-white' : 'bg-slate-200 dark:bg-gray-700 text-slate-700 dark:text-slate-300'"
+                            class="px-4 py-2 rounded-lg text-sm font-medium transition-all duration-200 transform hover:scale-105"
+                        >
+                            Erledigt
+                        </button>
+                        <button
+                            @click="clearCompleted()"
+                            x-show="completedCount > 0"
+                            class="px-4 py-2 bg-red-500 hover:bg-red-600 text-white rounded-lg text-sm font-medium transition-all duration-200 transform hover:scale-105"
+                        >
+                            Erledigte löschen
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+        <!-- Todo-Liste -->
+        <section>
+            <div class="space-y-4" x-show="filteredTodos.length > 0">
+                <template x-for="(todo, index) in filteredTodos" :key="todo.id">
+                    <div
+                        class="glass-card rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-102"
+                        :class="{
+                            'opacity-60 line-through': todo.completed,
+                            'border-l-4 border-indigo-500': !todo.completed,
+                            'border-l-4 border-emerald-500': todo.completed
+                        }"
+                    >
+                        <div class="flex flex-col md:flex-row gap-4 items-start md:items-center">
+                            <!-- Checkbox -->
+                            <button
+                                @click="toggleTodo(todo.id)"
+                                class="flex-shrink-0 w-6 h-6 rounded-full border-2 flex items-center justify-center transition-all duration-200"
+                                :class="{
+                                    'border-indigo-500 bg-indigo-500': todo.completed,
+                                    'border-slate-300 dark:border-gray-600 hover:border-indigo-400': !todo.completed
+                                }"
+                                :aria-label="todo.completed ? 'Aufgabe als unerledigt markieren' : 'Aufgabe als erledigt markieren'"
+                            >
+                                <i data-feather="check" class="w-4 h-4 text-white" x-show="todo.completed"></i>
+                            </button>
+                            <!-- Todo Text -->
+                            <div class="flex-1" :class="{'cursor-pointer': !editingId}" @click="!editingId && toggleTodo(todo.id)">
+                                <h3
+                                    class="text-lg font-semibold text-slate-800 dark:text-slate-200 transition-colors duration-200"
+                                    x-text="todo.text"
+                                    x-show="editingId !== todo.id"
+                                ></h3>
+                                <input
+                                    type="text"
+                                    x-show="editingId === todo.id"
+                                    x-model="editingText"
+                                    @keyup.enter="saveEdit()"
+                                    @keyup.escape="cancelEdit()"
+                                    class="w-full px-3 py-2 rounded-lg bg-white dark:bg-gray-800 border-2 border-indigo-500 text-slate-800 dark:text-slate-200 focus:outline-none"
+                                >
+                                <p class="text-xs text-slate-500 dark:text-slate-400 mt-1" x-text="'Erstellt: ' + formatDate(todo.createdAt)"></p>
+                            </div>
+                            <!-- Aktionen -->
+                            <div class="flex gap-2" x-show="editingId !== todo.id">
+                                <button
+                                    @click="startEdit(todo.id, todo.text)"
+                                    class="p-2 text-slate-600 dark:text-slate-300 hover:text-indigo-600 dark:hover:text-indigo-400 transition-colors duration-200 transform hover:scale-110"
+                                    aria-label="Aufgabe bearbeiten"
+                                >
+                                    <i data-feather="edit-2" class="w-5 h-5"></i>
+                                </button>
+                                <button
+                                    @click="deleteTodo(todo.id)"
+                                    class="p-2 text-slate-600 dark:text-slate-300 hover:text-red-500 dark:hover:text-red-400 transition-colors duration-200 transform hover:scale-110"
+                                    aria-label="Aufgabe löschen"
+                                >
+                                    <i data-feather="trash-2" class="w-5 h-5"></i>
+                                </button>
+                            </div>
+                            <!-- Speichern/Abbrechen -->
+                            <div class="flex gap-2" x-show="editingId === todo.id">
+                                <button
+                                    @click="saveEdit()"
+                                    class="p-2 text-emerald-500 hover:text-emerald-600 transition-colors duration-200 transform hover:scale-110"
+                                    aria-label="Änderungen speichern"
+                                >
+                                    <i data-feather="check-circle" class="w-5 h-5"></i>
+                                </button>
+                                <button
+                                    @click="cancelEdit()"
+                                    class="p-2 text-red-500 hover:text-red-600 transition-colors duration-200 transform hover:scale-110"
+                                    aria-label="Bearbeitung abbrechen"
+                                >
+                                    <i data-feather="x-circle" class="w-5 h-5"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </template>
+            </div>
+            <!-- Leerer Zustand -->
+            <div x-show="filteredTodos.length === 0" class="text-center py-16">
+                <div class="mb-6">
+                    <i data-feather="inbox" class="w-24 h-24 text-slate-300 dark:text-gray-600 mx-auto"></i>
+                </div>
+                <h3 class="text-2xl font-semibold text-slate-600 dark:text-slate-400 mb-2">
+                    <span x-text="filter === 'all' ? 'Keine Aufgaben vorhanden' : filter === 'active' ? 'Keine offenen Aufgaben' : 'Keine erledigten Aufgaben'"></span>
+                </h3>
+                <p class="text-slate-500 dark:text-slate-500">
+                    <span x-text="filter === 'all' ? 'Füge deine erste Aufgabe hinzu, um loszulegen!' : 'Super Arbeit! Du bist auf dem richtigen Weg.'"></span>
+                </p>
+            </div>
+        </section>
+        <!-- Toast-Benachrichtung -->
+        <div
+            x-show="showToast"
+            x-transition
+            class="fixed bottom-8 right-8 glass-card rounded-lg shadow-2xl p-4 bg-emerald-500 text-white transform transition-all"
+            :class="toastType === 'success' ? 'bg-emerald-500' : toastType === 'error' ? 'bg-red-500' : 'bg-indigo-500'"
+        >
+            <div class="flex items-center gap-3">
+                <i data-feather="check" class="w-5 h-5" x-show="toastType === 'success'"></i>
+                <i data-feather="alert-circle" class="w-5 h-5" x-show="toastType === 'error'"></i>
+                <i data-feather="info" class="w-5 h-5" x-show="toastType === 'info'"></i>
+                <span x-text="toastMessage" class="font-medium"></span>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        // Feather Icons initialisieren
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>