feat: add size preview

Author: ShiinaSaku

src/pages/index.astro

@@ -44,7 +44,7 @@ import { presets } from "../components/presets.ts";
           id="preview-container"
           style="background-color: #f5f5f5;"
         >
-          <div id="icon-wrapper" class="transition-all duration-200 ease-out w-[97%] h-[97%]">
+          <div id="icon-wrapper" class="transition-all duration-300 ease-out w-[97%] h-[97%] origin-center" style="transform: scale(1);">
             <APatchIcon id="apatch-icon" color="#3ddc84" />
           </div>
         </div>
@@ -329,12 +329,27 @@ import { presets } from "../components/presets.ts";
     sizeInput.value = String(exportSize);
     sizeDisplay.textContent = String(exportSize);
 
+    updatePreviewScale();
+
     document.querySelectorAll(".size-chip").forEach((chip) => {
       const chipSize = Number(chip.dataset.size);
       chip.dataset.active = chipSize === exportSize ? "true" : "false";
     });
   }
 
+  function updatePreviewScale() {
+    const iconWrapper = document.getElementById("icon-wrapper");
+    if (!iconWrapper) return;
+
+    const minSize = 64;
+    const maxSize = 2048;
+    const minScale = 0.5;
+    const maxScale = 2.0;
+
+    const scale = minScale + ((exportSize - minSize) / (maxSize - minSize)) * (maxScale - minScale);
+    iconWrapper.style.transform = `scale(${scale.toFixed(2)})`;
+  }
+
   function getPresetButtons() {
     return Array.from(document.querySelectorAll(".preset-btn"));
   }
@@ -569,5 +584,6 @@ import { presets } from "../components/presets.ts";
   });
 
   updateExportSize(exportSize);
+  updatePreviewScale();
   updateColor(currentColor);
 </script>