114 lines
5.3 KiB
HTML
114 lines
5.3 KiB
HTML
<!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="Task Manager - A modern task management web application built with Docker">
|
|
<title>Task Manager</title>
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<!-- Header -->
|
|
<header class="app-header">
|
|
<div class="header-content">
|
|
<div class="logo">
|
|
<div class="logo-icon">
|
|
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M9 11l3 3L22 4"/>
|
|
<path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
|
|
</svg>
|
|
</div>
|
|
<h1>Task Manager</h1>
|
|
</div>
|
|
<div class="header-stats">
|
|
<div class="stat" id="stat-total">
|
|
<span class="stat-value">0</span>
|
|
<span class="stat-label">Total</span>
|
|
</div>
|
|
<div class="stat" id="stat-active">
|
|
<span class="stat-value">0</span>
|
|
<span class="stat-label">Active</span>
|
|
</div>
|
|
<div class="stat" id="stat-completed">
|
|
<span class="stat-value">0</span>
|
|
<span class="stat-label">Done</span>
|
|
</div>
|
|
<div class="stat" id="stat-source">
|
|
<span class="stat-value">—</span>
|
|
<span class="stat-label">Source</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<!-- Add Task Form -->
|
|
<section class="add-task-section">
|
|
<form id="add-task-form" class="add-task-form">
|
|
<div class="form-row">
|
|
<div class="input-group input-group-title">
|
|
<input type="text" id="task-title" placeholder="What needs to be done?" required autocomplete="off">
|
|
</div>
|
|
<div class="input-group input-group-desc">
|
|
<input type="text" id="task-description" placeholder="Description (optional)" autocomplete="off">
|
|
</div>
|
|
<button type="submit" class="btn btn-add" id="btn-add-task">
|
|
<svg width="20" height="20" 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 x1="5" y1="12" x2="19" y2="12"/>
|
|
</svg>
|
|
<span>Add Task</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
|
|
<!-- Filter Tabs -->
|
|
<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 -->
|
|
<section class="task-list-section">
|
|
<div id="task-list" class="task-list">
|
|
<!-- Tasks will be rendered here -->
|
|
</div>
|
|
<div id="empty-state" class="empty-state" style="display: none;">
|
|
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
|
|
<polyline points="14 2 14 8 20 8"/>
|
|
<line x1="16" y1="13" x2="8" y2="13"/>
|
|
<line x1="16" y1="17" x2="8" y2="17"/>
|
|
<polyline points="10 9 9 9 8 9"/>
|
|
</svg>
|
|
<p>No tasks yet. Add your first task above!</p>
|
|
</div>
|
|
<div id="loading-state" class="loading-state">
|
|
<div class="spinner"></div>
|
|
<p>Loading tasks...</p>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<footer class="app-footer">
|
|
<p>Task Manager — Dockerized Web Application • PostgreSQL • Redis • Node.js • Nginx</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- Toast Notification -->
|
|
<div id="toast" class="toast"></div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|