- revert createQRCard code

Author: TobiasMue91

tools/spotify_music_quiz_cards.html

@@ -9,6 +9,18 @@
             --shadow: rgba(0, 0, 0, 0.1);
         }
 
+        .card-container {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 1cm;
+            width: 21cm; /* Standard A4 width */
+            margin: 0 auto;
+        }
+
+        .page {
+            margin-bottom: 1cm;
+        }
+
         @media print {
             body * {
                 visibility: hidden;
@@ -21,6 +33,10 @@
                 left: 0;
                 top: 0;
             }
+
+            .page {
+                page-break-after: always;
+            }
         }
 
         body {
@@ -216,10 +232,11 @@ <h2 class="text-xl font-bold mb-4 text-black dark:text-white">
 
     function createQRCard(track, isQRSide) {
         const card = document.createElement('div');
-        card.className = 'card';
+        card.className = 'w-[6cm] h-[6cm] border border-gray-200 rounded-lg bg-white p-2.5 m-2.5 break-inside-avoid';
+
         if (isQRSide) {
             const qrContainer = document.createElement('div');
-            qrContainer.className = 'qr-container';
+            qrContainer.className = 'flex justify-center items-center h-full';
             qrContainer.id = `qr-${track.id}`;
             card.appendChild(qrContainer);
             new QRCode(qrContainer, {
@@ -232,8 +249,12 @@ <h2 class="text-xl font-bold mb-4 text-black dark:text-white">
             });
         } else {
             const metadata = document.createElement('div');
-            metadata.className = 'metadata';
-            metadata.innerHTML = `<h3 class="title">${track.name}</h3><p class="artist">${track.artist}</p><p class="year">${track.year}</p>`;
+            metadata.className = 'text-center h-full flex flex-col justify-center text-black';
+            metadata.innerHTML = `
+            <h3 class="text-lg font-semibold">${track.name}</h3>
+            <p class="text-gray-600">${track.artist}</p>
+            <p class="text-2xl mt-2">${track.year}</p>
+        `;
             card.appendChild(metadata);
         }
         return card;