Hugging Face's logo

Spaces:
den999222
/
android-app-center
Running

App Files Community
den999222 commited on
Commit
2c67638
·
verified ·
1 Parent(s): 10d92a4

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1222 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Android App Center
3
- emoji: 🦀
4
- colorFrom: pink
5
- colorTo: pink
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: android-app-center
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1222 @@
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>Android Tablet Control Center</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary: #4285f4;
11
+ --secondary: #34a853;
12
+ --danger: #ea4335;
13
+ --warning: #fbbc05;
14
+ --dark: #202124;
15
+ --light: #f8f9fa;
16
+ --gray: #dadce0;
17
+ }
18
+
19
+ * {
20
+ margin: 0;
21
+ padding: 0;
22
+ box-sizing: border-box;
23
+ font-family: 'Roboto', Arial, sans-serif;
24
+ }
25
+
26
+ body {
27
+ background-color: #f5f5f5;
28
+ color: var(--dark);
29
+ line-height: 1.6;
30
+ }
31
+
32
+ .container {
33
+ max-width: 1200px;
34
+ margin: 0 auto;
35
+ padding: 20px;
36
+ }
37
+
38
+ header {
39
+ display: flex;
40
+ justify-content: space-between;
41
+ align-items: center;
42
+ padding: 15px 0;
43
+ margin-bottom: 20px;
44
+ border-bottom: 1px solid var(--gray);
45
+ }
46
+
47
+ .logo {
48
+ display: flex;
49
+ align-items: center;
50
+ gap: 10px;
51
+ }
52
+
53
+ .logo i {
54
+ font-size: 2rem;
55
+ color: var(--primary);
56
+ }
57
+
58
+ .logo h1 {
59
+ font-size: 1.8rem;
60
+ font-weight: 500;
61
+ }
62
+
63
+ .devices {
64
+ display: flex;
65
+ gap: 10px;
66
+ align-items: center;
67
+ }
68
+
69
+ .device-chip {
70
+ background-color: var(--primary);
71
+ color: white;
72
+ padding: 6px 12px;
73
+ border-radius: 20px;
74
+ font-size: 0.9rem;
75
+ display: flex;
76
+ align-items: center;
77
+ gap: 5px;
78
+ }
79
+
80
+ .main-content {
81
+ display: grid;
82
+ grid-template-columns: 300px 1fr;
83
+ gap: 20px;
84
+ }
85
+
86
+ .sidebar {
87
+ background-color: white;
88
+ border-radius: 10px;
89
+ box-shadow: 0 2px 10px rgba(0,0,0,0.05);
90
+ padding: 15px;
91
+ }
92
+
93
+ .sidebar-menu {
94
+ list-style: none;
95
+ }
96
+
97
+ .sidebar-menu li {
98
+ margin-bottom: 5px;
99
+ }
100
+
101
+ .sidebar-menu a {
102
+ display: flex;
103
+ align-items: center;
104
+ gap: 10px;
105
+ padding: 10px 15px;
106
+ border-radius: 8px;
107
+ color: var(--dark);
108
+ text-decoration: none;
109
+ transition: all 0.2s;
110
+ }
111
+
112
+ .sidebar-menu a:hover {
113
+ background-color: var(--gray);
114
+ }
115
+
116
+ .sidebar-menu a.active {
117
+ background-color: #e8f0fe;
118
+ color: var(--primary);
119
+ font-weight: 500;
120
+ }
121
+
122
+ .sidebar-menu a i {
123
+ width: 24px;
124
+ text-align: center;
125
+ }
126
+
127
+ .content-area {
128
+ display: grid;
129
+ grid-template-rows: auto 1fr;
130
+ gap: 20px;
131
+ }
132
+
133
+ .card {
134
+ background-color: white;
135
+ border-radius: 10px;
136
+ box-shadow: 0 2px 10px rgba(0,0,0,0.05);
137
+ padding: 20px;
138
+ margin-bottom: 20px;
139
+ }
140
+
141
+ .card-header {
142
+ display: flex;
143
+ justify-content: space-between;
144
+ align-items: center;
145
+ margin-bottom: 15px;
146
+ padding-bottom: 10px;
147
+ border-bottom: 1px solid var(--gray);
148
+ }
149
+
150
+ .card-title {
151
+ font-size: 1.2rem;
152
+ font-weight: 500;
153
+ }
154
+
155
+ .tabs {
156
+ display: flex;
157
+ border-bottom: 1px solid var(--gray);
158
+ margin-bottom: 20px;
159
+ }
160
+
161
+ .tab {
162
+ padding: 10px 20px;
163
+ cursor: pointer;
164
+ border-bottom: 3px solid transparent;
165
+ transition: all 0.2s;
166
+ }
167
+
168
+ .tab.active {
169
+ border-bottom: 3px solid var(--primary);
170
+ color: var(--primary);
171
+ font-weight: 500;
172
+ }
173
+
174
+ .tab:hover:not(.active) {
175
+ background-color: rgba(0,0,0,0.02);
176
+ }
177
+
178
+ .tab-content {
179
+ display: none;
180
+ }
181
+
182
+ .tab-content.active {
183
+ display: block;
184
+ }
185
+
186
+ .form-group {
187
+ margin-bottom: 15px;
188
+ }
189
+
190
+ .form-group label {
191
+ display: block;
192
+ margin-bottom: 5px;
193
+ font-weight: 500;
194
+ }
195
+
196
+ .form-control {
197
+ width: 100%;
198
+ padding: 10px 15px;
199
+ border: 1px solid var(--gray);
200
+ border-radius: 8px;
201
+ font-size: 1rem;
202
+ transition: border 0.2s;
203
+ }
204
+
205
+ .form-control:focus {
206
+ outline: none;
207
+ border-color: var(--primary);
208
+ }
209
+
210
+ .btn {
211
+ padding: 10px 20px;
212
+ border-radius: 8px;
213
+ border: none;
214
+ font-size: 1rem;
215
+ cursor: pointer;
216
+ transition: all 0.2s;
217
+ display: inline-flex;
218
+ align-items: center;
219
+ gap: 8px;
220
+ }
221
+
222
+ .btn-primary {
223
+ background-color: var(--primary);
224
+ color: white;
225
+ }
226
+
227
+ .btn-primary:hover {
228
+ background-color: #3367d6;
229
+ }
230
+
231
+ .btn-secondary {
232
+ background-color: var(--secondary);
233
+ color: white;
234
+ }
235
+
236
+ .btn-secondary:hover {
237
+ background-color: #2d9249;
238
+ }
239
+
240
+ .btn-danger {
241
+ background-color: var(--danger);
242
+ color: white;
243
+ }
244
+
245
+ .btn-danger:hover {
246
+ background-color: #d33426;
247
+ }
248
+
249
+ .btn-block {
250
+ display: block;
251
+ width: 100%;
252
+ }
253
+
254
+ .drag-drop-area {
255
+ border: 2px dashed var(--gray);
256
+ border-radius: 8px;
257
+ padding: 30px;
258
+ text-align: center;
259
+ cursor: pointer;
260
+ transition: all 0.2s;
261
+ margin-bottom: 15px;
262
+ }
263
+
264
+ .drag-drop-area:hover {
265
+ border-color: var(--primary);
266
+ }
267
+
268
+ .drag-drop-area i {
269
+ font-size: 3rem;
270
+ color: var(--primary);
271
+ margin-bottom: 10px;
272
+ }
273
+
274
+ .drag-drop-area p {
275
+ color: #666;
276
+ }
277
+
278
+ .file-list {
279
+ list-style: none;
280
+ }
281
+
282
+ .file-item {
283
+ display: flex;
284
+ justify-content: space-between;
285
+ align-items: center;
286
+ padding: 10px;
287
+ border-bottom: 1px solid var(--gray);
288
+ }
289
+
290
+ .file-info {
291
+ display: flex;
292
+ align-items: center;
293
+ gap: 10px;
294
+ }
295
+
296
+ .file-icon {
297
+ color: var(--primary);
298
+ }
299
+
300
+ .file-actions {
301
+ display: flex;
302
+ gap: 10px;
303
+ }
304
+
305
+ .file-action {
306
+ background: none;
307
+ border: none;
308
+ color: var(--dark);
309
+ cursor: pointer;
310
+ font-size: 1rem;
311
+ }
312
+
313
+ .file-action.delete {
314
+ color: var(--danger);
315
+ }
316
+
317
+ .commands-grid {
318
+ display: grid;
319
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
320
+ gap: 15px;
321
+ }
322
+
323
+ .command-card {
324
+ background-color: white;
325
+ border-radius: 8px;
326
+ box-shadow: 0 2px 5px rgba(0,0,0,0.05);
327
+ padding: 15px;
328
+ cursor: pointer;
329
+ transition: all 0.2s;
330
+ border: 1px solid var(--gray);
331
+ text-align: center;
332
+ }
333
+
334
+ .command-card:hover {
335
+ transform: translateY(-2px);
336
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1);
337
+ border-color: var(--primary);
338
+ }
339
+
340
+ .command-card i {
341
+ font-size: 2rem;
342
+ color: var(--primary);
343
+ margin-bottom: 10px;
344
+ }
345
+
346
+ .command-card h3 {
347
+ font-size: 1rem;
348
+ font-weight: 500;
349
+ margin-bottom: 5px;
350
+ }
351
+
352
+ .command-card p {
353
+ font-size: 0.8rem;
354
+ color: #666;
355
+ }
356
+
357
+ .device-status {
358
+ display: grid;
359
+ grid-template-columns: repeat(2, 1fr);
360
+ gap: 15px;
361
+ }
362
+
363
+ .status-card {
364
+ background-color: white;
365
+ border-radius: 8px;
366
+ box-shadow: 0 2px 5px rgba(0,0,0,0.05);
367
+ padding: 15px;
368
+ display: flex;
369
+ flex-direction: column;
370
+ align-items: center;
371
+ border-left: 4px solid var(--primary);
372
+ }
373
+
374
+ .status-card.battery {
375
+ border-left-color: var(--secondary);
376
+ }
377
+
378
+ .status-card.storage {
379
+ border-left-color: var(--warning);
380
+ }
381
+
382
+ .status-card.cpu {
383
+ border-left-color: var(--danger);
384
+ }
385
+
386
+ .status-title {
387
+ font-size: 0.9rem;
388
+ color: #666;
389
+ margin-bottom: 10px;
390
+ }
391
+
392
+ .status-value {
393
+ font-size: 1.5rem;
394
+ font-weight: 500;
395
+ }
396
+
397
+ .log-container {
398
+ height: 300px;
399
+ overflow-y: auto;
400
+ background-color: #f8f9fa;
401
+ border: 1px solid var(--gray);
402
+ border-radius: 8px;
403
+ padding: 15px;
404
+ font-family: monospace;
405
+ font-size: 0.9rem;
406
+ }
407
+
408
+ .log-entry {
409
+ margin-bottom: 5px;
410
+ padding-bottom: 5px;
411
+ border-bottom: 1px solid #eee;
412
+ }
413
+
414
+ .log-time {
415
+ color: #666;
416
+ margin-right: 10px;
417
+ }
418
+
419
+ .log-message.success {
420
+ color: var(--secondary);
421
+ }
422
+
423
+ .log-message.error {
424
+ color: var(--danger);
425
+ }
426
+
427
+ .log-message.info {
428
+ color: var(--primary);
429
+ }
430
+
431
+ @media (max-width: 768px) {
432
+ .main-content {
433
+ grid-template-columns: 1fr;
434
+ }
435
+
436
+ .device-status {
437
+ grid-template-columns: 1fr;
438
+ }
439
+ }
440
+ </style>
441
+ </head>
442
+ <body>
443
+ <div class="container">
444
+ <header>
445
+ <div class="logo">
446
+ <i class="fas fa-tablet-alt"></i>
447
+ <h1>Android Control Center</h1>
448
+ </div>
449
+ <div class="devices">
450
+ <div class="device-chip">
451
+ <i class="fas fa-circle" style="font-size: 0.7rem; color: #4caf50;"></i>
452
+ <span>Tablet-001</span>
453
+ <i class="fas fa-chevron-down" style="font-size: 0.8rem;"></i>
454
+ </div>
455
+ </div>
456
+ </header>
457
+
458
+ <div class="main-content">
459
+ <div class="sidebar">
460
+ <ul class="sidebar-menu">
461
+ <li><a href="#" class="active" data-tab="dashboard"><i class="fas fa-tachometer-alt"></i> Dashboard</a></li>
462
+ <li><a href="#" data-tab="file-transfer"><i class="fas fa-file-upload"></i> File Transfer</a></li>
463
+ <li><a href="#" data-tab="commands"><i class="fas fa-terminal"></i> Commands</a></li>
464
+ <li><a href="#" data-tab="browser"><i class="fas fa-globe"></i> Remote Browser</a></li>
465
+ <li><a href="#" data-tab="screenshare"><i class="fas fa-desktop"></i> Screen Share</a></li>
466
+ <li><a href="#" data-tab="settings"><i class="fas fa-cog"></i> Settings</a></li>
467
+ </ul>
468
+ </div>
469
+
470
+ <div class="content-area">
471
+ <div class="tabs">
472
+ <div class="tab active" data-tab="dashboard">Dashboard</div>
473
+ <div class="tab" data-tab="file-transfer">File Transfer</div>
474
+ <div class="tab" data-tab="commands">Commands</div>
475
+ <div class="tab" data-tab="browser">Remote Browser</div>
476
+ <div class="tab" data-tab="screenshare">Screen Share</div>
477
+ </div>
478
+
479
+ <div class="tab-content active" id="dashboard-tab">
480
+ <div class="card">
481
+ <div class="card-header">
482
+ <h2 class="card-title">Device Status</h2>
483
+ </div>
484
+ <div class="device-status">
485
+ <div class="status-card">
486
+ <div class="status-title">Connected Device</div>
487
+ <div class="status-value">Tablet-001</div>
488
+ </div>
489
+ <div class="status-card battery">
490
+ <div class="status-title">Battery Level</div>
491
+ <div class="status-value">87%</div>
492
+ </div>
493
+ <div class="status-card storage">
494
+ <div class="status-title">Storage Available</div>
495
+ <div class="status-value">32.4 GB</div>
496
+ </div>
497
+ <div class="status-card cpu">
498
+ <div class="status-title">CPU Usage</div>
499
+ <div class="status-value">24%</div>
500
+ </div>
501
+ </div>
502
+ </div>
503
+
504
+ <div class="card">
505
+ <div class="card-header">
506
+ <h2 class="card-title">Quick Actions</h2>
507
+ </div>
508
+ <div class="commands-grid">
509
+ <div class="command-card" data-command="screenshot">
510
+ <i class="fas fa-camera"></i>
511
+ <h3>Take Screenshot</h3>
512
+ <p>Capture current screen</p>
513
+ </div>
514
+ <div class="command-card" data-command="lock">
515
+ <i class="fas fa-lock"></i>
516
+ <h3>Lock Device</h3>
517
+ <p>Lock the tablet</p>
518
+ </div>
519
+ <div class="command-card" data-command="reboot">
520
+ <i class="fas fa-power-off"></i>
521
+ <h3>Reboot</h3>
522
+ <p>Restart the device</p>
523
+ </div>
524
+ <div class="command-card" data-command="volume-up">
525
+ <i class="fas fa-volume-up"></i>
526
+ <h3>Volume Up</h3>
527
+ <p>Increase volume</p>
528
+ </div>
529
+ <div class="command-card" data-command="volume-down">
530
+ <i class="fas fa-volume-down"></i>
531
+ <h3>Volume Down</h3>
532
+ <p>Decrease volume</p>
533
+ </div>
534
+ <div class="command-card" data-command="mute">
535
+ <i class="fas fa-volume-mute"></i>
536
+ <h3>Mute</h3>
537
+ <p>Silence the device</p>
538
+ </div>
539
+ </div>
540
+ </div>
541
+
542
+ <div class="card">
543
+ <div class="card-header">
544
+ <h2 class="card-title">Activity Log</h2>
545
+ <button class="btn btn-secondary" id="clear-logs">
546
+ <i class="fas fa-trash"></i> Clear
547
+ </button>
548
+ </div>
549
+ <div class="log-container" id="activity-log">
550
+ <div class="log-entry">
551
+ <span class="log-time">10:23:45</span>
552
+ <span class="log-message info">Connected to Tablet-001</span>
553
+ </div>
554
+ <div class="log-entry">
555
+ <span class="log-time">10:24:12</span>
556
+ <span class="log-message success">File "presentation.pdf" transferred successfully</span>
557
+ </div>
558
+ <div class="log-entry">
559
+ <span class="log-time">10:25:03</span>
560
+ <span class="log-message info">Opened URL: https://example.com</span>
561
+ </div>
562
+ </div>
563
+ </div>
564
+ </div>
565
+
566
+ <div class="tab-content" id="file-transfer-tab">
567
+ <div class="card">
568
+ <div class="card-header">
569
+ <h2 class="card-title">Transfer Files</h2>
570
+ </div>
571
+ <div class="drag-drop-area" id="drop-area">
572
+ <i class="fas fa-cloud-upload-alt"></i>
573
+ <p>Drag & drop files here or click to browse</p>
574
+ <input type="file" id="file-input" style="display: none;" multiple>
575
+ </div>
576
+ <div class="form-group">
577
+ <label for="destination-path">Destination Folder</label>
578
+ <input type="text" class="form-control" id="destination-path" value="/sdcard/Downloads/">
579
+ </div>
580
+ <button class="btn btn-primary btn-block" id="upload-btn">
581
+ <i class="fas fa-upload"></i> Upload Files
582
+ </button>
583
+ </div>
584
+
585
+ <div class="card">
586
+ <div class="card-header">
587
+ <h2 class="card-title">File Queue</h2>
588
+ </div>
589
+ <ul class="file-list" id="file-queue">
590
+ <li class="file-item">
591
+ <div class="file-info">
592
+ <i class="fas fa-file-pdf file-icon"></i>
593
+ <div>
594
+ <div class="file-name">presentation.pdf</div>
595
+ <div class="file-size">2.4 MB</div>
596
+ </div>
597
+ </div>
598
+ <div class="file-actions">
599
+ <button class="file-action delete">
600
+ <i class="fas fa-trash"></i>
601
+ </button>
602
+ </div>
603
+ </li>
604
+ <li class="file-item">
605
+ <div class="file-info">
606
+ <i class="fas fa-file-image file-icon"></i>
607
+ <div>
608
+ <div class="file-name">screenshot.png</div>
609
+ <div class="file-size">450 KB</div>
610
+ </div>
611
+ </div>
612
+ <div class="file-actions">
613
+ <button class="file-action delete">
614
+ <i class="fas fa-trash"></i>
615
+ </button>
616
+ </div>
617
+ </li>
618
+ </ul>
619
+ </div>
620
+ </div>
621
+
622
+ <div class="tab-content" id="commands-tab">
623
+ <div class="card">
624
+ <div class="card-header">
625
+ <h2 class="card-title">Execute Command</h2>
626
+ </div>
627
+ <div class="form-group">
628
+ <label for="command-input">ADB Command</label>
629
+ <input type="text" class="form-control" id="command-input" placeholder="e.g., pm list packages">
630
+ </div>
631
+ <button class="btn btn-primary" id="execute-btn">
632
+ <i class="fas fa-play"></i> Execute
633
+ </button>
634
+ <button class="btn btn-secondary" id="clear-cmd">
635
+ <i class="fas fa-broom"></i> Clear
636
+ </button>
637
+ </div>
638
+
639
+ <div class="card">
640
+ <div class="card-header">
641
+ <h2 class="card-title">Command Output</h2>
642
+ </div>
643
+ <div class="form-group">
644
+ <textarea class="form-control" id="command-output" rows="8" readonly></textarea>
645
+ </div>
646
+ </div>
647
+ </div>
648
+
649
+ <div class="tab-content" id="browser-tab">
650
+ <div class="card">
651
+ <div class="card-header">
652
+ <h2 class="card-title">Remote Browser</h2>
653
+ </div>
654
+ <div class="form-group">
655
+ <label for="url-input">URL to Open</label>
656
+ <input type="url" class="form-control" id="url-input" placeholder="https://example.com">
657
+ </div>
658
+ <div class="form-group">
659
+ <label for="browser-package">Browser Package</label>
660
+ <select class="form-control" id="browser-package">
661
+ <option value="com.android.chrome">Chrome</option>
662
+ <option value="com.brave.browser">Brave</option>
663
+ <option value="org.mozilla.firefox">Firefox</option>
664
+ <option value="com.opera.browser">Opera</option>
665
+ <option value="custom">Custom...</option>
666
+ </select>
667
+ </div>
668
+ <div class="form-group" id="custom-package-container" style="display: none;">
669
+ <label for="custom-package">Custom Package Name</label>
670
+ <input type="text" class="form-control" id="custom-package" placeholder="com.example.browser">
671
+ </div>
672
+ <button class="btn btn-primary" id="open-url-btn">
673
+ <i class="fas fa-external-link-alt"></i> Open URL
674
+ </button>
675
+ </div>
676
+
677
+ <div class="card">
678
+ <div class="card-header">
679
+ <h2 class="card-title">Browser Shortcuts</h2>
680
+ </div>
681
+ <div class="commands-grid">
682
+ <div class="command-card" data-browser-action="back">
683
+ <i class="fas fa-arrow-left"></i>
684
+ <h3>Go Back</h3>
685
+ <p>Browser back navigation</p>
686
+ </div>
687
+ <div class="command-card" data-browser-action="forward">
688
+ <i class="fas fa-arrow-right"></i>
689
+ <h3>Go Forward</h3>
690
+ <p>Browser forward navigation</p>
691
+ </div>
692
+ <div class="command-card" data-browser-action="refresh">
693
+ <i class="fas fa-sync-alt"></i>
694
+ <h3>Refresh</h3>
695
+ <p>Reload current page</p>
696
+ </div>
697
+ <div class="command-card" data-browser-action="home">
698
+ <i class="fas fa-home"></i>
699
+ <h3>Home</h3>
700
+ <p>Open browser homepage</p>
701
+ </div>
702
+ <div class="command-card" data-browser-action="zoom-in">
703
+ <i class="fas fa-search-plus"></i>
704
+ <h3>Zoom In</h3>
705
+ <p>Increase page zoom</p>
706
+ </div>
707
+ <div class="command-card" data-browser-action="zoom-out">
708
+ <i class="fas fa-search-minus"></i>
709
+ <h3>Zoom Out</h3>
710
+ <p>Decrease page zoom</p>
711
+ </div>
712
+ </div>
713
+ </div>
714
+ </div>
715
+
716
+ <div class="tab-content" id="screenshare-tab">
717
+ <div class="card">
718
+ <div class="card-header">
719
+ <h2 class="card-title">Screen Sharing</h2>
720
+ <div>
721
+ <button class="btn btn-primary" id="start-stream-btn">
722
+ <i class="fas fa-play"></i> Start Stream
723
+ </button>
724
+ <button class="btn btn-danger" id="stop-stream-btn" disabled>
725
+ <i class="fas fa-stop"></i> Stop Stream
726
+ </button>
727
+ </div>
728
+ </div>
729
+ <div class="form-group">
730
+ <label for="stream-quality">Stream Quality</label>
731
+ <select class="form-control" id="stream-quality">
732
+ <option value="low">Low (640x480)</option>
733
+ <option value="medium" selected>Medium (1280x720)</option>
734
+ <option value="high">High (1920x1080)</option>
735
+ </select>
736
+ </div>
737
+ <div class="screenshare-container" style="background-color: #222; border-radius: 8px; padding: 20px; text-align: center;">
738
+ <div id="stream-placeholder" style="color: #666; font-size: 1.2rem;">
739
+ <i class="fas fa-desktop" style="font-size: 3rem; margin-bottom: 10px;"></i>
740
+ <p>Screen sharing not active</p>
741
+ </div>
742
+ <canvas id="stream-canvas" style="display: none; max-width: 100%;"></canvas>
743
+ </div>
744
+
745
+ <div class="card">
746
+ <div class="card-header">
747
+ <h2 class="card-title">Remote Control</h2>
748
+ </div>
749
+ <div style="text-align: center;">
750
+ <div style="display: inline-block; margin-bottom: 15px;">
751
+ <button class="btn btn-secondary" id="remote-up">
752
+ <i class="fas fa-arrow-up"></i>
753
+ </button>
754
+ <div style="margin: 5px 0;">
755
+ <button class="btn btn-secondary" id="remote-left">
756
+ <i class="fas fa-arrow-left"></i>
757
+ </button>
758
+ <button class="btn btn-primary" style="width: 60px; margin: 0 5px;">
759
+ <i class="fas fa-hand-pointer"></i>
760
+ </button>
761
+ <button class="btn btn-secondary" id="remote-right">
762
+ <i class="fas fa-arrow-right"></i>
763
+ </button>
764
+ </div>
765
+ <button class="btn btn-secondary" id="remote-down">
766
+ <i class="fas fa-arrow-down"></i>
767
+ </button>
768
+ </div>
769
+ <div>
770
+ <button class="btn btn-secondary" id="remote-back">
771
+ <i class="fas fa-step-backward"></i> Back
772
+ </button>
773
+ <button class="btn btn-secondary" id="remote-home">
774
+ <i class="fas fa-home"></i> Home
775
+ </button>
776
+ <button class="btn btn-secondary" id="remote-recents">
777
+ <i class="fas fa-window-restore"></i> Recents
778
+ </button>
779
+ </div>
780
+ </div>
781
+ </div>
782
+ </div>
783
+ </div>
784
+ </div>
785
+ </div>
786
+ </div>
787
+
788
+ <script>
789
+ document.addEventListener('DOMContentLoaded', function() {
790
+ // Tab navigation
791
+ const tabs = document.querySelectorAll('.tab');
792
+ const sidebarLinks = document.querySelectorAll('.sidebar-menu a');
793
+ const tabContents = document.querySelectorAll('.tab-content');
794
+
795
+ function switchTab(tabId) {
796
+ // Update tabs
797
+ tabs.forEach(tab => {
798
+ if (tab.dataset.tab === tabId) {
799
+ tab.classList.add('active');
800
+ } else {
801
+ tab.classList.remove('active');
802
+ }
803
+ });
804
+
805
+ // Update content
806
+ tabContents.forEach(content => {
807
+ if (content.id === `${tabId}-tab`) {
808
+ content.classList.add('active');
809
+ } else {
810
+ content.classList.remove('active');
811
+ }
812
+ });
813
+
814
+ // Update sidebar
815
+ sidebarLinks.forEach(link => {
816
+ if (link.dataset.tab === tabId) {
817
+ link.classList.add('active');
818
+ } else {
819
+ link.classList.remove('active');
820
+ }
821
+ });
822
+ }
823
+
824
+ tabs.forEach(tab => {
825
+ tab.addEventListener('click', () => {
826
+ switchTab(tab.dataset.tab);
827
+ });
828
+ });
829
+
830
+ sidebarLinks.forEach(link => {
831
+ link.addEventListener('click', (e) => {
832
+ e.preventDefault();
833
+ switchTab(link.dataset.tab);
834
+ });
835
+ });
836
+
837
+ // File transfer functionality
838
+ const dropArea = document.getElementById('drop-area');
839
+ const fileInput = document.getElementById('file-input');
840
+ const fileQueue = document.getElementById('file-queue');
841
+
842
+ dropArea.addEventListener('click', () => {
843
+ fileInput.click();
844
+ });
845
+
846
+ fileInput.addEventListener('change', handleFiles);
847
+
848
+ // Prevent default drag behaviors
849
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
850
+ dropArea.addEventListener(eventName, preventDefaults, false);
851
+ });
852
+
853
+ function preventDefaults(e) {
854
+ e.preventDefault();
855
+ e.stopPropagation();
856
+ }
857
+
858
+ // Highlight drop area when item is dragged over it
859
+ ['dragenter', 'dragover'].forEach(eventName => {
860
+ dropArea.addEventListener(eventName, highlight, false);
861
+ });
862
+
863
+ ['dragleave', 'drop'].forEach(eventName => {
864
+ dropArea.addEventListener(eventName, unhighlight, false);
865
+ });
866
+
867
+ function highlight() {
868
+ dropArea.style.borderColor = '#4285f4';
869
+ dropArea.style.backgroundColor = '#f0f7ff';
870
+ }
871
+
872
+ function unhighlight() {
873
+ dropArea.style.borderColor = '#dadce0';
874
+ dropArea.style.backgroundColor = 'transparent';
875
+ }
876
+
877
+ // Handle dropped files
878
+ dropArea.addEventListener('drop', handleDrop, false);
879
+
880
+ function handleDrop(e) {
881
+ const dt = e.dataTransfer;
882
+ const files = dt.files;
883
+ handleFiles(files);
884
+ }
885
+
886
+ function handleFiles(files) {
887
+ for (let i = 0; i < files.length; i++) {
888
+ const file = files[i];
889
+ addFileToQueue(file);
890
+ }
891
+ }
892
+
893
+ function addFileToQueue(file) {
894
+ const fileItem = document.createElement('li');
895
+ fileItem.className = 'file-item';
896
+
897
+ const fileIcon = document.createElement('i');
898
+ fileIcon.className = 'fas file-icon';
899
+
900
+ // Set icon based on file type
901
+ if (file.type.match('image.*')) {
902
+ fileIcon.classList.add('fa-file-image');
903
+ } else if (file.type.match('application/pdf')) {
904
+ fileIcon.classList.add('fa-file-pdf');
905
+ } else if (file.type.match('text.*')) {
906
+ fileIcon.classList.add('fa-file-alt');
907
+ } else if (file.type.match('video.*')) {
908
+ fileIcon.classList.add('fa-file-video');
909
+ } else if (file.type.match('audio.*')) {
910
+ fileIcon.classList.add('fa-file-audio');
911
+ } else if (file.type.match('application/zip') ||
912
+ file.type.match('application/x-rar-compressed') ||
913
+ file.type.match('application/x-7z-compressed')) {
914
+ fileIcon.classList.add('fa-file-archive');
915
+ } else {
916
+ fileIcon.classList.add('fa-file');
917
+ }
918
+
919
+ const fileSize = formatFileSize(file.size);
920
+
921
+ fileItem.innerHTML = `
922
+ <div class="file-info">
923
+ ${fileIcon.outerHTML}
924
+ <div>
925
+ <div class="file-name">${file.name}</div>
926
+ <div class="file-size">${fileSize}</div>
927
+ </div>
928
+ </div>
929
+ <div class="file-actions">
930
+ <button class="file-action delete">
931
+ <i class="fas fa-trash"></i>
932
+ </button>
933
+ </div>
934
+ `;
935
+
936
+ fileQueue.appendChild(fileItem);
937
+
938
+ // Add event listener for delete button
939
+ fileItem.querySelector('.file-action.delete').addEventListener('click', () => {
940
+ fileItem.remove();
941
+ });
942
+ }
943
+
944
+ function formatFileSize(bytes) {
945
+ if (bytes === 0) return '0 Bytes';
946
+ const k = 1024;
947
+ const sizes = ['Bytes', 'KB', 'MB', 'GB'];
948
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
949
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
950
+ }
951
+
952
+ // Upload button functionality
953
+ const uploadBtn = document.getElementById('upload-btn');
954
+ uploadBtn.addEventListener('click', () => {
955
+ const files = fileInput.files;
956
+ if (files.length === 0 && fileQueue.children.length === 0) {
957
+ alert('Please add files to transfer first');
958
+ return;
959
+ }
960
+
961
+ const destination = document.getElementById('destination-path').value.trim();
962
+ if (!destination) {
963
+ alert('Please specify a destination folder');
964
+ return;
965
+ }
966
+
967
+ // Simulate file transfer
968
+ const logContainer = document.getElementById('activity-log');
969
+ const logEntry = document.createElement('div');
970
+ logEntry.className = 'log-entry';
971
+ logEntry.innerHTML = `
972
+ <span class="log-time">${new Date().toLocaleTimeString()}</span>
973
+ <span class="log-message success">Files transferred successfully to ${destination}</span>
974
+ `;
975
+ logContainer.insertBefore(logEntry, logContainer.firstChild);
976
+
977
+ // Clear the queue (in a real app, this would happen after successful transfer)
978
+ fileQueue.innerHTML = '';
979
+ fileInput.value = '';
980
+
981
+ alert('Files transferred successfully!');
982
+ });
983
+
984
+ // Command execution functionality
985
+ const commandInput = document.getElementById('command-input');
986
+ const executeBtn = document.getElementById('execute-btn');
987
+ const commandOutput = document.getElementById('command-output');
988
+ const clearCmdBtn = document.getElementById('clear-cmd');
989
+
990
+ executeBtn.addEventListener('click', () => {
991
+ const command = commandInput.value.trim();
992
+ if (!command) {
993
+ alert('Please enter a command');
994
+ return;
995
+ }
996
+
997
+ // Simulate command execution
998
+ const output = `$ ${command}\n`;
999
+
1000
+ if (command === 'pm list packages') {
1001
+ commandOutput.value = output + `
1002
+ package:com.android.vending
1003
+ package:com.google.android.gms
1004
+ package:com.android.chrome
1005
+ package:org.mozilla.firefox
1006
+ package:com.example.myapp`;
1007
+ } else if (command === 'ip addr') {
1008
+ commandOutput.value = output + `
1009
+ 1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN
1010
+ link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
1011
+ inet 127.0.0.1/8 scope host lo
1012
+ valid_lft forever preferred_lft forever
1013
+ 2: wlan0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP qlen 1000
1014
+ link/ether 12:34:56:78:90:ab brd ff:ff:ff:ff:ff:ff
1015
+ inet 192.168.1.101/24 brd 192.168.1.255 scope global wlan0
1016
+ valid_lft forever preferred_lft forever`;
1017
+ } else if (command === 'adb devices') {
1018
+ commandOutput.value = output + `
1019
+ List of devices attached
1020
+ emulator-5554 device
1021
+ ABCD123456 device`;
1022
+ } else {
1023
+ commandOutput.value = output + `Command executed successfully!`;
1024
+ }
1025
+
1026
+ // Add to activity log
1027
+ const logContainer = document.getElementById('activity-log');
1028
+ const logEntry = document.createElement('div');
1029
+ logEntry.className = 'log-entry';
1030
+ logEntry.innerHTML = `
1031
+ <span class="log-time">${new Date().toLocaleTimeString()}</span>
1032
+ <span class="log-message info">Executed command: ${command}</span>
1033
+ `;
1034
+ logContainer.insertBefore(logEntry, logContainer.firstChild);
1035
+ });
1036
+
1037
+ clearCmdBtn.addEventListener('click', () => {
1038
+ commandInput.value = '';
1039
+ commandOutput.value = '';
1040
+ });
1041
+
1042
+ // Browser package selection
1043
+ const browserPackageSelect = document.getElementById('browser-package');
1044
+ const customPackageContainer = document.getElementById('custom-package-container');
1045
+
1046
+ browserPackageSelect.addEventListener('change', () => {
1047
+ if (browserPackageSelect.value === 'custom') {
1048
+ customPackageContainer.style.display = 'block';
1049
+ } else {
1050
+ customPackageContainer.style.display = 'none';
1051
+ }
1052
+ });
1053
+
1054
+ // Open URL functionality
1055
+ const openUrlBtn = document.getElementById('open-url-btn');
1056
+ const urlInput = document.getElementById('url-input');
1057
+
1058
+ openUrlBtn.addEventListener('click', () => {
1059
+ const url = urlInput.value.trim();
1060
+ if (!url) {
1061
+ alert('Please enter a URL');
1062
+ return;
1063
+ }
1064
+
1065
+ // Validate URL
1066
+ try {
1067
+ new URL(url);
1068
+ } catch (e) {
1069
+ alert('Please enter a valid URL');
1070
+ return;
1071
+ }
1072
+
1073
+ const packageName = browserPackageSelect.value === 'custom'
1074
+ ? document.getElementById('custom-package').value.trim()
1075
+ : browserPackageSelect.value;
1076
+
1077
+ if (!packageName) {
1078
+ alert('Please select or enter a browser package name');
1079
+ return;
1080
+ }
1081
+
1082
+ // Add to activity log
1083
+ const logContainer = document.getElementById('activity-log');
1084
+ const logEntry = document.createElement('div');
1085
+ logEntry.className = 'log-entry';
1086
+ logEntry.innerHTML = `
1087
+ <span class="log-time">${new Date().toLocaleTimeString()}</span>
1088
+ <span class="log-message info">Opened URL ${url} in ${packageName}</span>
1089
+ `;
1090
+ logContainer.insertBefore(logEntry, logContainer.firstChild);
1091
+
1092
+ alert(`Opening ${url} in ${packageName}`);
1093
+ });
1094
+
1095
+ // Screen sharing functionality
1096
+ const startStreamBtn = document.getElementById('start-stream-btn');
1097
+ const stopStreamBtn = document.getElementById('stop-stream-btn');
1098
+ const streamPlaceholder = document.getElementById('stream-placeholder');
1099
+ const streamCanvas = document.getElementById('stream-canvas');
1100
+
1101
+ startStreamBtn.addEventListener('click', () => {
1102
+ startStreamBtn.disabled = true;
1103
+ stopStreamBtn.disabled = false;
1104
+
1105
+ streamPlaceholder.style.display = 'none';
1106
+ streamCanvas.style.display = 'block';
1107
+
1108
+ // Simulate stream starting (in a real app, you'd connect to a WebSocket or similar)
1109
+ const ctx = streamCanvas.getContext('2d');
1110
+ ctx.fillStyle = '#333';
1111
+ ctx.fillRect(0, 0, streamCanvas.width, streamCanvas.height);
1112
+ ctx.fillStyle = '#fff';
1113
+ ctx.font = '20px Arial';
1114
+ ctx.fillText('Connected to tablet screen', 20, 50);
1115
+
1116
+ // Add to activity log
1117
+ const logContainer = document.getElementById('activity-log');
1118
+ const logEntry = document.createElement('div');
1119
+ logEntry.className = 'log-entry';
1120
+ logEntry.innerHTML = `
1121
+ <span class="log-time">${new Date().toLocaleTimeString()}</span>
1122
+ <span class="log-message success">Started screen sharing</span>
1123
+ `;
1124
+ logContainer.insertBefore(logEntry, logContainer.firstChild);
1125
+ });
1126
+
1127
+ stopStreamBtn.addEventListener('click', () => {
1128
+ startStreamBtn.disabled = false;
1129
+ stopStreamBtn.disabled = true;
1130
+
1131
+ streamPlaceholder.style.display = 'block';
1132
+ streamCanvas.style.display = 'none';
1133
+
1134
+ // Add to activity log
1135
+ const logContainer = document.getElementById('activity-log');
1136
+ const logEntry = document.createElement('div');
1137
+ logEntry.className = 'log-entry';
1138
+ logEntry.innerHTML = `
1139
+ <span class="log-time">${new Date().toLocaleTimeString()}</span>
1140
+ <span class="log-message info">Stopped screen sharing</span>
1141
+ `;
1142
+ logContainer.insertBefore(logEntry, logContainer.firstChild);
1143
+ });
1144
+
1145
+ // Clear logs button
1146
+ const clearLogsBtn = document.getElementById('clear-logs');
1147
+ clearLogsBtn.addEventListener('click', () => {
1148
+ document.getElementById('activity-log').innerHTML = '';
1149
+ });
1150
+
1151
+ // Quick command buttons
1152
+ const commandCards = document.querySelectorAll('.command-card[data-command]');
1153
+ commandCards.forEach(card => {
1154
+ card.addEventListener('click', () => {
1155
+ const command = card.dataset.command;
1156
+
1157
+ // Add to activity log
1158
+ const logContainer = document.getElementById('activity-log');
1159
+ const logEntry = document.createElement('div');
1160
+ logEntry.className = 'log-entry';
1161
+ logEntry.innerHTML = `
1162
+ <span class="log-time">${new Date().toLocaleTimeString()}</span>
1163
+ <span class="log-message success">Executed command: ${command}</span>
1164
+ `;
1165
+ logContainer.insertBefore(logEntry, logContainer.firstChild);
1166
+
1167
+ alert(`Command executed: ${command}`);
1168
+ });
1169
+ });
1170
+
1171
+ // Browser action buttons
1172
+ const browserActionCards = document.querySelectorAll('.command-card[data-browser-action]');
1173
+ browserActionCards.forEach(card => {
1174
+ card.addEventListener('click', () => {
1175
+ const action = card.dataset.browserAction;
1176
+
1177
+ // Add to activity log
1178
+ const logContainer = document.getElementById('activity-log');
1179
+ const logEntry = document.createElement('div');
1180
+ logEntry.className = 'log-entry';
1181
+ logEntry.innerHTML = `
1182
+ <span class="log-time">${new Date().toLocaleTimeString()}</span>
1183
+ <span class="log-message info">Browser action: ${action}</span>
1184
+ `;
1185
+ logContainer.insertBefore(logEntry, logContainer.firstChild);
1186
+
1187
+ alert(`Browser action: ${action}`);
1188
+ });
1189
+ });
1190
+
1191
+ // Remote control buttons
1192
+ const remoteBtns = ['up', 'down', 'left', 'right', 'back', 'home', 'recents'];
1193
+ remoteBtns.forEach(btn => {
1194
+ const element = document.getElementById(`remote-${btn}`);
1195
+ element.addEventListener('click', () => {
1196
+ // Add to activity log
1197
+ const logContainer = document.getElementById('activity-log');
1198
+ const logEntry = document.createElement('div');
1199
+ logEntry.className = 'log-entry';
1200
+ logEntry.innerHTML = `
1201
+ <span class="log-time">${new Date().toLocaleTimeString()}</span>
1202
+ <span class="log-message info">Remote control: ${btn}</span>
1203
+ `;
1204
+ logContainer.insertBefore(logEntry, logContainer.firstChild);
1205
+
1206
+ alert(`Remote control: ${btn}`);
1207
+ });
1208
+ });
1209
+
1210
+ // Initialize stream canvas size
1211
+ function resizeCanvas() {
1212
+ const container = document.querySelector('.screenshare-container');
1213
+ streamCanvas.width = container.clientWidth - 40;
1214
+ streamCanvas.height = streamCanvas.width * (9 / 16);
1215
+ }
1216
+
1217
+ window.addEventListener('resize', resizeCanvas);
1218
+ resizeCanvas();
1219
+ });
1220
+ </script>
1221
+ <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 <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
1222
+ </html>