diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/CV Javier/html-css/Preview CV/Preview.png b/CV Javier/Preview CV/Preview.png similarity index 100% rename from CV Javier/html-css/Preview CV/Preview.png rename to CV Javier/Preview CV/Preview.png diff --git a/CV Javier/html-css/cv.css b/CV Javier/cv.css similarity index 100% rename from CV Javier/html-css/cv.css rename to CV Javier/cv.css diff --git a/CV Javier/html-css/cv.html b/CV Javier/cv.html similarity index 100% rename from CV Javier/html-css/cv.html rename to CV Javier/cv.html diff --git a/CV Javier/html-css/imagen/ProfileSubaruDev.png b/CV Javier/imagen/ProfileSubaruDev.png similarity index 100% rename from CV Javier/html-css/imagen/ProfileSubaruDev.png rename to CV Javier/imagen/ProfileSubaruDev.png diff --git a/Taller1/contacto.html b/Taller1/contacto.html new file mode 100644 index 0000000..105a197 --- /dev/null +++ b/Taller1/contacto.html @@ -0,0 +1,128 @@ + + + + + + Información de Contacto | Clínica Dental + + + + + + + + + + +
+ + + + + +
+ + +
+ +

Sede Principal: Concepción

+ + +
+ +
+ +
+ + +
+

Nuestras Otras Sucursales

+
+ +
+
+
+ + +
+ +
+

Horario de Atención

+

Lunes – Viernes:

+

09:00 — 17:30

+ +

Sábados no festivos:

+

09:00 — 14:00

+ +

Atención solo con cita previa. Domingos y festivos cerrado.

