Inicio Explorar Ayuda
Iniciar sesión
Liontix
/
Scheduler-Backend
1
0
Fork 0
Archivos Incidencias 0 Pull Requests 0 Wiki
Explorar el Código

CSS refactored

Liontix hace 11 meses
padre
5f1db3d02d
commit
0229616ad8
Se han modificado 19 ficheros con 280 adiciones y 329 borrados
Dividir vista Mostrar estadísticas de diff
  1. 1 1
      README.md
  2. 5 4
      public/html/appointments.html
  3. 6 5
      public/html/appointmentscreator.html
  4. 6 2
      public/html/auth.html
  5. 4 3
      public/html/bookings.html
  6. 9 5
      public/html/schedule.html
  7. 3 8
      public/javascripts/appointments.js
  8. 1 8
      public/javascripts/bookings.js
  9. 0 1
      public/javascripts/creator-appointments.js
  10. 1 1
      public/javascripts/schedule.js
  11. 12 0
      public/javascripts/utils.js
  12. 20 87
      public/stylesheets/appointments.css
  13. 17 27
      public/stylesheets/auth.css
  14. 15 85
      public/stylesheets/bookings.css
  15. 26 40
      public/stylesheets/create-appointment.css
  16. 16 8
      public/stylesheets/navbar.css
  17. 25 40
      public/stylesheets/schedule.css
  18. 48 4
      public/stylesheets/style.css
  19. 65 0
      public/stylesheets/tables.css

+ 1 - 1
README.md
Ver fichero 

@@ -1,5 +1,5 @@
 
 # README
 
-Ersteller: Paul Göttsche und Oliver Deutsch
 
+Ersteller: Oliver Deutsch
 
 
 ## Usage
 
 Rename `.env-example` to `.env` and set the secrets. Then install all the

+ 5 - 4
public/html/appointments.html
Ver fichero 

@@ -4,9 +4,10 @@
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Appointment Table</title>
 
-    <script src="../javascripts/appointments.js" async></script>
 
-    <script src="../javascripts/navbar.js" async></script>
 
-    <link rel="stylesheet" href="../stylesheets/navbar.css">
 
+    <script type="module" src="../javascripts/utils.js" async></script>
 
+    <script type="module" src="../javascripts/appointments.js" async></script>
 
+    <script type="module" src="../javascripts/navbar.js" async></script>
 
+    <link rel="stylesheet" href="../stylesheets/style.css">
 
     <link rel="stylesheet" href="../stylesheets/appointments.css">
 
 </head>
 
 <body>
 
@@ -22,7 +23,7 @@
 
 
 <div class="container">
 
 
-    <h2>Appointments</h2>
 
+    <h2 class="heading">Appointments</h2>
 
     <table>
 
         <thead>
 
         <tr>

+ 6 - 5
public/html/appointmentscreator.html
Ver fichero 

@@ -4,10 +4,11 @@
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Create Appointment</title>
 
-    <script src="../javascripts/navbar.js" async></script>
 
-    <link rel="stylesheet" href="../stylesheets/navbar.css">
 
+    <script type="module" src="../javascripts/utils.js" async></script>
 
+    <script type="module" src="../javascripts/navbar.js" async></script>
 
+    <script type="module" src="../javascripts/creator-appointments.js" async></script>
 
+    <link rel="stylesheet" href="../stylesheets/style.css">
 
     <link rel="stylesheet" href="../stylesheets/create-appointment.css">
 
-    <script src="../javascripts/creator-appointments.js" async></script>
 
 </head>
 
 <body>
 
 
@@ -48,8 +49,8 @@
 
                 <input type="text" id="place" placeholder="Enter location" required>
 
             </div>
 
             <button type="submit" class="btn-submit" id="appointment-btn">Create Appointment</button>
 
-            <p id="appointment-error"></p>
 
-            <p id="appointment-success"></p>
 
