Spaces:

akhaliq
/

anycoder-f5f6f813

Running

App Files Files Community

akhaliq HF Staff commited on 10 days ago

Commit

d0c7707

verified ·

1 Parent(s): e401285

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +451 -614

index.html CHANGED Viewed

@@ -3,8 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>TaskFlow - Modern Todo App</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         * {
             margin: 0;
@@ -13,736 +12,585 @@
         }
         :root {
-            --primary: #6366f1;
-            --primary-dark: #4f46e5;
-            --secondary: #8b5cf6;
-            --success: #10b981;
-            --warning: #f59e0b;
-            --danger: #ef4444;
-            --dark: #1f2937;
-            --light: #f3f4f6;
-            --white: #ffffff;
-            --gray: #6b7280;
-            --border: #e5e7eb;
-            --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
-            --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
             --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
-        [data-theme="dark"] {
-            --primary: #818cf8;
-            --primary-dark: #6366f1;
-            --secondary: #a78bfa;
-            --dark: #f3f4f6;
-            --light: #1f2937;
-            --white: #111827;
-            --gray: #9ca3af;
-            --border: #374151;
-            --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
-            --shadow-lg: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
         }
         body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
             min-height: 100vh;
-            color: var(--dark);
-            transition: var(--transition);
-        }
-        .container {
-            max-width: 900px;
-            margin: 0 auto;
-            padding: 2rem;
         }
         header {
-            text-align: center;
-            margin-bottom: 2rem;
-            animation: slideDown 0.5s ease-out;
         }
         .header-content {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 1rem;
         }
-        h1 {
-            color: var(--white);
-            font-size: 2.5rem;
-            font-weight: 700;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
             display: flex;
             align-items: center;
-            gap: 0.5rem;
         }
-        .logo {
-            width: 40px;
-            height: 40px;
-            background: var(--white);
-            border-radius: 10px;
             display: flex;
             align-items: center;
             justify-content: center;
-            color: var(--primary);
-            font-size: 1.5rem;
         }
         .header-actions {
             display: flex;
-            gap: 1rem;
         }
         .theme-toggle {
-            background: var(--white);
-            border: none;
             width: 40px;
             height: 40px;
-            border-radius: 50%;
-            cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 1.2rem;
-            color: var(--primary);
             transition: var(--transition);
-            box-shadow: var(--shadow);
         }
         .theme-toggle:hover {
-            transform: scale(1.1);
-            box-shadow: var(--shadow-lg);
-        }
-        .main-card {
-            background: var(--white);
-            border-radius: 20px;
-            padding: 2rem;
-            box-shadow: var(--shadow-lg);
-            animation: fadeIn 0.6s ease-out;
-        }
-        .stats {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-            gap: 1rem;
-            margin-bottom: 2rem;
-        }
-        .stat-card {
-            background: var(--light);
-            padding: 1rem;
-            border-radius: 10px;
-            text-align: center;
-            transition: var(--transition);
         }
-        .stat-card:hover {
-            transform: translateY(-2px);
-            box-shadow: var(--shadow);
-        }
-        .stat-number {
-            font-size: 2rem;
-            font-weight: 700;
-            color: var(--primary);
         }
-        .stat-label {
-            color: var(--gray);
-            font-size: 0.875rem;
-            margin-top: 0.25rem;
         }
-        .add-todo-section {
-            margin-bottom: 2rem;
         }
-        .add-todo-form {
-            display: grid;
-            gap: 1rem;
         }
-        .input-group {
             display: flex;
-            gap: 0.5rem;
-            flex-wrap: wrap;
         }
-        .input-field {
             flex: 1;
-            min-width: 200px;
-            padding: 0.75rem 1rem;
-            border: 2px solid var(--border);
-            border-radius: 10px;
-            font-size: 1rem;
             transition: var(--transition);
-            background: var(--light);
-            color: var(--dark);
-        }
-        .input-field:focus {
             outline: none;
-            border-color: var(--primary);
-            background: var(--white);
-        }
-        .select-field {
-            padding: 0.75rem 1rem;
-            border: 2px solid var(--border);
-            border-radius: 10px;
-            font-size: 1rem;
-            background: var(--light);
-            color: var(--dark);
-            cursor: pointer;
-            transition: var(--transition);
         }
-        .select-field:focus {
-            outline: none;
-            border-color: var(--primary);
         }
-        .btn {
-            padding: 0.75rem 1.5rem;
             border: none;
-            border-radius: 10px;
-            font-size: 1rem;
             font-weight: 600;
             cursor: pointer;
             transition: var(--transition);
-            display: inline-flex;
             align-items: center;
-            gap: 0.5rem;
-        }
-        .btn-primary {
-            background: var(--primary);
-            color: var(--white);
         }
