From 64f879090b7dd7cef568483edf373455e61bafae Mon Sep 17 00:00:00 2001
From: Jesus Galaz <jesusgalazr@icloud.com>
Date: Sun, 13 Oct 2024 14:33:42 +0200
Subject: [PATCH] Fixing some design issues
---
public/css/index.css | 231 +++++++++++++++++++++----------------------
public/index.html | 144 ++++++---------------------
2 files changed, 146 insertions(+), 229 deletions(-)
diff --git a/public/css/index.css b/public/css/index.css
index b0973e6..1d82d71 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -1,117 +1,116 @@
body {
- font-family: "Arial", sans-serif;
- background-color: #f5f5f5;
- color: #333;
- line-height: 1.6;
- margin: 0;
- padding: 0;
- }
- .container {
- max-width: 600px;
- margin: 2rem auto;
- padding: 2rem;
- background-color: #fff;
- border-radius: 8px;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
- }
- header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 2rem;
- }
- h1 {
- font-size: 2rem;
- font-weight: 300;
- margin: 0;
- }
- #logout-btn {
- background-color: transparent;
- border: 1px solid #333;
- color: #333;
- padding: 0.5rem 1rem;
- border-radius: 4px;
- cursor: pointer;
- transition: all 0.3s ease;
- }
- #logout-btn:hover {
- background-color: #333;
- color: #fff;
- }
- #new-task-form {
- display: flex;
- margin-bottom: 2rem;
- }
- input[type="text"] {
- flex-grow: 1;
- padding: 0.75rem;
- border: 1px solid #ddd;
- border-radius: 4px 0 0 4px;
- font-size: 1rem;
- }
- button[type="submit"] {
- padding: 0.75rem 1.5rem;
- background-color: #4caf50;
- color: #fff;
- border: none;
- border-radius: 0 4px 4px 0;
- cursor: pointer;
- transition: background-color 0.3s ease;
- }
- button[type="submit"]:hover {
- background-color: #45a049;
- }
- .task-list ul {
- list-style-type: none;
- padding: 0;
- }
- .task-list li {
- background-color: #f9f9f9;
- border-left: 4px solid #4caf50;
- margin-bottom: 1rem;
- padding: 1rem;
- display: flex;
- justify-content: space-between;
- align-items: center;
- transition: all 0.3s ease;
- }
- .task-list li:hover {
- background-color: #f0f0f0;
- }
- .task-list li.completed {
- border-left-color: #999;
- opacity: 0.6;
- }
- .task-list li.completed span {
- text-decoration: line-through;
- }
- .task-actions {
- display: flex;
- gap: 0.5rem;
- }
- .task-list li button {
- background-color: transparent;
- border: none;
- cursor: pointer;
- font-size: 1.2rem;
- transition: color 0.3s ease;
- padding: 0;
- width: 24px;
- height: 24px;
- display: flex;
- align-items: center;
- justify-content: center;
- }
- .complete-btn {
- color: #4caf50;
- }
- .complete-btn:hover {
- color: #45a049;
- }
- .delete-btn {
- color: #d9534f;
- }
- .delete-btn:hover {
- color: #c9302c;
- }
-
\ No newline at end of file
+ font-family: "Arial", sans-serif;
+ background-color: #f5f5f5;
+ color: #333;
+ line-height: 1.6;
+ margin: 0;
+ padding: 0;
+}
+.container {
+ max-width: 600px;
+ margin: 2rem auto;
+ padding: 2rem;
+ background-color: #fff;
+ border-radius: 8px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 2rem;
+}
+h1 {
+ font-size: 2rem;
+ font-weight: 300;
+ margin: 0;
+}
+#logout-btn {
+ background-color: transparent;
+ border: 1px solid #333;
+ color: #333;
+ padding: 0.5rem 1rem;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: all 0.3s ease;
+}
+#logout-btn:hover {
+ background-color: #333;
+ color: #fff;
+}
+#new-task-form {
+ display: flex;
+ margin-bottom: 2rem;
+}
+input[type="text"] {
+ flex-grow: 1;
+ padding: 0.75rem;
+ border: 1px solid #ddd;
+ border-radius: 4px 0 0 4px;
+ font-size: 1rem;
+}
+button[type="submit"] {
+ padding: 0.75rem 1.5rem;
+ background-color: #4caf50;
+ color: #fff;
+ border: none;
+ border-radius: 0 4px 4px 0;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+button[type="submit"]:hover {
+ background-color: #45a049;
+}
+.task-list ul {
+ list-style-type: none;
+ padding: 0;
+}
+.task-list li {
+ background-color: #f9f9f9;
+ border-left: 4px solid #4caf50;
+ margin-bottom: 1rem;
+ padding: 1rem;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ transition: all 0.3s ease;
+}
+.task-list li:hover {
+ background-color: #f0f0f0;
+}
+.task-list li.completed {
+ border-left-color: #999;
+ opacity: 0.6;
+}
+.task-list li.completed span {
+ text-decoration: line-through;
+}
+.task-actions {
+ display: flex;
+ gap: 0.5rem;
+}
+.task-list li button {
+ background-color: transparent;
+ border: none;
+ cursor: pointer;
+ font-size: 1.2rem;
+ transition: color 0.3s ease;
+ padding: 0;
+ width: 24px;
+ height: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.complete-btn {
+ color: #4caf50;
+}
+.complete-btn:hover {
+ color: #45a049;
+}
+.delete-btn {
+ color: #d9534f;
+}
+.delete-btn:hover {
+ color: #c9302c;
+}
diff --git a/public/index.html b/public/index.html
index ada57ea..ceb9136 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,117 +1,35 @@
<!DOCTYPE html>
<html lang="en">
-<head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>To-Do Dashboard</title>
- <link rel="stylesheet" href="./css/main.css"> </head>
-<body>
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>ToDo</title>
+ <link rel="stylesheet" href="./css/index.css" />
+ <script src="./js/index.js" defer></script>
+ </head>
+ <body>
<div class="container">
- <header class="header">
- <h1>To-Do Dashboard</h1>
- <button class="new-btn">New Task</button>
- <div class="user-actions">
- <button class id="change-password-btn">Change Password</button>
- <button id="logout-btn">Logout</button>
- </div>
- </header>
- <main class="main-content">
- <aside class="sidebar">
- <h2>Status</h2>
- <ul class="status-bar">
- <li><progress id="file" value="3" max="5"> 60% </progress></li>
- <li>Total Tasks: <span id="total-tasks">5</span></li>
- <li>Active: <span id="active-tasks">2</span></li>
- <li>Hidden: <span id="hidden-tasks">3</span></li>
- <li><button id="show-hidden-btn">Show Hidden</button></li>
- </ul>
- </aside>
- <section class="task-list">
- <h2>Tasks</h2>
- <ul>
- <li class="task">
- <form method="POST" action="" autocomplete="off">
- <input type="text" name="task" style="width:60%;">
- <div class="task-actions">
- <button class="add-btn">Add</button>
- </div>
- </form>
- </li>
- <li class="task">
- <p>Finish Project Report</p>
- <div class="task-actions">
- <button class="hide-btn">Done</button>
- <button class="edit-btn">Edit</button>
- <button class="delete-btn">Delete</button>
- </div>
- </li>
- <li class="task">
- <p>Buy Groceries</p>
- <div class="task-actions">
- <button class="hide-btn">Done</button>
- <button class="edit-btn">Edit</button>
- <button class="delete-btn">Delete</button>
- </div>
- </li>
- <li class="task">
- <p>Finish Project Report</p>
- <div class="task-actions">
- <button class="hide-btn">Done</button>
- <button class="edit-btn">Edit</button>
- <button class="delete-btn">Delete</button>
- </div>
- </li>
- <li class="task">
- <p>Buy Groceries</p>
- <div class="task-actions">
- <button class="hide-btn">Done</button>
- <button class="edit-btn">Edit</button>
- <button class="delete-btn">Delete</button>
- </div>
- </li>
- <li class="task">
- <p>Finish Project Report</p>
- <div class="task-actions">
- <button class="hide-btn">Done</button>
- <button class="edit-btn">Edit</button>
- <button class="delete-btn">Delete</button>
- </div>
- </li>
- <li class="task">
- <p>Buy Groceries</p>
- <div class="task-actions">
- <button class="hide-btn">Done</button>
- <button class="edit-btn">Edit</button>
- <button class="delete-btn">Delete</button>
- </div>
- </li>
- <li class="task">
- <p>Finish Project Report</p>
- <div class="task-actions">
- <button class="hide-btn">Done</button>
- <button class="edit-btn">Edit</button>
- <button class="delete-btn">Delete</button>
- </div>
- </li>
- <li class="task">
- <p>Buy Groceries</p>
- <div class="task-actions">
- <button class="hide-btn">Done</button>
- <button class="edit-btn">Edit</button>
- <button class="delete-btn">Delete</button>
- </div>
- </li>
- <li class="task">
- <p>Finish Project Report</p>
- <div class="task-actions">
- <button class="hide-btn">Done</button>
- <button class="edit-btn">Edit</button>
- <button class="delete-btn">Delete</button>
- </div>
- </li>
- </ul>
- </section>
- </main>
+ <header>
+ <h1>ToDo List</h1>
+ <button id="logout-btn">Logout</button>
+ </header>
+
+ <main>
+ <form id="new-task-form">
+ <input
+ type="text"
+ name="task"
+ placeholder="Add a new task..."
+ required
+ />
+ <button type="submit">Add</button>
+ </form>
+
+ <!-- Lista de tareas -->
+ <section class="task-list">
+ <ul id="task-list"></ul>
+ </section>
+ </main>
</div>
- </body>
-</html>
\ No newline at end of file
+ </body>
+</html>
--
GitLab