From 458101f04a74a0f51e18de2885e164d506d562c6 Mon Sep 17 00:00:00 2001
From: Shade4827 <shade4827@gmail.com>
Date: Sat, 29 Nov 2025 17:55:42 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E6=8C=81=E7=B6=9A=E8=A8=88=E7=95=A5?=
 =?UTF-8?q?=E3=81=AE=E7=94=BB=E5=83=8F=E3=82=B5=E3=82=A4=E3=82=BA=E3=82=92?=
 =?UTF-8?q?=E6=8B=A1=E5=A4=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue         | 2 +-
 src/assets/main.css | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 62bc351..3f03ca1 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -52,7 +52,7 @@
               :key="i"
             >
               <img
-                :src="s.image_uris.small"
+                :src="s.image_uris.normal"
                 alt="Ongoing Scheme Card"
                 @click="activateOngoingScheme(s)"
               />
diff --git a/src/assets/main.css b/src/assets/main.css
index a92cbbf..77e763a 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -124,7 +124,7 @@ main {
 
 .scrollable-list img {
   width: 100%;
-  max-width: 150px;
+  max-width: 250px;
   border-radius: 4px;
   transition: opacity 0.2s;
 }

From ab9985b3dcc4e1c96b77ede5fb542cf345dffea5 Mon Sep 17 00:00:00 2001
From: Shade4827 <shade4827@gmail.com>
Date: Sat, 29 Nov 2025 18:06:52 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E7=94=BB=E5=83=8F=E3=82=92=E6=8B=A1?=
 =?UTF-8?q?=E5=A4=A7=E8=A1=A8=E7=A4=BA=E5=8F=AF=E8=83=BD=E3=81=AB=E3=81=99?=
 =?UTF-8?q?=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue         | 47 +++++++++++++++++++++++++-
 src/assets/main.css | 80 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 126 insertions(+), 1 deletion(-)

diff --git a/src/App.vue b/src/App.vue
index 3f03ca1..537b1bc 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -30,11 +30,21 @@
     </div>
     <div class="container">
       <div class="left-panel">
-        <div v-if="fetchedData && schemes && index >= 0">
+        <div
+          v-if="fetchedData && schemes && index >= 0"
+          class="image-container"
+        >
           <img
             :src="schemes[index]?.image_uris.normal"
             alt="Scheme Card"
           />
+          <button
+            class="zoom-button"
+            @click="openModal(schemes[index]?.image_uris.large || '')"
+            title="Zoom"
+          >
+            🔍
+          </button>
         </div>
         <div v-else-if="fetchedData">
           <p>Total Cards: {{ fetchedData.total_cards }}</p>
@@ -50,17 +60,39 @@
             <li
               v-for="(s, i) in ongoingSchemes"
               :key="i"
+              class="image-container"
             >
               <img
                 :src="s.image_uris.normal"
                 alt="Ongoing Scheme Card"
                 @click="activateOngoingScheme(s)"
               />
+              <button
+                class="zoom-button"
+                @click.stop="openModal(s.image_uris.large)"
+                title="Zoom"
+              >
+                🔍
+              </button>
             </li>
           </ul>
         </div>
       </div>
     </div>
+
+    <div
+      v-if="modalOpen"
+      class="modal-overlay"
+      @click="closeModal"
+    >
+      <div class="modal-content" @click.stop>
+        <button class="close-button" @click="closeModal">✕</button>
+        <img
+          :src="modalImageSrc"
+          alt="Zoomed card" class="modal-image"
+        />
+      </div>
+    </div>
   </main>
 </template>
 
@@ -76,6 +108,7 @@ interface Scheme {
   image_uris: {
     small: string
     normal: string
+    large: string
   },
   type_line: TypeLine
 }
@@ -91,6 +124,8 @@ const fetchedData = ref<ScryfallListResponse | null>(null)
 const schemes = ref<Scheme[]>([])
 const index = ref<number>(-1)
 const ongoingSchemes = ref<Scheme[]>([])
+const modalOpen = ref<boolean>(false)
+const modalImageSrc = ref<string>('')
 
 interface QueryOptions {
   japaneseOnly: boolean
@@ -165,4 +200,14 @@ const activateOngoingScheme = (scheme: Scheme) => {
     ongoingSchemes.value.splice(schemeIndex, 1)
   }
 }
+
+const openModal = (imageUrl: string) => {
+  modalImageSrc.value = imageUrl
+  modalOpen.value = true
+}
+
+const closeModal = () => {
+  modalOpen.value = false
+  modalImageSrc.value = ''
+}
 </script>
diff --git a/src/assets/main.css b/src/assets/main.css
index 77e763a..13aadae 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -133,6 +133,86 @@ main {
   opacity: 0.8;
 }
 
+.image-container {
+  position: relative;
+  display: inline-block;
+}
+
+.zoom-button {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 36px;
+  height: 36px;
+  padding: 0;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: rgba(255, 255, 255, 0.9);
+  cursor: pointer;
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s, transform 0.2s;
+  z-index: 10;
+}
+
+.zoom-button:hover {
+  background-color: rgba(255, 255, 255, 1);
+  transform: scale(1.1);
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+}
+
+.modal-content {
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 20px;
+}
+
+.close-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background-color: #f5f5f5;
+  cursor: pointer;
+  font-size: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.2s;
+  z-index: 201;
+}
+
+.close-button:hover {
+  background-color: #e0e0e0;
+}
+
+.modal-image {
+  max-width: 100%;
+  max-height: 85vh;
+  object-fit: contain;
+}
+
 @media (hover: hover) {
   a:hover {
     background-color: hsla(160, 100%, 37%, 0.2);