-        .btn-primary:hover {
-            background: var(--primary-dark);
             transform: translateY(-2px);
-            box-shadow: var(--shadow-lg);
-        }
-        .btn-secondary {
-            background: var(--gray);
-            color: var(--white);
-        }
-        .btn-danger {
-            background: var(--danger);
-            color: var(--white);
         }
-        .btn-sm {
-            padding: 0.5rem 1rem;
-            font-size: 0.875rem;
         }
-        .filter-section {
             display: flex;
-            gap: 0.5rem;
-            margin-bottom: 1.5rem;
-            flex-wrap: wrap;
-        }
-        .filter-btn {
-            padding: 0.5rem 1rem;
-            border: 2px solid var(--border);
-            background: var(--white);
-            color: var(--gray);
-            border-radius: 20px;
-            cursor: pointer;
-            transition: var(--transition);
-            font-weight: 500;
         }
-        .filter-btn:hover {
-            border-color: var(--primary);
-            color: var(--primary);
-        }
-        .filter-btn.active {
-            background: var(--primary);
-            color: var(--white);
-            border-color: var(--primary);
-        }
-        .search-box {
-            position: relative;
             flex: 1;
-            max-width: 300px;
-        }
-        .search-input {
-            width: 100%;
-            padding: 0.5rem 1rem 0.5rem 2.5rem;
-            border: 2px solid var(--border);
-            border-radius: 20px;
-            background: var(--light);
             transition: var(--transition);
         }
-        .search-input:focus {
-            outline: none;
-            border-color: var(--primary);
-            background: var(--white);
         }
-        .search-icon {
-            position: absolute;
-            left: 0.75rem;
-            top: 50%;
-            transform: translateY(-50%);
-            color: var(--gray);
         }
-        .todos-container {
             max-height: 500px;
             overflow-y: auto;
-            padding-right: 0.5rem;
         }
-        .todos-container::-webkit-scrollbar {
-            width: 8px;
         }
-        .todos-container::-webkit-scrollbar-track {
-            background: var(--light);
-            border-radius: 10px;
         }
-        .todos-container::-webkit-scrollbar-thumb {
-            background: var(--gray);
-            border-radius: 10px;
         }
         .todo-item {
-            background: var(--light);
-            border-radius: 10px;
-            padding: 1rem;
-            margin-bottom: 0.75rem;
             display: flex;
             align-items: center;
-            gap: 1rem;
             transition: var(--transition);
-            animation: slideIn 0.3s ease-out;
-        }
-        .todo-item:hover {
-            transform: translateX(5px);
-            box-shadow: var(--shadow);
         }
-        .todo-item.completed {
-            opacity: 0.6;
         }
-        .todo-item.completed .todo-text {
-            text-decoration: line-through;
-            color: var(--gray);
         }
         .todo-checkbox {
             width: 24px;
             height: 24px;
-            border: 2px solid var(--primary);
             border-radius: 50%;
             cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
             transition: var(--transition);
             flex-shrink: 0;
         }
         .todo-checkbox:hover {
-            background: var(--primary);
-            color: var(--white);
         }
         .todo-checkbox.checked {
-            background: var(--primary);
-            color: var(--white);
         }
-        .todo-content {
-            flex: 1;
-        }
-        .todo-header {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            margin-bottom: 0.25rem;
         }
         .todo-text {
-            font-size: 1rem;
-            color: var(--dark);
             flex: 1;
         }
-        .todo-category {
-            padding: 0.25rem 0.5rem;
-            border-radius: 5px;
-            font-size: 0.75rem;
-            font-weight: 600;
-            text-transform: uppercase;
-        }
-        .category-work {
-            background: var(--primary);
-            color: var(--white);
-        }
-        .category-personal {
-            background: var(--success);
-            color: var(--white);
-        }
-        .category-shopping {
-            background: var(--warning);
-            color: var(--white);
-        }
-        .category-health {
-            background: var(--danger);
-            color: var(--white);
-        }
-        .priority-badge {
-            padding: 0.25rem 0.5rem;
-            border-radius: 5px;
-            font-size: 0.75rem;
-            font-weight: 600;
-        }
-        .priority-high {
-            background: var(--danger);
-            color: var(--white);
-        }
-        .priority-medium {
-            background: var(--warning);
-            color: var(--white);
         }
-        .priority-low {
-            background: var(--success);
-            color: var(--white);
         }
-        .todo-meta {
             display: flex;
-            align-items: center;
-            gap: 1rem;
-            font-size: 0.875rem;
-            color: var(--gray);
         }
-        .todo-actions {
-            display: flex;
-            gap: 0.5rem;
         }
         .action-btn {
             width: 32px;
             height: 32px;
             border: none;
-            background: var(--white);
-            color: var(--gray);
-            border-radius: 8px;
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
             transition: var(--transition);
         }
         .action-btn:hover {
-            color: var(--primary);
             transform: scale(1.1);
         }
