76 lines
4.0 KiB
PHP
76 lines
4.0 KiB
PHP
<?php
|
|
require_once __DIR__ . '/db/config.php';
|
|
|
|
$stmt = db()->query("SELECT * FROM todos ORDER BY created_at DESC");
|
|
$todos = $stmt->fetchAll();
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>To-Do List</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="stylesheet" href="assets/css/custom.css?v=<?php echo time(); ?>">
|
|
<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=Poppins:wght@400;600&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid p-0">
|
|
<div class="hero-section text-center text-white">
|
|
<img src="https://picsum.photos/seed/todo-hero/1200/400" alt="A person organizing their tasks on a whiteboard." class="img-fluid">
|
|
<div class="hero-text">
|
|
<h1>My To-Do List</h1>
|
|
<p>Organize your life, one task at a time.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="container mt-5">
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<div class="card shadow-sm">
|
|
<div class="card-body">
|
|
<h2 class="card-title mb-4">Add a new task</h2>
|
|
<form id="add-todo-form">
|
|
<div class="input-group mb-3">
|
|
<input type="text" id="task-input" class="form-control" placeholder="e.g., Buy groceries" required>
|
|
<button class="btn btn-primary" type="submit"><i class="fas fa-plus"></i> Add</button>
|
|
</div>
|
|
</form>
|
|
<hr>
|
|
<h2 class="card-title mb-4">Tasks</h2>
|
|
<ul id="todo-list" class="list-group list-group-flush">
|
|
<?php foreach ($todos as $todo): ?>
|
|
<li class="list-group-item d-flex justify-content-between align-items-center <?php echo $todo['is_done'] ? 'done' : ''; ?>" data-id="<?php echo $todo['id']; ?>">
|
|
<span><?php echo htmlspecialchars($todo['task']); ?></span>
|
|
<div>
|
|
<?php if (!$todo['is_done']): ?>
|
|
<button class="btn btn-success btn-sm done-btn"><i class="fas fa-check"></i></button>
|
|
<?php else: ?>
|
|
<button class="btn btn-warning btn-sm undo-btn"><i class="fas fa-undo"></i></button>
|
|
<?php endif; ?>
|
|
</div>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card shadow-sm mb-4">
|
|
<img src="https://picsum.photos/seed/todo-1/400/300" class="card-img-top" alt="A notebook and pen on a desk.">
|
|
</div>
|
|
<div class="card shadow-sm">
|
|
<img src="https://picsum.photos/seed/todo-2/400/300" class="card-img-top" alt="A person checking off a to-do list on their phone.">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="assets/js/main.js?v=<?php echo time(); ?>"></script>
|
|
</body>
|
|
</html>
|