Spaces:

uu531
/

web

Running

App Files Files Community

uu531 commited on Apr 6, 2025

Commit

badbbb8

verified ·

1 Parent(s): b4302d4

Add 1 files

Browse files

Files changed (1) hide show

index.html +307 -38

index.html CHANGED Viewed

@@ -1,41 +1,310 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <title>My app</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta charset="utf-8">
     <style>
-      body {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        overflow: hidden;
-        height: 100dvh;
-        font-family: "Arial", sans-serif;
-        text-align: center;
-      }
-      .arrow {
-        position: absolute;
-        bottom: 32px;
-        left: 0px;
-        width: 100px;
-        transform: rotate(30deg);
-      }
-      h1 {
-        font-size: 50px;
-      }
-      h1 span {
-        color: #acacac;
-        font-size: 32px;
-      }
     </style>
-  </head>
-  <body>
-    <h1>
-      <span>I'm ready to work,</span><br />
-      Ask me anything.
-    </h1>
-    <img src="https://enzostvs-deepsite.hf.space/arrow.svg" class="arrow" />
-    <script></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=uu531/web" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
-</html>

 <!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>任务清单</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>
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .task-item {
+            animation: fadeIn 0.3s ease-out forwards;
+        }
+        .completed {
+            position: relative;
+        }
+        .completed::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 50%;
+            width: 100%;
+            height: 1px;
+            background: #000;
+            transform: scaleX(0);
+            transform-origin: left;
+            animation: strike 0.3s ease-out forwards;
+        }
+        @keyframes strike {
+            to { transform: scaleX(1); }
+        }
     </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8 max-w-3xl">