-        .action-btn.delete:hover {
-            color: var(--danger);
-        }
         .empty-state {
             text-align: center;
-            padding: 3rem;
-            color: var(--gray);
         }
         .empty-icon {
-            font-size: 4rem;
-            margin-bottom: 1rem;
             opacity: 0.5;
         }
-        .footer-actions {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-top: 2rem;
-            padding-top: 1rem;
-            border-top: 2px solid var(--border);
         }
-        .progress-bar {
-            flex: 1;
-            height: 8px;
-            background: var(--light);
-            border-radius: 10px;
-            overflow: hidden;
-            margin-right: 1rem;
         }
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, var(--primary), var(--secondary));
-            border-radius: 10px;
-            transition: width 0.5s ease;
         }
-        @keyframes slideDown {
-            from {
-                opacity: 0;
-                transform: translateY(-20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateY(0);
-            }
         }
-        @keyframes fadeIn {
-            from {
-                opacity: 0;
-            }
-            to {
-                opacity: 1;
-            }
         }
-        @keyframes slideIn {
-            from {
-                opacity: 0;
-                transform: translateX(-20px);
-            }
-            to {
-                opacity: 1;
-                transform: translateX(0);
-            }
         }
-        @media (max-width: 768px) {
-            .container {
-                padding: 1rem;
-            }
-            h1 {
-                font-size: 2rem;
-            }
-            .main-card {
-                padding: 1.5rem;
-            }
-            .stats {
-                grid-template-columns: repeat(2, 1fr);
             }
-            .filter-section {
                 flex-direction: column;
             }
-            .search-box {
-                max-width: 100%;
             }
-            .footer-actions {
-                flex-direction: column;
-                gap: 1rem;
             }
-            .progress-bar {
-                width: 100%;
-                margin-right: 0;
             }
         }
     </style>
 </head>
 <body>
-    <div class="container">
-        <header>
-            <div class="header-content">
-                <h1>
-                    <div class="logo">
-                        <i class="fas fa-tasks"></i>
-                    </div>
-                    TaskFlow
-                </h1>
-                <div class="header-actions">
-                    <button class="theme-toggle" onclick="toggleTheme()">
-                        <i class="fas fa-moon" id="themeIcon"></i>
-                    </button>
-                </div>
             </div>
-            <p style="color: white; opacity: 0.9;">Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" style="color: white; text-decoration: underline;" target="_blank">anycoder</a></p>
-        </header>
-        <main class="main-card">
-            <section class="stats">
-                <div class="stat-card">
-                    <div class="stat-number" id="totalTasks">0</div>
-                    <div class="stat-label">Total Tasks</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-number" id="completedTasks">0</div>
-                    <div class="stat-label">Completed</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-number" id="pendingTasks">0</div>
-                    <div class="stat-label">Pending</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-number" id="todayTasks">0</div>
-                    <div class="stat-label">Due Today</div>
                 </div>
-            </section>
-            <section class="add-todo-section">
-                <form class="add-todo-form" onsubmit="addTodo(event)">
-                    <div class="input-group">
-                        <input type="text" class="input-field" id="todoInput" placeholder="What needs to be done?" required>
-                        <select class="select-field" id="categorySelect">
-                            <option value="work">Work</option>
-                            <option value="personal">Personal</option>
-                            <option value="shopping">Shopping</option>
-                            <option value="health">Health</option>
-                        </select>
-                        <select class="select-field" id="prioritySelect">
-                            <option value="low">Low Priority</option>
-                            <option value="medium">Medium Priority</option>
-                            <option value="high">High Priority</option>
-                        </select>
-                        <input type="date" class="input-field" id="dueDateInput" style="max-width: 200px;">
-                        <button type="submit" class="btn btn-primary">
-                            <i class="fas fa-plus"></i>
-                            Add Task
-                        </button>
-                    </div>
-                </form>
-            </section>
-            <section class="filter-section">
-                <button class="filter-btn active" onclick="filterTodos('all')">All</button>
-                <button class="filter-btn" onclick="filterTodos('active')">Active</button>
-                <button class="filter-btn" onclick="filterTodos('completed')">Completed</button>
-                <div class="search-box">
-                    <i class="fas fa-search search-icon"></i>
-                    <input type="text" class="search-input" placeholder="Search tasks..." oninput="searchTodos(this.value)">
                 </div>
-            </section>
-            <section class="todos-container" id="todosContainer">
                 <div class="empty-state">
-                    <div class="empty-icon">
-                        <i class="fas fa-clipboard-list"></i>
-                    </div>
-                    <p>No tasks yet. Add your first task above!</p>
                 </div>
-            </section>
-            <footer class="footer-actions">
-                <div style="display: flex; align-items: center; flex: 1;">
-                    <div class="progress-bar">
-                        <div class="progress-fill" id="progressBar" style="width: 0%"></div>
-                    </div>
-                    <span id="progressText" style="color: var(--gray); font-size: 0.875rem;">0% Complete</span>
                 </div>
-                <button class="btn btn-danger btn-sm" onclick="clearCompleted()">
-                    <i class="fas fa-trash"></i>
-                    Clear Completed
-                </button>
-            </footer>
-        </main>
-    </div>
     <script>
-        let todos = [];
         let currentFilter = 'all';
-        let searchTerm = '';
-        // Initialize app
-        document.addEventListener('DOMContentLoaded', () => {
-            loadTodos();
-            renderTodos();
-            updateStats();
-            // Set today's date as default
-            const today = new Date().toISOString().split('T')[0];
-            document.getElementById('dueDateInput').value = today;
-            // Check for saved theme
-            const savedTheme = localStorage.getItem('theme') || 'light';
-            if (savedTheme === 'dark') {
-                document.documentElement.setAttribute('data-theme', 'dark');
-                document.getElementById('themeIcon').className = 'fas fa-sun';
-            }
-        });
-        function toggleTheme() {
-            const currentTheme = document.documentElement.getAttribute('data-theme');
-            const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
-            document.documentElement.setAttribute('data-theme', newTheme);
-            localStorage.setItem('theme', newTheme);
-            const icon = document.getElementById('themeIcon');
-            icon.className = newTheme === 'dark' ? 'fas fa-sun' : 'fas fa-moon';
         }
-        function addTodo(event) {
-            event.preventDefault();
             const input = document.getElementById('todoInput');
-            const category = document.getElementById('categorySelect').value;
-            const priority = document.getElementById('prioritySelect').value;
-            const dueDate = document.getElementById('dueDateInput').value;
             const todo = {
-                id: Date.now(),
-                text: input.value.trim(),
-                category: category,
-                priority: priority,
-                dueDate: dueDate,
                 completed: false,
                 createdAt: new Date().toISOString()
             };
             todos.unshift(todo);
             saveTodos();
             renderTodos();
-            updateStats();
-            // Reset form
             input.value = '';
-            const today = new Date().toISOString().split('T')[0];
-            document.getElementById('dueDateInput').value = today;
-            // Show success animation
-            input.style.borderColor = 'var(--success)';
-            setTimeout(() => {
-                input.style.borderColor = '';
-            }, 1000);
         }
         function toggleTodo(id) {
@@ -751,7 +599,6 @@
                 todo.completed = !todo.completed;
                 saveTodos();
                 renderTodos();
-                updateStats();
             }
         }
