Hugging Face's logo

Spaces:
Lashtw
/
MagicA4
Running

App Files Community
Lashtw commited on
Commit
69e728a
·
verified ·
1 Parent(s): f43bfce

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +121 -18
index.html CHANGED
@@ -176,17 +176,35 @@
176
  </button>
177
  </div>
178
 
179
- <!-- Template -->
180
  <div>
181
  <label class="block text-sm font-bold text-slate-700 mb-2">🎁 快速模板</label>
182
- <button
183
- @click="applyTemplate('lucky')"
184
- class="w-full py-3 bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 text-white font-bold rounded-lg shadow-md hover:shadow-lg active:scale-95 transition-all flex items-center justify-center gap-2"
185
- >
186
- <span class="text-xl leading-none">🍀</span>
187
- <span class="text-sm">套用：[幸運草與一句話]</span>
188
- </button>
189
- <p class="text-xs text-slate-400 mt-2">提示：套用後會自動切換為 6x8 網格並填入內容。</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
190
  </div>
191
 
192
  <!-- Project Management -->
@@ -638,10 +656,11 @@
638
  // --- Configuration ---
639
  const gridOptions = [
640
  { label: '4x4', rows: 4, cols: 4 },
 
641
  { label: '6x8', rows: 8, cols: 6 },
642
  { label: '8x8', rows: 8, cols: 8 }
643
  ];
644
- const currentGrid = ref(gridOptions[1]); // Default 6x8
645
 
646
  // --- Colors ---
647
  const colors = ['#1e293b', '#ef4444', '#f97316', '#f59e0b', '#22c55e', '#14b8a6', '#3b82f6', '#6366f1', '#a855f7', '#ec4899'];
@@ -1010,15 +1029,14 @@
1010
  }
1011
 
