Spaces:

UnSinnlos
/

touchtask-mobile-first-todo-app

Running

App Files Files Community

UnSinnlos commited on 8 days ago

Commit

fa5264e

verified ·

1 Parent(s): 9edf840

ERGÄNZUNG: Mobile‑Optimierung für Android‑Smartphones

Browse files

Bitte achte zusätzlich explizit auf eine sehr gute Bedienbarkeit auf Android‑Smartphones:

Responsives Layout

Verwende ein vollständig responsives Layout (CSS Flexbox oder Grid).
Nutze sinnvolle Breakpoints (z. B. bei ca. 480 px und 768 px Breite).
Auf schmalen Displays (Smartphones) soll die Seite einspaltig sein:
Die Monate werden untereinander dargestellt.
Jeder Monat kann auf- und zugeklappt werden (Accordion‑Stil), um Scrollen zu reduzieren.

Bedienung per Touch optimieren

Alle interaktiven Elemente (Buttons, Checkboxen, Icons) sollen:
eine ausreichende Größe haben (mind. ca. 40×40 px),
genug Abstand zueinander haben, damit man sie mit dem Finger gut trifft.

Keine Funktionen, die nur per Hover erreichbar sind (kein „nur bei Maus‑Hover sichtbar“).
Inline‑Bearbeitung von Aufgaben soll auch per Tap gut funktionieren.

Typografie & Lesbarkeit

Auf Smartphones:
Mindest‑Schriftgröße ~ 14–16 px,
Zeilenhöhe ausreichend groß (line-height ~ 1.4–1.6),
gute Kontraste (Text klar lesbar gegen den Hintergrund).

Lange Texte automatisch umbrechen; kein horizontales Scrollen.

Navigation & Scrollverhalten

Kein horizontales Scrollen auf mobilen Geräten.
Monate klar getrennt und gut erkennbar.
Optional: Ein fixierter Button oben oder unten, um schnell nach oben zu springen.
Beim Öffnen eines Monats kann automatisch leicht nach unten gescrollt werden, damit der Inhalt sichtbar ist.

Eingabefelder & Buttons

Eingabefelder (z. B. „Aufgabe hinzufügen“) auf Smartphones:
volle Breite oder fast volle Breite nutzen,
ausreichend Innenabstand (padding),
gut lesbare Platzhaltertexte.

Buttons mit klarer Beschriftung in Deutsch (z. B. „Aufgabe hinzufügen“, „Löschen“).

Technische Details für Mobile

Im <head> unbedingt ein passendes Viewport‑Meta‑Tag setzen, z. B.:<meta name="viewport" content="width=device-width, initial-scale=1.0">

Keine Desktop‑spezifischen Elemente verwenden, die auf Mobile nicht funktionieren (z. B. komplexe Drag‑&‑Drop‑Aktionen).
Stelle sicher, dass die Seite ohne externe Build‑Schritte auch auf einem einfachen Android‑Browser (Chrome/Firefox) funktioniert, wenn sie z. B. auf einem kleinen Server oder lokal läuft.

Test & Feinschliff

Erzeuge das CSS so, dass die Seite in der Mobile‑Ansicht der Browser‑Devtools (z. B. Chrome DevTools, Gerät „Pixel 5“ oder ähnlich) gut benutzbar und übersichtlich ist.
Achte besonders darauf, dass:
Aufgabenlisten nicht zu gedrängt wirken,
Buttons und Checkboxen eindeutig erkennbar sind,
kein Inhalt über den Bildschirmrand hinausläuft.

Passe HTML & CSS entsprechend an, damit die gesamte Web‑App sowohl auf Desktop als auch auf Android‑Smartphones einfach, klar und intuitiv nutzbar ist.

Files changed (6) hide show

README.md +8 -5
components/month-accordion.js +131 -0
components/navbar.js +55 -0
index.html +52 -19
script.js +84 -0
style.css +34 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Touchtask Mobile First Todo App
-emoji: 📈
-colorFrom: red
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: TouchTask - Mobile-First Todo App 📱
+colorFrom: blue
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/month-accordion.js ADDED Viewed

	@@ -0,0 +1,131 @@

