Hugging Face's logo

Spaces:
userbymahadi
/
WebTermX
Sleeping

App Files Community
userbymahadi commited on
Commit
f00561d
·
verified ·
1 Parent(s): 86c7dfb

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +123 -156
index.html CHANGED
@@ -3,244 +3,211 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
- <title>Elite Mobile DevOps</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/lucide@latest"></script>
9
  <style>
10
- @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap');
11
- body { background: #020617; color: #f1f5f9; -webkit-tap-highlight-color: transparent; }
12
- .glass { background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.05); }
13
- .sidebar { transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 100; }
14
- .mono { font-family: 'JetBrains Mono', monospace; }
15
- input, button { outline: none !important; }
16
  </style>
17
  </head>
18
- <body class="h-screen flex flex-col overflow-hidden">
19
-
20
- <!-- Sidebar Overlay -->
21
- <div id="overlay" onclick="toggleSidebar()" class="fixed inset-0 bg-black/60 hidden z-[90]"></div>
22
 
23
  <!-- Header -->
24
- <header class="h-14 glass flex items-center justify-between px-4 sticky top-0 z-[80]">
25
- <button onclick="toggleSidebar()" class="p-2 active:scale-90 transition-transform">
26
- <i data-lucide="menu" class="w-6 h-6"></i>
27
- </button>
28
- <span class="text-xs font-bold tracking-[0.2em] text-indigo-400">ULTRA V4</span>
29
- <button onclick="logout()" class="p-2"><i data-lucide="log-out" class="w-5 h-5 text-slate-500"></i></button>
30
  </header>
31
 
32
  <div class="flex flex-1 relative overflow-hidden">
33
  <!-- Sidebar -->
34
- <aside id="sidebar" class="sidebar fixed inset-y-0 left-0 w-72 glass -translate-x-full shadow-2xl">
35
- <div class="p-6 pt-20 space-y-2">
36
- <button onclick="showPage('terminal')" class="w-full flex items-center gap-4 p-4 rounded-2xl hover:bg-indigo-500/20 active:bg-indigo-500 transition-all">
37
- <i data-lucide="terminal" class="w-5 h-5"></i> Terminal
38
  </button>
39
- <button onclick="showPage('files')" class="w-full flex items-center gap-4 p-4 rounded-2xl hover:bg-indigo-500/20 active:bg-indigo-500 transition-all">
40
- <i data-lucide="folder" class="w-5 h-5"></i> File Manager
41
  </button>
42
- <button onclick="showPage('proxy')" class="w-full flex items-center gap-4 p-4 rounded-2xl hover:bg-indigo-500/20 active:bg-indigo-500 transition-all">
43
- <i data-lucide="monitor" class="w-5 h-5"></i> Web Preview
44
  </button>
45
  </div>
46
  </aside>
47
 
48
- <!-- Main Views -->
 
 
49
  <main class="flex-1 p-3 overflow-y-auto">
50
-
51
  <!-- Terminal -->
52
- <div id="page-terminal" class="page-content h-full flex flex-col gap-3">
53
- <div id="output" class="flex-1 glass rounded-2xl p-4 overflow-y-auto mono text-[11px] leading-relaxed border border-indigo-500/10"></div>
54
- <div class="flex gap-2 pb-2">
55
- <input type="text" id="cmd" class="flex-1 bg-slate-900 border border-slate-700 rounded-xl px-4 py-3 text-sm focus:border-indigo-500" placeholder="Type command...">
56
- <button onclick="runCmd()" class="bg-indigo-600 px-5 rounded-xl shadow-lg shadow-indigo-500/20"><i data-lucide="send" class="w-5 h-5"></i></button>
57
  </div>
58
  </div>
59
 
60
  <!-- File Manager -->
