Spaces:
Running
Running
I want you to make a copy of https://rgg.land/live it's a multi-stream site for viewing twitch streams, but it is made for specific event, without an ability to change streamers. I just want to be able to change streamers, number of 'windows' and that's basically it. Do not add any pictures or additional info, minimalistic is how I like it.
1ec46cb
verified
| <html lang="en" class="h-full"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MultiStream Magic</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="bg-gray-900 text-white h-full flex flex-col"> | |
| <custom-header></custom-header> | |
| <main class="flex-1 p-4"> | |
| <div class="container mx-auto"> | |
| <div id="stream-controls" class="mb-6 p-4 bg-gray-800 rounded-lg"> | |
| <div class="flex flex-wrap gap-4 items-center"> | |
| <div class="flex-1 min-w-[200px]"> | |
| <label class="block text-sm font-medium mb-1">Streamers (comma separated)</label> | |
| <input type="text" id="streamers-input" placeholder="streamer1,streamer2,streamer3" | |
| class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white"> | |
| </div> | |
| <div class="w-32"> | |
| <label class="block text-sm font-medium mb-1">Layout</label> | |
| <select id="layout-select" class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white"> | |
| <option value="1">1 Stream</option> | |
| <option value="2">2 Streams</option> | |
| <option value="3">3 Streams</option> | |
| <option value="4" selected>4 Streams</option> | |
| <option value="6">6 Streams</option> | |
| <option value="9">9 Streams</option> | |
| </select> | |
| </div> | |
| <button id="update-btn" class="mt-6 px-4 py-2 bg-purple-600 hover:bg-purple-700 rounded-md transition"> | |
| Update Streams | |
| </button> | |
| </div> | |
| </div> | |
| <div id="stream-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> | |
| <!-- Streams will be loaded here --> | |
| </div> | |
| </div> | |
| </main> | |
| <script src="components/header.js"></script> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |