Update index.html

index.html

@@ -230,17 +230,16 @@
             z-index: 1001;
         }
 
-        /* LOADING OVERLAY */
+        /* LOADING OVERLAY - NEGRO SÓLIDO Y CAPA SUPERIOR ABSOLUTA */
         #pdf-loading {
             position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-            background: rgba(0,0,0,0.95);
-            z-index: 2000;
+            background: #000000; /* Sin transparencia, bloquea todo */
+            z-index: 99999; /* Por encima de cualquier elemento */
             display: none;
             flex-direction: column;
             justify-content: center;
             align-items: center;
             gap: 25px;
-            backdrop-filter: blur(10px);
         }
         .spinner {
             width: 60px; height: 60px;
@@ -358,9 +357,8 @@
             display: flex !important;
             opacity: 1 !important;
             position: fixed !important;
-            top: 0 !important;
-            left: 0 !important;
-            z-index: 9999 !important;
+            top: 0 !important; left: 0 !important;
+            z-index: 1 !important; /* Siempre debajo del overlay */
             width: 1920px !important;
             height: 1080px !important;
             transform: none !important;
@@ -628,82 +626,68 @@
             if (e.key === 'ArrowLeft') changeSlide(-1);
         });
 
-        // ===================== GENERADOR DE PDF - CON PROGRESO VISUAL =====================
+        // ===================== GENERADOR DE PDF - UX OPTIMIZADA =====================
         async function generatePDF() {
             const loadingOverlay = document.getElementById('pdf-loading');
             const progressText = document.getElementById('progress-text');
             const btnPdf = document.getElementById('btn-pdf');
-            
+            const slides = document.querySelectorAll('.slide');
+            const originalSlide = currentSlide - 1;
+
+            // 1. Mostrar overlay INMEDIATAMENTE
             loadingOverlay.style.display = 'flex';
             btnPdf.disabled = true;
+            progressText.textContent = 'Inicializando...';
+
+            // 2. Ocultar TODAS las slides para que NO se vean detrás
+            slides.forEach(s => s.style.display = 'none');
+
+            // 3. Forzar repaint del navegador ANTES de procesar
+            await new Promise(resolve => setTimeout(resolve, 200));
 
             try {
                 const { jsPDF } = window.jspdf;
-                const pdf = new jsPDF({ 
-                    orientation: 'landscape', 
-                    unit: 'px', 
-                    format: [1920, 1080],
-                    compress: true 
-                });
-                
-                const slides = document.querySelectorAll('.slide');
-                const originalSlide = currentSlide - 1;
+                const pdf = new jsPDF({ orientation: 'landscape', unit: 'px', format: [1920, 1080], compress: true });
 
                 for (let i = 0; i < slides.length; i++) {
                     const slide = slides[i];
                     
-                    // Actualizar mensaje de progreso Y FORZAR RENDERIZADO
+                    // Actualizar progreso y permitir repaint
                     progressText.textContent = `Procesando diapositiva ${i + 1} de ${slides.length}...`;
-                    
-                    // Forzar reflow para que el navegador actualice el DOM
-                    void progressText.offsetWidth;
-                    
-                    // Pequeña pausa para permitir que el navegador renderice el cambio
-                    await new Promise(resolve => setTimeout(resolve, 100));
-                    
-                    // 1. Activar modo captura: mostrar SOLO esta slide con estilos forzados
-                    slides.forEach((s, idx) => {
-                        s.classList.toggle('capture-mode', idx === i);
-                        s.style.display = idx === i ? 'flex' : 'none';
-                    });
-                    
-                    // 2. Forzar estado final de animaciones
+                    await new Promise(resolve => setTimeout(resolve, 50));
+
+                    // Activar modo captura
+                    slide.classList.add('capture-mode');
+                    slide.style.display = 'flex';
+
+                    // Forzar animaciones a estado final
                     const animatedElements = slide.querySelectorAll('[class*="animate-"]');
                     animatedElements.forEach(el => {
                         el.style.animation = 'none';
                         el.style.opacity = '1';
                         el.style.transform = 'none';
-                        void el.offsetWidth; // Forzar reflow
+                        void el.offsetWidth;
                     });
-                    
-                    // 3. Recolectar todos los links con sus posiciones
+
+                    // Recolectar links
                     const links = [];
-                    const linkElements = slide.querySelectorAll('a[href]');
-                    linkElements.forEach(link => {
+                    slide.querySelectorAll('a[href]').forEach(link => {
                         const rect = link.getBoundingClientRect();
                         const href = link.getAttribute('href');
                         if (href && !href.startsWith('#')) {
-                            links.push({
-                                x: rect.left,
-                                y: rect.top,
-                                width: rect.width,
-                                height: rect.height,
-                                url: href
-                            });
+                            links.push({ x: rect.left, y: rect.top, width: rect.width, height: rect.height, url: href });
                         }
                     });
-                    
-                    // 4. Esperar renderizado completo
+
+                    // Esperar renderizado
                     await new Promise(resolve => setTimeout(resolve, 1500));
-                    
-                    // 5. Convertir imagen de fondo a base64 para evitar CORS
+
+                    // Convertir bg a base64
                     const bgStyle = window.getComputedStyle(slide).backgroundImage;
                     const urlMatch = bgStyle.match(/url\(["']?(.*?)["']?\)/);
-                    
                     if (urlMatch && urlMatch[1]) {
                         try {
-                            const cleanUrl = urlMatch[1];
-                            const res = await fetch(cleanUrl);
+                            const res = await fetch(urlMatch[1]);
                             const blob = await res.blob();
                             const b64 = await new Promise(r => { 
                                 const rd = new FileReader(); 
@@ -711,71 +695,42 @@
                                 rd.readAsDataURL(blob); 
                             });
                             slide.style.backgroundImage = `url(${b64})`;
-                        } catch (e) {
-                            console.warn("No se pudo convertir imagen de fondo:", e);
-                        }
+                        } catch (e) { console.warn("BG conversion failed:", e); }
                     }
-                    
-                    // 6. Capturar con html2canvas - configuración optimizada
+
+                    // Capturar
                     const canvas = await html2canvas(slide, {
-                        scale: 1,
-                        useCORS: false,
-                        allowTaint: false,
-                        backgroundColor: '#050505',
-                        logging: false,
-                        width: 1920,
-                        height: 1080,
-                        windowWidth: 1920,
-                        windowHeight: 1080,
-                        scrollX: 0,
-                        scrollY: 0,
-                        x: 0,
-                        y: 0,
-                        foreignObjectRendering: true,
-                        removeContainer: true
+                        scale: 1, useCORS: false, allowTaint: false, backgroundColor: '#050505',
+                        logging: false, width: 1920, height: 1080, windowWidth: 1920, windowHeight: 1080,
+                        scrollX: 0, scrollY: 0, x: 0, y: 0, foreignObjectRendering: true, removeContainer: true
                     });
-                    
-                    // 7. Añadir al PDF
+
                     if (i > 0) pdf.addPage();
-                    const imgData = canvas.toDataURL('image/jpeg', 0.95);
-                    pdf.addImage(imgData, 'JPEG', 0, 0, 1920, 1080, undefined, 'FAST');
-                    
-                    // 8. Agregar links activos sobre la imagen
+                    pdf.addImage(canvas.toDataURL('image/jpeg', 0.95), 'JPEG', 0, 0, 1920, 1080, undefined, 'FAST');
+
+                    // Agregar links
                     links.forEach(link => {
-                        // Ajustar coordenadas al tamaño del PDF (1920x1080)
-                        const pdfLink = {
-                            x: link.x,
-                            y: link.y,
-                            w: link.width,
-                            h: link.height,
-                            url: link.url
-                        };
-                        
-                        // Agregar link al PDF
-                        pdf.link(pdfLink.x, pdfLink.y, pdfLink.w, pdfLink.h, {
-                            url: pdfLink.url
-                        });
+                        pdf.link(link.x, link.y, link.width, link.height, { url: link.url });
                     });
+
+                    // Ocultar slide inmediatamente después de capturar
+                    slide.classList.remove('capture-mode');
+                    slide.style.display = 'none';
                 }
 
-                // 9. Restaurar estado original
-                slides.forEach((s, idx) => {
-                    s.classList.remove('capture-mode');
-                    s.style.display = idx === originalSlide ? 'flex' : 'none';
-                });
-                
                 progressText.textContent = 'Finalizando y descargando...';
                 await new Promise(resolve => setTimeout(resolve, 500));
-                
-                // 10. Guardar PDF
                 pdf.save('MIGUEL_PitchDeck.pdf');
-                
-                // 11. Recargar para restaurar animaciones originales
+
+                // Restaurar slide original
+                slides.forEach((s, idx) => {
+                    s.style.display = idx === originalSlide ? 'flex' : 'none';
+                });
                 setTimeout(() => location.reload(), 1000);
-                
+
             } catch (err) {
-                console.error('Error detallado:', err);
-                alert('Hubo un error al generar el PDF: ' + err.message);
+                console.error('Error:', err);
+                alert('Error al generar PDF: ' + err.message);
             } finally {
                 loadingOverlay.style.display = 'none';
                 btnPdf.disabled = false;