61
- <div id="page-files" class="page-content hidden">
62
- <div class="flex items-center gap-2 mb-4">
63
- <button id="backBtn" onclick="goBack()" class="p-2 glass rounded-lg hidden"><i data-lucide="chevron-left"></i></button>
64
- <div class="flex-1 glass px-3 py-2 rounded-lg text-[10px] truncate opacity-60 mono" id="currentPath">/home/user/app</div>
65
- <button onclick="document.getElementById('fileUp').click()" class="p-2 bg-indigo-600 rounded-lg"><i data-lucide="upload" class="w-4 h-4"></i></button>
66
- <input type="file" id="fileUp" class="hidden" onchange="handleUpload()">
67
  </div>
68
- <div id="file-list" class="space-y-2"></div>
69
  </div>
70
 
71
  <!-- Proxy -->
72
- <div id="page-proxy" class="page-content hidden h-full flex flex-col gap-3">
73
  <div class="flex gap-2">
74
- <input type="text" id="pUrl" value="http://localhost:8080" class="flex-1 bg-slate-800 border-none rounded-lg p-2 text-xs">
75
  <button onclick="loadProxy()" class="bg-indigo-600 px-4 rounded-lg text-xs">LOAD</button>
76
  </div>
77
- <iframe id="pFrame" class="flex-1 bg-white rounded-2xl border-none"></iframe>
78
  </div>
79
-
80
  </main>
81
  </div>
82
 
83
- <!-- Editor Modal -->
84
- <div id="editorModal" class="fixed inset-0 bg-black z-[110] hidden flex flex-col p-4">
85
- <div class="flex justify-between items-center mb-4">
86
- <span id="editingFileName" class="text-xs mono">file.txt</span>
87
- <div class="flex gap-2">
88
- <button onclick="closeEditor()" class="px-4 py-2 text-xs">Cancel</button>
89
- <button onclick="saveFileContent()" class="bg-indigo-600 px-4 py-2 rounded text-xs">Save</button>
90
  </div>
91
  </div>
92
- <textarea id="editorArea" class="flex-1 bg-slate-900 p-4 rounded-xl mono text-sm outline-none border border-white/5"></textarea>
93
  </div>
94
 
95
- <!-- Login Modal -->
96
- <div id="loginBox" class="fixed inset-0 bg-slate-950 z-[200] flex items-center justify-center p-6 hidden">
97
- <div class="w-full max-w-xs space-y-6 text-center">
98
- <div class="bg-indigo-500/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto border border-indigo-500/20">
99
- <i data-lucide="shield-check" class="w-10 h-10 text-indigo-500"></i>
100
- </div>
101
- <h1 class="text-xl font-bold">Secure Access</h1>
102
- <input type="password" id="pass" class="w-full bg-slate-900 border border-slate-800 p-4 rounded-2xl text-center outline-none focus:border-indigo-500" placeholder="Enter Password">
103
- <button onclick="login()" class="w-full bg-indigo-600 py-4 rounded-2xl font-bold shadow-xl shadow-indigo-600/20">Authorize</button>
104
  </div>
105
  </div>
106
 
107
  <script>
108
  lucide.createIcons();
109
- let ws, currentPath = ".", history = [];
110
 
111
- // --- Auth & Auto-connect ---
112
  window.onload = () => {
113
- const savedPass = localStorage.getItem('ultra_pass');
114
- if (savedPass) connectWS(savedPass);
115
- else document.getElementById('loginBox').classList.remove('hidden');
116
  };
117
 
118
- function login() {
119
- const p = document.getElementById('pass').value;
120
- connectWS(p);
121
- }
122
-
123
- function logout() {
124
- localStorage.removeItem('ultra_pass');
125
- location.reload();
126
- }
127
 
128
- function connectWS(p) {
129
- const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
130
- ws = new WebSocket(`${protocol}//${location.host}/ws`);
131
  ws.onopen = () => ws.send(p);
132
  ws.onmessage = (e) => {
133
- if (e.data === "AUTH_SUCCESS") {
134
- localStorage.setItem('ultra_pass', p);
135
- document.getElementById('loginBox').classList.add('hidden');
136
- lucide.createIcons();
137
- } else if (e.data === "AUTH_FAILED") {
138
- alert("Invalid Password");
139
  logout();
140
- } else appendToTerminal(e.data);
141
  };
142
- ws.onclose = () => setTimeout(() => connectWS(p), 2000);
143
  }
