Hugging Face's logo

Spaces:
BurAndBY
/
y2k-retro-jukebox-jamboree
Running

App Files Community
BurAndBY commited on
Commit
0670e24
·
verified ·
1 Parent(s): e55aa5b

Write a website with a y2k aesthetic that will have a giant list of songs where you can add songs to queue and also have 4 ui elements sticked to the bottom that will let the drop in (join)/drop out

Browse files

Use this as a basis: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>window.$ = window.jQuery = require('jquery');</script>
<script src="./file-process.js"></script>
<script src="./node_modules/chosen-js/chosen.jquery.min.js"></script>
<link rel="stylesheet" href="./node_modules/chosen-js/chosen.min.css">
<title>RB3DX Admin Panel</title>
</head>
<body>
<h1>RB3DX Admin Panel</h1>
<div id="set-platform">
<h2>Select Platform</h2>
<button onclick="setPlatform('xbox')">Xbox 360</button>
<button onclick="setPlatform('rpcs3')">RPCS3</button>
</div>

<div id="select-ace" style="display: none;">
<p>Select ace_admin.dta</p>
<input type="file" id="upload-ace"></button>
</div>

<div id="ace_uploaded" style="display: none;">
<div style="margin-bottom: 10px;">
<h3 id="song-count" style="margin: 0px; margin-bottom: 10px;"></h3>
<button style="display: inline-block;" id="pullSongs" onclick="FetchSongList()">Pull Songs</button>
<p style="display: inline-block;" id="uploadCSV"></p>
<input type="file" style="display: inline-block;" id="upload"></input>
</div>
<div>
<label for="song_list">Choose a song:</label>
<select style="max-width: 500px;" name="song_list" id="song_list"></select>
</div>
<br>
<div>
<button id="jumpSongBtn" onclick="jumpSong()" style="display: none;">Jump to Song</button>
<button onclick="logSong()">Play Song</button>
<button onclick="sendCommand('{ui goto_screen song_select_enter_screen}')">Song Library</button>
</div>
<br>
<div>
<button onclick="sendCommand('{overshell attempt_to_add_user {user_mgr get_user_from_pad_num 0}}')">Drop in player 1</button>
<button onclick="sendCommand('{overshell attempt_to_add_user {user_mgr get_user_from_pad_num 1}}')">Drop in player 2</button>
<button onclick="sendCommand('{overshell attempt_to_add_user {user_mgr get_user_from_pad_num 2}}')">Drop in player 3</button>
<button onclick="sendCommand('{overshell attempt_to_add_user {user_mgr get_user_from_pad_num 3}}')">Drop in player 4</button>
</div>
<br>
<div>
<button onclick="sendCommand('{if {user_mgr get_user_from_slot 0} {{overshell get_slot {user_mgr get_user_from_slot 0}} remove_user}}')">Drop out slot 1</button>
<button onclick="sendCommand('{if {user_mgr get_user_from_slot 1} {{overshell get_slot {user_mgr get_user_from_slot 1}} remove_user}}')">Drop out slot 2</button>
<button onclick="sendCommand('{if {user_mgr get_user_from_slot 2} {{overshell get_slot {user_mgr get_user_from_slot 2}} remove_user}}')">Drop out slot 3</button>
<button onclick="sendCommand('{if {user_mgr get_user_from_slot 3} {{overshell get_slot {user_mgr get_user_from_slot 3}} remove_user}}')">Drop out slot 4</button>
</div>
<br>
<div>
<button onclick="writeToMic()">Set Mic Volumes</button>
<select name="mic1" id="mic1">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
<select name="mic2" id="mic2">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
<select name="mic3" id="mic3">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
</select>
</div>
<br>
<div id="toggleManualScript" style="display: none;">
<button onclick="showManualScript()" style="margin-bottom: 10px;">(ADVANCED) Manual Script</button>
<textarea id="manualScript" style="overflow:hidden; resize:none; display: none; width: 100%; max-width: 600px;"></textarea>
</div>

<p id="status"></p>
</div>
<div id="set-xbox-ip" style="display: none;">
<p style="display: inline-block;">Xbox 360 IP:</p>
<input type="text" id="xbox-ip"></input>
</div>
<script>
const { ipcRenderer } = require('electron');
var consoleMode = "";
var xboxIP = "";

