iatoolkit 0.12.0__tar.gz → 0.16.0__tar.gz

{iatoolkit-0.12.0 → iatoolkit-0.16.0}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: iatoolkit
-Version: 0.12.0
+Version: 0.16.0
 Summary: IAToolkit
 Author: Fernando Libedinsky
 License-Expression: MIT

{iatoolkit-0.12.0 → iatoolkit-0.16.0}/pyproject.toml

@@ -4,7 +4,7 @@ build-backend = "setuptools.build_meta"
 
 [project]
 name = "iatoolkit"
-version = "0.12.0"
+version = "0.16.0"
 requires-python = ">=3.11"
 description = "IAToolkit"
 readme = "readme.md"

{iatoolkit-0.12.0 → iatoolkit-0.16.0}/src/iatoolkit/base_company.py

@@ -26,10 +26,16 @@ class BaseCompany(ABC):
         self.company = self.profile_repo.get_company_by_short_name(short_name)
         return self.company
 
-    def _create_company(self, short_name: str, name: str, branding: dict | None = None) -> Company:
+    def _create_company(self,
+                        short_name: str,
+                        name: str,
+                        branding: dict | None = None,
+                        onboarding_cards: dict | None = None
+                        ) -> Company:
         company_obj = Company(short_name=short_name,
                               name=name,
-                              branding=branding)
+                              branding=branding,
+                              onboarding_cards=onboarding_cards)
         self.company = self.profile_repo.create_company(company_obj)
         return self.company
 

{iatoolkit-0.12.0 → iatoolkit-0.16.0}/src/iatoolkit/common/routes.py

@@ -27,7 +27,7 @@ def register_views(injector, app):
     from iatoolkit.views.tasks_review_view import TaskReviewView
     from iatoolkit.views.home_view import HomeView
     from iatoolkit.views.login_view import LoginView, InitiateLoginView
-    from iatoolkit.views.external_chat_login_view import InitiateExternalChatView, ExternalChatLoginView
+    from iatoolkit.views.external_login_view import InitiateExternalChatView, ExternalChatLoginView
     from iatoolkit.views.signup_view import SignupView
     from iatoolkit.views.verify_user_view import VerifyAccountView
     from iatoolkit.views.forgot_password_view import ForgotPasswordView
@@ -36,21 +36,19 @@ def register_views(injector, app):
     from iatoolkit.views.user_feedback_view import UserFeedbackView
     from iatoolkit.views.prompt_view import PromptView
     from iatoolkit.views.chat_token_request_view import ChatTokenRequestView
-    from iatoolkit.views.external_login_view import ExternalLoginView
     from iatoolkit.views.download_file_view import DownloadFileView
 
     app.add_url_rule('/', view_func=HomeView.as_view('home'))
 
-    # front if the company internal portal
-    app.add_url_rule('/<company_short_name>/chat_login', view_func=ExternalChatLoginView.as_view('external_chat_login'))
-    app.add_url_rule('/<company_short_name>/external_login/<external_user_id>',
-                     view_func=ExternalLoginView.as_view('external_login'))
+    # login for external portals
     app.add_url_rule('/<company_short_name>/initiate_external_chat',
-                         view_func=InitiateExternalChatView.as_view('initiate_chat_login'))
+                         view_func=InitiateExternalChatView.as_view('initiate_external_chat'))
+    app.add_url_rule('/<company_short_name>/external_login',
+                     view_func=ExternalChatLoginView.as_view('external_login'))
+    app.add_url_rule('/auth/chat_token',
+                     view_func=ChatTokenRequestView.as_view('chat-token'))
 
-    app.add_url_rule('/auth/chat_token', view_func=ChatTokenRequestView.as_view('chat-token'))
-
-    # main pages for the iatoolkit frontend
+    # login for the iatoolkit integrated frontend
     app.add_url_rule('/<company_short_name>/login', view_func=LoginView.as_view('login'))
     app.add_url_rule('/<company_short_name>/initiate_login', view_func=InitiateLoginView.as_view('initiate_login'))
 

{iatoolkit-0.12.0 → iatoolkit-0.16.0}/src/iatoolkit/iatoolkit.py