144
 
145
- // --- Sidebar ---
146
  function toggleSidebar() {
147
- const s = document.getElementById('sidebar');
148
- const o = document.getElementById('overlay');
149
- s.classList.toggle('-translate-x-full');
150
- o.classList.toggle('hidden');
151
  }
152
 
153
- function showPage(p) {
154
- document.querySelectorAll('.page-content').forEach(el => el.classList.add('hidden'));
155
- document.getElementById('page-' + p).classList.remove('hidden');
156
- if(p === 'files') loadFiles('.');
157
- toggleSidebar();
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
158
  }
159
 
160
- // --- File Manager ---
161
- async function loadFiles(path) {
162
- currentPath = path;
163
- document.getElementById('currentPath').innerText = path;
164
- document.getElementById('backBtn').style.display = path === '.' ? 'none' : 'block';
165
-
166
  const res = await fetch(`/api/files?path=${path}`);
167
  const files = await res.json();
168
- const list = document.getElementById('file-list');
169
- list.innerHTML = files.map(f => `
170
- <div class="flex items-center justify-between p-4 glass rounded-xl active:scale-95 transition-transform" onclick="${f.is_dir ? `loadFiles('${f.path}')` : `editFile('${f.path}')`}">
171
  <div class="flex items-center gap-3">
172
- <i data-lucide="${f.is_dir ? 'folder' : 'file-text'}" class="w-5 h-5 ${f.is_dir ? 'text-indigo-400' : 'text-slate-500'}"></i>
173
- <span class="text-sm font-medium">${f.name}</span>
174
  </div>
175
- <button onclick="event.stopPropagation(); deleteF('${f.path}')" class="p-2 text-rose-500"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
176
  </div>
177
  `).join('');
178
  lucide.createIcons();
179
  }
180
 
181
- function goBack() {
182
- const parts = currentPath.split('/');
183
- parts.pop();
184
- loadFiles(parts.length ? parts.join('/') : '.');
 
 
 
 
 
 
185
  }
186
 
187
- async function editFile(path) {
188
- const res = await fetch(`/api/read?path=${path}`);
189
  const data = await res.json();
190
- document.getElementById('editingFileName').innerText = path;
191
- document.getElementById('editorArea').value = data.content;
192
- document.getElementById('editorModal').classList.remove('hidden');
193
  }
194
 
195
- async function saveFileContent() {
196
- const path = document.getElementById('editingFileName').innerText;
197
- const content = document.getElementById('editorArea').value;
198
  await fetch('/api/save', {
199
  method: 'POST',
200
  headers: {'Content-Type': 'application/json'},
201
  body: JSON.stringify({path, content})
202
  });
203
- closeEditor();
204
- }
205
-
206
- function closeEditor() { document.getElementById('editorModal').classList.add('hidden'); }
207
-
208
- async function handleUpload() {
209
- const file = document.getElementById('fileUp').files[0];
210
- const fd = new FormData();
211
- fd.append('file', file);
212
- await fetch(`/api/upload?path=${currentPath}`, {method: 'POST', body: fd});
213
- loadFiles(currentPath);
214
- }
215
-
216
- async function deleteF(path) {
217
- if(confirm('Delete?')) {
218
- await fetch(`/api/delete?path=${path}`, {method: 'DELETE'});
219
- loadFiles(currentPath);
220
- }
221
  }
222
 
223
- // --- Terminal ---
224
- function runCmd() {
225
- const i = document.getElementById('cmd');
226
- if(i.value) {
227
- ws.send(i.value);
228
- i.value = '';
229
- }
230
  }
