Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | |
| <meta name="description" content="A beautiful To-Do List app with fireworks celebration"> | |
| <meta name="theme-color" content="#6366f1"> | |
| <title>TaskFire - To-Do List with Celebration</title> | |
| <!-- PWA Manifest --> | |
| <link rel="manifest" href="manifest.json"> | |
| <meta name="apple-mobile-web-app-capable" content="yes"> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="default"> | |
| <meta name="apple-mobile-web-app-title" content="TaskFire"> | |
| <link rel="apple-touch-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect fill='%236366f1' width='100' height='100'/><text x='50' y='50' text-anchor='middle' dy='0.3em' fill='white' font-size='50'>📝</text></svg>"> | |
| <link rel="stylesheet" href="assets/css/styles.css"> | |
| </head> | |
| <body> | |
| <canvas id="fireworks"></canvas> | |
| <header> | |
| <div class="header-content"> | |
| <h1>🎯 TaskFire</h1> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a> | |
| </div> | |
| </header> | |
| <main class="container"> | |
| <div class="input-section"> | |
| <div class="input-group"> | |
| <input | |
| type="text" | |
| id="taskInput" | |
| placeholder="What needs to be done?" | |
| maxlength="200" | |
| autocomplete="off" | |
| > | |
| <button id="addBtn" type="button" aria-label="Add task"> | |
| <span>+</span> | |
| </button> | |
| </div> | |
| <div class="stats"> | |
| <span id="totalTasks">0 tasks</span> | |
| <span id="completedTasks">0 completed</span> | |
| </div> | |
| </div> | |
| <div class="filter-tabs"> | |
| <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> | |
| <div id="taskList" class="task-list"> | |
| <!-- Tasks will be dynamically added here --> | |
| </div> | |
| <div class="empty-state" id="emptyState"> | |
| <div class="empty-icon">📝</div> | |
| <p>No tasks yet. Add one above!</p> | |
| </div> | |
| <div class="actions"> | |
| <button id="clearCompleted" class="clear-btn">Clear Completed</button> | |
| </div> | |
| </main> | |
| <footer> | |
| <p>© 2024 TaskFire. Stay productive, celebrate more!</p> | |
| </footer> | |
| <script src="assets/js/fireworks.js"></script> | |
| <script src="assets/js/app.js"></script> | |
| </body> | |
| </html> |