@@ -759,149 +606,139 @@
             todos = todos.filter(t => t.id !== id);
             saveTodos();
             renderTodos();
-            updateStats();
         }
-        function editTodo(id) {
             const todo = todos.find(t => t.id === id);
             if (todo) {
-                const newText = prompt('Edit task:', todo.text);
-                if (newText && newText.trim()) {
-                    todo.text = newText.trim();
                     saveTodos();
-                    renderTodos();
                 }
             }
         }
         function filterTodos(filter) {
             currentFilter = filter;
-            // Update active button
-            document.querySelectorAll('.filter-btn').forEach(btn => {
-                btn.classList.remove('active');
             });
             event.target.classList.add('active');
             renderTodos();
         }
-        function searchTodos(term) {
-            searchTerm = term.toLowerCase();
             renderTodos();
         }
         function getFilteredTodos() {
-            let filtered = todos;
-            // Apply filter
-            if (currentFilter === 'active') {
-                filtered = filtered.filter(t => !t.completed);
-            } else if (currentFilter === 'completed') {
-                filtered = filtered.filter(t => t.completed);
-            }
-            // Apply search
-            if (searchTerm) {
-                filtered = filtered.filter(t =>
-                    t.text.toLowerCase().includes(searchTerm) ||
-                    t.category.toLowerCase().includes(searchTerm)
-                );
             }
-            return filtered;
         }
         function renderTodos() {
-            const container = document.getElementById('todosContainer');
             const filteredTodos = getFilteredTodos();
             if (filteredTodos.length === 0) {
-                container.innerHTML = `
                     <div class="empty-state">
-                        <div class="empty-icon">
-                            <i class="fas fa-clipboard-list"></i>
-                        </div>
-                        <p>${searchTerm ? 'No tasks found matching your search.' : 'No tasks yet. Add your first task above!'}</p>
                     </div>
                 `;
                 return;
             }
-            container.innerHTML = filteredTodos.map(todo => {
-                const isOverdue = todo.dueDate && new Date(todo.dueDate) < new Date() && !todo.completed;
-                const dueDateFormatted = todo.dueDate ? new Date(todo.dueDate).toLocaleDateString() : '';
-                return `
-                    <div class="todo-item ${todo.completed ? 'completed' : ''}" style="${isOverdue ? 'border-left: 4px solid var(--danger);' : ''}">
-                        <div class="todo-checkbox ${todo.completed ? 'checked' : ''}" onclick="toggleTodo(${todo.id})">
-                            ${todo.completed ? '<i class="fas fa-check"></i>' : ''}
-                        </div>
-                        <div class="todo-content">
-                            <div class="todo-header">
-                                <span class="todo-text">${todo.text}</span>
-                                <span class="todo-category category-${todo.category}">${todo.category}</span>
-                                <span class="priority-badge priority-${todo.priority}">${todo.priority}</span>
-                            </div>
-                            <div class="todo-meta">
-                                ${todo.dueDate ? `
-                                    <span style="${isOverdue ? 'color: var(--danger);' : ''}">
-                                        <i class="fas fa-calendar"></i> ${dueDateFormatted}
-                                        ${isOverdue ? ' (Overdue)' : ''}
-                                    </span>
-                                ` : ''}
-                            </div>
-                        </div>
-                        <div class="todo-actions">
-                            <button class="action-btn" onclick="editTodo(${todo.id})">
-                                <i class="fas fa-edit"></i>
-                            </button>
-                            <button class="action-btn delete" onclick="deleteTodo(${todo.id})">
-                                <i class="fas fa-trash"></i>
-                            </button>
-                        </div>
                     </div>
-                `;
-            }).join('');
         }
         function updateStats() {
             const total = todos.length;
             const completed = todos.filter(t => t.completed).length;
-            const pending = total - completed;
-            const today = new Date().toISOString().split('T')[0];
-            const dueToday = todos.filter(t => t.dueDate === today && !t.completed).length;
             document.getElementById('totalTasks').textContent = total;
             document.getElementById('completedTasks').textContent = completed;
-            document.getElementById('pendingTasks').textContent = pending;
-            document.getElementById('todayTasks').textContent = dueToday;
-            // Update progress bar
-            const progress = total > 0 ? Math.round((completed / total) * 100) : 0;
-            document.getElementById('progressBar').style.width = `${progress}%`;
-            document.getElementById('progressText').textContent = `${progress}% Complete`;
         }