+class MonthAccordion extends HTMLElement {
+    constructor() {
+        super();
+        this.isOpen = false;
+    }
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.render();
+        this.addEventListener('click', this.toggle.bind(this));
+    }
+    toggle() {
+        this.isOpen = !this.isOpen;
+        this.render();
+    }
+    render() {
+        const month = this.getAttribute('month') || 'Monat';
+        this.shadowRoot.innerHTML = `
+            <style>
+                :host {
+                    display: block;
+                    margin-bottom: 0.5rem;
+                    border-radius: 0.5rem;
+                    overflow: hidden;
+                    background-color: white;
+                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+                }
+                .header {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    padding: 1rem;
+                    cursor: pointer;
+                    user-select: none;
+                }
+                .header:hover {
+                    background-color: rgba(0, 0, 0, 0.02);
+                }
+                .month-name {
+                    font-weight: 600;
+                    font-size: 1.1rem;
+                    color: #1f2937;
+                }
+                .task-count {
+                    background-color: #e5e7eb;
+                    color: #4b5563;
+                    padding: 0.25rem 0.5rem;
+                    border-radius: 9999px;
+                    font-size: 0.75rem;
+                }
+                .content {
+                    padding: 0 1rem;
+                    max-height: 0;
+                    overflow: hidden;
+                    transition: max-height 0.3s ease-out;
+                }
+                .content.open {
+                    max-height: 500px;
+                    padding-bottom: 1rem;
+                }
+                .task-list {
+                    margin-top: 0.5rem;
+                }
+                .add-task-form {
+                    display: flex;
+                    margin-top: 1rem;
+                }
+                .add-task-input {
+                    flex: 1;
+                    padding: 0.75rem;
+                    border: 1px solid #e5e7eb;
+                    border-radius: 0.375rem;
+                    margin-right: 0.5rem;
+                    font-size: 1rem;
+                }
+                .add-task-btn {
+                    background-color: #3b82f6;
+                    color: white;
+                    border: none;
+                    border-radius: 0.375rem;
+                    padding: 0 1rem;
+                    cursor: pointer;
+                }
+                .add-task-btn:hover {
+                    background-color: #2563eb;
+                }
+                .chevron {
+                    transition: transform 0.2s ease;
+                }
+                .chevron.open {
+                    transform: rotate(180deg);
+                }
+            </style>
+            <div class="header">
+                <div class="flex items-center">
+                    <span class="month-name">${month}</span>
+                    <span class="task-count ml-2">5 Aufgaben</span>
+                </div>
+                <div>
+                    <i data-feather="chevron-down" class="chevron ${this.isOpen ? 'open' : ''}"></i>
+                </div>
+            </div>
+            <div class="content ${this.isOpen ? 'open' : ''}">
+                <div class="task-list">
+                    <div class="task-item flex items-center p-4 border-b border-gray-200">
+                        <div class="flex items-center flex-1">
+                            <input type="checkbox" class="task-checkbox w-6 h-6 rounded border-gray-300 text-blue-500 mr-3">
+                            <span class="text-gray-800">Einkaufen gehen</span>
+                        </div>
+                        <button class="delete-task text-gray-400 hover:text-red-500 p-2">
+                            <i data-feather="trash-2" class="w-5 h-5"></i>
+                        </button>
+                    </div>
+                </div>
+                <form class="add-task-form" data-month="${month}">
+                    <input type="text" class="add-task-input" placeholder="Neue Aufgabe..." required>
+                    <button type="submit" class="add-task-btn">Hinzufügen</button>
+                </form>
+            </div>
+        `;
+        if (this.shadowRoot.querySelector('[data-feather]')) {
+            feather.replace();
+        }
+    }
+}
+customElements.define('custom-month-accordion', MonthAccordion);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,55 @@

