Update index.html

index.html

@@ -15,6 +15,9 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
 
+    <!-- PPTX Generation Library -->
+    <script src="https://cdn.jsdelivr.net/npm/pptxgenjs@3.12.0/dist/pptxgen.bundle.js"></script>
+
     <!-- Cropper.js for Image Cropping -->
     <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
@@ -435,9 +438,8 @@
                     class="w-full py-4 bg-blue-600 hover:bg-blue-700 text-white font-bold rounded-xl shadow-lg hover:shadow-xl active:scale-95 transition-all flex items-center justify-center gap-2 disabled:opacity-70 disabled:cursor-wait"
                 >
                     <span v-if="!isGenerating">
-                        <!-- PDF Icon -->
-                        <svg viewBox="0 0 384 512" class="w-5 h-5 fill-current inline-block"><path d="M181.9 256.1c-5-16-4.9-46.9-2-46.9 8.4 0 7.6 36.9 2 46.9zm-1.7 47.2c-7.7 20.2-17.3 43.3-28.4 62.7 18.3-7 39-17.2 62.9-21.9-12.7-9.6-24.9-23.4-34.5-40.8zM86.1 428.1c0 .8 13.2-5.4 34.9-40.2-6.7 6.3-29.1 24.5-34.9 40.2zM248 160h136v328c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V24C0 10.7 10.7 0 24 0h200v136c0 13.2 10.8 24 24 24zm-8 171.8c-20-12.2-33.3-29-42.7-53.8 4.5-18.5 11.6-46.6 6.2-64.2-4.7-29.4-42.4-26.5-47.8-6.8-5 18.3-.4 44.1 8.1 77-11.6 27.6-28.7 64.6-40.8 85.8-.1 0-.1.1-.2.1-27.1 13.9-73.6 44.5-54.5 68 5.6 6.9 16 10 21.5 10 17.9 0 35.7-18 61.1-61.8 25.8-8.5 54.1-19.1 79-23.2 21.7 11.8 47.1 19.5 64 19.5 29.2 0 31.2-32 19.7-43.4-13.9-13.6-54.3-9.7-73.6-7.2zM377 105L279 7c-4.5-4.5-10.6-7-17-7h-6v128h128v-6.1c0-6.3-2.5-12.4-7-16.9zm-74.1 255.3c4.1-2.7-2.5-11.9-4.2-17.9-2.9-4.1-32.9-14.9-49.6-19.7 1.4 4.9 3 9.8 4.2 14.6 3.1 17.9 6.9 51.1 12.8 62.1 9.5 1 34.1-33 36.8-39.1z"/></svg>
-                        下載雙頁 PDF
+                        <i class="fa-solid fa-file-export"></i>
+                        匯出設計 (PDF / PPTX)
                     </span>
                     <span v-else>
                         <!-- Spinner -->
@@ -490,16 +492,16 @@
                 </div>
             </div>
 
-            <!-- Export PDF Modal -->
+            <!-- Export PDF/PPTX Modal -->
             <div v-if="showExportModal" class="absolute inset-0 z-50 bg-slate-900/50 flex items-center justify-center p-4 animate-fade-in">
                 <div class="bg-white rounded-xl shadow-2xl w-full max-w-sm overflow-hidden">
                     <div class="bg-indigo-600 px-6 py-4">
                         <h3 class="text-lg font-bold text-white flex items-center gap-2">
-                            <i class="fa-solid fa-print"></i> 匯出 PDF 設定
+                            <i class="fa-solid fa-file-export"></i> 匯出設定
                         </h3>
                     </div>
                     <div class="p-6 space-y-4">
-                        <p class="text-sm text-slate-600 mb-2">請輸入資訊以產生專屬浮水印（可略過）：</p>
+                        <p class="text-sm text-slate-600 mb-2">產生專屬浮水印（可略過）：</p>
                         <div>
                             <label class="block text-sm font-bold text-slate-700 mb-1">姓名 (選填)</label>
                             <input type="text" v-model="exportName" placeholder="例如：王小明" class="w-full border-2 border-slate-200 rounded-lg p-2 focus:border-indigo-500 focus:outline-none">
@@ -508,13 +510,23 @@
                             <label class="block text-sm font-bold text-slate-700 mb-1">作品名稱 (選填)</label>
                             <input type="text" v-model="exportProjectName" placeholder="例如：我的幸運草" class="w-full border-2 border-slate-200 rounded-lg p-2 focus:border-indigo-500 focus:outline-none">
                         </div>
+                        
+                        <!-- NEW: Checkbox for removing grid on page 2 -->
+                        <div class="flex items-center gap-2 border-t border-slate-100 pt-3">
+                            <input type="checkbox" id="removeGridPage2" v-model="removeGridOnPage2" class="w-4 h-4 text-indigo-600 rounded border-slate-300 focus:ring-indigo-500">
+                            <label for="removeGridPage2" class="text-sm font-bold text-slate-700 cursor-pointer">
+                                消除第二頁格線 <span class="text-xs font-normal text-slate-500">(解決雙面列印偏移問題)</span>
+                            </label>
+                        </div>
                     </div>