-        function clearCompleted() {
-            if (confirm('Are you sure you want to clear all completed tasks?')) {
-                todos = todos.filter(t => !t.completed);
-                saveTodos();
-                renderTodos();
-                updateStats();
             }
         }
-        function saveTodos() {
-            localStorage.setItem('todos', JSON.stringify(todos));
-        }
-        function loadTodos() {
-            const saved = localStorage.getItem('todos');
-            if (saved) {
-                todos = JSON.parse(saved);
-            }
-        }
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Todo - Apple Style</title>
     <style>
         * {
             margin: 0;
         }
         :root {
+            --primary-color: #007AFF;
+            --secondary-color: #5856D6;
+            --success-color: #34C759;
+            --danger-color: #FF3B30;
+            --warning-color: #FF9500;
+            --background: #F2F2F7;
+            --surface: #FFFFFF;
+            --text-primary: #1C1C1E;
+            --text-secondary: #8E8E93;
+            --text-tertiary: #C7C7CC;
+            --border-color: #D1D1D6;
+            --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.04);
+            --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.08);
+            --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.12);
+            --radius-sm: 8px;
+            --radius-md: 12px;
+            --radius-lg: 16px;
             --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }
+        @media (prefers-color-scheme: dark) {
+            :root {
+                --background: #000000;
+                --surface: #1C1C1E;
+                --text-primary: #FFFFFF;
+                --text-secondary: #8E8E93;
+                --text-tertiary: #48484A;
+                --border-color: #38383A;
+                --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
+                --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
+                --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
+            }
         }
         body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+            background: var(--background);
+            color: var(--text-primary);
             min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            line-height: 1.6;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
         }
         header {
+            background: var(--surface);
+            backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
+            border-bottom: 1px solid var(--border-color);
+            padding: 20px;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            box-shadow: var(--shadow-sm);
         }
         .header-content {
+            max-width: 800px;
+            margin: 0 auto;
             display: flex;
             justify-content: space-between;
             align-items: center;
         }
+        .logo {
             display: flex;
             align-items: center;
+            gap: 12px;
+            font-size: 24px;
+            font-weight: 600;
+            color: var(--text-primary);
         }
+        .logo-icon {
+            width: 32px;
+            height: 32px;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            border-radius: 8px;
             display: flex;
             align-items: center;
             justify-content: center;
+            color: white;
+            font-size: 20px;
         }
         .header-actions {
             display: flex;
+            gap: 8px;
         }
         .theme-toggle {
+            background: var(--background);
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius-sm);
             width: 40px;
             height: 40px;
             display: flex;
             align-items: center;
             justify-content: center;
+            cursor: pointer;
             transition: var(--transition);
+            font-size: 18px;
         }
         .theme-toggle:hover {
+            background: var(--border-color);
+            transform: scale(1.05);
         }
