- playing around with the spotify API

Author: TobiasMue91

tools/spotify_test.html

@@ -27,16 +27,30 @@
             background: white;
             padding: 10px;
             margin: 10px;
+            page-break-inside: avoid;
+        }
+
+        .card-page {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 20px;
+            padding: 20px;
+            page-break-after: always;
         }
 
         .qr-container {
             display: flex;
             justify-content: center;
-            margin-bottom: 10px;
+            height: 100%;
+            align-items: center;
         }
 
         .metadata {
             text-align: center;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
         }
 
         .metadata .year {
@@ -159,32 +173,33 @@
             }));
     }
 
-    function createQRCard(track) {
+    function createQRCard(track, isQRSide) {
         const card = document.createElement('div');
         card.className = 'card';
 
-        const qrContainer = document.createElement('div');
-        qrContainer.className = 'qr-container';
-        qrContainer.id = `qr-${track.id}`;
-
-        const metadata = document.createElement('div');
-        metadata.className = 'metadata';
-        metadata.innerHTML = `
+        if (isQRSide) {
+            const qrContainer = document.createElement('div');
+            qrContainer.className = 'qr-container';
+            qrContainer.id = `qr-${track.id}`;
+            card.appendChild(qrContainer);
+
+            new QRCode(qrContainer, {
+                text: `https://www.gptgames.dev/tools/spotify_test.html?track=${track.id}`,
+                width: 220,
+                height: 220,
+                colorDark: "#000000",
+                colorLight: "#ffffff",
+            });
+        } 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>
             `;
-
-        card.appendChild(qrContainer);
-        card.appendChild(metadata);
-
-        new QRCode(qrContainer, {
-            text: `https://www.gptgames.dev/tools/spotify_test.html?track=${track.id}`,
-            width: 220,
-            height: 220,
-            colorDark: "#000000",
-            colorLight: "#ffffff",
-        });
+            card.appendChild(metadata);
+        }
 
         return card;
     }
@@ -202,9 +217,21 @@ <h3 class="title">${track.name}</h3>
             const printArea = document.getElementById('printArea');
             printArea.innerHTML = '';
 
+            // Create QR code page
+            const qrPage = document.createElement('div');
+            qrPage.className = 'card-page';
+            tracks.slice(0, 21).forEach(track => {
+                qrPage.appendChild(createQRCard(track, true));
+            });
+            printArea.appendChild(qrPage);
+
+            // Create metadata page
+            const metadataPage = document.createElement('div');
+            metadataPage.className = 'card-page';
             tracks.slice(0, 21).forEach(track => {
-                printArea.appendChild(createQRCard(track));
+                metadataPage.appendChild(createQRCard(track, false));
             });
+            printArea.appendChild(metadataPage);
 
             setTimeout(() => {
                 window.print();