todo-multi / index.html
akhaliq's picture
akhaliq HF Staff
Upload folder using huggingface_hub
77ba8ee verified
Raw
History Blame Contribute Delete
2.18 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Simple Todo App - Manage your tasks efficiently">
<title>Todo App - Manage Your Tasks</title>
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<header>
<nav class="navbar">
<div class="nav-container">
<a href="index.html" class="nav-brand">TodoApp</a>
<ul class="nav-menu">
<li class="nav-item current"><a href="index.html" class="nav-link">Home</a></li>
<li class="nav-item"><a href="about.html" class="nav-link">About</a></li>
<li class="nav-item"><a href="contact.html" class="nav-link">Contact</a></li>
</ul>
<button class="hamburger" aria-label="Toggle navigation">
<span></span>
<span></span>
<span></span>
</button>
</div>
</nav>
</header>
<main class="container">
<section class="todo-section">
<h1>My Todo List</h1>
<div class="todo-form">
<input type="text" id="todoInput" placeholder="Add a new task..." aria-label="New task description">
<button id="addTodoBtn" class="btn-primary">Add Task</button>
</div>
<div class="filter-options">
<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>
<ul id="todoList" class="todo-list"></ul>
<div id="emptyState" class="empty-state">
<p>No tasks yet. Add a task to get started!</p>
</div>
</section>
</main>
<footer>
<div class="container">
<p>&copy; 2023 Todo App. All rights reserved.</p>
</div>
</footer>
<script src="assets/js/main.js"></script>
</body>
</html>