Hugging Face's logo

Spaces:
oxyle
/
ssha
Running

App Files Community
oxyle commited on
Commit
aa5645c
·
verified ·
1 Parent(s): 27e54dc

Add posibility to ping any ip on real no simulation - Follow Up Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +404 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Ssha
3
- emoji: 🏆
4
- colorFrom: indigo
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: ssha
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: green
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,404 @@
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>WebSSH Client</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .terminal {
11
+ font-family: 'Courier New', monospace;
12
+ background-color: #1e1e1e;
13
+ color: #f0f0f0;
14
+ height: 400px;
15
+ overflow-y: auto;
16
+ padding: 1rem;
17
+ border-radius: 0.5rem;
18
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
19
+ }
20
+
21
+ .prompt {
22
+ color: #4ade80;
23
+ }
24
+
25
+ .command {
26
+ color: #60a5fa;
27
+ }
28
+
29
+ .output {
30
+ color: #f0f0f0;
31
+ white-space: pre-wrap;
32
+ }
33
+
34
+ .error {
35
+ color: #f87171;
36
+ }
37
+
38
+ .cursor {
39
+ display: inline-block;
40
+ width: 10px;
41
+ height: 20px;
42
+ background-color: #f0f0f0;
43
+ animation: blink 1s infinite;
44
+ }
45
+
46
+ @keyframes blink {
47
+ 0%, 100% { opacity: 1; }
48
+ 50% { opacity: 0; }
49
+ }
50
+
51
+ /* Custom scrollbar for terminal */
52
+ .terminal::-webkit-scrollbar {
53
+ width: 8px;
54
+ }
55
+
56
+ .terminal::-webkit-scrollbar-track {
57
+ background: #2d2d2d;
58
+ }
59
+
60
+ .terminal::-webkit-scrollbar-thumb {
61
+ background: #4b5563;
62
+ border-radius: 4px;
63
+ }
64
+
65
+ .terminal::-webkit-scrollbar-thumb:hover {
66
+ background: #6b7280;
67
+ }
68
+ </style>
69
+ </head>
70
+ <body class="bg-gray-900 min-h-screen text-white">
71
+ <div class="container mx-auto px-4 py-8">
72
+ <div class="max-w-4xl mx-auto">
73
+ <div class="flex items-center justify-between mb-6">
74
+ <h1 class="text-3xl font-bold text-green-400">
75
+ <i class="fas fa-terminal mr-2"></i> WebSSH Client
76
+ </h1>
77
+ <div class="flex items-center space-x-2">
78
+ <span id="connection-status" class="px-3 py-1 rounded-full text-xs font-semibold bg-gray-700">Disconnected</span>
79
+ </div>
80
+ </div>
81
+
82
+ <div class="bg-gray-800 rounded-lg shadow-lg p-6 mb-6">
83
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-4">
84
+ <div class="md:col-span-1">
85
+ <label for="host" class="block text-sm font-medium text-gray-300 mb-1">Host/IP</label>
86
+ <input type="text" id="host" placeholder="example.com or 192.168.1.1"
87
+ class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-green-500">
88
+ </div>
89
+ <div>
90
+ <label for="port" class="block text-sm font-medium text-gray-300 mb-1">Port</label>
91
+ <input type="number" id="port" value="22"
92
+ class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-green-500">
93
+ </div>
94
+ <div>
95
+ <label for="username" class="block text-sm font-medium text-gray-300 mb-1">Username</label>
96
+ <input type="text" id="username" placeholder="root"
97
+ class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-green-500">
98
+ </div>
99
+ <div>
100
+ <label for="password" class="block text-sm font-medium text-gray-300 mb-1">Password</label>
101
+ <div class="flex">
102
+ <input type="password" id="password" placeholder="••••••••"
103
+ class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-l-md text-white focus:outline-none focus:ring-2 focus:ring-green-500">
104
+ <button id="toggle-password" class="px-3 bg-gray-600 border border-gray-600 rounded-r-md">
105
+ <i class="fas fa-eye"></i>
106
+ </button>
107
+ </div>
108
+ </div>
109
+ </div>
110
+
111
+ <div class="flex space-x-3">
112
+ <button id="connect-btn" class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-md font-medium flex items-center">
113
+ <i class="fas fa-plug mr-2"></i> Connect
114
+ </button>
115
+ <button id="disconnect-btn" class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-md font-medium flex items-center opacity-50 cursor-not-allowed" disabled>
116
+ <i class="fas fa-power-off mr-2"></i> Disconnect
117
+ </button>
118
+ <button id="clear-btn" class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-md font-medium flex items-center">
119
+ <i class="fas fa-broom mr-2"></i> Clear
120
+ </button>
121
+ </div>
122
+ </div>
123
+
124
+ <div class="terminal mb-4" id="terminal">
125
+ <div class="output">
126
+ <span class="prompt">webssh-client$</span> <span class="command">Welcome to WebSSH Client</span><br>
127
+ <span class="output">This is a browser-based SSH client interface. Enter your connection details above and click Connect to establish a session.</span><br><br>
128
+ <span class="prompt">webssh-client$</span> <span class="command">status</span><br>
129
+ <span class="output">Current status: <span class="error">Disconnected</span></span><br><br>
130
+ <span class="prompt">webssh-client$</span> <span id="cursor" class="cursor"></span>
131
+ </div>
132
+ </div>
133
+
134
+ <div class="bg-gray-800 rounded-lg shadow-lg p-4">
135
+ <div class="flex items-center">
136
+ <input type="text" id="command-input" placeholder="Enter command..."
137
+ class="flex-grow px-3 py-2 bg-gray-700 border border-gray-600 rounded-l-md text-white focus:outline-none focus:ring-2 focus:ring-green-500" disabled>
138
+ <button id="send-btn" class="px-4 py-2 bg-green-600 hover:bg-green-700 rounded-r-md font-medium flex items-center" disabled>
139
+ <i class="fas fa-paper-plane mr-2"></i> Send
140
+ </button>
141
+ </div>
142
+ <div class="mt-3 flex flex-wrap gap-2">
143
+ <button class="quick-command px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">ls -la</button>
144
+ <button class="quick-command px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">cd /var/www</button>
145
+ <button class="quick-command px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">df -h</button>
146
+ <button class="quick-command px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">top</button>
147
+ <button class="quick-command px-3 py-1 bg-gray-700 hover:bg-gray-600 rounded text-sm">ping google.com</button>
148
+ </div>
149
+ </div>
150
+
151
+ <div class="mt-6 text-center text-gray-400 text-sm">
152
+ <p>Note: This is a frontend simulation. In a real implementation, you would need a backend service to establish actual SSH connections.</p>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <script>
158
+ document.addEventListener('DOMContentLoaded', function() {
159
+ // DOM elements
160
+ const terminal = document.getElementById('terminal');
161
+ const commandInput = document.getElementById('command-input');
162
+ const sendBtn = document.getElementById('send-btn');
163
+ const connectBtn = document.getElementById('connect-btn');
164
+ const disconnectBtn = document.getElementById('disconnect-btn');
165
+ const clearBtn = document.getElementById('clear-btn');
166
+ const togglePassword = document.getElementById('toggle-password');
167
+ const passwordInput = document.getElementById('password');
168
+ const connectionStatus = document.getElementById('connection-status');
169
+ const quickCommands = document.querySelectorAll('.quick-command');
170
+
171
+ // State
172
+ let isConnected = false;
173
+ let currentPrompt = 'webssh-client$';
174
+
175
+ // Toggle password visibility
176
+ togglePassword.addEventListener('click', function() {
177
+ if (passwordInput.type === 'password') {
178
+ passwordInput.type = 'text';
179
+ togglePassword.innerHTML = '<i class="fas fa-eye-slash"></i>';
180
+ } else {
181
+ passwordInput.type = 'password';
182
+ togglePassword.innerHTML = '<i class="fas fa-eye"></i>';
183
+ }
184
+ });
185
+
186
+ // Connect button
187
+ connectBtn.addEventListener('click', function() {
188
+ const host = document.getElementById('host').value;
189
+ const port = document.getElementById('port').value;
190
+ const username = document.getElementById('username').value;
191
+ const password = document.getElementById('password').value;
192
+
193
+ if (!host || !username || !password) {
194
+ appendToTerminal('error', 'Please fill in all connection details');
195
+ return;
196
+ }
197
+
198
+ // Simulate connection
199
+ simulateConnection(host, port, username, password);
200
+ });
201
+
202
+ // Disconnect button
203
+ disconnectBtn.addEventListener('click', function() {
204
+ simulateDisconnection();
205
+ });
206
+
207
+ // Clear terminal
208
+ clearBtn.addEventListener('click', function() {
209
+ terminal.innerHTML = `
210
+ <div class="output">
211
+ <span class="prompt">${currentPrompt}</span> <span id="cursor" class="cursor"></span>
212
+ </div>
213
+ `;
214
+ });
215
+
216
+ // Send command
217
+ sendBtn.addEventListener('click', sendCommand);
218
+
219
+ // Quick commands
220
+ quickCommands.forEach(btn => {
221
+ btn.addEventListener('click', async function() {
222
+ if (isConnected) {
223
+ commandInput.value = this.textContent;
224
+ await sendCommand();
225
+ }
226
+ });
227
+ });
228
+
229
+ // Handle Enter key in command input
230
+ commandInput.addEventListener('keypress', function(e) {
231
+ if (e.key === 'Enter') {
232
+ sendCommand();
233
+ }
234
+ });
235
+
236
+ async function sendCommand() {
237
+ const command = commandInput.value.trim();
238
+ if (!command) return;
239
+
240
+ appendToTerminal('command', command);
241
+ commandInput.value = '';
242
+
243
+ // Execute command
244
+ const response = await simulateCommandResponse(command);
245
+ appendToTerminal('output', response);
246
+ }
247
+
248
+ function appendToTerminal(type, text) {
249
+ const outputDiv = terminal.querySelector('.output:last-child');
250
+
251
+ if (type === 'command') {
252
+ outputDiv.innerHTML = outputDiv.innerHTML.replace('<span id="cursor" class="cursor"></span>', '');
253
+ outputDiv.innerHTML += `<span class="prompt">${currentPrompt}</span> <span class="command">${text}</span><br>`;
254
+ }
255
+ else if (type === 'output') {
256
+ outputDiv.innerHTML += `<span class="output">${text}</span><br>`;
257
+ }
258
+ else if (type === 'error') {
259
+ outputDiv.innerHTML += `<span class="error">${text}</span><br>`;
260
+ }
261
+
262
+ // Add new prompt line with cursor
263
+ terminal.innerHTML += `
264
+ <div class="output">
265
+ <span class="prompt">${currentPrompt}</span> <span id="cursor" class="cursor"></span>
266
+ </div>
267
+ `;
268
+
269
+ // Scroll to bottom
270
+ terminal.scrollTop = terminal.scrollHeight;
271
+ }
272
+
273
+ function simulateConnection(host, port, username, password) {
274
+ isConnected = true;
275
+ connectBtn.disabled = true;
276
+ disconnectBtn.disabled = false;
277
+ commandInput.disabled = false;
278
+ sendBtn.disabled = false;
279
+ connectionStatus.textContent = 'Connected';
280
+ connectionStatus.className = 'px-3 py-1 rounded-full text-xs font-semibold bg-green-600';
281
+
282
+ appendToTerminal('command', `ssh ${username}@${host} -p ${port}`);
283
+
284
+ // Simulate connection process
285
+ setTimeout(() => {
286
+ appendToTerminal('output', `Connecting to ${host} on port ${port}...`);
287
+ }, 500);
288
+
289
+ setTimeout(() => {
290
+ appendToTerminal('output', `Authenticating as ${username}...`);
291
+ }, 1000);
292
+
293
+ setTimeout(() => {
294
+ appendToTerminal('output', `Welcome to Ubuntu 20.04.4 LTS (GNU/Linux 5.4.0-109-generic x86_64)`);
295
+ appendToTerminal('output', `Last login: Mon Jun 12 14:30:22 2023 from 192.168.1.100`);
296
+ currentPrompt = `${username}@${host.split('.')[0]}:~$`;
297
+
298
+ // Update the last prompt line
299
+ const lastOutput = terminal.querySelector('.output:last-child');
300
+ lastOutput.innerHTML = `<span class="prompt">${currentPrompt}</span> <span id="cursor" class="cursor"></span>`;
301
+ }, 1500);
302
+ }
303
+
304
+ function simulateDisconnection() {
305
+ appendToTerminal('command', 'exit');
306
+
307
+ setTimeout(() => {
308
+ appendToTerminal('output', 'Connection to remote host closed.');
309
+ isConnected = false;
310
+ connectBtn.disabled = false;
311
+ disconnectBtn.disabled = true;
312
+ commandInput.disabled = true;
313
+ sendBtn.disabled = true;
314
+ connectionStatus.textContent = 'Disconnected';
315
+ connectionStatus.className = 'px-3 py-1 rounded-full text-xs font-semibold bg-gray-700';
316
+ currentPrompt = 'webssh-client$';
317
+ }, 500);
318
+ }
319
+
320
+ async function executeRealPing(host) {
321
+ try {
322
+ const response = await fetch(`https://networkcalc.com/api/ping/${host}`);
323
+ const data = await response.json();
324
+ if (data.status === 'success') {
325
+ return data.output;
326
+ } else {
327
+ return `Ping failed: ${data.message || 'Unknown error'}`;
328
+ }
329
+ } catch (error) {
330
+ return `Error: ${error.message}`;
331
+ }
332
+ }
333
+
334
+ async function simulateCommandResponse(command) {
335
+ if (command.startsWith('ping ')) {
336
+ const host = command.split(' ')[1];
337
+ if (host) {
338
+ return await executeRealPing(host);
339
+ }
340
+ return 'Usage: ping <hostname or IP>';
341
+ }
342
+ else if (command === 'ls -la') {
343
+ return `total 72
344
+ drwxr-xr-x 5 root root 4096 Jun 5 10:15 .
345
+ drwxr-xr-x 3 root root 4096 May 20 09:30 ..
346
+ -rw-r--r-- 1 root root 148 Aug 17 2022 .bashrc
347
+ -rw-r--r-- 1 root root 377 Aug 17 2022 .profile
348
+ drwx------ 2 root root 4096 Jun 5 10:15 .ssh
349
+ drwxr-xr-x 2 root root 4096 May 20 09:30 logs
350
+ drwxr-xr-x 6 root root 4096 May 20 09:30 www`;
351
+ }
352
+ else if (command === 'pwd') {
353
+ return '/home/user';
354
+ }
355
+ else if (command === 'whoami') {
356
+ return 'user';
357
+ }
358
+ else if (command === 'date') {
359
+ return new Date().toString();
360
+ }
361
+ else if (command.startsWith('ping')) {
362
+ return `PING google.com (142.250.190.46) 56(84) bytes of data.
363
+ 64 bytes from 142.250.190.46: icmp_seq=1 ttl=117 time=12.3 ms
364
+ 64 bytes from 142.250.190.46: icmp_seq=2 ttl=117 time=11.8 ms
365
+ 64 bytes from 142.250.190.46: icmp_seq=3 ttl=117 time=12.1 ms
366
+
367
+ --- google.com ping statistics ---
368
+ 3 packets transmitted, 3 received, 0% packet loss, time 2003ms
369
+ rtt min/avg/max/mdev = 11.800/12.066/12.300/0.200 ms`;
370
+ }
371
+ else if (command === 'top') {
372
+ return `top - 14:30:45 up 1 day, 3:45, 1 user, load average: 0.00, 0.01, 0.05
373
+ Tasks: 125 total, 1 running, 124 sleeping, 0 stopped, 0 zombie
374
+ %Cpu(s): 0.3 us, 0.2 sy, 0.0 ni, 99.5 id, 0.0 wa, 0.0 hi, 0.0 si, 0.0 st
375
+ MiB Mem : 3950.8 total, 123.4 free, 1920.3 used, 1907.1 buff/cache
376
+ MiB Swap: 2048.0 total, 2048.0 free, 0.0 used. 1800.0 avail Mem`;
377
+ }
378
+ else if (command === 'df -h') {
379
+ return `Filesystem Size Used Avail Use% Mounted on
380
+ udev 2.0G 0 2.0G 0% /dev
381
+ tmpfs 395M 1.2M 394M 1% /run
382
+ /dev/sda1 39G 15G 23G 40% /
383
+ tmpfs 2.0G 0 2.0G 0% /dev/shm
384
+ tmpfs 5.0M 0 5.0M 0% /run/lock
385
+ tmpfs 2.0G 0 2.0G 0% /sys/fs/cgroup
386
+ /dev/sda15 105M 5.3M 100M 5% /boot/efi
387
+ tmpfs 395M 0 395M 0% /run/user/1000`;
388
+ }
389
+ else if (command === 'clear') {
390
+ terminal.innerHTML = `
391
+ <div class="output">
392
+ <span class="prompt">${currentPrompt}</span> <span id="cursor" class="cursor"></span>
393
+ </div>
394
+ `;
395
+ return '';
396
+ }
397
+ else {
398
+ return `${command}: command not found`;
399
+ }
400
+ }
401
+ });
402
+ </script>
403
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://deepsite.hf.co/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://deepsite.hf.co" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://deepsite.hf.co?remix=oxyle/ssha" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
404
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ Do an ssh online web client to connect to a ip
2
+ Add posibility to ping any ip on real no simulation