From f46dadf681b2757ce521d2727eb7ec1b0c49619a Mon Sep 17 00:00:00 2001 From: Jordan Iralde Date: Thu, 28 Nov 2024 16:25:39 -0300 Subject: [PATCH] Integracion --- AIntegracion/Syles/Styles_Chatbot/Style.css | 193 ++++++++++++++------ AIntegracion/Syles/styleTurnero.css | 35 +++- AIntegracion/index.html | 174 +++++------------- AIntegracion/preguntasFrecuentes.html | 23 +-- AIntegracion/turnero.html | 7 +- 5 files changed, 219 insertions(+), 213 deletions(-) diff --git a/AIntegracion/Syles/Styles_Chatbot/Style.css b/AIntegracion/Syles/Styles_Chatbot/Style.css index d1a0d84..1d3fd1f 100644 --- a/AIntegracion/Syles/Styles_Chatbot/Style.css +++ b/AIntegracion/Syles/Styles_Chatbot/Style.css @@ -1,4 +1,4 @@ -/* General Reset */ +/* Estilo General */ * { margin: 0; padding: 0; @@ -7,11 +7,11 @@ body { font-family: 'Poppins', sans-serif; - background-image: url('imgs/pagina web.png'); - background-color: #2570d1; - display: flex; - flex-direction: column; - min-height: 100vh; + background: linear-gradient(45deg, #4c6ef5, #2c3e50); /* Fondo degradado */ + color: #fff; + height: 100vh; + background-size: cover; + background-position: center; } /* Header */ @@ -21,119 +21,194 @@ header { top: 0; left: 0; z-index: 1000; - background: #fff; + background-color: rgba(255, 255, 255, 0.9); /* Fondo blanco semi-transparente */ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); padding: 10px 20px; + transition: all 0.3s ease-in-out; + animation: slideDown 0.5s ease-out; +} + +/* Animación para el header */ +@keyframes slideDown { + from { + opacity: 0; + transform: translateY(-50px); + } + to { + opacity: 1; + transform: translateY(0); + } } +/* Navbar */ .navbar { + padding: 10px 0; +} + +.navbar-toggler { + border: none; + background-color: transparent; +} + +.navbar-toggler-icon { + background-color: #003851; +} + +.navbar-nav { display: flex; - justify-content: space-between; - align-items: center; + justify-content: flex-end; } -.navbar a { - text-decoration: none; - font-weight: 700; - color: #003851; +.navbar-nav .nav-item { + margin-left: 15px; } -.navbar .search-form { +.search-form { + margin-right: 10px; position: relative; } -.navbar .search-form input { - width: 200px; - padding: 5px 10px; +.search-input { border-radius: 20px; - border: 1px solid #ccc; + padding: 8px 12px; + width: 220px; +} + +.search-input:focus { + outline: none; + box-shadow: 0 0 10px rgba(0, 123, 255, 0.5); } -/* Main Content */ -main { - flex: 1; /* Permite que el contenido ocupe todo el espacio disponible */ - margin-top: 70px; /* Asegura espacio para el header fijo */ +/* Estilos de los botones */ +.BotonesNavbar { display: flex; - flex-wrap: wrap; justify-content: center; - gap: 20px; - padding: 20px; + margin-top: 20px; +} + +.BotonesNavbar button { + background-color: #2570d1; + color: white; + padding: 10px 20px; + border: none; + border-radius: 5px; + margin: 0 10px; + cursor: pointer; + transition: background-color 0.3s; } -#imagenCelular { - max-width: 250px; - height: auto; +.BotonesNavbar button:hover { + background-color: #003851; } +/* Tarjetas */ .cuadricula { display: grid; - grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; - width: 100%; + padding: 20px; + animation: fadeIn 1s ease-out; } .tarjeta { perspective: 1000px; - width: 150px; - height: 200px; - position: relative; + transition: transform 0.3s ease-in-out; +} + +.tarjeta:hover { + transform: scale(1.05); } .tarjeta .frente, .tarjeta .reverso { - position: absolute; - backface-visibility: hidden; width: 100%; - height: 100%; + height: 200px; + background-color: #fff; + border: 2px solid #ddd; + border-radius: 10px; display: flex; align-items: center; justify-content: center; - border-radius: 12px; - transition: transform 0.6s ease; + font-size: 1.2rem; + text-align: center; + color: #003851; + transition: transform 0.6s; } .tarjeta .frente { - background: #c4c6c6; + background-color: #2570d1; + color: #fff; font-weight: bold; - font-size: 16px; - color: #003851; } .tarjeta .reverso { + background-color: #fff; transform: rotateY(180deg); - background: #003851; - color: #fff; -} - -.tarjeta:hover .frente { - transform: rotateY(180deg); + position: absolute; + top: 0; + left: 0; + backface-visibility: hidden; } .tarjeta:hover .reverso { transform: rotateY(0); } +/* Animación para las tarjetas */ +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +/* Botón Chatbot */ +#botonChat { + background-color: #003851; + padding: 10px 20px; + color: white; + border: none; + border-radius: 5px; + margin-top: 20px; + text-align: center; + transition: background-color 0.3s; +} + +#botonChat:hover { + background-color: #2570d1; +} + /* Footer */ footer { - width: 100%; background-color: #003851; - color: #fff; - padding: 20px; + padding: 30px 20px; + color: white; text-align: center; - margin-top: auto; /* Hace que el footer se mantenga al final incluso con poco contenido */ + margin-top: 50px; } -.footer-contact, -.footer-numbers, -.footer-bottom { +.footer-contact h1 { + font-size: 1.5rem; margin-bottom: 10px; } -.footer-contact h1 { - font-size: 20px; - font-weight: 700; +.footer-numbers .number { + margin-bottom: 10px; } -.footer-numbers .number { - margin: 5px 0; +/* Responsive */ +@media (max-width: 768px) { + .navbar-nav { + text-align: center; + } + + .cuadricula { + grid-template-columns: 1fr; + } + + .BotonesNavbar { + flex-direction: column; + } } diff --git a/AIntegracion/Syles/styleTurnero.css b/AIntegracion/Syles/styleTurnero.css index 7eec457..1a8931d 100644 --- a/AIntegracion/Syles/styleTurnero.css +++ b/AIntegracion/Syles/styleTurnero.css @@ -1,15 +1,12 @@ /* Estilos generales */ -AIntegracion\Img\IMG Turnero\fondito.webp body { margin: 0; font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: flex-start; - background-color: #642e2e; /* Fondo claro */ + background: url('AIntegracion/Img/IMG_Turnero/fondito.webp') no-repeat center center fixed; /* Fondo con imagen */ background-size: cover; /* Asegura que el fondo cubra toda la pantalla */ - background-position: center; - background-attachment: fixed; /* Hace que el fondo no se mueva al hacer scroll */ height: 100vh; /* Asegura que el body ocupe todo el alto */ flex-direction: column; } @@ -27,14 +24,27 @@ main { /* Caja principal de turnero */ .turnero-box { - background-color: rgba(93, 138, 168, 0.9); /* Fondo más oscuro para contraste */ + background-color: rgba(0, 0, 0, 0.7); /* Fondo oscuro y semi-transparente para contraste */ padding: 35px; border-radius: 15px; - box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); + box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); width: 100%; max-width: 500px; text-align: center; margin: 20px; + animation: fadeIn 0.8s ease-out; +} + +/* Animación de desvanecimiento para la caja */ +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } } /* Titulo */ @@ -42,6 +52,7 @@ main { font-size: 30px; color: white; margin-bottom: 20px; + text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra suave en el texto */ } /* Entrada de texto */ @@ -55,26 +66,34 @@ main { border-radius: 5px; background-color: #eaeaea; font-size: 14px; + transition: background-color 0.3s ease-in-out; +} + +.turnero-box input:focus { + background-color: #f3f3f3; + box-shadow: 0 0 8px rgba(0, 123, 255, 0.7); /* Efecto de enfoque */ } /* Botón */ .turnero-box button { background-color: #3b5998; color: white; - padding: 10px; + padding: 15px; width: 100%; max-width: 400px; height: 50px; border: none; border-radius: 5px; cursor: pointer; - transition: background-color 0.3s; + transition: background-color 0.3s, transform 0.2s; font-size: 15px; margin-top: 15px; + text-transform: uppercase; /* Texto en mayúsculas */ } .turnero-box button:hover { background-color: #2d4373; + transform: scale(1.05); /* Efecto de hover */ } /* Diseño Responsivo para pantallas pequeñas */ diff --git a/AIntegracion/index.html b/AIntegracion/index.html index 1e83899..34651fe 100644 --- a/AIntegracion/index.html +++ b/AIntegracion/index.html @@ -1,21 +1,21 @@ - - - - - Home - - - - - - + + + + + Carta de Pregunta y Respuesta + + + + + +
- - -
-
-
- -
-
- - - Image - -
-
- - - Image - -
-
- - - Image - +
+
+
+
+ celular +
+
+
+ +
+
¿Dónde es?
+
Un hospital es...
-
- - - Image - +
+
Documentos necesarios
+
Un hospital es...
-
- - - Image - +
+
¿Qué es un hospital?
+
Un hospital es...
-
- - - Image - +
+
¿Qué servicios ofrece?
+
Los hospitales ofrecen...
-
- - - Image - +
+
¿Cómo hacer una consulta?
+
Puedes realizar una consulta...
-
- - - Image - +
+
¿Cuáles son los horarios?
+
El horario del hospital es...
-
-
+
-
-
-

Nuevo Equipamiento Hospitalario

-

La Municipalidad de La Falda ha incorporado en el laboratorio del Hospital, equipamiento de primera línea para la realización de análisis. - La inversión realizada fue $2.500.000 y se adquirieron los siguientes elementos:

- -
    -
  • Contador hematológico
    • -
  • Equipo diestro Ion selectivo
    • -
  • Auto analizador CM250 Wiener
    • -
  • Estufa de cultivo
    • -
  • Microscopio
    • -
  • Centrifuga
    • -
  • Baño termostático
    • -
-
-

Nuevo Equipamiento Hospitalario

-

La Municipalidad de La Falda ha incorporado en el laboratorio del Hospital, equipamiento de primera línea para la realización de análisis. - La inversión realizada fue $2.500.000 y se adquirieron los siguientes elementos:

-
    -
  • Contador hematológico
    • -
  • Equipo diestro Ion selectivo
    • -
  • Auto analizador CM250 Wiener
    • -
  • Estufa de cultivo
    • -
  • Microscopio
    • -
  • Centrifuga
    • -
  • Baño termostático
    • -
-
-
- - + +
-
-

Centros Odontológicos Integrales

-

centros odontológicos.

-
-
-

Óptica y Contactología Regina Elena

-

óptica.

-
- -