Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Cosmic Task Manager</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #6c5ce7; | |
| --secondary: #a29bfe; | |
| --dark: #2d3436; | |
| --light: #f5f6fa; | |
| --success: #00b894; | |
| --danger: #d63031; | |
| --warning: #fdcb6e; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); | |
| min-height: 100vh; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| padding: 20px; | |
| color: var(--dark); | |
| } | |
| .app-container { | |
| width: 100%; | |
| max-width: 600px; | |
| background-color: rgba(255, 255, 255, 0.9); | |
| border-radius: 20px; | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); | |
| overflow: hidden; | |
| animation: fadeIn 0.5s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .app-header { | |
| background: linear-gradient(to right, var(--primary), var(--secondary)); | |
| color: white; | |
| padding: 25px; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .app-header h1 { | |
| font-size: 2.2rem; | |
| margin-bottom: 10px; | |
| font-weight: 700; | |
| letter-spacing: 1px; | |
| } | |
| .app-header p { | |
| opacity: 0.9; | |
| font-size: 0.9rem; | |
| } | |
| .date-display { | |
| margin-top: 10px; | |
| font-size: 0.85rem; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 5px; | |
| } | |
| .input-container { | |
| padding: 20px; | |
| display: flex; | |
| gap: 10px; | |
| background-color: var(--light); | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.05); | |
| } | |
| .task-input { | |
| flex: 1; | |
| padding: 15px 20px; | |
| border: none; | |
| border-radius: 50px; | |
| font-size: 1rem; | |
| outline: none; | |
| box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s; | |
| } | |
| .task-input:focus { | |
| box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2); | |
| } | |
| .add-btn { | |
| padding: 0 25px; | |
| background-color: var(--primary); | |
| color: white; | |
| border: none; | |
| border-radius: 50px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: all 0.3s; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| } | |
| .add-btn:hover { | |
| background-color: #5a4bd8; | |
| transform: translateY(-2px); | |
| } | |
| .task-controls { | |
| display: flex; | |
| padding: 15px 20px; | |
| background-color: var(--light); | |
| justify-content: space-between; | |
| border-bottom: 1px solid rgba(0, 0, 0, 0.05); | |
| } | |
| .filter-buttons { | |
| display: flex; | |
| gap: 10px; | |
| } | |
| .filter-btn { | |
| padding: 8px 15px; | |
| border: none; | |
| border-radius: 20px; | |
| background-color: transparent; | |
| cursor: pointer; | |
| font-size: 0.8rem; | |
| transition: all 0.2s; | |
| } | |
| .filter-btn.active { | |
| background-color: var(--primary); | |
| color: white; | |
| } | |
| .clear-btn { | |
| padding: 8px 15px; | |
| background-color: var(--danger); | |
| color: white; | |
| border: none; | |
| border-radius: 20px; | |
| cursor: pointer; | |
| font-size: 0.8rem; | |
| transition: all 0.2s; | |
| } | |
| .clear-btn:hover { | |
| background-color: #c0392b; | |
| } | |
| .task-list { | |
| padding: 20px; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| } | |
| .task-item { | |
| display: flex; | |
| align-items: center; | |
| padding: 15px; | |
| margin-bottom: 10px; | |
| background-color: white; | |
| border-radius: 10px; | |
| box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05); | |
| transition: all 0.3s; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .task-item:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .task-item.completed { | |
| background-color: rgba(0, 184, 148, 0.1); | |
| } | |
| .task-checkbox { | |
| width: 22px; | |
| height: 22px; | |
| margin-right: 15px; | |
| cursor: pointer; | |
| accent-color: var(--success); | |
| } | |
| .task-text { | |
| flex: 1; | |
| font-size: 1rem; | |
| word-break: break-word; | |
| } | |
| .task-text.completed { | |
| text-decoration: line-through; | |
| color: #888; | |
| } | |
| .task-actions { | |
| display: flex; | |
| gap: 10px; | |
| margin-left: 15px; | |
| } | |
| .edit-btn, .delete-btn { | |
| background: none; | |
| border: none; | |
| cursor: pointer; | |
| width: 28px; | |
| height: 28px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.2s; | |
| } | |
| .edit-btn { | |
| color: var(--primary); | |
| } | |
| .edit-btn:hover { | |
| background-color: rgba(108, 92, 231, 0.1); | |
| } | |
| .delete-btn { | |
| color: var(--danger); | |
| } | |
| .delete-btn:hover { | |
| background-color: rgba(214, 48, 49, 0.1); | |
| } | |
| .empty-state { | |
| text-align: center; | |
| padding: 40px 20px; | |
| color: #888; | |
| } | |
| .empty-state i { | |
| font-size: 3rem; | |
| margin-bottom: 20px; | |
| color: var(--secondary); | |
| opacity: 0.5; | |
| } | |
| .empty-state p { | |
| margin-top: 10px; | |
| font-size: 0.9rem; | |
| } | |
| .stats-container { | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 15px 20px; | |
| background-color: var(--light); | |
| font-size: 0.85rem; | |
| color: #555; | |
| } | |
| .progress-bar { | |
| height: 5px; | |
| width: 100%; | |
| background-color: #eee; | |
| border-radius: 5px; | |
| margin-top: 5px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(to right, var(--primary), var(--secondary)); | |
| border-radius: 5px; | |
| transition: width 0.3s ease; | |
| } | |
| /* Animations */ | |
| @keyframes slideIn { | |
| from { opacity: 0; transform: translateX(20px); } | |
| to { opacity: 1; transform: translateX(0); } | |
| } | |
| @keyframes slideOut { | |
| from { opacity: 1; transform: translateX(0); } | |
| to { opacity: 0; transform: translateX(20px); } | |
| } | |
| .task-item.slide-in { | |
| animation: slideIn 0.3s forwards; | |
| } | |
| .task-item.slide-out { | |
| animation: slideOut 0.3s forwards; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 600px) { | |
| .app-container { | |
| border-radius: 15px; | |
| } | |
| .app-header { | |
| padding: 20px; | |
| } | |
| .app-header h1 { | |
| font-size: 1.8rem; | |
| } | |
| .input-container { | |
| flex-direction: column; | |
| } | |
| .add-btn { | |
| padding: 12px; | |
| } | |
| .task-controls { | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .filter-buttons { | |
| justify-content: center; | |
| } | |
| } | |
| /* Dark mode toggle */ | |
| .theme-toggle { | |
| position: absolute; | |
| top: 20px; | |
| right: 20px; | |
| background: none; | |
| border: none; | |
| color: white; | |
| cursor: pointer; | |
| font-size: 1.2rem; | |
| z-index: 10; | |
| } | |
| body.dark-mode { | |
| background: linear-gradient(135deg, #2c3e50 0%, #000000 100%); | |
| } | |
| body.dark-mode .app-container { | |
| background-color: #1e272e; | |
| color: #f5f6fa; | |
| } | |
| body.dark-mode .task-input { | |
| background-color: #2d3436; | |
| color: #f5f6fa; | |
| } | |
| body.dark-mode .task-item { | |
| background-color: #2d3436; | |
| color: #f5f6fa; | |
| } | |
| body.dark-mode .task-text.completed { | |
| color: #7f8c8d; | |
| } | |
| body.dark-mode .empty-state { | |
| color: #7f8c8d; | |
| } | |
| body.dark-mode .input-container, | |
| body.dark-mode .task-controls, | |
| body.dark-mode .stats-container { | |
| background-color: #2d3436; | |
| border-bottom-color: rgba(255, 255, 255, 0.05); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <button class="theme-toggle" id="themeToggle"> | |
| <i class="fas fa-moon"></i> | |
| </button> | |
| <div class="app-header"> | |
| <h1>Cosmic Task Manager</h1> | |
| <p>Organize your universe, one task at a time</p> | |
| <div class="date-display"> | |
| <i class="far fa-calendar-alt"></i> | |
| <span id="currentDate"></span> | |
| </div> | |
| </div> | |
| <div class="input-container"> | |
| <input type="text" class="task-input" id="taskInput" placeholder="What's on your mind today?"> | |
| <button class="add-btn" id="addTaskBtn"> | |
| <i class="fas fa-plus"></i> | |
| Add | |
| </button> | |
| </div> | |
| <div class="task-controls"> | |
| <div class="filter-buttons"> | |
| <button class="filter-btn active" data-filter="all">All</button> | |
| <button class="filter-btn" data-filter="active">Active</button> | |
| <button class="filter-btn" data-filter="completed">Completed</button> | |
| </div> | |
| <button class="clear-btn" id="clearCompletedBtn"> | |
| <i class="fas fa-trash"></i> | |
| Clear Completed | |
| </button> | |
| </div> | |
| <div class="task-list" id="taskList"> | |
| <div class="empty-state"> | |
| <i class="fas fa-tasks"></i> | |
| <h3>No tasks yet</h3> | |
| <p>Add your first task and start organizing your day!</p> | |
| </div> | |
| </div> | |
| <div class="stats-container"> | |
| <div class="tasks-count"> | |
| <span id="totalTasks">0</span> tasks total | |
| </div> | |
| <div class="completion-rate"> | |
| <span id="completedTasks">0</span> completed | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progressFill"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // DOM Elements | |
| const taskInput = document.getElementById('taskInput'); | |
| const addTaskBtn = document.getElementById('addTaskBtn'); | |
| const taskList = document.getElementById('taskList'); | |
| const totalTasksSpan = document.getElementById('totalTasks'); | |
| const completedTasksSpan = document.getElementById('completedTasks'); | |
| const progressFill = document.getElementById('progressFill'); | |
| const clearCompletedBtn = document.getElementById('clearCompletedBtn'); | |
| const filterButtons = document.querySelectorAll('.filter-btn'); | |
| const themeToggle = document.getElementById('themeToggle'); | |
| const currentDateSpan = document.getElementById('currentDate'); | |
| // Set current date | |
| const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; | |
| currentDateSpan.textContent = new Date().toLocaleDateString('en-US', options); | |
| // Tasks array | |
| let tasks = JSON.parse(localStorage.getItem('tasks')) || []; | |
| // Filter state | |
| let currentFilter = 'all'; | |
| // Theme state | |
| const darkMode = localStorage.getItem('darkMode') === 'true'; | |
| if (darkMode) { | |
| document.body.classList.add('dark-mode'); | |
| themeToggle.innerHTML = '<i class="fas fa-sun"></i>'; | |
| } | |
| // Initialize | |
| renderTasks(); | |
| // Event Listeners | |
| addTaskBtn.addEventListener('click', addTask); | |
| taskInput.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') addTask(); | |
| }); | |
| clearCompletedBtn.addEventListener('click', clearCompletedTasks); | |
| themeToggle.addEventListener('click', toggleTheme); | |
| // Filter buttons | |
| filterButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| filterButtons.forEach(btn => btn.classList.remove('active')); | |
| this.classList.add('active'); | |
| currentFilter = this.dataset.filter; | |
| renderTasks(); | |
| }); | |
| }); | |
| // Functions | |
| function addTask() { | |
| const taskText = taskInput.value.trim(); | |
| if (taskText === '') return; | |
| const newTask = { | |
| id: Date.now(), | |
| text: taskText, | |
| completed: false | |
| }; | |
| tasks.push(newTask); | |
| saveTasks(); | |
| renderTasks(); | |
| // Clear input | |
| taskInput.value = ''; | |
| taskInput.focus(); | |
| } | |
| function renderTasks() { | |
| // Filter tasks | |
| let filteredTasks = tasks; | |
| if (currentFilter === 'active') { | |
| filteredTasks = tasks.filter(task => !task.completed); | |
| } else if (currentFilter === 'completed') { | |
| filteredTasks = tasks.filter(task => task.completed); | |
| } | |
| if (filteredTasks.length === 0) { | |
| taskList.innerHTML = ` | |
| <div class="empty-state"> | |
| <i class="fas ${currentFilter === 'all' ? 'fa-tasks' : currentFilter === 'active' ? 'fa-clipboard-list' : 'fa-check-circle'}"></i> | |
| <h3>No ${currentFilter === 'all' ? 'tasks' : currentFilter} yet</h3> | |
| <p>${currentFilter === 'all' ? 'Add your first task and start organizing your day!' : currentFilter === 'active' ? 'All tasks are completed! You rock!' : 'Complete some tasks to see them here'}</p> | |
| </div> | |
| `; | |
| } else { | |
| taskList.innerHTML = ''; | |
| filteredTasks.forEach(task => { | |
| const taskElement = document.createElement('div'); | |
| taskElement.className = 'task-item'; | |
| if (task.completed) taskElement.classList.add('completed'); | |
| taskElement.dataset.id = task.id; | |
| taskElement.innerHTML = ` | |
| <input type="checkbox" class="task-checkbox" ${task.completed ? 'checked' : ''}> | |
| <div class="task-text ${task.completed ? 'completed' : ''}">${task.text}</div> | |
| <div class="task-actions"> | |
| <button class="edit-btn"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="delete-btn"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| `; | |
| taskList.appendChild(taskElement); | |
| taskElement.classList.add('slide-in'); | |
| }); | |
| // Add event listeners to new elements | |
| document.querySelectorAll('.task-checkbox').forEach(checkbox => { | |
| checkbox.addEventListener('change', toggleTask); | |
| }); | |
| document.querySelectorAll('.delete-btn').forEach(button => { | |
| button.addEventListener('click', deleteTask); | |
| }); | |
| document.querySelectorAll('.edit-btn').forEach(button => { | |
| button.addEventListener('click', editTask); | |
| }); | |
| document.querySelectorAll('.task-text').forEach(textElement => { | |
| textElement.addEventListener('dblclick', function() { | |
| this.closest('.task-item').querySelector('.edit-btn').click(); | |
| }); | |
| }); | |
| } | |
| // Update stats | |
| updateStats(); | |
| } | |
| function toggleTask(e) { | |
| const taskId = parseInt(e.target.closest('.task-item').dataset.id); | |
| const taskIndex = tasks.findIndex(task => task.id === taskId); | |
| tasks[taskIndex].completed = e.target.checked; | |
| saveTasks(); | |
| renderTasks(); | |
| } | |
| function deleteTask(e) { | |
| const taskItem = e.target.closest('.task-item'); | |
| taskItem.classList.add('slide-out'); | |
| setTimeout(() => { | |
| const taskId = parseInt(taskItem.dataset.id); | |
| tasks = tasks.filter(task => task.id !== taskId); | |
| saveTasks(); | |
| renderTasks(); | |
| }, 300); | |
| } | |
| function editTask(e) { | |
| const taskItem = e.target.closest('.task-item'); | |
| const taskId = parseInt(taskItem.dataset.id); | |
| const taskIndex = tasks.findIndex(task => task.id === taskId); | |
| const taskTextEl = taskItem.querySelector('.task-text'); | |
| const currentText = taskTextEl.textContent; | |
| const input = document.createElement('input'); | |
| input.type = 'text'; | |
| input.value = currentText; | |
| input.className = 'task-edit-input'; | |
| input.style.width = '100%'; | |
| input.style.padding = '8px'; | |
| input.style.borderRadius = '4px'; | |
| input.style.border = '1px solid #ddd'; | |
| taskTextEl.replaceWith(input); | |
| input.focus(); | |
| function saveEdit() { | |
| const newText = input.value.trim(); | |
| if (newText && newText !== currentText) { | |
| tasks[taskIndex].text = newText; | |
| saveTasks(); | |
| } | |
| renderTasks(); | |
| } | |
| input.addEventListener('blur', saveEdit); | |
| input.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter') saveEdit(); | |
| }); | |
| } | |
| function clearCompletedTasks() { | |
| tasks = tasks.filter(task => !task.completed); | |
| saveTasks(); | |
| renderTasks(); | |
| } | |
| function updateStats() { | |
| const total = tasks.length; | |
| const completed = tasks.filter(task => task.completed).length; | |
| const progress = total > 0 ? Math.round((completed / total) * 100) : 0; | |
| totalTasksSpan.textContent = total; | |
| completedTasksSpan.textContent = completed; | |
| progressFill.style.width = `${progress}%`; | |
| } | |
| function saveTasks() { | |
| localStorage.setItem('tasks', JSON.stringify(tasks)); | |
| } | |
| function toggleTheme() { | |
| document.body.classList.toggle('dark-mode'); | |
| const isDark = document.body.classList.contains('dark-mode'); | |
| localStorage.setItem('darkMode', isDark); | |
| if (isDark) { | |
| themeToggle.innerHTML = '<i class="fas fa-sun"></i>'; | |
| } else { | |
| themeToggle.innerHTML = '<i class="fas fa-moon"></i>'; | |
| } | |
| } | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body> | |
| </html> |