diff --git a/models/todo.js b/models/todo.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/models/user.js b/models/user.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/mongodb.js b/mongodb.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/public/css/styles.css b/public/css/styles.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/public/js/app.js b/public/js/app.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/public/js/auth.js b/public/js/auth.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/public/login.html b/public/login.html
new file mode 100644
index 0000000000000000000000000000000000000000..3aefadbea2a5765083f7b4efb932c8d9885faa1a
--- /dev/null
+++ b/public/login.html
@@ -0,0 +1,160 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <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>
+ </head>
+ <body>
+ <div class="login-container">
+ <h2>Login</h2>
+ <form id="login-form" action="login.php" method="POST">
+ <input
+ type="text"
+ class="uname"
+ name="username"
+ placeholder="Username"
+ required
+ />
+ <input
+ type="password"
+ class="pass"
+ name="password"
+ placeholder="Password"
+ required
+ />
+ <button type="submit">Login</button>
+ </form>
+ <span class="error_text"></span>
+ <div class="success_message">
+ Login successful! Redirecting to your to-do list...
+ </div>
+
+ <div class="register-link">
+ 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
new file mode 100644
index 0000000000000000000000000000000000000000..fa7b6dcedd35c296847a9445e4b9f953057e962f
--- /dev/null
+++ b/public/register.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<html lang="es">
+ <head>
+ <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;
+ }
+
+ @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">
+ <h2>Register</h2>
+ <form id="register-form" action="register.php" method="POST">
+ <input
+ type="text"
+ class="uname"
+ name="username"
+ placeholder="Username"
+ required
+ />
+ <input
+ type="password"
+ class="pass"
+ name="password"
+ placeholder="Password"
+ required
+ />
+ <button type="submit">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>
+ </body>
+</html>
diff --git a/routes/todos.js b/routes/todos.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/routes/users.js b/routes/users.js
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391