Spaces:

Multimedix
/

anycoder-4a987756

Running

App Files Files Community

Multimedix commited on Nov 19, 2025

Commit

a248e91

verified ·

1 Parent(s): b9f9cc1

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +599 -19

index.html CHANGED Viewed

@@ -1,19 +1,599 @@
-<!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>Fokus & Flow - Aufgabenliste mit Spracheingabe</title>
+    <!-- Google Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            /* Light Theme Variables */
+            --bg-color: #f3f4f6;
+            --text-color: #1f2937;
+            --card-bg: #ffffff;
+            --primary-color: #6366f1; /* Indigo */
+            --secondary-color: #a855f7; /* Purple */
+            --accent-color: #10b981; /* Emerald */
+            --danger-color: #ef4444;
+            --border-color: #e5e7eb;
+            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);
+            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            --font-main: 'Outfit', sans-serif;
+        }
+        [data-theme="dark"] {
+            /* Dark Theme Variables */
+            --bg-color: #0f172a;
+            --text-color: #f3f4f6;
+            --card-bg: #1e293b;
+            --primary-color: #818cf8;
+            --secondary-color: #c084fc;
+            --accent-color: #34d399;
+            --danger-color: #f87171;
+            --border-color: #334155;
+            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
+            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3);
+            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3);
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: var(--font-main);
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            transition: var(--transition);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            overflow-x: hidden;
+        }
+        /* --- Header --- */
+        header {
+            background: rgba(255, 255, 255, 0.0);
+            backdrop-filter: blur(10px);
+            padding: 1rem 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            border-bottom: 1px solid var(--border-color);
+            background-color: var(--card-bg);
+        }
+        .logo {
+            font-size: 1.5rem;
+            font-weight: 700;
+            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
+            -webkit-background-clip: text;
+            background-clip: text;
+            color: transparent;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .anycoder-link {
+            font-size: 0.9rem;
+            font-weight: 600;
+            color: var(--text-color);
+            text-decoration: none;
+            padding: 0.5rem 1rem;
+            border-radius: 2rem;
+            background: linear-gradient(90deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
+            border: 1px solid var(--border-color);
+            transition: var(--transition);
+        }
+        .anycoder-link:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-md);
+            background: linear-gradient(90deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2));
+        }
+        .theme-toggle {
+            background: none;
+            border: none;
+            color: var(--text-color);
+            font-size: 1.2rem;
+            cursor: pointer;
+            padding: 0.5rem;
+            border-radius: 50%;
+            transition: var(--transition);
+        }
+        .theme-toggle:hover {
+            background-color: rgba(128, 128, 128, 0.1);
+        }
+        /* --- Main Layout --- */
+        main {
+            flex: 1;
+            padding: 2rem;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+        }
+        .card {
+            background-color: var(--card-bg);
+            border-radius: 1.5rem;
+            padding: 2rem;
+            box-shadow: var(--shadow-md);
+            border: 1px solid var(--border-color);
+            transition: var(--transition);
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            max-width: 700px; /* Centered width */
+            min-height: 600px;
+        }
+        .card:hover {
+            box-shadow: var(--shadow-lg);
+        }
+        h2 {
+            font-size: 1.5rem;
+            margin-bottom: 2rem;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            color: var(--text-color);
+        }
+        .btn {
+            padding: 0.75rem 1.5rem;
+            border-radius: 0.75rem;
+            border: none;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition);
+            font-family: var(--font-main);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 0.5rem;
+            font-size: 1rem;
+        }
+        .btn-primary {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
+            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
+        }
+        .btn-primary:hover {
+            filter: brightness(1.1);
+            box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
+        }
+        .btn-icon {
+            background-color: transparent;
+            border: 1px solid var(--border-color);
+            color: var(--text-color);
+            padding: 0.75rem;
+            width: 50px; /* Fixed width for icon button */
+        }
+        .btn-icon:hover {
+            border-color: var(--primary-color);
+            color: var(--primary-color);
+            background-color: rgba(99, 102, 241, 0.05);
+        }
+        /* Recording Animation */
+        .btn-icon.recording {
+            background-color: var(--danger-color);
+            color: white;
+            border-color: var(--danger-color);
+            animation: pulse 1.5s infinite;
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
+        }
+        /* --- Tasks Section --- */
+        .task-input-group {
+            display: flex;
+            gap: 0.75rem;
+            margin-bottom: 2rem;
+        }
+        .task-input {
+            flex: 1;
+            padding: 1rem;
+            border-radius: 0.75rem;
+            border: 1px solid var(--border-color);
+            background-color: var(--bg-color);
+            color: var(--text-color);
+            outline: none;
+            font-family: var(--font-main);
+            font-size: 1rem;
+            transition: var(--transition);
+        }
+        .task-input:focus {
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
+        }
+        .task-list {
+            list-style: none;
+            overflow-y: auto;
+            flex: 1; /* Fill remaining space */
+            padding-right: 0.5rem;
+        }
+        /* Custom Scrollbar */
+        .task-list::-webkit-scrollbar {
+            width: 6px;
+        }
+        .task-list::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        .task-list::-webkit-scrollbar-thumb {
+            background-color: var(--border-color);
+            border-radius: 20px;
+        }
+        .task-item {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 1rem;
+            background-color: var(--bg-color);
+            border-radius: 1rem;
+            margin-bottom: 0.75rem;
+            border: 1px solid transparent;
+            transition: var(--transition);
+            animation: slideIn 0.3s ease;
+        }
+        @keyframes slideIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .task-item:hover {
+            border-color: var(--primary-color);
+            transform: translateX(4px);
+        }
+        .task-content {
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            flex: 1;
+            cursor: pointer;
+        }
+        .custom-checkbox {
+            width: 24px;
+            height: 24px;
+            border: 2px solid var(--primary-color);
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: var(--transition);
+            flex-shrink: 0;
+        }
+        .task-item.completed .custom-checkbox {
+            background-color: var(--primary-color);
+        }
+        .custom-checkbox i {
+            color: white;
+            font-size: 0.8rem;
+            opacity: 0;
+            transform: scale(0);
+            transition: var(--transition);
+        }
+        .task-item.completed .custom-checkbox i {
+            opacity: 1;
+            transform: scale(1);
+        }
+        .task-text {
+            transition: var(--transition);
+            font-size: 1.05rem;
+            word-break: break-word;
+        }
+        .task-item.completed .task-text {
+            text-decoration: line-through;
+            color: #9ca3af;
+        }
+        .delete-btn {
+            background: none;
+            border: none;
+            color: #9ca3af;
+            cursor: pointer;
+            padding: 0.5rem;
+            margin-left: 0.5rem;
+            transition: var(--transition);
+            border-radius: 0.5rem;
+        }
+        .delete-btn:hover {
+            color: var(--danger-color);
+            background-color: rgba(239, 68, 68, 0.1);
+        }
+        .empty-state {
+            text-align: center;
+            color: #9ca3af;
+            margin-top: 4rem;
+            display: none;
+        }
+        .empty-state i {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+            opacity: 0.5;
+        }
+        /* Footer */
+        footer {
+            text-align: center;
+            padding: 2rem;
+            color: #6b7280;
+            font-size: 0.9rem;
+            margin-top: auto;
+        }
+        /* Mobile Responsiveness */
+        @media (max-width: 640px) {
+            header {
+                flex-direction: column;
+                gap: 1rem;
+            }
+            main {
+                padding: 1rem;
+            }
+            .card {
+                min-height: auto;
+                padding: 1.5rem;
+            }
+            .task-input-group {
+                flex-wrap: wrap;
+            }
+            .task-input {
+                width: 100%;
+                min-width: 100%;
+            }
+            #micBtn, #addTaskBtn {
+                flex: 1;
+            }
+        }
+    </style>
+</head>
+<body>
+    <header>
+        <div class="logo">
+            <i class="fa-solid fa-check-double"></i> Fokus & Flow
+        </div>
+        <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">Built with anycoder</a>
+        <button class="theme-toggle" id="themeToggle" aria-label="Thema wechseln">
+            <i class="fa-solid fa-moon"></i>
+        </button>
+    </header>
+    <main>
+        <!-- Tasks Section (Sole Focus) -->
+        <section class="card tasks-section">
+            <h2><i class="fa-solid fa-list-check" style="color: var(--secondary-color)"></i> Deine Aufgaben</h2>
+            <div class="task-input-group">
+                <input type="text" class="task-input" id="taskInput" placeholder="Was möchtest du erledigen?">
+                <!-- Microphone Button -->
+                <button class="btn btn-icon" id="micBtn" aria-label="Spracheingabe starten">
+                    <i class="fa-solid fa-microphone"></i>
+                </button>
+                <button class="btn btn-primary" id="addTaskBtn">
+                    <i class="fa-solid fa-plus"></i> <span class="btn-text">Hinzufügen</span>
+                </button>
+            </div>
+            <div class="empty-state" id="emptyState">
+                <i class="fa-solid fa-clipboard-list"></i>
+                <p>Keine Aufgaben vorhanden. <br>Füge eine neue Aufgabe hinzu!</p>
+            </div>
+            <ul class="task-list" id="taskList">
+                <!-- Tasks will be added here -->
+            </ul>
+        </section>
+    </main>
+    <footer>
+        &copy; 2023 Fokus & Flow. Alle Rechte vorbehalten.
+    </footer>
+    <script>
+        // --- Theme Logic ---
+        const themeToggle = document.getElementById('themeToggle');
+        const body = document.body;
+        const icon = themeToggle.querySelector('i');
+        // Check local storage
+        if (localStorage.getItem('theme') === 'dark') {
+            body.setAttribute('data-theme', 'dark');
+            icon.classList.replace('fa-moon', 'fa-sun');
+        }
+        themeToggle.addEventListener('click', () => {
+            if (body.getAttribute('data-theme') === 'dark') {
+                body.removeAttribute('data-theme');
+                localStorage.setItem('theme', 'light');
+                icon.classList.replace('fa-sun', 'fa-moon');
+            } else {
+                body.setAttribute('data-theme', 'dark');
+                localStorage.setItem('theme', 'dark');
+                icon.classList.replace('fa-moon', 'fa-sun');
+            }
+        });
+        // --- Task Logic ---
+        const taskInput = document.getElementById('taskInput');
+        const addTaskBtn = document.getElementById('addTaskBtn');
+        const taskList = document.getElementById('taskList');
+        const emptyState = document.getElementById('emptyState');
+        const micBtn = document.getElementById('micBtn');
+        let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
+        function renderTasks() {
+            taskList.innerHTML = '';
+            if (tasks.length === 0) {
+                emptyState.style.display = 'block';
+            } else {
+                emptyState.style.display = 'none';
+            }
+            tasks.forEach((task, index) => {
+                const li = document.createElement('li');
+                li.className = `task-item ${task.completed ? 'completed' : ''}`;
+                li.innerHTML = `
+                    <div class="task-content" onclick="toggleTask(${index})">
+                        <div class="custom-checkbox">
+                            <i class="fa-solid fa-check"></i>
+                        </div>
+                        <span class="task-text">${escapeHtml(task.text)}</span>
+                    </div>
+                    <button class="delete-btn" onclick="deleteTask(${index})" aria-label="Löschen">
+                        <i class="fa-solid fa-trash"></i>
+                    </button>
+                `;
+                taskList.appendChild(li);
+            });
+            localStorage.setItem('tasks', JSON.stringify(tasks));
+        }
+        function addTask() {
+            const text = taskInput.value.trim();
+            if (text) {
+                tasks.push({ text, completed: false });
+                taskInput.value = '';
+                renderTasks();
+                taskInput.focus();
+            }
+        }
+        // Helper to prevent XSS
+        function escapeHtml(text) {
+            const map = {
+                '&': '&amp;',
+                '<': '&lt;',
+                '>': '&gt;',
+                '"': '&quot;',
+                "'": '&#039;'
+            };
+            return text.replace(/[&<>"']/g, function(m) { return map[m]; });
+        }
+        window.toggleTask = (index) => {
+            tasks[index].completed = !tasks[index].completed;
+            renderTasks();
+        };
+        window.deleteTask = (index) => {
+            tasks.splice(index, 1);
+            renderTasks();
+        };
+        addTaskBtn.addEventListener('click', addTask);
+        taskInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') addTask();
+        });
+        // --- Speech Recognition Logic ---
+        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+        if (SpeechRecognition) {
+            const recognition = new SpeechRecognition();
+            recognition.continuous = false;
+            recognition.lang = 'de-DE';
+            recognition.interimResults = false;
+            micBtn.addEventListener('click', () => {
+                if (micBtn.classList.contains('recording')) {
+                    recognition.stop();
+                } else {
+                    recognition.start();
+                }
+            });
+            recognition.onstart = () => {
+                micBtn.classList.add('recording');
+                micBtn.querySelector('i').classList.remove('fa-microphone');
+                micBtn.querySelector('i').classList.add('fa-microphone-lines');
+            };
+            recognition.onend = () => {
+                micBtn.classList.remove('recording');
+                micBtn.querySelector('i').classList.add('fa-microphone');
+                micBtn.querySelector('i').classList.remove('fa-microphone-lines');
+            };
+            recognition.onresult = (event) => {
+                const transcript = event.results[0][0].transcript;
+                // Append if there is already text, otherwise set
+                if (taskInput.value.trim().length > 0) {
+                    taskInput.value += ' ' + transcript;
+                } else {
+                    taskInput.value = transcript;
+                }
+                taskInput.focus();
+            };
+            recognition.onerror = (event) => {
+                console.error('Speech recognition error', event.error);
+                micBtn.classList.remove('recording');
+                alert('Spracherkennung fehlgeschlagen oder keine Berechtigung.');
+            };
+        } else {
+            // Hide mic button if not supported
+            micBtn.style.display = 'none';
+            console.log('Web Speech API not supported in this browser.');
+        }
+        // Initialize
+        renderTasks();
+    </script>
+</body>
+</html>