@@ -144,8 +144,13 @@ class IAToolkit:
         is_https = self._get_config_value('USE_HTTPS', 'false').lower() == 'true'
         is_dev = self._get_config_value('FLASK_ENV') == 'development'
 
+        # get the iatoolkit domain
+        parsed_url = urlparse(os.getenv('IATOOLKIT_BASE_URL'))
+        domain = parsed_url.netloc
+
         self.app.config.update({
             'VERSION': self.version,
+            'SERVER_NAME': domain,
             'SECRET_KEY': self._get_config_value('FLASK_SECRET_KEY', 'iatoolkit-default-secret'),
             'SESSION_COOKIE_SAMESITE': "None" if is_https else "Lax",
             'SESSION_COOKIE_SECURE': is_https,
@@ -156,6 +161,9 @@ class IAToolkit:
             'JWT_EXPIRATION_SECONDS_CHAT': int(self._get_config_value('JWT_EXPIRATION_SECONDS_CHAT', 3600))
         })
 
+        if parsed_url.scheme == 'https':
+            self.app.config['PREFERRED_URL_SCHEME'] = 'https'
+
         # Configuración para tokenizers en desarrollo
         if is_dev:
             os.environ["TOKENIZERS_PARALLELISM"] = "false"

{iatoolkit-0.12.0 → iatoolkit-0.16.0}/src/iatoolkit/repositories/models.py

@@ -58,6 +58,7 @@ class Company(Base):
     gemini_api_key = Column(String, nullable=True)
 
     branding = Column(JSON, nullable=True)
+    onboarding_cards = Column(JSON, nullable=True)
     parameters = Column(JSON, nullable=True, default={})
     created_at = Column(DateTime, default=datetime.now)
     allow_jwt = Column(Boolean, default=True, nullable=True)

{iatoolkit-0.12.0 → iatoolkit-0.16.0}/src/iatoolkit/repositories/profile_repo.py

@@ -74,6 +74,7 @@ class ProfileRepo:
         if company:
             company.parameters = new_company.parameters
             company.branding = new_company.branding
+            company.onboarding_cards = new_company.onboarding_cards
         else:
             self.session.add(new_company)
             company = new_company

{iatoolkit-0.12.0 → iatoolkit-0.16.0}/src/iatoolkit/services/branding_service.py

@@ -44,6 +44,19 @@ class BrandingService:
             "brand_info_text": "#055160",  # Texto azul oscuro
             "brand_info_border": "#b6effb",
 
+            # Estilos para el Asistente de Prompts ---
+            "prompt_assistant_bg": "#f8f9fa",
+            "prompt_assistant_border": "#dee2e6",
+            "prompt_assistant_icon_color": "#6c757d",
+            "prompt_assistant_button_bg": "#FFFFFF",
+            "prompt_assistant_button_text": "#495057",
+            "prompt_assistant_button_border": "#ced4da",
+            "prompt_assistant_dropdown_bg": "#f8f9fa",
+            "prompt_assistant_header_bg": "#e9ecef",
+            "prompt_assistant_header_text": "#495057",
+            "prompt_assistant_item_hover_bg": None,  # Usará el primario por defecto
+            "prompt_assistant_item_hover_text": None,  # Usará el texto sobre primario
+
             # Color para el botón de Enviar ---
             "send_button_color": "#212529"  # Gris oscuro/casi negro por defecto
         }
@@ -93,6 +106,17 @@ class BrandingService:
                 --brand-info-bg: {final_branding_values['brand_info_bg']};
                 --brand-info-text: {final_branding_values['brand_info_text']};
                 --brand-info-border: {final_branding_values['brand_info_border']};