-                    <div class="bg-slate-50 px-6 py-4 flex justify-end gap-2 border-t border-slate-100">
-                        <button @click="showExportModal = false" class="px-4 py-2 text-slate-600 font-bold hover:bg-slate-200 rounded-lg transition-all">取消</button>
-                        <button @click="processExport" class="px-4 py-2 bg-indigo-600 text-white font-bold rounded-lg hover:bg-indigo-700 transition-all shadow-md flex items-center gap-2">
-                            <span v-if="isGenerating"><i class="fa-solid fa-circle-notch fa-spin"></i> 處理中</span>
-                            <span v-else>確認下載</span>
+                    <div class="bg-slate-50 px-6 py-4 flex flex-col gap-2 border-t border-slate-100">
+                        <button @click="processExport('pdf')" class="w-full py-3 bg-indigo-600 hover:bg-indigo-700 text-white font-bold rounded-lg transition-all shadow-md flex items-center justify-center gap-2">
+                            <i class="fa-solid fa-file-pdf"></i> 下載雙頁 PDF
+                        </button>
+                        <button @click="processExport('pptx')" class="w-full py-3 bg-orange-500 hover:bg-orange-600 text-white font-bold rounded-lg transition-all shadow-md flex items-center justify-center gap-2">
+                            <i class="fa-solid fa-file-powerpoint"></i> 下載可編輯 PPTX
                         </button>
+                        <button @click="showExportModal = false" class="w-full py-2 text-slate-500 hover:text-slate-700 font-bold text-sm mt-1">取消</button>
                     </div>
                 </div>
             </div>
@@ -739,6 +751,8 @@
             const showExportModal = ref(false);
             const exportName = ref('');
             const exportProjectName = ref('');
+            // NEW: Grid removal for PDF
+            const removeGridOnPage2 = ref(false);
 
             // Image Upload & Crop State
             const showCropper = ref(false);
@@ -1373,12 +1387,16 @@
                 showExportModal.value = true;
             };
 
