miguelpitchdeck

Running

App Files Files Community

Malaji71 commited on Apr 29

Commit

cf02a17

verified ·

1 Parent(s): 4c0c572

Update index.html

Browse files

Files changed (1) hide show

index.html +88 -33

index.html CHANGED Viewed

@@ -344,6 +344,32 @@
             .nav button { padding: 8px 12px; font-size: 0.7rem; }
             .slide-counter { bottom: 10px; left: 10px; font-size: 0.7rem; }
         }
     </style>
 </head>
 <body>
@@ -593,7 +619,7 @@
             if (e.key === 'ArrowLeft') changeSlide(-1);
         });
-        // ===================== GENERADOR DE PDF ROBUSTO =====================
         async function generatePDF() {
             const loadingOverlay = document.getElementById('pdf-loading');
             const btnPdf = document.getElementById('btn-pdf');
@@ -603,62 +629,91 @@
             try {
                 const { jsPDF } = window.jspdf;
-                // Orientación horizontal 16:9
-                const pdf = new jsPDF({ orientation: 'landscape', unit: 'px', format: [1920, 1080] });
                 const slides = document.querySelectorAll('.slide');
-                const currentIdx = currentSlide - 1;
                 for (let i = 0; i < slides.length; i++) {
-                    // 1. Mostrar solo esta slide
-                    slides.forEach((s, idx) => s.style.display = idx === i ? 'flex' : 'none');
-                    // 2. TRUCO MÁGICO: Convertir imagen de fondo a Base64 para evitar error CORS/Taint en HF
-                    const bgStyle = window.getComputedStyle(slides[i]).backgroundImage;
                     const urlMatch = bgStyle.match(/url\(["']?(.*?)["']?\)/);
                     if (urlMatch && urlMatch[1]) {
-                        const cleanUrl = urlMatch[1];
                         try {
-                            // Fetch la imagen y convertirla a Blob
                             const res = await fetch(cleanUrl);
                             const blob = await res.blob();
-                            // Convertir Blob a Base64
                             const b64 = await new Promise(r => {
                                 const rd = new FileReader();
                                 rd.onloadend = () => r(rd.result);
                                 rd.readAsDataURL(blob);
                             });
-                            // Inyectar imagen inline
-                            slides[i].style.backgroundImage = `url(${b64})`;
                         } catch (e) {
-                            console.warn("No se pudo convertir imagen:", e);
                         }
                     }
-                    // Esperar renderizado
-                    await new Promise(r => setTimeout(r, 800));
-                    // 3. Capturar SIN CORS (porque ya es interna/base64)
-                    const canvas = await html2canvas(slides[i], {
-                        scale: 2,
-                        useCORS: false,  // <--- Importante: false
-                        allowTaint: false,
-                        backgroundColor: '#050505',
-                        logging: false,
-                        width: 1920,
-                        height: 1080
                     });
-                    // 4. Añadir al PDF
                     if (i > 0) pdf.addPage();
-                    pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 1920, 1080);
                 }
-                // 5. Restaurar estado original (mostrar slide actual)
-                slides.forEach((s, idx) => s.style.display = idx === currentIdx ? 'flex' : 'none');
-                // Guardar
                 pdf.save('MIGUEL_PitchDeck.pdf');
             } catch (err) {

             .nav button { padding: 8px 12px; font-size: 0.7rem; }
             .slide-counter { bottom: 10px; left: 10px; font-size: 0.7rem; }
         }
+        /* ===================== MODO CAPTURA PDF ===================== */
+        .slide.capture-mode {
+            display: flex !important;
+            opacity: 1 !important;
+            position: fixed !important;
+            top: 0 !important;
+            left: 0 !important;
+            z-index: 9999 !important;
+            width: 1920px !important;
+            height: 1080px !important;
+            transform: none !important;
+        }
+        .slide.capture-mode [class*="animate-"] {
+            animation: none !important;
+            opacity: 1 !important;
+            transform: none !important;
+            transition: none !important;
+        }
+        .slide.capture-mode .overlay,
+        .slide.capture-mode .overlay-slide2,
+        .slide.capture-mode .overlay-slide4,
+        .slide.capture-mode .overlay-slide5,
+        .slide.capture-mode .overlay-slide6 {
+            opacity: 1 !important;
+        }
     </style>
 </head>
 <body>
             if (e.key === 'ArrowLeft') changeSlide(-1);
         });
+        // ===================== GENERADOR DE PDF - VERSIÓN CORREGIDA =====================
         async function generatePDF() {
             const loadingOverlay = document.getElementById('pdf-loading');
             const btnPdf = document.getElementById('btn-pdf');
             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;
                 for (let i = 0; i < slides.length; i++) {
+                    const slide = slides[i];
+                    // 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
+                    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
+                    });
+                    // 3. Esperar renderizado completo
+                    await new Promise(resolve => setTimeout(resolve, 1500));
+                    // 4. Convertir imagen de fondo a base64 para evitar CORS
+                    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 blob = await res.blob();
                             const b64 = await new Promise(r => {
                                 const rd = new FileReader();
                                 rd.onloadend = () => r(rd.result);
                                 rd.readAsDataURL(blob);
                             });
+                            slide.style.backgroundImage = `url(${b64})`;
                         } catch (e) {
+                            console.warn("No se pudo convertir imagen de fondo:", e);
                         }
                     }
+                    // 5. Capturar con html2canvas - configuración optimizada
+                    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
                     });
+                    // 6. 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');
                 }
+                // 7. Restaurar estado original
+                slides.forEach((s, idx) => {
+                    s.classList.remove('capture-mode');
+                    s.style.display = idx === originalSlide ? 'flex' : 'none';
+                });
+                // Recargar para restaurar animaciones originales
+                setTimeout(() => location.reload(), 1000);
                 pdf.save('MIGUEL_PitchDeck.pdf');
             } catch (err) {