- playing around with the spotify API

TobiasMue91 · TobiasMue91 · commit 9ff4a96b7b9e · 2025-02-16T14:20:39.000+01:00
diff --git a/tools/spotify_qr.html b/tools/spotify_qr.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Spotify Track QR Generator</title>
+  <script src="https://cdn.jsdelivr.net/npm/qrcode.js@1.0.0/qrcode.min.js"></script>
+  <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-100 min-h-screen flex items-center justify-center">
+<div class="max-w-md w-full mx-auto p-6">
+  <div class="bg-white rounded-lg shadow-xl p-8">
+    <h1 class="text-2xl font-bold text-center mb-6 text-gray-800">Spotify Track QR Generator</h1>
+
+    <div class="space-y-6">
+      <div>
+        <label for="trackId" class="block text-sm font-medium text-gray-700 mb-2">
+          Enter Spotify Track ID
+        </label>
+        <input
+                type="text"
+                id="trackId"
+                placeholder="e.g., 11dFghVXANMlKmJXsNCbNl"
+                class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-green-500 focus:border-green-500 outline-none transition"
+        >
+      </div>
+
+      <button
+              onclick="generateQR()"
+              class="w-full bg-green-500 text-white py-2 px-4 rounded-md hover:bg-green-600 transition duration-200 font-medium"
+      >
+        Generate QR Code
+      </button>
+
+      <div id="qrOutput" class="flex justify-center">
+        <canvas id="qrcode" class="hidden"></canvas>
+      </div>
+
+      <div id="downloadButton" class="text-center hidden">
+        <a
+                id="downloadLink"
+                class="inline-block bg-gray-800 text-white py-2 px-4 rounded-md hover:bg-gray-900 transition duration-200 font-medium"
+                download="spotify-track-qr.png"
+        >
+          Download QR Code
+        </a>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+  function generateQR() {
+    const trackId = document.getElementById('trackId').value.trim();
+    if (!trackId) {
+      alert('Please enter a track ID');
+      return;
+    }
+
+    const url = `https://www.gptgames.dev/tools/spotify_test.html?track=${trackId}`;
+    const qrcode = document.getElementById('qrcode');
+    const downloadButton = document.getElementById('downloadButton');
+
+    // Clear previous QR code
+    qrcode.innerHTML = '';
+
+    // Generate new QR code
+    QRCode.toCanvas(qrcode, url, {
+      width: 256,
+      margin: 2,
+      color: {
+        dark: '#000000',
+        light: '#ffffff'
+      }
+    }, function (error) {
+      if (error) {
+        console.error(error);
+        alert('Error generating QR code');
+        return;
+      }
+
+      // Show QR code and download button
+      qrcode.classList.remove('hidden');
+      downloadButton.classList.remove('hidden');
+
+      // Update download link
+      const downloadLink = document.getElementById('downloadLink');
+      downloadLink.href = qrcode.toDataURL('image/png');
+    });
+  }
+</script>
+</body>
+</html>
