vueloenglobo.mx/resources/views/template/layout.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    @include('template.metas')
</head>

<body>

    <!-- ==================== -->
    <!-- COMPONENTE: PRELOADER -->
    <!-- ==================== -->
    <div id="preloader" role="status" aria-live="polite" aria-label="Cargando contenido">
        <div class="preloader-container">
            <div class="preloader-logo">
                <img src="{{ asset('assets/img/vueloenglobo/logo-vueloenglobo.png') }}" alt="Logo Globo Puerto Teotihuacán">
            </div>
            <div class="preloader-text">
                <h3 class="loading" data-text="{{ __('preloader.loading') }}"></h3>
            </div>
            <div class="preloader-progress" aria-label="Progreso de carga">
                <div class="preloader-progress-bar" id="preloaderProgressBar"></div>
            </div>
            <div class="preloader-subtext" data-text="{{ __('preloader.loading') }}">
                {{ __('preloader.loadingtext') }}
            </div>
        </div>
    </div>

    <!-- ==================== -->
    <!-- COMPONENTE: AUDIO -->
    <!-- ==================== -->
    <audio id="chatbotBeep" preload="auto" style="display: none;" aria-hidden="true">
        <source src="{{ asset('assets/audio/beep.mp3') }}" type="audio/mpeg">
    </audio>

    <!-- ==================== -->
    <!-- COMPONENTE: MODAL DE BÚSQUEDA -->
    <!-- ==================== -->
    <div class="search-modal" id="searchModal" role="dialog" aria-modal="true" aria-labelledby="searchTitle">
        <div class="search-modal-header">
            <h2 class="search-modal-title" id="searchTitle">¿Qué estás buscando?</h2>
            <button class="search-close-btn" id="closeSearch" aria-label="Cerrar búsqueda">
                <i class="fas fa-times"></i>
            </button>
        </div>

        <div class="search-modal-content">
            <div class="search-input-container">
                <i class="fas fa-search search-icon" aria-hidden="true"></i>
                <input type="text" class="search-input" id="searchInput"
                    placeholder="Buscar destinos, experiencias, precios..." autocomplete="off"
                    aria-label="Buscar destinos, experiencias o precios">
            </div>

            <div class="search-results" id="searchResults" aria-live="polite"></div>

            <div class="search-suggestions" aria-label="Sugerencias de búsqueda">
                <button class="search-suggestion" data-search="Teotihuacán" aria-label="Buscar Teotihuacán">
                    Teotihuacán
                </button>
            </div>
        </div>
    </div>

    <!-- ==================== -->
    <!-- COMPONENTE: MENÚ -->
    <!-- ==================== -->
    @include('template.menu')

    <main id="mainContent">
        @yield('content')
    </main>

    <!-- ==================== -->
    <!-- COMPONENTE: FOOTER -->
    <!-- ==================== -->
    @include('template.footer')

    <!-- ==================== -->
    <!-- COMPONENTE: CHATBOT WIDGET -->
    <!-- ==================== -->
    <div class="chatbot-widget">

        <!-- Botón abrir chatbot -->
        <button class="chatbot-toggle" id="chatbotToggle" aria-label="Abrir chat" aria-controls="chatbotContainer"
            aria-expanded="false">
            <i class="fas fa-comment-dots" aria-hidden="true"></i>
        </button>

        <div class="chatbot-container" id="chatbotContainer" role="dialog" aria-modal="true"
            aria-labelledby="chatbotTitle">

            <div class="chatbot-header">
                <div class="chatbot-header-info">
                    <i class="fas fa-robot" aria-hidden="true"></i>
                    <div>
                        <h3 id="chatbotTitle">Asistente Vuelo en Globo</h3>
                        <p>Tu guía para vuelos en globo</p>
                    </div>
                </div>

                <!-- Botón cerrar chatbot -->
                <button class="chatbot-close" id="chatbotClose" aria-label="Cerrar chat">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <div class="chatbot-messages" id="chatbotMessages" role="log" aria-live="polite"
                aria-label="Mensajes del chat">
                <div class="chatbot-message bot">
                    👋 ¡Hola! Soy el asistente de Vuelo en Globo. ¿En qué puedo ayudarte hoy? Puedo ayudarte
                    con:
                    <br><br>
                    • Información de vuelos y precios<br>
                    • Reservaciones<br>
                    • Preguntas frecuentes
                </div>
            </div>

            <div class="chatbot-input">
                <input type="text" id="chatbotInput" placeholder="Escribe tu mensaje..." autocomplete="off"
                    aria-label="Escribe tu mensaje para el chat">

                <button id="chatbotSendBtn" aria-label="Enviar mensaje">
                    Enviar
                </button>
            </div>

            <div class="chatbot-status" id="chatbotStatus" role="status" aria-live="polite">
                🟢 Conectado
            </div>
        </div>
    </div>

    <!-- ==================== -->
    <!-- SCRIPT PRINCIPAL -->
    <!-- ==================== -->
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="{{ asset('assets/js/main-min.js') }}"></script>

    @stack('js')

</body>

</html>