Update index.html

index.html

@@ -19,6 +19,9 @@
     <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>
 
+    <!-- FontAwesome 6 (For Consistent Icons) -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+
     <!-- Google Fonts -->
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap" rel="stylesheet">
 
@@ -147,7 +150,7 @@
                 <!-- Grid Settings -->
                 <div>
                     <label class="block text-sm font-bold text-slate-700 mb-2">📐 網格設定</label>
-                    <div class="grid grid-cols-3 gap-2 mb-2">
+                    <div class="grid grid-cols-2 gap-2 mb-2">
                         <button 
                             v-for="conf in gridOptions" 
                             :key="conf.label"
@@ -157,6 +160,14 @@
                         >
                             {{ conf.label }}
                         </button>
+                        <!-- Custom Grid Button -->
+                        <button 
+                            @click="openCustomGridModal"
+                            class="py-2 text-sm border border-dashed border-indigo-300 text-indigo-600 rounded-lg hover:bg-indigo-50 active:scale-95 transition-all font-bold"
+                            :class="{'bg-indigo-600 text-white border-indigo-600 border-solid': isCustomGridActive}"
+                        >
+                            <i class="fa-solid fa-gear mr-1"></i> 自訂網格
+                        </button>
                     </div>
                     <!-- Clear All Button -->
                     <button 
@@ -201,7 +212,7 @@
                             class="py-2 bg-slate-600 hover:bg-slate-700 text-white font-bold rounded-lg shadow-sm active:scale-95 transition-all flex items-center justify-center gap-1 text-sm"
                         >
                             <!-- Upload Icon -->
-                            <svg viewBox="0 0 512 512" class="w-4 h-4 fill-current mr-1"><path d="M288 109.3V352c0 17.7-14.3 32-32 32s-32-14.3-32-32V109.3l-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352H192c0 35.3 28.7 64 64 64s64-28.7 64-64H448c35.3 0 64 28.7 64 64v32c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V416c0-35.3 28.7-64 64-64zM432 456c13.3 0 24-10.7 24-24s-10.7-24-24-24s-24 10.7-24 24s10.7 24 24 24z"/></svg>
+                            <svg viewBox="0 0 512 512" class="w-4 h-4 fill-current mr-1"><path d="M288 109.3V352c0 17.7-14.3 32-32 32s-32-14.3-32-32V109.3l-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352H192c0 35.3 28.7 64 64 64s64-28.7 64-64H448c35.3 0 64 28.7 64 64v32c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V416c0-35.3 28.7-64 64-64zM432 456c13.3 0 24-10.7 24-24s-10.7-24-24-24s-24 10.7 24 24s10.7 24 24 24z"/></svg>
                             匯入舊檔
                         </button>
                         <input 
@@ -374,6 +385,35 @@
                 </div>
             </div>
 
+            <!-- Custom Grid Modal -->
+            <div v-if="showGridModal" 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-gear"></i> 自訂網格設定
+                        </h3>
+                    </div>
+                    <div class="p-6 space-y-4">
+                        <div>
+                            <label class="block text-sm font-bold text-slate-700 mb-1">列數 (Rows)</label>
+                            <input type="number" v-model.number="customGridConfig.rows" min="1" max="20" class="w-full border-2 border-slate-200 rounded-lg p-2 focus:border-indigo-500 focus:outline-none">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-bold text-slate-700 mb-1">欄數 (Columns)</label>
+                            <input type="number" v-model.number="customGridConfig.cols" min="1" max="20" class="w-full border-2 border-slate-200 rounded-lg p-2 focus:border-indigo-500 focus:outline-none">
+                        </div>
+                        <p class="text-xs text-slate-500 bg-slate-50 p-2 rounded">
+                            <i class="fa-solid fa-circle-info mr-1"></i>
+                            建議範圍：1 ~ 12，過大可能會影響列印清晰度。
+                        </p>
+                    </div>
+                    <div class="bg-slate-50 px-6 py-4 flex justify-end gap-2 border-t border-slate-100">
+                        <button @click="showGridModal = false" class="px-4 py-2 text-slate-600 font-bold hover:bg-slate-200 rounded-lg transition-all">取消</button>
+                        <button @click="confirmCustomGrid" class="px-4 py-2 bg-indigo-600 text-white font-bold rounded-lg hover:bg-indigo-700 transition-all shadow-md">確認套用</button>
+                    </div>
+                </div>
+            </div>
+
         </div>
 
         <!-- =======================
