Update templates/index.html

templates/index.html

@@ -23,6 +23,21 @@
         </div>
     </div>
     <script>
+        // Flashcardのズームを調整
+        function adjustFlashcardScale() {
+            const flashcard = document.getElementById('flashcard');
+            const windowWidth = window.innerWidth;
+            const flashcardWidth = flashcard.offsetWidth;
+
+            // スケールを計算して適用
+            const scale = windowWidth / flashcardWidth;
+            flashcard.style.transform = `scale(${scale})`;
+        }
+
+        // ページロード時とリサイズ時にスケールを適用
+        window.addEventListener('load', adjustFlashcardScale);
+        window.addEventListener('resize', adjustFlashcardScale);
+
         const flipBtn = document.getElementById('flipBtn');
         let showingEnglish = true;
         const englishText = "<strong>English:</strong> {{ english }}";