231
-
232
- function appendToTerminal(t) {
233
- const o = document.getElementById('output');
234
- const d = document.createElement('div');
235
- d.className = "mb-2 text-slate-300 break-all";
236
- d.innerText = t;
237
- o.appendChild(d);
238
- o.scrollTop = o.scrollHeight;
239
- }
240
-
241
- function loadProxy() {
242
- document.getElementById('pFrame').src = `/proxy?url=${encodeURIComponent(document.getElementById('pUrl').value)}`;
243
  }
 
244
  </script>
245
  </body>
246
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
6
+ <title>Elite WebTermX</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <script src="https://unpkg.com/lucide@latest"></script>
9
  <style>
10
+ body { background: #020617; color: #f8fafc; font-family: 'Inter', sans-serif; overflow: hidden; }
11
+ .glass { background: rgba(15, 23, 42, 0.9); backdrop-filter: blur(15px); border: 1px solid rgba(255,255,255,0.05); }
12
+ #sidebar { transition: transform 0.3s ease; width: 80%; max-width: 280px; z-index: 1000; }
13
+ .active-nav { background: #4f46e5; color: white; }
14
+ .terminal-text { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
 
15
  </style>
16
  </head>
17
+ <body class="h-screen flex flex-col">
 
 
 
18
 
19
  <!-- Header -->
20
+ <header class="h-14 flex items-center justify-between px-4 glass border-b border-white/5 sticky top-0 z-[100]">
21
+ <button onclick="toggleSidebar()" class="p-2"><i data-lucide="menu"></i></button>
22
+ <span class="font-bold tracking-widest text-indigo-500">ULTRA V5</span>
23
+ <button onclick="logout()"><i data-lucide="log-out" class="w-5 h-5 text-slate-400"></i></button>
 
 
24
  </header>
25
 
26
  <div class="flex flex-1 relative overflow-hidden">
27
  <!-- Sidebar -->
28
+ <aside id="sidebar" class="fixed inset-y-0 left-0 glass -translate-x-full pt-16">
29
+ <div class="p-4 space-y-2">
30
+ <button onclick="openTab('terminal')" id="btn-terminal" class="w-full flex items-center gap-4 p-4 rounded-xl active-nav">
31
+ <i data-lucide="terminal"></i> Terminal
32
  </button>
33
+ <button onclick="openTab('files')" id="btn-files" class="w-full flex items-center gap-4 p-4 rounded-xl">
34
+ <i data-lucide="folder"></i> File Manager
35
  </button>
36
+ <button onclick="openTab('proxy')" id="btn-proxy" class="w-full flex items-center gap-4 p-4 rounded-xl">
37
+ <i data-lucide="monitor"></i> Web Preview
38
  </button>
39
  </div>
40
  </aside>
41
 
42
+ <!-- Overlay -->
43
+ <div id="overlay" onclick="toggleSidebar()" class="fixed inset-0 bg-black/60 hidden z-[900]"></div>
44
+
45
  <main class="flex-1 p-3 overflow-y-auto">
 
46
  <!-- Terminal -->
47
+ <div id="tab-terminal" class="tab-content h-full flex flex-col gap-2">
48
+ <div id="output" class="flex-1 glass rounded-2xl p-4 overflow-y-auto terminal-text leading-relaxed"></div>
49
+ <div class="flex gap-2">
50
+ <input type="text" id="cmdInput" class="flex-1 bg-slate-900 border border-slate-800 rounded-xl px-4 py-3 text-sm focus:border-indigo-500" placeholder="Enter command...">
51
+ <button onclick="sendCmd()" class="bg-indigo-600 px-5 rounded-xl"><i data-lucide="play" class="w-4 h-4"></i></button>
52
  </div>
53
  </div>
54
 
55
  <!-- File Manager -->
56
+ <div id="tab-files" class="tab-content hidden space-y-3">
57
+ <div class="flex items-center gap-2">
58
+ <button onclick="goBack()" class="p-2 glass rounded-lg"><i data-lucide="chevron-left"></i></button>
59
+ <button onclick="createItem()" class="p-2 bg-emerald-600 rounded-lg"><i data-lucide="plus"></i></button>
60
+ <div class="flex-1 text-[10px] mono truncate opacity-50 px-2" id="pathBar">.</div>
 
61
  </div>
62
+ <div id="fileList" class="space-y-2"></div>
63
  </div>
64
 
65
  <!-- Proxy -->
66
+ <div id="tab-proxy" class="tab-content hidden h-full flex flex-col gap-2">
67
  <div class="flex gap-2">
68
+ <input type="text" id="proxyUrl" value="http://localhost:8080" class="flex-1 bg-slate-900 p-2 rounded-lg text-xs">
69
  <button onclick="loadProxy()" class="bg-indigo-600 px-4 rounded-lg text-xs">LOAD</button>
70
  </div>
71
+ <iframe id="proxyFrame" class="flex-1 bg-white rounded-xl border-none"></iframe>
72
  </div>
 
73
  </main>
74
  </div>
75
 
76
+ <!-- Editor -->
77
+ <div id="editor" class="fixed inset-0 bg-slate-950 z-[1100] hidden flex flex-col p-4">
78
+ <div class="flex justify-between mb-4">
79
+ <span id="edName" class="text-xs opacity-50"></span>
80
+ <div class="flex gap-3">
81
+ <button onclick="closeEditor()" class="text-xs">Cancel</button>
82
+ <button onclick="saveContent()" class="bg-indigo-600 px-4 py-1 rounded text-xs">Save</button>
83
  </div>
84
  </div>
85
+ <textarea id="edArea" class="flex-1 bg-slate-900 p-4 rounded-xl terminal-text outline-none border border-white/5"></textarea>
86
  </div>
87
 
88
+ <!-- Login -->
89
+ <div id="login" class="fixed inset-0 z-[2000] bg-slate-950 flex items-center justify-center p-6 hidden">
90
+ <div class="w-full max-w-xs text-center space-y-6">
91
+ <h1 class="text-2xl font-bold">Access Denied</h1>
92
+ <input type="password" id="pKey" class="w-full bg-slate-900 border border-slate-800 p-4 rounded-2xl text-center" placeholder="Password">
93
+ <button onclick="doLogin()" class="w-full bg-indigo-600 py-4 rounded-2xl font-bold">Login</button>
 
 
 
94
  </div>
95
  </div>
96
 
97
  <script>
98
  lucide.createIcons();
99
+ let ws, curPath = ".";
100
 
 
101
  window.onload = () => {
102
+ const k = localStorage.getItem('ultra_v5_key');
103
+ if(k) connect(k);
104
+ else document.getElementById('login').classList.remove('hidden');
105
  };
106
 
107
+ function doLogin() { connect(document.getElementById('pKey').value); }
108
+ function logout() { localStorage.clear(); location.reload(); }
 
 
 
 
 
 
 
109
 
110
+ function connect(p) {
111
+ const prot = location.protocol === 'https:' ? 'wss:' : 'ws:';
112
+ ws = new WebSocket(`${prot}//${location.host}/ws`);
113
  ws.onopen = () => ws.send(p);
114
  ws.onmessage = (e) => {
115
+ if(e.data === "AUTH_SUCCESS") {
116
+ localStorage.setItem('ultra_v5_key', p);
117
+ document.getElementById('login').classList.add('hidden');
118
+ } else if(e.data === "AUTH_FAILED") {
119
+ alert("Wrong!");
 
120
  logout();
121
+ } else append(e.data);
122
  };
 
123
  }
124
 
 
125
  function toggleSidebar() {
126
+ document.getElementById('sidebar').classList.toggle('-translate-x-full');
127
+ document.getElementById('overlay').classList.toggle('hidden');
 
 
128
  }
129
 
130
+ function openTab(t) {
131
+ document.querySelectorAll('.tab-content').forEach(c => c.classList.add('hidden'));
132
+ document.querySelectorAll('nav button').forEach(b => b.classList.remove('active-nav'));
133
+ document.getElementById('tab-'+t).classList.remove('hidden');
134
+ document.getElementById('btn-'+t).classList.add('active-nav');
135
+ if(t === 'files') fetchFiles(curPath);
136
+ if(window.innerWidth < 1024) toggleSidebar();
137
+ }
138
+
139
+ function sendCmd() {
140
+ const input = document.getElementById('cmdInput');
141
+ if(input.value) { ws.send(input.value); input.value = ''; }
142
+ }
143
+
144
+ function append(t) {
145
+ const o = document.getElementById('output');
146
+ const d = document.createElement('div');
147
+ d.className = "mb-1 text-slate-400 border-l-2 border-indigo-500 pl-2";
148
+ d.innerText = t;
149
+ o.appendChild(d);
150
+ o.scrollTop = o.scrollHeight;
151
  }
152
 
153
+ async function fetchFiles(path) {
154
+ curPath = path;
155
+ document.getElementById('pathBar').innerText = path;
 
 
 
156
  const res = await fetch(`/api/files?path=${path}`);
157
  const files = await res.json();
158
+ document.getElementById('fileList').innerHTML = files.map(f => `
159
+ <div class="flex items-center justify-between p-4 glass rounded-xl active:scale-95 transition-all" onclick="${f.is_dir ? `fetchFiles('${f.path}')` : `editFile('${f.path}')`}">
 
160
  <div class="flex items-center gap-3">
161
+ <i data-lucide="${f.is_dir ? 'folder' : 'file-text'}" class="${f.is_dir ? 'text-indigo-400' : 'text-slate-500'}"></i>
162
+ <span class="text-sm">${f.name}</span>
163
  </div>
164
+ <button onclick="event.stopPropagation(); del('${f.path}')" class="text-rose-500"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
165
  </div>
166
  `).join('');
167
  lucide.createIcons();
168
  }
169
 
170
+ async function createItem() {
171
+ const name = prompt("Name:");
172
+ if(!name) return;
173
+ const isDir = confirm("Is it a folder?");
174
+ await fetch('/api/create', {
175
+ method: 'POST',
176
+ headers: {'Content-Type': 'application/json'},
177
+ body: JSON.stringify({name, is_dir: isDir, path: curPath})
178
+ });
179
+ fetchFiles(curPath);
180
  }
181
 
182
+ async function editFile(p) {
183
+ const res = await fetch(`/api/read?path=${p}`);
184
  const data = await res.json();
185
+ document.getElementById('edName').innerText = p;
186
+ document.getElementById('edArea').value = data.content;
187
+ document.getElementById('editor').classList.remove('hidden');
188
  }
189
 
190
+ async function saveContent() {
191
+ const path = document.getElementById('edName').innerText;
192
+ const content = document.getElementById('edArea').value;
193
  await fetch('/api/save', {
194
  method: 'POST',
195
  headers: {'Content-Type': 'application/json'},
196
  body: JSON.stringify({path, content})
197
  });
198
+ document.getElementById('editor').classList.add('hidden');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
199
  }
200
 
201
+ function closeEditor() { document.getElementById('editor').classList.add('hidden'); }
202
+ function goBack() {
203
+ const parts = curPath.split('/');
204
+ parts.pop();
205
+ fetchFiles(parts.length ? parts.join('/') : '.');
 
 
206
  }
207
+ function loadProxy() {
208
+ document.getElementById('proxyFrame').src = `/proxy?url=${encodeURIComponent(document.getElementById('proxyUrl').value)}`;
 
 
 
 
 
 
 
 
 
 
209
  }
210
+ async function del(p) { if(confirm('Delete?')) { await fetch(`/api/delete?path=${p}`, {method: 'DELETE'}); fetchFiles(curPath); } }
211
  </script>
212
  </body>
213
  </html>