+        main {
+            flex: 1;
+            padding: 40px 20px;
+            max-width: 800px;
+            width: 100%;
+            margin: 0 auto;
         }
+        .todo-container {
+            background: var(--surface);
+            border-radius: var(--radius-lg);
+            box-shadow: var(--shadow-md);
+            overflow: hidden;
+            animation: slideUp 0.5s ease-out;
         }
+        @keyframes slideUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
         }
+        .todo-header {
+            padding: 24px;
+            border-bottom: 1px solid var(--border-color);
         }
+        .todo-input-wrapper {
             display: flex;
+            gap: 12px;
+            margin-bottom: 20px;
         }
+        .todo-input {
             flex: 1;
+            padding: 14px 16px;
+            border: 2px solid var(--border-color);
+            border-radius: var(--radius-md);
+            font-size: 16px;
+            background: var(--background);
+            color: var(--text-primary);
             transition: var(--transition);
             outline: none;
         }
+        .todo-input:focus {
+            border-color: var(--primary-color);
+            background: var(--surface);
+            box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
         }
+        .add-btn {
+            padding: 14px 24px;
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+            color: white;
             border: none;
+            border-radius: var(--radius-md);
+            font-size: 16px;
             font-weight: 600;
             cursor: pointer;
             transition: var(--transition);
+            display: flex;
             align-items: center;
+            gap: 8px;
+            box-shadow: var(--shadow-sm);
         }
+        .add-btn:hover {
             transform: translateY(-2px);
+            box-shadow: var(--shadow-md);
         }
+        .add-btn:active {
+            transform: translateY(0);
         }
+        .filter-tabs {
             display: flex;
+            gap: 8px;
+            padding: 4px;
+            background: var(--background);
+            border-radius: var(--radius-md);
         }
+        .filter-tab {
             flex: 1;
+            padding: 10px;
+            background: transparent;
+            border: none;
+            border-radius: var(--radius-sm);
+            font-size: 14px;
+            font-weight: 500;
+            color: var(--text-secondary);
+            cursor: pointer;
             transition: var(--transition);
         }
+        .filter-tab.active {
+            background: var(--surface);
+            color: var(--primary-color);
+            box-shadow: var(--shadow-sm);
         }
+        .filter-tab:hover:not(.active) {
+            color: var(--text-primary);
         }
+        .todo-list {
+            min-height: 300px;
             max-height: 500px;
             overflow-y: auto;
+            padding: 16px;
         }
+        .todo-list::-webkit-scrollbar {
+            width: 6px;
         }
+        .todo-list::-webkit-scrollbar-track {
+            background: var(--background);
         }
+        .todo-list::-webkit-scrollbar-thumb {
+            background: var(--border-color);
+            border-radius: 3px;
         }
         .todo-item {
             display: flex;
             align-items: center;
+            gap: 12px;
+            padding: 16px;
+            background: var(--background);
+            border-radius: var(--radius-md);
+            margin-bottom: 8px;
             transition: var(--transition);
+            animation: fadeIn 0.3s ease-out;
         }
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateX(-20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateX(0);
+            }
         }
+        .todo-item:hover {
+            background: var(--surface);
+            box-shadow: var(--shadow-sm);
+            transform: translateX(4px);
         }
         .todo-checkbox {
             width: 24px;
             height: 24px;
+            border: 2px solid var(--border-color);
             border-radius: 50%;
             cursor: pointer;
             transition: var(--transition);
+            position: relative;
             flex-shrink: 0;
         }
         .todo-checkbox:hover {
+            border-color: var(--primary-color);
+            transform: scale(1.1);
         }
         .todo-checkbox.checked {
+            background: var(--success-color);
+            border-color: var(--success-color);
         }
+        .todo-checkbox.checked::after {
+            content: '✓';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: white;
+            font-size: 14px;
+            font-weight: bold;
         }
         .todo-text {
             flex: 1;
+            font-size: 16px;
+            color: var(--text-primary);
+            transition: var(--transition);
+            cursor: text;
+            padding: 4px;
+            border-radius: var(--radius-sm);
+            outline: none;
         }
+        .todo-text.completed {
+            text-decoration: line-through;
+            color: var(--text-tertiary);
         }
+        .todo-text:focus {
+            background: var(--surface);
+            padding: 4px 8px;
         }
+        .todo-actions {
             display: flex;
+            gap: 8px;
+            opacity: 0;
+            transition: var(--transition);
         }
+        .todo-item:hover .todo-actions {
+            opacity: 1;
         }
         .action-btn {
             width: 32px;
             height: 32px;
             border: none;
+            background: var(--surface);
+            border-radius: var(--radius-sm);
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
             transition: var(--transition);
+            color: var(--text-secondary);
         }
         .action-btn:hover {
+            background: var(--danger-color);
+            color: white;
             transform: scale(1.1);
         }
         .empty-state {
             text-align: center;
+            padding: 60px 20px;
+            color: var(--text-secondary);
         }
         .empty-icon {
+            font-size: 64px;
+            margin-bottom: 16px;
             opacity: 0.5;
         }
