diff --git a/public/css/login.css b/public/css/login.css
new file mode 100644
index 0000000000000000000000000000000000000000..aa5f611921103f83459279bd55899f0e4794297a
--- /dev/null
+++ b/public/css/login.css
@@ -0,0 +1,124 @@
+body {
+ font-family: Helvetica, Arial, sans-serif;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ margin: 0;
+ background-color: #f0f0f0;
+}
+.login-container {
+ background-color: white;
+ padding: 2rem;
+ border-radius: 8px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ width: 100%;
+ max-width: 320px;
+ margin: 0 auto;
+}
+.register-container {
+ background-color: white;
+ padding: 2rem;
+ border-radius: 8px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ width: 100%;
+ max-width: 320px;
+ margin: 0 auto;
+}
+@media (min-width: 600px) {
+ .login-container {
+ padding: 2rem;
+ }
+ .register-container {
+ padding: 2rem;
+ }
+}
+
+@media (min-width: 900px) {
+ .login-container {
+ max-width: 350px;
+ }
+ .register-container {
+ max-width: 350px;
+ }
+}
+h2 {
+ text-align: center;
+ color: #333;
+}
+form {
+ display: flex;
+ flex-direction: column;
+}
+input {
+ margin: 0.5rem 0;
+ padding: 0.5rem;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+}
+button {
+ margin-top: 1rem;
+ padding: 0.5rem;
+ background-color: #007bff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+button:hover {
+ background-color: #0056b3;
+}
+.submit-register {
+ background-color: #28a745;
+}
+.submit-register:hover {
+ background-color: #218838;
+}
+.error_text {
+ display: block;
+ color: red;
+ margin-top: 1rem;
+ font-size: 0.9rem;
+ font-style: italic;
+ text-align: center;
+}
+.success_message {
+ display: none;
+ color: #28a745;
+ margin-top: 1rem;
+ font-size: 1rem;
+ text-align: center;
+ opacity: 0;
+ transition: opacity 0.6s ease;
+}
+.success_message.show {
+ display: block;
+ opacity: 1;
+}
+.register-link {
+ text-align: center;
+ margin-top: 1.5rem;
+ font-size: 0.9rem;
+ color: #555;
+}
+.register-link a {
+ color: #007bff;
+ text-decoration: none;
+}
+.register-link a:hover {
+ text-decoration: underline;
+}
+.login-link {
+ text-align: center;
+ margin-top: 1.5rem;
+ font-size: 0.9rem;
+ color: #555;
+}
+.login-link a {
+ color: #007bff;
+ text-decoration: none;
+}
+.login-link a:hover {
+ text-decoration: underline;
+}
\ No newline at end of file
diff --git a/public/css/main.css b/public/css/main.css
new file mode 100644
index 0000000000000000000000000000000000000000..6b5e56bc719a4e01c71b575410afae1a4226c0bb
--- /dev/null
+++ b/public/css/main.css
@@ -0,0 +1,137 @@
+/* Reset default styles */
+body {
+ margin: 0;
+ padding: 0;
+ font-family:Verdana, Geneva, Tahoma, sans-serif;
+}
+
+/* Container for the entire layout */
+.container {
+ display: flex;
+ flex-direction: column;
+ min-height: 100vh;
+}
+
+/* Header styling */
+.header {
+ background-color: #ddf;
+ color: #000;
+ padding: 10px;
+ padding-bottom: 20px;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.header h1 {
+ margin: 0;
+}
+
+header button {
+ margin-top: 0px;
+}
+
+.user-actions {
+ display: flex;
+ gap: 10px;
+}
+
+/* Main content styling */
+.main-content {
+ display: flex;
+ flex-grow: 1; /* Makes the main content stretch to fill the remaining space */
+ overflow-y: hidden; /* Hides overflow within the main content */
+}
+
+/* Sidebar styling */
+.sidebar {
+ width: 200px; /* Adjust the width as needed */
+ padding: 25px;
+ background-color: #ddf;
+}
+
+.status-bar {
+ list-style: none;
+ padding: 0;
+}
+
+/* Task list styling */
+.task-list {
+ flex-grow: 1; /* Makes the task list stretch to fill the remaining space */
+ padding: 10px;
+ padding-top: 25px;
+ overflow-y: auto; /* Enables vertical scrolling within the task list */
+ max-height: calc(100vh - 100px); /* Adjust the max-height as needed */
+}
+
+.task {
+ border-bottom: 1px solid #aaf;
+ padding: 10px;
+}
+
+.task-actions {
+ display: flex;
+ justify-content: flex-end;
+ gap: 5px;
+}
+
+p {
+ font-size: 24px;
+ margin-bottom: 0;
+}
+
+button {
+ margin-top: 1rem;
+ padding: 0.5rem;
+ background-color: #bbf;
+ color: #000;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: background-color 0.3s;
+}
+
+button:hover {
+ background-color: #99f;
+}
+
+.hide-btn {
+ background-color: #0f0;
+}
+
+.hide-btn:hover {
+ background-color: #0c0;
+}
+
+.edit-btn {
+ background-color: #ff0;
+}
+
+.edit-btn:hover {
+ background-color: #cc0;
+}
+
+.delete-btn {
+ background-color: #f00;
+}
+
+.delete-btn:hover {
+ background-color: #c00;
+}
+
+.add-btn {
+ background-color: #f70;
+}
+
+.add-btn:hover {
+ background-color: #f40;
+}
+
+.new-btn {
+ width: 40%;
+ font-weight: bold;
+}
+
+input {
+ font-size: 24px;
+}
\ No newline at end of file
diff --git a/public/css/styles.css b/public/css/styles.css
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/public/index.html b/public/index.html
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..ada57ea8c9c12520292fade7ef865dc207dc0bcd 100644
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,117 @@
+<!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>
+ <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>
+ </div>
+ </body>
+</html>
\ No newline at end of file
diff --git a/public/login.html b/public/login.html
index 3aefadbea2a5765083f7b4efb932c8d9885faa1a..931d251ce346797a8e48af9edab290fdf86f007b 100644
--- a/public/login.html
+++ b/public/login.html
@@ -4,104 +4,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login</title>
- <style>
- body {
- font-family: Helvetica, Arial, sans-serif;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- margin: 0;
- background-color: #f0f0f0;
- }
- .login-container {
- background-color: white;
- padding: 2rem;
- border-radius: 8px;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
- width: 100%;
- max-width: 320px;
- margin: 0 auto;
- }
-
- @media (min-width: 600px) {
- .login-container {
- padding: 2rem;
- }
- }
-
- @media (min-width: 900px) {
- .login-container {
- max-width: 350px;
- }
- }
-
- h2 {
- text-align: center;
- color: #333;
- }
- form {
- display: flex;
- flex-direction: column;
- }
- input {
- margin: 0.5rem 0;
- padding: 0.5rem;
- border: 1px solid #ddd;
- border-radius: 4px;
- }
- button {
- margin-top: 1rem;
- padding: 0.5rem;
- background-color: #007bff;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- transition: background-color 0.3s;
- }
- button:hover {
- background-color: #0056b3;
- }
- .error_text {
- display: block;
- color: red;
- margin-top: 1rem;
- font-size: 0.9rem;
- font-style: italic;
- text-align: center;
- }
- .success_message {
- display: none;
- color: #28a745;
- margin-top: 1rem;
- font-size: 1rem;
- text-align: center;
- opacity: 0;
- transition: opacity 0.6s ease;
- }
-
- .success_message.show {
- display: block;
- opacity: 1;
- }
-
- .register-link {
- text-align: center;
- margin-top: 1.5rem;
- font-size: 0.9rem;
- color: #555;
- }
-
- .register-link a {
- color: #007bff;
- text-decoration: none;
- }
-
- .register-link a:hover {
- text-decoration: underline;
- }
- </style>
+ <link rel="stylesheet" href="./css/login.css">
</head>
<body>
<div class="login-container">
@@ -132,29 +35,5 @@
Don't have an account? <a href="register.html">Create one</a>.
</div>
</div>
-
- <script>
- document.querySelector("form").addEventListener("submit", function (e) {
- e.preventDefault();
- const username = document.querySelector(".uname").value;
- const password = document.querySelector(".pass").value;
- const errorText = document.querySelector(".error_text");
- const successMessage = document.querySelector(".success_message");
-
- if (username === "admin" && password === "password") {
- errorText.textContent = "";
-
- successMessage.classList.add("show");
-
- document.getElementById("login-form").style.display = "none";
-
- setTimeout(function () {
- window.location.href = "todo.html";
- }, 2000);
- } else {
- errorText.textContent = "Invalid username or password";
- }
- });
- </script>
</body>
</html>
diff --git a/public/register.html b/public/register.html
index fa7b6dcedd35c296847a9445e4b9f953057e962f..053c7f838ca2682a9659bc62af0d3ffa4e7f530c 100644
--- a/public/register.html
+++ b/public/register.html
@@ -4,88 +4,8 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Register</title>
- <style>
- body {
- font-family: Helvetica, Arial, sans-serif;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- margin: 0;
- background-color: #f0f0f0;
- }
- .register-container {
- background-color: white;
- padding: 2rem;
- border-radius: 8px;
- box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
- width: 100%;
- max-width: 320px;
- margin: 0 auto;
- }
+ <link rel="stylesheet" href="./css/login.css">
- @media (min-width: 600px) {
- .register-container {
- padding: 2rem;
- }
- }
-
- @media (min-width: 900px) {
- .register-container {
- max-width: 350px;
- }
- }
-
- h2 {
- text-align: center;
- color: #333;
- }
- form {
- display: flex;
- flex-direction: column;
- }
- input {
- margin: 0.5rem 0;
- padding: 0.5rem;
- border: 1px solid #ddd;
- border-radius: 4px;
- }
- button {
- margin-top: 1rem;
- padding: 0.5rem;
- background-color: #28a745;
- color: white;
- border: none;
- border-radius: 4px;
- cursor: pointer;
- transition: background-color 0.3s;
- }
- button:hover {
- background-color: #218838;
- }
- .error_text {
- display: block;
- color: red;
- margin-top: 1rem;
- font-size: 0.9rem;
- font-style: italic;
- text-align: center;
- }
- .success_message {
- display: none;
- color: #28a745;
- margin-top: 1rem;
- font-size: 1rem;
- text-align: center;
- opacity: 0;
- transition: opacity 0.6s ease;
- }
-
- .success_message.show {
- display: block;
- opacity: 1;
- }
- </style>
</head>
<body>
<div class="register-container">
@@ -105,35 +25,14 @@
placeholder="Password"
required
/>
- <button type="submit">Register</button>
+ <button type="submit" class="submit-register">Register</button>
</form>
<span class="error_text"></span>
<div class="success_message">Registration successful! Redirecting...</div>
- </div>
-
- <script>
- document.querySelector("form").addEventListener("submit", function (e) {
- e.preventDefault();
- const username = document.querySelector(".uname").value;
- const password = document.querySelector(".pass").value;
- const errorText = document.querySelector(".error_text");
- const successMessage = document.querySelector(".success_message");
- if (username.length >= 4 && password.length >= 6) {
- errorText.textContent = "";
-
- successMessage.classList.add("show");
-
- document.getElementById("register-form").style.display = "none";
-
- setTimeout(function () {
- window.location.href = "login.html";
- }, 2000);
- } else {
- errorText.textContent =
- "El nombre de usuario debe tener al menos 4 caracteres y la contraseña al menos 6 caracteres.";
- }
- });
- </script>
+ <div class="login-link">
+ Already have an account? <a href="login.html">Log in</a>.
+ </div>
+ </div>
</body>
</html>