- add dark mode support with dark: tailwind classes

- refactor css into semantic classes using tailwind utility classes
- optimize button hover/active states with `transition-*` classes
- replace manual shadow values with css variable `--shadow`
- simplify positioning with `inset-0` shorthand
- remove redundant css classes and consolidate styles
- fix overflow handling on body and container elements

Author: TobiasMue91

tools/spotify_music_quiz_cards.html

@@ -5,6 +5,10 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
+        :root {
+            --shadow: rgba(0, 0, 0, 0.1);
+        }
+
         @media print {
             body * {
                 visibility: hidden;
@@ -19,72 +23,12 @@
             }
         }
 
-        .card {
-            width: 6cm;
-            height: 6cm;
-            border: 1px solid #e5e7eb;
-            border-radius: 8px;
-            background: white;
-            padding: 10px;
-            margin: 10px;
-            page-break-inside: avoid !important;
-            break-inside: avoid !important;
-        }
-
-        .page {
-            page-break-after: always !important;
-            page-break-before: always !important;
-            margin-bottom: 2cm;
-        }
-
-        .card-container {
-            display: grid;
-            grid-template-columns: repeat(3, 1fr);
-            gap: 20px;
-            padding: 20px;
-            page-break-inside: avoid !important;
-            break-inside: avoid !important;
-        }
-
-        .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;
-            height: 100%;
-            align-items: center;
-        }
-
-        .metadata {
-            text-align: center;
-            height: 100%;
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-        }
-
-        .metadata .year {
-            font-size: 24px;
-            margin-top: 8px;
-        }
-
-        #printArea {
-            display: block;
-            padding: 1cm;
-        }
-
-        .hidden {
-            display: none;
+        body {
+            overflow: hidden;
         }
 
         #pauseResumeButton {
-            width: min(60vmin, 300px);  /* Cap the max size on desktop */
+            width: min(60vmin, 300px);
             height: min(60vmin, 300px);
             border: none;
             border-radius: 50%;
@@ -97,7 +41,7 @@
             transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
             box-shadow:
                     0 2rem 4rem rgba(29, 185, 84, 0.2),
-                    0 1rem 2rem rgba(0, 0, 0, 0.1),
+                    0 1rem 2rem var(--shadow),
                     inset 0 -2px 0 rgba(0, 0, 0, 0.1),
                     inset 0 2px 0 rgba(255, 255, 255, 0.2);
             overflow: hidden;
@@ -106,10 +50,7 @@
         #pauseResumeButton::before {
             content: '';
             position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
+            inset: 0;
             border-radius: 50%;
             background: linear-gradient(145deg, rgba(255, 255, 255, 0.2), transparent);
             opacity: 0;
@@ -121,7 +62,7 @@
             background: linear-gradient(145deg, #34F07E, #1FCC5E);
             box-shadow:
                     0 3rem 5rem rgba(29, 185, 84, 0.25),
-                    0 1.5rem 3rem rgba(0, 0, 0, 0.15),
+                    0 1.5rem 3rem var(--shadow),
                     inset 0 -2px 0 rgba(0, 0, 0, 0.1),
                     inset 0 2px 0 rgba(255, 255, 255, 0.2);
         }
@@ -135,138 +76,69 @@
             background: linear-gradient(145deg, #1DB954, #1AA54C);
             box-shadow:
                     0 1rem 2rem rgba(29, 185, 84, 0.15),
-                    0 0.5rem 1rem rgba(0, 0, 0, 0.1),
+                    0 0.5rem 1rem var(--shadow),
                     inset 0 -1px 0 rgba(0, 0, 0, 0.1),
                     inset 0 1px 0 rgba(255, 255, 255, 0.1);
         }
 
         #pauseResumeButton svg {
             filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
         }
-
-        #player {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            height: 100vh;
-            margin: 0;
-            flex-direction: column;
-        }
-
-        .button-container {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            gap: 2rem;
-        }
-
-        .scan-button {
-            padding: 1.5rem 3rem;
-            font-size: 1.5rem;
-            font-weight: 600;
-            color: white;
-            background: linear-gradient(145deg, #1e1e1e, #2d2d2d);
-            border: none;
-            border-radius: 15px;
-            cursor: pointer;
-            text-decoration: none;
-            transition: all 0.3s ease;
-            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-
-        .scan-button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
-        }
-
-        .scan-button:active {
-            transform: translateY(1px);
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
-        }
-
-        #playlistModal {
-            z-index: 1000;
-        }
-
-        input[type="range"] {
-            -webkit-appearance: none;
-            height: 8px;
-            background: #e5e7eb;
-            border-radius: 4px;
-            outline: none;
-        }
-
-        input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 20px;
-            height: 20px;
-            background: #1DB954;
-            border-radius: 50%;
-            cursor: pointer;
-        }
-
-        input[type="range"]::-moz-range-thumb {
-            width: 20px;
-            height: 20px;
-            background: #1DB954;
-            border-radius: 50%;
-            cursor: pointer;
-            border: none;
-        }
     </style>
 </head>