+        .empty-text {
+            font-size: 18px;
+            margin-bottom: 8px;
+        }
+        .empty-subtext {
+            font-size: 14px;
+            color: var(--text-tertiary);
+        }
+        .todo-footer {
+            padding: 20px;
+            border-top: 1px solid var(--border-color);
             display: flex;
             justify-content: space-between;
             align-items: center;
+            font-size: 14px;
+            color: var(--text-secondary);
         }
+        .todo-count {
+            font-weight: 500;
         }
+        .clear-btn {
+            padding: 8px 16px;
+            background: transparent;
+            border: 1px solid var(--border-color);
+            border-radius: var(--radius-sm);
+            color: var(--text-secondary);
+            cursor: pointer;
+            transition: var(--transition);
+            font-size: 14px;
         }
+        .clear-btn:hover {
+            background: var(--danger-color);
+            border-color: var(--danger-color);
+            color: white;
+            transform: scale(1.05);
         }
+        .stats {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 16px;
+            margin-top: 24px;
         }
+        .stat-card {
+            background: var(--surface);
+            padding: 20px;
+            border-radius: var(--radius-md);
+            text-align: center;
+            box-shadow: var(--shadow-sm);
+            transition: var(--transition);
         }
+        .stat-card:hover {
+            transform: translateY(-4px);
+            box-shadow: var(--shadow-md);
+        }
+        .stat-value {
+            font-size: 32px;
+            font-weight: 600;
+            color: var(--primary-color);
+            margin-bottom: 4px;
+        }
+        .stat-label {
+            font-size: 14px;
+            color: var(--text-secondary);
+        }
+        @media (max-width: 640px) {
+            main {
+                padding: 20px 16px;
             }
+            .todo-input-wrapper {
                 flex-direction: column;
             }
+            .add-btn {
+                width: 100%;
+                justify-content: center;
             }
+            .filter-tabs {
+                flex-wrap: wrap;
             }
+            .stats {
+                grid-template-columns: 1fr;
             }
         }
     </style>
 </head>
 <body>
+    <header>
+        <div class="header-content">
+            <div class="logo">
+                <div class="logo-icon">✓</div>
+                <span>Todo</span>
             </div>
+            <div class="header-actions">
+                <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" style="text-decoration: none; color: var(--text-secondary); font-size: 14px; margin-right: 12px;">
+                    Built with anycoder
+                </a>
+                <button class="theme-toggle" onclick="toggleTheme()">🌙</button>
+            </div>
+        </div>
+    </header>
+    <main>
+        <div class="todo-container">
+            <div class="todo-header">
+                <div class="todo-input-wrapper">
+                    <input
+                        type="text"
+                        class="todo-input"
+                        id="todoInput"
+                        placeholder="What needs to be done?"
+                        onkeypress="handleInputKeypress(event)"
+                    >
+                    <button class="add-btn" onclick="addTodo()">
+                        <span>+</span>
+                        <span>Add</span>
+                    </button>
                 </div>
+                <div class="filter-tabs">
+                    <button class="filter-tab active" onclick="filterTodos('all')">All</button>
+                    <button class="filter-tab" onclick="filterTodos('active')">Active</button>
+                    <button class="filter-tab" onclick="filterTodos('completed')">Completed</button>
                 </div>
+            </div>
+            <div class="todo-list" id="todoList">
                 <div class="empty-state">
+                    <div class="empty-icon">📝</div>
+                    <div class="empty-text">No tasks yet</div>
+                    <div class="empty-subtext">Add your first task to get started</div>
                 </div>
+            </div>
+            <div class="todo-footer">
+                <div class="todo-count">
+                    <span id="activeCount">0</span> active tasks
                 </div>
+                <button class="clear-btn" onclick="clearCompleted()">Clear Completed</button>
+            </div>
+        </div>
+        <div class="stats">
+            <div class="stat-card">
+                <div class="stat-value" id="totalTasks">0</div>
+                <div class="stat-label">Total Tasks</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-value" id="completedTasks">0</div>
+                <div class="stat-label">Completed</div>
+            </div>
+            <div class="stat-card">
+                <div class="stat-value" id="completionRate">0%</div>
+                <div class="stat-label">Completion Rate</div>
+            </div>
+        </div>
+    </main>
     <script>
+        let todos = JSON.parse(localStorage.getItem('todos')) || [];
         let currentFilter = 'all';
+        let editingId = null;
+        function generateId() {
+            return Date.now().toString(36) + Math.random().toString(36).substr(2);
+        }
+        function saveTodos() {
+            localStorage.setItem('todos', JSON.stringify(todos));
+            updateStats();
         }
