Spaces:

jphermans
/

todo

Running

App Files Files Community

jphermans commited on Jun 30, 2025

Commit

2f5db26

verified ·

1 Parent(s): 52edcec

add also an option for due date/time - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +353 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Todo
-emoji: 👀
-colorFrom: purple
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: todo
+emoji: 🐳
+colorFrom: green
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,353 @@
-<!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="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Modern Todo App</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        /* Custom scrollbar */
+        .custom-scrollbar::-webkit-scrollbar {
+            width: 6px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 10px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+        /* Checkbox animation */
+        .task-checkbox:checked ~ .task-text {
+            text-decoration: line-through;
+            color: #9ca3af;
+        }
+        /* Floating action button animation */
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.1); }
+            100% { transform: scale(1); }
+        }
+        .pulse-animation {
+            animation: pulse 2s infinite;
+        }
+        /* Date input styling */
+        input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+            filter: invert(0.5);
+            cursor: pointer;
+        }
+        input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
+            filter: invert(0.3);
+        }
+        /* Task item animation */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .task-item {
+            animation: fadeIn 0.3s ease-out forwards;
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-indigo-50 to-purple-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8 max-w-3xl">
+        <!-- Header -->
+        <header class="flex flex-col items-center mb-8">
+            <h1 class="text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600 mb-2">
+                TaskFlow
+            </h1>
+            <p class="text-gray-500">Organize your day, one task at a time</p>
+            <!-- Stats -->
+            <div class="flex gap-4 mt-4">
+                <div class="bg-white rounded-lg shadow p-3 text-center min-w-[100px]">
+                    <div class="text-sm text-gray-500">Total</div>
+                    <div id="total-count" class="text-xl font-bold text-indigo-600">0</div>
+                </div>
+                <div class="bg-white rounded-lg shadow p-3 text-center min-w-[100px]">
+                    <div class="text-sm text-gray-500">Completed</div>
+                    <div id="completed-count" class="text-xl font-bold text-green-500">0</div>
+                </div>
+                <div class="bg-white rounded-lg shadow p-3 text-center min-w-[100px]">
+                    <div class="text-sm text-gray-500">Pending</div>
+                    <div id="pending-count" class="text-xl font-bold text-yellow-500">0</div>
+                </div>
+            </div>
+        </header>
+        <!-- Main Content -->
+        <main class="bg-white rounded-xl shadow-lg overflow-hidden">
+            <!-- Input Section -->
+            <div class="p-4 border-b border-gray-100">
+                <div class="flex gap-2">
+                    <input
+                        type="text"
+                        id="task-input"
+                        placeholder="What needs to be done?"
+                        class="flex-1 px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                    >
+                    <input
+                        type="datetime-local"
+                        id="task-due"
+                        class="px-4 py-3 rounded-lg border border-gray-200 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
+                    >
+                    <button
+                        id="add-task-btn"
+                        class="bg-indigo-600 hover:bg-indigo-700 text-white px-6 py-3 rounded-lg transition-all duration-200 flex items-center gap-2"
+                    >
+                        <i class="fas fa-plus"></i>
+                        <span class="hidden sm:inline">Add Task</span>
+                    </button>
+                </div>
+                <!-- Filter Buttons -->
+                <div class="flex justify-center mt-4 gap-2">
+                    <button data-filter="all" class="filter-btn active px-3 py-1 rounded-full text-sm bg-indigo-100 text-indigo-700">All</button>
+                    <button data-filter="active" class="filter-btn px-3 py-1 rounded-full text-sm hover:bg-gray-100">Active</button>
+                    <button data-filter="completed" class="filter-btn px-3 py-1 rounded-full text-sm hover:bg-gray-100">Completed</button>
+                </div>
+            </div>
+            <!-- Task List -->
+            <div id="task-list" class="max-h-[400px] overflow-y-auto custom-scrollbar">
+                <!-- Tasks will be added here dynamically -->
+                <div class="p-4 text-center text-gray-500" id="empty-state">
+                    <i class="fas fa-tasks text-4xl mb-2 text-gray-300"></i>
+                    <p>No tasks yet. Add your first task!</p>
+                </div>
+            </div>
+            <!-- Clear Completed Button -->
+            <div class="p-3 border-t border-gray-100 flex justify-end">
+                <button id="clear-completed" class="text-sm text-gray-500 hover:text-red-500 flex items-center gap-1">
+                    <i class="fas fa-trash-alt"></i>
+                    <span>Clear Completed</span>
+                </button>
+            </div>
+        </main>
+        <!-- Floating Action Button -->
+        <button id="scroll-to-top" class="fixed bottom-6 right-6 bg-indigo-600 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center hover:bg-indigo-700 transition-all duration-200 hidden">
+            <i class="fas fa-arrow-up"></i>
+        </button>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // DOM Elements
+            const taskInput = document.getElementById('task-input');
+            const addTaskBtn = document.getElementById('add-task-btn');
+            const taskList = document.getElementById('task-list');
+            const emptyState = document.getElementById('empty-state');
+            const filterButtons = document.querySelectorAll('.filter-btn');
+            const clearCompletedBtn = document.getElementById('clear-completed');
+            const scrollToTopBtn = document.getElementById('scroll-to-top');
+            const totalCount = document.getElementById('total-count');
+            const completedCount = document.getElementById('completed-count');
+            const pendingCount = document.getElementById('pending-count');
+            // State
+            let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
+            let currentFilter = 'all';
+            // Initialize
+            renderTasks();
+            updateStats();
+            // Event Listeners
+            addTaskBtn.addEventListener('click', addTask);
+            taskInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') addTask();
+            });
+            clearCompletedBtn.addEventListener('click', clearCompletedTasks);
+            scrollToTopBtn.addEventListener('click', scrollToTop);
+            // Filter buttons
+            filterButtons.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    filterButtons.forEach(b => b.classList.remove('active', 'bg-indigo-100', 'text-indigo-700'));
+                    this.classList.add('active', 'bg-indigo-100', 'text-indigo-700');
+                    currentFilter = this.dataset.filter;
+                    renderTasks();
+                });
+            });
+            // Scroll event for floating button
+            window.addEventListener('scroll', function() {
+                if (window.pageYOffset > 300) {
+                    scrollToTopBtn.classList.remove('hidden');
+                } else {
+                    scrollToTopBtn.classList.add('hidden');
+                }
+            });
+            // Functions
+            function addTask() {
+                const text = taskInput.value.trim();
+                if (text === '') return;
+                const dueDate = document.getElementById('task-due').value;
+                const newTask = {
+                    id: Date.now(),
+                    text: text,
+                    completed: false,
+                    createdAt: new Date().toISOString(),
+                    dueDate: dueDate || null
+                };
+                tasks.unshift(newTask);
+                saveTasks();
+                renderTasks();
+                updateStats();
+                taskInput.value = '';
+                taskInput.focus();
+                // Add pulse animation to the add button
+                addTaskBtn.classList.add('pulse-animation');
+                setTimeout(() => {
+                    addTaskBtn.classList.remove('pulse-animation');
+                }, 2000);
+            }
+            function renderTasks() {
+                // Filter tasks based on current filter
+                let filteredTasks = [];
+                switch (currentFilter) {
+                    case 'active':
+                        filteredTasks = tasks.filter(task => !task.completed);
+                        break;
+                    case 'completed':
+                        filteredTasks = tasks.filter(task => task.completed);
+                        break;
+                    default:
+                        filteredTasks = [...tasks];
+                }
+                if (filteredTasks.length === 0) {
+                    emptyState.classList.remove('hidden');
+                    taskList.innerHTML = '';
+                    taskList.appendChild(emptyState);
+                } else {
+                    emptyState.classList.add('hidden');
+                    taskList.innerHTML = '';
+                    filteredTasks.forEach(task => {
+                        const taskElement = createTaskElement(task);
+                        taskList.appendChild(taskElement);
+                    });
+                }
+            }
+            function createTaskElement(task) {
+                const taskElement = document.createElement('div');
+                taskElement.className = `task-item p-4 border-b border-gray-100 flex items-center gap-3 hover:bg-gray-50 transition-colors duration-150`;
+                taskElement.dataset.id = task.id;
+                const checkbox = document.createElement('input');
+                checkbox.type = 'checkbox';
+                checkbox.className = 'task-checkbox w-5 h-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 cursor-pointer';
+                checkbox.checked = task.completed;
+                checkbox.addEventListener('change', function() {
+                    toggleTaskCompletion(task.id);
+                });
+                const taskText = document.createElement('span');
+                taskText.className = `task-text flex-1 ${task.completed ? 'line-through text-gray-400' : 'text-gray-700'}`;
+                taskText.textContent = task.text;
+                const dateSpan = document.createElement('span');
+                dateSpan.className = 'text-xs text-gray-400 ml-2';
+                const date = new Date(task.createdAt);
+                dateSpan.textContent = date.toLocaleDateString();
+                if (task.dueDate) {
+                    const dueDate = new Date(task.dueDate);
+                    const dueSpan = document.createElement('span');
+                    dueSpan.className = 'text-xs ml-2 ' +
+                        (new Date() > dueDate && !task.completed ? 'text-red-500' : 'text-gray-500');
+                    dueSpan.textContent = 'Due: ' + dueDate.toLocaleString();
+                    taskText.appendChild(dueSpan);
+                }
+                const deleteBtn = document.createElement('button');
+                deleteBtn.className = 'text-gray-400 hover:text-red-500 transition-colors duration-150';
+                deleteBtn.innerHTML = '<i class="fas fa-times"></i>';
+                deleteBtn.addEventListener('click', function(e) {
+                    e.stopPropagation();
+                    deleteTask(task.id);
+                });
+                taskText.appendChild(dateSpan);
+                taskElement.appendChild(checkbox);
+                taskElement.appendChild(taskText);
+                taskElement.appendChild(deleteBtn);
+                return taskElement;
+            }
+            function toggleTaskCompletion(taskId) {
+                const taskIndex = tasks.findIndex(task => task.id === taskId);
+                if (taskIndex !== -1) {
+                    tasks[taskIndex].completed = !tasks[taskIndex].completed;
+                    saveTasks();
+                    renderTasks();
+                    updateStats();
+                }
+            }
+            function deleteTask(taskId) {
+                tasks = tasks.filter(task => task.id !== taskId);
+                saveTasks();
+                renderTasks();
+                updateStats();
+            }
+            function clearCompletedTasks() {
+                tasks = tasks.filter(task => !task.completed);
+                saveTasks();
+                renderTasks();
+                updateStats();
+                // Show confirmation animation
+                const clearBtn = clearCompletedBtn;
+                clearBtn.innerHTML = '<i class="fas fa-check"></i> <span>Cleared!</span>';
+                clearBtn.classList.add('text-green-500');
+                setTimeout(() => {
+                    clearBtn.innerHTML = '<i class="fas fa-trash-alt"></i> <span>Clear Completed</span>';
+                    clearBtn.classList.remove('text-green-500');
+                }, 2000);
+            }
+            function saveTasks() {
+                localStorage.setItem('tasks', JSON.stringify(tasks));
+            }
+            function updateStats() {
+                totalCount.textContent = tasks.length;
+                const completedTasks = tasks.filter(task => task.completed).length;
+                completedCount.textContent = completedTasks;
+                pendingCount.textContent = tasks.length - completedTasks;
+            }
+            function scrollToTop() {
+                window.scrollTo({
+                    top: 0,
+                    behavior: 'smooth'
+                });
+            }
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=jphermans/todo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>