Mejoras en el diseño de la página.

Se ajustaron algunos detalles visuales para reflejar el espíritu de la temporada.
EEST1Chivilcoy · Dec 23, 2024 · 83ea2b3 · 83ea2b3
1 parent 835fdac
commit 83ea2b3
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 6 deletions.
diff --git a/ReservationSystem/css/estilo.css b/ReservationSystem/css/estilo.css
@@ -1,3 +1,7 @@
+body {
+  background: rgb(161, 192, 220);
+}
+
 footer {
   background-color: #635992;
   color: white;
@@ -31,3 +35,37 @@ footer {
   text-align: center;
   margin-top: 20px;
 }
+
+.custom-navbar {
+  background: #635992;
+}
+
+.custom-title {
+  color: rgb(39, 23, 111);
+  margin-left: 15px;
+}
+
+/* Estilos navideños */
+.navidad footer {
+  background-color: #c52f2f; /* Rojo navideño */
+  color: white;
+}
+
+.navidad .contenedor-footer {
+  border-bottom: 1px solid #ffcc00; /* Dorado */
+}
+
+.navidad .custom-navbar {
+  background: #c52f2f; /* Rojo navideño */
+}
+
+.navidad .custom-title {
+  color: #ffcc00; /* Dorado */
+}
+
+.navidad {
+  background: url("https://i.imgur.com/uzGg0e6.jpeg") no-repeat center center
+    fixed;
+  background-size: cover;
+  margin: 0; /* Opcional, para eliminar el margen por defecto del cuerpo */
+}
diff --git a/ReservationSystem/index.php b/ReservationSystem/index.php
@@ -68,10 +68,6 @@ function hayRegistrosDisponibles($conexion)
     mysqli_close($conexion);
     ?>
     <style>
-        body {
-            background: rgb(161, 192, 220);
-        }
-
         .card {
             background-color: rgb(161, 192, 220);
         }
@@ -260,6 +256,15 @@ function hayRegistrosDisponibles($conexion)
     </style>
 
     <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const today = new Date();
+            const isChristmasWeek = today.getMonth() === 11 && today.getDate() >= 20 && today.getDate() <= 26;
+
+            if (isChristmasWeek) {
+                document.body.classList.add('navidad');
+            }
+        });
+
         document.addEventListener('DOMContentLoaded', function() {
             var calendarEl = document.getElementById('calendar');
             var calendar = new FullCalendar.Calendar(calendarEl, {
@@ -320,13 +325,13 @@ function showEventDetails(event) {
 </head>
 
 <body>
-    <nav class="navbar bg-body-tertiary" style="background:#635992;">
+    <nav class="navbar bg-body-tertiary custom-navbar">
         <div class="container-fluid">
             <div class="d-flex align-items-center">
                 <a class="navbar-brand" href="#">
                     <img src="img\logo.png" alt="Logo" width="65" height="65" class="d-inline-block align-text-top">
                 </a>
-                <h1 class="navbar-text text-center font-italic mb-0" style="color: rgb(39, 23, 111); margin-left: 15px;">RESERVA DE SALONES</h1>
+                <h1 class="navbar-text text-center font-italic mb-0 custom-title">RESERVA DE SALONES</h1>
             </div>
         </div>
     </nav>