+        function addTodo() {
             const input = document.getElementById('todoInput');
+            const text = input.value.trim();
+            if (text === '') {
+                input.focus();
+                return;
+            }
             const todo = {
+                id: generateId(),
+                text: text,
                 completed: false,
                 createdAt: new Date().toISOString()
             };
             todos.unshift(todo);
             saveTodos();
             renderTodos();
             input.value = '';
+            input.focus();
+        }
+        function handleInputKeypress(event) {
+            if (event.key === 'Enter') {
+                addTodo();
+            }
         }
         function toggleTodo(id) {
                 todo.completed = !todo.completed;
                 saveTodos();
                 renderTodos();
             }
         }
             todos = todos.filter(t => t.id !== id);
             saveTodos();
             renderTodos();
         }
+        function startEdit(id) {
+            if (editingId && editingId !== id) {
+                finishEdit(editingId);
+            }
+            editingId = id;
             const todo = todos.find(t => t.id === id);
             if (todo) {
+                const textElement = document.querySelector(`[data-id="${id}"] .todo-text`);
+                textElement.contentEditable = true;
+                textElement.focus();
+                // Select all text
+                const range = document.createRange();
+                range.selectNodeContents(textElement);
+                const selection = window.getSelection();
+                selection.removeAllRanges();
+                selection.addRange(range);
+                textElement.addEventListener('blur', () => finishEdit(id));
+                textElement.addEventListener('keypress', (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        textElement.blur();
+                    }
+                });
+            }
+        }
+        function finishEdit(id) {
+            const textElement = document.querySelector(`[data-id="${id}"] .todo-text`);
+            if (textElement) {
+                const newText = textElement.textContent.trim();
+                const todo = todos.find(t => t.id === id);
+                if (todo && newText !== '') {
+                    todo.text = newText;
                     saveTodos();
                 }
+                textElement.contentEditable = false;
             }
+            editingId = null;
         }
         function filterTodos(filter) {
             currentFilter = filter;
+            // Update active tab
+            document.querySelectorAll('.filter-tab').forEach(tab => {
+                tab.classList.remove('active');
             });
             event.target.classList.add('active');
             renderTodos();
         }
+        function clearCompleted() {
+            todos = todos.filter(t => !t.completed);
+            saveTodos();
             renderTodos();
         }
         function getFilteredTodos() {
+            switch (currentFilter) {
+                case 'active':
+                    return todos.filter(t => !t.completed);
+                case 'completed':
+                    return todos.filter(t => t.completed);
+                default:
+                    return todos;
             }
         }
         function renderTodos() {
+            const todoList = document.getElementById('todoList');
             const filteredTodos = getFilteredTodos();
             if (filteredTodos.length === 0) {
+                todoList.innerHTML = `
                     <div class="empty-state">
+                        <div class="empty-icon">${currentFilter === 'completed' ? '🎉' : '📝'}</div>
+                        <div class="empty-text">${currentFilter === 'completed' ? 'All done!' : 'No tasks yet'}</div>
+                        <div class="empty-subtext">${currentFilter === 'completed' ? 'Great job completing everything!' : 'Add your first task to get started'}</div>
                     </div>
                 `;
                 return;
             }
+            todoList.innerHTML = filteredTodos.map(todo => `
+                <div class="todo-item" data-id="${todo.id}">
+                    <div class="todo-checkbox ${todo.completed ? 'checked' : ''}" onclick="toggleTodo('${todo.id}')"></div>
+                    <div class="todo-text ${todo.completed ? 'completed' : ''}" onclick="startEdit('${todo.id}')">${todo.text}</div>
+                    <div class="todo-actions">
+                        <button class="action-btn" onclick="deleteTodo('${todo.id}')">🗑️</button>
                     </div>
+                </div>
+            `).join('');
+            updateActiveCount();
+        }
+        function updateActiveCount() {
+            const activeCount = todos.filter(t => !t.completed).length;
+            document.getElementById('activeCount').textContent = activeCount;
         }
         function updateStats() {
             const total = todos.length;
             const completed = todos.filter(t => t.completed).length;
+            const rate = total > 0 ? Math.round((completed / total) * 100) : 0;
             document.getElementById('totalTasks').textContent = total;
             document.getElementById('completedTasks').textContent = completed;
+            document.getElementById('completionRate').textContent = rate + '%';
         }
+        function toggleTheme() {
+            const body = document.body;
+            const themeToggle = document.querySelector('.theme-toggle');
+            if (body.style.filter === 'invert(1) hue-rotate(180deg)') {
+                body.style.filter = '';
+                themeToggle.textContent = '🌙';
+            } else {
+                body.style.filter = 'invert(1) hue-rotate(180deg)';
+                themeToggle.textContent = '☀️';
             }
         }
+        // Initialize
+        renderTodos();
+        updateStats();
+        document.getElementById('todoInput').focus();
     </script>
 </body>
 </html>