host.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Host Panel</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-database.js"></script>
<script src="songs.js"></script>
</head>
<body class="bg-gray-900 text-white p-6">
<h1 class="text-4xl mb-4">🎛️ Host Control</h1>
<div class="flex items-center gap-2">
  <input id="room" placeholder="Room Code" class="text-black p-2 rounded">
  <button onclick="generateRoom()" class="bg-yellow-400 text-black px-3 py-2 rounded">Generate</button>
  <button onclick="createRoom()" class="bg-green-500 px-4 py-2 rounded">Create</button>
</div>
<div class="mt-2">
  <img id="qrimg" class="hidden border rounded" />
</div>
<div class="mt-4 p-2 bg-white/5 rounded">
  <h3 class="font-bold mb-2">Spotify preview (optional)</h3>
  <input id="spotify" placeholder="Spotify track id (eg 3n3Ppam7vgaVa1iaRUc9Lp)" class="text-black p-2 rounded w-80">
  <input id="spotifyToken" placeholder="Bearer token (optional)" class="text-black p-2 rounded w-80 mt-2">
  <div class="mt-2">
    <button onclick="fetchSpotifyPreviewAndSet()" class="bg-blue-600 px-3 py-2 rounded">Fetch preview and assign to next question</button>
    <span id="spotifyInfo" class="ml-2"></span>
  </div>
</div>
<button onclick="startQuiz()" class="bg-blue-600 px-4 py-2 rounded ml-2">Start Quiz</button>
<button onclick="stopQuiz()" class="bg-red-500 px-4 py-2 rounded ml-2">Stop Quiz</button>
<label class="ml-4">Time per Q:
  <input id="qtime" type="number" value="15" class="text-black w-16 p-1 rounded ml-2">s
</label>
<p id="info" class="mt-4"></p>
<script src="host.js"></script>
</body>
</html>