Spaces:
Sleeping
Sleeping
Update templates/index.html
Browse files- templates/index.html +12 -123
templates/index.html
CHANGED
|
@@ -2,131 +2,20 @@
|
|
| 2 |
<html lang="en">
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
-
<
|
| 6 |
-
<
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css">
|
| 14 |
-
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
| 15 |
-
|
| 16 |
</head>
|
| 17 |
<body>
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
<
|
| 22 |
-
<label class="form-check-label" for="darkModeToggle">Dark Mode</label>
|
| 23 |
</div>
|
| 24 |
-
|
| 25 |
-
<div class="container mt-5 fade-in">
|
| 26 |
-
<h1 class="text-center mb-4">To-Do List</h1>
|
| 27 |
-
<marquee><h3 class="text-center mb-4">MongoDB (CRUD operations, Aggregation)</h3></marquee>
|
| 28 |
-
|
| 29 |
-
<center><p style="color:green;">{{ datetime }}</p></center>
|
| 30 |
-
|
| 31 |
-
<!-- Link to Summary Page -->
|
| 32 |
-
<div class="text-center mt-4">
|
| 33 |
-
<a href="/summary" class="btn btn-info">
|
| 34 |
-
<i class="bi bi-bar-chart-line"></i> View Task Summary
|
| 35 |
-
</a>
|
| 36 |
-
<br><br>
|
| 37 |
-
</div>
|
| 38 |
-
|
| 39 |
-
<!-- Flash Messages -->
|
| 40 |
-
{% with messages = get_flashed_messages(with_categories=true) %}
|
| 41 |
-
{% if messages %}
|
| 42 |
-
<div class="container mt-3">
|
| 43 |
-
{% for category, message in messages %}
|
| 44 |
-
<div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
|
| 45 |
-
{{ message }}
|
| 46 |
-
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
| 47 |
-
</div>
|
| 48 |
-
{% endfor %}
|
| 49 |
-
</div>
|
| 50 |
-
{% endif %}
|
| 51 |
-
{% endwith %}
|
| 52 |
-
|
| 53 |
-
<!-- Add Task Form -->
|
| 54 |
-
<form action="/add" method="POST" class="mb-4">
|
| 55 |
-
{% if csrf_token %}
|
| 56 |
-
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
| 57 |
-
{% endif %}
|
| 58 |
-
<div class="input-group">
|
| 59 |
-
<input type="text" name="task" class="form-control" placeholder="Enter a new task" required>
|
| 60 |
-
<button type="submit" class="btn btn-primary"><i class="bi bi-plus-lg"></i> Add Task</button>
|
| 61 |
-
</div>
|
| 62 |
-
</form>
|
| 63 |
-
|
| 64 |
-
<!-- Tasks Table -->
|
| 65 |
-
<table class="table table-bordered table-hover fade-in">
|
| 66 |
-
<thead class="table-light">
|
| 67 |
-
<tr>
|
| 68 |
-
<th>Sr No.</th>
|
| 69 |
-
<th>Task</th>
|
| 70 |
-
<th>Created At</th>
|
| 71 |
-
<th>Status</th>
|
| 72 |
-
<th>Actions</th>
|
| 73 |
-
</tr>
|
| 74 |
-
</thead>
|
| 75 |
-
<tbody>
|
| 76 |
-
{% for todo in todos %}
|
| 77 |
-
<tr>
|
| 78 |
-
<td>{{ loop.index }}</td>
|
| 79 |
-
<td>{{ todo.task }}</td>
|
| 80 |
-
<td>{{ todo.created_at }}</td>
|
| 81 |
-
<td>
|
| 82 |
-
{% if todo.done %}
|
| 83 |
-
<span class="badge bg-success">Completed</span>
|
| 84 |
-
{% else %}
|
| 85 |
-
<span class="badge bg-warning text-dark">Pending</span>
|
| 86 |
-
{% endif %}
|
| 87 |
-
</td>
|
| 88 |
-
<td>
|
| 89 |
-
{% if not todo.done %}
|
| 90 |
-
<a href="/complete/{{ todo._id }}" class="btn btn-success btn-sm">
|
| 91 |
-
<i class="bi bi-check-lg"></i> Complete
|
| 92 |
-
</a>
|
| 93 |
-
{% endif %}
|
| 94 |
-
<a href="{{ url_for('update_todo', task_id=todo['_id']) }}" class="btn btn-warning btn-sm">
|
| 95 |
-
<i class="bi bi-pencil-square"></i> Edit
|
| 96 |
-
</a>
|
| 97 |
-
<a class="btn btn-danger btn-sm" href="javascript:void(0);" onclick="confirmDelete('{{ todo._id }}')">
|
| 98 |
-
<i class="bi bi-trash"></i> Delete
|
| 99 |
-
</a>
|
| 100 |
-
</td>
|
| 101 |
-
</tr>
|
| 102 |
-
{% endfor %}
|
| 103 |
-
</tbody>
|
| 104 |
-
</table>
|
| 105 |
-
|
| 106 |
-
</div>
|
| 107 |
-
|
| 108 |
-
<!-- Delete Confirmation Modal -->
|
| 109 |
-
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
|
| 110 |
-
<div class="modal-dialog">
|
| 111 |
-
<div class="modal-content">
|
| 112 |
-
<div class="modal-header">
|
| 113 |
-
<h5 class="modal-title" id="deleteModalLabel">Confirm Deletion</h5>
|
| 114 |
-
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
| 115 |
-
</div>
|
| 116 |
-
<div class="modal-body">
|
| 117 |
-
Are you sure you want to delete this task? This action cannot be undone.
|
| 118 |
-
</div>
|
| 119 |
-
<div class="modal-footer">
|
| 120 |
-
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
|
| 121 |
-
<a id="deleteConfirmBtn" href="#" class="btn btn-danger">Delete</a>
|
| 122 |
-
</div>
|
| 123 |
-
</div>
|
| 124 |
-
</div>
|
| 125 |
-
</div>
|
| 126 |
-
|
| 127 |
-
<!-- JavaScript -->
|
| 128 |
-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
| 129 |
-
<script src="{{ url_for('static', filename='js/script.js') }}"></script>
|
| 130 |
-
|
| 131 |
</body>
|
| 132 |
</html>
|
|
|
|
| 2 |
<html lang="en">
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
+
<title>Dashboard</title>
|
| 6 |
+
<style>
|
| 7 |
+
body { font-family: Arial, sans-serif; background-color: #f4f4f4; }
|
| 8 |
+
.container { width: 50%; margin: 50px auto; background: white; padding: 20px; border-radius: 8px; text-align: center; }
|
| 9 |
+
h1 { color: #333; }
|
| 10 |
+
a { text-decoration: none; color: white; background: #007BFF; padding: 10px 15px; border-radius: 5px; }
|
| 11 |
+
a:hover { background: #0056b3; }
|
| 12 |
+
</style>
|
|
|
|
|
|
|
|
|
|
| 13 |
</head>
|
| 14 |
<body>
|
| 15 |
+
<div class="container">
|
| 16 |
+
<h1>Welcome, {{ username }} 🎉</h1>
|
| 17 |
+
<p>You are successfully logged in.</p>
|
| 18 |
+
<a href="{{ url_for('logout') }}">Logout</a>
|
|
|
|
| 19 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 20 |
</body>
|
| 21 |
</html>
|