Hugging Face's logo

Spaces:
Trigger82
/
Trigger
Sleeping

App Files Community
Trigger82 commited on
Commit
2e5b78f
·
verified ·
1 Parent(s): e937b48

Upload 2 files

Browse files
Files changed (2) hide show
  1. public/index.html +93 -0
  2. public/style.css +373 -0
public/index.html ADDED
@@ -0,0 +1,93 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>FunkBot Panel - WhatsApp Bot Control</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="/socket.io/socket.io.js"></script>
9
+ </head>
10
+ <body>
11
+ <!-- Video Background -->
12
+ <div id="video-background">
13
+ <video autoplay muted loop id="funk-video">
14
+ <source src="" type="video/mp4">
15
+ </video>
16
+ <div id="video-overlay"></div>
17
+ </div>
18
+
19
+ <!-- Main Panel -->
20
+ <div class="panel">
21
+ <div class="header">
22
+ <h1>🎵 FunkBot Panel</h1>
23
+ <div class="controls">
24
+ <button id="theme-toggle">🌙 Dark Mode</button>
25
+ <button id="music-toggle">🔊 Play Music</button>
26
+ </div>
27
+ </div>
28
+
29
+ <!-- Login/Register Section -->
30
+ <div id="auth-section">
31
+ <div class="tabs">
32
+ <button class="tab active" data-tab="login">Login</button>
33
+ <button class="tab" data-tab="register">Register</button>
34
+ </div>
35
+
36
+ <div id="login-form" class="form active">
37
+ <input type="text" id="login-username" placeholder="Username" required>
38
+ <input type="password" id="login-password" placeholder="Password" required>
39
+ <button id="login-btn">Login</button>
40
+ <div id="login-message" class="message"></div>
41
+ </div>
42
+
43
+ <div id="register-form" class="form">
44
+ <input type="text" id="register-username" placeholder="Username" required>
45
+ <input type="password" id="register-password" placeholder="Password (min 8 chars)" required>
46
+ <input type="password" id="register-confirm" placeholder="Confirm Password" required>
47
+ <button id="register-btn">Register</button>
48
+ <div id="register-message" class="message"></div>
49
+ </div>
50
+ </div>
51
+
52
+ <!-- Bot Control Section (after login) -->
53
+ <div id="bot-section" class="hidden">
54
+ <div class="dashboard">
55
+ <div class="stats">
56
+ <div class="stat-card">
57
+ <h3>🕒 Uptime</h3>
58
+ <p id="uptime">00:00:00</p>
59
+ </div>
60
+ <div class="stat-card">
61
+ <h3>🤖 Bots</h3>
62
+ <p id="bot-count">0</p>
63
+ </div>
64
+ <div class="stat-card">
65
+ <h3>👥 Users</h3>
66
+ <p id="user-count">0</p>
67
+ </div>
68
+ </div>
69
+
70
+ <div class="deploy-section">
71
+ <h2>🚀 Deploy New Bot</h2>
72
+ <div class="form-row">
73
+ <input type="text" id="repo-url" placeholder="GitHub Repo URL" required>
74
+ <input type="text" id="entry-file" placeholder="Entry File (e.g., index.js)" value="index.js" required>
75
+ </div>
76
+ <button id="deploy-btn">Deploy Bot</button>
77
+ </div>
78
+
79
+ <div class="terminal">
80
+ <h2>Terminal Output</h2>
81
+ <div id="output"></div>
82
+ <div class="input-group">
83
+ <input type="text" id="command-input" placeholder="Enter command...">
84
+ <button id="send-command">Send</button>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </div>
90
+
91
+ <script src="script.js"></script>
92
+ </body>
93
+ </html>
public/style.css ADDED
@@ -0,0 +1,373 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Base styles */
2
+ :root {
3
+ --primary: #8e44ad;
4
+ --secondary: #9b59b6;
5
+ --dark: #2c3e50;
6
+ --light: #ecf0f1;
7
+ --success: #2ecc71;
8
+ --danger: #e74c3c;
9
+ --warning: #f39c12;
10
+ --info: #3498db;
11
+ }
12
+
13
+ * {
14
+ margin: 0;
15
+ padding: 0;
16
+ box-sizing: border-box;
17
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
18
+ }
19
+
20
+ body {
21
+ overflow-x: hidden;
22
+ color: var(--light);
23
+ background: linear-gradient(135deg, #1a1a2e, #16213e);
24
+ }
25
+
26
+ /* Video Background */
27
+ #video-background {
28
+ position: fixed;
29
+ top: 0;
30
+ left: 0;
31
+ width: 100vw;
32
+ height: 100vh;
33
+ z-index: -1;
34
+ overflow: hidden;
35
+ }
36
+
37
+ #funk-video {
38
+ position: absolute;
39
+ top: 50%;
40
+ left: 50%;
41
+ min-width: 100%;
42
+ min-height: 100%;
43
+ width: auto;
44
+ height: auto;
45
+ transform: translate(-50%, -50%);
46
+ opacity: 0.2;
47
+ filter: blur(5px);
48
+ }
49
+
50
+ #video-overlay {
51
+ position: absolute;
52
+ top: 0;
53
+ left: 0;
54
+ width: 100%;
55
+ height: 100%;
56
+ background: radial-gradient(circle, rgba(22, 33, 62, 0.8) 0%, rgba(10, 15, 30, 0.9) 100%);
57
+ }
58
+
59
+ /* Main Panel */
60
+ .panel {
61
+ max-width: 1200px;
62
+ margin: 2rem auto;
63
+ padding: 2rem;
64
+ background: rgba(25, 35, 65, 0.8);
65
+ backdrop-filter: blur(10px);
66
+ border-radius: 15px;
67
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
68
+ border: 1px solid rgba(255, 255, 255, 0.1);
69
+ }
70
+
71
+ .header {
72
+ display: flex;
73
+ justify-content: space-between;
74
+ align-items: center;
75
+ margin-bottom: 2rem;
76
+ padding-bottom: 1rem;
77
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
78
+ }
79
+
80
+ .header h1 {
81
+ font-size: 2.5rem;
82
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
83
+ -webkit-background-clip: text;
84
+ background-clip: text;
85
+ color: transparent;
86
+ text-shadow: 0 0 10px rgba(142, 68, 173, 0.5);
87
+ }
88
+
89
+ .controls {
90
+ display: flex;
91
+ gap: 1rem;
92
+ }
93
+
94
+ .controls button {
95
+ padding: 0.5rem 1rem;
96
+ background: rgba(255, 255, 255, 0.1);
97
+ border: 1px solid rgba(255, 255, 255, 0.2);
98
+ color: white;
99
+ border-radius: 5px;
100
+ cursor: pointer;
101
+ transition: all 0.3s;
102
+ }
103
+
104
+ .controls button:hover {
105
+ background: rgba(255, 255, 255, 0.2);
106
+ transform: translateY(-2px);
107
+ }
108
+
109
+ /* Auth Section */
110
+ .tabs {
111
+ display: flex;
112
+ margin-bottom: 1rem;
113
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
114
+ }
115
+
116
+ .tab {
117
+ padding: 0.75rem 1.5rem;
118
+ background: transparent;
119
+ border: none;
120
+ color: var(--light);
121
+ cursor: pointer;
122
+ position: relative;
123
+ font-size: 1rem;
124
+ }
125
+
126
+ .tab.active {
127
+ color: var(--primary);
128
+ }
129
+
130
+ .tab.active::after {
131
+ content: '';
132
+ position: absolute;
133
+ bottom: -1px;
134
+ left: 0;
135
+ width: 100%;
136
+ height: 3px;
137
+ background: var(--primary);
138
+ border-radius: 3px;
139
+ }
140
+
141
+ .form {
142
+ display: none;
143
+ max-width: 500px;
144
+ margin: 0 auto;
145
+ }
146
+
147
+ .form.active {
148
+ display: block;
149
+ }
150
+
151
+ .form input {
152
+ width: 100%;
153
+ padding: 0.75rem 1rem;
154
+ margin-bottom: 1rem;
155
+ background: rgba(255, 255, 255, 0.1);
156
+ border: 1px solid rgba(255, 255, 255, 0.2);
157
+ border-radius: 5px;
158
+ color: white;
159
+ font-size: 1rem;
160
+ }
161
+
162
+ .form input:focus {
163
+ outline: none;
164
+ border-color: var(--primary);
165
+ box-shadow: 0 0 0 2px rgba(142, 68, 173, 0.3);
166
+ }
167
+
168
+ .form button {
169
+ width: 100%;
170
+ padding: 0.75rem;
171
+ background: var(--primary);
172
+ color: white;
173
+ border: none;
174
+ border-radius: 5px;
175
+ font-size: 1rem;
176
+ font-weight: 600;
177
+ cursor: pointer;
178
+ transition: all 0.3s;
179
+ }
180
+
181
+ .form button:hover {
182
+ background: var(--secondary);
183
+ transform: translateY(-2px);
184
+ }
185
+
186
+ .message {
187
+ margin-top: 1rem;
188
+ padding: 0.75rem;
189
+ border-radius: 5px;
190
+ text-align: center;
191
+ }
192
+
193
+ /* Bot Section */
194
+ #bot-section {
195
+ display: none;
196
+ }
197
+
198
+ .stats {
199
+ display: grid;
200
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
201
+ gap: 1.5rem;
202
+ margin-bottom: 2rem;
203
+ }
204
+
205
+ .stat-card {
206
+ background: rgba(255, 255, 255, 0.05);
207
+ border-radius: 10px;
208
+ padding: 1.5rem;
209
+ text-align: center;
210
+ transition: transform 0.3s;
211
+ }
212
+
213
+ .stat-card:hover {
214
+ transform: translateY(-5px);
215
+ background: rgba(255, 255, 255, 0.08);
216
+ }
217
+
218
+ .stat-card h3 {
219
+ margin-bottom: 0.5rem;
220
+ color: var(--primary);
221
+ font-size: 1.1rem;
222
+ }
223
+
224
+ .stat-card p {
225
+ font-size: 1.8rem;
226
+ font-weight: 700;
227
+ }
228
+
229
+ .deploy-section {
230
+ background: rgba(0, 0, 0, 0.2);
231
+ border-radius: 10px;
232
+ padding: 1.5rem;
233
+ margin-bottom: 2rem;
234
+ }
235
+
236
+ .deploy-section h2 {
237
+ margin-bottom: 1rem;
238
+ color: var(--primary);
239
+ }
240
+
241
+ .form-row {
242
+ display: flex;
243
+ gap: 1rem;
244
+ margin-bottom: 1rem;
245
+ }
246
+
247
+ .form-row input {
248
+ flex: 1;
249
+ padding: 0.75rem 1rem;
250
+ background: rgba(255, 255, 255, 0.1);
251
+ border: 1px solid rgba(255, 255, 255, 0.2);
252
+ border-radius: 5px;
253
+ color: white;
254
+ font-size: 1rem;
255
+ }
256
+
257
+ #deploy-btn {
258
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
259
+ color: white;
260
+ border: none;
261
+ border-radius: 5px;
262
+ padding: 0.75rem 1.5rem;
263
+ font-size: 1rem;
264
+ font-weight: 600;
265
+ cursor: pointer;
266
+ transition: all 0.3s;
267
+ }
268
+
269
+ #deploy-btn:hover {
270
+ transform: translateY(-2px);
271
+ box-shadow: 0 5px 15px rgba(142, 68, 173, 0.4);
272
+ }
273
+
274
+ .terminal {
275
+ background: rgba(0, 0, 0, 0.5);
276
+ border-radius: 10px;
277
+ padding: 1.5rem;
278
+ font-family: 'Courier New', monospace;
279
+ }
280
+
281
+ .terminal h2 {
282
+ margin-bottom: 1rem;
283
+ color: var(--primary);
284
+ }
285
+
286
+ #output {
287
+ height: 300px;
288
+ overflow-y: auto;
289
+ background: #1a1a1a;
290
+ border-radius: 5px;
291
+ padding: 1rem;
292
+ margin-bottom: 1rem;
293
+ font-size: 0.9rem;
294
+ line-height: 1.5;
295
+ white-space: pre-wrap;
296
+ }
297
+
298
+ .input-group {
299
+ display: flex;
300
+ gap: 0.5rem;
301
+ }
302
+
303
+ #command-input {
304
+ flex: 1;
305
+ padding: 0.75rem;
306
+ background: rgba(255, 255, 255, 0.1);
307
+ border: 1px solid rgba(255, 255, 255, 0.2);
308
+ border-radius: 5px;
309
+ color: white;
310
+ font-family: 'Courier New', monospace;
311
+ }
312
+
313
+ #send-command {
314
+ background: var(--info);
315
+ color: white;
316
+ border: none;
317
+ border-radius: 5px;
318
+ padding: 0 1.5rem;
319
+ cursor: pointer;
320
+ transition: all 0.3s;
321
+ }
322
+
323
+ #send-command:hover {
324
+ background: #2980b9;
325
+ }
326
+
327
+ /* Utility classes */
328
+ .hidden {
329
+ display: none;
330
+ }
331
+
332
+ .success {
333
+ background: rgba(46, 204, 113, 0.2);
334
+ color: #2ecc71;
335
+ }
336
+
337
+ .error {
338
+ background: rgba(231, 76, 60, 0.2);
339
+ color: #e74c3c;
340
+ }
341
+
342
+ .warning {
343
+ background: rgba(243, 156, 18, 0.2);
344
+ color: #f39c12;
345
+ }
346
+
347
+ /* Animations */
348
+ @keyframes fadeIn {
349
+ from { opacity: 0; transform: translateY(10px); }
350
+ to { opacity: 1; transform: translateY(0); }
351
+ }
352
+
353
+ .panel {
354
+ animation: fadeIn 0.8s ease-out;
355
+ }
356
+
357
+ /* Responsive */
358
+ @media (max-width: 768px) {
359
+ .panel {
360
+ padding: 1rem;
361
+ margin: 1rem;
362
+ }
363
+
364
+ .header {
365
+ flex-direction: column;
366
+ text-align: center;
367
+ gap: 1rem;
368
+ }
369
+
370
+ .form-row {
371
+ flex-direction: column;
372
+ }
373
+ }