-            const processExport = () => {
+            const processExport = (type) => {
                 showExportModal.value = false;
-                exportPDF();
+                if (type === 'pdf') {
+                    exportPDF();
+                } else if (type === 'pptx') {
+                    exportPPTX();
+                }
             };
 
-            const renderPageToCanvas = async (pageId) => {
+            const renderPageToCanvas = async (pageId, hideGrid = false) => {
                 const pageData = pages.value[pageId - 1];
                 const rows = currentGrid.value.rows;
                 const cols = currentGrid.value.cols;
@@ -1392,6 +1410,9 @@
                 wrapper.style.backgroundColor = 'white';
                 wrapper.style.position = 'relative';
                 
+                // Logic for grid borders
+                const borderStyle = hideGrid ? 'border: none;' : 'border: 1px solid #cbd5e1;';
+                
                 let gridHtml = `<div style="display: grid; grid-template-columns: repeat(${cols}, 1fr); grid-template-rows: repeat(${rows}, 1fr); width: 100%; height: 100%; border: 1px solid #e2e8f0;">`;
                 
                 pageData.cells.forEach((cell, idx) => {
@@ -1411,7 +1432,7 @@
                     }
 
                     gridHtml += `
-                        <div class="grid-cell" style="position: relative; border: 1px solid #cbd5e1; background-color: ${cell.bgColor}; display: flex; align-items: center; justify-content: center; overflow: hidden;">
+                        <div class="grid-cell" style="position: relative; ${borderStyle} background-color: ${cell.bgColor}; display: flex; align-items: center; justify-content: center; overflow: hidden;">
                             <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform: rotate(${cell.rotation}deg);">
                                 ${contentHtml}
                             </div>
@@ -1457,30 +1478,23 @@
                 
                 // Determine filename
                 let fileName = 'magic-origami-booklet.pdf';
-                if (exportName.value || exportProjectName.value) {
-                    const namePart = exportName.value ? exportName.value : '';
-                    const projPart = exportProjectName.value ? exportProjectName.value : '';
-                    
-                    if (namePart && projPart) {
-                        fileName = `${namePart}的${projPart}.pdf`;
-                    } else if (namePart) {
-                        fileName = `${namePart}的作品.pdf`;
-                    } else if (projPart) {
-                        fileName = `${projPart}.pdf`;
-                    }
-                }
+                const namePart = exportName.value ? exportName.value : '';
+                const projPart = exportProjectName.value ? exportProjectName.value : '';
+                if (namePart || projPart) fileName = `${namePart}${namePart && projPart ? '-' : ''}${projPart || '作品'}.pdf`;
 
                 try {
                     const pdf = new jsPDF('p', 'mm', 'a4');
                     const pdfWidth = 210;
                     const pdfHeight = 297;
 
-                    const canvas1 = await renderPageToCanvas(1);
+                    // Page 1 (Never hide grid)
+                    const canvas1 = await renderPageToCanvas(1, false);
                     const imgData1 = canvas1.toDataURL('image/jpeg', 0.95);
                     pdf.addImage(imgData1, 'JPEG', 0, 0, pdfWidth, pdfHeight);
 
                     pdf.addPage();
-                    const canvas2 = await renderPageToCanvas(2);
+                    // Page 2 (Hide grid if requested)
+                    const canvas2 = await renderPageToCanvas(2, removeGridOnPage2.value);
                     const imgData2 = canvas2.toDataURL('image/jpeg', 0.95);
                     pdf.addImage(imgData2, 'JPEG', 0, 0, pdfWidth, pdfHeight);
 
@@ -1495,6 +1509,113 @@
                 }
             };
 
+            const exportPPTX = async () => {
+                if (selectedCellIndices.value.size > 0) clearSelection();
+                isGenerating.value = true;
+
+                try {
+                    const pres = new PptxGenJS();
+                    pres.layout = 'A4'; // 8.27 x 11.69 inches
+                    
+                    const pageWidth = 8.27;
+                    const pageHeight = 11.69;
+                    const rows = currentGrid.value.rows;
+                    const cols = currentGrid.value.cols;
+                    const cellW = pageWidth / cols;
+                    const cellH = pageHeight / rows;
+
+                    // Determine filename
+                    let fileName = 'magic-origami-project';
+                    const namePart = exportName.value ? exportName.value : '';
+                    const projPart = exportProjectName.value ? exportProjectName.value : '';
+                    if (namePart || projPart) fileName = `${namePart}${namePart && projPart ? '-' : ''}${projPart || '作品'}`;
+
+                    pages.value.forEach((pageData, pageIndex) => {
+                        const slide = pres.addSlide();
+                        
+                        // Add cells
+                        pageData.cells.forEach((cell, idx) => {
+                            const r = Math.floor(idx / cols);
+                            const c = idx % cols;
+                            const x = c * cellW;
+                            const y = r * cellH;
+
+                            // 1. Background Rect
+                            if (cell.bgColor !== '#ffffff') {
+                                slide.addShape(pres.ShapeType.rect, {
+                                    x: x, y: y, w: cellW, h: cellH,
+                                    fill: { color: cell.bgColor.replace('#', '') },
+                                    line: { color: 'CCCCCC', width: 0.5 } // Keep grid lines
+                                });
+                            } else {
+                                // Transparent/White bg but need grid lines
+                                slide.addShape(pres.ShapeType.rect, {
+                                    x: x, y: y, w: cellW, h: cellH,
+                                    fill: { color: 'FFFFFF' },
+                                    line: { color: 'CCCCCC', width: 0.5 }
+                                });
+                            }
+
+                            // 2. Content
+                            if (cell.content) {
+                                if (cell.type === 'text' || cell.type === 'icon') {
+                                    let content = cell.content;
+                                    if (cell.type === 'icon') content = icons[cell.content] || cell.content;
+                                    
+                                    // Determine font size roughly
+                                    let fontSize = 24;
+                                    const len = content.length;
+                                    if (len >= 3) fontSize = 20;
+                                    if (len === 2) fontSize = 28;
+                                    if (len === 1) fontSize = 36;
+                                    if (cell.type === 'icon') fontSize = 32;
+
+                                    slide.addText(content, {
+                                        x: x, y: y, w: cellW, h: cellH,
+                                        align: 'center',
+                                        valign: 'middle',
+                                        fontSize: fontSize,
+                                        fontFace: 'Arial', // Fallback font
+                                        color: cell.color.replace('#', ''),
+                                        rotate: cell.rotation
+                                    });
+                                } else if (cell.type === 'image') {
+                                    // Image
+                                    // Calculate image size to fit within cell (80% padding like HTML)
+                                    const padW = cellW * 0.1;
+                                    const padH = cellH * 0.1;
+                                    slide.addImage({
+                                        data: cell.content,
+                                        x: x + padW,
+                                        y: y + padH,
+                                        w: cellW * 0.8,
+                                        h: cellH * 0.8,
+                                        rotate: cell.rotation
+                                    });
+                                }
+                            }
+                        });
+
+                        // Watermark
+                        if (exportName.value || exportProjectName.value) {
+                             const watermarkText = `${exportName.value ? exportName.value + '的' : ''}${exportProjectName.value || ''}`;
+                             slide.addText(watermarkText, {
+                                 x: pageWidth - 3, y: pageHeight - 0.8, w: 2.5, h: 0.5,
+                                 align: 'right', fontSize: 10, color: '999999'
+                             });
+                        }
+                    });
+
+                    await pres.writeFile({ fileName: `${fileName}.pptx` });
+
+                } catch (err) {
+                    console.error("PPTX Error", err);
+                    alert("PPTX 生成發生錯誤");
+                } finally {
+                    isGenerating.value = false;
+                }
+            };
+
             return {
                 gridOptions,
                 currentGrid,
@@ -1525,7 +1646,6 @@
                 applyIconToCell,
                 clearCurrentCell,
                 clearAllContent,
-                exportPDF,
                 exportProject,
                 triggerImport,
                 importProject,
@@ -1556,6 +1676,7 @@
                 processExport,
                 exportName,
                 exportProjectName,
+                removeGridOnPage2, // Export ref
                 // Multi-select
                 isMultiSelectMode,
                 toggleMultiSelectMode,