WebTermX

Sleeping

App Files Files Community

userbymahadi commited on 27 days ago

Commit

d0bd98c

verified ·

1 Parent(s): ce8ebe2

Update index.html

Browse files

Files changed (1) hide show

index.html +123 -109

index.html CHANGED Viewed

@@ -2,161 +2,175 @@
 <html lang="bn">
 <head>
     <meta charset="UTF-8">
-    <title>DevOps Ultra Dashboard</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/lucide@latest"></script>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
-        :root { --accent: #6366f1; --bg: #0b0f1a; }
-        body { font-family: 'JetBrains Mono', monospace; background: var(--bg); color: #94a3b8; }
-        .glass { background: rgba(23, 32, 53, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.05); }
-        .active-tab { border-bottom: 2px solid var(--accent); color: white; }
-        .file-item:hover { background: rgba(99, 102, 241, 0.1); }
     </style>
 </head>
-<body class="h-screen flex flex-col overflow-hidden">
-    <!-- Auth Modal -->
-    <div id="authBox" class="fixed inset-0 z-[100] flex items-center justify-center bg-black/80">
-        <div class="glass p-8 rounded-2xl w-96 text-center">
-            <div class="mb-4 inline-block p-4 bg-indigo-500/20 rounded-full text-indigo-400">
-                <i data-lucide="shield-check" class="w-10 h-10"></i>
-            </div>
-            <h1 class="text-xl font-bold text-white mb-6">Enter Access Key</h1>
-            <input type="password" id="key" class="w-full bg-slate-900 border border-slate-700 p-3 rounded-lg mb-4 outline-none focus:border-indigo-500 text-center" placeholder="••••••">
-            <button onclick="initWS()" class="w-full bg-indigo-600 hover:bg-indigo-500 text-white py-3 rounded-lg font-bold transition-all">Unlock System</button>
-        </div>
-    </div>
-    <!-- Top Navigation -->
-    <nav class="h-14 border-b border-white/5 flex items-center justify-between px-6 glass">
-        <div class="flex items-center gap-4">
-            <div class="flex items-center gap-2 text-white font-bold">
-                <div class="w-3 h-3 bg-indigo-500 rounded-full animate-pulse"></div>
-                ULTRA-SHELL <span class="text-[10px] bg-indigo-500/20 px-2 py-0.5 rounded text-indigo-400">V3.5</span>
             </div>
-        </div>
-        <div class="flex gap-6 text-xs font-bold uppercase tracking-widest">
-            <div class="flex items-center gap-2"><i data-lucide="cpu" class="w-4 h-4 text-rose-500"></i> CPU: <span id="cpu" class="text-white">--</span></div>
-            <div class="flex items-center gap-2"><i data-lucide="layers" class="w-4 h-4 text-emerald-500"></i> RAM: <span id="ram" class="text-white">--</span></div>
-            <div class="flex items-center gap-2"><i data-lucide="hard-drive" class="w-4 h-4 text-amber-500"></i> DISK: <span id="disk" class="text-white">--</span></div>
-        </div>
-    </nav>
-    <div class="flex flex-1 overflow-hidden">
-        <!-- Sidebar Explorer -->
-        <aside class="w-72 border-r border-white/5 flex flex-col glass">
-            <div class="p-4 flex items-center justify-between border-b border-white/5 text-xs font-bold uppercase">
-                <span>File Explorer</span>
-                <button onclick="loadFiles()" class="hover:rotate-180 transition-all duration-500"><i data-lucide="refresh-cw" class="w-4 h-4"></i></button>
-            </div>
-            <div id="explorer" class="flex-1 overflow-y-auto p-2 space-y-1"></div>
         </aside>
-        <!-- Terminal Container -->
-        <main class="flex-1 flex flex-col relative bg-black/20">
-            <!-- Tabs -->
-            <div class="flex bg-black/40 text-[10px] font-bold uppercase border-b border-white/5">
-                <div class="px-6 py-3 active-tab cursor-pointer flex items-center gap-2">
-                    <i data-lucide="terminal" class="w-3 h-3"></i> Main Terminal
                 </div>
-                <div class="px-6 py-3 opacity-30 cursor-not-allowed hover:bg-white/5 transition-all">
-                    <i data-lucide="plus" class="w-3 h-3"></i>
                 </div>
             </div>
-            <!-- Terminal Screen -->
-            <div id="output" class="flex-1 overflow-y-auto p-6 space-y-3 text-sm scroll-smooth">
-                <div class="text-emerald-400 opacity-50">System ready. Type 'help' for instructions.</div>
             </div>
-            <!-- Input Box -->
-            <div class="p-4">
-                <div class="glass flex items-center px-4 py-2 rounded-xl focus-within:ring-2 ring-indigo-500/50 transition-all">
-                    <span class="text-indigo-400 font-bold mr-3">❯</span>
-                    <input type="text" id="cmd" class="flex-1 bg-transparent border-none outline-none text-indigo-100 placeholder:text-slate-600" placeholder="Execute shell command..." autocomplete="off">
-                    <div class="flex gap-3 ml-3 text-slate-500">
-                        <i data-lucide="command" class="w-4 h-4"></i>
-                        <i data-lucide="history" class="w-4 h-4 cursor-pointer hover:text-white" onclick="showHistory()"></i>
-                    </div>
                 </div>
             </div>
         </main>
     </div>
     <script>
         lucide.createIcons();
         let ws;
-        const output = document.getElementById('output');
-        const cmdInput = document.getElementById('cmd');
-        function initWS() {
             const key = document.getElementById('key').value;
             const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
             ws = new WebSocket(`${protocol}//${window.location.host}/ws`);
             ws.onopen = () => ws.send(key);
             ws.onmessage = (e) => {
-                if (e.data === "[+] AUTH_SUCCESS") {
-                    document.getElementById('authBox').classList.add('hidden');
-                    startMonitoring();
-                    loadFiles();
-                } else if (e.data === "[-] AUTH_FAILED") {
-                    alert("Invalid Key!");
-                } else {
-                    writeToTerminal(e.data, 'msg');
-                }
             };
-            ws.onclose = () => { setTimeout(initWS, 3000); };
         }
-        function writeToTerminal(text, type) {
-            const el = document.createElement('div');
-            if (type === 'cmd') {
-                el.className = "text-white font-bold mt-4 flex items-center gap-2";
-                el.innerHTML = `<span class="text-indigo-500">➜</span> ${text}`;
-            } else {
-                el.className = "bg-slate-800/30 p-4 rounded-lg border-l-4 border-indigo-500/50 whitespace-pre-wrap text-slate-300";
-                el.innerText = text;
-            }
-            output.appendChild(el);
-            output.scrollTop = output.scrollHeight;
         }
-        cmdInput.addEventListener('keydown', (e) => {
-            if (e.key === 'Enter' && cmdInput.value.trim()) {
-                const command = cmdInput.value;
-                writeToTerminal(command, 'cmd');
-                ws.send(command);
-                cmdInput.value = '';
             }
-        });
-        async function startMonitoring() {
-            setInterval(async () => {
-                const res = await fetch('/api/metrics');
-                const data = await res.json();
-                document.getElementById('cpu').innerText = data.cpu + '%';
-                document.getElementById('ram').innerText = data.ram + '%';
-                document.getElementById('disk').innerText = data.disk + '%';
-            }, 3000);
         }
         async function loadFiles() {
             const res = await fetch('/api/files');
             const files = await res.json();
-            const explorer = document.getElementById('explorer');
-            explorer.innerHTML = files.map(f => `
-                <div class="file-item flex items-center justify-between p-2 rounded cursor-pointer group">
-                    <div class="flex items-center gap-2 truncate">
-                        <i data-lucide="${f.is_dir ? 'folder' : 'file'}" class="w-4 h-4 ${f.is_dir ? 'text-amber-400' : 'text-slate-400'}"></i>
-                        <span class="text-xs ${f.is_dir ? 'text-slate-200' : 'text-slate-400'}">${f.name}</span>
                     </div>
-                    <span class="text-[10px] hidden group-hover:block opacity-50">${f.size}</span>
                 </div>
             `).join('');
             lucide.createIcons();
         }
     </script>
 </body>
 </html>

 <html lang="bn">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DevOps Mobile Pro</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/lucide@latest"></script>
     <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Fira+Code&display=swap');
+        body { font-family: 'Inter', sans-serif; background: #0f172a; color: #f8fafc; }
+        .sidebar { transition: transform 0.3s ease-in-out; }
+        .glass { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(10px); }
+        .terminal-font { font-family: 'Fira Code', monospace; }
     </style>
 </head>
+<body class="overflow-hidden h-screen flex flex-col">
+    <!-- Mobile Header -->
+    <header class="h-16 glass border-b border-white/10 flex items-center justify-between px-4 z-40">
+        <button onclick="toggleSidebar()" class="p-2 hover:bg-white/10 rounded-lg">
+            <i data-lucide="menu"></i>
+        </button>
+        <h1 class="font-bold text-indigo-400">ULTRA DASHBOARD</h1>
+        <div class="w-8"></div> <!-- Spacer -->
+    </header>
+    <div class="flex flex-1 relative overflow-hidden">
+        <!-- Sidebar Menu -->
+        <aside id="sidebar" class="sidebar absolute inset-y-0 left-0 w-64 glass border-r border-white/10 z-50 -translate-x-full lg:translate-x-0">
+            <div class="p-6 space-y-4">
+                <button onclick="showPage('terminal')" class="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-indigo-600 transition-all">
+                    <i data-lucide="terminal"></i> Terminal
+                </button>
+                <button onclick="showPage('files')" class="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-indigo-600 transition-all">
+                    <i data-lucide="folder"></i> File Manager
+                </button>
+                <button onclick="showPage('proxy')" class="w-full flex items-center gap-3 p-3 rounded-xl hover:bg-indigo-600 transition-all">
+                    <i data-lucide="globe"></i> Web Preview
+                </button>
             </div>
         </aside>
+        <!-- Main Content Area -->
+        <main class="flex-1 overflow-y-auto p-4 relative">
+            <!-- 1. Terminal Page -->
+            <div id="page-terminal" class="page-content space-y-4">
+                <div id="output" class="h-[60vh] glass rounded-2xl p-4 overflow-y-auto terminal-font text-xs leading-relaxed">
+                    <div class="text-indigo-400">System Ready...</div>
                 </div>
+                <div class="flex gap-2">
+                    <input type="text" id="cmd" class="flex-1 bg-slate-900 border border-slate-700 rounded-xl p-3 outline-none focus:border-indigo-500" placeholder="Type command...">
+                    <button onclick="runCmd()" class="bg-indigo-600 p-3 rounded-xl"><i data-lucide="play"></i></button>
                 </div>
             </div>
+            <!-- 2. File Manager Page -->
+            <div id="page-files" class="page-content hidden">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-xl font-bold">Files</h2>
+                    <input type="file" id="uploadInput" onchange="uploadFile()" class="hidden">
+                    <button onclick="document.getElementById('uploadInput').click()" class="bg-emerald-600 px-4 py-2 rounded-lg text-sm">Upload</button>
+                </div>
+                <div id="file-list" class="glass rounded-2xl divide-y divide-white/5">
+                    <!-- Files will load here -->
+                </div>
             </div>
+            <!-- 3. Web Preview Page -->
+            <div id="page-proxy" class="page-content hidden h-full flex flex-col">
+                <div class="flex gap-2 mb-4">
+                    <input type="text" id="proxyUrl" value="http://localhost:8080" class="flex-1 bg-slate-900 border border-slate-700 rounded-lg p-2 text-sm">
+                    <button onclick="loadProxy()" class="bg-indigo-600 px-4 py-2 rounded-lg text-sm">Load</button>
                 </div>
+                <iframe id="proxyFrame" class="flex-1 w-full bg-white rounded-xl border-none"></iframe>
             </div>
         </main>
     </div>
+    <!-- Auth Modal (Overlay) -->
+    <div id="authBox" class="fixed inset-0 z-[100] flex items-center justify-center bg-black/90 p-6">
+        <div class="glass p-8 rounded-3xl w-full max-w-sm text-center">
+            <h2 class="text-xl font-bold mb-6">Enter Password</h2>
+            <input type="password" id="key" class="w-full bg-slate-900 border border-slate-700 p-4 rounded-xl mb-4 text-center outline-none focus:border-indigo-500">
+            <button onclick="initAuth()" class="w-full bg-indigo-600 py-4 rounded-xl font-bold">Login</button>
+        </div>
+    </div>
     <script>
         lucide.createIcons();
         let ws;
+        function toggleSidebar() {
+            const sidebar = document.getElementById('sidebar');
+            sidebar.classList.toggle('-translate-x-full');
+        }
+        function showPage(pageId) {
+            document.querySelectorAll('.page-content').forEach(p => p.classList.add('hidden'));
+            document.getElementById('page-' + pageId).classList.remove('hidden');
+            if (window.innerWidth < 1024) toggleSidebar();
+            if (pageId === 'files') loadFiles();
+        }
+        // --- Auth & Terminal ---
+        function initAuth() {
             const key = document.getElementById('key').value;
             const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
             ws = new WebSocket(`${protocol}//${window.location.host}/ws`);
             ws.onopen = () => ws.send(key);
             ws.onmessage = (e) => {
+                if(e.data === "AUTH_SUCCESS") document.getElementById('authBox').style.display = 'none';
+                else if(e.data === "AUTH_FAILED") alert("Wrong!");
+                else appendToTerminal(e.data);
             };
         }
+        function appendToTerminal(txt) {
+            const out = document.getElementById('output');
+            const div = document.createElement('div');
+            div.className = "bg-black/20 p-2 rounded mb-2 whitespace-pre-wrap border-l border-indigo-500";
+            div.innerText = txt;
+            out.appendChild(div);
+            out.scrollTop = out.scrollHeight;
         }
+        function runCmd() {
+            const input = document.getElementById('cmd');
+            if(input.value) {
+                ws.send(input.value);
+                input.value = '';
             }
         }
+        // --- File Manager ---
         async function loadFiles() {
             const res = await fetch('/api/files');
             const files = await res.json();
+            const list = document.getElementById('file-list');
+            list.innerHTML = files.map(f => `
+                <div class="flex items-center justify-between p-4 hover:bg-white/5">
+                    <div class="flex items-center gap-3">
+                        <i data-lucide="${f.is_dir ? 'folder' : 'file'}" class="w-5 h-5 text-indigo-400"></i>
+                        <span class="text-sm">${f.name}</span>
                     </div>
+                    <button onclick="deleteFile('${f.path}')" class="text-red-400 p-2"><i data-lucide="trash-2" class="w-4 h-4"></i></button>
                 </div>
             `).join('');
             lucide.createIcons();
         }
+        async function uploadFile() {
+            const file = document.getElementById('uploadInput').files[0];
+            const formData = new FormData();
+            formData.append('file', file);
+            await fetch('/api/upload', { method: 'POST', body: formData });
+            loadFiles();
+        }
+        async function deleteFile(path) {
+            if(confirm('Delete?')) {
+                await fetch(`/api/delete?path=${path}`, { method: 'DELETE' });
+                loadFiles();
+            }
+        }
+        // --- Proxy ---
+        function loadProxy() {
+            const url = document.getElementById('proxyUrl').value;
+            document.getElementById('proxyFrame').src = `/proxy?url=${encodeURIComponent(url)}`;
+        }
     </script>
 </body>
 </html>