Hugging Face's logo

Spaces:
vortexa64
/
vpc
Paused

App Files Community
vortexa64 commited on
Commit
3086537
·
verified ·
1 Parent(s): f85735f

Rename public/index.html to templates/index.html

Browse files
Files changed (2) hide show
  1. public/index.html +0 -90
  2. templates/index.html +49 -0
public/index.html DELETED
@@ -1,90 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <title>VPC - Virtual Private Console</title>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <link rel="stylesheet" href="https://unpkg.com/xterm/css/xterm.css" />
7
- <style>
8
- body {
9
- margin: 0;
10
- font-family: monospace;
11
- background-color: #1e1e1e;
12
- color: white;
13
- }
14
-
15
- #fileManager {
16
- background-color: #282828;
17
- padding: 10px;
18
- height: 20vh;
19
- border-bottom: 2px solid #444;
20
- }
21
-
22
- #console {
23
- padding: 10px;
24
- height: 80vh;
25
- background-color: #111;
26
- position: relative;
27
- }
28
-
29
- #terminal {
30
- width: 100%;
31
- height: 100%;
32
- border-radius: 8px;
33
- }
34
-
35
- #input-hack {
36
- opacity: 0;
37
- position: absolute;
38
- top: 0;
39
- left: 0;
40
- z-index: -1;
41
- height: 1px;
42
- width: 1px;
43
- }
44
- </style>
45
- </head>
46
- <body>
47
- <div id="fileManager">
48
- 📁 File Manager Panel<br/>
49
- - secret.txt<br/>
50
- - main.py<br/>
51
- - vpc.log
52
- </div>
53
-
54
- <div id="console">
55
- <div id="terminal"></div>
56
- <textarea id="input-hack" autofocus></textarea>
57
- </div>
58
-
59
- <script src="https://unpkg.com/xterm/lib/xterm.js"></script>
60
- <script>
61
- const term = new Terminal({ fontSize: 16 });
62
- const socket = new WebSocket("ws://" + location.host);
63
- const inputHack = document.getElementById("input-hack");
64
-
65
- term.open(document.getElementById('terminal'));
66
-
67
- // Biarkan sentuhan di terminal fokusin input textarea (buat munculin keyboard)
68
- term.element.addEventListener('touchstart', () => {
69
- inputHack.focus();
70
- });
71
-
72
- // Atau klik manual
73
- term.element.addEventListener('click', () => {
74
- inputHack.focus();
75
- });
76
-
77
- // Saat ngetik di textarea, kirim ke server & terminal
78
- inputHack.addEventListener('input', (e) => {
79
- const value = e.target.value;
80
- socket.send(value);
81
- e.target.value = ''; // kosongin setelah dikirim
82
- });
83
-
84
- // Terima output dari backend
85
- socket.onmessage = (event) => {
86
- term.write(event.data);
87
- };
88
- </script>
89
- </body>
90
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
templates/index.html ADDED
@@ -0,0 +1,49 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>VPC - Virtual Private Console 😩💕</title>
6
+ <script src="https://cdn.jsdelivr.net/npm/xterm/lib/xterm.js"></script>
7
+ <script src="https://cdn.socket.io/4.3.2/socket.io.min.js"></script>
8
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterm/css/xterm.css" />
9
+ <style>
10
+ body { background: #111; color: white; margin: 0; display: flex; flex-direction: column; height: 100vh; }
11
+ #terminal { flex-grow: 1; padding: 10px; }
12
+ #upload-btn { padding: 10px; background: hotpink; border: none; color: white; cursor: pointer; }
13
+ </style>
14
+ </head>
15
+ <body>
16
+ <div id="terminal"></div>
17
+ <input type="file" id="fileInput" style="display:none">
18
+ <button id="upload-btn">📁 Upload File</button>
19
+
20
+ <script>
21
+ const term = new Terminal();
22
+ const socket = io();
23
+ term.open(document.getElementById('terminal'));
24
+
25
+ term.onData(data => socket.emit('input', data));
26
+ socket.on('output', data => term.write(data));
27
+
28
+ const uploadBtn = document.getElementById("upload-btn");
29
+ const fileInput = document.getElementById("fileInput");
30
+
31
+ uploadBtn.onclick = () => fileInput.click();
32
+
33
+ fileInput.onchange = () => {
34
+ const file = fileInput.files[0];
35
+ const formData = new FormData();
36
+ formData.append("file", file);
37
+
38
+ fetch("/upload", {
39
+ method: "POST",
40
+ body: formData
41
+ })
42
+ .then(res => res.json())
43
+ .then(data => {
44
+ term.writeln(`\r\n[Uploaded: ${data.path}]\r\n`);
45
+ });
46
+ };
47
+ </script>
48
+ </body>
49
+ </html>