<!DOCTYPE html>
<html>
<head>
    <title>Admin Panel</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="/socket.io/socket.io.js"></script>
</head>
<body class="bg-gray-100">
    <div class="container mx-auto p-4">
        <h1 class="text-2xl font-bold mb-4">Admin Panel</h1>
        <h2 class="text-xl font-semibold mb-2">Volume Limits</h2>
        <form id="volume-limits-form" class="mb-4">
            <div class="flex space-x-2">
                <label class="flex flex-col">
                    Min Volume:
                    <input type="number" id="min-volume" name="min" min="0" max="100" required class="border p-1">
                </label>
                <label class="flex flex-col">
                    Max Volume:
                    <input type="number" id="max-volume" name="max" min="0" max="100" required class="border p-1">
                </label>
            </div>
            <button type="submit" class="mt-2 bg-blue-500 text-white px-4 py-2 rounded">Update Volume Limits</button>
        </form>
        <h2 class="text-xl font-semibold mb-2">Devices</h2>
        <ul id="device-list" class="space-y-4"></ul>
    </div>

    <script src="/public/scripts/admin.js"></script>
</body>
</html>