@@ -501,7 +541,6 @@
             const currentGrid = ref(gridOptions[1]); // Default 6x8
 
             // --- Colors ---
-            // Slate-800 is default
             const colors = ['#1e293b', '#ef4444', '#f97316', '#f59e0b', '#22c55e', '#14b8a6', '#3b82f6', '#6366f1', '#a855f7', '#ec4899'];
 
             // --- Icons (Unified to Unicode Emoji) ---
@@ -552,6 +591,10 @@
             const imageUploadInput = ref(null);
             const cropperImgRef = ref(null);
 
+            // Custom Grid State
+            const showGridModal = ref(false);
+            const customGridConfig = ref({ rows: 10, cols: 10 });
+
             // Image Upload & Crop State
             const showCropper = ref(false);
             const tempImageSrc = ref('');
@@ -562,6 +605,12 @@
             const AUTOSAVE_KEY = 'magic_origami_autosave_v1';
 
             const activePageCells = computed(() => pages.value[activePageId.value - 1].cells);
+            
+            // Computed for UI style of custom button
+            const isCustomGridActive = computed(() => {
+                // If current config matches none of the preset labels, it's custom
+                return !gridOptions.some(opt => opt.label === currentGrid.value.label);
+            });
 
             // --- Actions ---
 
@@ -570,8 +619,7 @@
 
                 const hasContent = pages.value.some(p => p.cells.some(c => c.content !== ''));
                 if (hasContent) {
-                    alert("若要切換網格設定請清除內容後再切換。");
-                    return;
+                    if(!confirm("切換網格設定將會清空您目前的設計，確定要繼續嗎？")) return;
                 }
 
                 currentGrid.value = conf;
@@ -587,6 +635,43 @@
                 viewMode.value = 'overview';
             };
 
+            // Custom Grid Logic
+            const openCustomGridModal = () => {
+                const hasContent = pages.value.some(p => p.cells.some(c => c.content !== ''));
+                if (hasContent) {
+                    if(!confirm("設定自訂網格將會清空您目前的設計，確定要繼續嗎？")) return;
+                }
+                
+                // Set initial values from current grid
+                customGridConfig.value.rows = currentGrid.value.rows;
+                customGridConfig.value.cols = currentGrid.value.cols;
+                showGridModal.value = true;
+            };
+
+            const confirmCustomGrid = () => {
+                const r = Math.max(1, Math.min(20, parseInt(customGridConfig.value.rows) || 4));
+                const c = Math.max(1, Math.min(20, parseInt(customGridConfig.value.cols) || 4));
+                
+                const customConf = {
+                    label: `${r}x${c}`,
+                    rows: r,
+                    cols: c
+                };
+
+                currentGrid.value = customConf;
+                const totalCells = r * c;
+                
+                pages.value = [
+                    { id: 1, cells: createPageCells(0, r, c) },
+                    { id: 2, cells: createPageCells(totalCells, r, c) }
+                ];
+
+                selectedCellIndex.value = null;
+                activePageId.value = 1;
+                viewMode.value = 'overview';
+                showGridModal.value = false;
+            };
+
             const clearAllContent = () => {
                 const hasContent = pages.value.some(p => p.cells.some(c => c.content !== ''));
                 if (!hasContent) {
@@ -1065,7 +1150,13 @@
                 cancelCrop,
                 confirmCrop,
                 applyCustomImageToCell,
-                removeCustomImage
+                removeCustomImage,
+                // Custom Grid
+                showGridModal,
+                customGridConfig,
+                openCustomGridModal,
+                confirmCustomGrid,
+                isCustomGridActive
             };
         }
     }).mount('#app');