+
+ + + + +
+
+ + + + + + + + \ No newline at end of file diff --git a/Taller1/css/contacto.css b/Taller1/css/contacto.css new file mode 100644 index 0000000..8780c41 --- /dev/null +++ b/Taller1/css/contacto.css @@ -0,0 +1,440 @@ +/* ===================== + ARCHIVO: contacto.css + DESCRIPCIÓN: Estilos específicos para la página de contacto + FECHA: 2025 +===================== */ + +/* Importar estilos base del header y footer */ +@import url('header-footer.css'); + +/* ----- VARIABLES DE ESTILO ----- */ +:root { + --azul-principal: #0fa49c; /* Color principal (Turquesa) */ + --color-secundario: #ffca1c; /* Color de acento (Amarillo) */ + --fondo-gris: #f4f7fb; /* Fondo general de la página */ + --fondo-tarjeta: #ffffff; /* Fondo de contenedores principales */ + --color-texto: #222; /* Color de texto oscuro */ + --color-hover: #0d8c85; /* Color para efectos hover */ +} + +/* ----- RESET Y ESTILOS BASE ----- */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Segoe UI", sans-serif; +} + +body { + background: var(--fondo-gris); + min-height: 100vh; + display: flex; + flex-direction: column; /* Permite que el footer se quede abajo */ +} + +/* Enlaces generales */ +a { + text-decoration: none; + color: var(--azul-principal); +} + +/* ===================== + LAYOUT ASIMÉTRICO (GRID) +===================== */ +.container { + flex: 1; + display: grid; + /* Define 2 filas: 'auto' para el título, '1fr' para el mapa (ocupa el resto) */ + grid-template-rows: auto 1fr; + /* Define 2 columnas: 2/3 para mapa y 1/3 para información */ + grid-template-columns: 2fr 1fr; + /* Asigna áreas: Título y Mapa a la izquierda, Info a la derecha */ + grid-template-areas: + "mapa-titulo info-cards" + "mapa-ubicacion info-cards"; + gap: 0 30px; /* Elimina el gap vertical entre filas, mantiene el horizontal */ + background: var(--fondo-tarjeta); + margin: 40px auto; + padding: 30px; + border-radius: 16px; + box-shadow: 0 6px 15px rgba(0,0,0,0.1); + max-width: 1200px; + width: 90%; +} + +/* ----- ESTILOS PARA EL TÍTULO ----- */ +.mapa-titulo { + grid-area: mapa-titulo; + color: var(--azul-principal); + font-size: 1.8em; + padding-bottom: 10px; + border-bottom: 3px solid var(--color-secundario); + /* Ajuste final para compensar el gap vertical del Grid */ + margin-bottom: 25px; +} + +/* ----- SECCIÓN DEL MAPA ----- */ +#mapa-ubicacion { + grid-area: mapa-ubicacion; + height: 100%; + background: #e0e0e0; + border-radius: 12px; + overflow: hidden; + box-shadow: 0 4px 10px rgba(0,0,0,0.1); + position: relative; + padding: 0; + display: flex; + flex-direction: column; /* Para apilar el mapa y el carrusel */ +} + +/* Oculta el título duplicado que podría existir dentro del mapa */ +#mapa-ubicacion h2 { + display: none; +} + +/* Contenedor del mapa interactivo */ +#mapa-interactivo-div { + width: 100%; + flex-grow: 1; /* Hace que el mapa ocupe todo el espacio restante */ +} + +/* Placeholder para el mapa (en caso de error) */ +.mapa-placeholder { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: #666; + text-align: center; + padding: 20px; +} + +/* ----- SECCIÓN DE TARJETAS INFORMATIVAS ----- */ +.info-cards { + grid-area: info-cards; + display: flex; + flex-direction: column; + gap: 30px; +} + +/* ===================== + CARRUSEL DE SEDES SECUNDARIAS +===================== */ +.carrusel-sedes-wrapper { + padding: 15px; + background-color: var(--fondo-tarjeta); + border-top: 1px solid #ddd; + box-shadow: 0 -2px 5px rgba(0,0,0,0.05); + flex-shrink: 0; /* Evita que el carrusel se encoja */ +} + +/* Título del carrusel */ +.carrusel-sedes-wrapper h3 { + font-size: 1.1em; + color: var(--azul-principal); + margin-bottom: 10px; +} + +.carrusel-sedes-wrapper h3 i { + margin-right: 8px; + color: var(--color-secundario); +} + +/* Contenedor del carrusel */ +.carrusel-sedes { + display: flex; + overflow-x: scroll; /* Permite el desplazamiento horizontal */ + padding-bottom: 10px; + gap: 15px; + -webkit-overflow-scrolling: touch; + scrollbar-width: thin; +} + +/* Estilos de la barra de desplazamiento para Webkit */ +.carrusel-sedes::-webkit-scrollbar { + height: 8px; +} + +.carrusel-sedes::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.15); + border-radius: 10px; +} + +/* ----- TARJETAS DE SEDES ----- */ +.sede-card { + flex-shrink: 0; /* Impide que la tarjeta se encoja */ + width: 250px; + background-color: var(--fondo-tarjeta); + border-radius: 8px; + box-shadow: 0 2px 5px rgba(0,0,0,0.1); + transition: box-shadow 0.3s, transform 0.3s; + cursor: default; + border: 1px solid #ddd; + overflow: hidden; + padding: 0; +} + +.sede-card:hover { + box-shadow: 0 5px 15px rgba(0,0,0,0.2); + transform: translateY(-3px); +} + +/* Contenedor de la imagen de la sede */ +.sede-card-img-container { + width: 100%; + height: 120px; + overflow: hidden; +} + +.sede-card-img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s ease; +} + +.sede-card:hover .sede-card-img { + transform: scale(1.05); +} + +/* Contenido de texto de la tarjeta de sede */ +.sede-card h4 { + margin: 10px 15px 5px 15px; + color: var(--azul-principal); + font-size: 1.1em; +} + +.sede-card p { + font-size: 0.85em; + color: #555; + margin: 0 15px 5px 15px; + padding-bottom: 5px; +} + +.sede-card p i { + color: var(--color-secundario); + margin-right: 5px; +} + +/* ===================== + TARJETAS DE INFORMACIÓN +===================== */ +.tarjeta { + padding: 30px; + border-radius: 12px; + background: var(--fondo-tarjeta); + box-shadow: 0 4px 10px rgba(0,0,0,0.15); + transition: transform 0.3s ease, box-shadow 0.3s ease; +} + +.tarjeta:hover { + transform: translateY(-5px); + box-shadow: 0 8px 20px rgba(0,0,0,0.2); +} + +/* Títulos de las tarjetas */ +.tarjeta h3 { + margin-bottom: 15px; + color: var(--azul-principal); + font-size: 1.5em; + border-bottom: 3px solid var(--color-secundario); + padding-bottom: 10px; + display: flex; + align-items: center; +} + +.tarjeta h3 i { + margin-right: 10px; + color: var(--color-secundario); +} + +/* ----- TARJETA DE HORARIOS ----- */ +.horario-info .time-slot { + font-size: 1.8em; + font-weight: bold; + color: var(--color-secundario); + margin-top: 5px; +} + +/* ----- TARJETA DE CONTACTO ----- */ +.contacto-info { + border-left: 5px solid var(--azul-principal); +} + +/* Items de información de contacto */ +.var-item { + margin-bottom: 20px; +} + +/* Título de la variable (Ej: Teléfono Central) */ +.var-item span { + font-size: 0.9em; + color: #666; + font-weight: 500; + display: block; + margin-bottom: 5px; +} + +/* Valor de la variable (Ej: +56 9 1234 5678) */ +.var-value { + font-size: 1.1em; + font-weight: bold; + color: var(--color-texto); + display: flex; + justify-content: space-between; + align-items: center; +} + +.var-value a { + color: var(--azul-principal); + transition: color 0.3s; +} + +.var-value a:hover { + color: var(--color-hover); +} + +/* Iconos dentro del var-value */ +.var-value i { + font-size: 1.3em; + color: var(--color-secundario); + margin-left: 10px; +} + +/* ----- ESTILOS PARA REDES SOCIALES ----- */ +.redes-var { + border-top: 1px solid #eee; + padding-top: 15px; + text-align: center; +} + +.redes-titulo { + font-size: 1.1em !important; + font-weight: bold !important; + color: var(--azul-principal) !important; + margin-bottom: 10px !important; + display: block !important; +} + +.redes-var .var-value { + justify-content: center; + margin-top: 10px; + gap: 20px; +} + +.redes-var .var-value a { + font-size: 2em; + margin: 0; + transition: transform 0.3s, color 0.3s; +} + +.redes-var .var-value a:hover { + transform: scale(1.2); + color: var(--color-secundario); +} + +/* ===================== + BOTÓN FLOTANTE PARA PEDIR TURNO +===================== */ +.btn-pedir-turno { + position: fixed; + bottom: 30px; + right: 30px; + background-color: var(--color-secundario); + color: var(--color-fuente); + border: none; + border-radius: 50px; + padding: 15px 25px; + font-size: 16px; + font-weight: bold; + cursor: pointer; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + transition: background-color 0.3s, transform 0.3s; + z-index: 100; +} + +.btn-pedir-turno:hover { + background-color: #e5b600; + transform: scale(1.05); +} + +/* ===================== + DISEÑO RESPONSIVE +===================== */ +@media (max-width: 900px) { + .container { + /* Reestructura el Grid a una sola columna vertical en móvil */ + grid-template-rows: auto auto; + grid-template-columns: 1fr; + grid-template-areas: + "mapa-titulo" + "mapa-ubicacion" + "info-cards"; + gap: 20px; /* Restaura el gap uniforme para mejor espaciado móvil */ + padding: 20px; + } + + .mapa-titulo { + font-size: 1.5em; + padding-top: 5px; + /* Deshace el margen negativo para móvil */ + margin-bottom: 0; + } + + #mapa-ubicacion { + /* Fija una altura para el mapa en móvil */ + height: 550px; + min-height: 400px; + } + + /* Ajuste de header para móviles */ + header { + flex-direction: column; + height: auto; + padding: 15px 20px; + } + + /* Botón flotante más pequeño en móviles */ + .btn-pedir-turno { + bottom: 20px; + right: 20px; + padding: 12px 20px; + font-size: 14px; + } +} + +/* Estilos para tablets */ +@media (max-width: 1024px) and (min-width: 901px) { + .container { + max-width: 95%; + gap: 0 20px; + } + + .sede-card { + width: 220px; + } +} + +/* Estilos para pantallas muy pequeñas */ +@media (max-width: 480px) { + .container { + padding: 15px; + width: 95%; + } + + .mapa-titulo { + font-size: 1.3em; + } + + .tarjeta { + padding: 20px; + } + + .sede-card { + width: 200px; + } + + .carrusel-sedes-wrapper { + padding: 10px; + } +} \ No newline at end of file diff --git a/Taller1/css/equipo.css b/Taller1/css/equipo.css new file mode 100644 index 0000000..6c45546 --- /dev/null +++ b/Taller1/css/equipo.css @@ -0,0 +1,301 @@ +/* ===================== + ARCHIVO: equipo.css + DESCRIPCIÓN: Estilos específicos para la página del equipo + FECHA: 2025 +===================== */ + +/* Importar estilos base del header y footer */ +@import url('header-footer.css'); + +/* ----- ESTILOS GENERALES DEL BODY ----- */ +body { + background: var(--fondo-claro); + min-height: 100vh; + display: flex; + flex-direction: column; +} + +/* ----- CABECERA DE PÁGINA ----- */ +.page-header { + text-align: center; + padding: 40px 20px; + background: linear-gradient(135deg, var(--azul-principal) 0%, var(--azul-claro) 100%); + color: white; +} + +/* Título principal de la página */ +.page-header h1 { + font-size: 2.5rem; + margin-bottom: 15px; +} + +/* Descripción de la página */ +.page-header p { + font-size: 1.2rem; + max-width: 700px; + margin: 0 auto; + line-height: 1.6; +} + +/* ----- CONTENEDOR PRINCIPAL ----- */ +main { + flex: 1; + padding: 40px 20px; + max-width: 1200px; + margin: 0 auto; + width: 100%; +} + +/* ----- SECCIONES DEL EQUIPO ----- */ +.equipo-section { + margin-bottom: 60px; +} + +.equipo-section h2 { + color: var(--azul-principal); + text-align: center; + margin-bottom: 40px; + font-size: 2rem; + border-bottom: 3px solid var(--azul-claro); + padding-bottom: 10px; +} + +/* ===================== + GRID DE EQUIPO PRINCIPAL +===================== */ +.equipo-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 30px; + margin-top: 30px; +} + +/* ----- MIEMBROS DEL EQUIPO ----- */ +.miembro-equipo { + background: var(--fondo-tarjeta); + border-radius: 16px; + padding: 25px; + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); + transition: transform 0.3s, box-shadow 0.3s; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + border-top: 4px solid var(--azul-principal); +} + +.miembro-equipo:hover { + transform: translateY(-8px); + box-shadow: 0 12px 30px rgba(15, 164, 156, 0.15); +} + +/* Foto del miembro del equipo */ +.foto-miembro { + width: 150px; + height: 150px; + border-radius: 50%; + overflow: hidden; + margin-bottom: 20px; + border: 4px solid var(--azul-claro); +} + +.foto-miembro img { + width: 100%; + height: 100%; + object-fit: cover; +} + +/* Información del miembro */ +.info-miembro h3 { + color: var(--azul-principal); + margin-bottom: 8px; + font-size: 1.4rem; +} + +.especialidad { + color: var(--color-secundario); + font-weight: bold; + margin-bottom: 5px; + font-size: 1.1rem; +} + +.experiencia { + color: var(--azul-claro); + font-style: italic; + margin-bottom: 12px; +} + +.descripcion { + color: var(--color-fuente); + line-height: 1.6; + margin-bottom: 15px; +} + +/* Redes sociales del miembro */ +.redes-miembro { + display: flex; + gap: 15px; + justify-content: center; +} + +.icono { + font-size: 1.2rem; + cursor: pointer; + transition: transform 0.2s; +} + +.icono:hover { + transform: scale(1.2); +} + +/* ===================== + EQUIPO DE APOYO +===================== */ +.apoyo-grid { + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); +} + +.miembro-apoyo { + background: var(--fondo-tarjeta); + border-radius: 12px; + padding: 20px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); + transition: transform 0.3s; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + border-left: 4px solid var(--color-secundario); +} + +.miembro-apoyo:hover { + transform: translateY(-5px); +} + +.miembro-apoyo .foto-miembro { + width: 120px; + height: 120px; + margin-bottom: 15px; +} + +/* ===================== + SECCIÓN DE CERTIFICACIONES +===================== */ +.certificaciones-section { + background: var(--fondo-tarjeta); + border-radius: 16px; + padding: 40px 30px; + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); + margin-top: 40px; +} + +.certificaciones-section h2 { + color: var(--azul-principal); + text-align: center; + margin-bottom: 30px; + font-size: 1.8rem; +} + +.certificaciones-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); + gap: 25px; +} + +.certificacion-item { + text-align: center; + padding: 20px; + background: var(--fondo-claro); + border-radius: 10px; + transition: transform 0.3s; +} + +.certificacion-item:hover { + transform: translateY(-5px); +} + +.certificacion-item h3 { + color: var(--azul-principal); + margin-bottom: 10px; + font-size: 1.2rem; +} + +.certificacion-item p { + color: var(--color-fuente); + line-height: 1.5; +} + +/* ----- BOTÓN FLOTANTE PARA PEDIR TURNO ----- */ +.btn-contacto { + position: fixed; + bottom: 30px; + right: 30px; + background-color: var(--color-secundario); + color: var(--color-fuente); + border: none; + border-radius: 50px; + padding: 15px 25px; + font-size: 16px; + font-weight: bold; + cursor: pointer; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + transition: background-color 0.3s, transform 0.3s; + z-index: 100; +} + +.btn-contacto:hover { + background-color: #e5b600; + transform: scale(1.05); +} + +/* ----- DISEÑO RESPONSIVE ----- */ +@media (max-width: 768px) { + /* Ajustes para móviles en cabecera */ + .page-header { + padding: 30px 15px; + } + + .page-header h1 { + font-size: 2rem; + } + + .page-header p { + font-size: 1rem; + } + + /* Ajustes para móviles en contenido principal */ + main { + padding: 20px 15px; + } + + /* Una columna en móviles */ + .equipo-grid { + grid-template-columns: 1fr; + gap: 20px; + } + + .apoyo-grid { + grid-template-columns: 1fr; + } + + .certificaciones-grid { + grid-template-columns: 1fr; + } + + /* Botón más pequeño en móviles */ + .btn-contacto { + bottom: 20px; + right: 20px; + padding: 12px 20px; + font-size: 14px; + } + + /* Ajustes de texto para móviles */ + .equipo-section h2 { + font-size: 1.6rem; + } + + .info-miembro h3 { + font-size: 1.2rem; + } +} \ No newline at end of file diff --git a/Taller1/css/header-footer.css b/Taller1/css/header-footer.css new file mode 100644 index 0000000..bbe1bba --- /dev/null +++ b/Taller1/css/header-footer.css @@ -0,0 +1,117 @@ +/* ===================== + ARCHIVO: header-footer.css + DESCRIPCIÓN: Estilos unificados para header y footer en todas las páginas + FECHA: 2025 +===================== */ + +/* ----- VARIABLES DE COLOR BASADAS EN EL LOGIN ----- */ +:root { + --azul-principal: #0fa49c; /* Color azul principal del login */ + --azul-claro: #087872; /* Color azul claro para fondos */ + --color-secundario: #ffca1c; /* Color amarillo para acentos */ + --fondo-claro: #f0f9f8; /* Fondo claro para páginas */ + --fondo-tarjeta: #ffffff; /* Fondo blanco para tarjetas */ + --color-fuente: #333333; /* Color principal de texto */ + --color-hover: #0d8c85; /* Color para efectos hover */ +} + +/* ----- RESET Y ESTILOS BASE ----- */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Segoe UI", sans-serif; +} + +/* ----- ESTILOS DEL HEADER ----- */ +header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 15px 40px; + background: var(--azul-principal); + color: #fff; + height: 120px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +/* Logo de la clínica */ +.logo img { + width: 300px; + height: auto; +} + +/* Navegación principal */ +nav ul { + display: flex; + list-style: none; + gap: 25px; +} + +nav a { + color: #fff; + text-decoration: none; + font-weight: 500; + font-size: 16px; + padding: 8px 12px; + border-radius: 5px; + transition: background-color 0.3s; +} + +/* Efecto hover y estado activo */ +nav a:hover, +nav a.active { + background-color: var(--color-hover); +} + +/* ----- ESTILOS DEL FOOTER ----- */ +footer { + background: var(--azul-principal); + color: white; + text-align: center; + padding: 25px 20px; + margin-top: auto; +} + +/* Contenedor de redes sociales */ +footer .redes-sociales { + margin-top: 12px; + display: flex; + justify-content: center; + gap: 18px; +} + +/* Enlaces de redes sociales */ +footer .redes-sociales a { + text-decoration: none; + color: #f5f7fa; + font-weight: bold; + transition: color 0.3s; +} + +footer .redes-sociales a:hover { + color: var(--color-secundario); +} + +/* ----- DISEÑO RESPONSIVE ----- */ +@media (max-width: 768px) { + /* Header en columna para móviles */ + header { + flex-direction: column; + height: auto; + padding: 15px; + gap: 15px; + } + + /* Logo más pequeño en móviles */ + .logo img { + width: 200px; + } + + /* Menú en múltiples líneas */ + nav ul { + flex-wrap: wrap; + justify-content: center; + gap: 10px; + } +} \ No newline at end of file diff --git a/Taller1/css/inicio.css b/Taller1/css/inicio.css index 6b3eb27..c90f0b5 100644 --- a/Taller1/css/inicio.css +++ b/Taller1/css/inicio.css @@ -1,360 +1,337 @@ -/* ===================== - RESET GLOBAL -===================== */ -/* Reiniciamos márgenes y padding de todos los elementos - y establecemos box-sizing para incluir padding y borde en ancho/alto */ -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -/* ===================== - BODY -===================== */ -/* Estilos generales de la página */ -body { - font-family: "Cascadia Code PL", Arial, sans-serif; /* fuente principal */ - background-color: #f5f7fa; /* color de fondo suave */ - color: #2c3e50; /* color de texto por defecto */ - min-height: 100vh; /* ocupa al menos toda la altura de la ventana */ -} - -/* ===================== - HEADER -===================== */ -/* Contenedor del header con logo y menú */ -header { - display: flex; /* alinea elementos horizontalmente */ - justify-content: space-between; /* separa logo y menú */ - align-items: center; /* centra verticalmente */ - height: 150px; - padding: 0 40px; - background: linear-gradient(90deg, #2980b9 60%, #3498db 100%); /* degradado azul */ - box-shadow: 0px 2px 8px rgba(41,128,185,0.08); /* sombra sutil */ -} - -/* Logo dentro del header */ -header .logo img { - width: 350px; - height: auto; /* mantiene proporciones */ -} - -/* Menú de navegación */ -header nav ul { - display: flex; /* lista horizontal */ - gap: 25px; /* espacio entre enlaces */ - list-style: none; /* elimina viñetas */ -} - -/* Enlaces del menú */ -header nav ul li a { - text-decoration: none; /* sin subrayado */ - color: #ecf0f1; /* color claro */ - font-weight: 600; - font-size: 16px; - transition: color 0.2s; /* transición suave al cambiar color */ -} - -/* Hover sobre enlaces */ -header nav ul li a:hover { - color: #f1c40f; /* amarillo dorado */ -} - -/* ===================== - BANNER -===================== */ -/* Contenedor principal del banner */ -.banner { - position: relative; /* para superponer texto */ - display: flex; - align-items: center; - justify-content: center; - height: 400px; /* altura fija */ - overflow: hidden; /* recorta lo que sobresalga */ -} - -/* Imagen del banner */ -.banner img { - width: 100%; - height: 400px; - object-fit: cover; /* ajusta sin deformar */ - opacity: 0.6; /* transparencia ligera */ - position: absolute; /* debajo del texto */ - top: 0; - left: 0; - z-index: 1; /* detrás del contenido */ -} - -/* Texto dentro del banner */ -.banner-text { - position: relative; - z-index: 2; /* encima de la imagen */ - width: 80%; - max-width: 700px; - margin: 0 auto; - background: rgba(41,128,185,0.3); /* fondo semitransparente azul */ - border-radius: 16px; - padding: 32px 24px; - box-shadow: 0px 2px 12px rgba(41,128,185,0.15); - text-align: center; -} - -/* Título del banner */ -.banner-text h1 { - font-size: 40px; - font-weight: 700; - margin-bottom: 12px; - color: #f5f7fa; /* blanco */ - text-shadow: 0 2px 8px rgba(0,0,0,0.5); /* sombra para destacar */ -} - -/* Descripción del banner */ -.banner-text p { - font-size: 20px; - color: #f5f7fa; - text-shadow: 0 2px 8px rgba(0,0,0,0.5); -} - -/* ===================== - SECCIÓN DE SERVICIOS -===================== */ -/* Título de la sección */ -.section-title { - color: #2980b9; - text-align: center; - font-size: 32px; - margin: 60px 0 40px; -} - -/* Wrapper del carrusel */ -.carousel-wrapper { - display: flex; - align-items: center; - justify-content: center; - margin: 40px auto; - padding: 0 20px; - max-width: 1200px; - position: relative; /* para posicionar botones */ -} - -/* Carrusel horizontal */ -.carousel { - display: flex; - overflow-x: auto; /* permite scroll horizontal */ - scroll-behavior: smooth; /* transición suave */ - scroll-snap-type: x mandatory; /* snap horizontal */ - gap: 30px; /* espacio entre tarjetas */ - justify-content: flex-start; - padding: 20px 0; -} - -/* Cada tarjeta se ajusta al inicio del scroll */ -.carousel .servicio { - scroll-snap-align: start; -} - -/* Margen extra para primera y última tarjeta */ -.carousel .servicio:first-child { - margin-left: 15px; -} -.carousel .servicio:last-child { - margin-right: 15px; -} - -/* Botones del carrusel */ -.carousel-btn { - background-color: rgba(41,128,185,0.8); - border: none; - color: #fff; - font-size: 32px; - padding: 12px 18px; - cursor: pointer; - border-radius: 50%; - transition: background-color 0.3s; -} - -.carousel-btn:hover { - background-color: rgba(41,128,185,1); /* más intenso al pasar mouse */ -} - -.left-btn { - margin-right: 10px; -} - -.right-btn { - margin-left: 10px; -} - -/* Tarjetas de servicios */ -.servicio { - background-color: #ecf0f1; - border-radius: 16px; - padding: 20px; - flex: 0 0 calc(33.33% - 20px); /* ancho 3 tarjetas por fila */ - text-align: center; - box-shadow: 0 4px 15px rgba(41,128,185,0.1); - transition: transform 0.3s ease, box-shadow 0.3s ease; - display: flex; - flex-direction: column; - justify-content: flex-start; - height: 400px; -} - -/* Imagen de la tarjeta */ -.servicio img { - width: 100%; - height: 180px; - object-fit: cover; - border-radius: 12px; - margin-bottom: 15px; -} - -/* Título de la tarjeta */ -.servicio h3 { - margin-bottom: 10px; - color: #2980b9; - font-size: 20px; -} - -/* Descripción */ -.servicio p { - font-size: 15px; - color: #2c3e50; -} - -/* Animación hover */ -.servicio:hover { - transform: translateY(-10px) scale(1.05); - box-shadow: 0 10px 30px rgba(41,128,185,0.2); -} - -/* ===================== - TESTIMONIOS -===================== */ -#testimonios { - padding: 50px 40px; - text-align: center; - background: linear-gradient(90deg, #ecf0f1 60%, #bdc3c7 100%); -} - -#testimonios h2 { - margin-bottom: 40px; - font-size: 32px; - color: #2980b9; -} - -/* Grid de testimonios */ -.testimonios-grid { - display: flex; - flex-wrap: wrap; - gap: 30px; - justify-content: center; -} - -/* Tarjeta de testimonio */ -.testimonio { - background: #fff; - border-radius: 14px; - padding: 24px 18px; - width: 280px; - box-shadow: 0 2px 12px rgba(41,128,185,0.07); - transition: transform 0.2s, box-shadow 0.2s; - font-style: italic; -} - -/* Hover testimonios */ -.testimonio:hover { - transform: translateY(-5px); - box-shadow: 0 6px 20px rgba(41,128,185,0.13); -} - -/* Último párrafo destacado */ -.testimonio p:last-child { - font-style: normal; - font-weight: bold; - margin-top: 10px; -} - -/* ===================== - FOOTER -===================== */ -footer { - background-color: #2980b9; - color: #ecf0f1; - text-align: center; - padding: 30px 20px; -} - -/* Redes sociales */ -footer .redes-sociales { - margin-top: 12px; - display: flex; - justify-content: center; - gap: 18px; -} - -footer .redes-sociales a { - text-decoration: none; - color: #f5f7fa; - font-weight: bold; -} - -footer .redes-sociales a:hover { - color: #f1c40f; -} - -/* ===================== - BOTÓN "VOLVER ARRIBA" -===================== */ -#btn-top { - position: fixed; - bottom: 20px; - right: 20px; - background-color: #2980b9; - color: #fff; - border: none; - border-radius: 50%; - padding: 15px 20px; - font-size: 16px; - cursor: pointer; - box-shadow: 0 4px 12px rgba(0,0,0,0.2); - transition: background-color 0.3s; -} - -#btn-top:hover { - background-color: #3498db; -} - -/* ===================== - RESPONSIVE -===================== */ -/* Pantallas medianas */ -@media screen and (max-width: 1024px) { - .servicio { - flex: 0 0 calc(50% - 20px); /* 2 tarjetas por fila */ - } -} - -/* Pantallas pequeñas */ -@media screen and (max-width: 768px) { - .servicio { - flex: 0 0 calc(100% - 20px); /* 1 tarjeta por fila */ - } - header { - flex-direction: column; /* menú bajo logo */ - height: auto; - padding: 20px; - } - header nav ul { - flex-wrap: wrap; /* menú multi-línea */ - justify-content: center; - gap: 15px; - } - .banner-text h1 { - font-size: 28px; - } - .banner-text p { - font-size: 16px; - } -} +/* ===================== + ARCHIVO: inicio.css + DESCRIPCIÓN: Estilos específicos para la página de inicio + FECHA: 2025 +===================== */ + +/* Importar estilos base del header y footer */ +@import url('header-footer.css'); + +/* ----- ESTILOS GENERALES DEL BODY ----- */ +body { + font-family: "Cascadia Code PL", Arial, sans-serif; + background-color: var(--fondo-claro); + color: var(--color-fuente); + min-height: 100vh; +} + +/* ===================== + SECCIÓN BANNER +===================== */ +.banner { + position: relative; + display: flex; + align-items: center; + justify-content: center; + height: 500px; + overflow: hidden; +} + +/* Imagen de fondo del banner */ +.banner img { + width: 100%; + height: 100%; + object-fit: cover; + opacity: 0.7; + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +/* Texto superpuesto sobre el banner */ +.banner-text { + position: relative; + z-index: 2; + width: 80%; + max-width: 800px; + margin: 0 auto; + background: rgba(15, 164, 156, 0.7); + border-radius: 16px; + padding: 40px 30px; + box-shadow: 0px 2px 12px rgba(15, 164, 156, 0.3); + text-align: center; + color: white; +} + +/* Título del banner */ +.banner-text h1 { + font-size: 40px; + font-weight: 700; + margin-bottom: 15px; + text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); +} + +/* Descripción del banner */ +.banner-text p { + font-size: 20px; + margin-bottom: 25px; + text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); +} + +/* Botón call-to-action del banner */ +.btn-banner { + background-color: var(--color-secundario); + color: var(--color-fuente); + border: none; + border-radius: 50px; + padding: 12px 30px; + font-size: 18px; + font-weight: bold; + cursor: pointer; + transition: background-color 0.3s, transform 0.3s; +} + +.btn-banner:hover { + background-color: #e5b600; + transform: scale(1.05); +} + +/* ===================== + SECCIÓN DE SERVICIOS +===================== */ +#servicios { + padding: 60px 20px; + background-color: white; +} + +/* Título de sección */ +.section-title { + color: var(--azul-principal); + text-align: center; + font-size: 32px; + margin-bottom: 40px; +} + +/* Contenedor del carrusel */ +.carousel-wrapper { + display: flex; + align-items: center; + justify-content: center; + margin: 40px auto; + padding: 0 20px; + max-width: 1200px; + position: relative; +} + +/* Carrusel horizontal */ +.carousel { + display: flex; + overflow-x: auto; + scroll-behavior: smooth; + scroll-snap-type: x mandatory; + gap: 30px; + justify-content: flex-start; + padding: 20px 0; +} + +/* Alineación de items del carrusel */ +.carousel .servicio { + scroll-snap-align: start; +} + +/* Margen para primer y último item */ +.carousel .servicio:first-child { + margin-left: 15px; +} + +.carousel .servicio:last-child { + margin-right: 15px; +} + +/* Botones de navegación del carrusel */ +.carousel-btn { + background-color: rgba(15, 164, 156, 0.8); + border: none; + color: #fff; + font-size: 32px; + padding: 12px 18px; + cursor: pointer; + border-radius: 50%; + transition: background-color 0.3s; +} + +.carousel-btn:hover { + background-color: var(--azul-principal); +} + +/* Posicionamiento de botones */ +.left-btn { + margin-right: 10px; +} + +.right-btn { + margin-left: 10px; +} + +/* Tarjetas de servicios */ +.servicio { + background-color: white; + border-radius: 16px; + padding: 20px; + flex: 0 0 calc(33.33% - 20px); + text-align: center; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + transition: transform 0.3s ease, box-shadow 0.3s ease; + display: flex; + flex-direction: column; + justify-content: flex-start; + height: 350px; + border-top: 4px solid var(--azul-principal); +} + +/* Imágenes de servicios */ +.servicio img { + width: 100%; + height: 180px; + object-fit: cover; + border-radius: 12px; + margin-bottom: 15px; +} + +/* Títulos de servicios */ +.servicio h3 { + margin-bottom: 10px; + color: var(--azul-principal); + font-size: 20px; +} + +/* Descripción de servicios */ +.servicio p { + font-size: 15px; + color: var(--color-fuente); +} + +/* Efecto hover en servicios */ +.servicio:hover { + transform: translateY(-10px); + box-shadow: 0 10px 30px rgba(15, 164, 156, 0.2); +} + +/* Contenedor del botón ver más */ +.ver-mas-container { + text-align: center; + margin-top: 30px; +} + +/* Botón ver más servicios */ +.btn-ver-mas { + background-color: transparent; + color: var(--azul-principal); + border: 2px solid var(--azul-principal); + border-radius: 50px; + padding: 10px 25px; + font-size: 16px; + font-weight: bold; + cursor: pointer; + transition: all 0.3s; +} + +.btn-ver-mas:hover { + background-color: var(--azul-principal); + color: white; +} + +/* ===================== + SECCIÓN DE TESTIMONIOS +===================== */ +#testimonios { + padding: 60px 40px; + text-align: center; + background: var(--fondo-claro); +} + +#testimonios h2 { + margin-bottom: 40px; + font-size: 32px; + color: var(--azul-principal); +} + +/* Grid de testimonios */ +.testimonios-grid { + display: flex; + flex-wrap: wrap; + gap: 30px; + justify-content: center; +} + +/* Tarjetas de testimonios */ +.testimonio { + background: #fff; + border-radius: 14px; + padding: 24px 18px; + width: 280px; + box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07); + transition: transform 0.2s, box-shadow 0.2s; + font-style: italic; + border-left: 4px solid var(--color-secundario); +} + +.testimonio:hover { + transform: translateY(-5px); + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.13); +} + +/* Servicio mencionado en testimonio */ +.testimonio p:last-child { + font-style: normal; + font-weight: bold; + margin-top: 10px; + color: var(--azul-principal); +} + +/* ===================== + BOTÓN "VOLVER ARRIBA" +===================== */ +#btn-top { + position: fixed; + bottom: 20px; + right: 20px; + background-color: var(--azul-principal); + color: #fff; + border: none; + border-radius: 10px; + padding: 15px 20px; + font-size: 16px; + cursor: pointer; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + transition: background-color 0.3s; +} + +#btn-top:hover { + background-color: var(--color-hover); +} + +/* ===================== + DISEÑO RESPONSIVE +===================== */ +@media screen and (max-width: 1024px) { + /* 2 tarjetas por fila en tablets */ + .servicio { + flex: 0 0 calc(50% - 20px); + } +} + +@media screen and (max-width: 768px) { + /* 1 tarjeta por fila en móviles */ + .servicio { + flex: 0 0 calc(100% - 20px); + } + + /* Ajustes de texto para móviles */ + .banner-text h1 { + font-size: 28px; + } + + .banner-text p { + font-size: 16px; + } + + .banner { + height: 400px; + } + + .section-title { + font-size: 28px; + } +} \ No newline at end of file diff --git a/Taller1/css/login.css b/Taller1/css/login.css index 8afef53..530be45 100644 --- a/Taller1/css/login.css +++ b/Taller1/css/login.css @@ -1,165 +1,420 @@ -/* ===================== - RESET GLOBAL - ===================== */ -/* Elimina márgenes y padding por defecto de todos los elementos y establece box-sizing para que padding y border se incluyan en ancho/alto */ -* { - box-sizing: border-box; - margin: 0; - padding: 0; -} - -/* ===================== - BODY - ===================== */ -/* Configuración general del body y html: altura completa, fuente principal y posición relativa */ -body, html { - height: 100%; - font-family: "Cascadia Code PL", Arial, sans-serif; - position: relative; -} - -/* ===================== - BANNER FULL-SCREEN - ===================== */ -/* Banner fijo que ocupa toda la pantalla */ -.banner { - position: fixed; /* siempre visible como fondo */ - top: 0; - left: 0; - width: 100vw; - height: 100vh; - overflow: hidden; - z-index: 0; /* detrás de todo el contenido */ -} - -/* Imagen de fondo que cubre todo el banner */ -.banner img { - width: 100%; - height: 100%; - object-fit: cover; /* asegura que la imagen cubra toda la pantalla sin distorsión */ -} - -/* Overlay azul semitransparente sobre la imagen para mejorar contraste y visibilidad del formulario */ -.banner .overlay { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(41, 128, 185, 0.5); /* azul semitransparente */ -} - -/* ===================== - FORMULARIO CENTRAL - ===================== */ -/* Contenedor del login centrado vertical y horizontalmente */ -.login-container { - position: relative; /* encima del banner */ - z-index: 1; /* asegura que esté delante del banner */ - background-color: rgba(255, 255, 255, 0.95); /* semi-transparente para suavizar overlay */ - padding: 50px 40px; - border-radius: 20px; /* esquinas redondeadas */ - box-shadow: 0 15px 40px rgba(0,0,0,0.2); /* sombra suave */ - width: 380px; /* ancho fijo */ - text-align: center; - margin: 0 auto; - top: 50%; - transform: translateY(-50%); /* centra verticalmente */ -} - -/* Título del login */ -.login-container h1 { - margin-bottom: 30px; - color: #2980b9; /* azul principal */ - font-size: 32px; -} - -/* ===================== - CAMPOS DEL FORMULARIO - ===================== */ -/* Contenedor de cada input + label */ -.form-group { - margin-bottom: 20px; - text-align: left; /* labels alineados a la izquierda */ -} - -/* Estilo de los labels */ -.form-group label { - display: block; - margin-bottom: 8px; - font-weight: bold; - color: #2c3e50; /* gris oscuro */ -} - -/* Estilo de los inputs */ -.form-group input { - width: 100%; - padding: 14px 12px; - border: 1px solid #aeb6bf; /* borde gris claro */ - border-radius: 8px; - font-size: 16px; - transition: border-color 0.3s ease, box-shadow 0.3s ease; /* transición suave al enfocar */ -} - -/* Efecto al enfocar input */ -.form-group input:focus { - border-color: #2980b9; /* azul al seleccionar */ - box-shadow: 0 0 10px rgba(41,128,185,0.3); - outline: none; -} - -/* ===================== - BOTÓN DE LOGIN - ===================== */ -button { - width: 100%; - padding: 14px; - background: linear-gradient(135deg, #2980b9, #3498db); /* degradado azul */ - color: white; - font-size: 18px; - font-weight: bold; - border: none; - border-radius: 30px; - cursor: pointer; - transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease; - margin-top: 10px; - box-shadow: 0 5px 15px rgba(0,0,0,0.1); -} - -/* Efecto hover */ -button:hover { - background: linear-gradient(135deg, #3498db, #2980b9); /* invertir degradado */ - transform: translateY(-3px); /* pequeño levantamiento */ - box-shadow: 0 8px 25px rgba(0,0,0,0.2); -} - -/* Efecto al presionar */ -button:active { - background: #246fa4; /* azul más oscuro */ - transform: translateY(0); /* vuelve a la posición original */ -} - -/* ===================== - RESPONSIVE - ===================== */ -/* Ajustes para pantallas pequeñas */ -@media screen and (max-width: 480px) { - .login-container { - width: 90%; /* ancho adaptativo */ - padding: 30px 20px; - } - - .login-container h1 { - font-size: 28px; /* título más pequeño */ - } - - .form-group input { - padding: 12px 10px; - font-size: 15px; - } - - button { - font-size: 16px; - padding: 12px; - } -} +/* ===================== + ARCHIVO: login.css + DESCRIPCIÓN: Estilos específicos para la página de login + FECHA: 2025 +===================== */ + +/* ----- VARIABLES DE COLOR ----- */ +:root { + --azul-principal: #0fa49c; /* Color azul principal del diseño */ + --color-secundario: #ffca1c; /* Color amarillo para acentos */ + --fondo-claro: #087872; /* Fondo azul claro */ + --fondo-tarjeta: #ffffff; /* Fondo blanco para tarjetas */ + --color-fuente: #000000; /* Color principal de texto */ +} + +/* ----- ESTILOS BASE Y UTILIDADES ----- */ +body { + margin: 0; + font-family: 'Cascadia Code PL', monospace; + background-color: var(--fondo-claro); + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + overflow: hidden; + color: var(--color-fuente); +} + +/* Clases de utilidad para mostrar/ocultar elementos */ +.oculto { + display: none !important; +} + +.contenedor-logo.ocultar-final { + display: none !important; +} + +.pantalla-inicial.ocultar-fondo-blanco { + background-color: transparent !important; + z-index: 1; +} + +/* ===================== + PANTALLA DE CARGA Y LOGO +===================== */ +.pantalla-inicial { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + background-color: var(--fondo-claro); + z-index: 100; +} + +/* Expansor azul para animación de entrada */ +.expansor-azul { + width: 100%; + height: 100%; + background-color: var(--azul-principal); + position: absolute; + transform: scaleX(0); + transform-origin: center center; + animation: expandir-horizontalmente 0.8s cubic-bezier(0.65, 0.05, 0.36, 1) forwards; + z-index: 99; +} + +/* Contenedor del logo */ +.contenedor-logo { + opacity: 0; + position: absolute; + z-index: 101; + perspective: 1000px; +} + +/* Logo de la clínica */ +.logo-clinica { + width: 1200px; + height: auto; + display: block; +} + +/* Animaciones del logo */ +.contenedor-logo.mostrar-logo { + animation: rotar-logo 0.7s ease-out forwards; +} + +.contenedor-logo.desvanecer { + animation: rotar-y-desvanecer 0.6s ease-in forwards; +} + +/* ===================== + CONTENEDOR DE LOGIN +===================== */ +.contenedor-login { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100vh; + max-width: 550px; + transform: scaleX(0); + transform-origin: center center; + opacity: 0; + z-index: 50; + background-color: var(--fondo-tarjeta); + box-shadow: 0 0 30px rgba(0, 0, 0, 0.2); +} + +/* Estado visible del contenedor de login */ +.contenedor-login.visible { + opacity: 1; + animation: aparecer-horizontal 0.8s cubic-bezier(0.65, 0.05, 0.36, 1) forwards; +} + +/* Tarjeta de login */ +.tarjeta-login { + padding: 60px; + max-width: 490px; + width: 100%; + text-align: center; + min-width: 100%; + box-sizing: border-box; + background-color: transparent; + box-shadow: none; +} + +/* Encabezado del login */ +.encabezado-login { + margin-bottom: 40px; +} + +/* Título de bienvenida */ +h2 { + font-size: 2.0rem; + color: var(--azul-principal); + margin: 0; +} + +/* ===================== + ELEMENTOS DEL FORMULARIO +===================== */ + +/* Grupo de entrada (input con label flotante) */ +.grupo-entrada { + position: relative; + text-align: left; + margin-bottom: 40px; +} + +/* Campos de entrada */ +.grupo-entrada input { + width: 100%; + padding: 12px 0 5px 0; + margin-bottom: 5px; + font-size: 1.2rem; + color: var(--azul-principal); + border: none; + border-bottom: 2px solid #ccc; + outline: none; + background: transparent; + box-sizing: border-box; + transition: border-color 0.3s; +} + +/* Efecto focus en campos */ +.grupo-entrada input:focus { + border-color: var(--azul-principal); + box-shadow: none; +} + +/* Labels flotantes */ +.grupo-entrada label { + position: absolute; + top: 12px; + left: 0; + padding: 0; + font-size: 1.2rem; + color: #999; + pointer-events: none; + transition: 0.5s; + display: flex; + align-items: center; +} + +/* Iconos en los labels */ +.grupo-entrada label i { + margin-right: 12px; + color: #999; + font-size: 1.4rem; + transition: 0.5s; +} + +/* Animación del label (flotante) */ +.grupo-entrada input:focus + label, +.grupo-entrada input:valid + label { + top: -25px; + left: 0; + color: var(--azul-principal); + font-size: 0.9rem; +} + +.grupo-entrada input:focus + label i, +.grupo-entrada input:valid + label i { + color: var(--azul-principal); +} + +/* ----- CHECKBOX "RECORDARME" ----- */ +.opciones-login { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 30px; + font-size: 1rem; + color: #555; +} + +.recordarme { + display: flex; + align-items: center; + cursor: pointer; + user-select: none; + padding-top: 5px; +} + +/* Checkbox oculto */ +.hidden-xs-up { + display: none!important; +} + +.cntr { + position: relative; + display: flex; + align-items: center; +} + +/* Checkbox personalizado */ +.cbx { + position: relative; + width: 20px; + height: 20px; + border: 1px solid #c8ccd4; + border-radius: 3px; + transition: background 0.1s ease; + cursor: pointer; + display: block; + margin-right: 8px; +} + +/* Checkmark del checkbox */ +.cbx:after { + content: ''; + position: absolute; + top: 1px; + left: 5px; + width: 5px; + height: 11px; + opacity: 0; + transform: rotate(45deg) scale(0); + border-right: 2px solid var(--fondo-tarjeta); + border-bottom: 2px solid var(--fondo-tarjeta); + transition: all 0.3s ease; + transition-delay: 0.15s; +} + +.lbl { + vertical-align: middle; + cursor: pointer; +} + +/* Estado checked del checkbox */ +#cbx-recordar:checked ~ .cbx { + border-color: transparent; + background: var(--azul-principal); + animation: jelly 0.6s ease; +} + +#cbx-recordar:checked ~ .cbx:after { + opacity: 1; + transform: rotate(45deg) scale(1); +} + +/* Enlace "¿Olvidaste la contraseña?" */ +.olvide-contrasena { + color: var(--azul-principal); + text-decoration: none; + font-weight: bold; + transition: color 0.3s; +} + +.olvide-contrasena:hover { + color: var(--fondo-claro); +} + +/* ----- BOTONES ----- */ +.boton-acceso { + width: 100%; + padding: 18px; + background-color: var(--color-secundario); + color: var(--color-fuente); + border: none; + border-radius: 10px; + font-size: 1.4rem; + cursor: pointer; + transition: background-color 0.3s; + font-weight: bold; + margin-bottom: 20px; +} + +.boton-acceso:hover { + background-color: #e5b600; +} + +.boton-invitado { + width: 100%; + padding: 10px; + background-color: transparent; + color: var(--azul-principal); + border: 2px solid var(--azul-principal); + border-radius: 10px; + font-size: 1.1rem; + cursor: pointer; + transition: all 0.3s; + font-weight: bold; + text-align: center; + display: block; +} + +.boton-invitado:hover { + background-color: var(--azul-principal); + color: var(--fondo-tarjeta); +} + +/* ----- MENSAJE DE ERROR ----- */ +.mensaje-error { + color: #cc0000; + font-size: 0.9rem; + font-weight: bold; + margin-bottom: 20px; + padding: 10px; + border: 1px solid #ffcccc; + background-color: #ffebeb; + border-radius: 5px; + text-align: center; +} + +/* ===================== + ANIMACIONES (KEYFRAMES) +===================== */ +@keyframes expandir-horizontalmente { + to { transform: scaleX(1); } +} + +@keyframes rotar-logo { + 0% { transform: rotateY(-90deg); opacity: 0; } + 50% { transform: rotateY(0deg); opacity: 1; } + 100% { transform: rotateY(0deg); opacity: 1; } +} + +@keyframes rotar-y-desvanecer { + 0% { transform: rotateY(0deg); opacity: 1; } + 100% { transform: rotateY(90deg); opacity: 0; } +} + +@keyframes aparecer-horizontal { + 0% { transform: scaleX(0); } + 100% { transform: scaleX(1); } +} + +@keyframes jelly { + from { transform: scale(1, 1); } + 30% { transform: scale(1.25, 0.75); } + 40% { transform: scale(0.75, 1.25); } + 50% { transform: scale(1.15, 0.85); } + 65% { transform: scale(0.95, 1.05); } + 75% { transform: scale(1.05, 0.95); } + to { transform: scale(1, 1); } +} + +/* ===================== + DISEÑO RESPONSIVE +===================== */ +@media (max-width: 480px) { + /* Tarjeta de login ocupa todo el ancho en móviles */ + .contenedor-login { + max-width: 100%; + box-shadow: none; + } + + /* Reducir padding en móviles */ + .tarjeta-login { + padding: 40px 30px; + } + + /* Ajustar tamaño de fuente para móviles */ + h2 { + font-size: 1.7rem; + margin-bottom: 30px; + } + + .grupo-entrada { + margin-bottom: 30px; + } + + /* Ajustar tamaño del botón en móviles */ + .boton-acceso { + padding: 15px; + font-size: 1.2rem; + } + + /* Opciones de login en columna en móviles */ + .opciones-login { + flex-direction: column; + gap: 15px; + align-items: flex-start; + } +} \ No newline at end of file diff --git a/Taller1/css/pedirTurno.css b/Taller1/css/pedirTurno.css new file mode 100644 index 0000000..e95fffe --- /dev/null +++ b/Taller1/css/pedirTurno.css @@ -0,0 +1,325 @@ +/* ===================== + ARCHIVO: pedirTurno.css + DESCRIPCIÓN: Estilos específicos para la página de pedir turno + FECHA: 2025 +===================== */ + +/* Importar estilos base del header y footer */ +@import url('header-footer.css'); + +/* ----- ESTILOS GENERALES DEL BODY ----- */ +body { + background: var(--fondo-claro); + min-height: 100vh; + display: flex; + flex-direction: column; +} + +/* ----- CONTENEDOR PRINCIPAL ----- */ +.container { + flex: 1; + max-width: 1200px; + margin: 0 auto; + padding: 20px; +} + +/* ----- CABECERA DE PÁGINA ----- */ +.page-header { + text-align: center; + margin-bottom: 40px; + padding: 30px 20px; + background: linear-gradient(135deg, var(--azul-principal) 0%, var(--azul-claro) 100%); + border-radius: 16px; + color: white; +} + +.page-header h1 { + font-size: 2.5rem; + margin-bottom: 15px; +} + +.page-header p { + font-size: 1.1rem; + max-width: 600px; + margin: 0 auto; + line-height: 1.6; +} + +/* ===================== + SECCIÓN DEL FORMULARIO +===================== */ +.form-section { + background: var(--fondo-tarjeta); + border-radius: 16px; + padding: 40px; + margin-bottom: 40px; + box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); +} + +/* Contenedor del formulario */ +.formulario { + max-width: 800px; + margin: 0 auto; +} + +/* ----- ESTILOS DEL FORMULARIO ----- */ +.turno-form { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 25px; +} + +/* Grupos de formulario */ +.form-group { + display: flex; + flex-direction: column; +} + +/* Campos de ancho completo */ +.form-group.full-width { + grid-column: 1 / -1; +} + +/* Etiquetas de los campos */ +.form-group label { + margin-bottom: 8px; + font-weight: 600; + color: var(--azul-principal); + font-size: 1rem; +} + +/* Campos de entrada */ +.form-group input, +.form-group select, +.form-group textarea { + padding: 12px 15px; + border: 2px solid #e0e0e0; + border-radius: 8px; + font-size: 1rem; + transition: all 0.3s ease; + background-color: #fafafa; +} + +/* Efecto focus en campos */ +.form-group input:focus, +.form-group select:focus, +.form-group textarea:focus { + outline: none; + border-color: var(--azul-principal); + background-color: white; + box-shadow: 0 0 0 3px rgba(15, 164, 156, 0.1); +} + +/* Textarea específico */ +.form-group textarea { + resize: vertical; + min-height: 100px; + font-family: inherit; +} + +/* Texto de ayuda */ +.help-text { + margin-top: 5px; + font-size: 0.85rem; + color: #666; + font-style: italic; +} + +/* ----- CHECKBOX PERSONALIZADO ----- */ +.checkbox-label { + display: flex; + align-items: flex-start; + cursor: pointer; + font-size: 0.95rem; + line-height: 1.4; +} + +.checkbox-label input[type="checkbox"] { + display: none; +} + +/* Checkmark personalizado */ +.checkmark { + width: 20px; + height: 20px; + border: 2px solid #ddd; + border-radius: 4px; + margin-right: 10px; + margin-top: 2px; + position: relative; + transition: all 0.3s ease; + flex-shrink: 0; +} + +/* Efecto cuando el checkbox está checked */ +.checkbox-label input[type="checkbox"]:checked + .checkmark { + background-color: var(--azul-principal); + border-color: var(--azul-principal); +} + +/* Icono de check */ +.checkbox-label input[type="checkbox"]:checked + .checkmark::after { + content: "✓"; + position: absolute; + color: white; + font-size: 14px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +/* Enlace en el checkbox */ +.checkbox-label .link { + color: var(--azul-principal); + text-decoration: none; + font-weight: 600; +} + +.checkbox-label .link:hover { + text-decoration: underline; +} + +/* ----- BOTÓN DE ENVÍO ----- */ +.btn-submit { + grid-column: 1 / -1; + background-color: var(--color-secundario); + color: var(--color-fuente); + border: none; + border-radius: 50px; + padding: 15px 30px; + font-size: 1.1rem; + font-weight: bold; + cursor: pointer; + transition: all 0.3s ease; + margin-top: 10px; +} + +.btn-submit:hover { + background-color: #e5b600; + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +/* ===================== + SECCIÓN INFORMATIVA +===================== */ +.info-section { + margin-top: 40px; +} + +.info-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 25px; +} + +/* Tarjetas informativas */ +.info-card { + background: var(--fondo-tarjeta); + border-radius: 12px; + padding: 25px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); + border-left: 4px solid var(--azul-principal); + transition: transform 0.3s ease; +} + +.info-card:hover { + transform: translateY(-5px); +} + +.info-card h3 { + color: var(--azul-principal); + margin-bottom: 15px; + font-size: 1.3rem; +} + +.info-card p { + margin-bottom: 8px; + color: var(--color-fuente); + line-height: 1.5; +} + +.info-card strong { + color: var(--azul-claro); +} + +/* ===================== + DISEÑO RESPONSIVE +===================== */ +@media (max-width: 768px) { + /* Ajustes para móviles */ + .container { + padding: 15px; + } + + .page-header { + padding: 20px 15px; + margin-bottom: 30px; + } + + .page-header h1 { + font-size: 2rem; + } + + .page-header p { + font-size: 1rem; + } + + .form-section { + padding: 25px 20px; + margin-bottom: 30px; + } + + /* Formulario en una columna en móviles */ + .turno-form { + grid-template-columns: 1fr; + gap: 20px; + } + + /* Campos de ancho completo en móviles */ + .form-group.full-width { + grid-column: 1; + } + + /* Botón de envío */ + .btn-submit { + grid-column: 1; + } + + /* Grid informativo en una columna */ + .info-grid { + grid-template-columns: 1fr; + gap: 20px; + } + + /* Tarjetas informativas más compactas */ + .info-card { + padding: 20px; + } +} + +/* Estilos para tablets */ +@media (max-width: 1024px) and (min-width: 769px) { + .container { + max-width: 95%; + } + + .turno-form { + gap: 20px; + } +} + +/* Estilos para pantallas muy pequeñas */ +@media (max-width: 480px) { + .page-header h1 { + font-size: 1.8rem; + } + + .form-section { + padding: 20px 15px; + } + + .info-card { + padding: 15px; + } +} \ No newline at end of file diff --git a/Taller1/css/servicios.css b/Taller1/css/servicios.css new file mode 100644 index 0000000..aa4d878 --- /dev/null +++ b/Taller1/css/servicios.css @@ -0,0 +1,176 @@ +/* ===================== + ARCHIVO: servicios.css + DESCRIPCIÓN: Estilos específicos para la página de servicios + FECHA: 2025 +===================== */ + +/* Importar estilos base del header y footer */ +@import url('header-footer.css'); + +/* ----- ESTILOS GENERALES DEL BODY ----- */ +body { + background: var(--fondo-claro); + min-height: 100vh; + display: flex; + flex-direction: column; +} + +/* ----- CABECERA DE PÁGINA ----- */ +.page-header { + text-align: center; + padding: 40px 20px; + background: linear-gradient(135deg, var(--azul-principal) 0%, var(--azul-claro) 100%); + color: white; +} + +/* Título principal de la página */ +.page-header h1 { + font-size: 2.5rem; + margin-bottom: 15px; +} + +/* Descripción de la página */ +.page-header p { + font-size: 1.2rem; + max-width: 600px; + margin: 0 auto; +} + +/* ----- CONTENEDOR PRINCIPAL ----- */ +main { + flex: 1; + padding: 40px 20px; + max-width: 1200px; + margin: 0 auto; + width: 100%; +} + +/* ===================== + GRID DE SERVICIOS +===================== */ +.servicios-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; + margin: 40px 0; +} + +/* ----- TARJETAS DE SERVICIOS ----- */ +.servicio-card { + background: #fff; + border-radius: 14px; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); + padding: 25px 20px; + text-align: center; + transition: transform 0.3s, box-shadow 0.3s; + display: flex; + flex-direction: column; + align-items: center; + border-top: 4px solid var(--azul-principal); +} + +/* Efecto hover en tarjetas de servicio */ +.servicio-card:hover { + transform: translateY(-10px); + box-shadow: 0 10px 25px rgba(15, 164, 156, 0.15); +} + +/* Imágenes de los servicios */ +.servicio-card img { + width: 100%; + height: 200px; + object-fit: cover; + border-radius: 10px; + margin-bottom: 15px; + border: 2px solid var(--azul-claro); +} + +/* Títulos de los servicios */ +.servicio-card h3 { + margin-bottom: 12px; + color: var(--azul-principal); + font-size: 1.4rem; +} + +/* Descripción de los servicios */ +.servicio-card p { + margin-bottom: 20px; + color: var(--color-fuente); + line-height: 1.5; + flex-grow: 1; +} + +/* ----- BOTÓN DE INFORMACIÓN ----- */ +.btn-info { + background-color: var(--azul-principal); + color: white; + border: none; + border-radius: 5px; + padding: 10px 20px; + font-size: 1rem; + cursor: pointer; + transition: background-color 0.3s; + width: 100%; +} + +.btn-info:hover { + background-color: var(--color-hover); +} + +/* ----- BOTÓN FLOTANTE PARA PEDIR TURNO ----- */ +.btn-contacto { + position: fixed; + bottom: 30px; + right: 30px; + background-color: var(--color-secundario); + color: var(--color-fuente); + border: none; + border-radius: 50px; + padding: 15px 25px; + font-size: 16px; + font-weight: bold; + cursor: pointer; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); + transition: background-color 0.3s, transform 0.3s; + z-index: 100; +} + +.btn-contacto:hover { + background-color: #e5b600; + transform: scale(1.05); +} + +/* ----- DISEÑO RESPONSIVE ----- */ +@media (max-width: 768px) { + /* Ajustes para móviles en cabecera */ + .page-header { + padding: 30px 15px; + } + + .page-header h1 { + font-size: 2rem; + } + + .page-header p { + font-size: 1rem; + } + + /* Ajustes para móviles en contenido principal */ + main { + padding: 20px 15px; + } + + /* Una columna en móviles */ + .servicios-grid { + grid-template-columns: 1fr; + gap: 20px; + } + + /* Botón más pequeño en móviles */ + .btn-contacto { + bottom: 20px; + right: 20px; + padding: 12px 20px; + font-size: 14px; + } +} \ No newline at end of file diff --git a/Taller1/equipo.html b/Taller1/equipo.html new file mode 100644 index 0000000..878f989 --- /dev/null +++ b/Taller1/equipo.html @@ -0,0 +1,184 @@ + + + + + + + Clínica Dental - Nuestro Equipo + + + + + + + +
+ + + + + +
+ + +
+ +
+

Nuestro Equipo Profesional

+

Conoce a los especialistas que cuidarán de tu salud bucal con experiencia y dedicación

+
+ + +
+

Especialistas

+
+ +
+
+ Dr. Carlos Mendoza +
+
+

Dr. Carlos Mendoza

+

Odontólogo General - Especialista en Implantología

+

15 años de experiencia

+

Especializado en implantes dentales y rehabilitación oral. Miembro de la Sociedad de Implantología Chile.

+
+ 📧 + 📱 +
+
+
+ + +
+
+ Dra. Ana López +
+
+

Dra. Ana López

+

Ortodoncista

+

12 años de experiencia

+

Especialista en ortodoncia invisible y brackets estéticos. Certificada en Invisalign.

+
+ 📧 + 📱 +
+
+
+ + +
+
+ Dr. Roberto Silva +
+
+

Dr. Roberto Silva

+

Cirujano Maxilofacial

+

18 años de experiencia

+

Especialista en cirugías complejas, extracciones y tratamientos de ATM.

+
+ 📧 + 📱 +
+
+
+
+
+ + +
+

Equipo de Apoyo

+
+ +
+
+ María González +
+
+

María González

+

Higienista Dental

+

8 años de experiencia

+

Especialista en limpiezas dentales profundas y educación en higiene bucal.

+
+
+ + +
+
+ Pedro Martínez +
+
+

Pedro Martínez

+

Asistente Dental

+

6 años de experiencia

+

Apoyo en procedimientos y atención al paciente. Certificado en esterilización.

+
+
+ + +
+
+ Laura Fernández +
+
+

Laura Fernández

+

Recepcionista

+

5 años de experiencia

+

Gestión de citas y atención personalizada a nuestros pacientes.

+
+
+
+
+ + +
+

Certificaciones y Miembros

+
+
+

✅ Colegio de Odontólogos de Chile

+

Todos nuestros profesionales están certificados y activos en el colegio

+
+
+

🏥 Certificación en Bioseguridad

+

Clínica certificada en protocolos de bioseguridad y esterilización

+
+
+

📊 Miembros Activos

+

Formamos parte de las principales sociedades odontológicas del país

+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/Taller1/img/Blanqueamiento.jpg b/Taller1/img/Blanqueamiento.jpg new file mode 100644 index 0000000..994d351 Binary files /dev/null and b/Taller1/img/Blanqueamiento.jpg differ diff --git a/Taller1/img/Ejercicio Botes agregacion agrupacion.docx b/Taller1/img/Ejercicio Botes agregacion agrupacion.docx new file mode 100644 index 0000000..528892e Binary files /dev/null and b/Taller1/img/Ejercicio Botes agregacion agrupacion.docx differ diff --git a/Taller1/img/Ejercicio SQL Multiples funciones.docx b/Taller1/img/Ejercicio SQL Multiples funciones.docx new file mode 100644 index 0000000..47624e8 Binary files /dev/null and b/Taller1/img/Ejercicio SQL Multiples funciones.docx differ diff --git a/Taller1/img/Endodoncia.png b/Taller1/img/Endodoncia.png new file mode 100644 index 0000000..6a1a99e Binary files /dev/null and b/Taller1/img/Endodoncia.png differ diff --git a/Taller1/img/Implantes.jpg b/Taller1/img/Implantes.jpg new file mode 100644 index 0000000..25a29f3 Binary files /dev/null and b/Taller1/img/Implantes.jpg differ diff --git a/Taller1/img/Limpieza.jpeg b/Taller1/img/Limpieza.jpeg new file mode 100644 index 0000000..ea77a8b Binary files /dev/null and b/Taller1/img/Limpieza.jpeg differ diff --git a/Taller1/img/Limpieza.jpg b/Taller1/img/Limpieza.jpg new file mode 100644 index 0000000..7ee685e Binary files /dev/null and b/Taller1/img/Limpieza.jpg differ diff --git "a/Taller1/img/Odontopediatr\303\255a.jpg" "b/Taller1/img/Odontopediatr\303\255a.jpg" new file mode 100644 index 0000000..780d4eb Binary files /dev/null and "b/Taller1/img/Odontopediatr\303\255a.jpg" differ diff --git a/Taller1/img/Ortodoncia.jpg b/Taller1/img/Ortodoncia.jpg new file mode 100644 index 0000000..b2c4978 Binary files /dev/null and b/Taller1/img/Ortodoncia.jpg differ diff --git a/Taller1/img/Periodoncia.jpg b/Taller1/img/Periodoncia.jpg new file mode 100644 index 0000000..6fb337b Binary files /dev/null and b/Taller1/img/Periodoncia.jpg differ diff --git a/Taller1/img/apoyo1.jpg b/Taller1/img/apoyo1.jpg new file mode 100644 index 0000000..6631012 Binary files /dev/null and b/Taller1/img/apoyo1.jpg differ diff --git a/Taller1/img/apoyo2.jpeg b/Taller1/img/apoyo2.jpeg new file mode 100644 index 0000000..97313dd Binary files /dev/null and b/Taller1/img/apoyo2.jpeg differ diff --git a/Taller1/img/apoyo3.jpg b/Taller1/img/apoyo3.jpg new file mode 100644 index 0000000..0497af5 Binary files /dev/null and b/Taller1/img/apoyo3.jpg differ diff --git a/Taller1/img/carlos.jpg b/Taller1/img/carlos.jpg new file mode 100644 index 0000000..5146dfa Binary files /dev/null and b/Taller1/img/carlos.jpg differ diff --git a/Taller1/img/dr.Lopez.png b/Taller1/img/dr.Lopez.png new file mode 100644 index 0000000..ad21211 Binary files /dev/null and b/Taller1/img/dr.Lopez.png differ diff --git a/Taller1/img/dr.roberto.jpg b/Taller1/img/dr.roberto.jpg new file mode 100644 index 0000000..2591e1d Binary files /dev/null and b/Taller1/img/dr.roberto.jpg differ diff --git a/Taller1/img/images.jpg b/Taller1/img/images.jpg new file mode 100644 index 0000000..2520eb4 Binary files /dev/null and b/Taller1/img/images.jpg differ diff --git a/Taller1/img/logo.png b/Taller1/img/logo.png index 9825cdc..4afcba2 100644 Binary files a/Taller1/img/logo.png and b/Taller1/img/logo.png differ diff --git a/Taller1/img/protesis.jpg b/Taller1/img/protesis.jpg new file mode 100644 index 0000000..f2274f8 Binary files /dev/null and b/Taller1/img/protesis.jpg differ diff --git a/Taller1/img/sede-concepcion.jpg b/Taller1/img/sede-concepcion.jpg new file mode 100644 index 0000000..444ac5e Binary files /dev/null and b/Taller1/img/sede-concepcion.jpg differ diff --git a/Taller1/img/sede-copiapo.jpg b/Taller1/img/sede-copiapo.jpg new file mode 100644 index 0000000..70666fc Binary files /dev/null and b/Taller1/img/sede-copiapo.jpg differ diff --git a/Taller1/img/sede-puntaarenas.jpeg b/Taller1/img/sede-puntaarenas.jpeg new file mode 100644 index 0000000..18cc11a Binary files /dev/null and b/Taller1/img/sede-puntaarenas.jpeg differ diff --git a/Taller1/img/sede-santiago.jpg b/Taller1/img/sede-santiago.jpg new file mode 100644 index 0000000..47db0ea Binary files /dev/null and b/Taller1/img/sede-santiago.jpg differ diff --git a/Taller1/img/sede-valparaiso.jpg b/Taller1/img/sede-valparaiso.jpg new file mode 100644 index 0000000..e8c957a Binary files /dev/null and b/Taller1/img/sede-valparaiso.jpg differ diff --git a/Taller1/img/sede-vina.jpg b/Taller1/img/sede-vina.jpg new file mode 100644 index 0000000..b384145 Binary files /dev/null and b/Taller1/img/sede-vina.jpg differ diff --git a/Taller1/inicio.html b/Taller1/inicio.html index 28e8334..585f643 100644 --- a/Taller1/inicio.html +++ b/Taller1/inicio.html @@ -1,223 +1,167 @@ - - - - - - - - Clínica Dental - Inicio - - - - - -
- - - - - -
- - - - - -
- -

Nuestros Servicios

- - -
- - - - -
- -
- Ortodoncia -

Ortodoncia

-

Alinea tus dientes y mejora tu sonrisa.

-
-
- Blanqueamiento -

Blanqueamiento

-

Recupera el brillo natural de tus dientes.

-
-
- Implantes Dentales -

Implantes Dentales

-

Solución permanente para dientes faltantes.

-
-
- Limpieza Dental -

Limpieza Dental

-

Elimina placa y previene caries.

-
-
- Limpieza Dental -

Prueba 1

-

Elimina placa y previene caries.

-
-
- Limpieza Dental -

Prueba 2

-

Elimina placa y previene caries.

-
-
- Limpieza Dental -

Prueba 3

-

Elimina placa y previene caries.

-
-
- Limpieza Dental -

Prueba 4

-

Elimina placa y previene caries.

-
-
- Limpieza Dental -

Prueba 5

-

Elimina placa y previene caries.

-
-
- Limpieza Dental -

Prueba 6

-

Elimina placa y previene caries.

-
-
- Limpieza Dental -

Prueba 7

-

Elimina placa y previene caries.

-
-
- Limpieza Dental -

Prueba 8

-

Elimina placa y previene caries.

-
-
- Limpieza Dental -

Prueba 9

-

Elimina placa y previene caries.

-
-
- Limpieza Dental -

Prueba 10

-

Elimina placa y previene caries.

-
-
- Limpieza Dental -

Prueba 11

-

Elimina placa y previene caries.

-
-
- Limpieza Dental -

Prueba 12

-

Elimina placa y previene caries.

-
-
- Limpieza Dental -

Prueba 13

-

Elimina placa y previene caries.

-
-
- Limpieza Dental -

Prueba 14

-

Elimina placa y previene caries.

-
-
- Limpieza Dental -

Prueba 15

-

Elimina placa y previene caries.

-
-
- Limpieza Dental -

Prueba 16

-

Elimina placa y previene caries.

-
-
- Limpieza Dental -

Prueba 17

-

Elimina placa y previene caries.

-
-
- - - -
-
- - -
-

Lo que dicen nuestros pacientes

- - -
- -
-

"Excelente atención y resultados. Muy recomendados."

-

- Juan Pérez

-

⭐⭐⭐⭐⭐

-

Servicio: Ortodoncia

-
-
-

"Profesionales y amables. Me hicieron sentir muy cómoda."

-

- Rosa López

-

⭐⭐⭐⭐

-

Servicio: Blanqueamiento

-
-
-

"El tratamiento de implantes fue impecable."

-

- Luis Fernández

-

⭐⭐⭐⭐⭐

-

Servicio: Implantes Dentales

-
-
-
- - - - - - - - - - - + + + + + + + Clínica Dental - Inicio + + + + + + + +
+ + + + + +
+ + + + + +
+ +

Nuestros Servicios

+ + +
+ + + + +
+ +
+ Odontología General +

Odontología General

+

Atención integral para el cuidado de tu salud bucal.

+
+ +
+ Ortodoncia +

Ortodoncia

+

Alinea tus dientes y mejora tu sonrisa.

+
+ +
+ Implantes Dentales +

Implantes Dentales

+

Solución permanente para reemplazar dientes perdidos.

+
+ +
+ Endodoncia +

Endodoncia

+

Tratamiento de conductos para salvar tus piezas dentales.

+
+ +
+ Periodoncia +

Periodoncia

+

Cuidado y tratamiento especializado de encías.

+
+ +
+ Rehabilitación Oral +

Rehabilitación Oral

+

Recupera la función y estética de tu sonrisa.

+
+
+ + + +
+ + +
+ +
+
+ + +
+

Lo que dicen nuestros pacientes

+ + +
+ +
+

"Excelente atención y resultados. Muy recomendados."

+

- Juan Pérez

+

⭐⭐⭐⭐⭐

+

Servicio: Ortodoncia

+
+ +
+

"Profesionales y amables. Me hicieron sentir muy cómoda."

+

- Rosa López

+

⭐⭐⭐⭐

+

Servicio: Blanqueamiento

+
+ +
+

"El tratamiento de implantes fue impecable."

+

- Luis Fernández

+

⭐⭐⭐⭐⭐

+

Servicio: Implantes Dentales

+
+
+
+ + + + + + + + + + + + + \ No newline at end of file diff --git a/Taller1/js/carrusel.js b/Taller1/js/carrusel.js index f729ba1..eaa2f8d 100644 --- a/Taller1/js/carrusel.js +++ b/Taller1/js/carrusel.js @@ -1,107 +1,107 @@ -// =================================================== -// CARRUSEL DE SERVICIOS AUTOMÁTICO Y CIRCULAR -// =================================================== - -document.addEventListener('DOMContentLoaded', () => { - - // 1. SELECCIÓN DE ELEMENTOS DEL DOM - const carousel = document.querySelector('.carousel'); - const leftBtn = document.querySelector('.left-btn'); - const rightBtn = document.querySelector('.right-btn'); - const cards = carousel.querySelectorAll('.servicio'); - - // Salir si los elementos no existen para evitar errores - if (!carousel || !leftBtn || !rightBtn || cards.length === 0) { - console.error("No se encontraron todos los elementos necesarios para el carrusel."); - return; - } - - // 2. CONFIGURACIÓN DE CONSTANTES - const GAP = 30; - const AUTO_SCROLL_INTERVAL = 3000; - const scrollAmount = cards[0].offsetWidth + GAP; - - // 3. LÓGICA DE NAVEGACIÓN - function handleLeftClick() { - if (carousel.scrollLeft <= 0) { - carousel.scrollTo({ - left: carousel.scrollWidth, - behavior: 'smooth' - }); - } else { - carousel.scrollBy({ - left: -scrollAmount, - behavior: 'smooth' - }); - } - } - - function handleRightClick() { - const scrollTolerance = 1; - if (carousel.scrollLeft + carousel.clientWidth + scrollTolerance >= carousel.scrollWidth) { - carousel.scrollTo({ - left: 0, - behavior: 'smooth' - }); - } else { - carousel.scrollBy({ - left: scrollAmount, - behavior: 'smooth' - }); - } - } - - leftBtn.addEventListener('click', handleLeftClick); - rightBtn.addEventListener('click', handleRightClick); - - // 4. AUTO-SCROLL INFINITO - let autoScrollId; - - function startAutoScroll() { - stopAutoScroll(); - autoScrollId = setInterval(() => { - const scrollTolerance = 1; - if (carousel.scrollLeft + carousel.clientWidth + scrollTolerance >= carousel.scrollWidth) { - carousel.scrollTo({ - left: 0, - behavior: 'smooth' - }); - } else { - carousel.scrollBy({ - left: scrollAmount, - behavior: 'smooth' - }); - } - }, AUTO_SCROLL_INTERVAL); - } - - function stopAutoScroll() { - clearInterval(autoScrollId); - } - - carousel.addEventListener('mouseenter', stopAutoScroll); - carousel.addEventListener('mouseleave', startAutoScroll); - - startAutoScroll(); - - // =================================================== - // BOTÓN "VOLVER ARRIBA" - // =================================================== - - const btnTop = document.getElementById("btn-top"); - if (btnTop) { - window.addEventListener('scroll', () => { - const isScrolled = window.scrollY > 200 || document.documentElement.scrollTop > 200; - btnTop.style.display = isScrolled ? "block" : "none"; - }); - - btnTop.addEventListener('click', () => { - window.scrollTo({ - top: 0, - behavior: 'smooth' - }); - }); - } else { - console.warn("El botón 'Volver Arriba' no fue encontrado."); - } +// =================================================== +// CARRUSEL DE SERVICIOS AUTOMÁTICO Y CIRCULAR +// =================================================== + +document.addEventListener('DOMContentLoaded', () => { + + // 1. SELECCIÓN DE ELEMENTOS DEL DOM + const carousel = document.querySelector('.carousel'); + const leftBtn = document.querySelector('.left-btn'); + const rightBtn = document.querySelector('.right-btn'); + const cards = carousel.querySelectorAll('.servicio'); + + // Salir si los elementos no existen para evitar errores + if (!carousel || !leftBtn || !rightBtn || cards.length === 0) { + console.error("No se encontraron todos los elementos necesarios para el carrusel."); + return; + } + + // 2. CONFIGURACIÓN DE CONSTANTES + const GAP = 30; + const AUTO_SCROLL_INTERVAL = 3000; + const scrollAmount = cards[0].offsetWidth + GAP; + + // 3. LÓGICA DE NAVEGACIÓN + function handleLeftClick() { + if (carousel.scrollLeft <= 0) { + carousel.scrollTo({ + left: carousel.scrollWidth, + behavior: 'smooth' + }); + } else { + carousel.scrollBy({ + left: -scrollAmount, + behavior: 'smooth' + }); + } + } + + function handleRightClick() { + const scrollTolerance = 1; + if (carousel.scrollLeft + carousel.clientWidth + scrollTolerance >= carousel.scrollWidth) { + carousel.scrollTo({ + left: 0, + behavior: 'smooth' + }); + } else { + carousel.scrollBy({ + left: scrollAmount, + behavior: 'smooth' + }); + } + } + + leftBtn.addEventListener('click', handleLeftClick); + rightBtn.addEventListener('click', handleRightClick); + + // 4. AUTO-SCROLL INFINITO + let autoScrollId; + + function startAutoScroll() { + stopAutoScroll(); + autoScrollId = setInterval(() => { + const scrollTolerance = 1; + if (carousel.scrollLeft + carousel.clientWidth + scrollTolerance >= carousel.scrollWidth) { + carousel.scrollTo({ + left: 0, + behavior: 'smooth' + }); + } else { + carousel.scrollBy({ + left: scrollAmount, + behavior: 'smooth' + }); + } + }, AUTO_SCROLL_INTERVAL); + } + + function stopAutoScroll() { + clearInterval(autoScrollId); + } + + carousel.addEventListener('mouseenter', stopAutoScroll); + carousel.addEventListener('mouseleave', startAutoScroll); + + startAutoScroll(); + + // =================================================== + // BOTÓN "VOLVER ARRIBA" + // =================================================== + + const btnTop = document.getElementById("btn-top"); + if (btnTop) { + window.addEventListener('scroll', () => { + const isScrolled = window.scrollY > 200 || document.documentElement.scrollTop > 200; + btnTop.style.display = isScrolled ? "block" : "none"; + }); + + btnTop.addEventListener('click', () => { + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); + }); + } else { + console.warn("El botón 'Volver Arriba' no fue encontrado."); + } }); \ No newline at end of file diff --git a/Taller1/js/contacto.js b/Taller1/js/contacto.js new file mode 100644 index 0000000..225ea1b --- /dev/null +++ b/Taller1/js/contacto.js @@ -0,0 +1,215 @@ +// ===================== +// ARCHIVO: contacto.js +// DESCRIPCIÓN: Funcionalidades JavaScript para la página de contacto +// FECHA: 2025 +// ===================== + +// ==================================== +// 1. DATOS DE SEDES +// ==================================== +const branchesData = [ + // La primera sede es la principal, que se excluye del carrusel. + { + "id": "concepcion", + "name": "Sede Principal — Concepción", + "address": "Arturo Prat 450, Concepción", + "phone": "+56412345678", + "email": "concepcion@ejemplo.cl", + "image": "img/sede-concepcion.jpg" + }, + { + "id": "santiago", + "name": "Santiago", + "address": "Avenida Libertador Bernardo O'Higgins 100, Santiago", + "phone": "+56298765432", + "email": "santiago@ejemplo.cl", + "image": "img/sede-santiago.jpg" + }, + { + "id": "valparaiso", + "name": "Valparaíso", + "address": "Condell 1500, Valparaíso", + "phone": "+56325432109", + "email": null, + "image": "img/sede-valparaiso.jpg" + }, + { + "id": "vinadelmar", + "name": "Viña del Mar", + "address": "Calle Valparaíso 500, Viña del Mar", + "phone": "+56321098765", + "email": "vina@ejemplo.cl", + "image": "img/sede-vina.jpg" + }, + { + "id": "puntaarenas", + "name": "Punta Arenas", + "address": "Avenida Colón 900, Punta Arenas", + "phone": "+56616789012", + "email": "puntaarenas@ejemplo.cl", + "image": "img/sede-puntaarenas.jpeg" + }, + { + "id": "copiapo", + "name": "Copiapó", + "address": "Calle O'Higgins 700, Copiapó", + "phone": "+56523456789", + "email": "atacama@ejemplo.cl", + "image": "img/sede-copiapo.jpg" + } +]; + +// ==================================== +// 2. CONSTRUCCIÓN DEL CARRUSEL DE SEDES +// ==================================== +function renderCarruselSedes() { + const carruselContainer = document.getElementById('carrusel-sedes'); + if (!carruselContainer) { + console.error('No se encontró el contenedor del carrusel de sedes'); + return; + } + + // Filtra para mostrar solo las sucursales secundarias (excluye Concepción) + const secondaryBranches = branchesData.filter(branch => branch.id !== 'concepcion'); + + let htmlContent = ''; + + // Genera el HTML para cada sede secundaria + secondaryBranches.forEach(branch => { + // Extrae el nombre de la ciudad para el título de la tarjeta + const cityName = branch.name.includes('—') ? + branch.name.split('—')[0].trim() : + branch.name; + + // Dirección abreviada (solo la primera parte) + const shortAddress = branch.address.split(',')[0].trim(); + + htmlContent += ` +
+
+ Fachada de la Sede ${cityName} +
+

${cityName}

+

${branch.phone}

+

+ ${shortAddress} +

+
+ `; + }); + + carruselContainer.innerHTML = htmlContent; +} + +// ==================================== +// 3. FUNCIÓN PARA INICIALIZAR EL MAPA +// ==================================== +function inicializarMapa() { + const mapaDiv = document.getElementById('mapa-interactivo-div'); + if (!mapaDiv) { + console.warn('No se encontró el contenedor del mapa'); + return; + } + + // Verificar si el iframe del mapa se cargó correctamente + const iframe = mapaDiv.querySelector('iframe'); + if (iframe) { + iframe.addEventListener('load', function() { + console.log('Mapa de Google cargado correctamente'); + }); + + iframe.addEventListener('error', function() { + console.error('Error al cargar el mapa de Google'); + // Mostrar un placeholder en caso de error + mostrarPlaceholderMapa(); + }); + } +} + +// ==================================== +// 4. FUNCIÓN PARA MOSTRAR PLACEHOLDER DEL MAPA +// ==================================== +function mostrarPlaceholderMapa() { + const mapaDiv = document.getElementById('mapa-interactivo-div'); + if (mapaDiv) { + mapaDiv.innerHTML = ` +
+ +

Mapa no disponible

+

No se pudo cargar el mapa interactivo.

+

Dirección: Arturo Prat 450, Concepción

+
+ `; + } +} + +// ==================================== +// 5. FUNCIÓN PARA AGREGAR BOTÓN FLOTANTE +// ==================================== +function agregarBotonFlotante() { + // Verificar si ya existe el botón + if (document.querySelector('.btn-pedir-turno')) { + return; + } + + const boton = document.createElement('button'); + boton.className = 'btn-pedir-turno'; + boton.textContent = 'Pedir Turno'; + boton.onclick = function() { + window.location.href = 'pedirTurno.html'; + }; + + document.body.appendChild(boton); +} + +// ==================================== +// 6. INICIALIZACIÓN AL CARGAR EL DOM +// ==================================== +document.addEventListener('DOMContentLoaded', function() { + console.log('Inicializando página de contacto...'); + + // Renderizar el carrusel de sedes + renderCarruselSedes(); + + // Inicializar el mapa interactivo + inicializarMapa(); + + // Agregar botón flotante para pedir turno + agregarBotonFlotante(); + + console.log('Página de contacto inicializada correctamente'); +}); + +// ==================================== +// 7. MANEJO DE ERRORES GLOBALES +// ==================================== +window.addEventListener('error', function(e) { + console.error('Error en la página de contacto:', e.error); +}); + +// ==================================== +// 8. FUNCIONES ADICIONALES (OPCIONALES) +// ==================================== + +/** + * Función para obtener información de una sede específica + * @param {string} sedeId - ID de la sede + * @returns {Object|null} - Objeto con información de la sede o null si no existe + */ +function obtenerInformacionSede(sedeId) { + return branchesData.find(sede => sede.id === sedeId) || null; +} + +/** + * Función para filtrar sedes por ciudad + * @param {string} ciudad - Nombre de la ciudad a filtrar + * @returns {Array} - Array de sedes que coinciden con la ciudad + */ +function filtrarSedesPorCiudad(ciudad) { + return branchesData.filter(sede => + sede.name.toLowerCase().includes(ciudad.toLowerCase()) + ); +} \ No newline at end of file diff --git a/Taller1/js/login.js b/Taller1/js/login.js new file mode 100644 index 0000000..dd7a7a7 --- /dev/null +++ b/Taller1/js/login.js @@ -0,0 +1,139 @@ +document.addEventListener('DOMContentLoaded', () => { + + /** + * ================================= + * 1. CONFIGURACIÓN INICIAL Y ELEMENTOS + * ================================= + */ + + // Referencias a los contenedores + const contenedorLogo = document.querySelector('.contenedor-logo'); + const pantallaInicial = document.querySelector('.pantalla-inicial'); + const contenedorLogin = document.querySelector('.contenedor-login'); + + // Referencias al formulario y botones + const loginForm = document.getElementById('loginForm'); + const botonInvitado = document.querySelector('.boton-invitado'); + + // Referencias a los inputs y al mensaje de error + const inputUsuario = document.getElementById('nombreUsuario'); + const inputContrasena = document.getElementById('contrasena'); + const mensajeErrorDiv = document.getElementById('mensajeError'); + + + // Duraciones de las animaciones (en milisegundos) + const T_EXPANSION = 800; + const T_ROTACION_ENTRADA = 700; + const T_ESPERA_LOGO = 800; + const T_ROTACION_SALIDA = 600; + const T_DURACION_ERROR = 4000; // El error desaparece a los 4 segundos + + /** + * Función de ayuda para esperar un tiempo específico + */ + const esperar = (ms) => new Promise(resolve => setTimeout(resolve, ms)); + + + /** + * ================================= + * 2. FUNCIONES DE VALIDACIÓN Y MANEJO + * ================================= + */ + + /** + * Valida las credenciales. Usuario: Blas (sin mayúsculas), Contraseña: 123 + * @returns {boolean} True si las credenciales son correctas. + */ + const validarCredenciales = () => { + const usuarioIngresado = inputUsuario.value.trim(); + const contrasenaIngresada = inputContrasena.value.trim(); + + const usuarioCorrecto = 'Blas'; + const contrasenaCorrecta = '123'; + + // Ocultar cualquier error anterior antes de validar + mensajeErrorDiv.classList.add('oculto'); + + // Comprobación de credenciales + if (usuarioIngresado.toLowerCase() === usuarioCorrecto.toLowerCase() && contrasenaIngresada === contrasenaCorrecta) { + return true; + } else { + // MOSTRAR ERROR VISIBLE + mensajeErrorDiv.textContent = "Usuario o contraseña incorrectos. Inténtalo de nuevo. Usuario: Blas | Contraseña: 123"; + mensajeErrorDiv.classList.remove('oculto'); + + // Ocultar el error automáticamente después de 4 segundos + setTimeout(() => { + mensajeErrorDiv.classList.add('oculto'); + }, T_DURACION_ERROR); + + // Enfocar el input de usuario para facilitar la corrección + inputUsuario.focus(); + return false; + } + }; + + /** + * Función genérica para manejar la redirección. + */ + const manejarRedireccion = (elemento) => { + const redirectTarget = elemento.getAttribute('data-redirect'); + if (redirectTarget) { + window.location.href = redirectTarget; + } + }; + + + /** + * ================================= + * 3. SECUENCIA DE ANIMACIÓN DE INICIO + * ================================= + */ + const iniciarSecuencia = async () => { + try { + await esperar(T_EXPANSION); + contenedorLogo.classList.add('mostrar-logo'); + await esperar(T_ROTACION_ENTRADA + T_ESPERA_LOGO); + contenedorLogo.classList.remove('mostrar-logo'); + contenedorLogo.classList.add('desvanecer'); + await esperar(T_ROTACION_SALIDA); + + contenedorLogo.classList.add('ocultar-final'); + pantallaInicial.classList.add('ocultar-fondo-blanco'); + contenedorLogin.classList.remove('oculto'); + contenedorLogin.classList.add('visible'); + + } catch (error) { + console.error("Error durante la secuencia de animación:", error); + } + }; + + iniciarSecuencia(); + + + /** + * ================================= + * 4. LÓGICA DE EVENTOS DE BOTONES + * ================================= + */ + + // Maneja el envío del formulario (Botón Acceder) + loginForm.addEventListener('submit', (evento) => { + evento.preventDefault(); + + // Redirección solo si las credenciales son válidas + if (validarCredenciales()) { + if (evento.submitter && evento.submitter.hasAttribute('data-redirect')) { + manejarRedireccion(evento.submitter); + } + } + }); + + // Maneja el clic en el botón de Acceder como Invitado (Redirección directa) + botonInvitado.addEventListener('click', () => { + // Ocultar el mensaje de error si existía y redirigir + mensajeErrorDiv.classList.add('oculto'); + manejarRedireccion(botonInvitado); + }); + +}); \ No newline at end of file diff --git a/Taller1/js/restricciones.js b/Taller1/js/restricciones.js new file mode 100644 index 0000000..679d1e6 --- /dev/null +++ b/Taller1/js/restricciones.js @@ -0,0 +1,31 @@ + /* ===================== + SCRIPT PARA FORMATEAR RUT + Formatea el RUT a medida que se escribe + ===================== --> */ + + class RutFormatter { + constructor(inputId) { + this.input = document.getElementById(inputId); + if (this.input) { + this.input.addEventListener("input", () => this.format()); + } + } + + format() { + let value = this.input.value.replace(/\D/g, ""); // elimina todo lo que no sea número + if (value.length > 1) { + let cuerpo = value.slice(0, -1); + let dv = value.slice(-1); + + // Agregar puntos cada 3 dígitos desde la derecha + cuerpo = cuerpo.replace(/\B(?=(\d{3})+(?!\d))/g, "."); + + this.input.value = `${cuerpo}-${dv}`; + } else { + this.input.value = value; // si aún no tiene dígito verificador + } + } + } + + //Activar formato en el input con id="rut" + new RutFormatter("rut"); \ No newline at end of file diff --git a/Taller1/login.html b/Taller1/login.html index 51b40b6..8616814 100644 --- a/Taller1/login.html +++ b/Taller1/login.html @@ -1,63 +1,63 @@ - - - - - - Login - Clínica Dental - - - - - - - - - - - - - - -
- -

Clínica Dental

- - -
- -
- - -
- - -
- - -
- - - -
-
- - + + + + + + Clínica Dental | Acceso + + + + + + + + + + +
+
+ + +
+ +
+
+ + + +
+
+ + + + \ No newline at end of file diff --git a/Taller1/pedirTurno.html b/Taller1/pedirTurno.html new file mode 100644 index 0000000..d9c8493 --- /dev/null +++ b/Taller1/pedirTurno.html @@ -0,0 +1,189 @@ + + + + + + + Pedir Turno - Clínica Dental + + + + + + + +
+ + + + + +
+ + +
+ +
+

Solicitar Turno

+

Complete el formulario para agendar su cita. Nos contactaremos para confirmar.

+
+ + +
+
+ +
+ +
+ + +
+ + +
+ + + Formato: 12.345.678-9 +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ + +
+ +
+ + + +
+
+
+ + +
+
+ +
+

📞 Contacto Rápido

+

Si prefiere, puede contactarnos directamente:

+

Teléfono: +56 9 1234 5678

+

Email: turnos@clinicadental.cl

+
+ + +
+

🕒 Horarios de Atención

+

Lunes a Viernes: 9:00 - 20:00 hrs

+

Sábados: 9:00 - 14:00 hrs

+

Domingos: Cerrado

+
+ + +
+

🚑 Urgencias Dentales

+

Para emergencias fuera de horario:

+

Urgencias: +56 9 8765 4321

+

Atendemos emergencias las 24 horas

+
+
+
+
+ + + + + + + + + \ No newline at end of file diff --git a/Taller1/servicios.html b/Taller1/servicios.html new file mode 100644 index 0000000..67cf477 --- /dev/null +++ b/Taller1/servicios.html @@ -0,0 +1,148 @@ + + + + + + + Clínica Dental - Servicios + + + + + + + +
+ + + + + +
+ + +
+ +
+

Nuestros Servicios

+

Ofrecemos una amplia gama de tratamientos dentales para cuidar tu salud bucal

+
+ + +
+ +
+ Odontología general +

Odontología general

+

Revisiones, limpiezas y tratamientos básicos para mantener tu salud bucal.

+ +
+ + +
+ Ortodoncia +

Ortodoncia

+

Corrección de la posición de los dientes y la mordida con brackets o alineadores.

+ +
+ + +
+ Implantes dentales +

Implantes dentales

+

Reemplazo de piezas dentales perdidas con implantes de alta calidad.

+ +
+ + +
+ Blanqueamiento +

Blanqueamiento

+

Tratamientos para aclarar el color de tus dientes y mejorar tu sonrisa.

+ +
+ + +
+ Limpieza dental +

Limpieza dental

+

Eliminación de placa y sarro para prevenir caries y enfermedades periodontales.

+ +
+ + +
+ Endodoncia +

Endodoncia

+

Tratamiento de conductos para salvar dientes con caries profundas o infecciones.

+ +
+ + +
+ +

Periodoncia

+

Tratamiento especializado para enfermedades de las encías y tejidos de soporte.

+ +
+ + +
+ Odontopediatría +

Odontopediatría

+

Atención dental especializada para niños y adolescentes.

+ +
+ + +
+ Prótesis dentales +

Prótesis dentales

+

Diseño y colocación de prótesis fijas y removibles para recuperar tu sonrisa.

+ +
+
+
+ + + + + + + + + + + \ No newline at end of file