Hugging Face's logo

Spaces:
FDxMinh
/
redbot-manager
Running

App Files Community
FDxMinh commited on
Commit
b154756
·
verified ·
1 Parent(s): 03bab89

Tạo cogs và webs cho redbot discord như webs dyno của bot dyno trong discord để quản lý redbot với tất cả chức năng của nó có và cóg của nó, chỉnh sửa cấu hình, quản lý server và nhiều chức năng khác như của dyno bit

Browse files
Files changed (9) hide show
  1. README.md +8 -5
  2. cogs.html +300 -0
  3. components/footer.js +121 -0
  4. components/navbar.js +153 -0
  5. dashboard.html +242 -0
  6. index.html +202 -19
  7. script.js +24 -0
  8. servers.html +240 -0
  9. style.css +48 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Redbot Manager
3
- emoji: 🏆
4
- colorFrom: purple
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: RedBot Manager 🤖
3
+ colorFrom: green
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://huggingface.co/deepsite).
cogs.html ADDED
@@ -0,0 +1,300 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Cogs - RedBot Manager</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ </head>
13
+ <body class="bg-gray-900 text-white min-h-screen flex flex-col">
14
+ <custom-navbar></custom-navbar>
15
+
16
+ <!-- Header -->
17
+ <header class="bg-gray-800 border-b border-gray-700 py-6">
18
+ <div class="container mx-auto px-4">
19
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
20
+ <div>
21
+ <h1 class="text-2xl font-bold">Cogs Management</h1>
22
+ <p class="text-gray-400">Install, configure, and manage your RedBot cogs</p>
23
+ </div>
24
+ <div class="flex gap-3">
25
+ <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg flex items-center gap-2">
26
+ <i data-feather="plus"></i>
27
+ <span>Add Cog</span>
28
+ </button>
29
+ <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg flex items-center gap-2">
30
+ <i data-feather="refresh-cw"></i>
31
+ <span>Refresh</span>
32
+ </button>
33
+ </div>
34
+ </div>
35
+ </div>
36
+ </header>
37
+
38
+ <!-- Main Content -->
39
+ <main class="flex-grow container mx-auto px-4 py-8">
40
+ <!-- Search and Filters -->
41
+ <div class="bg-gray-800 rounded-xl p-5 mb-6">
42
+ <div class="flex flex-col md:flex-row gap-4">
43
+ <div class="flex-grow">
44
+ <div class="relative">
45
+ <input type="text" placeholder="Search cogs..." class="w-full bg-gray-700 border border-gray-600 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
46
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
47
+ </div>
48
+ </div>
49
+ <div class="flex gap-3">
50
+ <select class="bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
51
+ <option>All Statuses</option>
52
+ <option>Installed</option>
53
+ <option>Available</option>
54
+ <option>Updates Available</option>
55
+ </select>
56
+ <select class="bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
57
+ <option>All Categories</option>
58
+ <option>Moderation</option>
59
+ <option>Utility</option>
60
+ <option>Fun</option>
61
+ <option>Music</option>
62
+ <option>Economy</option>
63
+ </select>
64
+ </div>
65
+ </div>
66
+ </div>
67
+
68
+ <!-- Cogs Grid -->
69
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
70
+ <!-- Cog Card 1 -->
71
+ <div class="bg-gray-800 rounded-xl p-5 hover:bg-gray-750 transition duration-300">
72
+ <div class="flex justify-between items-start mb-4">
73
+ <div>
74
+ <h3 class="text-xl font-bold">Admin</h3>
75
+ <p class="text-gray-400 text-sm">Core administration tools</p>
76
+ </div>
77
+ <div class="bg-green-500 text-white text-xs px-2 py-1 rounded-full">Installed</div>
78
+ </div>
79
+
80
+ <p class="text-gray-300 mb-4">Provides essential administrative commands for server management including kick, ban, and role management.</p>
81
+
82
+ <div class="flex items-center justify-between mb-4">
83
+ <div class="flex items-center gap-2 text-sm text-gray-400">
84
+ <i data-feather="download" class="w-4 h-4"></i>
85
+ <span>v1.2.4</span>
86
+ </div>
87
+ <div class="flex items-center gap-2 text-sm text-gray-400">
88
+ <i data-feather="star" class="w-4 h-4"></i>
89
+ <span>4.8 (128)</span>
90
+ </div>
91
+ </div>
92
+
93
+ <div class="flex gap-2">
94
+ <button class="flex-grow bg-indigo-600 hover:bg-indigo-700 py-2 rounded-lg flex items-center justify-center gap-2">
95
+ <i data-feather="settings"></i>
96
+ <span>Configure</span>
97
+ </button>
98
+ <button class="w-10 h-10 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center justify-center">
99
+ <i data-feather="more-vertical"></i>
100
+ </button>
101
+ </div>
102
+ </div>
103
+
104
+ <!-- Cog Card 2 -->
105
+ <div class="bg-gray-800 rounded-xl p-5 hover:bg-gray-750 transition duration-300">
106
+ <div class="flex justify-between items-start mb-4">
107
+ <div>
108
+ <h3 class="text-xl font-bold">Moderation</h3>
109
+ <p class="text-gray-400 text-sm">Advanced moderation tools</p>
110
+ </div>
111
+ <div class="bg-green-500 text-white text-xs px-2 py-1 rounded-full">Installed</div>
112
+ </div>
113
+
114
+ <p class="text-gray-300 mb-4">Comprehensive moderation suite with advanced logging, warnings, mutes, and automated moderation features.</p>
115
+
116
+ <div class="flex items-center justify-between mb-4">
117
+ <div class="flex items-center gap-2 text-sm text-gray-400">
118
+ <i data-feather="download" class="w-4 h-4"></i>
119
+ <span>v2.1.0</span>
120
+ </div>
121
+ <div class="flex items-center gap-2 text-sm text-gray-400">
122
+ <i data-feather="star" class="w-4 h-4"></i>
123
+ <span>4.9 (256)</span>
124
+ </div>
125
+ </div>
126
+
127
+ <div class="flex gap-2">
128
+ <button class="flex-grow bg-indigo-600 hover:bg-indigo-700 py-2 rounded-lg flex items-center justify-center gap-2">
129
+ <i data-feather="settings"></i>
130
+ <span>Configure</span>
131
+ </button>
132
+ <button class="w-10 h-10 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center justify-center">
133
+ <i data-feather="more-vertical"></i>
134
+ </button>
135
+ </div>
136
+ </div>
137
+
138
+ <!-- Cog Card 3 -->
139
+ <div class="bg-gray-800 rounded-xl p-5 hover:bg-gray-750 transition duration-300">
140
+ <div class="flex justify-between items-start mb-4">
141
+ <div>
142
+ <h3 class="text-xl font-bold">Music</h3>
143
+ <p class="text-gray-400 text-sm">High-quality music streaming</p>
144
+ </div>
145
+ <div class="bg-yellow-500 text-white text-xs px-2 py-1 rounded-full">Update Available</div>
146
+ </div>
147
+
148
+ <p class="text-gray-300 mb-4">Stream high-quality music from YouTube, Spotify, SoundCloud, and more directly in your voice channels.</p>
149
+
150
+ <div class="flex items-center justify-between mb-4">
151
+ <div class="flex items-center gap-2 text-sm text-gray-400">
152
+ <i data-feather="download" class="w-4 h-4"></i>
153
+ <span>v3.0.1 → v3.1.0</span>
154
+ </div>
155
+ <div class="flex items-center gap-2 text-sm text-gray-400">
156
+ <i data-feather="star" class="w-4 h-4"></i>
157
+ <span>4.7 (312)</span>
158
+ </div>
159
+ </div>
160
+
161
+ <div class="flex gap-2">
162
+ <button class="flex-grow bg-yellow-600 hover:bg-yellow-700 py-2 rounded-lg flex items-center justify-center gap-2">
163
+ <i data-feather="arrow-up-circle"></i>
164
+ <span>Update</span>
165
+ </button>
166
+ <button class="w-10 h-10 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center justify-center">
167
+ <i data-feather="more-vertical"></i>
168
+ </button>
169
+ </div>
170
+ </div>
171
+
172
+ <!-- Cog Card 4 -->
173
+ <div class="bg-gray-800 rounded-xl p-5 hover:bg-gray-750 transition duration-300">
174
+ <div class="flex justify-between items-start mb-4">
175
+ <div>
176
+ <h3 class="text-xl font-bold">Economy</h3>
177
+ <p class="text-gray-400 text-sm">Virtual currency system</p>
178
+ </div>
179
+ <div class="bg-gray-500 text-white text-xs px-2 py-1 rounded-full">Not Installed</div>
180
+ </div>
181
+
182
+ <p class="text-gray-300 mb-4">Create a fully customizable economy system with currencies, shops, jobs, and gambling games for your community.</p>
183
+
184
+ <div class="flex items-center justify-between mb-4">
185
+ <div class="flex items-center gap-2 text-sm text-gray-400">
186
+ <i data-feather="download" class="w-4 h-4"></i>
187
+ <span>v1.5.3</span>
188
+ </div>
189
+ <div class="flex items-center gap-2 text-sm text-gray-400">
190
+ <i data-feather="star" class="w-4 h-4"></i>
191
+ <span>4.6 (189)</span>
192
+ </div>
193
+ </div>
194
+
195
+ <div class="flex gap-2">
196
+ <button class="flex-grow bg-green-600 hover:bg-green-700 py-2 rounded-lg flex items-center justify-center gap-2">
197
+ <i data-feather="download"></i>
198
+ <span>Install</span>
199
+ </button>
200
+ <button class="w-10 h-10 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center justify-center">
201
+ <i data-feather="more-vertical"></i>
202
+ </button>
203
+ </div>
204
+ </div>
205
+
206
+ <!-- Cog Card 5 -->
207
+ <div class="bg-gray-800 rounded-xl p-5 hover:bg-gray-750 transition duration-300">
208
+ <div class="flex justify-between items-start mb-4">
209
+ <div>
210
+ <h3 class="text-xl font-bold">Leveling</h3>
211
+ <p class="text-gray-400 text-sm">User ranking system</p>
212
+ </div>
213
+ <div class="bg-gray-500 text-white text-xs px-2 py-1 rounded-full">Not Installed</div>
214
+ </div>
215
+
216
+ <p class="text-gray-300 mb-4">Implement a comprehensive leveling system with experience points, ranks, leaderboards, and customizable rewards.</p>
217
+
218
+ <div class="flex items-center justify-between mb-4">
219
+ <div class="flex items-center gap-2 text-sm text-gray-400">
220
+ <i data-feather="download" class="w-4 h-4"></i>
221
+ <span>v2.3.1</span>
222
+ </div>
223
+ <div class="flex items-center gap-2 text-sm text-gray-400">
224
+ <i data-feather="star" class="w-4 h-4"></i>
225
+ <span>4.5 (142)</span>
226
+ </div>
227
+ </div>
228
+
229
+ <div class="flex gap-2">
230
+ <button class="flex-grow bg-green-600 hover:bg-green-700 py-2 rounded-lg flex items-center justify-center gap-2">
231
+ <i data-feather="download"></i>
232
+ <span>Install</span>
233
+ </button>
234
+ <button class="w-10 h-10 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center justify-center">
235
+ <i data-feather="more-vertical"></i>
236
+ </button>
237
+ </div>
238
+ </div>
239
+
240
+ <!-- Cog Card 6 -->
241
+ <div class="bg-gray-800 rounded-xl p-5 hover:bg-gray-750 transition duration-300">
242
+ <div class="flex justify-between items-start mb-4">
243
+ <div>
244
+ <h3 class="text-xl font-bold">Tickets</h3>
245
+ <p class="text-gray-400 text-sm">Support ticket system</p>
246
+ </div>
247
+ <div class="bg-green-500 text-white text-xs px-2 py-1 rounded-full">Installed</div>
248
+ </div>
249
+
250
+ <p class="text-gray-300 mb-4">Create a professional support ticket system with customizable panels, staff assignments, and detailed transcripts.</p>
251
+
252
+ <div class="flex items-center justify-between mb-4">
253
+ <div class="flex items-center gap-2 text-sm text-gray-400">
254
+ <i data-feather="download" class="w-4 h-4"></i>
255
+ <span>v1.8.2</span>
256
+ </div>
257
+ <div class="flex items-center gap-2 text-sm text-gray-400">
258
+ <i data-feather="star" class="w-4 h-4"></i>
259
+ <span>4.8 (98)</span>
260
+ </div>
261
+ </div>
262
+
263
+ <div class="flex gap-2">
264
+ <button class="flex-grow bg-indigo-600 hover:bg-indigo-700 py-2 rounded-lg flex items-center justify-center gap-2">
265
+ <i data-feather="settings"></i>
266
+ <span>Configure</span>
267
+ </button>
268
+ <button class="w-10 h-10 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center justify-center">
269
+ <i data-feather="more-vertical"></i>
270
+ </button>
271
+ </div>
272
+ </div>
273
+ </div>
274
+
275
+ <!-- Pagination -->
276
+ <div class="mt-8 flex justify-center">
277
+ <div class="flex gap-2">
278
+ <button class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center">
279
+ <i data-feather="chevron-left"></i>
280
+ </button>
281
+ <button class="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center">1</button>
282
+ <button class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center">2</button>
283
+ <button class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center">3</button>
284
+ <button class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center">
285
+ <i data-feather="chevron-right"></i>
286
+ </button>
287
+ </div>
288
+ </div>
289
+ </main>
290
+
291
+ <custom-footer></custom-footer>
292
+
293
+ <script src="components/navbar.js"></script>
294
+ <script src="components/footer.js"></script>
295
+ <script src="script.js"></script>
296
+ <script>
297
+ feather.replace();
298
+ </script>
299
+ </body>
300
+ </html>
components/footer.js ADDED
@@ -0,0 +1,121 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ footer {
7
+ background: rgba(17, 24, 39, 0.9);
8
+ color: #d1d5db;
9
+ padding: 3rem 1rem 2rem;
10
+ margin-top: auto;
11
+ border-top: 1px solid rgba(79, 70, 229, 0.3);
12
+ }
13
+ .footer-content {
14
+ max-width: 1200px;
15
+ margin: 0 auto;
16
+ display: grid;
17
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
18
+ gap: 2rem;
19
+ }
20
+ .footer-column h3 {
21
+ color: white;
22
+ margin-bottom: 1rem;
23
+ font-size: 1.25rem;
24
+ }
25
+ .footer-column ul {
26
+ list-style: none;
27
+ padding: 0;
28
+ margin: 0;
29
+ }
30
+ .footer-column ul li {
31
+ margin-bottom: 0.75rem;
32
+ }
33
+ .footer-column a {
34
+ color: #9ca3af;
35
+ text-decoration: none;
36
+ transition: color 0.2s;
37
+ }
38
+ .footer-column a:hover {
39
+ color: #c7d2fe;
40
+ }
41
+ .social-links {
42
+ display: flex;
43
+ gap: 1rem;
44
+ margin-top: 1rem;
45
+ }
46
+ .social-link {
47
+ display: inline-flex;
48
+ align-items: center;
49
+ justify-content: center;
50
+ width: 40px;
51
+ height: 40px;
52
+ background: rgba(79, 70, 229, 0.2);
53
+ border-radius: 50%;
54
+ color: #c7d2fe;
55
+ transition: all 0.2s;
56
+ }
57
+ .social-link:hover {
58
+ background: #4f46e5;
59
+ transform: translateY(-2px);
60
+ }
61
+ .copyright {
62
+ max-width: 1200px;
63
+ margin: 3rem auto 0;
64
+ padding-top: 2rem;
65
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
66
+ text-align: center;
67
+ color: #9ca3af;
68
+ font-size: 0.875rem;
69
+ }
70
+ </style>
71
+ <footer>
72
+ <div class="footer-content">
73
+ <div class="footer-column">
74
+ <h3>RedBot Manager</h3>
75
+ <p>The most powerful dashboard for managing your RedBot Discord bot with ease.</p>
76
+ <div class="social-links">
77
+ <a href="#" class="social-link"><i data-feather="github"></i></a>
78
+ <a href="#" class="social-link"><i data-feather="twitter"></i></a>
79
+ <a href="#" class="social-link"><i data-feather="discord"></i></a>
80
+ </div>
81
+ </div>
82
+
83
+ <div class="footer-column">
84
+ <h3>Product</h3>
85
+ <ul>
86
+ <li><a href="#">Features</a></li>
87
+ <li><a href="#">Pricing</a></li>
88
+ <li><a href="#">Documentation</a></li>
89
+ <li><a href="#">API</a></li>
90
+ </ul>
91
+ </div>
92
+
93
+ <div class="footer-column">
94
+ <h3>Company</h3>
95
+ <ul>
96
+ <li><a href="#">About</a></li>
97
+ <li><a href="#">Blog</a></li>
98
+ <li><a href="#">Careers</a></li>
99
+ <li><a href="#">Contact</a></li>
100
+ </ul>
101
+ </div>
102
+
103
+ <div class="footer-column">
104
+ <h3>Support</h3>
105
+ <ul>
106
+ <li><a href="#">Help Center</a></li>
107
+ <li><a href="#">Community</a></li>
108
+ <li><a href="#">Status</a></li>
109
+ <li><a href="#">Privacy Policy</a></li>
110
+ </ul>
111
+ </div>
112
+ </div>
113
+
114
+ <div class="copyright">
115
+ <p>&copy; 2023 RedBot Manager. All rights reserved. Made with ❤️ for Discord bot enthusiasts.</p>
116
+ </div>
117
+ </footer>
118
+ `;
119
+ }
120
+ }
121
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,153 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ nav {
7
+ background: rgba(17, 24, 39, 0.9);
8
+ backdrop-filter: blur(10px);
9
+ padding: 1rem;
10
+ display: flex;
11
+ justify-content: space-between;
12
+ align-items: center;
13
+ position: sticky;
14
+ top: 0;
15
+ z-index: 100;
16
+ border-bottom: 1px solid rgba(79, 70, 229, 0.3);
17
+ }
18
+ .logo {
19
+ color: white;
20
+ font-weight: bold;
21
+ font-size: 1.5rem;
22
+ display: flex;
23
+ align-items: center;
24
+ gap: 0.5rem;
25
+ }
26
+ .logo-icon {
27
+ color: #818cf8;
28
+ }
29
+ ul {
30
+ display: flex;
31
+ gap: 1.5rem;
32
+ list-style: none;
33
+ margin: 0;
34
+ padding: 0;
35
+ }
36
+ a {
37
+ color: #d1d5db;
38
+ text-decoration: none;
39
+ font-weight: 500;
40
+ transition: color 0.2s;
41
+ display: flex;
42
+ align-items: center;
43
+ gap: 0.5rem;
44
+ }
45
+ a:hover {
46
+ color: #c7d2fe;
47
+ }
48
+ .active {
49
+ color: #818cf8;
50
+ }
51
+ .auth-buttons {
52
+ display: flex;
53
+ gap: 1rem;
54
+ }
55
+ .btn-login {
56
+ background: transparent;
57
+ border: 1px solid #4f46e5;
58
+ color: #c7d2fe;
59
+ padding: 0.5rem 1rem;
60
+ border-radius: 0.5rem;
61
+ font-weight: 500;
62
+ transition: all 0.2s;
63
+ }
64
+ .btn-login:hover {
65
+ background: #4f46e5;
66
+ }
67
+ .btn-signup {
68
+ background: #4f46e5;
69
+ border: 1px solid #4f46e5;
70
+ color: white;
71
+ padding: 0.5rem 1rem;
72
+ border-radius: 0.5rem;
73
+ font-weight: 500;
74
+ transition: all 0.2s;
75
+ }
76
+ .btn-signup:hover {
77
+ background: #4338ca;
78
+ border-color: #4338ca;
79
+ }
80
+ .mobile-menu-button {
81
+ display: none;
82
+ background: none;
83
+ border: none;
84
+ color: white;
85
+ font-size: 1.5rem;
86
+ cursor: pointer;
87
+ }
88
+ @media (max-width: 768px) {
89
+ ul {
90
+ display: none;
91
+ }
92
+ .auth-buttons {
93
+ display: none;
94
+ }
95
+ .mobile-menu-button {
96
+ display: block;
97
+ }
98
+ .mobile-menu {
99
+ position: absolute;
100
+ top: 100%;
101
+ left: 0;
102
+ right: 0;
103
+ background: rgba(17, 24, 39, 0.95);
104
+ backdrop-filter: blur(10px);
105
+ padding: 1rem;
106
+ border-bottom: 1px solid rgba(79, 70, 229, 0.3);
107
+ }
108
+ .mobile-menu ul {
109
+ display: flex;
110
+ flex-direction: column;
111
+ gap: 1rem;
112
+ }
113
+ }
114
+ </style>
115
+ <nav>
116
+ <div class="logo">
117
+ <span class="logo-icon">🤖</span>
118
+ <span>RedBot Manager</span>
119
+ </div>
120
+
121
+ <ul>
122
+ <li><a href="/"><i data-feather="home"></i> Home</a></li>
123
+ <li><a href="/dashboard.html"><i data-feather="layout"></i> Dashboard</a></li>
124
+ <li><a href="/cogs.html"><i data-feather="package"></i> Cogs</a></li>
125
+ <li><a href="/servers.html"><i data-feather="server"></i> Servers</a></li>
126
+ <li><a href="/docs.html"><i data-feather="book"></i> Documentation</a></li>
127
+ </ul>
128
+
129
+ <div class="auth-buttons">
130
+ <button class="btn-login">Login</button>
131
+ <button class="btn-signup">Sign Up</button>
132
+ </div>
133
+
134
+ <button class="mobile-menu-button" id="mobile-menu-button">
135
+ <i data-feather="menu"></i>
136
+ </button>
137
+
138
+ <div class="mobile-menu hidden" id="mobile-menu">
139
+ <ul>
140
+ <li><a href="/"><i data-feather="home"></i> Home</a></li>
141
+ <li><a href="/dashboard.html"><i data-feather="layout"></i> Dashboard</a></li>
142
+ <li><a href="/cogs.html"><i data-feather="package"></i> Cogs</a></li>
143
+ <li><a href="/servers.html"><i data-feather="server"></i> Servers</a></li>
144
+ <li><a href="/docs.html"><i data-feather="book"></i> Documentation</a></li>
145
+ <li><a href="#"><i data-feather="log-in"></i> Login</a></li>
146
+ <li><a href="#"><i data-feather="user-plus"></i> Sign Up</a></li>
147
+ </ul>
148
+ </div>
149
+ </nav>
150
+ `;
151
+ }
152
+ }
153
+ customElements.define('custom-navbar', CustomNavbar);
dashboard.html ADDED
@@ -0,0 +1,242 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Dashboard - RedBot Manager</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ </head>
13
+ <body class="bg-gray-900 text-white min-h-screen flex flex-col">
14
+ <custom-navbar></custom-navbar>
15
+
16
+ <!-- Dashboard Header -->
17
+ <header class="bg-gray-800 border-b border-gray-700 py-6">
18
+ <div class="container mx-auto px-4">
19
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
20
+ <div>
21
+ <h1 class="text-2xl font-bold">Dashboard</h1>
22
+ <p class="text-gray-400">Manage your RedBot configuration and settings</p>
23
+ </div>
24
+ <div class="flex items-center gap-4">
25
+ <div class="bg-indigo-600 px-3 py-1 rounded-full text-sm flex items-center gap-2">
26
+ <div class="w-2 h-2 bg-green-500 rounded-full"></div>
27
+ <span>Online</span>
28
+ </div>
29
+ <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg flex items-center gap-2">
30
+ <i data-feather="refresh-cw"></i>
31
+ <span>Sync</span>
32
+ </button>
33
+ </div>
34
+ </div>
35
+ </div>
36
+ </header>
37
+
38
+ <!-- Main Content -->
39
+ <main class="flex-grow container mx-auto px-4 py-8">
40
+ <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
41
+ <!-- Sidebar Navigation -->
42
+ <div class="lg:col-span-1">
43
+ <div class="bg-gray-800 rounded-xl p-4 sticky top-24">
44
+ <nav>
45
+ <ul class="space-y-1">
46
+ <li>
47
+ <a href="#" class="flex items-center gap-3 p-3 rounded-lg bg-indigo-600 text-white">
48
+ <i data-feather="home"></i>
49
+ <span>Overview</span>
50
+ </a>
51
+ </li>
52
+ <li>
53
+ <a href="#" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white">
54
+ <i data-feather="package"></i>
55
+ <span>Cogs</span>
56
+ </a>
57
+ </li>
58
+ <li>
59
+ <a href="#" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white">
60
+ <i data-feather="server"></i>
61
+ <span>Servers</span>
62
+ </a>
63
+ </li>
64
+ <li>
65
+ <a href="#" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white">
66
+ <i data-feather="settings"></i>
67
+ <span>Settings</span>
68
+ </a>
69
+ </li>
70
+ <li>
71
+ <a href="#" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white">
72
+ <i data-feather="bar-chart-2"></i>
73
+ <span>Analytics</span>
74
+ </a>
75
+ </li>
76
+ <li>
77
+ <a href="#" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white">
78
+ <i data-feather="users"></i>
79
+ <span>Permissions</span>
80
+ </a>
81
+ </li>
82
+ <li>
83
+ <a href="#" class="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-700 text-gray-300 hover:text-white">
84
+ <i data-feather="bell"></i>
85
+ <span>Notifications</span>
86
+ </a>
87
+ </li>
88
+ </ul>
89
+ </nav>
90
+ </div>
91
+ </div>
92
+
93
+ <!-- Main Content Area -->
94
+ <div class="lg:col-span-3">
95
+ <!-- Stats Cards -->
96
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
97
+ <div class="bg-gray-800 rounded-xl p-5">
98
+ <div class="flex items-center justify-between">
99
+ <div>
100
+ <p class="text-gray-400">Total Servers</p>
101
+ <p class="text-2xl font-bold mt-1">24</p>
102
+ </div>
103
+ <div class="w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center">
104
+ <i data-feather="server" class="text-white"></i>
105
+ </div>
106
+ </div>
107
+ </div>
108
+
109
+ <div class="bg-gray-800 rounded-xl p-5">
110
+ <div class="flex items-center justify-between">
111
+ <div>
112
+ <p class="text-gray-400">Active Cogs</p>
113
+ <p class="text-2xl font-bold mt-1">18</p>
114
+ </div>
115
+ <div class="w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center">
116
+ <i data-feather="package" class="text-white"></i>
117
+ </div>
118
+ </div>
119
+ </div>
120
+
121
+ <div class="bg-gray-800 rounded-xl p-5">
122
+ <div class="flex items-center justify-between">
123
+ <div>
124
+ <p class="text-gray-400">Commands Used</p>
125
+ <p class="text-2xl font-bold mt-1">1,248</p>
126
+ </div>
127
+ <div class="w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center">
128
+ <i data-feather="command" class="text-white"></i>
129
+ </div>
130
+ </div>
131
+ </div>
132
+
133
+ <div class="bg-gray-800 rounded-xl p-5">
134
+ <div class="flex items-center justify-between">
135
+ <div>
136
+ <p class="text-gray-400">Uptime</p>
137
+ <p class="text-2xl font-bold mt-1">99.8%</p>
138
+ </div>
139
+ <div class="w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center">
140
+ <i data-feather="clock" class="text-white"></i>
141
+ </div>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+ <!-- Configuration Section -->
147
+ <div class="bg-gray-800 rounded-xl p-6 mb-6">
148
+ <div class="flex flex-wrap items-center justify-between gap-4 mb-6">
149
+ <h2 class="text-xl font-bold">Global Configuration</h2>
150
+ <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg flex items-center gap-2">
151
+ <i data-feather="save"></i>
152
+ <span>Save Changes</span>
153
+ </button>
154
+ </div>
155
+
156
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
157
+ <div>
158
+ <label class="block text-gray-300 mb-2">Default Prefix</label>
159
+ <input type="text" value="!" class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
160
+ </div>
161
+
162
+ <div>
163
+ <label class="block text-gray-300 mb-2">Language</label>
164
+ <select class="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
165
+ <option>English</option>
166
+ <option>Spanish</option>
167
+ <option>French</option>
168
+ <option>German</option>
169
+ </select>
170
+ </div>
171
+
172
+ <div>
173
+ <label class="block text-gray-300 mb-2">Delete Command Messages</label>
174
+ <div class="relative inline-block w-12 h-6">
175
+ <input type="checkbox" class="opacity-0 w-0 h-0 peer" id="delete-commands">
176
+ <label for="delete-commands" class="absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-600 rounded-full transition duration-300 before:absolute before:h-4 before:w-4 before:left-1 before:bottom-1 before:bg-white before:rounded-full before:transition before:duration-300 peer-checked:before:translate-x-6 peer-checked:bg-indigo-600"></label>
177
+ </div>
178
+ </div>
179
+
180
+ <div>
181
+ <label class="block text-gray-300 mb-2">Send Help via DM</label>
182
+ <div class="relative inline-block w-12 h-6">
183
+ <input type="checkbox" class="opacity-0 w-0 h-0 peer" id="help-dm" checked>
184
+ <label for="help-dm" class="absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-600 rounded-full transition duration-300 before:absolute before:h-4 before:w-4 before:left-1 before:bottom-1 before:bg-white before:rounded-full before:transition before:duration-300 peer-checked:before:translate-x-6 peer-checked:bg-indigo-600"></label>
185
+ </div>
186
+ </div>
187
+ </div>
188
+ </div>
189
+
190
+ <!-- Recent Activity -->
191
+ <div class="bg-gray-800 rounded-xl p-6">
192
+ <h2 class="text-xl font-bold mb-6">Recent Activity</h2>
193
+
194
+ <div class="space-y-4">
195
+ <div class="flex items-start gap-4 p-4 bg-gray-700 rounded-lg">
196
+ <div class="w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center flex-shrink-0">
197
+ <i data-feather="settings" class="text-white text-sm"></i>
198
+ </div>
199
+ <div>
200
+ <p class="font-medium">Configuration Updated</p>
201
+ <p class="text-gray-400 text-sm">Changed default prefix to "!" in 3 servers</p>
202
+ <p class="text-gray-500 text-xs mt-1">2 hours ago</p>
203
+ </div>
204
+ </div>
205
+
206
+ <div class="flex items-start gap-4 p-4 bg-gray-700 rounded-lg">
207
+ <div class="w-10 h-10 rounded-full bg-green-600 flex items-center justify-center flex-shrink-0">
208
+ <i data-feather="package" class="text-white text-sm"></i>
209
+ </div>
210
+ <div>
211
+ <p class="font-medium">Cog Installed</p>
212
+ <p class="text-gray-400 text-sm">Installed "Moderation" cog in Gaming Server</p>
213
+ <p class="text-gray-500 text-xs mt-1">5 hours ago</p>
214
+ </div>
215
+ </div>
216
+
217
+ <div class="flex items-start gap-4 p-4 bg-gray-700 rounded-lg">
218
+ <div class="w-10 h-10 rounded-full bg-red-600 flex items-center justify-center flex-shrink-0">
219
+ <i data-feather="alert-triangle" class="text-white text-sm"></i>
220
+ </div>
221
+ <div>
222
+ <p class="font-medium">Error Occurred</p>
223
+ <p class="text-gray-400 text-sm">Failed to load "Music" cog in Community Server</p>
224
+ <p class="text-gray-500 text-xs mt-1">Yesterday</p>
225
+ </div>
226
+ </div>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+ </main>
232
+
233
+ <custom-footer></custom-footer>
234
+
235
+ <script src="components/navbar.js"></script>
236
+ <script src="components/footer.js"></script>
237
+ <script src="script.js"></script>
238
+ <script>
239
+ feather.replace();
240
+ </script>
241
+ </body>
242
+ </html>
index.html CHANGED
@@ -1,19 +1,202 @@
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>RedBot Manager - Discord Bot Dashboard</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
13
+ </head>
14
+ <body class="bg-gray-900 text-white min-h-screen flex flex-col">
15
+ <custom-navbar></custom-navbar>
16
+
17
+ <!-- Hero Section -->
18
+ <section id="hero" class="relative py-20 md:py-32 overflow-hidden">
19
+ <div class="absolute inset-0 z-0" id="vanta-bg"></div>
20
+ <div class="container mx-auto px-4 relative z-10">
21
+ <div class="max-w-3xl mx-auto text-center">
22
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Manage Your RedBot Like a Pro</h1>
23
+ <p class="text-xl md:text-2xl mb-8 text-gray-300">Powerful dashboard for configuring, managing, and optimizing your RedBot Discord bot</p>
24
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
25
+ <a href="#dashboard" class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-3 px-8 rounded-lg transition duration-300 transform hover:scale-105">
26
+ Get Started
27
+ </a>
28
+ <a href="#features" class="bg-transparent border-2 border-indigo-600 text-indigo-400 hover:bg-indigo-600 hover:text-white font-bold py-3 px-8 rounded-lg transition duration-300">
29
+ Learn More
30
+ </a>
31
+ </div>
32
+ </div>
33
+ </div>
34
+ </section>
35
+
36
+ <!-- Features Section -->
37
+ <section id="features" class="py-20 bg-gray-800">
38
+ <div class="container mx-auto px-4">
39
+ <div class="text-center mb-16">
40
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Powerful Features</h2>
41
+ <p class="text-xl text-gray-400 max-w-2xl mx-auto">Everything you need to manage your RedBot efficiently</p>
42
+ </div>
43
+
44
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
45
+ <!-- Feature 1 -->
46
+ <div class="bg-gray-700 rounded-xl p-6 hover:bg-gray-600 transition duration-300">
47
+ <div class="w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center mb-4">
48
+ <i data-feather="settings" class="text-white"></i>
49
+ </div>
50
+ <h3 class="text-xl font-bold mb-2">Configuration Management</h3>
51
+ <p class="text-gray-300">Easily configure all aspects of your RedBot with our intuitive interface</p>
52
+ </div>
53
+
54
+ <!-- Feature 2 -->
55
+ <div class="bg-gray-700 rounded-xl p-6 hover:bg-gray-600 transition duration-300">
56
+ <div class="w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center mb-4">
57
+ <i data-feather="server" class="text-white"></i>
58
+ </div>
59
+ <h3 class="text-xl font-bold mb-2">Server Management</h3>
60
+ <p class="text-gray-300">Manage multiple servers from a single dashboard with ease</p>
61
+ </div>
62
+
63
+ <!-- Feature 3 -->
64
+ <div class="bg-gray-700 rounded-xl p-6 hover:bg-gray-600 transition duration-300">
65
+ <div class="w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center mb-4">
66
+ <i data-feather="command" class="text-white"></i>
67
+ </div>
68
+ <h3 class="text-xl font-bold mb-2">Cog Management</h3>
69
+ <p class="text-gray-300">Install, update, and configure cogs with just a few clicks</p>
70
+ </div>
71
+
72
+ <!-- Feature 4 -->
73
+ <div class="bg-gray-700 rounded-xl p-6 hover:bg-gray-600 transition duration-300">
74
+ <div class="w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center mb-4">
75
+ <i data-feather="bar-chart-2" class="text-white"></i>
76
+ </div>
77
+ <h3 class="text-xl font-bold mb-2">Analytics & Stats</h3>
78
+ <p class="text-gray-300">Track bot performance and usage statistics in real-time</p>
79
+ </div>
80
+
81
+ <!-- Feature 5 -->
82
+ <div class="bg-gray-700 rounded-xl p-6 hover:bg-gray-600 transition duration-300">
83
+ <div class="w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center mb-4">
84
+ <i data-feather="users" class="text-white"></i>
85
+ </div>
86
+ <h3 class="text-xl font-bold mb-2">User Permissions</h3>
87
+ <p class="text-gray-300">Control who can access which features with granular permissions</p>
88
+ </div>
89
+
90
+ <!-- Feature 6 -->
91
+ <div class="bg-gray-700 rounded-xl p-6 hover:bg-gray-600 transition duration-300">
92
+ <div class="w-12 h-12 rounded-full bg-indigo-600 flex items-center justify-center mb-4">
93
+ <i data-feather="bell" class="text-white"></i>
94
+ </div>
95
+ <h3 class="text-xl font-bold mb-2">Notifications</h3>
96
+ <p class="text-gray-300">Get alerts for important events and system updates</p>
97
+ </div>
98
+ </div>
99
+ </div>
100
+ </section>
101
+
102
+ <!-- Dashboard Preview -->
103
+ <section id="dashboard" class="py-20">
104
+ <div class="container mx-auto px-4">
105
+ <div class="text-center mb-16">
106
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Dashboard Overview</h2>
107
+ <p class="text-xl text-gray-400 max-w-2xl mx-auto">See how easy it is to manage your RedBot</p>
108
+ </div>
109
+
110
+ <div class="bg-gray-800 rounded-2xl p-6 shadow-2xl max-w-6xl mx-auto">
111
+ <div class="flex flex-wrap gap-4 mb-6">
112
+ <button class="px-4 py-2 bg-indigo-600 rounded-lg">Overview</button>
113
+ <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg">Cogs</button>
114
+ <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg">Servers</button>
115
+ <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg">Settings</button>
116
+ <button class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded-lg">Analytics</button>
117
+ </div>
118
+
119
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
120
+ <div class="lg:col-span-2 bg-gray-900 rounded-xl p-6">
121
+ <h3 class="text-xl font-bold mb-4">Server Configuration</h3>
122
+ <div class="space-y-4">
123
+ <div class="flex items-center justify-between p-4 bg-gray-700 rounded-lg">
124
+ <span>Prefix</span>
125
+ <span class="bg-indigo-600 px-3 py-1 rounded">!</span>
126
+ </div>
127
+ <div class="flex items-center justify-between p-4 bg-gray-700 rounded-lg">
128
+ <span>Language</span>
129
+ <span>English</span>
130
+ </div>
131
+ <div class="flex items-center justify-between p-4 bg-gray-700 rounded-lg">
132
+ <span>Auto Delete Messages</span>
133
+ <div class="relative inline-block w-12 h-6">
134
+ <input type="checkbox" class="opacity-0 w-0 h-0 peer" id="toggle1">
135
+ <label for="toggle1" class="absolute cursor-pointer top-0 left-0 right-0 bottom-0 bg-gray-600 rounded-full transition duration-300 before:absolute before:h-4 before:w-4 before:left-1 before:bottom-1 before:bg-white before:rounded-full before:transition before:duration-300 peer-checked:before:translate-x-6 peer-checked:bg-indigo-600"></label>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <div class="bg-gray-900 rounded-xl p-6">
142
+ <h3 class="text-xl font-bold mb-4">Active Cogs</h3>
143
+ <div class="space-y-3">
144
+ <div class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
145
+ <span>Admin</span>
146
+ <i data-feather="check-circle" class="text-green-500"></i>
147
+ </div>
148
+ <div class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
149
+ <span>Moderation</span>
150
+ <i data-feather="check-circle" class="text-green-500"></i>
151
+ </div>
152
+ <div class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
153
+ <span>Music</span>
154
+ <i data-feather="check-circle" class="text-green-500"></i>
155
+ </div>
156
+ <div class="flex items-center justify-between p-3 bg-gray-700 rounded-lg">
157
+ <span>Economy</span>
158
+ <i data-feather="check-circle" class="text-green-500"></i>
159
+ </div>
160
+ </div>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ </div>
165
+ </section>
166
+
167
+ <!-- CTA Section -->
168
+ <section class="py-20 bg-indigo-900">
169
+ <div class="container mx-auto px-4 text-center">
170
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Manage Your RedBot?</h2>
171
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Join thousands of server owners who trust us to manage their bots</p>
172
+ <a href="#" class="inline-block bg-white text-indigo-900 font-bold py-3 px-8 rounded-lg hover:bg-gray-200 transition duration-300 transform hover:scale-105">
173
+ Get Started Now
174
+ </a>
175
+ </div>
176
+ </section>
177
+
178
+ <custom-footer></custom-footer>
179
+
180
+ <script src="components/navbar.js"></script>
181
+ <script src="components/footer.js"></script>
182
+ <script src="script.js"></script>
183
+ <script>
184
+ feather.replace();
185
+ // Initialize Vanta.js
186
+ VANTA.GLOBE({
187
+ el: "#vanta-bg",
188
+ mouseControls: true,
189
+ touchControls: true,
190
+ gyroControls: false,
191
+ minHeight: 200.00,
192
+ minWidth: 200.00,
193
+ scale: 1.00,
194
+ scaleMobile: 1.00,
195
+ color: 0x4f46e5,
196
+ color2: 0x818cf8,
197
+ backgroundColor: 0x111827
198
+ })
199
+ </script>
200
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
201
+ </body>
202
+ </html>
script.js ADDED
@@ -0,0 +1,24 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // Shared JavaScript across all pages
2
+ document.addEventListener('DOMContentLoaded', function() {
3
+ console.log('RedBot Manager loaded');
4
+
5
+ // Smooth scrolling for anchor links
6
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
7
+ anchor.addEventListener('click', function (e) {
8
+ e.preventDefault();
9
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
10
+ behavior: 'smooth'
11
+ });
12
+ });
13
+ });
14
+
15
+ // Mobile menu toggle
16
+ const mobileMenuButton = document.getElementById('mobile-menu-button');
17
+ const mobileMenu = document.getElementById('mobile-menu');
18
+
19
+ if (mobileMenuButton && mobileMenu) {
20
+ mobileMenuButton.addEventListener('click', () => {
21
+ mobileMenu.classList.toggle('hidden');
22
+ });
23
+ }
24
+ });
servers.html ADDED
@@ -0,0 +1,240 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Servers - RedBot Manager</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <link rel="stylesheet" href="style.css">
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ </head>
13
+ <body class="bg-gray-900 text-white min-h-screen flex flex-col">
14
+ <custom-navbar></custom-navbar>
15
+
16
+ <!-- Header -->
17
+ <header class="bg-gray-800 border-b border-gray-700 py-6">
18
+ <div class="container mx-auto px-4">
19
+ <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
20
+ <div>
21
+ <h1 class="text-2xl font-bold">Server Management</h1>
22
+ <p class="text-gray-400">Manage your RedBot across multiple Discord servers</p>
23
+ </div>
24
+ <div class="flex gap-3">
25
+ <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-lg flex items-center gap-2">
26
+ <i data-feather="plus"></i>
27
+ <span>Add Server</span>
28
+ </button>
29
+ <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg flex items-center gap-2">
30
+ <i data-feather="refresh-cw"></i>
31
+ <span>Refresh</span>
32
+ </button>
33
+ </div>
34
+ </div>
35
+ </div>
36
+ </header>
37
+
38
+ <!-- Main Content -->
39
+ <main class="flex-grow container mx-auto px-4 py-8">
40
+ <!-- Search and Filters -->
41
+ <div class="bg-gray-800 rounded-xl p-5 mb-6">
42
+ <div class="flex flex-col md:flex-row gap-4">
43
+ <div class="flex-grow">
44
+ <div class="relative">
45
+ <input type="text" placeholder="Search servers..." class="w-full bg-gray-700 border border-gray-600 rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
46
+ <i data-feather="search" class="absolute left-3 top-2.5 text-gray-400"></i>
47
+ </div>
48
+ </div>
49
+ <div class="flex gap-3">
50
+ <select class="bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
51
+ <option>All Statuses</option>
52
+ <option>Online</option>
53
+ <option>Offline</option>
54
+ <option>Error</option>
55
+ </select>
56
+ <select class="bg-gray-700 border border-gray-600 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
57
+ <option>Sort by Name</option>
58
+ <option>Sort by Members</option>
59
+ <option>Sort by Activity</option>
60
+ </select>
61
+ </div>
62
+ </div>
63
+ </div>
64
+
65
+ <!-- Servers Grid -->
66
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
67
+ <!-- Server Card 1 -->
68
+ <div class="bg-gray-800 rounded-xl p-5 hover:bg-gray-750 transition duration-300">
69
+ <div class="flex items-start gap-4 mb-4">
70
+ <img src="http://static.photos/technology/128x128/1" alt="Gaming Community" class="w-16 h-16 rounded-lg object-cover">
71
+ <div class="flex-grow">
72
+ <div class="flex justify-between items-start">
73
+ <h3 class="text-xl font-bold">Gaming Community</h3>
74
+ <div class="bg-green-500 w-3 h-3 rounded-full"></div>
75
+ </div>
76
+ <p class="text-gray-400 text-sm">ID: 789456123456789456</p>
77
+ </div>
78
+ </div>
79
+
80
+ <div class="grid grid-cols-2 gap-4 mb-4">
81
+ <div class="bg-gray-700 rounded-lg p-3">
82
+ <p class="text-gray-400 text-sm">Members</p>
83
+ <p class="text-lg font-bold">2,841</p>
84
+ </div>
85
+ <div class="bg-gray-700 rounded-lg p-3">
86
+ <p class="text-gray-400 text-sm">Active Cogs</p>
87
+ <p class="text-lg font-bold">12</p>
88
+ </div>
89
+ </div>
90
+
91
+ <p class="text-gray-300 mb-4">A vibrant community for gamers with active discussions, game nights, and tournaments.</p>
92
+
93
+ <div class="flex gap-2">
94
+ <button class="flex-grow bg-indigo-600 hover:bg-indigo-700 py-2 rounded-lg flex items-center justify-center gap-2">
95
+ <i data-feather="settings"></i>
96
+ <span>Configure</span>
97
+ </button>
98
+ <button class="w-10 h-10 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center justify-center">
99
+ <i data-feather="more-vertical"></i>
100
+ </button>
101
+ </div>
102
+ </div>
103
+
104
+ <!-- Server Card 2 -->
105
+ <div class="bg-gray-800 rounded-xl p-5 hover:bg-gray-750 transition duration-300">
106
+ <div class="flex items-start gap-4 mb-4">
107
+ <img src="http://static.photos/people/128x128/2" alt="Tech Enthusiasts" class="w-16 h-16 rounded-lg object-cover">
108
+ <div class="flex-grow">
109
+ <div class="flex justify-between items-start">
110
+ <h3 class="text-xl font-bold">Tech Enthusiasts</h3>
111
+ <div class="bg-green-500 w-3 h-3 rounded-full"></div>
112
+ </div>
113
+ <p class="text-gray-400 text-sm">ID: 456789123456789456</p>
114
+ </div>
115
+ </div>
116
+
117
+ <div class="grid grid-cols-2 gap-4 mb-4">
118
+ <div class="bg-gray-700 rounded-lg p-3">
119
+ <p class="text-gray-400 text-sm">Members</p>
120
+ <p class="text-lg font-bold">1,205</p>
121
+ </div>
122
+ <div class="bg-gray-700 rounded-lg p-3">
123
+ <p class="text-gray-400 text-sm">Active Cogs</p>
124
+ <p class="text-lg font-bold">8</p>
125
+ </div>
126
+ </div>
127
+
128
+ <p class="text-gray-300 mb-4">Community for tech lovers discussing latest gadgets, programming, and innovations.</p>
129
+
130
+ <div class="flex gap-2">
131
+ <button class="flex-grow bg-indigo-600 hover:bg-indigo-700 py-2 rounded-lg flex items-center justify-center gap-2">
132
+ <i data-feather="settings"></i>
133
+ <span>Configure</span>
134
+ </button>
135
+ <button class="w-10 h-10 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center justify-center">
136
+ <i data-feather="more-vertical"></i>
137
+ </button>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Server Card 3 -->
142
+ <div class="bg-gray-800 rounded-xl p-5 hover:bg-gray-750 transition duration-300">
143
+ <div class="flex items-start gap-4 mb-4">
144
+ <img src="http://static.photos/nature/128x128/3" alt="Nature Lovers" class="w-16 h-16 rounded-lg object-cover">
145
+ <div class="flex-grow">
146
+ <div class="flex justify-between items-start">
147
+ <h3 class="text-xl font-bold">Nature Lovers</h3>
148
+ <div class="bg-yellow-500 w-3 h-3 rounded-full"></div>
149
+ </div>
150
+ <p class="text-gray-400 text-sm">ID: 321654987321654987</p>
151
+ </div>
152
+ </div>
153
+
154
+ <div class="grid grid-cols-2 gap-4 mb-4">
155
+ <div class="bg-gray-700 rounded-lg p-3">
156
+ <p class="text-gray-400 text-sm">Members</p>
157
+ <p class="text-lg font-bold">876</p>
158
+ </div>
159
+ <div class="bg-gray-700 rounded-lg p-3">
160
+ <p class="text-gray-400 text-sm">Active Cogs</p>
161
+ <p class="text-lg font-bold">5</p>
162
+ </div>
163
+ </div>
164
+
165
+ <p class="text-gray-300 mb-4">Community for nature photographers and outdoor enthusiasts sharing experiences.</p>
166
+
167
+ <div class="flex gap-2">
168
+ <button class="flex-grow bg-indigo-600 hover:bg-indigo-700 py-2 rounded-lg flex items-center justify-center gap-2">
169
+ <i data-feather="settings"></i>
170
+ <span>Configure</span>
171
+ </button>
172
+ <button class="w-10 h-10 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center justify-center">
173
+ <i data-feather="more-vertical"></i>
174
+ </button>
175
+ </div>
176
+ </div>
177
+
178
+ <!-- Server Card 4 -->
179
+ <div class="bg-gray-800 rounded-xl p-5 hover:bg-gray-750 transition duration-300">
180
+ <div class="flex items-start gap-4 mb-4">
181
+ <img src="http://static.photos/office/128x128/4" alt="Professional Network" class="w-16 h-16 rounded-lg object-cover">
182
+ <div class="flex-grow">
183
+ <div class="flex justify-between items-start">
184
+ <h3 class="text-xl font-bold">Professional Network</h3>
185
+ <div class="bg-red-500 w-3 h-3 rounded-full"></div>
186
+ </div>
187
+ <p class="text-gray-400 text-sm">ID: 987654321987654321</p>
188
+ </div>
189
+ </div>
190
+
191
+ <div class="grid grid-cols-2 gap-4 mb-4">
192
+ <div class="bg-gray-700 rounded-lg p-3">
193
+ <p class="text-gray-400 text-sm">Members</p>
194
+ <p class="text-lg font-bold">3,421</p>
195
+ </div>
196
+ <div class="bg-gray-700 rounded-lg p-3">
197
+ <p class="text-gray-400 text-sm">Active Cogs</p>
198
+ <p class="text-lg font-bold">15</p>
199
+ </div>
200
+ </div>
201
+
202
+ <p class="text-gray-300 mb-4">Business professionals networking and sharing industry insights and opportunities.</p>
203
+
204
+ <div class="flex gap-2">
205
+ <button class="flex-grow bg-indigo-600 hover:bg-indigo-700 py-2 rounded-lg flex items-center justify-center gap-2">
206
+ <i data-feather="settings"></i>
207
+ <span>Configure</span>
208
+ </button>
209
+ <button class="w-10 h-10 bg-gray-700 hover:bg-gray-600 rounded-lg flex items-center justify-center">
210
+ <i data-feather="more-vertical"></i>
211
+ </button>
212
+ </div>
213
+ </div>
214
+ </div>
215
+
216
+ <!-- Pagination -->
217
+ <div class="mt-8 flex justify-center">
218
+ <div class="flex gap-2">
219
+ <button class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center">
220
+ <i data-feather="chevron-left"></i>
221
+ </button>
222
+ <button class="w-10 h-10 bg-indigo-600 rounded-lg flex items-center justify-center">1</button>
223
+ <button class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center">2</button>
224
+ <button class="w-10 h-10 bg-gray-800 rounded-lg flex items-center justify-center">
225
+ <i data-feather="chevron-right"></i>
226
+ </button>
227
+ </div>
228
+ </div>
229
+ </main>
230
+
231
+ <custom-footer></custom-footer>
232
+
233
+ <script src="components/navbar.js"></script>
234
+ <script src="components/footer.js"></script>
235
+ <script src="script.js"></script>
236
+ <script>
237
+ feather.replace();
238
+ </script>
239
+ </body>
240
+ </html>
style.css CHANGED
@@ -1,28 +1,58 @@
 
 
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
 
 
 
 
 
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
 
 
 
 
 
 
 
 
 
 
28
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Shared styles across all pages */
2
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
3
+
4
  body {
5
+ font-family: 'Inter', sans-serif;
6
+ margin: 0;
7
+ padding: 0;
8
+ min-height: 100vh;
9
+ display: flex;
10
+ flex-direction: column;
11
+ }
12
+
13
+ /* Custom scrollbar */
14
+ ::-webkit-scrollbar {
15
+ width: 8px;
16
  }
17
 
18
+ ::-webkit-scrollbar-track {
19
+ background: #1f2937;
 
20
  }
21
 
22
+ ::-webkit-scrollbar-thumb {
23
+ background: #4f46e5;
24
+ border-radius: 4px;
 
 
25
  }
26
 
27
+ ::-webkit-scrollbar-thumb:hover {
28
+ background: #6366f1;
 
 
 
 
29
  }
30
 
31
+ /* Toggle switch styling */
32
+ input[type="checkbox"] + label::before {
33
+ content: '';
34
+ position: absolute;
35
+ display: block;
36
+ height: 16px;
37
+ width: 16px;
38
+ top: 0;
39
+ left: 0;
40
+ border-radius: 16px;
41
+ background: #fff;
42
+ transition: 0.2s ease-in-out;
43
  }
44
+
45
+ input[type="checkbox"]:checked + label::before {
46
+ left: 24px;
47
+ }
48
+
49
+ /* Responsive fixes */
50
+ @media (max-width: 768px) {
51
+ .hero-content {
52
+ padding: 2rem 1rem;
53
+ }
54
+
55
+ .feature-grid {
56
+ grid-template-columns: 1fr;
57
+ }
58
+ }