+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                nav {
+                    background-color: #ffffff;
+                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+                    padding: 1rem;
+                }
+                .container {
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                    max-width: 1200px;
+                    margin: 0 auto;
+                }
+                .logo {
+                    font-weight: bold;
+                    font-size: 1.25rem;
+                    color: #1e40af;
+                }
+                .nav-links {
+                    display: flex;
+                    gap: 1.5rem;
+                }
+                .nav-link {
+                    color: #4b5563;
+                    text-decoration: none;
+                    font-weight: 500;
+                }
+                .nav-link:hover {
+                    color: #1e40af;
+                }
+                @media (max-width: 640px) {
+                    .nav-links {
+                        gap: 1rem;
+                    }
+                }
+            </style>
+            <nav>
+                <div class="container">
+                    <div class="logo">TouchTask</div>
+                    <div class="nav-links">
+                        <a href="#" class="nav-link"><i data-feather="home"></i></a>
+                        <a href="#" class="nav-link"><i data-feather="calendar"></i></a>
+                        <a href="#" class="nav-link"><i data-feather="settings"></i></a>
+                    </div>
+                </div>
+            </nav>
+        `;
+    }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,52 @@
-<!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">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>TouchTask - Mobile Todo App</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>
+    <script src="components/navbar.js"></script>
+    <script src="components/month-accordion.js"></script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-6">
+        <div class="mb-8">
+            <h1 class="text-3xl font-bold text-gray-800 mb-2">Meine Aufgaben</h1>
+            <p class="text-gray-600">Verwalte deine Aufgaben nach Monaten</p>
+        </div>
+        <div class="space-y-4">
+            <custom-month-accordion month="Januar"></custom-month-accordion>
+            <custom-month-accordion month="Februar"></custom-month-accordion>
+            <custom-month-accordion month="März"></custom-month-accordion>
+            <custom-month-accordion month="April"></custom-month-accordion>
+        </div>
+        <div class="fixed bottom-6 right-6">
+            <button class="bg-blue-500 hover:bg-blue-600 text-white rounded-full p-4 shadow-lg transition-colors">
+                <i data-feather="plus"></i>
+            </button>
+        </div>
+    </main>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        document.addEventListener('DOMContentLoaded', function() {
+            // Initialize accordion functionality
+            const accordions = document.querySelectorAll('custom-month-accordion');
+            accordions.forEach(acc => {
+                acc.addEventListener('click', function() {
+                    this.toggle();
+                });
+            });
+        });
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,84 @@

+// Main app functionality
+class TodoApp {
+    constructor() {
+        this.tasks = JSON.parse(localStorage.getItem('tasks')) || {};
+        this.initEventListeners();
+    }
+    initEventListeners() {
+        // Add task form submission
+        document.addEventListener('submit', (e) => {
+            if (e.target.classList.contains('add-task-form')) {
+                e.preventDefault();
+                const input = e.target.querySelector('input');
+                if (input.value.trim()) {
+                    this.addTask(input.value.trim(), e.target.dataset.month);
+                    input.value = '';
+                }
+            }
+        });
+        // Task completion toggle
+        document.addEventListener('click', (e) => {
+            if (e.target.classList.contains('task-checkbox')) {
+                const taskId = e.target.dataset.taskId;
+                const month = e.target.dataset.month;
+                this.toggleTaskCompletion(taskId, month);
+            }
+        });
+    }
+    addTask(text, month) {
+        if (!this.tasks[month]) {
+            this.tasks[month] = [];
+        }
+        const newTask = {
+            id: Date.now().toString(),
+            text,
+            completed: false,
+            createdAt: new Date().toISOString()
+        };
+        this.tasks[month].push(newTask);
+        this.saveTasks();
+        this.renderTask(newTask, month);
+    }
+    toggleTaskCompletion(taskId, month) {
+        const task = this.tasks[month].find(t => t.id === taskId);
+        if (task) {
+            task.completed = !task.completed;
+            this.saveTasks();
+        }
+    }
+    saveTasks() {
+        localStorage.setItem('tasks', JSON.stringify(this.tasks));
+    }
+    renderTask(task, month) {
+        const taskList = document.querySelector(`custom-month-accordion[month="${month}"] .task-list`);
+        if (taskList) {
+            const taskElement = document.createElement('div');
+            taskElement.className = 'task-item flex items-center p-4 border-b border-gray-200';
+            taskElement.innerHTML = `
+                <div class="flex items-center flex-1">
+                    <input type="checkbox" data-task-id="${task.id}" data-month="${month}"
+                           class="task-checkbox w-6 h-6 rounded border-gray-300 text-blue-500 mr-3">
+                    <span class="${task.completed ? 'line-through text-gray-400' : 'text-gray-800'}">${task.text}</span>
+                </div>
+                <button class="delete-task text-gray-400 hover:text-red-500 p-2">
+                    <i data-feather="trash-2" class="w-5 h-5"></i>
+                </button>
+            `;
+            taskList.appendChild(taskElement);
+            feather.replace();
+        }
+    }
+}
+// Initialize the app
+document.addEventListener('DOMContentLoaded', () => {
+    const app = new TodoApp();
+});

style.css CHANGED Viewed

@@ -1,28 +1,44 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
 }

+/* Base styles */
 body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    line-height: 1.6;
 }
+/* Touch-friendly elements */
+button, [role="button"] {
+    min-width: 44px;
+    min-height: 44px;
+    touch-action: manipulation;
 }
+/* Task item styles */
+.task-item {
+    transition: all 0.2s ease;
 }
+.task-item:hover {
+    background-color: rgba(0, 0, 0, 0.02);
 }
+/* Mobile-first adjustments */
+@media (max-width: 480px) {
+    html {
+        font-size: 16px;
+    }
+    .container {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
 }
+/* Accessibility focus styles */
+button:focus, input:focus {
+    outline: 2px solid #3b82f6;
+    outline-offset: 2px;
+}
+/* Scroll behavior */
+html {
+    scroll-behavior: smooth;
+}