88 lines
3.4 KiB
HTML
88 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<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">
|
|
<title>Tasks</title>
|
|
<link rel="stylesheet" href="style.css?v=2">
|
|
<!-- Include Inter font to match SF Pro aesthetic for non-Apple users -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- Glassmorphism Header -->
|
|
<header class="app-header">
|
|
<div class="header-content">
|
|
<div class="logo">
|
|
<div class="logo-icon">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path>
|
|
<polyline points="22 4 12 14.01 9 11.01"></polyline>
|
|
</svg>
|
|
</div>
|
|
<h1>Tasks</h1>
|
|
</div>
|
|
<div class="header-stats">
|
|
<div class="stat">
|
|
<span class="stat-value" id="total-tasks-count">0</span>
|
|
<span class="stat-label">Total</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="app-container">
|
|
|
|
<h2 class="page-title">What's on your mind?</h2>
|
|
|
|
<!-- Add Task Form -->
|
|
<section class="add-task-section">
|
|
<form id="task-form" class="add-task-form">
|
|
<div class="form-row">
|
|
<div class="input-group input-group-title">
|
|
<input type="text" id="title" placeholder="Task name..." required autocomplete="off">
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="text" id="description" placeholder="Description (optional)" autocomplete="off">
|
|
</div>
|
|
<button type="submit" class="btn btn-add">
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
|
<line x1="12" y1="5" x2="12" y2="19"></line>
|
|
<line x1="5" y1="12" x2="19" y2="12"></line>
|
|
</svg>
|
|
Add Task
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- Filter Segmented Control -->
|
|
<section class="filter-section">
|
|
<div class="filter-tabs">
|
|
<button class="filter-tab active" data-filter="all">All</button>
|
|
<button class="filter-tab" data-filter="active">Active</button>
|
|
<button class="filter-tab" data-filter="completed">Completed</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Task List Container -->
|
|
<main id="tasks-container" class="task-list">
|
|
<!-- Loading state is managed by JS -->
|
|
<div class="loading-state">
|
|
<div class="spinner"></div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="app-footer">
|
|
<p>Task Manager • Designed with precision</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Toast Notification Container -->
|
|
<div id="toast" class="toast"></div>
|
|
|
|
<script src="app.js?v=2"></script>
|
|
</body>
|
|
</html>
|