+            <p class="msg-error" id="appointment-error"></p>
 
+            <p class="msg-success" id="appointment-success"></p>
 
         </div>
 
     </div>
 
 </div>

+ 6 - 2
public/html/auth.html
Ver fichero 

@@ -4,10 +4,13 @@
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Authorization</title>
 
+    <script type="module" src="../javascripts/utils.js" async></script>
 
+    <script type="module" src="../javascripts/auth.js" async></script>
 
+    <link rel="stylesheet" href="../stylesheets/style.css">
 
     <link rel="stylesheet" href="../stylesheets/auth.css">
 
-    <script src="../javascripts/auth.js" async></script>
 
 </head>
 
 <body>
 
+<div class="content">
 
 <div class="container">
 
     <div id="login-form" class="form">
 
         <h2>Authorization</h2>
 
@@ -22,10 +25,11 @@
 
             </div>
 
             <button class="btn" id="btn-login">Login</button>
 
             <button class="btn" id="btn-register">Register</button>
 
-            <p id="login-error"></p>
 
+            <p class="msg-error" id="login-error"></p>
 
 
         </div>
 
     </div>
 
 </div>
 
+</div>
 
 </body>
 
 </html>

+ 4 - 3
public/html/bookings.html
Ver fichero 

@@ -4,9 +4,10 @@
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Appointment Details</title>
 
-    <script src="../javascripts/navbar.js" async></script>
 
-    <script src="../javascripts/bookings.js" async></script>
 
-    <link rel="stylesheet" href="../stylesheets/navbar.css">
 
+    <script type="module" src="../javascripts/navbar.js" async></script>
 
+    <script type="module"src="../javascripts/bookings.js" async></script>
 
+    <script type="module" src="../javascripts/utils.js" async></script>
 
+    <link rel="stylesheet" href="../stylesheets/style.css">
 
     <link rel="stylesheet" href="../stylesheets/bookings.css">
 
 </head>
 
 <body>

+ 9 - 5
public/html/schedule.html
Ver fichero 

@@ -4,12 +4,15 @@
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
     <title>Attending Appointment</title>
 
+    <script type="module" src="../javascripts/utils.js" async></script>
 
+    <script type="module" src="../javascripts/schedule.js" async></script>
 
+    <link rel="stylesheet" href="../stylesheets/style.css">
 
     <link rel="stylesheet" href="../stylesheets/schedule.css">
 
-    <script src="../javascripts/schedule.js" async></script>
 
 </head>
 
 <body>
 
+<div class="content">
 
 <div class="container">
 
-    <h1>Attending an appointment</h1>
 
+    <h1 class=heading>Attending an appointment</h1>
 
     <h3 id="title"></h3>
 
     <h4 id="place"></h4>
 
     <p id="description"></p>
 
@@ -42,10 +45,11 @@
 
             <label for="time-span">Time Span</label>
 
             <input type="text" id="time-span" name="timeSpan" value="10:00 AM to 12:00 PM" readonly>
 
         </div>
 
-        <button type="submit" id="attend-btn" class="btn-submit">Attend</button>
 
-        <p id="appointment-error"></p>
 
-        <p id="appointment-success"></p>
 
+        <button type="submit" id="btn-attend" class="btn-submit">Attend</button>
 
+        <p class="msg-error" id="appointment-error"></p>
 
+        <p class="msg-success" id="appointment-success"></p>
 
     </div>
 
 </div>
 
+</div>
 
 </body>
 
 </html>

+ 3 - 8
public/javascripts/appointments.js
Ver fichero 

@@ -1,5 +1,7 @@
 
 "use strict";
 
 
+import { fetchWithToken } from "./utils.js";
 
+
 
 let last_clicked = "";
 
 let click_counter = 0;
 
 
