Hugging Face's logo

Spaces:
Lashtw
/
MagicA4
Running

App Files Community
Lashtw commited on
Commit
c6abd24
·
verified ·
1 Parent(s): ee3fc2d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +583 -19
index.html CHANGED
@@ -1,19 +1,583 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="zh-TW">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Magic Origami Designer | 魔法摺紙設計師 (雙頁版)</title>
7
+
8
+ <!-- Tailwind CSS -->
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+
11
+ <!-- Vue.js 3 -->
12
+ <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
13
+
14
+ <!-- PDF Generation Libraries -->
15
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
16
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
17
+
18
+ <!-- Google Fonts -->
19
+ <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;700&display=swap" rel="stylesheet">
20
+
21
+ <style>
22
+ body {
23
+ font-family: 'Noto Sans TC', sans-serif;
24
+ background-color: #f1f5f9;
25
+ }
26
+
27
+ .grid-cell {
28
+ display: flex;
29
+ align-items: center;
30
+ justify-content: center;
31
+ overflow: hidden;
32
+ }
33
+
34
+ .rotation-wrapper {
35
+ width: 100%;
36
+ height: 100%;
37
+ display: flex;
38
+ align-items: center;
39
+ justify-content: center;
40
+ aspect-ratio: 1 / 1;
41
+ transition: transform 0.3s ease-in-out;
42
+ }
43
+
44
+ /* 讓文字在編輯模式下也看起來很置中 */
45
+ .cell-text {
46
+ line-height: 1;
47
+ display: block;
48
+ padding-bottom: 0.1em; /* 視覺微調 */
49
+ }
50
+
51
+ /* 頁面切換特效 */
52
+ .page-transition-enter-active,
53
+ .page-transition-leave-active {
54
+ transition: opacity 0.3s ease;
55
+ }
56
+ .page-transition-enter-from,
57
+ .page-transition-leave-to {
58
+ opacity: 0;
59
+ }
60
+
61
+ /* 預覽模式下的頁面縮放特效 */
62
+ .preview-page {
63
+ transform-origin: center center;
64
+ cursor: pointer;
65
+ transition: transform 0.2s, box-shadow 0.2s;
66
+ }
67
+ .preview-page:hover {
68
+ transform: scale(1.05);
69
+ box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
70
+ ring: 4px solid #6366f1; /* indigo-500 */
71
+ z-index: 10;
72
+ }
73
+
74
+ /* PDF 生成時的隱藏容器 */
75
+ #pdf-generator-container {
76
+ position: absolute;
77
+ top: -9999px;
78
+ left: -9999px;
79
+ }
80
+
81
+ /* 隱藏滾動條但保留功能 (Chromium) */
82
+ .no-scrollbar::-webkit-scrollbar {
83
+ display: none;
84
+ }
85
+ .no-scrollbar {
86
+ -ms-overflow-style: none;
87
+ scrollbar-width: none;
88
+ }
89
+ </style>
90
+ </head>
91
+ <body class="h-screen overflow-hidden text-slate-800">
92
+
93
+ <div id="app" class="h-full flex flex-col md:flex-row">
94
+
95
+ <!-- =======================
96
+ LEFT PANEL: Controls
97
+ ======================= -->
98
+ <div class="w-full md:w-1/3 lg:w-1/4 bg-white border-r border-slate-200 flex flex-col h-full shadow-lg z-20">
99
+
100
+ <!-- Header -->
101
+ <div class="p-6 border-b border-slate-100 bg-slate-50">
102
+ <h1 class="text-2xl font-bold text-indigo-600 flex items-center gap-2">
103
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
104
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.384-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z" />
105
+ </svg>
106
+ 魔法摺紙設計
107
+ </h1>
108
+
109
+ <!-- Page Navigator in Header -->
110
+ <div class="mt-4 flex bg-slate-200 p-1 rounded-lg">
111
+ <button
112
+ @click="viewMode = 'overview'"
113
+ class="flex-1 py-1 text-sm font-bold rounded-md transition-all"
114
+ :class="viewMode === 'overview' ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'"
115
+ >
116
+ 雙頁全覽
117
+ </button>
118
+ <button
119
+ v-for="pageId in [1, 2]"
120
+ :key="pageId"
121
+ @click="switchToPage(pageId)"
122
+ class="flex-1 py-1 text-sm font-bold rounded-md transition-all ml-1"
123
+ :class="(viewMode === 'edit' && activePageId === pageId) ? 'bg-white text-indigo-600 shadow-sm' : 'text-slate-500 hover:text-slate-700'"
124
+ >
125
+ 第 {{ pageId }} 頁
126
+ </button>
127
+ </div>
128
+ </div>
129
+
130
+ <!-- Scrollable Content -->
131
+ <div class="flex-1 overflow-y-auto p-6 space-y-8">
132
+
133
+ <!-- Instruction -->
134
+ <div class="bg-indigo-50 p-4 rounded-lg border border-indigo-100 text-sm text-indigo-800">
135
+ <h3 class="font-bold mb-2">💡 操作說明：</h3>
136
+ <ul class="list-disc list-inside space-y-1">
137
+ <li v-if="viewMode === 'overview'"><strong>點擊頁面：</strong>進入該頁編輯模式</li>
138
+ <li v-else><strong>目前編輯：</strong>第 {{ activePageId }} 頁</li>
139
+ <li><strong>點擊格子：</strong>選取編輯</li>
140
+ <li><strong>再次點擊：</strong>旋轉 90°</li>
141
+ </ul>
142
+ </div>
143
+
144
+ <!-- Editing Controls (Only visible in Edit Mode) -->
145
+ <div v-if="viewMode === 'edit'" class="space-y-8 animate-fade-in">
146
+ <!-- Text Input -->
147
+ <div>
148
+ <label class="block text-sm font-bold text-slate-700 mb-2">1. 文字輸入</label>
149
+ <input
150
+ ref="textInputRef"
151
+ type="text"
152
+ v-model="inputBuffer"
153
+ @input="updateSelectedCellText"
154
+ placeholder="先點選右側格子..."
155
+ maxlength="1"
156
+ :disabled="selectedCellIndex === null"
157
+ class="w-full text-center text-2xl p-3 border-2 rounded-lg focus:outline-none focus:ring-2 transition-all"
158
+ :class="selectedCellIndex === null ? 'bg-slate-100 border-slate-200 cursor-not-allowed' : 'bg-white border-indigo-300 focus:border-indigo-500 focus:ring-indigo-200'"
159
+ >
160
+ </div>
161
+
162
+ <!-- Icon Picker -->
163
+ <div>
164
+ <label class="block text-sm font-bold text-slate-700 mb-3">2. 選擇圖示</label>
165
+ <div class="grid grid-cols-4 gap-2 max-h-60 overflow-y-auto p-1 custom-scrollbar">
166
+ <button
167
+ v-for="(iconPath, name) in icons"
168
+ :key="name"
169
+ @click="applyIconToCell(name)"
170
+ :disabled="selectedCellIndex === null"
171
+ class="aspect-square flex items-center justify-center rounded-lg border hover:bg-indigo-50 active:scale-95 transition-all"
172
+ :class="selectedCellIndex === null ? 'border-slate-200 text-slate-300 cursor-not-allowed' : 'border-slate-300 text-slate-600 hover:border-indigo-400 hover:text-indigo-600 cursor-pointer'"
173
+ :title="name"
174
+ >
175
+ <svg viewBox="0 0 24 24" class="w-8 h-8 fill-current">
176
+ <path :d="iconPath"></path>
177
+ </svg>
178
+ </button>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Cell Info -->
183
+ <div v-if="selectedCellIndex !== null" class="bg-slate-100 p-4 rounded-lg flex justify-between items-center">
184
+ <div>
185
+ <span class="text-xs font-bold text-slate-500 uppercase">角度</span>
186
+ <span class="text-lg font-mono font-bold text-slate-700 ml-2">{{ activePageCells[selectedCellIndex].rotation }}°</span>
187
+ </div>
188
+ <button @click="rotateCurrentCell" class="px-3 py-1 bg-white border border-slate-300 rounded shadow-sm text-sm">
189
+ 手動旋轉
190
+ </button>
191
+ </div>
192
+
193
+ <div>
194
+ <button
195
+ @click="clearCurrentCell"
196
+ :disabled="selectedCellIndex === null"
197
+ class="w-full py-2 text-sm text-red-500 border border-red-200 rounded hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed"
198
+ >
199
+ 清除內容
200
+ </button>
201
+ </div>
202
+ </div>
203
+
204
+ <div v-else class="text-center text-slate-400 py-10">
205
+ <p>請從右側點擊任一頁面<br>開始設計</p>
206
+ </div>
207
+
208
+ </div>
209
+
210
+ <!-- Footer Action -->
211
+ <div class="p-6 border-t border-slate-200 bg-slate-50">
212
+ <button
213
+ @click="exportPDF"
214
+ :disabled="isGenerating"
215
+ 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"
216
+ >
217
+ <span v-if="!isGenerating">
218
+ <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
219
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
220
+ </svg>
221
+ 下載雙頁 PDF
222
+ </span>
223
+ <span v-else>
224
+ 處理中...
225
+ </span>
226
+ </button>
227
+ </div>
228
+ </div>
229
+
230
+ <!-- =======================
231
+ RIGHT PANEL: Workspace
232
+ ======================= -->
233
+ <div class="flex-1 bg-slate-200 overflow-auto relative no-scrollbar">
234
+
235
+ <!-- Workspace Centerer (Changed to flex-col to stack credits below) -->
236
+ <div class="min-h-full flex flex-col items-center justify-center p-4 md:p-8 relative z-10">
237
+
238
+ <!-- OVERVIEW MODE: Side by Side -->
239
+ <div v-if="viewMode === 'overview'" class="flex flex-row flex-wrap gap-8 justify-center items-center">
240
+ <div v-for="pageId in [1, 2]" :key="pageId" class="flex flex-col items-center">
241
+ <h2 class="text-lg font-bold text-slate-600 mb-2">第 {{ pageId }} 頁</h2>
242
+ <!-- Scaled Down Preview: Width ~120mm to fit side-by-side on laptop screens -->
243
+ <div
244
+ class="bg-white shadow-xl preview-page relative"
245
+ style="width: 120mm; height: 170mm;"
246
+ @click="switchToPage(pageId)"
247
+ >
248
+ <!-- Grid Component (Read Only in Overview) -->
249
+ <div class="grid grid-cols-6 grid-rows-8 gap-0 border border-slate-200 w-full h-full pointer-events-none">
250
+ <div
251
+ v-for="(cell, index) in pages[pageId-1].cells"
252
+ :key="cell.id"
253
+ class="grid-cell relative border border-slate-300"
254
+ >
255
+ <div class="rotation-wrapper" :style="{ transform: `rotate(${cell.rotation}deg)` }">
256
+ <span v-if="cell.type === 'text'" class="text-2xl font-bold text-slate-800 cell-text">{{ cell.content }}</span>
257
+ <svg v-if="cell.type === 'icon'" viewBox="0 0 24 24" class="w-3/5 h-3/5 fill-slate-800"><path :d="icons[cell.content]"></path></svg>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <!-- EDIT MODE: Show Single Active Page -->
266
+ <div v-else class="relative animate-fade-in">
267
+ <!-- Back to Overview Button (Floating) -->
268
+ <button @click="viewMode = 'overview'" class="absolute -top-10 left-0 text-slate-500 hover:text-indigo-600 font-bold text-sm flex items-center gap-1">
269
+ ← 回到全覽
270
+ </button>
271
+
272
+ <!-- Active Page Canvas -->
273
+ <div
274
+ :id="`edit-canvas-${activePageId}`"
275
+ class="bg-white shadow-2xl relative"
276
+ style="width: 210mm; height: 297mm; padding: 0mm;"
277
+ >
278
+ <!-- A4 Watermark -->
279
+ <div class="absolute bottom-1 right-2 text-slate-200 text-[10px] font-sans select-none z-0">
280
+ Page {{ activePageId }} - Magic Origami
281
+ </div>
282
+
283
+ <div class="grid grid-cols-6 grid-rows-8 gap-0 border border-slate-200 w-full h-full">
284
+ <div
285
+ v-for="(cell, index) in activePageCells"
286
+ :key="cell.id"
287
+ @click="handleCellClick(index)"
288
+ class="grid-cell relative border border-slate-300 cursor-pointer hover:bg-slate-50 select-none"
289
+ :class="{ 'ring-4 ring-indigo-500 ring-inset z-20': selectedCellIndex === index }"
290
+ >
291
+ <span class="absolute top-1 left-1 text-[8px] text-slate-200 pointer-events-none z-10">
292
+ {{ Math.floor(index / 6) + 1 }}-{{ (index % 6) + 1 }}
293
+ </span>
294
+ <div class="rotation-wrapper pointer-events-none" :style="{ transform: `rotate(${cell.rotation}deg)` }">
295
+ <span v-if="cell.type === 'text'" class="text-4xl md:text-5xl font-bold text-slate-800 cell-text block">
296
+ {{ cell.content }}
297
+ </span>
298
+ <svg v-if="cell.type === 'icon'" viewBox="0 0 24 24" class="w-3/5 h-3/5 fill-slate-800"><path :d="icons[cell.content]"></path></svg>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+
305
+ <!-- Credits / Watermark (Moved Here) -->
306
+ <!-- Use 'mt-8' to add margin top, preventing overlap with the canvas -->
307
+ <div class="mt-8 text-center w-full max-w-2xl">
308
+ <div class="text-xs text-slate-400 font-sans space-y-1 bg-slate-100/50 p-4 rounded-lg inline-block text-left border border-slate-200">
309
+ <p>靈感來源：台北市興雅國中 吳如皓老師 《摺紙中的數學魔術》</p>
310
+ <p>程式設計：新竹縣精華國中 藍星宇老師</p>
311
+ <p>教育社群：
312
+ <a href="https://www.facebook.com/groups/1554372228718393" target="_blank" class="text-indigo-500 hover:text-indigo-700 font-bold hover:underline">萬物皆數</a>、
313
+ <a href="https://www.facebook.com/groups/108923286120994" target="_blank" class="text-indigo-500 hover:text-indigo-700 font-bold hover:underline">藝數摺學</a>
314
+ </p>
315
+ </div>
316
+ </div>
317
+
318
+ </div>
319
+ </div>
320
+
321
+ <!-- Hidden Container for PDF Rendering -->
322
+ <div id="pdf-generator-container">
323
+ <!-- This will be populated dynamically -->
324
+ </div>
325
+
326
+ </div>
327
+
328
+ <script>
329
+ const { createApp, ref, computed, nextTick } = Vue;
330
+ const { jsPDF } = window.jspdf;
331
+
332
+ createApp({
333
+ setup() {
334
+ // --- State ---
335
+ // Two pages, each with 48 cells
336
+ const createPageCells = (pageOffset) => Array.from({ length: 48 }, (_, i) => ({
337
+ id: pageOffset + i,
338
+ type: 'text',
339
+ content: '',
340
+ rotation: 0
341
+ }));
342
+
343
+ const pages = ref([
344
+ { id: 1, cells: createPageCells(0) },
345
+ { id: 2, cells: createPageCells(48) }
346
+ ]);
347
+
348
+ const viewMode = ref('overview'); // 'overview' | 'edit'
349
+ const activePageId = ref(1);
350
+ const selectedCellIndex = ref(null);
351
+ const inputBuffer = ref('');
352
+ const isGenerating = ref(false);
353
+ const textInputRef = ref(null);
354
+
355
+ // --- Computed ---
356
+ const activePageCells = computed(() => pages.value[activePageId.value - 1].cells);
357
+
358
+ // --- Icons ---
359
+ const icons = {
360
+ '愛心': 'M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z',
361
+ '星星': 'M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z',
362
+ '勝利': 'M16.5 13c-.55 0-1 .45-1 1v5h-1v-5c0-.55-.45-1-1-1s-1 .45-1 1v5h-1v-5c0-.55-.45-1-1-1s-1 .45-1 1v2.5c0 .55-.45 1-1 1s-1-.45-1-1V5.63c0-1-.7-1.63-1.6-1.63-.88 0-1.6.82-1.6 1.73V13h-1V5.73C5.3 3.66 7.03 2 9.1 2c1.77 0 3.32 1.22 3.8 2.87.66-1.07 1.8-1.87 3.1-1.87 2.21 0 4 1.79 4 4v6c0 .55-.45 1-1 1s-1-.45-1-1v-1h-1.5v1z M21 16c0 2.97-2.16 5.43-5 5.91V22h-8v-2.09c-2.84-.48-5-2.94-5-5.91h2c0 2.76 2.24 5 5 5s5-2.24 5-5h2z',
363
+ '獎盃': 'M20.2 6.5C19.7 3.9 17.5 2 15 2H9C6.5 2 4.3 3.9 3.8 6.5L3 11c-.5 2.5 1.2 5 3.8 5.8V17c0 2.2 1.8 4 4 4h2.4c2.2 0 4-1.8 4-4v-.2c2.6-.8 4.3-3.3 3.8-5.8l-.8-4.5zM6.5 10.6l.6-3.8C7.4 4.8 9.1 4 9 4h6c-.1 0 1.6.8 1.9 2.8l.6 3.8c.2 1.3-.8 2.4-2.1 2.4h-9c-1.3 0-2.3-1.1-2.1-2.4z M17 17c0 1.1-.9 2-2 2H9c-1.1 0-2-.9-2-2v-1h10v1z M15 22H9v1h6v-1z',
364
+ '笑臉': 'M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z',
365
+ '皇冠': 'M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11h-14zm14 2H5v1c0 .55.45 1 1 1h12c.55 0 1-.45 1-1v-1z',
366
+ '鑽石': 'M19 3H5L2 9l10 12L22 9l-3-6zM9.62 10l1.5-5h1.76l1.5 5H9.62zM12 18.5L6.37 11h11.26L12 18.5z',
367
+ '燈泡': 'M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z',
368
+ '太陽': 'M6.76 4.84l-1.8-1.79-1.41 1.41 1.79 1.79 1.42-1.41zM4 10.5H1v2h3v-2zm9-9.95h-2V3.5h2V.55zm7.45 3.91l-1.41-1.41-1.79 1.79 1.41 1.41 1.79-1.79zm-3.21 13.7l1.79 1.8 1.41-1.41-1.8-1.79-1.4 1.4zM20 10.5v2h3v-2h-3zm-8-5c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm-1 16.95h2V19.5h-2v2.95zm-7.45-3.91l1.41 1.41 1.79-1.8-1.41-1.41-1.79 1.8z',
369
+ '月亮': 'M12 2C9.55 2 7.31 2.91 5.61 4.39 8.27 5.1 10.26 7.42 10.26 10.26c0 3.31-2.69 6-6 6-1.07 0-2.07-.26-2.96-.71C2.92 18.25 5.28 20 8 20c4.42 0 8-3.58 8-8s-3.58-8-8-8z',
370
+ '雲朵': 'M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z',
371
+ '音符': 'M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z',
372
+ '飛機': 'M21 16v-2l-8-5V3.5c0-.83-.67-1.5-1.5-1.5S10 2.67 10 3.5V9l-8 5v2l8-2.5V19l-2 1.5V22l3.5-1 3.5 1v-1.5L13 19v-5.5l8 2.5z',
373
+ '花朵': 'M12 2c-3.31 0-6 2.69-6 6 0 1.95.95 3.67 2.41 4.77C6.95 13.87 6 15.82 6 18c0 3.31 2.69 6 6 6s6-2.69 6-6c0-2.18-.95-4.13-2.41-5.23C17.05 11.67 18 9.95 18 8c0-3.31-2.69-6-6-6zm0 10c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z',
374
+ '樹木': 'M12 2L2 12h3v8h6v-6h2v6h6v-8h3L12 2z',
375
+ '禮物': 'M20 6h-2.18c.11-.31.18-.65.18-1 0-1.66-1.34-3-3-3-1.05 0-1.96.54-2.5 1.35l-.5.67-.5-.68C10.96 2.54 10.05 2 9 2 7.34 2 6 3.34 6 5c0 .35.07.69.18 1H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-5-2c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zM9 4c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm11 15H4v-2h16v2zm0-5H4V8h5.08L7 10.83 8.62 12 11 8.76 13.38 12 15 10.83 12.92 8H20v6z'
376
+ };
377
+
378
+ // --- Actions ---
379
+
380
+ const switchToPage = (pageId) => {
381
+ activePageId.value = pageId;
382
+ viewMode.value = 'edit';
383
+ selectedCellIndex.value = null; // Reset selection on page switch
384
+ inputBuffer.value = '';
385
+ };
386
+
387
+ const handleCellClick = (index) => {
388
+ if (selectedCellIndex.value !== index) {
389
+ selectedCellIndex.value = index;
390
+ const cell = activePageCells.value[index];
391
+ inputBuffer.value = (cell.type === 'text') ? cell.content : '';
392
+ nextTick(() => { if (textInputRef.value) textInputRef.value.focus(); });
393
+ } else {
394
+ rotateCurrentCell();
395
+ }
396
+ };
397
+
398
+ const rotateCurrentCell = () => {
399
+ if (selectedCellIndex.value === null) return;
400
+ const cell = activePageCells.value[selectedCellIndex.value];
401
+ cell.rotation = (cell.rotation + 90) % 360;
402
+ };
403
+
404
+ const updateSelectedCellText = () => {
405
+ if (selectedCellIndex.value === null) return;
406
+ const cell = activePageCells.value[selectedCellIndex.value];
407
+ cell.type = 'text';
408
+ cell.content = inputBuffer.value;
409
+ };
410
+
411
+ const applyIconToCell = (iconName) => {
412
+ if (selectedCellIndex.value === null) return;
413
+ const cell = activePageCells.value[selectedCellIndex.value];
414
+ cell.type = 'icon';
415
+ cell.content = iconName;
416
+ inputBuffer.value = '';
417
+ };
418
+
419
+ const clearCurrentCell = () => {
420
+ if (selectedCellIndex.value === null) return;
421
+ const cell = activePageCells.value[selectedCellIndex.value];
422
+ cell.content = '';
423
+ cell.type = 'text';
424
+ cell.rotation = 0;
425
+ inputBuffer.value = '';
426
+ };
427
+
428
+ // --- Helper: Render a single page to canvas ---
429
+ const renderPageToCanvas = async (pageId) => {
430
+ const pageData = pages.value[pageId - 1];
431
+
432
+ // Create a temporary DOM element for rendering this specific page off-screen
433
+ // We construct the HTML manually to match the structure, but ensuring it's "clean" for export
434
+ const container = document.getElementById('pdf-generator-container');
435
+ container.innerHTML = ''; // Clear previous
436
+
437
+ const wrapper = document.createElement('div');
438
+ wrapper.style.width = '210mm';
439
+ wrapper.style.height = '297mm';
440
+ wrapper.style.backgroundColor = 'white';
441
+ wrapper.style.position = 'relative';
442
+ // We don't use grid gap to avoid border doubling issues
443
+
444
+ // Build the grid HTML string
445
+ let gridHtml = `<div style="display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(8, 1fr); width: 100%; height: 100%; border: 1px solid #e2e8f0;">`;
446
+
447
+ pageData.cells.forEach((cell, idx) => {
448
+ // Icon Logic
449
+ let contentHtml = '';
450
+ if (cell.type === 'text') {
451
+ // Important: Use a span for text
452
+ contentHtml = `<span class="export-text" style="font-size: 40px; font-weight: bold; color: #1e293b; font-family: 'Noto Sans TC', sans-serif;">${cell.content}</span>`;
453
+ } else if (cell.type === 'icon') {
454
+ contentHtml = `<svg viewBox="0 0 24 24" style="width: 60%; height: 60%; fill: #1e293b;"><path d="${icons[cell.content]}"></path></svg>`;
455
+ }
456
+
457
+ // Grid Coordinate
458
+ const coord = `${Math.floor(idx / 6) + 1}-${(idx % 6) + 1}`;
459
+
460
+ gridHtml += `
461
+ <div class="grid-cell" style="position: relative; border: 1px solid #cbd5e1; display: flex; align-items: center; justify-content: center; overflow: hidden;">
462
+ <span style="position: absolute; top: 4px; left: 4px; font-size: 8px; color: #e2e8f0;">${coord}</span>
463
+ <div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform: rotate(${cell.rotation}deg);">
464
+ ${contentHtml}
465
+ </div>
466
+ </div>
467
+ `;
468
+ });
469
+ gridHtml += `</div>`;
470
+
471
+ // Add watermark
472
+ gridHtml += `<div style="position: absolute; bottom: 5px; right: 10px; color: #e2e8f0; font-size: 10px; font-family: sans-serif;">Page ${pageId} - Magic Origami</div>`;
473
+
474
+ wrapper.innerHTML = gridHtml;
475
+ container.appendChild(wrapper);
476
+
477
+ // Generate Canvas
478
+ const canvas = await html2canvas(wrapper, {
479
+ scale: 3, // Lower scale slightly for performance with multiple pages, 3 is still high quality
480
+ useCORS: true,
481
+ backgroundColor: '#ffffff',
482
+ onclone: (clonedDoc) => {
483
+ // === The SVG Text Replacement Strategy ===
484
+ // Find all text elements in the CLONED document
485
+ const textElements = clonedDoc.querySelectorAll('.export-text');
486
+
487
+ textElements.forEach(el => {
488
+ const textContent = el.innerText;
489
+ if (!textContent) return;
490
+
491
+ // 1. Create an SVG element to replace the text span
492
+ const ns = "http://www.w3.org/2000/svg";
493
+ const svg = document.createElementNS(ns, "svg");
494
+ svg.setAttribute("width", "100%");
495
+ svg.setAttribute("height", "100%");
496
+ svg.setAttribute("viewBox", "0 0 100 100");
497
+ svg.style.position = "absolute";
498
+ svg.style.top = "0";
499
+ svg.style.left = "0";
500
+
501
+ // 2. Create the Text node inside SVG
502
+ const textNode = document.createElementNS(ns, "text");
503
+ textNode.setAttribute("x", "50%");
504
+ textNode.setAttribute("y", "50%");
505
+ textNode.setAttribute("dominant-baseline", "central"); // The magic attribute for vertical centering
506
+ textNode.setAttribute("text-anchor", "middle"); // Horizontal centering
507
+ textNode.setAttribute("fill", "#1e293b");
508
+ textNode.setAttribute("font-family", "'Noto Sans TC', sans-serif");
509
+ textNode.setAttribute("font-weight", "bold");
510
+ // Adjust font size relative to the viewBox (100x100).
511
+ // Since the cell is roughly square, 40-50 is a good percentage.
512
+ textNode.setAttribute("font-size", "45");
513
+ textNode.textContent = textContent;
514
+
515
+ svg.appendChild(textNode);
516
+
517
+ // 3. Replace the original HTML span with this SVG
518
+ const parent = el.parentNode;
519
+ parent.style.position = "relative"; // Ensure parent can hold absolute SVG
520
+ parent.innerHTML = ''; // Clear the HTML text
521
+ parent.appendChild(svg); // Inject the SVG
522
+ });
523
+ }
524
+ });
525
+
526
+ return canvas;
527
+ };
528
+
529
+ const exportPDF = async () => {
530
+ if (selectedCellIndex.value !== null) selectedCellIndex.value = null;
531
+ isGenerating.value = true;
532
+
533
+ try {
534
+ const pdf = new jsPDF('p', 'mm', 'a4');
535
+ const pdfWidth = 210;
536
+ const pdfHeight = 297;
537
+
538
+ // Render Page 1
539
+ const canvas1 = await renderPageToCanvas(1);
540
+ const imgData1 = canvas1.toDataURL('image/jpeg', 0.95);
541
+ pdf.addImage(imgData1, 'JPEG', 0, 0, pdfWidth, pdfHeight);
542
+
543
+ // Render Page 2
544
+ pdf.addPage();
545
+ const canvas2 = await renderPageToCanvas(2);
546
+ const imgData2 = canvas2.toDataURL('image/jpeg', 0.95);
547
+ pdf.addImage(imgData2, 'JPEG', 0, 0, pdfWidth, pdfHeight);
548
+
549
+ pdf.save('magic-origami-booklet.pdf');
550
+
551
+ } catch (err) {
552
+ console.error(err);
553
+ alert("PDF 生成發生錯誤");
554
+ } finally {
555
+ isGenerating.value = false;
556
+ // Clean up temp container
557
+ document.getElementById('pdf-generator-container').innerHTML = '';
558
+ }
559
+ };
560
+
561
+ return {
562
+ pages,
563
+ viewMode,
564
+ activePageId,
565
+ activePageCells,
566
+ selectedCellIndex,
567
+ inputBuffer,
568
+ icons,
569
+ textInputRef,
570
+ isGenerating,
571
+ switchToPage,
572
+ handleCellClick,
573
+ rotateCurrentCell,
574
+ updateSelectedCellText,
575
+ applyIconToCell,
576
+ clearCurrentCell,
577
+ exportPDF
578
+ };
579
+ }
580
+ }).mount('#app');
581
+ </script>
582
+ </body>
583
+ </html>