-<body class="bg-gray-100 min-h-screen">
+<body class="bg-gray-100 dark:bg-black min-h-screen overflow-hidden">
 <div id="setup" class="max-w-md mx-auto p-6">
-    <div class="bg-white rounded-lg shadow-xl p-8">
-        <input type="text" id="clientId" placeholder="Enter Spotify Client ID" class="w-full px-4 py-2 mb-4 border rounded">
-        <button onclick="startAuth()" class="w-full bg-green-500 text-white py-2 px-4 rounded">Initialize</button>
+    <div class="bg-white dark:bg-gray-900 rounded-lg shadow-xl p-8">
+        <input type="text" id="clientId" placeholder="Enter Spotify Client ID"
+               class="w-full px-4 py-2 mb-4 border rounded bg-white dark:bg-gray-700 text-black dark:text-white">
+        <button onclick="startAuth()"
+                class="w-full bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded transition-colors">
+            Initialize
+        </button>
     </div>
 </div>
 
-<div id="player" class="hidden">
-    <div class="button-container">
-        <button id="pauseResumeButton"><span class="play">▷</span></button>
-        <a href="https://www.gptgames.dev/tools/spotify_qr_scanner" class="scan-button">
+<div id="player" class="hidden h-screen flex justify-center items-center flex-col">
+    <div class="flex flex-col items-center gap-8">
+        <button id="pauseResumeButton">
+            <span class="play">▷</span>
+        </button>
+        <a href="https://www.gptgames.dev/tools/spotify_qr_scanner"
+           class="px-12 py-6 text-2xl font-semibold text-white dark:text-white bg-gray-800 dark:bg-gray-700
+                  hover:transform hover:-translate-y-1 rounded-2xl shadow-lg uppercase tracking-wide
+                  transition-all duration-300">
             Scan for next song
         </a>
     </div>
-    <button id="createQRButton" class="fixed top-4 right-4 bg-green-500 text-white py-2 px-4 rounded">
+    <button id="createQRButton"
+            class="fixed top-4 right-4 bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded transition-colors">
         Create QR codes from Playlist
     </button>
 </div>
 
-<div id="printArea"></div>
-
-<div id="playlistModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center">
-    <div class="bg-white p-8 rounded-lg shadow-xl max-w-md w-full">
-        <h2 class="text-xl font-bold mb-4">Create QR Codes from Playlist</h2>
-        <input
-                type="text"
-                id="playlistUrl"
-                placeholder="Enter Spotify playlist URL"
-                class="w-full px-4 py-2 mb-4 border rounded"
-        >
+<div id="printArea" class="p-[1cm]"></div>
+
+<div id="playlistModal" class="fixed inset-0 bg-black/50 hidden items-center justify-center">
+    <div class="bg-white dark:bg-gray-900 p-8 rounded-lg shadow-xl max-w-md w-full">
+        <h2 class="text-xl font-bold mb-4 text-black dark:text-white">
+            Create QR Codes from Playlist
+        </h2>
+        <input type="text" id="playlistUrl" placeholder="Enter Spotify playlist URL"
+               class="w-full px-4 py-2 mb-4 border rounded bg-white dark:bg-gray-700 text-black dark:text-white">
         <div class="mb-4">
-            <label class="block text-sm font-medium text-gray-700 mb-2">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                 Number of songs: <span id="songCount">21</span>
             </label>
-            <input
-                    type="range"
-                    id="songSlider"
-                    min="3"
-                    max="300"
-                    step="3"
-                    value="21"
-                    class="w-full"
-            >
+            <input type="range" id="songSlider" min="3" max="300" step="3" value="21"
+                   class="w-full">
         </div>
         <div class="flex justify-end gap-4">
-            <button onclick="closePlaylistModal()" class="px-4 py-2 text-gray-600 hover:text-gray-800">
+            <button onclick="closePlaylistModal()"
+                    class="px-4 py-2 text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">
                 Cancel
             </button>
-            <button onclick="processPlaylist()" class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600">
+            <button onclick="processPlaylist()"
+                    class="px-4 py-2 bg-green-500 hover:bg-green-600 text-white rounded transition-colors">
                 Create
             </button>
         </div>
@@ -351,10 +223,11 @@ <h2 class="text-xl font-bold mb-4">Create QR Codes from Playlist</h2>
 
     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, {
@@ -367,8 +240,12 @@ <h2 class="text-xl font-bold mb-4">Create QR Codes from Playlist</h2>
             });
         } 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;