Update index.html

index.html

@@ -307,7 +307,7 @@
                         </div>
                         <!-- Background Color (Macaron) -->
                         <div>
-                            <label class="block text-sm font-bold text-slate-700 mb-2">2. 背景填充 (淺色系)</label>
+                            <label class="block text-sm font-bold text-slate-700 mb-2">2. 背景網底 (淺色系)</label>
                             <div class="flex flex-wrap gap-2">
                                 <button 
                                     v-for="bgColor in bgColors" 
@@ -565,9 +565,13 @@
                                     v-for="(cell, index) in pages[pageId-1].cells" 
                                     :key="cell.id"
                                     class="grid-cell relative border border-slate-300"
-                                    :style="{ backgroundColor: cell.bgColor }"
                                 >
-                                    <div class="rotation-wrapper" :style="{ transform: `rotate(${cell.rotation}deg)` }">
+                                    <!-- Inner Background (Highlight) -->
+                                    <div class="absolute inset-0 flex items-center justify-center pointer-events-none z-0">
+                                        <div v-if="cell.bgColor !== '#ffffff'" class="w-[85%] h-[85%] rounded-lg transition-colors" :style="{ backgroundColor: cell.bgColor }"></div>
+                                    </div>
+
+                                    <div class="rotation-wrapper relative z-10" :style="{ transform: `rotate(${cell.rotation}deg)` }">
                                         <span v-if="cell.type === 'text'" class="font-bold cell-text" :class="getOverviewFontSizeClass(cell.content)" :style="{ color: cell.color }">{{ cell.content }}</span>
                                         
                                         <!-- Render Icon: Emoji -->
@@ -613,15 +617,19 @@
                                 @click="handleCellClick(index, $event)"
                                 class="grid-cell relative border border-slate-300 cursor-pointer hover:bg-slate-50 select-none"
                                 :class="{ 'ring-4 ring-indigo-500 ring-inset z-20': selectedCellIndices.has(index) }"
-                                :style="{ backgroundColor: cell.bgColor }"
                             >
+                                <!-- Inner Background (Highlight) -->
+                                <div class="absolute inset-0 flex items-center justify-center pointer-events-none z-0">
+                                    <div v-if="cell.bgColor !== '#ffffff'" class="w-[85%] h-[85%] rounded-lg transition-colors" :style="{ backgroundColor: cell.bgColor }"></div>
+                                </div>
+
                                 <!-- Selection Order Badge (Only visible in Multi-Select Mode when selected) -->
                                 <div v-if="isMultiSelectMode && selectedCellIndices.has(index)" 
                                      class="absolute top-1 right-1 w-6 h-6 bg-indigo-600 text-white rounded-full flex items-center justify-center text-xs font-bold z-30 shadow-sm border-2 border-white">
                                     {{ getSelectionOrder(index) }}
                                 </div>
 
-                                <div class="rotation-wrapper pointer-events-none" :style="{ transform: `rotate(${cell.rotation}deg)` }">
+                                <div class="rotation-wrapper pointer-events-none relative z-10" :style="{ transform: `rotate(${cell.rotation}deg)` }">
                                     <span v-if="cell.type === 'text'" class="font-bold cell-text block" :class="getFontSizeClass(cell.content)" :style="{ color: cell.color }">
                                         {{ cell.content }}
                                     </span>
@@ -1437,9 +1445,16 @@
                         contentHtml = `<img src="${cell.content}" style="width: 80%; height: 80%; object-fit: contain;">`;
                     }
 
+                    // New: Inner Highlight for PDF Export
+                    let innerBg = '';
+                    if (cell.bgColor && cell.bgColor !== '#ffffff') {
+                        innerBg = `<div style="position: absolute; top: 7.5%; left: 7.5%; width: 85%; height: 85%; background-color: ${cell.bgColor}; border-radius: 8px; z-index: 0;"></div>`;
+                    }
+
                     gridHtml += `
-                        <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);">
+                        <div class="grid-cell" style="position: relative; ${borderStyle} background-color: transparent; display: flex; align-items: center; justify-content: center; overflow: hidden;">
+                            ${innerBg}
+                            <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform: rotate(${cell.rotation}deg); z-index: 1; position: relative;">
                                 ${contentHtml}
                             </div>
                         </div>
@@ -1550,23 +1565,28 @@
                             const x = c * cellW;
                             const y = r * cellH;
 
-                            // 1. Background Rect
+                            // 1. Highlight (Inner Background)
                             if (cell.bgColor !== '#ffffff') {
-                                slide.addShape(pres.ShapeType.rect, {
-                                    x: x, y: y, w: cellW, h: cellH,
+                                const padW = cellW * 0.075; // 7.5% padding
+                                const padH = cellH * 0.075;
+                                slide.addShape(pres.ShapeType.roundRect, {
+                                    x: x + padW, y: y + padH, 
+                                    w: cellW * 0.85, h: cellH * 0.85,
                                     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 }
+                                    line: { type: 'none' }, // No border on highlight
+                                    rectRadius: 0.2
                                 });
                             }
 
-                            // 2. Content
+                            // 2. Grid Border (Always draw transparent rect with border)
+                            // This ensures grid lines are visible and clean
+                            slide.addShape(pres.ShapeType.rect, {
+                                x: x, y: y, w: cellW, h: cellH,
+                                fill: { type: 'none' },
+                                line: { color: 'CCCCCC', width: 0.5 }
+                            });
+
+                            // 3. Content
                             if (cell.content) {
                                 if (cell.type === 'text' || cell.type === 'icon') {
                                     let content = cell.content;