Hugging Face's logo

Spaces:
Rahul23232
/
flask-mongo
Sleeping

App Files Community
Rahul23232 commited on
Commit
61dadd3
·
verified ·
1 Parent(s): 60a3b87

Upload 5 files

Browse files
Files changed (5) hide show
  1. static/css/style.css +125 -0
  2. static/js/script.js +19 -0
  3. templates/index.html +132 -0
  4. templates/summary.html +61 -0
  5. templates/update.html +36 -0
static/css/style.css ADDED
@@ -0,0 +1,125 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Centered container with soft shadow */
2
+ .container {
3
+ max-width: 500px;
4
+ background: #fff;
5
+ padding: 30px;
6
+ border-radius: 12px;
7
+ box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
8
+ text-align: center;
9
+ transition: 0.3s;
10
+ }
11
+
12
+ .container:hover {
13
+ transform: scale(1.02);
14
+ box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
15
+ }
16
+
17
+ h1 {
18
+ color: #444;
19
+ font-weight: bold;
20
+ margin-bottom: 20px;
21
+ }
22
+
23
+ label {
24
+ font-weight: bold;
25
+ margin-bottom: 5px;
26
+ color: #666;
27
+ }
28
+
29
+ input[type="text"] {
30
+ width: 100%;
31
+ padding: 12px;
32
+ border: 2px solid #ddd;
33
+ border-radius: 8px;
34
+ font-size: 16px;
35
+ transition: 0.3s;
36
+ }
37
+
38
+ input[type="text"]:focus {
39
+ border-color: #4CAF50;
40
+ outline: none;
41
+ box-shadow: 0px 0px 5px rgba(76, 175, 80, 0.5);
42
+ }
43
+
44
+ .btn {
45
+ width: 100%;
46
+ padding: 12px;
47
+ border-radius: 8px;
48
+ font-size: 16px;
49
+ font-weight: bold;
50
+ transition: 0.3s;
51
+ }
52
+
53
+ .btn-primary {
54
+ background: #007bff;
55
+ border: none;
56
+ }
57
+
58
+ .btn-primary:hover {
59
+ background: #0056b3;
60
+ }
61
+
62
+ .btn-success {
63
+ margin-top: 10px;
64
+ background: #28a745;
65
+ border: none;
66
+ }
67
+
68
+ .btn-success:hover {
69
+ background: #218838;
70
+ }
71
+
72
+ /* Dark Mode */
73
+ body.dark-mode {
74
+ background-color: #121212;
75
+ color: white;
76
+ }
77
+
78
+ .dark-mode .container {
79
+ background: #222;
80
+ box-shadow: 0px 8px 20px rgba(255, 255, 255, 0.1);
81
+ }
82
+
83
+ .dark-mode h1 {
84
+ color: #ddd;
85
+ }
86
+
87
+ .dark-mode label {
88
+ color: #bbb;
89
+ }
90
+
91
+ .dark-mode input[type="text"] {
92
+ background: #333;
93
+ color: white;
94
+ border: 2px solid #555;
95
+ }
96
+
97
+ .dark-mode .btn-primary {
98
+ background: #5cb85c;
99
+ }
100
+
101
+ .dark-mode .btn-primary:hover {
102
+ background: #4cae4c;
103
+ }
104
+
105
+ .dark-mode .btn-success {
106
+ background: #17a2b8;
107
+ }
108
+
109
+ .dark-mode .btn-success:hover {
110
+ background: #138496;
111
+ }
112
+
113
+ /* Dark Mode Toggle */
114
+ .dark-mode-switch {
115
+ position: fixed;
116
+ top: 15px;
117
+ right: 15px;
118
+ }
119
+
120
+ /* Responsive */
121
+ @media (max-width: 600px) {
122
+ .container {
123
+ padding: 20px;
124
+ }
125
+ }
static/js/script.js ADDED
@@ -0,0 +1,19 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ function confirmDelete(taskId) {
2
+ document.getElementById('deleteConfirmBtn').setAttribute('href', '/delete/' + taskId);
3
+ var deleteModal = new bootstrap.Modal(document.getElementById('deleteModal'));
4
+ deleteModal.show();
5
+ }
6
+
7
+ // Dark Mode Toggle
8
+ function toggleDarkMode() {
9
+ document.body.classList.toggle("dark-mode");
10
+ localStorage.setItem("darkMode", document.body.classList.contains("dark-mode"));
11
+ }
12
+
13
+ // Load dark mode preference
14
+ document.addEventListener("DOMContentLoaded", function() {
15
+ if (localStorage.getItem("darkMode") === "true") {
16
+ document.body.classList.add("dark-mode");
17
+ document.getElementById("darkModeToggle").checked = true;
18
+ }
19
+ });
templates/index.html ADDED
@@ -0,0 +1,132 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>To-Do List</title>
7
+
8
+ <!-- Favicon -->
9
+ <link rel="icon" type="image/x-icon" href="https://cdn.glitch.global/fe6b1c62-8584-49f8-bfd0-017a3fdbea2d/images.png?v=1741159382343">
10
+
11
+ <!-- Bootstrap CSS -->
12
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
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
+ <!-- Dark Mode Toggle -->
20
+ <div class="form-check form-switch dark-mode-switch">
21
+ <input class="form-check-input" type="checkbox" id="darkModeToggle" onchange="toggleDarkMode()">
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>
templates/summary.html ADDED
@@ -0,0 +1,61 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Task Summary</title>
7
+ <link rel="icon" type="image/x-icon" href="https://cdn.glitch.global/fe6b1c62-8584-49f8-bfd0-017a3fdbea2d/images.png?v=1741159382343">
8
+
9
+ <!-- Bootstrap CSS -->
10
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
11
+
12
+ <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
13
+ </head>
14
+ <body>
15
+ <!-- Dark Mode Toggle -->
16
+ <div class="form-check form-switch dark-mode-switch">
17
+ <input class="form-check-input" type="checkbox" id="darkModeToggle" onchange="toggleDarkMode()">
18
+ <label class="form-check-label" for="darkModeToggle">Dark Mode</label>
19
+ </div>
20
+
21
+ <div class="container">
22
+ <h1 class="mb-4">Task Summary</h1>
23
+
24
+ <!-- Summary Section -->
25
+ <div class="row">
26
+ <div class="col-md-4 fade-in">
27
+ <div class="card text-center">
28
+ <div class="card-header bg-primary text-white">Total Tasks</div>
29
+ <div class="card-body">
30
+ <h2>{{ total_tasks }}</h2>
31
+ </div>
32
+ </div>
33
+ </div>
34
+ <div class="col-md-4 fade-in">
35
+ <div class="card text-center">
36
+ <div class="card-header bg-success text-white">Completed Tasks</div>
37
+ <div class="card-body">
38
+ <h2>{{ completed_tasks }}</h2>
39
+ </div>
40
+ </div>
41
+ </div>
42
+ <div class="col-md-4 fade-in">
43
+ <div class="card text-center">
44
+ <div class="card-header bg-warning text-dark">Pending Tasks</div>
45
+ <div class="card-body">
46
+ <h2>{{ pending_tasks }}</h2>
47
+ </div>
48
+ </div>
49
+ </div>
50
+ </div>
51
+
52
+ <!-- Back to Home Button -->
53
+ <div class="text-center mt-4">
54
+ <a href="/" class="btn btn-secondary">Back to Home</a>
55
+ </div>
56
+ </div>
57
+ <script src="{{ url_for('static', filename='js/script.js') }}"></script>
58
+ <!-- Bootstrap JS -->
59
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
60
+ </body>
61
+ </html>
templates/update.html ADDED
@@ -0,0 +1,36 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <link rel="icon" type="image/x-icon" href="https://cdn.glitch.global/fe6b1c62-8584-49f8-bfd0-017a3fdbea2d/images.png?v=1741159382343">
7
+ <title>Update Task</title>
8
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
9
+ <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
10
+ </head>
11
+ <body>
12
+ <!-- Dark Mode Toggle -->
13
+ <div class="form-check form-switch dark-mode-switch">
14
+ <input class="form-check-input" type="checkbox" id="darkModeToggle" onchange="toggleDarkMode()">
15
+ <label class="form-check-label" for="darkModeToggle">Dark Mode</label>
16
+ </div>
17
+
18
+ <div class="container fade-in">
19
+ <h1>Update Task</h1>
20
+ <form action="{{ url_for('update_todo', task_id=task['_id']) }}" method="POST">
21
+ <label for="updated_task">Task:</label>
22
+ <input
23
+ type="text"
24
+ id="updated_task"
25
+ name="updated_task"
26
+ value="{{ task['task'] }}"
27
+ required
28
+ />
29
+ <button type="submit" class="btn btn-primary">Update</button>
30
+ </form>
31
+ <a href="{{ url_for('index') }}" class="btn btn-success">Back to Tasks</a>
32
+ </div>
33
+
34
+ <script src="{{ url_for('static', filename='js/script.js') }}"></script>
35
+ </body>
36
+ </html>