- playing around with the spotify API

Author: TobiasMue91

tools/spotify_test.html

@@ -30,6 +30,17 @@
             page-break-inside: avoid;
         }
 
+        .page {
+            page-break-after: always;
+        }
+
+        .card-container {
+            display: grid;
+            grid-template-columns: repeat(3, 1fr);
+            gap: 20px;
+            padding: 20px;
+        }
+
         .card-page {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
@@ -217,19 +228,27 @@ <h3 class="title">${track.name}</h3>
             const printArea = document.getElementById('printArea');
             printArea.innerHTML = '';
 
-            // Create QR code page
+            // First page with QR codes
             const qrPage = document.createElement('div');
-            qrPage.className = 'card-page';
+            qrPage.className = 'page';
+            const qrContainer = document.createElement('div');
+            qrContainer.className = 'card-container';
+            qrPage.appendChild(qrContainer);
+
             tracks.slice(0, 21).forEach(track => {
-                qrPage.appendChild(createQRCard(track, true));
+                qrContainer.appendChild(createQRCard(track, true));
             });
             printArea.appendChild(qrPage);
 
-            // Create metadata page
+            // Second page with metadata
             const metadataPage = document.createElement('div');
-            metadataPage.className = 'card-page';
+            metadataPage.className = 'page';
+            const metadataContainer = document.createElement('div');
+            metadataContainer.className = 'card-container';
+            metadataPage.appendChild(metadataContainer);
+
             tracks.slice(0, 21).forEach(track => {
-                metadataPage.appendChild(createQRCard(track, false));
+                metadataContainer.appendChild(createQRCard(track, false));
             });
             printArea.appendChild(metadataPage);