File size: 28,921 Bytes
c15391c
 
 
 
 
2cb5e1d
c15391c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2cb5e1d
c15391c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2cb5e1d
c15391c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2cb5e1d
c15391c
 
 
 
2cb5e1d
c15391c
 
 
 
 
2cb5e1d
c15391c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2cb5e1d
 
c15391c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2cb5e1d
c15391c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2cb5e1d
c15391c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2cb5e1d
c15391c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
29ba4d3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e4bf2a0
c15391c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
e4bf2a0
c15391c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SystemXBot - Advanced Discord Bot</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #0f0f13;
            color: #fff;
            scroll-behavior: smooth;
        }
        
        .gradient-text {
            background: linear-gradient(90deg, #7289da, #3a71c1);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(114, 137, 218, 0.3);
        }
        
        .discord-blurple {
            background-color: #7289da;
        }
        
        .discord-dark {
            background-color: #36393f;
        }
        
        .discord-darker {
            background-color: #2f3136;
        }
        
        .glow {
            box-shadow: 0 0 15px rgba(114, 137, 218, 0.5);
        }
        
        .command::before {
            content: "/";
            color: #7289da;
            font-weight: bold;
        }
        
        .stats-counter {
            transition: all 0.5s ease;
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="fixed w-full z-50 bg-gray-900 bg-opacity-90 backdrop-filter backdrop-blur-lg">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex items-center justify-between h-16">
                <div class="flex items-center">
                    <div class="flex-shrink-0">
                        <span class="text-2xl font-bold gradient-text">SystemXBot</span>
                    </div>
                    <div class="hidden md:block">
                        <div class="ml-10 flex items-baseline space-x-4">
                            <a href="#home" class="px-3 py-2 rounded-md text-sm font-medium text-white hover:bg-discord-dark transition">Home</a>
                            <a href="#features" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-discord-dark transition">Features</a>
                            <a href="#commands" class="px-3 py-2 rounded-md text-sm font-medium text-gray-300 hover:text-white hover:bg-discord-dark transition">Commands</a>
                        </div>
                    </div>
                </div>
                <div class="hidden md:block">
                    <div class="ml-4 flex items-center md:ml-6">
                        <a href="#" class="px-4 py-2 rounded-md text-sm font-medium text-white bg-discord-blurple hover:bg-blue-600 transition flex items-center">
                            <i class="fab fa-discord mr-2"></i> Invite Bot
                        </a>
                    </div>
                </div>
                <div class="-mr-2 flex md:hidden">
                    <button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-discord-dark focus:outline-none">
                        <span class="sr-only">Open main menu</span>
                        <i class="fas fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Mobile menu -->
        <div class="hidden md:hidden" id="mobile-menu">
            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
                <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-white hover:bg-discord-dark transition">Home</a>
                <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-discord-dark transition">Features</a>
                <a href="#commands" class="block px-3 py-2 rounded-md text-base font-medium text-gray-300 hover:text-white hover:bg-discord-dark transition">Commands</a>
                <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-discord-blurple hover:bg-blue-600 transition flex items-center justify-center">
                    <i class="fab fa-discord mr-2"></i> Invite Bot
                </a>
            </div>
        </div>
    </nav>

    <!-- Hero Section -->
    <section id="home" class="pt-24 pb-16 md:pt-32 md:pb-24 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
        <div class="flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-10 md:mb-0">
                <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-4">Your Ultimate <span class="gradient-text">Discord</span> Companion</h1>
                <p class="text-lg md:text-xl text-gray-300 mb-8">SystemXBot brings powerful moderation, music, ticketing, and more to your Discord server with an intuitive interface and robust features.</p>
                <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
                    <a href="#" class="px-6 py-3 rounded-md text-lg font-medium text-white bg-discord-blurple hover:bg-blue-600 transition flex items-center justify-center glow">
                        <i class="fab fa-discord mr-2"></i> Add to Discord
                    </a>
                    <a href="#features" class="px-6 py-3 rounded-md text-lg font-medium text-white border border-gray-600 hover:bg-discord-dark transition flex items-center justify-center">
                        <i class="fas fa-star mr-2"></i> Explore Features
                    </a>
                </div>
            </div>
            <div class="md:w-1/2 flex justify-center">
                <div class="relative w-full max-w-md">
                    <div class="absolute -inset-4 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl blur opacity-25"></div>
                    <div class="relative bg-discord-dark rounded-xl p-2 shadow-2xl">
                        <div class="bg-discord-darker rounded-lg overflow-hidden">
                            <div class="flex items-center px-4 py-3 bg-discord-dark border-b border-gray-700">
                                <div class="flex space-x-2">
                                    <div class="w-3 h-3 rounded-full bg-red-500"></div>
                                    <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
                                    <div class="w-3 h-3 rounded-full bg-green-500"></div>
                                </div>
                                <div class="ml-4 text-sm font-medium">System X Bot Dashboard</div>
                            </div>
                            <div class="p-4">
                                <div class="flex items-center mb-4">
                                    <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white font-bold">SX</div>
                                    <div class="ml-3">
                                        <div class="font-medium">SystemXBot</div>
                                        <div class="text-xs text-gray-400">Today at 12:34 PM</div>
                                    </div>
                                </div>
                                <div class="bg-discord-dark rounded-lg p-3 mb-3">
                                    <p class="text-sm">Hey there! 👋 I'm SystemXBot, your all-in-one Discord solution.</p>
                                    <p class="text-sm mt-1">Type <span class="command">/help</span> to see what I can do!</p>
                                </div>
                                <div class="flex items-center">
                                    <div class="w-8 h-8 rounded-full bg-gray-600 flex items-center justify-center text-white font-bold">U</div>
                                    <div class="ml-2 bg-discord-dark rounded-lg p-2 flex-1 flex items-center">
                                        <input type="text" placeholder="Message SystemXBot..." class="bg-transparent border-none outline-none w-full text-sm">
                                        <i class="fas fa-paper-plane text-gray-400 ml-2"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Stats Section -->
    <section class="py-12 bg-discord-darker">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                <div class="bg-discord-dark rounded-xl p-6 text-center stats-counter">
                    <div class="text-4xl font-bold text-blue-400 mb-2" id="servers-count">0</div>
                    <div class="text-gray-300 uppercase text-sm tracking-wider">Servers</div>
                </div>
                <div class="bg-discord-dark rounded-xl p-6 text-center stats-counter">
                    <div class="text-4xl font-bold text-purple-400 mb-2" id="users-count">0</div>
                    <div class="text-gray-300 uppercase text-sm tracking-wider">Users</div>
                </div>
                <div class="bg-discord-dark rounded-xl p-6 text-center stats-counter">
                    <div class="text-4xl font-bold text-green-400 mb-2" id="commands-count">0</div>
                    <div class="text-gray-300 uppercase text-sm tracking-wider">Commands</div>
                </div>
            </div>
        </div>
    </section>

    <!-- Features Section -->
    <section id="features" class="py-16 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
        <div class="text-center mb-16">
            <h2 class="text-3xl md:text-4xl font-bold mb-4">Powerful <span class="gradient-text">Features</span></h2>
            <p class="text-lg text-gray-300 max-w-3xl mx-auto">
                systemxbot comes packed with everything you need to manage and enhance your Discord community</p>
        </div>
        
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            <!-- Feature 1 -->
            <div class="bg-discord-dark rounded-xl p-6 feature-card transition duration-300 hover:border-blue-500 border border-transparent">
                <div class="w-12 h-12 rounded-full bg-blue-500 bg-opacity-20 flex items-center justify-center text-blue-400 mb-4">
                    <i class="fas fa-ticket-alt text-xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-2">Advanced Ticketing</h3>
                <p class="text-gray-300">Create customizable ticket systems with roles, categories, and transcripts. Perfect for support teams and staff applications.</p>
            </div>
            
            <!-- Feature 2 -->
            <div class="bg-discord-dark rounded-xl p-6 feature-card transition duration-300 hover:border-purple-500 border border-transparent">
                <div class="w-12 h-12 rounded-full bg-purple-500 bg-opacity-20 flex items-center justify-center text-purple-400 mb-4">
                    <i class="fas fa-music text-xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-2">High Quality Music</h3>
                <p class="text-gray-300">Play music from YouTube, Spotify, and more with crystal clear quality. Queue management, playlists, and 24/7 playback.</p>
            </div>
            
            <!-- Feature 3 -->
            <div class="bg-discord-dark rounded-xl p-6 feature-card transition duration-300 hover:border-green-500 border border-transparent">
                <div class="w-12 h-12 rounded-full bg-green-500 bg-opacity-20 flex items-center justify-center text-green-400 mb-4">
                    <i class="fas fa-user-shield text-xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-2">Moderation Tools</h3>
                <p class="text-gray-300">Advanced moderation with warnings, auto-moderation, logging, and temporary punishments. Keep your server safe and clean.</p>
            </div>
            
            <!-- Feature 4 -->
            <div class="bg-discord-dark rounded-xl p-6 feature-card transition duration-300 hover:border-yellow-500 border border-transparent">
                <div class="w-12 h-12 rounded-full bg-yellow-500 bg-opacity-20 flex items-center justify-center text-yellow-400 mb-4">
                    <i class="fas fa-door-open text-xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-2">Welcome/Leave Messages</h3>
                <p class="text-gray-300">Customizable welcome and leave messages with embeds, images, and DM options. Make new members feel at home.</p>
            </div>
            
            <!-- Feature 5 -->
            <div class="bg-discord-dark rounded-xl p-6 feature-card transition duration-300 hover:border-red-500 border border-transparent">
                <div class="w-12 h-12 rounded-full bg-red-500 bg-opacity-20 flex items-center justify-center text-red-400 mb-4">
                    <i class="fas fa-coins text-xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-2">Economy System</h3>
                <p class="text-gray-300">Engage your members with a full economy system including currency, shops, leaderboards, and mini-games.</p>
            </div>
            
            <!-- Feature 6 -->
            <div class="bg-discord-dark rounded-xl p-6 feature-card transition duration-300 hover:border-pink-500 border border-transparent">
                <div class="w-12 h-12 rounded-full bg-pink-500 bg-opacity-20 flex items-center justify-center text-pink-400 mb-4">
                    <i class="fas fa-sliders-h text-xl"></i>
                </div>
                <h3 class="text-xl font-bold mb-2">Custom Dashboard</h3>
                <p class="text-gray-300">Easy-to-use web dashboard to configure all bot settings without needing to remember commands.</p>
            </div>
        </div>
    </section>

    <!-- Commands Section -->
    <section id="commands" class="py-16 bg-discord-darker px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto">
            <div class="text-center mb-16">
                <h2 class="text-3xl md:text-4xl font-bold mb-4">Bot <span class="gradient-text">Commands</span></h2>
                <p class="text-lg text-gray-300 max-w-3xl mx-auto">Explore SystemXBot's comprehensive command list</p>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <!-- Moderation Commands -->
                <div class="bg-discord-dark rounded-xl p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center text-white">
                            <i class="fas fa-shield-alt"></i>
                        </div>
                        <h3 class="text-xl font-bold ml-3">Moderation</h3>
                    </div>
                    <div class="space-y-3">
                        <div class="bg-discord-darker rounded-lg p-3">
                            <div class="font-medium command">ban @user [reason]</div>
                            <div class="text-sm text-gray-400 mt-1">Ban a user from the server</div>
                        </div>
                        <div class="bg-discord-darker rounded-lg p-3">
                            <div class="font-medium command">kick @user [reason]</div>
                            <div class="text-sm text-gray-400 mt-1">Kick a user from the server</div>
                        </div>
                        <div class="bg-discord-darker rounded-lg p-3">
                            <div class="font-medium command">mute @user [time] [reason]</div>
                            <div class="text-sm text-gray-400 mt-1">Timeout a user temporarily</div>
                        </div>
                        <div class="bg-discord-darker rounded-lg p-3">
                            <div class="font-medium command">warn @user [reason]</div>
                            <div class="text-sm text-gray-400 mt-1">Issue a warning to a user</div>
                        </div>
                    </div>
                </div>
                
                <!-- Music Commands -->
                <div class="bg-discord-dark rounded-xl p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
                            <i class="fas fa-music"></i>
                        </div>
                        <h3 class="text-xl font-bold ml-3">Music</h3>
                    </div>
                    <div class="space-y-3">
                        <div class="bg-discord-darker rounded-lg p-3">
                            <div class="font-medium command">play [song/url]</div>
                            <div class="text-sm text-gray-400 mt-1">Play a song or add to queue</div>
                        </div>
                        <div class="bg-discord-darker rounded-lg p-3">
                            <div class="font-medium command">skip</div>
                            <div class="text-sm text-gray-400 mt-1">Skip the current song</div>
                        </div>
                        <div class="bg-discord-darker rounded-lg p-3">
                            <div class="font-medium command">queue</div>
                            <div class="text-sm text-gray-400 mt-1">View the current queue</div>
                        </div>
                        <div class="bg-discord-darker rounded-lg p-3">
                            <div class="font-medium command">volume [1-100]</div>
                            <div class="text-sm text-gray-400 mt-1">Adjust playback volume</div>
                        </div>
                    </div>
                </div>
                
                <!-- Ticket Commands -->
                <div class="bg-discord-dark rounded-xl p-6">
                    <div class="flex items-center mb-4">
                        <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center text-white">
                            <i class="fas fa-ticket-alt"></i>
                        </div>
                        <h3 class="text-xl font-bold ml-3">Tickets</h3>
                    </div>
                    <div class="space-y-3">
                        <div class="bg-discord-darker rounded-lg p-3">
                            <div class="font-medium command">ticket create [reason]</div>
                            <div class="text-sm text-gray-400 mt-1">Open a new support ticket</div>
                        </div>
                        <div class="bg-discord-darker rounded-lg p-3">
                            <div class="font-medium command">ticket close [reason]</div>
                            <div class="text-sm text-gray-400 mt-1">Close the current ticket</div>
                        </div>
                        <div class="bg-discord-darker rounded-lg p-3">
                            <div class="font-medium command">ticket add @user</div>
                            <div class="text-sm text-gray-400 mt-1">Add a user to the ticket</div>
                        </div>
                        <div class="bg-discord-darker rounded-lg p-3">
                            <div class="font-medium command">ticket setup</div>
                            <div class="text-sm text-gray-400 mt-1">Set up the ticket system</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="text-center mt-12">
                <a href="#" class="inline-block px-6 py-3 rounded-md text-lg font-medium text-white bg-discord-blurple hover:bg-blue-600 transition">
                    View All Commands
                </a>
            </div>
        </div>
    </section>


    <!-- CTA Section -->
    <section class="py-16 bg-gradient-to-r from-blue-600 to-purple-600">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Enhance Your Discord Server?</h2>
            <p class="text-xl text-white mb-8 max-w-3xl mx-auto">Join thousands of servers already using System X Bot for moderation, music, ticketing, and more!</p>
            <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
                <a href="#" class="px-8 py-4 rounded-md text-lg font-bold text-blue-600 bg-white hover:bg-gray-100 transition flex items-center justify-center">
                    <i class="fab fa-discord mr-3 text-2xl"></i> Invite System X Bot
                </a>
                <a href="#" class="px-8 py-4 rounded-md text-lg font-bold text-white border-2 border-white hover:bg-white hover:bg-opacity-10 transition flex items-center justify-center">
                    <i class="fas fa-server mr-3 text-2xl"></i> Support Server
                </a>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-discord-darker py-12 px-4 sm:px-6 lg:px-8">
        <div class="max-w-7xl mx-auto">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-xl font-bold gradient-text mb-4">SystemXBot</h3>
                    <p class="text-gray-400">The ultimate Discord bot for moderation, music, ticketing, and community management.</p>
                </div>
                <div>
                    <h4 class="text-lg font-bold text-white mb-4">Quick Links</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
                        <li><a href="#features" class="text-gray-400 hover:text-white transition">Features</a></li>
                        <li><a href="#commands" class="text-gray-400 hover:text-white transition">Commands</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-bold text-white mb-4">Resources</h4>
                    <ul class="space-y-2">
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Documentation</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Status</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">GitHub</a></li>
                        <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="text-lg font-bold text-white mb-4">Connect</h4>
                    <div class="flex space-x-4">
                        <a href="#" class="w-10 h-10 rounded-full bg-discord-dark flex items-center justify-center text-white hover:bg-discord-blurple transition">
                            <i class="fab fa-discord"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-discord-dark flex items-center justify-center text-white hover:bg-blue-400 transition">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-discord-dark flex items-center justify-center text-white hover:bg-red-500 transition">
                            <i class="fab fa-youtube"></i>
                        </a>
                        <a href="#" class="w-10 h-10 rounded-full bg-discord-dark flex items-center justify-center text-white hover:bg-gray-700 transition">
                            <i class="fab fa-github"></i>
                        </a>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
                <p class="text-gray-400 mb-4 md:mb-0">© 2023 SystemXBot. All rights reserved.</p>
                <div class="flex space-x-6">
                    <a href="#" class="text-gray-400 hover:text-white transition">Terms</a>
                    <a href="#" class="text-gray-400 hover:text-white transition">Privacy</a>
                    <a href="#" class="text-gray-400 hover:text-white transition">Cookies</a>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // Mobile menu toggle
        document.getElementById('mobile-menu-button').addEventListener('click', function() {
            const menu = document.getElementById('mobile-menu');
            menu.classList.toggle('hidden');
        });

async function fetchBotStats() {
    try {
        const response = await fetch('http://162.220.13.50:3369/stats');
        if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);

        const data = await response.json();
        console.log('Fetched stats:', data);

        if (document.getElementById('servers-count')) animateCounter('servers-count', data.guilds);
        if (document.getElementById('users-count')) animateCounter('users-count', data.users);
        if (document.getElementById('commands-count')) animateCounter('commands-count', data.commands);

    } catch (error) {
        console.error('Error fetching bot stats:', error);
        // You can enable fallback values if you want:
        // animateCounter('servers-count', 12500);
        // animateCounter('users-count', 850000);
        // animateCounter('commands-count', 145);
    }
}

// Call it once when the script loads
fetchBotStats();


        // Animated counters
        function animateCounter(elementId, target, duration = 2000) {
            const element = document.getElementById(elementId);
            const start = 0;
            const increment = target / (duration / 16);
            let current = start;
            
            const timer = setInterval(() => {
                current += increment;
                if (current >= target) {
                    clearInterval(timer);
                    current = target;
                }
                element.textContent = Math.floor(current).toLocaleString();
            }, 16);
        }

        // Start counters when stats section is in view
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    fetchBotStats();
                    observer.unobserve(entry.target);
                }
            });
        }, { threshold: 0.5 });

        const statsSection = document.querySelector('.stats-counter');
        if (statsSection) {
            observer.observe(statsSection);
        }

        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                
                if (targetElement) {
                    window.scrollTo({
                        top: targetElement.offsetTop - 80,
                        behavior: 'smooth'
                    });
                    
                    // Close mobile menu if open
                    const mobileMenu = document.getElementById('mobile-menu');
                    if (!mobileMenu.classList.contains('hidden')) {
                        mobileMenu.classList.add('hidden');
                    }
                }
            });
        });
    </script>
<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=systemxhost/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>