function setPlatform(console) {
consoleMode = console;
$("#set-platform").remove();
if (consoleMode == "xbox") {
$("#jumpSongBtn").css("display", "inline-block");
$("#set-xbox-ip").css("display", "block");
$("#uploadCSV").text("or Upload CSV");
}
if (consoleMode == "rpcs3") {
$("#select-ace").css("display", "block");
$("#uploadCSV").text("Upload CSV");
$("#pullSongs").css("display", "none");
}
}

// Only show manual script menu when pressing ctrl + shift + u
$(document).keydown(function (e) {
if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'u') {
e.preventDefault(); // Prevent default action if needed
$("#toggleManualScript").css("display", "block");
}
});

function uploadACE() {
ipcRenderer.send('setAcePath', document.getElementById("upload-ace").files[0].path);
document.getElementById("select-ace").remove()
$("#ace_uploaded").css("display", "block");
}

$(document).ready(function() {
$('#manualScript').keydown(function(e) {
if (e.key === 'Enter' && !e.shiftKey) { // Check if Enter is pressed (without Shift)
e.preventDefault(); // Prevent new line if needed
runManualScript(); // Call your function
}
});
});

$(document).ready(function() {
$('#xbox-ip').keydown(function(e) {
if (e.key === 'Enter' && !e.shiftKey) { // Check if Enter is pressed (without Shift)
e.preventDefault(); // Prevent new line if needed
xboxIP = document.getElementById("xbox-ip").value;
alert("Xbox IP Set");
$("#ace_uploaded").css("display", "block");
}
});
});

$(document).ready(function() {
$('#manualScript').on('input', function() {
this.style.height = 'auto'; // Reset height to recalculate
this.style.height = this.scrollHeight + 'px'; // Set new height
});
});

function FetchSongList() {
fetch(`http://${xboxIP}:21070/list_songs`).then((data) => data.text().then((t) => ParseSongList(t)));
}

function showManualScript() {
$("#manualScript").css("display", $("#manualScript").css("display") == "block" ? "none" : "block" ); // hide or show text box depending on current status
}

function runManualScript() {
let inputValue = document.getElementById("manualScript").value;
sendCommand(inputValue);
}

document.getElementById("upload-ace").addEventListener("change", uploadACE, false);

function replaceSpaces(str) {
return str.replace(/ /g, '^');
}

function sendCommand(message) {
switch (consoleMode) {
case "rpcs3":
ipcRenderer.send('write-to-file', message);
break;
case "xbox":
fetch(`http://${xboxIP}:21070/execute?script={do ${message}}`);
default:
break;
}
}

