Hugging Face's logo

Spaces:
AdminServerCEO
/
bot-website-music
Running

App Files Community
AdminServerCEO commited on
Commit
c5d47e4
·
verified ·
1 Parent(s): 1550aae

hey my firend can make me "MODERN STYLE" dashborad for discord bot multi poorpose specially i need music features modern style classic smooth running newest features using advanced porgaming language used tp made it "talinwind" or "next.js" whatever u can use it to made best and top leading language and make sure to give me every code function i need full code with 1000000 lcode lines and dahsborad works with database and add config.json to paste mongodb url u know it right make sure all functions works propely and changing add color changing module like themes "modern red with white cream mix", "modern blue with white cream mix", modern green with white cream mix, modern yellow, purple, orange, deepPink, with white cream mix, and made it main page like discord bot page i need 3d deisn for it u can use any image with svg or made it for u like illuaster best ever u maded okay always give me the diffreant files folders example main.html, pages.html, 404.html color.css or settings.tsx, like this - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +766 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Bot Website Music
3
- emoji: 💻
4
- colorFrom: gray
5
- colorTo: green
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: bot-website-music
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,766 @@
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" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>HarmonyBot - Modern Discord Bot Dashboard</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ 'discord-blurple': '#5865F2',
15
+ 'discord-green': '#57F287',
16
+ 'discord-yellow': '#FEE75C',
17
+ 'discord-red': '#ED4245',
18
+ 'cream-white': '#F8F4E9',
19
+ 'deep-pink': '#FF1493',
20
+ 'modern-red': '#FF6B6B',
21
+ 'modern-blue': '#4D96FF',
22
+ 'modern-green': '#6BCB77',
23
+ 'modern-yellow': '#FFD93D',
24
+ 'modern-purple': '#9C51E0',
25
+ 'modern-orange': '#FF9C33'
26
+ },
27
+ animation: {
28
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
29
+ 'float': 'float 6s ease-in-out infinite',
30
+ 'bounce-slow': 'bounce 3s infinite'
31
+ },
32
+ keyframes: {
33
+ float: {
34
+ '0%, 100%': { transform: 'translateY(0)' },
35
+ '50%': { transform: 'translateY(-20px)' },
36
+ }
37
+ }
38
+ }
39
+ }
40
+ }
41
+ </script>
42
+ <style>
43
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
44
+
45
+ body {
46
+ font-family: 'Poppins', sans-serif;
47
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
48
+ color: #f0f0f0;
49
+ overflow-x: hidden;
50
+ }
51
+
52
+ .glass-card {
53
+ background: rgba(255, 255, 255, 0.08);
54
+ backdrop-filter: blur(12px);
55
+ -webkit-backdrop-filter: blur(12px);
56
+ border-radius: 16px;
57
+ border: 1px solid rgba(255, 255, 255, 0.1);
58
+ }
59
+
60
+ .theme-red { --primary: #FF6B6B; --secondary: #FF8E8E; }
61
+ .theme-blue { --primary: #4D96FF; --secondary: #6DAAFF; }
62
+ .theme-green { --primary: #6BCB77; --secondary: #8CDB96; }
63
+ .theme-yellow { --primary: #FFD93D; --secondary: #FFE16D; }
64
+ .theme-purple { --primary: #9C51E0; --secondary: #B174EA; }
65
+ .theme-orange { --primary: #FF9C33; --secondary: #FFB15D; }
66
+ .theme-deeppink { --primary: #FF1493; --secondary: #FF4DA6; }
67
+
68
+ .active-theme {
69
+ --primary-bg: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
70
+ --text-primary: var(--primary);
71
+ }
72
+
73
+ .btn-primary {
74
+ background: var(--primary-bg);
75
+ color: white;
76
+ transition: all 0.3s ease;
77
+ }
78
+
79
+ .btn-primary:hover {
80
+ transform: translateY(-3px);
81
+ box-shadow: 0 10px 20px -10px var(--primary);
82
+ }
83
+
84
+ .text-primary {
85
+ color: var(--primary);
86
+ }
87
+
88
+ .bg-primary {
89
+ background: var(--primary);
90
+ }
91
+
92
+ .border-primary {
93
+ border-color: var(--primary);
94
+ }
95
+
96
+ .discord-btn {
97
+ background: #5865F2;
98
+ transition: all 0.3s ease;
99
+ }
100
+
101
+ .discord-btn:hover {
102
+ background: #4752c4;
103
+ transform: translateY(-2px);
104
+ }
105
+
106
+ .music-card:hover {
107
+ transform: translateY(-5px);
108
+ box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
109
+ }
110
+
111
+ .player-controls button:hover {
112
+ transform: scale(1.1);
113
+ }
114
+
115
+ .volume-slider::-webkit-slider-thumb {
116
+ -webkit-appearance: none;
117
+ appearance: none;
118
+ width: 20px;
119
+ height: 20px;
120
+ border-radius: 50%;
121
+ background: var(--primary);
122
+ cursor: pointer;
123
+ }
124
+
125
+ .progress-bar::-webkit-slider-thumb {
126
+ -webkit-appearance: none;
127
+ appearance: none;
128
+ width: 15px;
129
+ height: 15px;
130
+ border-radius: 50%;
131
+ background: var(--primary);
132
+ cursor: pointer;
133
+ }
134
+
135
+ .pulse {
136
+ animation: pulse-slow 2s infinite;
137
+ }
138
+
139
+ .floating {
140
+ animation: float 6s ease-in-out infinite;
141
+ }
142
+
143
+ .server-card:hover .server-icon {
144
+ transform: scale(1.1);
145
+ }
146
+
147
+ .theme-selector {
148
+ transition: all 0.3s ease;
149
+ }
150
+
151
+ .theme-selector:hover {
152
+ transform: scale(1.1);
153
+ box-shadow: 0 0 20px rgba(255,255,255,0.2);
154
+ }
155
+
156
+ .theme-selector.active {
157
+ box-shadow: 0 0 0 3px white;
158
+ }
159
+
160
+ .sidebar-link:hover {
161
+ background: rgba(255, 255, 255, 0.1);
162
+ }
163
+
164
+ .sidebar-link.active {
165
+ background: var(--primary-bg);
166
+ }
167
+
168
+ .sidebar-link.active i {
169
+ color: white;
170
+ }
171
+
172
+ .guild-icon {
173
+ transition: all 0.3s ease;
174
+ }
175
+
176
+ .guild-icon:hover {
177
+ transform: scale(1.1);
178
+ box-shadow: 0 0 20px rgba(0,0,0,0.3);
179
+ }
180
+
181
+ .stat-card:hover {
182
+ transform: translateY(-5px);
183
+ }
184
+
185
+ .command-card:hover {
186
+ transform: translateY(-3px);
187
+ box-shadow: 0 10px 20px -10px rgba(0,0,0,0.2);
188
+ }
189
+
190
+ .animate-float {
191
+ animation: float 8s ease-in-out infinite;
192
+ }
193
+
194
+ .animate-bounce-slow {
195
+ animation: bounce-slow 3s infinite;
196
+ }
197
+ </style>
198
+ </head>
199
+ <body class="active-theme theme-blue">
200
+ <!-- Navigation -->
201
+ <nav class="glass-card fixed top-0 left-0 right-0 z-50 py-4 px-6 flex justify-between items-center">
202
+ <div class="flex items-center space-x-3">
203
+ <div class="bg-discord-blurple w-10 h-10 rounded-full flex items-center justify-center">
204
+ <i class="fas fa-headphones-alt text-white text-xl"></i>
205
+ </div>
206
+ <h1 class="text-2xl font-bold">Harmony<span class="text-primary">Bot</span></h1>
207
+ </div>
208
+
209
+ <div class="hidden md:flex space-x-8">
210
+ <a href="#" class="text-white hover:text-primary transition">Dashboard</a>
211
+ <a href="#" class="text-white hover:text-primary transition">Commands</a>
212
+ <a href="#" class="text-white hover:text-primary transition">Music</a>
213
+ <a href="#" class="text-white hover:text-primary transition">Settings</a>
214
+ <a href="#" class="text-white hover:text-primary transition">Premium</a>
215
+ </div>
216
+
217
+ <div class="flex items-center space-x-4">
218
+ <button class="bg-discord-blurple text-white px-4 py-2 rounded-lg discord-btn flex items-center">
219
+ <i class="fab fa-discord mr-2"></i> Login with Discord
220
+ </button>
221
+ <button id="theme-toggle" class="bg-gray-800 text-white p-2 rounded-lg">
222
+ <i class="fas fa-moon"></i>
223
+ </button>
224
+ <button class="md:hidden text-white">
225
+ <i class="fas fa-bars text-2xl"></i>
226
+ </button>
227
+ </div>
228
+ </nav>
229
+
230
+ <!-- Main Content -->
231
+ <div class="flex pt-20 min-h-screen">
232
+ <!-- Sidebar -->
233
+ <div class="glass-card hidden md:block w-64 min-h-screen p-6 fixed">
234
+ <div class="text-center mb-10">
235
+ <div class="relative mx-auto w-32 h-32 rounded-full overflow-hidden border-4 border-white mb-4">
236
+ <img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="User Avatar" class="w-full h-full object-cover">
237
+ <div class="absolute bottom-0 right-0 bg-discord-green w-6 h-6 rounded-full border-2 border-white"></div>
238
+ </div>
239
+ <h3 class="text-xl font-bold">MusicLover#1234</h3>
240
+ <p class="text-gray-400">Premium User</p>
241
+ </div>
242
+
243
+ <div class="space-y-2 mb-10">
244
+ <a href="#" class="sidebar-link active flex items-center space-x-3 p-3 rounded-lg text-white">
245
+ <i class="fas fa-home text-primary"></i>
246
+ <span>Dashboard</span>
247
+ </a>
248
+ <a href="#" class="sidebar-link flex items-center space-x-3 p-3 rounded-lg text-white">
249
+ <i class="fas fa-music text-primary"></i>
250
+ <span>Music Player</span>
251
+ </a>
252
+ <a href="#" class="sidebar-link flex items-center space-x-3 p-3 rounded-lg text-white">
253
+ <i class="fas fa-sliders-h text-primary"></i>
254
+ <span>Bot Settings</span>
255
+ </a>
256
+ <a href="#" class="sidebar-link flex items-center space-x-3 p-3 rounded-lg text-white">
257
+ <i class="fas fa-cog text-primary"></i>
258
+ <span>Server Settings</span>
259
+ </a>
260
+ <a href="#" class="sidebar-link flex items-center space-x-3 p-3 rounded-lg text-white">
261
+ <i class="fas fa-robot text-primary"></i>
262
+ <span>Commands</span>
263
+ </a>
264
+ <a href="#" class="sidebar-link flex items-center space-x-3 p-3 rounded-lg text-white">
265
+ <i class="fas fa-crown text-primary"></i>
266
+ <span>Premium</span>
267
+ </a>
268
+ </div>
269
+
270
+ <div class="mb-6">
271
+ <h4 class="text-lg font-semibold mb-3">Theme Selector</h4>
272
+ <div class="grid grid-cols-3 gap-3">
273
+ <div class="theme-selector theme-red active h-8 rounded cursor-pointer" data-theme="red"></div>
274
+ <div class="theme-selector theme-blue h-8 rounded cursor-pointer" data-theme="blue"></div>
275
+ <div class="theme-selector theme-green h-8 rounded cursor-pointer" data-theme="green"></div>
276
+ <div class="theme-selector theme-yellow h-8 rounded cursor-pointer" data-theme="yellow"></div>
277
+ <div class="theme-selector theme-purple h-8 rounded cursor-pointer" data-theme="purple"></div>
278
+ <div class="theme-selector theme-orange h-8 rounded cursor-pointer" data-theme="orange"></div>
279
+ <div class="theme-selector theme-deeppink h-8 rounded cursor-pointer" data-theme="deeppink"></div>
280
+ </div>
281
+ </div>
282
+
283
+ <div class="text-center mt-10">
284
+ <button class="btn-primary px-4 py-2 rounded-lg w-full font-medium">Invite Bot</button>
285
+ </div>
286
+ </div>
287
+
288
+ <!-- Dashboard Content -->
289
+ <div class="flex-1 md:ml-64 p-6">
290
+ <!-- Welcome Banner -->
291
+ <div class="glass-card p-8 rounded-2xl mb-8 relative overflow-hidden">
292
+ <div class="absolute top-0 right-0 w-64 h-64 bg-discord-blurple rounded-full opacity-20 transform translate-x-32 -translate-y-32"></div>
293
+ <div class="absolute bottom-0 left-0 w-48 h-48 bg-discord-green rounded-full opacity-20 transform -translate-x-24 translate-y-24"></div>
294
+
295
+ <div class="relative z-10 flex flex-col md:flex-row items-center">
296
+ <div class="flex-1 mb-6 md:mb-0">
297
+ <h1 class="text-3xl md:text-4xl font-bold mb-4">Welcome to Harmony<span class="text-primary">Bot</span> Dashboard</h1>
298
+ <p class="text-gray-300 mb-6">The ultimate music bot for Discord with premium sound quality, lyrics, playlists and more!</p>
299
+ <div class="flex space-x-4">
300
+ <button class="btn-primary px-6 py-3 rounded-lg font-medium">Get Started</button>
301
+ <button class="bg-white text-gray-900 px-6 py-3 rounded-lg font-medium">Documentation</button>
302
+ </div>
303
+ </div>
304
+ <div class="w-64 h-64 relative">
305
+ <div class="absolute top-0 left-0 w-full h-full bg-discord-blurple rounded-full animate-pulse opacity-20"></div>
306
+ <div class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
307
+ <div class="bg-gray-800 rounded-full w-48 h-48 flex items-center justify-center">
308
+ <i class="fas fa-music text-6xl text-primary"></i>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </div>
314
+
315
+ <!-- Stats Overview -->
316
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
317
+ <div class="glass-card stat-card p-6 rounded-2xl transition">
318
+ <div class="flex justify-between items-center">
319
+ <div>
320
+ <h3 class="text-gray-400 text-sm">Servers</h3>
321
+ <p class="text-3xl font-bold">128</p>
322
+ </div>
323
+ <div class="w-12 h-12 bg-discord-green bg-opacity-20 rounded-full flex items-center justify-center">
324
+ <i class="fas fa-server text-discord-green text-xl"></i>
325
+ </div>
326
+ </div>
327
+ <div class="mt-4">
328
+ <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
329
+ <div class="h-full bg-discord-green rounded-full" style="width: 75%"></div>
330
+ </div>
331
+ <p class="text-xs text-gray-400 mt-2">+12 this month</p>
332
+ </div>
333
+ </div>
334
+
335
+ <div class="glass-card stat-card p-6 rounded-2xl transition">
336
+ <div class="flex justify-between items-center">
337
+ <div>
338
+ <h3 class="text-gray-400 text-sm">Users</h3>
339
+ <p class="text-3xl font-bold">24.5K</p>
340
+ </div>
341
+ <div class="w-12 h-12 bg-discord-blurple bg-opacity-20 rounded-full flex items-center justify-center">
342
+ <i class="fas fa-users text-discord-blurple text-xl"></i>
343
+ </div>
344
+ </div>
345
+ <div class="mt-4">
346
+ <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
347
+ <div class="h-full bg-discord-blurple rounded-full" style="width: 60%"></div>
348
+ </div>
349
+ <p class="text-xs text-gray-400 mt-2">+1.2K this month</p>
350
+ </div>
351
+ </div>
352
+
353
+ <div class="glass-card stat-card p-6 rounded-2xl transition">
354
+ <div class="flex justify-between items-center">
355
+ <div>
356
+ <h3 class="text-gray-400 text-sm">Songs Played</h3>
357
+ <p class="text-3xl font-bold">1.2M</p>
358
+ </div>
359
+ <div class="w-12 h-12 bg-discord-yellow bg-opacity-20 rounded-full flex items-center justify-center">
360
+ <i class="fas fa-play-circle text-discord-yellow text-xl"></i>
361
+ </div>
362
+ </div>
363
+ <div class="mt-4">
364
+ <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
365
+ <div class="h-full bg-discord-yellow rounded-full" style="width: 85%"></div>
366
+ </div>
367
+ <p class="text-xs text-gray-400 mt-2">+45K today</p>
368
+ </div>
369
+ </div>
370
+
371
+ <div class="glass-card stat-card p-6 rounded-2xl transition">
372
+ <div class="flex justify-between items-center">
373
+ <div>
374
+ <h3 class="text-gray-400 text-sm">Uptime</h3>
375
+ <p class="text-3xl font-bold">99.8%</p>
376
+ </div>
377
+ <div class="w-12 h-12 bg-discord-red bg-opacity-20 rounded-full flex items-center justify-center">
378
+ <i class="fas fa-heartbeat text-discord-red text-xl"></i>
379
+ </div>
380
+ </div>
381
+ <div class="mt-4">
382
+ <div class="h-2 bg-gray-700 rounded-full overflow-hidden">
383
+ <div class="h-full bg-discord-red rounded-full" style="width: 99%"></div>
384
+ </div>
385
+ <p class="text-xs text-gray-400 mt-2">Last restart: 14 days ago</p>
386
+ </div>
387
+ </div>
388
+ </div>
389
+
390
+ <!-- Music Player -->
391
+ <div class="glass-card p-6 rounded-2xl mb-8">
392
+ <div class="flex justify-between items-center mb-6">
393
+ <h2 class="text-2xl font-bold">Music Player</h2>
394
+ <button class="btn-primary px-4 py-2 rounded-lg">Play All</button>
395
+ </div>
396
+
397
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
398
+ <div class="music-card glass-card p-4 rounded-xl transition cursor-pointer">
399
+ <div class="relative mb-4">
400
+ <img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Album Cover" class="w-full h-48 object-cover rounded-lg">
401
+ <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 rounded-full w-10 h-10 flex items-center justify-center">
402
+ <i class="fas fa-play text-white"></i>
403
+ </div>
404
+ </div>
405
+ <h3 class="font-bold text-lg mb-1">Summer Vibes</h3>
406
+ <p class="text-gray-400 text-sm">Various Artists</p>
407
+ <div class="flex justify-between items-center mt-3">
408
+ <span class="text-sm text-gray-400">3:45</span>
409
+ <div class="flex space-x-2">
410
+ <button class="text-gray-400 hover:text-primary"><i class="fas fa-heart"></i></button>
411
+ <button class="text-gray-400 hover:text-primary"><i class="fas fa-plus"></i></button>
412
+ </div>
413
+ </div>
414
+ </div>
415
+
416
+ <div class="music-card glass-card p-4 rounded-xl transition cursor-pointer">
417
+ <div class="relative mb-4">
418
+ <img src="https://images.unsplash.com/photo-1494232410401-ad00d5433cfa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Album Cover" class="w-full h-48 object-cover rounded-lg">
419
+ <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 rounded-full w-10 h-10 flex items-center justify-center">
420
+ <i class="fas fa-play text-white"></i>
421
+ </div>
422
+ </div>
423
+ <h3 class="font-bold text-lg mb-1">Chill Beats</h3>
424
+ <p class="text-gray-400 text-sm">LoFi Producers</p>
425
+ <div class="flex justify-between items-center mt-3">
426
+ <span class="text-sm text-gray-400">4:20</span>
427
+ <div class="flex space-x-2">
428
+ <button class="text-gray-400 hover:text-primary"><i class="fas fa-heart"></i></button>
429
+ <button class="text-gray-400 hover:text-primary"><i class="fas fa-plus"></i></button>
430
+ </div>
431
+ </div>
432
+ </div>
433
+
434
+ <div class="music-card glass-card p-4 rounded-xl transition cursor-pointer">
435
+ <div class="relative mb-4">
436
+ <img src="https://images.unsplash.com/photo-1507838153414-b4b713384a76?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Album Cover" class="w-full h-48 object-cover rounded-lg">
437
+ <div class="absolute bottom-2 right-2 bg-black bg-opacity-50 rounded-full w-10 h-10 flex items-center justify-center">
438
+ <i class="fas fa-play text-white"></i>
439
+ </div>
440
+ </div>
441
+ <h3 class="font-bold text-lg mb-1">Rock Classics</h3>
442
+ <p class="text-gray-400 text-sm">Legendary Bands</p>
443
+ <div class="flex justify-between items-center mt-3">
444
+ <span class="text-sm text-gray-400">5:12</span>
445
+ <div class="flex space-x-2">
446
+ <button class="text-gray-400 hover:text-primary"><i class="fas fa-heart"></i></button>
447
+ <button class="text-gray-400 hover:text-primary"><i class="fas fa-plus"></i></button>
448
+ </div>
449
+ </div>
450
+ </div>
451
+ </div>
452
+
453
+ <!-- Now Playing -->
454
+ <div class="glass-card p-6 rounded-2xl">
455
+ <div class="flex flex-col md:flex-row items-center">
456
+ <div class="mb-6 md:mb-0 md:mr-6 relative">
457
+ <img src="https://images.unsplash.com/photo-1470225620780-dba8ba36b745?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Now Playing" class="w-48 h-48 rounded-xl object-cover">
458
+ <div class="absolute inset-0 bg-black bg-opacity-30 rounded-xl flex items-center justify-center opacity-0 hover:opacity-100 transition">
459
+ <button class="w-16 h-16 bg-white bg-opacity-80 rounded-full flex items-center justify-center">
460
+ <i class="fas fa-play text-black text-xl"></i>
461
+ </button>
462
+ </div>
463
+ </div>
464
+
465
+ <div class="flex-1 w-full">
466
+ <h3 class="text-2xl font-bold mb-2">Summer Vibes</h3>
467
+ <p class="text-gray-400 mb-4">Various Artists • 128,402 plays</p>
468
+
469
+ <div class="mb-4">
470
+ <div class="relative mb-2">
471
+ <input type="range" min="0" max="100" value="35" class="progress-bar w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
472
+ </div>
473
+ <div class="flex justify-between text-sm text-gray-400">
474
+ <span>1:24</span>
475
+ <span>3:45</span>
476
+ </div>
477
+ </div>
478
+
479
+ <div class="flex items-center justify-between mb-6">
480
+ <div class="flex space-x-4">
481
+ <button class="player-controls text-gray-400 hover:text-white text-xl">
482
+ <i class="fas fa-random"></i>
483
+ </button>
484
+ <button class="player-controls text-gray-400 hover:text-white text-2xl">
485
+ <i class="fas fa-step-backward"></i>
486
+ </button>
487
+ <button class="player-controls w-12 h-12 rounded-full bg-primary flex items-center justify-center text-white text-2xl">
488
+ <i class="fas fa-pause"></i>
489
+ </button>
490
+ <button class="player-controls text-gray-400 hover:text-white text-2xl">
491
+ <i class="fas fa-step-forward"></i>
492
+ </button>
493
+ <button class="player-controls text-gray-400 hover:text-white text-xl">
494
+ <i class="fas fa-redo"></i>
495
+ </button>
496
+ </div>
497
+
498
+ <div class="flex items-center space-x-3">
499
+ <i class="fas fa-volume-up text-primary"></i>
500
+ <input type="range" min="0" max="100" value="80" class="volume-slider w-24 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
501
+ </div>
502
+ </div>
503
+
504
+ <div class="flex space-x-3">
505
+ <button class="flex items-center space-x-2 px-4 py-2 rounded-lg bg-gray-800 hover:bg-gray-700">
506
+ <i class="fas fa-heart text-discord-red"></i>
507
+ <span>Like</span>
508
+ </button>
509
+ <button class="flex items-center space-x-2 px-4 py-2 rounded-lg bg-gray-800 hover:bg-gray-700">
510
+ <i class="fas fa-plus"></i>
511
+ <span>Add to Playlist</span>
512
+ </button>
513
+ <button class="flex items-center space-x-2 px-4 py-2 rounded-lg bg-gray-800 hover:bg-gray-700">
514
+ <i class="fas fa-share-alt"></i>
515
+ <span>Share</span>
516
+ </button>
517
+ </div>
518
+ </div>
519
+ </div>
520
+ </div>
521
+ </div>
522
+
523
+ <!-- Servers & Commands -->
524
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
525
+ <!-- Top Servers -->
526
+ <div class="glass-card p-6 rounded-2xl">
527
+ <h2 class="text-2xl font-bold mb-6">Your Servers</h2>
528
+ <div class="space-y-4">
529
+ <div class="server-card glass-card p-4 rounded-xl flex items-center cursor-pointer">
530
+ <div class="w-16 h-16 rounded-xl overflow-hidden mr-4">
531
+ <img src="https://images.unsplash.com/photo-1563089145-599997674d42?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Server Icon" class="w-full h-full object-cover">
532
+ </div>
533
+ <div class="flex-1">
534
+ <h3 class="font-bold">Music Lovers</h3>
535
+ <p class="text-sm text-gray-400">128 members • 24 online</p>
536
+ </div>
537
+ <div class="text-primary">
538
+ <i class="fas fa-cog"></i>
539
+ </div>
540
+ </div>
541
+
542
+ <div class="server-card glass-card p-4 rounded-xl flex items-center cursor-pointer">
543
+ <div class="w-16 h-16 rounded-xl overflow-hidden mr-4">
544
+ <img src="https://images.unsplash.com/photo-1511379938547-c1f69419868d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Server Icon" class="w-full h-full object-cover">
545
+ </div>
546
+ <div class="flex-1">
547
+ <h3 class="font-bold">Gaming Community</h3>
548
+ <p class="text-sm text-gray-400">512 members • 86 online</p>
549
+ </div>
550
+ <div class="text-primary">
551
+ <i class="fas fa-cog"></i>
552
+ </div>
553
+ </div>
554
+
555
+ <div class="server-card glass-card p-4 rounded-xl flex items-center cursor-pointer">
556
+ <div class="w-16 h-16 rounded-xl overflow-hidden mr-4">
557
+ <img src="https://images.unsplash.com/photo-1511671782779-c97d3d27a1d4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Server Icon" class="w-full h-full object-cover">
558
+ </div>
559
+ <div class="flex-1">
560
+ <h3 class="font-bold">Art & Design</h3>
561
+ <p class="text-sm text-gray-400">86 members • 12 online</p>
562
+ </div>
563
+ <div class="text-primary">
564
+ <i class="fas fa-cog"></i>
565
+ </div>
566
+ </div>
567
+ </div>
568
+
569
+ <button class="btn-primary w-full mt-6 py-3 rounded-lg">Manage All Servers</button>
570
+ </div>
571
+
572
+ <!-- Popular Commands -->
573
+ <div class="glass-card p-6 rounded-2xl">
574
+ <h2 class="text-2xl font-bold mb-6">Popular Commands</h2>
575
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
576
+ <div class="command-card glass-card p-4 rounded-xl transition cursor-pointer">
577
+ <div class="flex items-center mb-3">
578
+ <div class="w-10 h-10 rounded-lg bg-discord-blurple bg-opacity-20 flex items-center justify-center mr-3">
579
+ <i class="fas fa-play text-discord-blurple"></i>
580
+ </div>
581
+ <h3 class="font-bold">/play</h3>
582
+ </div>
583
+ <p class="text-sm text-gray-400">Play a song or add to queue</p>
584
+ </div>
585
+
586
+ <div class="command-card glass-card p-4 rounded-xl transition cursor-pointer">
587
+ <div class="flex items-center mb-3">
588
+ <div class="w-10 h-10 rounded-lg bg-discord-green bg-opacity-20 flex items-center justify-center mr-3">
589
+ <i class="fas fa-list text-discord-green"></i>
590
+ </div>
591
+ <h3 class="font-bold">/queue</h3>
592
+ </div>
593
+ <p class="text-sm text-gray-400">View the current queue</p>
594
+ </div>
595
+
596
+ <div class="command-card glass-card p-4 rounded-xl transition cursor-pointer">
597
+ <div class="flex items-center mb-3">
598
+ <div class="w-10 h-10 rounded-lg bg-discord-yellow bg-opacity-20 flex items-center justify-center mr-3">
599
+ <i class="fas fa-skip-forward text-discord-yellow"></i>
600
+ </div>
601
+ <h3 class="font-bold">/skip</h3>
602
+ </div>
603
+ <p class="text-sm text-gray-400">Skip the current song</p>
604
+ </div>
605
+
606
+ <div class="command-card glass-card p-4 rounded-xl transition cursor-pointer">
607
+ <div class="flex items-center mb-3">
608
+ <div class="w-10 h-10 rounded-lg bg-discord-red bg-opacity-20 flex items-center justify-center mr-3">
609
+ <i class="fas fa-stop text-discord-red"></i>
610
+ </div>
611
+ <h3 class="font-bold">/stop</h3>
612
+ </div>
613
+ <p class="text-sm text-gray-400">Stop the music player</p>
614
+ </div>
615
+
616
+ <div class="command-card glass-card p-4 rounded-xl transition cursor-pointer">
617
+ <div class="flex items-center mb-3">
618
+ <div class="w-10 h-10 rounded-lg bg-purple-500 bg-opacity-20 flex items-center justify-center mr-3">
619
+ <i class="fas fa-sliders-h text-purple-500"></i>
620
+ </div>
621
+ <h3 class="font-bold">/volume</h3>
622
+ </div>
623
+ <p class="text-sm text-gray-400">Adjust the player volume</p>
624
+ </div>
625
+
626
+ <div class="command-card glass-card p-4 rounded-xl transition cursor-pointer">
627
+ <div class="flex items-center mb-3">
628
+ <div class="w-10 h-10 rounded-lg bg-pink-500 bg-opacity-20 flex items-center justify-center mr-3">
629
+ <i class="fas fa-heart text-pink-500"></i>
630
+ </div>
631
+ <h3 class="font-bold">/favorites</h3>
632
+ </div>
633
+ <p class="text-sm text-gray-400">Manage your favorite songs</p>
634
+ </div>
635
+ </div>
636
+
637
+ <button class="btn-primary w-full mt-6 py-3 rounded-lg">View All Commands</button>
638
+ </div>
639
+ </div>
640
+
641
+ <!-- Footer -->
642
+ <footer class="glass-card p-6 rounded-2xl text-center text-gray-400">
643
+ <div class="flex flex-col md:flex-row justify-between items-center mb-6">
644
+ <div class="flex items-center justify-center mb-4 md:mb-0">
645
+ <div class="bg-discord-blurple w-10 h-10 rounded-full flex items-center justify-center mr-3">
646
+ <i class="fas fa-headphones-alt text-white"></i>
647
+ </div>
648
+ <h2 class="text-xl font-bold">Harmony<span class="text-primary">Bot</span></h2>
649
+ </div>
650
+
651
+ <div class="flex space-x-6 mb-4 md:mb-0">
652
+ <a href="#" class="hover:text-primary transition"><i class="fab fa-discord fa-lg"></i></a>
653
+ <a href="#" class="hover:text-primary transition"><i class="fab fa-twitter fa-lg"></i></a>
654
+ <a href="#" class="hover:text-primary transition"><i class="fab fa-github fa-lg"></i></a>
655
+ <a href="#" class="hover:text-primary transition"><i class="fab fa-youtube fa-lg"></i></a>
656
+ </div>
657
+
658
+ <div>
659
+ <button class="btn-primary px-6 py-2 rounded-lg">Invite Bot</button>
660
+ </div>
661
+ </div>
662
+
663
+ <p class="text-sm">© 2023 HarmonyBot. All rights reserved. Designed with ❤️ for Discord communities.</p>
664
+ <div class="mt-2 text-xs">
665
+ <a href="#" class="hover:text-primary mx-2">Privacy Policy</a> •
666
+ <a href="#" class="hover:text-primary mx-2">Terms of Service</a> •
667
+ <a href="#" class="hover:text-primary mx-2">Support Server</a>
668
+ </div>
669
+ </footer>
670
+ </div>
671
+ </div>
672
+
673
+ <!-- Mobile Bottom Nav -->
674
+ <div class="md:hidden fixed bottom-0 left-0 right-0 glass-card flex justify-around py-3">
675
+ <a href="#" class="text-primary flex flex-col items-center">
676
+ <i class="fas fa-home text-lg"></i>
677
+ <span class="text-xs mt-1">Home</span>
678
+ </a>
679
+ <a href="#" class="text-gray-400 hover:text-primary flex flex-col items-center">
680
+ <i class="fas fa-music text-lg"></i>
681
+ <span class="text-xs mt-1">Music</span>
682
+ </a>
683
+ <a href="#" class="text-gray-400 hover:text-primary flex flex-col items-center">
684
+ <i class="fas fa-sliders-h text-lg"></i>
685
+ <span class="text-xs mt-1">Settings</span>
686
+ </a>
687
+ <a href="#" class="text-gray-400 hover:text-primary flex flex-col items-center">
688
+ <i class="fas fa-user text-lg"></i>
689
+ <span class="text-xs mt-1">Profile</span>
690
+ </a>
691
+ </div>
692
+
693
+ <!-- Floating Music Player -->
694
+ <div class="fixed bottom-20 right-6 w-16 h-16 bg-primary rounded-full flex items-center justify-center shadow-lg cursor-pointer animate-bounce-slow">
695
+ <i class="fas fa-music text-white text-2xl"></i>
696
+ </div>
697
+
698
+ <script>
699
+ // Theme switching functionality
700
+ document.querySelectorAll('.theme-selector').forEach(selector => {
701
+ selector.addEventListener('click', function() {
702
+ const theme = this.getAttribute('data-theme');
703
+ document.body.className = `active-theme theme-${theme}`;
704
+
705
+ // Update active theme indicator
706
+ document.querySelectorAll('.theme-selector').forEach(el => {
707
+ el.classList.remove('active');
708
+ });
709
+ this.classList.add('active');
710
+ });
711
+ });
712
+
713
+ // Dark mode toggle
714
+ const themeToggle = document.getElementById('theme-toggle');
715
+ themeToggle.addEventListener('click', function() {
716
+ document.documentElement.classList.toggle('dark');
717
+ const isDark = document.documentElement.classList.contains('dark');
718
+ themeToggle.innerHTML = isDark ? '<i class="fas fa-moon"></i>' : '<i class="fas fa-sun"></i>';
719
+ });
720
+
721
+ // Simulate music player functionality
722
+ const playButton = document.querySelector('.player-controls .fa-pause');
723
+ playButton.addEventListener('click', function() {
724
+ if (this.classList.contains('fa-pause')) {
725
+ this.classList.remove('fa-pause');
726
+ this.classList.add('fa-play');
727
+ } else {
728
+ this.classList.remove('fa-play');
729
+ this.classList.add('fa-pause');
730
+ }
731
+ });
732
+
733
+ // Simulate volume control
734
+ const volumeSlider = document.querySelector('.volume-slider');
735
+ volumeSlider.addEventListener('input', function() {
736
+ const volumeIcon = this.previousElementSibling;
737
+ if (this.value < 1) {
738
+ volumeIcon.className = 'fas fa-volume-mute text-primary';
739
+ } else if (this.value < 50) {
740
+ volumeIcon.className = 'fas fa-volume-down text-primary';
741
+ } else {
742
+ volumeIcon.className = 'fas fa-volume-up text-primary';
743
+ }
744
+ });
745
+
746
+ // Simulate progress bar
747
+ const progressBar = document.querySelector('.progress-bar');
748
+ progressBar.addEventListener('input', function() {
749
+ // In a real app, this would update the player position
750
+ });
751
+
752
+ // Add hover effects to music cards
753
+ document.querySelectorAll('.music-card').forEach(card => {
754
+ card.addEventListener('mouseenter', function() {
755
+ this.style.transform = 'translateY(-5px)';
756
+ this.style.boxShadow = '0 20px 25px -15px rgba(0, 0, 0, 0.3)';
757
+ });
758
+
759
+ card.addEventListener('mouseleave', function() {
760
+ this.style.transform = 'translateY(0)';
761
+ this.style.boxShadow = '';
762
+ });
763
+ });
764
+ </script>
765
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AdminServerCEO/bot-website-music" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
766
+ </html>