@@ -47,6 +49,7 @@ function renderAppointments(data) {
 
         shareATag.innerText = 'share';
 
         shareATag.classList.add('share-link');
 
         editATag.innerText = 'edit';
 
+        editATag.classList.add('edit-link');
 
         deleteButton.onclick = async () => {
 
             if (last_clicked !== appointment._id) {
 
                 click_counter += 1;
 
@@ -88,14 +91,6 @@ function renderAppointments(data) {
 
     });
 
 }
 
 
-async function fetchWithToken(url, options) {
 
-    const authToken = localStorage.getItem('token');
 
-    return await fetch(url, {...options, headers: {
 
-            'Authorization': `Bearer ${authToken}`,
 
-            'Content-Type': 'application/json',
 
-        }});
 
-}
 
-
 
 async function deleteAppointment(appointmentId) {
 
     const response = await fetchWithToken(`/api/users/delete`, {
 
         method: 'DELETE',

+ 1 - 8
public/javascripts/bookings.js
Ver fichero 

@@ -1,3 +1,4 @@
 
+import { fetchWithToken } from "./utils.js";
 
 "use strict";
 
 
 window.addEventListener("load", async function () {
 
@@ -10,14 +11,6 @@ window.addEventListener("load", async function () {
 
     await fetchBookings(appointment);
 
 });
 
 
-async function fetchWithToken(url, options) {
 
-    const authToken = localStorage.getItem('token');
 
-    return await fetch(url, {...options, headers: {
 
-            'Authorization': `Bearer ${authToken}`,
 
-            'Content-Type': 'application/json',
 
-        }});
 
-}
 
-
 
 function displayAppointmentDetails(appointmentData) {
 
     // Retrieve the container
 
     const appointmentInfo = document.querySelector('.appointment-info');

+ 0 - 1
public/javascripts/creator-appointments.js
Ver fichero 

@@ -29,7 +29,6 @@ window.addEventListener("load", async function() {
 
             // TODO Add a modify appointment function
 
         }
 
     })
 
-    console.log(titleInput.value);
 
 });
 
 
 async function fetchWithToken(url, options) {

+ 1 - 1
public/javascripts/schedule.js
Ver fichero 

@@ -6,7 +6,7 @@ const successParagraph = document.getElementById('appointment-success');
 
 
 
 window.addEventListener("load", async function () {
 
-    document.getElementById("attend-btn").addEventListener("click", async () => {
 
+    document.getElementById("btn-attend").addEventListener("click", async () => {
 
         await attendEvent();
 
     })
 
     const urlParams = new URLSearchParams(window.location.search);

+ 12 - 0
public/javascripts/utils.js
Ver fichero 

@@ -0,0 +1,12 @@
 
+"use strict";
 
+
 
+async function fetchWithToken(url, options) {
 
+    const authToken = localStorage.getItem('token');
 
+    return await fetch(url, {...options, headers: {
 
+            'Authorization': `Bearer ${authToken}`,
 
+            'Content-Type': 'application/json',
 
+        }});
 
+}
 
+
 
+
 
+export { fetchWithToken };

+ 20 - 87
public/stylesheets/appointments.css
Ver fichero 

@@ -1,20 +1,21 @@
 
+:root {
 
+    --primary-color: #ff6b6b;
 
+    --edit-link-color: #54ccac;
 
+    --share-link-color: #7ccc54;
 
+    --participants-link-color: #cc54c6;
 
+    --hover-color: #5750d9;
 
+    --dark-hover-color: #e05555;
 
+}
 
+
 
 .content {
 
-    font-family: 'Arial', sans-serif;
 
-    background-color: #f4f4f9;
 
-    margin: 0;
 
-    padding: 0;
 
-    display: grid;
 
-    place-items: center;
 
     box-sizing: border-box;
 
 }
 
 
 .container {
 
     width: 90%;
 
     max-width: 1200px;
 
-    background-color: #ffffff;
 
     padding: 20px;
 
     border-radius: 10px;
 
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 
     overflow-x: auto; /* Ensure content is scrollable on smaller screens */
 
 }
 
 
@@ -23,22 +24,25 @@ td a {
 
     text-decoration: none;
 
     padding: 8px 12px;
 
     border-radius: 4px;
 
-    color: #ffffff;
 
+    color: white;
 
     font-size: 14px;
 
-    background-color: #54ccac;
 
     transition: background-color 0.3s ease, transform 0.2s ease;
 
 }
 
 
+td a.edit-link {
 
+    background-color: var(--edit-link-color);
 
+}
 
+
 
 td a.share-link {
 
-    background-color: #7ccc54;
 
+    background-color: var(--share-link-color);
 
 }
 
 
 td a.participants-link {
 
-    background-color: #cc54c6;
 
+    background-color: var(--participants-link-color);
 
 }
 
 
 td a:hover {
 
-    background-color: #5750d9;
 
+    background-color: var(--hover-color);
 
     transform: translateY(-2px);
 
 }
 
 
@@ -49,92 +53,21 @@ td button {
 
     border-radius: 4px;
 
     font-size: 14px;
 
     color: white;
 
-    background-color: #ff6b6b;
 
+    background-color: var(--primary-color);
 
     cursor: pointer;
 
     transition: background-color 0.3s ease, transform 0.2s ease;
 
 }
 
 
 td button:hover {
 
-    background-color: #e05555;
 
+    background-color: var(--dark-hover-color);
 
     transform: translateY(-2px);
 
 }
 
 
 h2 {
 
-    text-align: center;
 
-    color: #333333;
 
     margin-bottom: 20px;
 
 }
 
 
-/* Table Styling */
 
-.table-wrapper {
 
-    overflow-x: auto;
 
-}
 
-
 
-table {
 
-    width: 100%;
 
-    border-collapse: collapse;
 
-    text-align: left;
 
-}
 
-
 
-th, td {
 
-    padding: 12px;
 
-    border: 1px solid #ddd;
 
-}
 
-
 
-th {
 
-    background-color: #6c63ff;
 
-    color: white;
 
-    font-weight: normal;
 
-}
 
-
 
-tr:nth-child(even) {
 
-    background-color: #f9f9f9;
 
-}
 
-
 
-tr:hover {
 
-    background-color: #f1f1f1;
 
-}
 
-
 
-.time-span {
 
-    font-weight: bold;
 
-    color: #0078d7;
 
-}
 
-
 
-/* Responsive adjustments */
 
-@media (max-width: 768px) {
 
-    body {
 
-        height: auto;
 
-        padding: 20px;
 
-    }
 
-
 
-    h2 {
 
-        font-size: 1.5rem;
 
-    }
 
-
 
-    table {
 
-        font-size: 14px;
 
-    }
 
-
 
-    th, td {
 
-        padding: 10px;
 
-    }
 
-}
 
-
 
-@media (max-width: 480px) {
 
-    table {
 
-        font-size: 12px;
 
-    }
 
-
 
-    th, td {
 
-        padding: 8px;
 
-    }
 
-
 
-    th {
 
-        font-size: 0.9rem;
 
-    }
 
-}
 
-
 
 /* Ensure table stays scrollable on smaller screens */
 
 .container {
 
     overflow-x: auto;
 
-}
 
+}

+ 17 - 27
public/stylesheets/auth.css
Ver fichero 

@@ -1,17 +1,16 @@
 
-/* General Reset */
 
-* {
 
-    margin: 0;
 
-    padding: 0;
 
-    box-sizing: border-box;
 
-    font-family: Arial, sans-serif;
 
+:root {
 
+    --input-bg-color: #e0e0e0;
 
+    --input-focus-border: #6c63ff;
 
+    --input-placeholder-color: #888;
 
+    --button-hover-background: #5750d9;
 
+    --button-hover-text: white;
 
 }
 
 
+/* General Reset */
 
+
 
 body {
 
     display: grid;
 
-    place-items: center;
 
     min-height: 100vh;
 
-    background-color: #f4f4f9;
 
-    margin: 0;
 
 }
 
 
 .container {
 
@@ -52,44 +51,35 @@ h2 {
 
 
 .input-group input {
 
     padding: 10px;
 
-    border: 1px solid #ccc;
 
+    border: 1px solid var(--input-bg-color);
 
     border-radius: 4px;
 
     font-size: 14px;
 
-    transition: border-color 0.3s;
 
+    transition: border-color 0.3s, box-shadow 0.3s;
 
 }
 
 
 .input-group input:focus {
 
-    border-color: #6c63ff;
 
+    border-color: var(--input-focus-border);
 
     outline: none;
 
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
 }
 
 
 button {
 
     margin-top: 40px;
 
     padding: 10px;
 
-    border: none;
 
-    background: #6c63ff;
 
-    color: white;
 
-    font-size: 16px;
 
-    cursor: pointer;
 
-    border-radius: 4px;
 
-    transition: background 0.3s;
 
+    transition: background-color 0.3s ease;
 
 }
 
 
 button:hover {
 
-    background: #5750d9;
 
+    background-color: var(--button-hover-background);
 
+    color: var(--button-hover-text);
 
 }
 
 
 #btn-register {
 
-    background: #e0e0e0;
 
+    background: var(--input-bg-color);
 
     color: #333;
 
     margin-top: -10px; /* Adjust spacing between buttons */
 
 }
 
 
 #btn-register:hover {
 
     background: #cacaca;
 
-}
 
-
 
-#login-error {
 
-    margin-top: 10px;
 
-    color: red;
 
-}
 
+}

+ 15 - 85
public/stylesheets/bookings.css
Ver fichero 

@@ -1,108 +1,38 @@
 
+:root {
 
+    --appointment-bg-color: white;
 
+    --container-border-radius: 8px;
 
+    --container-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 
+    --font-size: 16px;
 
+    --text-color: #555;
 
+    --line-height: 1.6;
 
+}
 
+
 
 /* General Reset */
 
 .content {
 
-    margin: 0;
 
-    padding: 0;
 
     box-sizing: border-box;
 
-    font-family: Arial, sans-serif;
 
-    display: grid;
 
-    place-items: center;
 
-    background-color: #f4f4f9;
 
-}
 
-
 
-body {
 
     background-color: #f4f4f9;
 
 }
 
 
 /* Container */
 
 .container {
 
-    background: white;
 
+    background: var(--appointment-bg-color);
 
     padding: 20px 30px;
 
-    border-radius: 8px;
 
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 
+    border-radius: var(--container-border-radius);
 
+    box-shadow: var(--container-box-shadow);
 
     width: 100%;
 
     max-width: 800px;
 
     display: grid;
 
     gap: 10px;
 
 }
 
 
-h1, h2 {
 
-    text-align: center;
 
-    color: #333;
 
-}
 
-
 
 /* Appointment Info */
 
 .appointment-info {
 
     display: grid;
 
     gap: 5px;
 
-    font-size: 16px;
 
-    color: #555;
 
+    font-size: var(--font-size);
 
+    color: var(--text-color);
 
 }
 
 
 .appointment-info p {
 
-    line-height: 1.6;
 
-}
 
-
 
-/* Table Styling */
 
-.table-wrapper {
 
-    overflow-x: auto;
 
-}
 
-
 
-table {
 
-    width: 100%;
 
-    border-collapse: collapse;
 
-    text-align: left;
 
-}
 
-
 
-th, td {
 
-    padding: 12px;
 
-    border: 1px solid #ddd;
 
-}
 
-
 
-th {
 
-    background-color: #6c63ff;
 
-    color: white;
 
-    font-weight: normal;
 
-}
 
-
 
-tr:nth-child(even) {
 
-    background-color: #f9f9f9;
 
-}
 
-
 
-tr:hover {
 
-    background-color: #f1f1f1;
 
-}
 
-
 
-
 
-/* Responsive adjustments */
 
-@media (max-width: 768px) {
 
-    body {
 
-        height: auto;
 
-        padding: 20px;
 
-    }
 
-
 
-    h2 {
 
-        font-size: 1.5rem;
 
-    }
 
-
 
-    table {
 
-        font-size: 14px;
 
-    }
 
-
 
-    th, td {
 
-        padding: 10px;
 
-    }
 
-}
 
-
 
-@media (max-width: 480px) {
 
-    table {
 
-        font-size: 10px;
 
-    }
 
-
 
-    th, td {
 
-        padding: 8px;
 
-    }
 
-
 
-    th {
 
-        font-size: 0.9rem;
 
-    }
 
+    line-height: var(--line-height);
 
 }

+ 26 - 40
public/stylesheets/create-appointment.css
Ver fichero 

@@ -1,32 +1,41 @@
 
+:root {
 
+    --input-bg-color: #e0e0e0;
 
+    --input-focus-border: #6c63ff;
 
+    --button-hover-background: #5750d9;
 
+}
 
+
 
+/* General Reset */
 
+
 
 .content {
 
-    display: grid;
 
-    place-items: center;
 
     min-height: 80vh;
 
-    background-color: #f4f4f9;
 
-
 
-    margin: 0;
 
-    padding: 0;
 
     box-sizing: border-box;
 
-    font-family: Arial, sans-serif;
 
     min-width: 80%;
 
 }
 
 
+body {
 
+    background-color: #f4f4f9;
 
+}
 
+
 
+.btn-submit {
 
+    margin-top: 10px;
 
+    padding: 12px;
 
+    padding-inline: 30px;
 
+}
 
+
 
+textarea {
 
+    resize: none;
 
+}
 
+
 
 .container {
 
     background: white;
 
     padding: 20px 30px;
 
     border-radius: 8px;
 
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 
     width: 100%;
 
     max-width: 500px;
 
     display: grid;
 
     gap: 20px;
 
 }
 
 
-h1 {
 
-    text-align: center;
 
-    color: #333;
 
-}
 
-
 
 form {
 
     display: grid;
 
     gap: 15px;
 
@@ -45,40 +54,17 @@ form {
 
 .input-group input {
 
     width: 100%;
 
     padding: 10px;
 
-    border: 1px solid #ccc;
 
+    border: 1px solid var(--input-bg-color);
 
     border-radius: 4px;
 
     font-size: 14px;
 
     transition: border-color 0.3s;
 
 }
 
 
 .input-group input:focus {
 
-    border-color: #6c63ff;
 
+    border-color: var(--input-focus-border);
 
     outline: none;
 
 }
 
 
-.btn-submit {
 
-    margin-top: 10px;
 
-    padding: 12px;
 
-    padding-inline: 30px;
 
-    border: none;
 
-    background: #6c63ff;
 
-    color: white;
 
-    font-size: 16px;
 
-    cursor: pointer;
 
-    border-radius: 4px;
 
-    transition: background 0.3s;
 
-}
 
-
 
 .btn-submit:hover {
 
-    background: #5750d9;
 
-}
 
-
 
-#appointment-error {
 
-    color: red;
 
-    margin-top: 10px;
 
-}
 
-
 
-#appointment-success {
 
-    color: green;
 
-    margin-top: 10px;
 
-}
 
+    background: var(--button-hover-background);
 
+}

+ 16 - 8
public/stylesheets/navbar.css
Ver fichero 

@@ -1,3 +1,12 @@
 
+:root {
 
+    --navbar-bg-color: white;
 
+    --navbar-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
+    --brand-font-size: 1.5rem;
 
+    --brand-color: #333;
 
+    --link-font-size: 1rem;
 
+    --link-color: #333;
 
+    --hover-link-color: #6c63ff;
 
+}
 
 
 /* Navbar Styling */
 
 .navbar {
 
@@ -7,7 +16,7 @@
 
     display: grid;
 
     grid-template-columns: auto 1fr auto;
 
     align-items: center;
 
-    background-color: white;
 
+    background-color: var(--navbar-bg-color);
 
     padding: 10px 20px;
 
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 
     width: 100%;
 
@@ -16,9 +25,9 @@
 
 }
 
 
 .navbar-brand {
 
-    font-size: 1.5rem;
 
+    font-size: var(--brand-font-size);
 
     font-weight: bold;
 
-    color: #333;
 
+    color: var(--brand-color);
 
 }
 
 
 .navbar-links {
 
@@ -31,12 +40,11 @@
 
 
 .navbar-links a {
 
     text-decoration: none;
 
-    color: #333;
 
-    font-size: 1rem;
 
+    color: var(--link-color);
 
+    font-size: var(--link-font-size);
 
     transition: color 0.3s ease;
 
 }
 
 
 .navbar-links a:hover {
 
-    color: #6c63ff;
 
-}
 
-
 
+    color: var(--hover-link-color);
 
+}

+ 25 - 40
public/stylesheets/schedule.css
Ver fichero 

@@ -1,35 +1,37 @@
 
-/* General Reset */
 
-* {
 
+:root {
 
+    --container-bg-color: white;
 
+    --border-radius-val: 8px;
 
+    --box-shadow-val: 0 4px 6px rgba(0, 0, 0, 0.1);
 
+    --input-width: 100%;
 
+    --input-padding: 10px;
 
+    --input-border-color: #ccc;
 
+    --input-focus-border-color: #6c63ff;
 
+    --btn-submit-bg-hover: #5750d9;
 
+    --input-group-readonly-color: #f9f9f9;
 
+    --input-label-color: #555;
 
+}
 
+
 
+.container * {
 
     margin: 0;
 
     padding: 0;
 
     box-sizing: border-box;
 
-    font-family: Arial, sans-serif;
 
 }
 
 
-body {
 
-    display: grid;
 
-    place-items: center;
 
+.content {
 
     min-height: 100vh;
 
-    background-color: #f4f4f9;
 
-    margin: 0;
 
 }
 
 
 .container {
 
-    background: white;
 
+    background-color: var(--container-bg-color);
 
     padding: 20px 30px;
 
-    border-radius: 8px;
 
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 
+    border-radius: var(--border-radius-val);
 
+    box-shadow: var(--box-shadow-val);
 
     width: 100%;
 
     max-width: 500px;
 
     display: grid;
 
     gap: 20px;
 
 }
 
 
-h1 {
 
-    text-align: center;
 
-    color: #333;
 
-}
 
-
 
 form {
 
     display: grid;
 
     gap: 15px;
 
@@ -42,13 +44,13 @@ form {
 
 
 .input-group label {
 
     font-size: 14px;
 
-    color: #555;
 
+    color: var(--input-label-color);
 
 }
 
 
 .input-group input {
 
-    width: 100%;
 
-    padding: 10px;
 
-    border: 1px solid #ccc;
 
+    width: var(--input-width);
 
+    padding: var(--input-padding);
 
+    border: 1px solid var(--input-border-color);
 
     border-radius: 4px;
 
     font-size: 14px;
 
     transition: border-color 0.3s;
 
@@ -56,12 +58,12 @@ form {
 
 
 /* For readonly inputs */
 
 .input-group input[readonly] {
 
-    background-color: #f9f9f9;
 
+    background-color: var(--input-group-readonly-color);
 
     cursor: not-allowed;
 
 }
 
 
 .input-group input:focus {
 
-    border-color: #6c63ff;
 
+    border-color: var(--input-focus-border-color);
 
     outline: none;
 
 }
 
 
@@ -69,25 +71,8 @@ form {
 
     margin-top: 10px;
 
     padding: 12px;
 
     padding-inline: 30px;
 
-    border: none;
 
-    background: #6c63ff;
 
-    color: white;
 
-    font-size: 16px;
 
-    cursor: pointer;
 
-    border-radius: 4px;
 
-    transition: background 0.3s;
 
 }
 
 
 .btn-submit:hover {
 
-    background: #5750d9;
 
-}
 
-
 
-#appointment-error {
 
-    color: red;
 
-    margin-top: 10px;
 
-}
 
-
 
-#appointment-success {
 
-    color: green;
 
-    margin-top: 10px;
 
+    background-color: var(--btn-submit-bg-hover);
 
 }

+ 48 - 4
public/stylesheets/style.css
Ver fichero 

@@ -1,8 +1,52 @@
 
+@import "navbar.css";
 
+@import "tables.css";
 
+
 
+:root {
 
+  --primary-color: #6c63ff;
 
+  --background-color: #f4f4f9;
 
+  --text-color: #333;
 
+  --box-shadow-color: 0 4px 6px rgba(0, 0, 0, 0.1);
 
+  --error-message-color: red;
 
+  --success-message-color: green;
 
+}
 
+
 
 body {
 
-  padding: 50px;
 
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
 
+  background-color: var(--background-color);
 
+}
 
+
 
+.content {
 
+  margin: 0;
 
+  padding: 0;
 
+  font-family: Arial, sans-serif;
 
+  display: grid;
 
+  place-items: center;
 
+}
 
+
 
+.heading {
 
+  text-align: center;
 
+  color: var(--text-color);
 
+}
 
+
 
+.container {
 
+  box-shadow: var(--box-shadow-color);
 
 }
 
 
-a {
 
-  color: #00B7FF;
 
+button {
 
+  border: none;
 
+  background: var(--primary-color);
 
+  color: white;
 
+  font-size: 16px;
 
+  cursor: pointer;
 
+  border-radius: 4px;
 
+  transition: background 0.3s;
 
 }
 
+
 
+.msg-error {
 
+  color: var(--error-message-color);
 
+  margin-top: 10px;
 
+}
 
+
 
+.msg-success {
 
+  color: var(--success-message-color);
 
+  margin-top: 10px;
 
+}

+ 65 - 0
public/stylesheets/tables.css
Ver fichero 

@@ -0,0 +1,65 @@
 
+
 
+/* Table Styling */
 
+.table-wrapper {
 
+    overflow-x: auto;
 
+}
 
+
 
+table {
 
+    width: 100%;
 
+    border-collapse: collapse;
 
+    text-align: left;
 
+}
 
+
 
+th, td {
 
+    padding: 12px;
 
+    border: 1px solid #ddd;
 
+}
 
+
 
+th {
 
+    background-color: #6c63ff;
 
+    color: white;
 
+    font-weight: normal;
 
+}
 
+
 
+tr:nth-child(even) {
 
+    background-color: #f9f9f9;
 
+}
 
+
 
+tr:hover {
 
+    background-color: #f1f1f1;
 
+}
 
+
 
+
 
+/* Responsive adjustments */
 
+@media (max-width: 768px) {
 
+    body {
 
+        height: auto;
 
+        padding: 20px;
 
+    }
 
+
 
+    h2 {
 
+        font-size: 1.5rem;
 
+    }
 
+
 
+    table {
 
+        font-size: 14px;
 
+    }
 
+
 
+    th, td {
 
+        padding: 10px;
 
+    }
 
+}
 
+
 
+@media (max-width: 480px) {
 
+    table {
 
+        font-size: 10px;
 
+    }
 
+
 
+    th, td {
 
+        padding: 8px;
 
+    }
 
+
 
+    th {
 
+        font-size: 0.9rem;
 
+    }
 
+}