Spaces:

akhaliq
/

anycoder-e4bd34ab

Running

App Files Files Community

akhaliq HF Staff commited on 3 days ago

Commit

9fbd70e

verified ·

1 Parent(s): 52133ae

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +924 -19

index.html CHANGED Viewed

@@ -1,19 +1,924 @@
-<!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>TaskFlow - Modern Todo App</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        :root {
+            --primary-color: #667eea;
+            --primary-dark: #5a67d8;
+            --secondary-color: #48bb78;
+            --danger-color: #f56565;
+            --warning-color: #ed8936;
+            --bg-color: #f7fafc;
+            --card-bg: #ffffff;
+            --text-primary: #2d3748;
+            --text-secondary: #718096;
+            --border-color: #e2e8f0;
+            --shadow-sm: 0 1px 3px rgba(0,0,0,0.12);
+            --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
+            --shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
+            --shadow-xl: 0 20px 25px rgba(0,0,0,0.1);
+            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            color: var(--text-primary);
+            line-height: 1.6;
+        }
+        .background-pattern {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0.1;
+            background-image:
+                repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.1) 35px, rgba(255,255,255,.1) 70px);
+            pointer-events: none;
+        }
+        header {
+            background: rgba(255, 255, 255, 0.95);
+            backdrop-filter: blur(10px);
+            padding: 1.5rem 0;
+            box-shadow: var(--shadow-md);
+            position: relative;
+            z-index: 100;
+        }
+        .header-content {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 2rem;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            font-size: 1.5rem;
+            font-weight: 700;
+            color: var(--primary-color);
+        }
+        .logo-icon {
+            width: 40px;
+            height: 40px;
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+            border-radius: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 1.5rem;
+        }
+        .header-link {
+            color: var(--text-secondary);
+            text-decoration: none;
+            font-size: 0.875rem;
+            transition: var(--transition);
+            padding: 0.5rem 1rem;
+            border-radius: 8px;
+        }
+        .header-link:hover {
+            color: var(--primary-color);
+            background: rgba(102, 126, 234, 0.1);
+        }
+        main {
+            flex: 1;
+            padding: 2rem;
+            max-width: 800px;
+            width: 100%;
+            margin: 0 auto;
+        }
+        .todo-container {
+            background: var(--card-bg);
+            border-radius: 20px;
+            box-shadow: var(--shadow-xl);
+            overflow: hidden;
+            animation: slideUp 0.5s ease-out;
+        }
+        @keyframes slideUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        .todo-header {
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+            color: white;
+            padding: 2rem;
+        }
+        .todo-title {
+            font-size: 2rem;
+            margin-bottom: 0.5rem;
+        }
+        .todo-subtitle {
+            opacity: 0.9;
+            font-size: 1rem;
+        }
+        .stats-container {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+            gap: 1rem;
+            padding: 1.5rem 2rem;
+            background: var(--bg-color);
+            border-bottom: 1px solid var(--border-color);
+        }
+        .stat-card {
+            background: white;
+            padding: 1rem;
+            border-radius: 12px;
+            text-align: center;
+            transition: var(--transition);
+        }
+        .stat-card:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-md);
+        }
+        .stat-number {
+            font-size: 2rem;
+            font-weight: 700;
+            color: var(--primary-color);
+        }
+        .stat-label {
+            font-size: 0.875rem;
+            color: var(--text-secondary);
+            margin-top: 0.25rem;
+        }
+        .input-section {
+            padding: 2rem;
+            border-bottom: 1px solid var(--border-color);
+        }
+        .input-wrapper {
+            display: flex;
+            gap: 1rem;
+            margin-bottom: 1rem;
+        }
+        .todo-input {
+            flex: 1;
+            padding: 1rem 1.5rem;
+            border: 2px solid var(--border-color);
+            border-radius: 12px;
+            font-size: 1rem;
+            transition: var(--transition);
+            background: white;
+        }
+        .todo-input:focus {
+            outline: none;
+            border-color: var(--primary-color);
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+        .priority-select {
+            padding: 1rem;
+            border: 2px solid var(--border-color);
+            border-radius: 12px;
+            font-size: 1rem;
+            background: white;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+        .priority-select:focus {
+            outline: none;
+            border-color: var(--primary-color);
+        }
+        .add-btn {
+            padding: 1rem 2rem;
+            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+            color: white;
+            border: none;
+            border-radius: 12px;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        .add-btn:hover {
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-lg);
+        }
+        .add-btn:active {
+            transform: translateY(0);
+        }
+        .filter-tabs {
+            display: flex;
+            gap: 0.5rem;
+            padding: 1rem 2rem;
+            background: var(--bg-color);
+            border-bottom: 1px solid var(--border-color);
+        }
+        .filter-tab {
+            padding: 0.75rem 1.5rem;
+            background: transparent;
+            border: none;
+            border-radius: 8px;
+            font-size: 0.875rem;
+            font-weight: 600;
+            color: var(--text-secondary);
+            cursor: pointer;
+            transition: var(--transition);
+            position: relative;
+        }
+        .filter-tab:hover {
+            background: rgba(102, 126, 234, 0.1);
+        }
+        .filter-tab.active {
+            color: var(--primary-color);
+            background: white;
+            box-shadow: var(--shadow-sm);
+        }
+        .filter-tab .count {
+            display: inline-block;
+            margin-left: 0.5rem;
+            padding: 0.125rem 0.5rem;
+            background: var(--bg-color);
+            border-radius: 12px;
+            font-size: 0.75rem;
+        }
+        .todo-list {
+            padding: 1rem;
+            max-height: 400px;
+            overflow-y: auto;
+        }
+        .todo-list::-webkit-scrollbar {
+            width: 8px;
+        }
+        .todo-list::-webkit-scrollbar-track {
+            background: var(--bg-color);
+            border-radius: 10px;
+        }
+        .todo-list::-webkit-scrollbar-thumb {
+            background: var(--border-color);
+            border-radius: 10px;
+        }
+        .todo-list::-webkit-scrollbar-thumb:hover {
+            background: var(--text-secondary);
+        }
+        .todo-item {
+            display: flex;
+            align-items: center;
+            padding: 1rem;
+            margin-bottom: 0.5rem;
+            background: white;
+            border: 2px solid var(--border-color);
+            border-radius: 12px;
+            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 {
+            border-color: var(--primary-color);
+            box-shadow: var(--shadow-md);
+            transform: translateX(4px);
+        }
+        .todo-item.completed {
+            opacity: 0.7;
+            background: var(--bg-color);
+        }
+        .todo-item.completed .todo-text {
+            text-decoration: line-through;
+            color: var(--text-secondary);
+        }
+        .checkbox-wrapper {
+            position: relative;
+            margin-right: 1rem;
+        }
+        .todo-checkbox {
+            width: 24px;
+            height: 24px;
+            appearance: none;
+            border: 2px solid var(--border-color);
+            border-radius: 6px;
+            cursor: pointer;
+            transition: var(--transition);
+            position: relative;
+        }
+        .todo-checkbox:checked {
+            background: linear-gradient(135deg, var(--secondary-color), #38a169);
+            border-color: var(--secondary-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-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            gap: 0.25rem;
+        }
+        .todo-text {
+            font-size: 1rem;
+            color: var(--text-primary);
+            word-break: break-word;
+        }
+        .todo-meta {
+            display: flex;
+            gap: 1rem;
+            align-items: center;
+            font-size: 0.75rem;
+            color: var(--text-secondary);
+        }
+        .priority-badge {
+            padding: 0.25rem 0.75rem;
+            border-radius: 12px;
+            font-weight: 600;
+            font-size: 0.75rem;
+            text-transform: uppercase;
+        }
+        .priority-high {
+            background: rgba(245, 101, 101, 0.1);
+            color: var(--danger-color);
+        }
+        .priority-medium {
+            background: rgba(237, 137, 54, 0.1);
+            color: var(--warning-color);
+        }
+        .priority-low {
+            background: rgba(72, 187, 120, 0.1);
+            color: var(--secondary-color);
+        }
+        .todo-actions {
+            display: flex;
+            gap: 0.5rem;
+        }
+        .action-btn {
+            width: 36px;
+            height: 36px;
+            border: none;
+            background: var(--bg-color);
+            border-radius: 8px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: var(--transition);
+            color: var(--text-secondary);
+        }
+        .action-btn:hover {
+            background: var(--primary-color);
+            color: white;
+            transform: scale(1.1);
+        }
+        .action-btn.delete:hover {
+            background: var(--danger-color);
+        }
+        .empty-state {
+            text-align: center;
+            padding: 3rem;
+            color: var(--text-secondary);
+        }
+        .empty-icon {
+            font-size: 4rem;
+            margin-bottom: 1rem;
+            opacity: 0.3;
+        }
+        .clear-completed {
+            padding: 1rem 2rem;
+            background: var(--danger-color);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            font-size: 0.875rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: var(--transition);
+            margin: 1rem 2rem;
+        }
+        .clear-completed:hover {
+            background: #e53e3e;
+            transform: translateY(-2px);
+            box-shadow: var(--shadow-md);
+        }
+        @media (max-width: 768px) {
+            .header-content {
+                padding: 0 1rem;
+            }
+            main {
+                padding: 1rem;
+            }
+            .todo-title {
+                font-size: 1.5rem;
+            }
+            .input-wrapper {
+                flex-direction: column;
+            }
+            .stats-container {
+                grid-template-columns: 1fr;
+            }
+            .filter-tabs {
+                overflow-x: auto;
+                padding: 1rem;
+            }
+            .todo-meta {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 0.5rem;
+            }
+            .todo-actions {
+                flex-direction: column;
+            }
+        }
+        .toast {
+            position: fixed;
+            bottom: 2rem;
+            right: 2rem;
+            background: white;
+            padding: 1rem 1.5rem;
+            border-radius: 12px;
+            box-shadow: var(--shadow-xl);
+            display: flex;
+            align-items: center;
+            gap: 1rem;
+            transform: translateX(400px);
+            transition: transform 0.3s ease-out;
+            z-index: 1000;
+        }
+        .toast.show {
+            transform: translateX(0);
+        }
+        .toast-icon {
+            font-size: 1.5rem;
+        }
+        .toast.success .toast-icon {
+            color: var(--secondary-color);
+        }
+        .toast.error .toast-icon {
+            color: var(--danger-color);
+        }
+        .edit-input {
+            flex: 1;
+            padding: 0.75rem;
+            border: 2px solid var(--primary-color);
+            border-radius: 8px;
+            font-size: 1rem;
+            background: white;
+        }
+        .edit-input:focus {
+            outline: none;
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+        }
+    </style>
+</head>
+<body>
+    <div class="background-pattern"></div>
+    <header>
+        <div class="header-content">
+            <div class="logo">
+                <div class="logo-icon">✓</div>
+                <span>TaskFlow</span>
+            </div>
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="header-link">
+                Built with anycoder
+            </a>
+        </div>
+    </header>
+    <main>
+        <div class="todo-container">
+            <div class="todo-header">
+                <h1 class="todo-title">My Tasks</h1>
+                <p class="todo-subtitle">Organize your day, achieve your goals</p>
+            </div>
+            <div class="stats-container">
+                <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="activeTasks">0</div>
+                    <div class="stat-label">Active</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="completionRate">0%</div>
+                    <div class="stat-label">Completion Rate</div>
+                </div>
+            </div>
+            <div class="input-section">
+                <div class="input-wrapper">
+                    <input
+                        type="text"
+                        class="todo-input"
+                        id="todoInput"
+                        placeholder="What needs to be done today?"
+                        autocomplete="off"
+                    >
+                    <select class="priority-select" id="prioritySelect">
+                        <option value="low">Low Priority</option>
+                        <option value="medium" selected>Medium Priority</option>
+                        <option value="high">High Priority</option>
+                    </select>
+                    <button class="add-btn" id="addBtn">
+                        <span>+</span>
+                        <span>Add Task</span>
+                    </button>
+                </div>
+            </div>
+            <div class="filter-tabs">
+                <button class="filter-tab active" data-filter="all">
+                    All <span class="count" id="allCount">0</span>
+                </button>
+                <button class="filter-tab" data-filter="active">
+                    Active <span class="count" id="activeCount">0</span>
+                </button>
+                <button class="filter-tab" data-filter="completed">
+                    Completed <span class="count" id="completedCount">0</span>
+                </button>
+            </div>
+            <div class="todo-list" id="todoList">
+                <div class="empty-state">
+                    <div class="empty-icon">📝</div>
+                    <p>No tasks yet. Add your first task above!</p>
+                </div>
+            </div>
+            <button class="clear-completed" id="clearCompleted" style="display: none;">
+                Clear Completed Tasks
+            </button>
+        </div>
+    </main>
+    <div class="toast" id="toast">
+        <span class="toast-icon"></span>
+        <span class="toast-message"></span>
+    </div>
+    <script>
+        class TodoApp {
+            constructor() {
+                this.todos = this.loadTodos();
+                this.currentFilter = 'all';
+                this.init();
+            }
+            init() {
+                this.setupEventListeners();
+                this.render();
+                this.updateStats();
+            }
+            setupEventListeners() {
+                // Add task
+                document.getElementById('addBtn').addEventListener('click', () => this.addTodo());
+                document.getElementById('todoInput').addEventListener('keypress', (e) => {
+                    if (e.key === 'Enter') this.addTodo();
+                });
+                // Filter tabs
+                document.querySelectorAll('.filter-tab').forEach(tab => {
+                    tab.addEventListener('click', (e) => {
+                        document.querySelectorAll('.filter-tab').forEach(t => t.classList.remove('active'));
+                        e.target.classList.add('active');
+                        this.currentFilter = e.target.dataset.filter;
+                        this.render();
+                    });
+                });
+                // Clear completed
+                document.getElementById('clearCompleted').addEventListener('click', () => this.clearCompleted());
+            }
+            generateId() {
+                return '_' + Math.random().toString(36).substr(2, 9);
+            }
+            addTodo() {
+                const input = document.getElementById('todoInput');
+                const priority = document.getElementById('prioritySelect').value;
+                const text = input.value.trim();
+                if (!text) {
+                    this.showToast('Please enter a task', 'error');
+                    return;
+                }
+                const todo = {
+                    id: this.generateId(),
+                    text: text,
+                    completed: false,
+                    priority: priority,
+                    createdAt: new Date().toISOString()
+                };
+                this.todos.unshift(todo);
+                this.saveTodos();
+                this.render();
+                this.updateStats();
+                input.value = '';
+                input.focus();
+                this.showToast('Task added successfully!', 'success');
+            }
+            toggleTodo(id) {
+                const todo = this.todos.find(t => t.id === id);
+                if (todo) {
+                    todo.completed = !todo.completed;
+                    this.saveTodos();
+                    this.render();
+                    this.updateStats();
+                }
+            }
+            deleteTodo(id) {
+                this.todos = this.todos.filter(t => t.id !== id);
+                this.saveTodos();
+                this.render();
+                this.updateStats();
+                this.showToast('Task deleted', 'success');
+            }
+            editTodo(id) {
+                const todo = this.todos.find(t => t.id === id);
+                if (!todo) return;
+                const todoItem = document.querySelector(`[data-id="${id}"]`);
+                const content = todoItem.querySelector('.todo-content');
+                const input = document.createElement('input');
+                input.type = 'text';
+                input.className = 'edit-input';
+                input.value = todo.text;
+                content.innerHTML = '';
+                content.appendChild(input);
+                input.focus();
+                input.select();
+                const saveEdit = () => {
+                    const newText = input.value.trim();
+                    if (newText && newText !== todo.text) {
+                        todo.text = newText;
+                        this.saveTodos();
+                        this.showToast('Task updated', 'success');
+                    }
+                    this.render();
+                };
+                input.addEventListener('blur', saveEdit);
+                input.addEventListener('keypress', (e) => {
+                    if (e.key === 'Enter') {
+                        saveEdit();
+                    }
+                });
+            }
+            clearCompleted() {
+                const completedCount = this.todos.filter(t => t.completed).length;
+                if (completedCount === 0) return;
+                this.todos = this.todos.filter(t => !t.completed);
+                this.saveTodos();
+                this.render();
+                this.updateStats();
+                this.showToast(`Cleared ${completedCount} completed task(s)`, 'success');
+            }
+            getFilteredTodos() {
+                switch (this.currentFilter) {
+                    case 'active':
+                        return this.todos.filter(t => !t.completed);
+                    case 'completed':
+                        return this.todos.filter(t => t.completed);
+                    default:
+                        return this.todos;
+                }
+            }
+            render() {
+                const todoList = document.getElementById('todoList');
+                const filteredTodos = this.getFilteredTodos();
+                if (filteredTodos.length === 0) {
+                    todoList.innerHTML = `
+                        <div class="empty-state">
+                            <div class="empty-icon">📝</div>
+                            <p>${this.currentFilter === 'all' ? 'No tasks yet. Add your first task above!' :
+                                 this.currentFilter === 'active' ? 'No active tasks!' :
+                                 'No completed tasks!'}</p>
+                        </div>
+                    `;
+                } else {
+                    todoList.innerHTML = filteredTodos.map(todo => `
+                        <div class="todo-item ${todo.completed ? 'completed' : ''}" data-id="${todo.id}">
+                            <div class="checkbox-wrapper">
+                                <input
+                                    type="checkbox"
+                                    class="todo-checkbox"
+                                    ${todo.completed ? 'checked' : ''}
+                                    onchange="app.toggleTodo('${todo.id}')"
+                                >
+                            </div>
+                            <div class="todo-content">
+                                <div class="todo-text">${this.escapeHtml(todo.text)}</div>
+                                <div class="todo-meta">
+                                    <span class="priority-badge priority-${todo.priority}">${todo.priority}</span>
+                                    <span>📅 ${this.formatDate(todo.createdAt)}</span>
+                                </div>
+                            </div>
+                            <div class="todo-actions">
+                                <button class="action-btn edit" onclick="app.editTodo('${todo.id}')">
+                                    ✏️
+                                </button>
+                                <button class="action-btn delete" onclick="app.deleteTodo('${todo.id}')">
+                                    🗑️
+                                </button>
+                            </div>
+                        </div>
+                    `).join('');
+                }
+                // Update filter counts
+                document.getElementById('allCount').textContent = this.todos.length;
+                document.getElementById('activeCount').textContent = this.todos.filter(t => !t.completed).length;
+                document.getElementById('completedCount').textContent = this.todos.filter(t => t.completed).length;
+                // Show/hide clear button
+                const clearBtn = document.getElementById('clearCompleted');
+                clearBtn.style.display = this.todos.some(t => t.completed) ? 'block' : 'none';
+            }
+            updateStats() {
+                const total = this.todos.length;
+                const completed = this.todos.filter(t => t.completed).length;
+                const active = total - completed;
+                const rate = total > 0 ? Math.round((completed / total) * 100) : 0;
+                document.getElementById('totalTasks').textContent = total;
+                document.getElementById('activeTasks').textContent = active;
+                document.getElementById('completedTasks').textContent = completed;
+                document.getElementById('completionRate').textContent = rate + '%';
+            }
+            formatDate(dateString) {
+                const date = new Date(dateString);
+                const today = new Date();
+                const yesterday = new Date(today);
+                yesterday.setDate(yesterday.getDate() - 1);
+                if (date.toDateString() === today.toDateString()) {
+                    return 'Today';
+                } else if (date.toDateString() === yesterday.toDateString()) {
+                    return 'Yesterday';
+                } else {
+                    return date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+                }
+            }
+            escapeHtml(text) {
+                const div = document.createElement('div');
+                div.textContent = text;
+                return div.innerHTML;
+            }
+            showToast(message, type = 'success') {
+                const toast = document.getElementById('toast');
+                const icon = toast.querySelector('.toast-icon');
+                const msg = toast.querySelector('.toast-message');
+                toast.className = `toast ${type}`;
+                icon.textContent = type === 'success' ? '✓' : '⚠️';
+                msg.textContent = message;
+                toast.classList.add('show');
+                setTimeout(() => {
+                    toast.classList.remove('show');
+                }, 3000);
+            }
+            saveTodos() {
+                localStorage.setItem('todos', JSON.stringify(this.todos));
+            }
+            loadTodos() {
+                const stored = localStorage.getItem('todos');
+                return stored ? JSON.parse(stored) : [];
+            }
+        }
+        // Initialize the app
+        const app = new TodoApp();
+    </script>
+</body>
+</html>