+                --brand-prompt-assistant-bg: {final_branding_values['prompt_assistant_bg']};
+                --brand-prompt-assistant-border: {final_branding_values['prompt_assistant_border']};
+                --brand-prompt-assistant-icon-color: {final_branding_values['prompt_assistant_icon_color']};
+                --brand-prompt-assistant-button-bg: {final_branding_values['prompt_assistant_button_bg']};
+                --brand-prompt-assistant-button-text: {final_branding_values['prompt_assistant_button_text']};
+                --brand-prompt-assistant-button-border: {final_branding_values['prompt_assistant_button_border']};
+                --brand-prompt-assistant-dropdown-bg: {final_branding_values['prompt_assistant_dropdown_bg']};
+                --brand-prompt-assistant-header-bg: {final_branding_values['prompt_assistant_header_bg']};
+                --brand-prompt-assistant-header-text: {final_branding_values['prompt_assistant_header_text']};
+                --brand-prompt-assistant-item-hover-bg: {final_branding_values['prompt_assistant_item_hover_bg'] or final_branding_values['brand_primary_color']};
+                --brand-prompt-assistant-item-hover-text: {final_branding_values['prompt_assistant_item_hover_text'] or final_branding_values['brand_text_on_primary']};
 
             }}
         """

iatoolkit-0.16.0/src/iatoolkit/services/onboarding_service.py

@@ -0,0 +1,43 @@
+# Copyright (c) 2024 Fernando Libedinsky
+# Product: IAToolkit
+#
+# IAToolkit is open source software.
+
+from iatoolkit.repositories.models import Company
+from typing import List, Dict, Any
+
+
+class OnboardingService:
+    """
+    Servicio para gestionar las tarjetas de contenido que se muestran
+    durante la pantalla de carga (onboarding).
+    """
+
+    def __init__(self):
+        """
+        Define el conjunto de tarjetas de onboarding por defecto.
+        """
+        self._default_cards = [
+            {'icon': 'fas fa-users', 'title': 'Clientes',
+             'text': 'Conozco en detalle a nuestros clientes: antigüedad, contactos, historial de operaciones.<br><br><strong>Ejemplo:</strong> ¿cuántos clientes nuevos se incorporaron a mi cartera este año?'},
+            {'icon': 'fas fa-cubes', 'title': 'Productos',
+             'text': 'Productos: características, condiciones, historial.'},
+
+            {'icon': 'fas fa-cogs', 'title': 'Personaliza tus Prompts',
+             'text': 'Utiliza la varita mágica y podrás explorar los prompts predefinidos que he preparado para ti.'},
+            {'icon': 'fas fa-table', 'title': 'Tablas y Excel',
+             'text': 'Puedes pedirme la respuesta en formato de tablas o excel.<br><br><strong>Ejemplo:</strong> dame una tabla con los 10 certificados más grandes este año.'},
+            {'icon': 'fas fa-shield-alt', 'title': 'Seguridad y Confidencialidad',
+             'text': 'Toda tu información es procesada de forma segura y confidencial dentro de nuestro entorno protegido.'}
+        ]
+
+    def get_onboarding_cards(self, company: Company | None) -> List[Dict[str, Any]]:
+        """
+        Retorna la lista de tarjetas de onboarding para una compañía.
+        Si la compañía tiene tarjetas personalizadas, las devuelve.
+        De lo contrario, devuelve las tarjetas por defecto.
+        """
+        if company and company.onboarding_cards:
+            return company.onboarding_cards
+
+        return self._default_cards

{iatoolkit-0.12.0 → iatoolkit-0.16.0}/src/iatoolkit/static/styles/chat_iatoolkit.css

@@ -168,7 +168,7 @@
 
 /* 1. La caja principal que envuelve toda el área de entrada */
 .input-area {
-    background-color: #f8f9fa;
+    background-color: var(--brand-prompt-assistant-bg, #f8f9fa);
 }
 
 /* 2. La barra "cápsula" que envuelve el texto y los iconos */
@@ -202,7 +202,7 @@
 
 #prompt-assistant-collapse .card {
     border-radius: 1.5rem;      /* Mismo radio que el chat-input-bar */
-    border: 1px solid #dee2e6; /* Mismo borde que el chat-input-bar */
+    border: 1px solid var(--brand-prompt-assistant-border, #dee2e6); /* Mismo borde que el chat-input-bar */
     box-shadow: none;           /* Eliminamos la sombra por defecto del card */
 }
 
@@ -241,6 +241,12 @@
     color: #6c757d;
     transition: color 0.2s ease-in-out;
 }
+
+/* Anulación específica para el icono de la varita mágica */
+.chat-input-bar a[href="#prompt-assistant-collapse"] i {
+    color: var(--brand-prompt-assistant-icon-color, #6c757d);
+}
+
 .chat-input-bar .d-flex a:hover i {
     color: #343a40;
 }
@@ -302,8 +308,8 @@
 }
 
 .dropdown-menu-soft {
-    background-color: #f8f9fa;
-    border-color: #dee2e6;
+    background-color: var(--brand-prompt-assistant-dropdown-bg, #f8f9fa);
+    border-color: var(--brand-prompt-assistant-border, #dee2e6);
 }
 
 .dropdown-menu-soft .dropdown-item {
@@ -312,15 +318,15 @@
 
 .dropdown-menu-soft .dropdown-item:hover,
 .dropdown-menu-soft .dropdown-item:focus {
-    color: #ffffff;
-    background-color: #495057;
+    color: var(--brand-prompt-assistant-item-hover-text, #ffffff);
+    background-color: var(--brand-prompt-assistant-item-hover-bg, #495057);
     padding-left: 1.5rem;
     transition: all 0.15s ease-in-out;
 }
 
 .dropdown-menu-soft .dropdown-header {
-    background-color: #495057;
-    color: #ffffff;
+    background-color: var(--brand-prompt-assistant-header-bg, #495057);
+    color: var(--brand-prompt-assistant-header-text, #ffffff);
     font-weight: 600;
     margin: 4px;
     padding: 0.4rem 1rem;
@@ -331,6 +337,14 @@
     border-bottom: none;
 }
 
+/* Estilo para el botón principal del asistente de prompts */
+#prompt-select-button {
+    background-color: var(--brand-prompt-assistant-button-bg, #FFFFFF);
+    color: var(--brand-prompt-assistant-button-text, #495057);
+    border-color: var(--brand-prompt-assistant-button-border, #ced4da);
+}
+
+
 #clear-selection-button {
     position: absolute;
     top: 50%;

{iatoolkit-0.12.0 → iatoolkit-0.16.0}/src/iatoolkit/templates/base.html

@@ -9,9 +9,9 @@
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/filepond/dist/filepond.min.css">
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
-    <link rel="stylesheet" href="{{ url_for('static', filename='styles/chat_iatoolkit.css') }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='styles/chat_modal.css') }}">
-    <link rel="stylesheet" href="{{ url_for('static', filename='styles/llm_output.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles/chat_iatoolkit.css', _external=True) }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles/chat_modal.css',  _external=True) }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='styles/llm_output.css', _external=True) }}">
 </head>
 <body class="d-flex flex-column p-3" style="min-height: 100vh;">
     <main class="d-flex flex-column flex-grow-1">

{iatoolkit-0.12.0 → iatoolkit-0.16.0}/src/iatoolkit/templates/chat.html

@@ -44,7 +44,7 @@
 
         <!-- Icono de cerrar sesión (al final) -->
         {% if user_email %}
-            <a href="{{ url_for('logout', company_short_name=company_short_name) }}"
+            <a href="{{ url_for('logout', company_short_name=company_short_name, _external=True) }}"
                  class="ms-3 action-icon-style" title="Cerrar sesión" style="color: {{ branding.header_text_color }} !important;">
                 <i class="bi bi-box-arrow-right"></i>
             </a>
@@ -173,10 +173,10 @@
 </script>
 
 <!-- Carga de los scripts JS externos después de definir las variables globales -->
-<script src="{{ url_for('static', filename='js/chat_filepond.js') }}"></script>
-<script src="{{ url_for('static', filename='js/chat_history.js') }}"></script>
-<script src="{{ url_for('static', filename='js/chat_feedback.js') }}"></script>
-<script src="{{ url_for('static', filename='js/chat_main.js') }}"></script>
+<script src="{{ url_for('static', filename='js/chat_filepond.js', _external=True) }}"></script>
+<script src="{{ url_for('static', filename='js/chat_history.js', _external=True) }}"></script>
+<script src="{{ url_for('static', filename='js/chat_feedback.js', _external=True) }}"></script>
+<script src="{{ url_for('static', filename='js/chat_main.js', _external=True) }}"></script>
 
 <script>
     document.addEventListener('DOMContentLoaded', function() {

{iatoolkit-0.12.0 → iatoolkit-0.16.0}/src/iatoolkit/templates/home.html

@@ -13,7 +13,7 @@
       <div class="border rounded p-4 shadow-sm bg-light">
         <h4 class="text-muted fw-semibold text-start mb-3">login integrado (IAToolkit)</h4>
         <form id="login-form"
-              action="{{ url_for('initiate_login', company_short_name=company_short_name) }}"
+              action="{{ url_for('initiate_login', company_short_name=company_short_name, external_login=True) }}"
               method="post">
           <div class="mb-3">
             <label for="company_short_name" class="form-label d-block text-muted">Empresa</label>
@@ -156,11 +156,6 @@
               return;
           }
 
-          const $button = $(this);
-          const $spinner = $button.find('.spinner-border');
-          $button.prop('disabled', true);
-          $spinner.removeClass('d-none');
-
           fetch(`/${selectedCompany}/initiate_external_chat`, {
               method: 'POST',
               headers: {
@@ -188,10 +183,6 @@
           .catch(error => {
               Swal.fire({ icon: 'error', title: 'Error de Inicio de Sesión', text: error.message });
           })
-          .finally(() => {
-              $button.prop('disabled', false);
-              $spinner.addClass('d-none');
-          });
 
        });
   });

iatoolkit-0.16.0/src/iatoolkit/templates/onboarding_shell.html

@@ -0,0 +1,167 @@
+
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <title>Iniciando {{ branding.name | default('IAToolkit') }} IA...</title>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
+
+    <!-- Inyecta las variables CSS de la marca -->
+    {% if branding and branding.css_variables %}
+    <style>
+        {{ branding.css_variables|safe }}
+    </style>
+    {% endif %}
+
+    <style>
+        /* --- Estilos Generales --- */
+        body, html { margin: 0; padding: 0; height: 100%; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
+
+        #loader-wrapper {
+            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
+            background-color: #f4f7f6;
+            z-index: 1000;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+            padding: 20px;
+            box-sizing: border-box;
+            transition: opacity 0.5s ease-in-out;
+        }
+
+        /* --- Estilos de Branding --- */
+        #brand-header {
+            font-size: 2.5rem;
+            font-weight: 700;
+            margin: 0 0 30px 0; /* Aumentamos el margen inferior para dar espacio */
+            color: var(--brand-secondary-color, #06326B);
+        }
+        #brand-header .brand-name {
+            color: var(--brand-primary-color, #FF5100);
+        }
+
+
+        /* --- Estilos de la Tarjeta (Sin cambios) --- */
+        #card-container {
+            background-color: #fff; border-radius: 12px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+            padding: 30px; width: 90%; max-width: 450px; text-align: center; transition: opacity 0.3s ease-in-out;
+        }
+        #card-container .icon { font-size: 40px; color: var(--brand-primary-color, #FF5100); margin-bottom: 15px; }
+        #card-container h3 { font-size: 1.25rem; color: #333; margin-bottom: 10px; }
+        #card-container p { font-size: 0.95rem; color: #666; line-height: 1.5; min-height: 60px; }
+        .card-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
+        .card-nav button { background-color: var(--brand-secondary-color, #06326B); border: none; color: var(--brand-text-on-secondary, #FFFFFF); border-radius: 50%; width: 40px; height: 40px; cursor: pointer; transition: opacity 0.2s; }
+        .card-nav button:hover { opacity: 0.85; }
+        #progress-dots { display: flex; gap: 8px; }
+        .dot { width: 10px; height: 10px; border-radius: 50%; background-color: #ddd; transition: background-color 0.3s; }
+        .dot.active { background-color: var(--brand-primary-color, #FF5100); }
+
+        /* --- ESTILOS MEJORADOS: SPINNER DE CARGA --- */
+        #loading-status { margin-top: 30px; display: flex; align-items: center; gap: 15px; }
+        .spinner {
+            width: 30px; height: 30px; border: 4px solid rgba(0, 0, 0, 0.1);
+            border-top-color: var(--brand-primary-color, #FF5100);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        #loading-status p { font-size: 1rem; font-weight: 500; color: #555; margin: 0; }
+        @keyframes spin { to { transform: rotate(360deg); } }
+
+        /* --- Iframe (Sin cambios) --- */
+        #content-container { width: 100%; height: 100%; }
+        iframe { width: 100%; height: 100%; border: none; }
+    </style>
+</head>
+<body>
+    <div id="loader-wrapper">
+
+        <h1 id="brand-header">
+            <span class="brand-name">{{ branding.name | default('IAToolkit') }}</span>  <span>IA</span>
+        </h1>
+
+        <div id="card-container">
+            <div id="card-icon" class="icon"><i class="fas fa-lightbulb"></i></div>
+            <h3 id="card-title">Título de la Tarjeta</h3>
+            <p id="card-text">Descripción de la tarjeta de capacitación.</p>
+            <div class="card-nav">
+                <button id="prev-card" aria-label="Anterior"><i class="fas fa-chevron-left"></i></button>
+                <div id="progress-dots"></div>
+                <button id="next-card" aria-label="Siguiente"><i class="fas fa-chevron-right"></i></button>
+            </div>
+        </div>
+
+        <!-- MEJORADO: Texto de estado ahora junto al spinner -->
+        <div id="loading-status">
+            <div class="spinner"></div>
+            <p>Inicializando el contexto de Maxxa para la IA...</p>
+        </div>
+
+    </div>
+
+    <div id="content-container"></div>
+
+    <script>
+        $(function() {
+            const cardsData = {{ onboarding_cards | tojson }};
+
+            let currentCardIndex = 0, autoRotateInterval;
+            const $cardContainer = $('#card-container'), $cardIcon = $('#card-icon'), $cardTitle = $('#card-title'), $cardText = $('#card-text'), $progressDots = $('#progress-dots');
+            function displayCard(index) {
+                $cardContainer.css('opacity', 0);
+                setTimeout(() => {
+                    const card = cardsData[index];
+                    $cardIcon.html(`<i class="${card.icon}"></i>`);
+                    $cardTitle.text(card.title);
+                    $cardText.html(card.text);
+                    $progressDots.find('.dot').removeClass('active').eq(index).addClass('active');
+                    $cardContainer.css('opacity', 1);
+                }, 300);
+            }
+            function startAutoRotate() { autoRotateInterval = setInterval(() => $('#next-card').click(), 5000); }
+            cardsData.forEach(() => $progressDots.append('<div class="dot"></div>'));
+            displayCard(currentCardIndex);
+            startAutoRotate();
+            $('#next-card').on('click', function() {
+                currentCardIndex = (currentCardIndex + 1) % cardsData.length;
+                displayCard(currentCardIndex);
+                clearInterval(autoRotateInterval); startAutoRotate();
+            });
+            $('#prev-card').on('click', function() {
+                currentCardIndex = (currentCardIndex - 1 + cardsData.length) % cardsData.length;
+                displayCard(currentCardIndex);
+                clearInterval(autoRotateInterval); startAutoRotate();
+            });
+
+            const $loader = $('#loader-wrapper');
+        const $container = $('#content-container');
+
+        // URL para el iframe, pasada desde la vista InitiateExternalChatView
+        const iframeSrc = "{{ iframe_src_url }}";
+
+        // Creamos el elemento iframe
+        const iframe = document.createElement('iframe');
+        iframe.src = iframeSrc;
+
+        // Estilos para que ocupe toda la pantalla
+        iframe.style.width = '100%';
+        iframe.style.height = '100%';
+        iframe.style.border = 'none';
+        iframe.style.display = 'none'; // Empezamos oculto
+
+        // Evento que se dispara cuando el iframe ha terminado de cargar su contenido
+        iframe.onload = function() {
+            // Mostramos el iframe
+            iframe.style.display = 'block';
+            // Ocultamos la animación de carga con una transición suave
+            $loader.css('opacity', 0);
+            setTimeout(() => $loader.hide(), 500); // Lo eliminamos del DOM después de la transición
+        };
+
+        // Añadimos el iframe al contenedor en el DOM
+        $container.append(iframe);
+    });
+    </script>
+</body>
+</html>