mi-proyecto/app/templates/index.html

667 lines
42 KiB
HTML

{% block content %}
{% set fp = frontend_payload %}
<!DOCTYPE html>
<html lang="{{ seo.lang if seo else site_settings.lang or 'es-AR' }}">
<head>
<meta charset="utf-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>{{ seo.title if seo else (site_settings.seo_title or site_settings.title or 'Centro médico') }}</title>
<meta name="description" content="{{ seo.description if seo else site_settings.meta_description }}">
{% if site_settings.meta_keywords %}<meta name="keywords" content="{{ site_settings.meta_keywords }}">{% endif %}
<meta name="robots" content="{{ seo.robots if seo else site_settings.robots_meta }}">
<link rel="canonical" href="{{ seo.canonical_url if seo else site_settings.url }}">
{% if site_settings.google_site_verification %}<meta name="google-site-verification" content="{{ site_settings.google_site_verification }}">{% endif %}
{% if site_settings.bing_site_verification %}<meta name="msvalidate.01" content="{{ site_settings.bing_site_verification }}">{% endif %}
<meta property="og:type" content="website">
<meta property="og:locale" content="{{ seo.locale if seo else site_settings.locale }}">
<meta property="og:site_name" content="{{ site_settings.title or app_name }}">
<meta property="og:title" content="{{ seo.og_title if seo else site_settings.og_title or site_settings.title }}">
<meta property="og:description" content="{{ seo.og_description if seo else site_settings.og_description or site_settings.meta_description }}">
<meta property="og:url" content="{{ seo.canonical_url if seo else site_settings.url }}">
<meta property="og:image" content="{{ seo.og_image_url if seo else url_for('static', filename='medilab/assets/img/hero-bg.jpg', _external=True) }}">
<meta property="og:image:alt" content="{{ seo.og_image_alt if seo else site_settings.og_image_alt }}">
<meta name="twitter:card" content="{{ seo.twitter_card if seo else site_settings.twitter_card }}">
{% if site_settings.twitter_site %}<meta name="twitter:site" content="{{ site_settings.twitter_site }}">{% endif %}
<meta name="twitter:title" content="{{ seo.twitter_title if seo else site_settings.twitter_title or site_settings.title }}">
<meta name="twitter:description" content="{{ seo.twitter_description if seo else site_settings.twitter_description or site_settings.meta_description }}">
<meta name="twitter:image" content="{{ seo.og_image_url if seo else url_for('static', filename='medilab/assets/img/hero-bg.jpg', _external=True) }}">
<script type="application/ld+json">{{ schema_json|safe if schema_json else '{}' }}</script>
<link rel="preload" as="image" href="{{ url_for('static', filename='medilab/assets/img/hero-bg.jpg') }}" fetchpriority="high">
{% if site_settings.favicon_path %}
<link rel="icon" href="{{ url_for('static', filename=site_settings.favicon_path) }}">
{% else %}
<link rel="icon" href="{{ url_for('static', filename='medilab/assets/img/favicon.png') }}">
{% endif %}
<link href="https://fonts.googleapis.com" rel="preconnect">
<link href="https://fonts.gstatic.com" rel="preconnect" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Poppins:wght@300;400;500;600;700&family=Raleway:wght@300;400;500;600;700&display=swap"
rel="stylesheet">
<link href="{{ url_for('static', filename='medilab/assets/vendor/bootstrap/css/bootstrap.min.css') }}"
rel="stylesheet">
<link href="{{ url_for('static', filename='medilab/assets/vendor/bootstrap-icons/bootstrap-icons.css') }}"
rel="stylesheet">
<link href="{{ url_for('static', filename='medilab/assets/vendor/aos/aos.css') }}" rel="stylesheet">
<link href="{{ url_for('static', filename='medilab/assets/vendor/fontawesome-free/css/all.min.css') }}"
rel="stylesheet">
<link href="{{ url_for('static', filename='medilab/assets/vendor/glightbox/css/glightbox.min.css') }}"
rel="stylesheet">
<link href="{{ url_for('static', filename='medilab/assets/vendor/swiper/swiper-bundle.min.css') }}"
rel="stylesheet">
<link href="{{ url_for('static', filename='medilab/assets/css/main.css') }}" rel="stylesheet">
<style>
:root {
--site-primary: {{ site_settings.primary_color or '#1977cc' }};
--site-secondary: {{ site_settings.secondary_color or '#0d6efd' }};
--site-accent: {{ site_settings.accent_color or '#0dcaf0' }};
--site-body-font: '{{ site_settings.body_font or 'Roboto' }}', sans-serif;
--site-heading-font: '{{ site_settings.heading_font or 'Poppins' }}', sans-serif;
--site-base-size: {{ site_settings.base_font_size or '16' }}px;
--site-topbar-bg: {{ site_settings.topbar_bg or '#1977cc' }};
--site-topbar-text: {{ site_settings.topbar_text or '#ffffff' }};
--site-header-bg: {{ site_settings.header_bg or '#ffffff' }};
--site-header-text: {{ site_settings.header_text or '#2c4964' }};
--site-nav-text: {{ site_settings.nav_text or '#2c4964' }};
--site-nav-hover: {{ site_settings.nav_hover or site_settings.primary_color or '#1977cc' }};
--site-hero-bg: {{ site_settings.hero_bg or '#f3f9fd' }};
--site-hero-surface: {{ site_settings.hero_surface or '#ffffff' }};
--site-section-bg: {{ site_settings.section_bg or '#ffffff' }};
--site-section-muted-bg: {{ site_settings.section_muted_bg or '#f7fbff' }};
--site-card-bg: {{ site_settings.card_bg or '#ffffff' }};
--site-card-text: {{ site_settings.card_text or '#444444' }};
--site-title-color: {{ site_settings.title_color or '#2c4964' }};
--site-footer-bg: {{ site_settings.footer_bg or '#0f2b45' }};
--site-footer-text: {{ site_settings.footer_text or '#ffffff' }};
--site-button-text: {{ site_settings.button_text or '#ffffff' }};
--site-radius: {{ site_settings.border_radius or '20' }}px;
}
body, p, li, a, input, textarea, button { font-family: var(--site-body-font); font-size: var(--site-base-size); }
h1, h2, h3, h4, h5, h6, .sitename { font-family: var(--site-heading-font); }
a, .section-title h2, .stats i, .icon-box i, .service-item .icon i { color: var(--site-primary); }
.btn-primary, .appointment .php-email-form button[type=submit], .hero .btn-get-started { background: var(--site-primary); border-color: var(--site-primary); color: var(--site-button-text); }
.cookie-banner a.btn, #publicSitePopup .btn { min-width: 120px; }
.frontend-whatsapp-float {
position: fixed;
right: 15px;
bottom: 72px;
width: 44px;
height: 44px;
z-index: 99999;
border-radius: 50%;
background: #25d366;
color: #fff !important;
box-shadow: 0 10px 28px rgba(0,0,0,.22);
text-decoration: none;
transition: all .25s ease;
}
.frontend-whatsapp-float:hover { transform: translateY(-3px); color:#fff !important; box-shadow: 0 14px 34px rgba(0,0,0,.30); }
.frontend-whatsapp-float i { font-size: 1.35rem; line-height: 1; }
.frontend-whatsapp-label { font-size: .72rem; font-weight: 800; margin-left: -1.08rem; }
@media (max-width: 575px) {
.frontend-whatsapp-float { right: 15px; bottom: 68px; width: 42px; height: 42px; }
}
</style>
<link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='css/ai_chatbot.css') }}">
</head>
<body class="index-page">
<a class="skip-link" href="#main-content">Saltar al contenido principal</a>
<header id="header" class="header sticky-top">
<div class="topbar d-flex align-items-center">
<div class="container d-flex justify-content-center justify-content-md-between">
<div class="contact-info d-flex align-items-center">
<i class="bi bi-envelope d-flex align-items-center"><a href="mailto:{{ site_settings.email }}">{{
site_settings.email }}</a></i>
<i class="bi bi-phone d-flex align-items-center ms-4"><span>{{ site_settings.phone }}</span></i>
</div>
<div class="social-links d-none d-md-flex align-items-center">
<a href="{{ url_for('login') }}" class="small text-white text-decoration-none"><i
class="bi bi-lock-fill"></i> Acceso Staff</a>
</div>
</div>
</div>
<div class="branding d-flex align-items-center">
<div class="container position-relative d-flex align-items-center justify-content-between">
<a href="{{ url_for('index') }}" class="logo d-flex align-items-center me-auto">
{% if site_settings.logo_path %}<img src="{{ url_for('static', filename=site_settings.logo_path) }}"
alt="{{ site_settings.title or app_name }}">
{% else %}
<h1 class="sitename">{{ site_settings.title or app_name }}</h1>
{% endif %}
</a>
<nav id="navmenu" class="navmenu" aria-label="Navegación principal">
<ul>
{% set nav_items = frontend_payload.navbar_menu if frontend_payload.navbar_menu else [] %}
{% if nav_items %}
{% for item in nav_items %}
<li><a href="{{ item.link_url or '#' }}" class="{% if loop.first %}active{% endif %}">{{ item.title
}}</a></li>
{% endfor %}
{% else %}
<li><a href="#hero" class="active">Inicio</a></li>
<li><a href="#about">Nosotros</a></li>
<li><a href="#services">Servicios</a></li>
<li><a href="#appointment">Turnos</a></li>
<li><a href="#departments">Departamentos</a></li>
<li><a href="#faq">Preguntas</a></li>
<li><a href="#contact">Contacto</a></li>
{% endif %}
<li><a href="{{ url_for('public_verify_recipe') }}">Verificar receta</a></li>
</ul>
<i class="mobile-nav-toggle d-xl-none bi bi-list"></i>
</nav>
<a class="cta-btn d-none d-sm-block" href="#appointment">{{ site_settings.nav_cta_label }}</a>
</div>
</div>
</header>
<main class="main" id="main-content">
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
<div class="floating-alerts">
{% for category, message in messages %}
<div class="alert alert-{{ category }} alert-dismissible fade show shadow-sm" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
{% endfor %}
</div>
{% endif %}
{% endwith %}
<section id="hero" class="hero section light-background">
<img src="{{ url_for('static', filename='medilab/assets/img/hero-bg.jpg') }}" alt="Equipo de salud y atención médica" data-aos="fade-in" fetchpriority="high" decoding="async">
<div class="container position-relative">
<div class="welcome position-relative" data-aos="fade-down" data-aos-delay="100">
<h1>{{ site_settings.title or app_name }}</h1>
<p>{{ site_settings.tagline }}</p>
</div>
<div class="content row gy-4">
<div class="col-lg-4 d-flex align-items-stretch">
<div class="why-box" data-aos="zoom-out" data-aos-delay="200">
<h3>Atención psiquiátrica con trazabilidad clínica</h3>
<p>Gestión integral de turnos, historia clínica digital unificada, consultas del sitio,
recetas electrónicas y verificación pública segura.</p>
<div class="text-center">
<a href="#about" class="more-btn"><span>Conocé más</span> <i
class="bi bi-chevron-right"></i></a>
</div>
</div>
</div>
<div class="col-lg-8 d-flex align-items-stretch">
<div class="d-flex flex-column justify-content-center w-100">
<div class="row gy-4">
{% for item in (fp.stats_items[:3] if fp.stats_items else []) %}
<div class="col-xl-4 d-flex align-items-stretch">
<div class="icon-box" data-aos="zoom-out"
data-aos-delay="{{ 300 + loop.index0 * 100 }}">
<i class="{{ item.icon or 'bi bi-clipboard2-pulse' }}"></i>
<h4>{{ item.title }}</h4>
<p>{{ item.body }}</p>
</div>
</div>
{% else %}
<div class="col-xl-4 d-flex align-items-stretch">
<div class="icon-box"><i class="bi bi-person-vcard"></i>
<h4>Equipo médico</h4>
<p>Profesionales con agenda y prescripción auditada.</p>
</div>
</div>
<div class="col-xl-4 d-flex align-items-stretch">
<div class="icon-box"><i class="bi bi-journal-medical"></i>
<h4>Historia clínica</h4>
<p>Legajo único por paciente con evolución cronológica.</p>
</div>
</div>
<div class="col-xl-4 d-flex align-items-stretch">
<div class="icon-box"><i class="bi bi-capsule-pill"></i>
<h4>Receta electrónica</h4>
<p>Emisión, verificación y respaldo institucional.</p>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</section>
<section id="about" class="about section">
<div class="container">
<div class="row gy-4 gx-5">
<div class="col-lg-6 position-relative align-self-start" data-aos="fade-up" data-aos-delay="200">
<img src="{{ url_for('static', filename='medilab/assets/img/about.jpg') }}" class="img-fluid"
alt="Atención médica profesional" loading="lazy" decoding="async">
</div>
<div class="col-lg-6 content" data-aos="fade-up" data-aos-delay="100">
<h3>Nosotros</h3>
<p>Institución orientada a psiquiatría clínica, continuidad asistencial y documentación médica
segura, siguiendo una lógica de atención integral y trazabilidad digital.</p>
<ul>
{% for item in fp.about_items %}
<li>
<i class="{{ item.icon or 'fa-solid fa-heart-circle-xmark' }}"></i>
<div>
<h5>{{ item.title }}</h5>
<p>{{ item.body }}</p>
</div>
</li>
{% else %}
<li><i class="fa-solid fa-vial-circle-check"></i>
<div>
<h5>Atención interdisciplinaria</h5>
<p>Evaluación psiquiátrica, seguimiento y control evolutivo.</p>
</div>
</li>
<li><i class="fa-solid fa-pump-medical"></i>
<div>
<h5>Prescripción segura</h5>
<p>Recetas con validación y trazabilidad operativa.</p>
</div>
</li>
<li><i class="fa-solid fa-heart-circle-xmark"></i>
<div>
<h5>Continuidad clínica</h5>
<p>Historia clínica digital única y accesible para profesionales autorizados.</p>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</section>
<section id="stats" class="stats section light-background">
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row gy-4">
{% for item in fp.stats_items %}
<div class="col-lg-3 col-md-6 d-flex flex-column align-items-center">
<i class="{{ item.icon or 'fa-solid fa-chart-line' }}"></i>
<div class="stats-item">
<span data-purecounter-start="0" data-purecounter-end="{{ item.subtitle or '0' }}"
data-purecounter-duration="1" class="purecounter"></span>
<p>{{ item.title }}</p>
</div>
</div>
{% else %}
<div class="col-lg-3 col-md-6 d-flex flex-column align-items-center"><i
class="fa-solid fa-user-doctor"></i>
<div class="stats-item"><span data-purecounter-start="0" data-purecounter-end="12"
data-purecounter-duration="1" class="purecounter"></span>
<p>Profesionales</p>
</div>
</div>
<div class="col-lg-3 col-md-6 d-flex flex-column align-items-center"><i
class="fa-regular fa-hospital"></i>
<div class="stats-item"><span data-purecounter-start="0" data-purecounter-end="8"
data-purecounter-duration="1" class="purecounter"></span>
<p>Servicios</p>
</div>
</div>
<div class="col-lg-3 col-md-6 d-flex flex-column align-items-center"><i class="fas fa-flask"></i>
<div class="stats-item"><span data-purecounter-start="0" data-purecounter-end="24"
data-purecounter-duration="1" class="purecounter"></span>
<p>Turnos semanales</p>
</div>
</div>
<div class="col-lg-3 col-md-6 d-flex flex-column align-items-center"><i class="fas fa-award"></i>
<div class="stats-item"><span data-purecounter-start="0" data-purecounter-end="3"
data-purecounter-duration="1" class="purecounter"></span>
<p>Áreas críticas</p>
</div>
</div>
{% endfor %}
</div>
</div>
</section>
<section id="services" class="services section">
<div class="container section-title" data-aos="fade-up">
<h2>Servicios</h2>
<p>Prestaciones médicas y administrativas configurables desde el panel.</p>
</div>
<div class="container">
<div class="row gy-4">
{% for item in (fp.service_cards if fp.service_cards else []) %}
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="{{ 100 + loop.index0 * 100 }}">
<div class="service-item position-relative">
<div class="icon"><i class="{{ item.icon or 'bi bi-activity' }}"></i></div>
<h3>{{ item.title }}</h3>
<p>{{ item.body }}</p>
</div>
</div>
{% endfor %}
{% if not fp.service_cards %}
{% for service in services[:6] %}
<div class="col-lg-4 col-md-6" data-aos="fade-up" data-aos-delay="{{ 100 + loop.index0 * 100 }}">
<div class="service-item position-relative">
<div class="icon"><i class="bi bi-heart-pulse"></i></div>
<h3>{{ service.name }}</h3>
<p>{{ service.description or 'Prestación médica configurable desde el panel.' }}</p>
</div>
</div>
{% endfor %}
{% endif %}
</div>
</div>
</section>
<section id="appointment" class="appointment section light-background">
<div class="container section-title" data-aos="fade-up">
<h2>Turnos</h2>
<p>La reserva online funciona sobre la agenda real del equipo. Podés integrarla dentro de esta sección conservando la experiencia del sitio.</p>
</div>
<div class="container">
<div class="booking-iframe-shell" data-aos="fade-up" data-aos-delay="100">
<iframe class="booking-public-iframe" src="{{ url_for('booking') }}" title="Reserva de turnos" loading="lazy"></iframe>
</div>
</div>
</section>
<section id="departments" class="departments section">
<div class="container section-title" data-aos="fade-up">
<h2>Departamentos</h2>
<p>Áreas médicas y administrativas visibles para el paciente.</p>
</div>
<div class="container" data-aos="fade-up" data-aos-delay="100">
<div class="row">
<div class="col-lg-3">
<ul class="nav nav-tabs flex-column">
{% for dep in fp.department_cards %}
<li class="nav-item"><a class="nav-link {% if loop.first %}active show{% endif %}" data-bs-toggle="tab" href="#department-tab-{{ loop.index }}">{{ dep.title }}</a></li>
{% else %}
<li class="nav-item"><a class="nav-link active show" data-bs-toggle="tab" href="#department-tab-1">Psiquiatría clínica</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#department-tab-2">Receta electrónica</a></li>
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#department-tab-3">Historia clínica</a></li>
{% endfor %}
</ul>
</div>
<div class="col-lg-9 mt-4 mt-lg-0">
<div class="tab-content">
{% for dep in fp.department_cards %}
<div class="tab-pane {% if loop.first %}active show{% endif %}" id="department-tab-{{ loop.index }}">
<div class="row">
<div class="col-lg-8 details order-2 order-lg-1">
<h3>{{ dep.title }}</h3>
<p class="fst-italic">{{ dep.subtitle }}</p>
<p>{{ dep.body }}</p>
</div>
<div class="col-lg-4 text-center order-1 order-lg-2">
<img src="{{ url_for('static', filename=dep.image_path) if dep.image_path else url_for('static', filename='medilab/assets/img/departments-1.jpg') }}" alt="{{ dep.title }}" class="img-fluid">
</div>
</div>
</div>
{% else %}
<div class="tab-pane active show" id="department-tab-1"><div class="row"><div class="col-lg-8 details order-2 order-lg-1"><h3>Psiquiatría clínica</h3><p class="fst-italic">Entrevistas, seguimiento y conducta terapéutica.</p><p>Atención centrada en diagnóstico, evolución, tratamientos y registro seguro.</p></div><div class="col-lg-4 text-center order-1 order-lg-2"><img src="{{ url_for('static', filename='medilab/assets/img/departments-1.jpg') }}" class="img-fluid" alt="Área médica del sitio" loading="lazy" decoding="async"></div></div></div>
<div class="tab-pane" id="department-tab-2"><div class="row"><div class="col-lg-8 details order-2 order-lg-1"><h3>Receta electrónica</h3><p class="fst-italic">Emisión, trazabilidad y verificación pública.</p><p>Administración segura del circuito de prescripción electrónica y validación para farmacia.</p></div><div class="col-lg-4 text-center order-1 order-lg-2"><img src="{{ url_for('static', filename='medilab/assets/img/departments-2.jpg') }}" class="img-fluid" alt="Área médica del sitio" loading="lazy" decoding="async"></div></div></div>
<div class="tab-pane" id="department-tab-3"><div class="row"><div class="col-lg-8 details order-2 order-lg-1"><h3>Historia clínica</h3><p class="fst-italic">Legajo unificado por paciente con evolución cronológica.</p><p>Registro clínico longitudinal con accesos auditables y datos estructurados.</p></div><div class="col-lg-4 text-center order-1 order-lg-2"><img src="{{ url_for('static', filename='medilab/assets/img/departments-3.jpg') }}" class="img-fluid" alt="Área médica del sitio" loading="lazy" decoding="async"></div></div></div>
{% endfor %}
</div>
</div>
</div>
</div>
</section>
<section id="faq" class="faq section light-background">
<div class="container section-title" data-aos="fade-up">
<h2>Preguntas frecuentes</h2>
<p>Contenido administrable desde el panel del sitio.</p>
</div>
<div class="container">
<div class="accordion" id="faqAccordion">
{% for item in fp.faq_items %}
<div class="accordion-item">
<h2 class="accordion-header"><button class="accordion-button {% if not loop.first %}collapsed{% endif %}" type="button" data-bs-toggle="collapse" data-bs-target="#faq{{ loop.index }}">{{ item.title }}</button></h2>
<div id="faq{{ loop.index }}" class="accordion-collapse collapse {% if loop.first %}show{% endif %}" data-bs-parent="#faqAccordion"><div class="accordion-body">{{ item.body }}</div></div>
</div>
{% else %}
<div class="accordion-item"><h2 class="accordion-header"><button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1">¿Cómo solicito un turno?</button></h2><div id="faq1" class="accordion-collapse collapse show" data-bs-parent="#faqAccordion"><div class="accordion-body">Podés reservar desde la sección Turnos usando la agenda en línea.</div></div></div>
<div class="accordion-item"><h2 class="accordion-header"><button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2">¿Cómo verifico una receta?</button></h2><div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion"><div class="accordion-body">Ingresando el CUIR o número legal en la sección Verificar receta.</div></div></div>
{% endfor %}
</div>
</div>
</section>
<section id="gallery" class="gallery section">
<div class="container section-title" data-aos="fade-up">
<h2>Galería</h2>
<p>Imágenes administrables desde el panel del frontend.</p>
</div>
<div class="container-fluid" data-aos="fade-up" data-aos-delay="100">
<div class="row g-0">
{% for item in fp.gallery_items %}
<div class="col-lg-3 col-md-4"><div class="gallery-item"><a href="{{ url_for('static', filename=item.image_path) if item.image_path else '#' }}" class="glightbox" data-gallery="images-gallery"><img src="{{ url_for('static', filename=item.image_path) if item.image_path else url_for('static', filename='medilab/assets/img/gallery/gallery-1.jpg') }}" alt="{{ item.title }}" class="img-fluid"></a></div></div>
{% else %}
{% for i in range(1,9) %}<div class="col-lg-3 col-md-4"><div class="gallery-item"><a href="{{ url_for('static', filename='medilab/assets/img/gallery/gallery-' ~ i ~ '.jpg') }}" class="glightbox" data-gallery="images-gallery"><img src="{{ url_for('static', filename='medilab/assets/img/gallery/gallery-' ~ i ~ '.jpg') }}" class="img-fluid" alt="Área médica del sitio" loading="lazy" decoding="async"></a></div></div>{% endfor %}
{% endfor %}
</div>
</div>
</section>
<section id="contact" class="contact section">
<div class="container section-title" data-aos="fade-up">
<h2>Contacto</h2>
<p>Canales institucionales y formulario conectado con la herramienta Consultas.</p>
</div>
<div class="container" data-aos="fade-up" data-aos-delay="100">
{% if site_settings.contact_map_embed %}
<div class="mb-4">{{ site_settings.contact_map_embed|safe }}</div>
{% endif %}
<div class="row gy-4">
<div class="col-lg-4">
<div class="info-wrap">
{% for item in fp.contact_items %}
<div class="info-item d-flex" data-aos="fade-up" data-aos-delay="{{ 200 + loop.index0 * 100 }}">
<i class="{{ item.icon or 'bi bi-geo-alt' }} flex-shrink-0"></i>
<div>
<h3>{{ item.title }}</h3>
<p>{{ item.body }}</p>
</div>
</div>
{% else %}
<div class="info-item d-flex"><i class="bi bi-geo-alt flex-shrink-0"></i><div><h3>Dirección</h3><p>{{ site_settings.contact_address or 'Configurá la dirección institucional desde el panel.' }}</p></div></div>
<div class="info-item d-flex"><i class="bi bi-telephone flex-shrink-0"></i><div><h3>Teléfono</h3><p>{{ site_settings.phone or '—' }}</p></div></div>
<div class="info-item d-flex"><i class="bi bi-envelope flex-shrink-0"></i><div><h3>Email</h3><p>{{ site_settings.email or '—' }}</p></div></div>
{% endfor %}
</div>
</div>
<div class="col-lg-8">
<form action="{{ url_for('public_contact_submit') }}" method="post" class="php-email-form" aria-label="Formulario de consulta pública">
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
<div class="row gy-4">
<div class="col-md-6"><label class="visually-hidden" for="contactName">Nombre</label><input id="contactName" type="text" name="name" class="form-control" placeholder="Nombre" autocomplete="name" required></div>
<div class="col-md-6"><label class="visually-hidden" for="contactEmail">Email</label><input id="contactEmail" type="email" class="form-control" name="email" placeholder="Email" autocomplete="email" required></div>
<div class="col-md-6"><label class="visually-hidden" for="contactPhone">Teléfono</label><input id="contactPhone" type="tel" class="form-control" name="phone" placeholder="Teléfono" autocomplete="tel"></div>
<div class="col-md-6"><label class="visually-hidden" for="contactSubject">Asunto</label><input id="contactSubject" type="text" class="form-control" name="subject" placeholder="Asunto"></div>
<div class="col-md-12"><label class="visually-hidden" for="contactMessage">Detalle</label><textarea id="contactMessage" class="form-control" name="message" rows="6" placeholder="Detalle" required></textarea></div>
<div class="col-md-12 text-center"><button type="submit">Enviar consulta</button></div>
</div>
</form>
</div>
</div>
</div>
</section>
</main>
{% if site_settings.cookie_banner_enabled %}
<div id="cookieConsentBanner" class="position-fixed bottom-0 start-0 end-0 p-3" style="z-index:1080; display:none;">
<div class="container">
<div class="card shadow-lg border-0">
<div class="card-body d-lg-flex align-items-center justify-content-between gap-3">
<div class="small mb-3 mb-lg-0">{{ site_settings.cookie_text|safe }}</div>
<div class="d-flex gap-2 flex-wrap">
<a class="btn btn-sm btn-outline-secondary" href="{{ url_for('public_legal_privacy') }}">Ver privacidad</a>
<button class="btn btn-sm btn-primary" type="button" id="acceptCookieConsent">Aceptar</button>
</div>
</div>
</div>
</div>
</div>
{% endif %}
{% if site_settings.popup_enabled %}
<div class="modal fade" id="publicSitePopup" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header"><h5 class="modal-title">{{ site_settings.popup_title }}</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
<div class="modal-body">
{% if site_settings.popup_image_path %}<img src="{{ url_for('static', filename=site_settings.popup_image_path) }}" alt="popup" class="img-fluid rounded-4 mb-3">{% endif %}
<div>{{ site_settings.popup_html|safe }}</div>
</div>
{% if site_settings.popup_link_text and site_settings.popup_link_url %}
<div class="modal-footer"><a class="btn btn-primary" href="{{ site_settings.popup_link_url }}" target="_blank">{{ site_settings.popup_link_text }}</a></div>
{% endif %}
</div>
</div>
</div>
{% endif %}
<footer id="footer" class="footer mt-auto light-background">
<div class="container footer-top">
<div class="row gy-4">
{% set footer_cols = frontend_payload.footer_columns if frontend_payload.footer_columns else [] %}
{% if footer_cols %}
{% for col in footer_cols[:4] %}
<div class="col-lg-3 col-md-6 footer-about">
{% if loop.first %}
<a href="{{ url_for('index') }}" class="logo d-flex align-items-center">
<span class="sitename">{{ col.title or site_settings.title }}</span>
</a>
{% else %}
<h4>{{ col.title }}</h4>
{% endif %}
<div class="footer-contact pt-3">
<p>{{ col.body }}</p>
{% if col.link_url %}<p><a href="{{ col.link_url }}">{{ col.link_text or col.link_url }}</a></p>
{% endif %}
</div>
</div>
{% endfor %}
{% else %}
<div class="col-lg-3 col-md-6 footer-about">
<a href="{{ url_for('index') }}" class="logo d-flex align-items-center"><span class="sitename">{{
site_settings.title or app_name }}</span></a>
<div class="footer-contact pt-3">
{% if site_settings.contact_address %}<p>{{ site_settings.contact_address }}</p>{% endif %}
{% if site_settings.phone %}<p><strong>Tel:</strong> <span>{{ site_settings.phone }}</span></p>
{% endif %}
{% if site_settings.email %}<p><strong>Email:</strong> <span>{{ site_settings.email }}</span>
</p>{% endif %}
</div>
<div class="social-links d-flex mt-4">{% for social in site_settings.socials %}<a
href="{{ social.url }}" target="_blank"><i class="bi {{ social.icon }}"></i></a>{% endfor %}
</div>
</div>
<div class="col-lg-3 col-md-6 footer-links">
<h4>Menú</h4>
<ul>
<li><a href="#about">Nosotros</a></li>
<li><a href="#services">Servicios</a></li>
<li><a href="#appointment">Turnos</a></li>
<li><a href="#contact">Contacto</a></li>
<li><a href="{{ url_for('public_legal_terms') }}">Términos</a></li>
<li><a href="{{ url_for('public_legal_privacy') }}">Privacidad</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 footer-links">
<h4>Datos institucionales</h4>
<ul>
<li><a href="#">Plataforma {{ site_settings.platform_number }}</a></li>
<li><a href="#">Repositorio {{ site_settings.repository_number }}</a></li>
<li><a href="#">Retención {{ site_settings.retention_years }} años</a></li>
</ul>
</div>
<div class="col-lg-3 col-md-6 footer-links">
<h4>Acciones</h4>
<ul>
<li><a href="{{ url_for('booking') }}">Reservar turno</a></li>
<li><a href="{{ url_for('public_verify_recipe') }}">Verificar receta</a></li>
<li><a href="{{ url_for('login') }}">Área admin</a></li>
</ul>
</div>
{% endif %}
</div>
</div>
<div class="container copyright text-center py-4">
<p>© <span>Copyright</span> <strong class="px-1 sitename">{{ site_settings.title }}</strong> <span>Todos los
derechos reservados</span></p>
<div class="credits">
<a href="{{ url_for('login') }}" class="text-muted text-decoration-none small">Panel de Gestión</a>
</div>
</div>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function () {
const cookieBanner = document.getElementById('cookieConsentBanner');
const cookieBtn = document.getElementById('acceptCookieConsent');
if (cookieBanner && !localStorage.getItem('site_cookie_consent_v1')) {
cookieBanner.style.display = 'block';
}
if (cookieBtn) {
cookieBtn.addEventListener('click', function () {
localStorage.setItem('site_cookie_consent_v1', 'accepted');
if (cookieBanner) cookieBanner.style.display = 'none';
});
}
const popupEnabled = {{ 'true' if site_settings.popup_enabled else 'false' }};
if (popupEnabled && !sessionStorage.getItem('site_popup_seen_v1')) {
const popupEl = document.getElementById('publicSitePopup');
if (popupEl && window.bootstrap) {
sessionStorage.setItem('site_popup_seen_v1', '1');
new bootstrap.Modal(popupEl).show();
}
}
});
</script>
{% if site_settings.whatsapp_floating_enabled and site_settings.whatsapp_floating_url %}
<a href="{{ site_settings.whatsapp_floating_url }}" target="_blank" rel="noopener" class="frontend-whatsapp-float d-flex align-items-center justify-content-center" aria-label="{{ site_settings.whatsapp_public_label }}" title="{{ site_settings.whatsapp_public_label }}">
<i class="bi bi-whatsapp" aria-hidden="true"></i><span class="frontend-whatsapp-label">WA</span>
</a>
{% endif %}
<a href="#" id="scroll-top" class="scroll-top d-flex align-items-center justify-content-center" aria-label="Volver arriba"><i
class="bi bi-arrow-up-short"></i></a>
<script
src="{{ url_for('static', filename='medilab/assets/vendor/bootstrap/js/bootstrap.bundle.min.js') }}"></script>
<script src="{{ url_for('static', filename='medilab/assets/vendor/aos/aos.js') }}" defer></script>
<script src="{{ url_for('static', filename='medilab/assets/vendor/glightbox/js/glightbox.min.js') }}" defer></script>
<script src="{{ url_for('static', filename='medilab/assets/vendor/swiper/swiper-bundle.min.js') }}" defer></script>
<script src="{{ url_for('static', filename='medilab/assets/js/main.js') }}" defer></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js" defer></script>
<script src="{{ url_for('static', filename='js/app.js') }}" defer></script>
{% if site_settings.ai_chatbot_enabled and site_settings.ai_chatbot_floating_enabled %}
<script>
window.AI_CHATBOT_CONFIG = {
enabled: true,
floatingEnabled: true,
assistantName: {{ site_settings.ai_chatbot_assistant_name|tojson }},
welcomeMessage: {{ site_settings.ai_chatbot_welcome_message|tojson }},
csrfToken: {{ csrf_token|tojson }},
messageUrl: {{ url_for('api_ai_chatbot_message')|tojson }},
bookingOptionsUrl: {{ url_for('api_booking_wizard_options')|tojson }},
bookingSlotsUrl: {{ url_for('api_booking_wizard_slots')|tojson }},
bookingCreateUrl: {{ url_for('api_booking_wizard_create')|tojson }},
bookingWizardOptionsUrl: {{ url_for('api_booking_wizard_options')|tojson }},
bookingWizardSlotsUrl: {{ url_for('api_booking_wizard_slots')|tojson }},
bookingWizardCreateUrl: {{ url_for('api_booking_wizard_create')|tojson }}
};
</script>
<script src="{{ url_for('static', filename='js/booking_wizard.js') }}" defer></script>
<script src="{{ url_for('static', filename='js/ai_chatbot.js') }}" defer></script>
{% endif %}
</body>
</html>
{% endblock %}