+        <!-- 标题 -->
+        <header class="mb-8 text-center">
+            <h1 class="text-3xl font-bold text-gray-900 mb-2">任务清单</h1>
+            <p class="text-gray-600">专注当下，高效生活</p>
+            <div class="mt-6 relative">
+                <input
+                    type="text"
+                    id="newTaskInput"
+                    placeholder="添加新任务..."
+                    class="w-full px-6 py-3 rounded-lg border border-gray-300 focus:outline-none focus:border-gray-500 bg-white text-gray-900"
+                >
+                <button
+                    id="addTaskBtn"
+                    class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gray-900 text-white p-2 rounded-lg hover:bg-gray-800 transition-colors"
+                >
+                    <i class="fas fa-plus"></i>
+                </button>
+            </div>
+        </header>
+        <!-- 任务控制 -->
+        <div class="flex justify-between items-center mb-6">
+            <div class="flex space-x-2">
+                <button id="filterAll" class="filter-btn active px-4 py-2 rounded-lg bg-gray-900 text-white font-medium">全部</button>
+                <button id="filterActive" class="filter-btn px-4 py-2 rounded-lg border border-gray-300 hover:bg-gray-100 text-gray-700">待办</button>
+                <button id="filterCompleted" class="filter-btn px-4 py-2 rounded-lg border border-gray-300 hover:bg-gray-100 text-gray-700">已完成</button>
+            </div>
+            <button id="clearCompleted" class="text-gray-700 hover:text-gray-900 text-sm">
+                <i class="fas fa-trash-alt mr-1"></i> 清除已完成
+            </button>
+        </div>
+        <!-- 任务统计 -->
+        <div class="bg-white rounded-lg p-4 mb-6 border border-gray-200 flex justify-between items-center">
+            <div>
+                <span class="text-gray-600">总任务:</span>
+                <span id="totalTasks" class="font-bold ml-1">0</span>
+            </div>
+            <div>
+                <span class="text-gray-600">已完成:</span>
+                <span id="completedTasks" class="font-bold ml-1">0</span>
+            </div>
+            <div>
+                <span class="text-gray-600">待完成:</span>
+                <span id="remainingTasks" class="font-bold ml-1">0</span>
+            </div>
+        </div>
+        <!-- 任务列表 -->
+        <div id="taskList" class="space-y-3">
+            <!-- 任务将动态添加在这里 -->
+            <div class="text-center py-10 text-gray-500" id="emptyState">
+                <i class="fas fa-tasks text-4xl mb-3 text-gray-300"></i>
+                <p class="text-lg">暂无任务</p>
+                <p class="mt-1">添加你的第一个任务开始吧</p>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // DOM元素
+            const newTaskInput = document.getElementById('newTaskInput');
+            const addTaskBtn = document.getElementById('addTaskBtn');
+            const taskList = document.getElementById('taskList');
+            const emptyState = document.getElementById('emptyState');
+            const filterAll = document.getElementById('filterAll');
+            const filterActive = document.getElementById('filterActive');
+            const filterCompleted = document.getElementById('filterCompleted');
+            const clearCompleted = document.getElementById('clearCompleted');
+            const totalTasks = document.getElementById('totalTasks');
+            const completedTasks = document.getElementById('completedTasks');
+            const remainingTasks = document.getElementById('remainingTasks');
+            // 状态
+            let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
+            let currentFilter = 'all';
+            // 初始化
+            renderTasks();
+            updateStats();
+            // 事件监听
+            addTaskBtn.addEventListener('click', addTask);
+            newTaskInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter') addTask();
+            });
+            filterAll.addEventListener('click', () => setFilter('all'));
+            filterActive.addEventListener('click', () => setFilter('active'));
+            filterCompleted.addEventListener('click', () => setFilter('completed'));
+            clearCompleted.addEventListener('click', clearCompletedTasks);
+            // 功能函数
+            function addTask() {
+                const taskText = newTaskInput.value.trim();
+                if (taskText === '') return;
+                const task = {
+                    id: Date.now().toString(),
+                    text: taskText,
+                    completed: false,
+                    createdAt: new Date().toISOString()
+                };
+                tasks.unshift(task);
+                saveTasks();
+                renderTasks();
+                updateStats();
+                newTaskInput.value = '';
+            }
+            function renderTasks() {
+                // 根据当前筛选条件过滤任务
+                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 bg-white rounded-lg p-4 border border-gray-200 flex items-center justify-between`;
+                taskElement.dataset.id = task.id;
+                if (task.completed) {
+                    taskElement.classList.add('completed');
+                }
+                taskElement.innerHTML = `
+                    <div class="flex items-center space-x-3 flex-1">
+                        <button class="complete-btn w-5 h-5 rounded border ${task.completed ? 'bg-gray-900 border-gray-900 text-white' : 'border-gray-400'} flex items-center justify-center">
+                            ${task.completed ? '<i class="fas fa-check text-xs"></i>' : ''}
+                        </button>
+                        <span class="task-text ${task.completed ? 'text-gray-400' : 'text-gray-800'} flex-1">${task.text}</span>
+                    </div>
+                    <div class="flex space-x-2">
+                        <button class="edit-btn text-gray-500 hover:text-gray-700">
+                            <i class="fas fa-pencil-alt text-sm"></i>
+                        </button>
+                        <button class="delete-btn text-gray-500 hover:text-gray-700">
+                            <i class="fas fa-trash-alt text-sm"></i>
+                        </button>
+                    </div>
+                `;
+                // 为按钮添加事件监听
+                const completeBtn = taskElement.querySelector('.complete-btn');
+                const editBtn = taskElement.querySelector('.edit-btn');
+                const deleteBtn = taskElement.querySelector('.delete-btn');
+                completeBtn.addEventListener('click', () => toggleComplete(task.id));
+                editBtn.addEventListener('click', () => editTask(task.id));
+                deleteBtn.addEventListener('click', () => deleteTask(task.id));
+                return taskElement;
+            }
+            function toggleComplete(taskId) {
+                const taskIndex = tasks.findIndex(task => task.id === taskId);
+                if (taskIndex !== -1) {
+                    tasks[taskIndex].completed = !tasks[taskIndex].completed;
+                    saveTasks();
+                    renderTasks();
+                    updateStats();
+                }
+            }
+            function editTask(taskId) {
+                const task = tasks.find(task => task.id === taskId);
+                if (!task) return;
+                const taskElement = document.querySelector(`.task-item[data-id="${taskId}"]`);
+                const taskTextElement = taskElement.querySelector('.task-text');
+                const input = document.createElement('input');
+                input.type = 'text';
+                input.value = task.text;
+                input.className = 'border border-gray-300 px-2 py-1 rounded flex-1';
+                taskTextElement.replaceWith(input);
+                input.focus();
+                const handleEdit = (e) => {
+                    if (e.key === 'Enter' || e.type === 'blur') {
+                        const newText = input.value.trim();
+                        if (newText !== '' && newText !== task.text) {
+                            task.text = newText;
+                            saveTasks();
+                        }
+                        renderTasks();
+                    }
+                };
+                input.addEventListener('keypress', handleEdit);
+                input.addEventListener('blur', handleEdit);
+            }
+            function deleteTask(taskId) {
+                tasks = tasks.filter(task => task.id !== taskId);
+                saveTasks();
+                renderTasks();
+                updateStats();
+            }
+            function clearCompletedTasks() {
+                tasks = tasks.filter(task => !task.completed);
+                saveTasks();
+                renderTasks();
+                updateStats();
+            }
+            function setFilter(filter) {
+                currentFilter = filter;
+                // 更新筛选按钮的活动状态
+                document.querySelectorAll('.filter-btn').forEach(btn => {
+                    btn.classList.remove('active', 'bg-gray-900', 'text-white');
+                    btn.classList.add('border', 'border-gray-300', 'hover:bg-gray-100', 'text-gray-700');
+                });
+                const activeBtn = document.getElementById(`filter${filter.charAt(0).toUpperCase() + filter.slice(1)}`);
+                activeBtn.classList.add('active', 'bg-gray-900', 'text-white');
+                activeBtn.classList.remove('border', 'hover:bg-gray-100', 'text-gray-700');
+                renderTasks();
+            }
+            function updateStats() {
+                const total = tasks.length;
+                const completed = tasks.filter(task => task.completed).length;
+                const remaining = total - completed;
+                totalTasks.textContent = total;
+                completedTasks.textContent = completed;
+                remainingTasks.textContent = remaining;
+            }
+            function saveTasks() {
+                localStorage.setItem('tasks', JSON.stringify(tasks));
+            }
+        });
+    </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=uu531/web" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>