1012
  try {
1013
- const targetConf = gridOptions[1]; // 6x8
1014
- currentGrid.value = targetConf;
1015
-
1016
- pages.value = [
1017
- { id: 1, cells: createPageCells(0, 8, 6) },
1018
- { id: 2, cells: createPageCells(48, 8, 6) }
1019
- ];
1020
-
1021
  if (templateId === 'lucky') {
 
 
 
 
 
 
 
1022
  // Page 1
1023
  setCell(0, 1, 3, 'text', '最', 180);
1024
  setCell(0, 1, 4, 'text', '是', 180);
@@ -1047,6 +1065,91 @@
1047
  setCell(1, 7, 6, 'icon', '幸運草', 0, '#22c55e');
1048
  setCell(1, 8, 6, 'text', '海', 180);
1049
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1050
 
1051
  clearSelection();
1052
  activePageId.value = 1;
 
176
  </button>
177
  </div>
178
 
179
+ <!-- Templates -->
180
  <div>
181
  <label class="block text-sm font-bold text-slate-700 mb-2">🎁 快速模板</label>
182
+ <div class="space-y-2">
183
+ <!-- Lucky Clover -->
184
+ <button
185
+ @click="applyTemplate('lucky')"
186
+ class="w-full py-2.5 bg-gradient-to-r from-emerald-500 to-teal-600 hover:from-emerald-600 hover:to-teal-700 text-white font-bold rounded-lg shadow-sm active:scale-95 transition-all flex items-center justify-center gap-2"
187
+ >
188
+ <span class="text-xl leading-none">🍀</span>
189
+ <span class="text-sm">幸運草與一句話 <span class="text-xs opacity-80 font-normal">(如皓老師分享)</span></span>
190
+ </button>
191
+
192
+ <div class="grid grid-cols-2 gap-2">
193
+ <button @click="applyTemplate('4x4')" class="py-2 bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 font-bold rounded-lg text-sm active:scale-95">
194
+ 4x4 範例
195
+ </button>
196
+ <button @click="applyTemplate('4x6')" class="py-2 bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 font-bold rounded-lg text-sm active:scale-95">
197
+ 4x6 範例 (單面)
198
+ </button>
199
+ <button @click="applyTemplate('6x8')" class="py-2 bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 font-bold rounded-lg text-sm active:scale-95">
200
+ 6x8 範例
201
+ </button>
202
+ <button @click="applyTemplate('8x8')" class="py-2 bg-white border border-slate-300 hover:bg-slate-50 text-slate-700 font-bold rounded-lg text-sm active:scale-95">
203
+ 8x8 範例
204
+ </button>
205
+ </div>
206
+ </div>
207
+ <p class="text-xs text-slate-400 mt-2">提示：套用模板會自動切換網格並覆蓋內容。</p>
208
  </div>
209
 
210
  <!-- Project Management -->
 
656
  // --- Configuration ---
657
  const gridOptions = [
658
  { label: '4x4', rows: 4, cols: 4 },
659
+ { label: '4x6', rows: 6, cols: 4 }, // Added 4x6 support
660
  { label: '6x8', rows: 8, cols: 6 },
661
  { label: '8x8', rows: 8, cols: 8 }
662
  ];
663
+ const currentGrid = ref(gridOptions[2]); // Default 6x8
664
 
665
  // --- Colors ---
666
  const colors = ['#1e293b', '#ef4444', '#f97316', '#f59e0b', '#22c55e', '#14b8a6', '#3b82f6', '#6366f1', '#a855f7', '#ec4899'];
 
1029
  }
1030
 
1031
  try {
 
 
 
 
 
 
 
 
1032
  if (templateId === 'lucky') {
1033
+ // Switch to 6x8 grid first
1034
+ currentGrid.value = gridOptions[2]; // 6x8 is index 2
1035
+ pages.value = [
1036
+ { id: 1, cells: createPageCells(0, 8, 6) },
1037
+ { id: 2, cells: createPageCells(48, 8, 6) }
1038
+ ];
1039
+
1040
  // Page 1
1041
  setCell(0, 1, 3, 'text', '最', 180);
1042
  setCell(0, 1, 4, 'text', '是', 180);
 
1065
  setCell(1, 7, 6, 'icon', '幸運草', 0, '#22c55e');
1066
  setCell(1, 8, 6, 'text', '海', 180);
1067
  }
1068
+ else if (templateId === '4x4') {
1069
+ currentGrid.value = gridOptions[0]; // 4x4
1070
+ pages.value = [
1071
+ { id: 1, cells: createPageCells(0, 4, 4) },
1072
+ { id: 2, cells: createPageCells(16, 4, 4) }
1073
+ ];
1074
+ // Page 1
1075
+ setCell(0, 1, 2, 'icon', '白圓', 0); setCell(0, 2, 2, 'icon', '白方', 0);
1076
+ setCell(0, 3, 1, 'icon', '白圓', 0); setCell(0, 3, 2, 'icon', '白方', 0);
1077
+ setCell(0, 4, 3, 'icon', '白圓', 0); setCell(0, 4, 4, 'icon', '白方', 0);
1078
+ // Page 2
1079
+ setCell(1, 1, 1, 'icon', '白圓', 0); setCell(1, 2, 1, 'icon', '白方', 0);
1080
+ setCell(1, 1, 3, 'text', 'B', 180); setCell(1, 1, 4, 'text', 'A', 180);
1081
+ setCell(1, 2, 3, 'text', 'B', 180); setCell(1, 2, 4, 'text', 'A', 180);
1082
+ setCell(1, 3, 1, 'text', 'B', 0); setCell(1, 3, 2, 'text', 'A', 0);
1083
+ setCell(1, 4, 1, 'text', 'B', 0); setCell(1, 4, 2, 'text', 'A', 0);
1084
+ }
1085
+ else if (templateId === '4x6') {
1086
+ currentGrid.value = gridOptions[1]; // 4x6
1087
+ pages.value = [
1088
+ { id: 1, cells: createPageCells(0, 6, 4) },
1089
+ { id: 2, cells: createPageCells(24, 6, 4) }
1090
+ ];
1091
+ // Page 1
1092
+ setCell(0, 1, 1, 'icon', '白方', 0); setCell(0, 1, 2, 'icon', '白方', 0);
1093
+ setCell(0, 2, 1, 'icon', '白圓', 0); setCell(0, 2, 4, 'icon', '白圓', 0);
1094
+ setCell(0, 3, 1, 'icon', '白圓', 0); setCell(0, 3, 4, 'icon', '白圓', 0);
1095
+ setCell(0, 4, 1, 'icon', '白圓', 0); setCell(0, 4, 4, 'icon', '白圓', 0);
1096
+ setCell(0, 5, 1, 'icon', '白方', 0); setCell(0, 5, 4, 'icon', '白方', 0);
1097
+ setCell(0, 6, 1, 'icon', '白方', 0); setCell(0, 6, 4, 'icon', '白方', 0);
1098
+ }
1099
+ else if (templateId === '6x8') {
1100
+ currentGrid.value = gridOptions[2]; // 6x8
1101
+ pages.value = [
1102
+ { id: 1, cells: createPageCells(0, 8, 6) },
1103
+ { id: 2, cells: createPageCells(48, 8, 6) }
1104
+ ];
1105
+ // Page 1
1106
+ setCell(0, 1, 1, 'icon', '猴子臉', 0); setCell(0, 1, 2, 'icon', '猴子臉', 0); setCell(0, 1, 5, 'icon', '猴子臉', 0); setCell(0, 1, 6, 'icon', '猴子臉', 0);
1107
+ setCell(0, 2, 1, 'icon', '猴子臉', 0); setCell(0, 2, 2, 'icon', '猴子臉', 0); setCell(0, 2, 5, 'icon', '猴子臉', 0); setCell(0, 2, 6, 'icon', '猴子臉', 0);
1108
+ setCell(0, 3, 1, 'icon', '猴子臉', 0); setCell(0, 3, 2, 'icon', '猴子臉', 0); setCell(0, 3, 5, 'icon', '猴子臉', 0); setCell(0, 3, 6, 'icon', '猴子臉', 0);
1109
+ setCell(0, 6, 1, 'icon', '馬臉', 0); setCell(0, 6, 2, 'icon', '馬臉', 0); setCell(0, 6, 5, 'icon', '馬臉', 0); setCell(0, 6, 6, 'icon', '馬臉', 0);
1110
+ setCell(0, 7, 1, 'icon', '馬臉', 0); setCell(0, 7, 2, 'icon', '馬臉', 0); setCell(0, 7, 5, 'icon', '馬臉', 0); setCell(0, 7, 6, 'icon', '馬臉', 0);
1111
+ setCell(0, 8, 1, 'icon', '馬臉', 0); setCell(0, 8, 2, 'icon', '馬臉', 0); setCell(0, 8, 5, 'icon', '馬臉', 0); setCell(0, 8, 6, 'icon', '馬臉', 0);
1112
+ // Page 2
1113
+ setCell(1, 1, 1, 'icon', '猴子', 0); setCell(1, 2, 1, 'icon', '猴子', 0); setCell(1, 3, 3, 'icon', '猴子', 0); setCell(1, 3, 6, 'icon', '猴子', 0);
1114
+ setCell(1, 4, 3, 'icon', '猴子', 0); setCell(1, 4, 6, 'icon', '猴子', 0); setCell(1, 5, 3, 'icon', '猴子', 0); setCell(1, 5, 6, 'icon', '猴子', 0);
1115
+ setCell(1, 6, 3, 'icon', '猴子', 0); setCell(1, 6, 6, 'icon', '猴子', 0); setCell(1, 7, 1, 'icon', '猴子', 0); setCell(1, 8, 1, 'icon', '猴子', 0);
1116
+ setCell(1, 1, 2, 'icon', '馬', 0); setCell(1, 1, 3, 'icon', '馬', 0); setCell(1, 1, 6, 'icon', '馬', 0);
1117
+ setCell(1, 2, 2, 'icon', '馬', 0); setCell(1, 2, 3, 'icon', '馬', 0); setCell(1, 2, 6, 'icon', '馬', 0);
1118
+ setCell(1, 7, 2, 'icon', '馬', 0); setCell(1, 7, 3, 'icon', '馬', 0); setCell(1, 7, 6, 'icon', '馬', 0);
1119
+ setCell(1, 8, 2, 'icon', '馬', 0); setCell(1, 8, 3, 'icon', '馬', 0); setCell(1, 8, 6, 'icon', '馬', 0);
1120
+ }
1121
+ else if (templateId === '8x8') {
1122
+ currentGrid.value = gridOptions[3]; // 8x8
1123
+ pages.value = [
1124
+ { id: 1, cells: createPageCells(0, 8, 8) },
1125
+ { id: 2, cells: createPageCells(64, 8, 8) }
1126
+ ];
1127
+ // Page 1
1128
+ setCell(0, 1, 7, 'icon', '太陽', 0); setCell(0, 2, 7, 'icon', '太陽', 0); setCell(0, 3, 7, 'icon', '太陽', 0); setCell(0, 4, 7, 'icon', '太陽', 0);
1129
+ setCell(0, 1, 8, 'icon', '星星', 270); setCell(0, 2, 8, 'icon', '星星', 270);
1130
+ setCell(0, 5, 7, 'icon', '星星', 90); setCell(0, 6, 7, 'icon', '星星', 90);
1131
+ setCell(0, 3, 1, 'text', '135', 90); setCell(0, 3, 2, 'text', '142', 90); setCell(0, 3, 3, 'text', '148', 90);
1132
+ setCell(0, 4, 1, 'text', '430', 90); setCell(0, 4, 2, 'text', '256', 90); setCell(0, 4, 3, 'text', '169', 90);
1133
+ setCell(0, 5, 1, 'text', '111', 90); setCell(0, 5, 2, 'text', '517', 90); setCell(0, 5, 3, 'text', '372', 90);
1134
+ setCell(0, 5, 4, 'text', '140', 270); setCell(0, 5, 5, 'text', '134', 270); setCell(0, 5, 6, 'text', '127', 270);
1135
+ setCell(0, 6, 1, 'text', '488', 90); setCell(0, 6, 2, 'text', '198', 90); setCell(0, 6, 3, 'text', '227', 90);
1136
+ setCell(0, 6, 4, 'text', '114', 270); setCell(0, 6, 5, 'text', '108', 270); setCell(0, 6, 6, 'text', '101', 270);
1137
+ // Page 2
1138
+ setCell(1, 5, 1, 'icon', '太陽', 0); setCell(1, 5, 2, 'icon', '太陽', 0); setCell(1, 5, 3, 'icon', '太陽', 0);
1139
+ setCell(1, 6, 1, 'icon', '太陽', 0); setCell(1, 6, 2, 'icon', '太陽', 0); setCell(1, 6, 3, 'icon', '太陽', 0);
1140
+ setCell(1, 7, 1, 'icon', '太陽', 0); setCell(1, 7, 2, 'icon', '太陽', 0); setCell(1, 7, 3, 'icon', '太陽', 0);
1141
+ setCell(1, 8, 1, 'icon', '太陽', 0); setCell(1, 8, 2, 'icon', '太陽', 0); setCell(1, 8, 3, 'icon', '太陽', 0);
1142
+ setCell(1, 3, 1, 'icon', '星星', 270); setCell(1, 3, 2, 'icon', '星星', 270); setCell(1, 3, 3, 'icon', '星星', 270);
1143
+ setCell(1, 4, 1, 'icon', '星星', 270); setCell(1, 4, 2, 'icon', '星星', 270); setCell(1, 4, 3, 'icon', '星星', 270);
1144
+ setCell(1, 7, 4, 'icon', '星星', 90); setCell(1, 7, 5, 'icon', '星星', 90); setCell(1, 7, 6, 'icon', '星星', 90);
1145
+ setCell(1, 8, 4, 'icon', '星星', 90); setCell(1, 8, 5, 'icon', '星星', 90); setCell(1, 8, 6, 'icon', '星星', 90);
1146
+ setCell(1, 1, 1, 'text', '285', 90); setCell(1, 1, 2, 'text', '343', 90); setCell(1, 1, 3, 'text', '546', 90);
1147
+ setCell(1, 1, 4, 'text', '126', 270); setCell(1, 1, 5, 'text', '120', 270); setCell(1, 1, 6, 'text', '113', 270);
1148
+ setCell(1, 2, 7, 'text', '140', 270); setCell(1, 2, 8, 'text', '137', 90);
1149
+ setCell(1, 3, 7, 'text', '401', 270); setCell(1, 3, 8, 'text', '125', 90);
1150
+ setCell(1, 4, 7, 'text', '314', 270); setCell(1, 4, 8, 'text', '151', 90);
1151
+ setCell(1, 7, 8, 'text', '159', 90); setCell(1, 8, 8, 'text', '459', 90);
1152
+ }
1153
 
1154
  clearSelection();
1155
  activePageId.value = 1;