- playing around with the spotify API

Author: TobiasMue91

tools/spotify_test.html

@@ -84,19 +84,29 @@
         }
 
         #pauseResumeButton {
-            width: 80vmin;
-            height: 80vmin;
-            font-size: 40vmin;
+            width: 60vmin;
+            height: 60vmin;
+            font-size: 30vmin;
             border: none;
-            border-radius: 10px;
-            background-color: #1DB954;
+            border-radius: 50%;
+            background: linear-gradient(145deg, #1DB954, #169c45);
             color: white;
             cursor: pointer;
-            transition: transform 0.1s;
+            transition: all 0.3s ease;
+            box-shadow: 0 10px 20px rgba(29, 185, 84, 0.3);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        #pauseResumeButton:hover {
+            transform: scale(1.02);
+            box-shadow: 0 15px 30px rgba(29, 185, 84, 0.4);
         }
 
         #pauseResumeButton:active {
             transform: scale(0.98);
+            box-shadow: 0 5px 15px rgba(29, 185, 84, 0.2);
         }
 
         #player {
@@ -105,6 +115,40 @@
             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);
         }
     </style>
 </head>
@@ -117,8 +161,15 @@
 </div>
 
 <div id="player" class="hidden">
-    <button id="pauseResumeButton">⏸️</button>
-    <button id="createQRButton" class="fixed top-4 right-4 bg-green-500 text-white py-2 px-4 rounded">Create QR codes from Playlist</button>
+    <div class="button-container">
+        <button id="pauseResumeButton">⏸️</button>
+        <a href="https://www.gptgames.dev/tools/spotify_qr_scanner" class="scan-button">
+            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">
+        Create QR codes from Playlist
+    </button>
 </div>
 
 <div id="printArea"></div>