function writeToMic() {
const mic1 = document.getElementById('mic1').value
const mic2 = document.getElementById('mic2').value
const mic3 = document.getElementById('mic3').value
switch (consoleMode) {
case "rpcs3":
sendCommand(
`{profile_mgr set_mic_vol 0 ${mic1}} {profile_mgr update_mic_levels 0} {profile_mgr set_mic_vol 1 ${mic2}} {profile_mgr update_mic_levels 1} {profile_mgr set_mic_vol 2 ${mic3}} {profile_mgr update_mic_levels 2}`
)
break;
case "xbox":
sendCommand(
`{profile_mgr set_mic_vol 0 ${mic1}} {profile_mgr update_m

Files changed (3) hide show
  1. README.md +9 -5
  2. index.html +88 -19
  3. jukebox.html +283 -0
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Y2k Retro Jukebox Jamboree
3
- emoji: 🏆
4
- colorFrom: green
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
 
1
  ---
2
+ title: Y2K Retro Jukebox Jamboree 🎵
3
+ colorFrom: gray
4
+ colorTo: green
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
index.html CHANGED
@@ -1,19 +1,88 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Y2K Jukebox</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
12
+
13
+ body {
14
+ font-family: 'VT323', monospace;
15
+ background-color: #0f0f23;
16
+ color: #0f0;
17
+ text-shadow: 0 0 5px #0f0;
18
+ overflow-x: hidden;
19
+ }
20
+
21
+ .y2k-btn {
22
+ background: linear-gradient(145deg, #ff00ff, #00ffff);
23
+ border: 2px solid #0f0;
24
+ color: black;
25
+ font-weight: bold;
26
+ padding: 8px 16px;
27
+ border-radius: 0;
28
+ transition: all 0.3s;
29
+ box-shadow: 0 0 10px #0f0;
30
+ }
31
+
32
+ .y2k-btn:hover {
33
+ transform: scale(1.05);
34
+ box-shadow: 0 0 15px #0f0, 0 0 20px #ff00ff;
35
+ }
36
+
37
+ .song-item {
38
+ border-bottom: 1px dashed #0f0;
39
+ padding: 12px;
40
+ transition: all 0.2s;
41
+ }
42
+
43
+ .song-item:hover {
44
+ background-color: rgba(0, 255, 0, 0.1);
45
+ transform: translateX(5px);
46
+ }
47
+
48
+ .player-btn {
49
+ width: 60px;
50
+ height: 60px;
51
+ border-radius: 50%;
52
+ background: linear-gradient(145deg, #ff00ff, #00ffff);
53
+ display: flex;
54
+ align-items: center;
55
+ justify-content: center;
56
+ font-size: 24px;
57
+ box-shadow: 0 0 15px #0f0;
58
+ transition: all 0.3s;
59
+ }
60
+
61
+ .player-btn:hover {
62
+ transform: scale(1.1);
63
+ box-shadow: 0 0 20px #0f0, 0 0 25px #ff00ff;
64
+ }
65
+
66
+ ::-webkit-scrollbar {
67
+ width: 8px;
68
+ }
69
+
70
+ ::-webkit-scrollbar-track {
71
+ background: #0f0f23;
72
+ }
73
+
74
+ ::-webkit-scrollbar-thumb {
75
+ background: #0f0;
76
+ border-radius: 4px;
77
+ }
78
+
79
+ .scanlines {
80
+ position: fixed;
81
+ top: 0;
82
+ left: 0;
83
+ width: 100%;
84
+ height: 100%;
85
+ background: linear-gradient(
86
+ rgba(18, 16, 16,
87
+ </head>
88
+ </html>
jukebox.html ADDED
@@ -0,0 +1,283 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Y2K Retro Jukebox</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/feather-icons"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=VT323&display=swap');
12
+
13
+ body {
14
+ font-family: 'VT323', monospace;
15
+ background-color: #0f0f23;
16
+ color: #0f0;
17
+ text-shadow: 0 0 5px #0f0;
18
+ overflow-x: hidden;
19
+ }
20
+
21
+ .y2k-btn {
22
+ background: linear-gradient(145deg, #ff00ff, #00ffff);
23
+ border: 2px solid #0f0;
24
+ color: black;
25
+ font-weight: bold;
26
+ padding: 8px 16px;
27
+ border-radius: 0;
28
+ transition: all 0.3s;
29
+ box-shadow: 0 0 10px #0f0;
30
+ }
31
+
32
+ .y2k-btn:hover {
33
+ transform: scale(1.05);
34
+ box-shadow: 0 0 15px #0f0, 0 0 20px #ff00ff;
35
+ }
36
+
37
+ .song-item {
38
+ border-bottom: 1px dashed #0f0;
39
+ padding: 12px;
40
+ transition: all 0.2s;
41
+ }
42
+
43
+ .song-item:hover {
44
+ background-color: rgba(0, 255, 0, 0.1);
45
+ transform: translateX(5px);
46
+ }
47
+
48
+ .player-btn {
49
+ width: 60px;
50
+ height: 60px;
51
+ border-radius: 50%;
52
+ background: linear-gradient(145deg, #ff00ff, #00ffff);
53
+ display: flex;
54
+ align-items: center;
55
+ justify-content: center;
56
+ font-size: 24px;
57
+ box-shadow: 0 0 15px #0f0;
58
+ transition: all 0.3s;
59
+ }
60
+
61
+ .player-btn:hover {
62
+ transform: scale(1.1);
63
+ box-shadow: 0 0 20px #0f0, 0 0 25px #ff00ff;
64
+ }
65
+
66
+ ::-webkit-scrollbar {
67
+ width: 8px;
68
+ }
69
+
70
+ ::-webkit-scrollbar-track {
71
+ background: #0f0f23;
72
+ }
73
+
74
+ ::-webkit-scrollbar-thumb {
75
+ background: #0f0;
76
+ border-radius: 4px;
77
+ }
78
+
79
+ .scanlines {
80
+ position: fixed;
81
+ top: 0;
82
+ left: 0;
83
+ width: 100%;
84
+ height: 100%;
85
+ background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 1px, transparent 1px, transparent 2px);
86
+ pointer-events: none;
87
+ z-index: 999;
88
+ opacity: 0.5;
89
+ }
90
+
91
+ .player-controls {
92
+ position: fixed;
93
+ bottom: 0;
94
+ left: 0;
95
+ width: 100%;
96
+ background: rgba(15, 15, 35, 0.9);
97
+ border-top: 2px solid #0f0;
98
+ padding: 15px;
99
+ display: flex;
100
+ justify-content: space-around;
101
+ z-index: 100;
102
+ }
103
+
104
+ .queue-container {
105
+ max-height: 60vh;
106
+ overflow-y: auto;
107
+ margin-bottom: 120px;
108
+ }
109
+ </style>
110
+ </head>
111
+ <body>
112
+ <div class="scanlines"></div>
113
+
114
+ <div class="container mx-auto px-4 py-8">
115
+ <h1 class="text-4xl mb-6 text-center" style="text-shadow: 0 0 10px #0f0;">Y2K RETRO JUKEBOX</h1>
116
+
117
+ <div class="flex mb-6 gap-4">
118
+ <input type="text" id="song-search" placeholder="Search songs..." class="flex-grow bg-black text-green-400 border-2 border-green-400 px-4 py-2 focus:outline-none focus:ring-2 focus:ring-green-400">
119
+ <button class="y2k-btn" onclick="addRandomSong()">
120
+ <i data-feather="shuffle"></i> Random
121
+ </button>
122
+ </div>
123
+
124
+ <div class="queue-container">
125
+ <h2 class="text-2xl mb-4">SONG QUEUE</h2>
126
+ <div id="queue-list"></div>
127
+
128
+ <h2 class="text-2xl mt-8 mb-4">ALL SONGS</h2>
129
+ <div id="song-list"></div>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="player-controls">
134
+ <div class="player-btn" onclick="dropInPlayer(1)">
135
+ <i data-feather="user-plus"></i>
136
+ </div>
137
+ <div class="player-btn" onclick="dropInPlayer(2)">
138
+ <i data-feather="user-plus"></i>
139
+ </div>
140
+ <div class="player-btn" onclick="dropInPlayer(3)">
141
+ <i data-feather="user-plus"></i>
142
+ </div>
143
+ <div class="player-btn" onclick="dropInPlayer(4)">
144
+ <i data-feather="user-plus"></i>
145
+ </div>
146
+ </div>
147
+
148
+ <script>
149
+ // Sample song data - replace with actual API calls in production
150
+ const songs = [
151
+ { id: 1, title: "Blue (Da Ba Dee)", artist: "Eiffel 65" },
152
+ { id: 2, title: "Around the World", artist: "Daft Punk" },
153
+ { id: 3, title: "Bye Bye Bye", artist: "*NSYNC" },
154
+ { id: 4, title: "It's Gonna Be Me", artist: "*NSYNC" },
155
+ { id: 5, title: "Oops!...I Did It Again", artist: "Britney Spears" },
156
+ { id: 6, title: "Toxic", artist: "Britney Spears" },
157
+ { id: 7, title: "Say My Name", artist: "Destiny's Child" },
158
+ { id: 8, title: "I Want It That Way", artist: "Backstreet Boys" },
159
+ { id: 9, title: "Larger Than Life", artist: "Backstreet Boys" },
160
+ { id: 10, title: "No Scrubs", artist: "TLC" },
161
+ { id: 11, title: "Waterfalls", artist: "TLC" },
162
+ { id: 12, title: "Genie in a Bottle", artist: "Christina Aguilera" },
163
+ { id: 13, title: "What a Girl Wants", artist: "Christina Aguilera" },
164
+ { id: 14, title: "Mambo No. 5", artist: "Lou Bega" },
165
+ { id: 15, title: "Who Let the Dogs Out", artist: "Baha Men" }
166
+ ];
167
+
168
+ let queue = [];
169
+
170
+ function renderSongs() {
171
+ const songList = document.getElementById('song-list');
172
+ songList.innerHTML = '';
173
+
174
+ songs.forEach(song => {
175
+ const songItem = document.createElement('div');
176
+ songItem.className = 'song-item flex justify-between items-center';
177
+ songItem.innerHTML = `
178
+ <div>
179
+ <h3 class="text-xl">${song.title}</h3>
180
+ <p class="text-green-300">${song.artist}</p>
181
+ </div>
182
+ <button class="y2k-btn" onclick="addToQueue(${song.id})">
183
+ <i data-feather="plus"></i> Add
184
+ </button>
185
+ `;
186
+ songList.appendChild(songItem);
187
+ });
188
+
189
+ feather.replace();
190
+ }
191
+
192
+ function renderQueue() {
193
+ const queueList = document.getElementById('queue-list');
194
+ queueList.innerHTML = '';
195
+
196
+ if (queue.length === 0) {
197
+ queueList.innerHTML = '<p class="text-green-300">No songs in queue</p>';
198
+ return;
199
+ }
200
+
201
+ queue.forEach((songId, index) => {
202
+ const song = songs.find(s => s.id === songId);
203
+ const queueItem = document.createElement('div');
204
+ queueItem.className = 'song-item flex justify-between items-center';
205
+ queueItem.innerHTML = `
206
+ <div class="flex items-center">
207
+ <span class="mr-4 text-green-400">${index + 1}</span>
208
+ <div>
209
+ <h3 class="text-xl">${song.title}</h3>
210
+ <p class="text-green-300">${song.artist}</p>
211
+ </div>
212
+ </div>
213
+ <div>
214
+ <button class="y2k-btn mr-2" onclick="moveUp(${index})" ${index === 0 ? 'disabled style="opacity:0.5"' : ''}>
215
+ <i data-feather="arrow-up"></i>
216
+ </button>
217
+ <button class="y2k-btn mr-2" onclick="moveDown(${index})" ${index === queue.length - 1 ? 'disabled style="opacity:0.5"' : ''}>
218
+ <i data-feather="arrow-down"></i>
219
+ </button>
220
+ <button class="y2k-btn bg-red-500" onclick="removeFromQueue(${index})">
221
+ <i data-feather="trash-2"></i>
222
+ </button>
223
+ </div>
224
+ `;
225
+ queueList.appendChild(queueItem);
226
+ });
227
+
228
+ feather.replace();
229
+ }
230
+
231
+ function addToQueue(songId) {
232
+ queue.push(songId);
233
+ renderQueue();
234
+ }
235
+
236
+ function addRandomSong() {
237
+ const randomIndex = Math.floor(Math.random() * songs.length);
238
+ addToQueue(songs[randomIndex].id);
239
+ }
240
+
241
+ function removeFromQueue(index) {
242
+ queue.splice(index, 1);
243
+ renderQueue();
244
+ }
245
+
246
+ function moveUp(index) {
247
+ if (index > 0) {
248
+ [queue[index], queue[index - 1]] = [queue[index - 1], queue[index]];
249
+ renderQueue();
250
+ }
251
+ }
252
+
253
+ function moveDown(index) {
254
+ if (index < queue.length - 1) {
255
+ [queue[index], queue[index + 1]] = [queue[index + 1], queue[index]];
256
+ renderQueue();
257
+ }
258
+ }
259
+
260
+ function dropInPlayer(playerNum) {
261
+ alert(`Player ${playerNum} dropped in!`);
262
+ // In a real app, this would connect to your backend/API
263
+ }
264
+
265
+ document.getElementById('song-search').addEventListener('input', function(e) {
266
+ const searchTerm = e.target.value.toLowerCase();
267
+ const songItems = document.querySelectorAll('#song-list .song-item');
268
+
269
+ songItems.forEach(item => {
270
+ const text = item.textContent.toLowerCase();
271
+ item.style.display = text.includes(searchTerm) ? 'flex' : 'none';
272
+ });
273
+ });
274
+
275
+ // Initialize
276
+ document.addEventListener('DOMContentLoaded', function() {
277
+ renderSongs();
278
+ renderQueue();
279
+ feather.replace();
280
+ });
281
+ </script>
282
+ </body>
283
+ </html>