WebTermX

Sleeping

App Files Files Community

userbymahadi commited on May 13

Commit

204d778

verified ·

1 Parent(s): a8d0130

Update index.html

Browse files

Files changed (1) hide show

index.html +173 -103

index.html CHANGED Viewed

@@ -2,174 +2,244 @@
 <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 lang="bn">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Elite Mobile DevOps</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&display=swap');
+        body { background: #020617; color: #f1f5f9; -webkit-tap-highlight-color: transparent; }
+        .glass { background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.05); }
+        .sidebar { transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 100; }
+        .mono { font-family: 'JetBrains Mono', monospace; }
+        input, button { outline: none !important; }
     </style>
 </head>
+<body class="h-screen flex flex-col overflow-hidden">
+    <!-- Sidebar Overlay -->
+    <div id="overlay" onclick="toggleSidebar()" class="fixed inset-0 bg-black/60 hidden z-[90]"></div>
+    <!-- Header -->
+    <header class="h-14 glass flex items-center justify-between px-4 sticky top-0 z-[80]">
+        <button onclick="toggleSidebar()" class="p-2 active:scale-90 transition-transform">
+            <i data-lucide="menu" class="w-6 h-6"></i>
         </button>
+        <span class="text-xs font-bold tracking-[0.2em] text-indigo-400">ULTRA V4</span>
+        <button onclick="logout()" class="p-2"><i data-lucide="log-out" class="w-5 h-5 text-slate-500"></i></button>
     </header>
     <div class="flex flex-1 relative overflow-hidden">
+        <!-- Sidebar -->
+        <aside id="sidebar" class="sidebar fixed inset-y-0 left-0 w-72 glass -translate-x-full shadow-2xl">
+            <div class="p-6 pt-20 space-y-2">
+                <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">
+                    <i data-lucide="terminal" class="w-5 h-5"></i> Terminal
                 </button>
+                <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">
+                    <i data-lucide="folder" class="w-5 h-5"></i> File Manager
                 </button>
+                <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">
+                    <i data-lucide="monitor" class="w-5 h-5"></i> Web Preview
                 </button>
             </div>
         </aside>
+        <!-- Main Views -->
+        <main class="flex-1 p-3 overflow-y-auto">
+            <!-- Terminal -->
+            <div id="page-terminal" class="page-content h-full flex flex-col gap-3">
+                <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>
+                <div class="flex gap-2 pb-2">
+                    <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...">
+                    <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>
                 </div>
             </div>
+            <!-- File Manager -->
             <div id="page-files" class="page-content hidden">
+                <div class="flex items-center gap-2 mb-4">
+                    <button id="backBtn" onclick="goBack()" class="p-2 glass rounded-lg hidden"><i data-lucide="chevron-left"></i></button>
+                    <div class="flex-1 glass px-3 py-2 rounded-lg text-[10px] truncate opacity-60 mono" id="currentPath">/home/user/app</div>
+                    <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>
+                    <input type="file" id="fileUp" class="hidden" onchange="handleUpload()">
                 </div>
+                <div id="file-list" class="space-y-2"></div>
             </div>
+            <!-- Proxy -->
+            <div id="page-proxy" class="page-content hidden h-full flex flex-col gap-3">
+                <div class="flex gap-2">
+                    <input type="text" id="pUrl" value="http://localhost:8080" class="flex-1 bg-slate-800 border-none rounded-lg p-2 text-xs">
+                    <button onclick="loadProxy()" class="bg-indigo-600 px-4 rounded-lg text-xs">LOAD</button>
                 </div>
+                <iframe id="pFrame" class="flex-1 bg-white rounded-2xl border-none"></iframe>
             </div>
         </main>
     </div>
+    <!-- Editor Modal -->
+    <div id="editorModal" class="fixed inset-0 bg-black z-[110] hidden flex flex-col p-4">
+        <div class="flex justify-between items-center mb-4">
+            <span id="editingFileName" class="text-xs mono">file.txt</span>
+            <div class="flex gap-2">
+                <button onclick="closeEditor()" class="px-4 py-2 text-xs">Cancel</button>
+                <button onclick="saveFileContent()" class="bg-indigo-600 px-4 py-2 rounded text-xs">Save</button>
+            </div>
+        </div>
+        <textarea id="editorArea" class="flex-1 bg-slate-900 p-4 rounded-xl mono text-sm outline-none border border-white/5"></textarea>
+    </div>
+    <!-- Login Modal -->
+    <div id="loginBox" class="fixed inset-0 bg-slate-950 z-[200] flex items-center justify-center p-6 hidden">
+        <div class="w-full max-w-xs space-y-6 text-center">
+            <div class="bg-indigo-500/10 w-20 h-20 rounded-full flex items-center justify-center mx-auto border border-indigo-500/20">
+                <i data-lucide="shield-check" class="w-10 h-10 text-indigo-500"></i>
+            </div>
+            <h1 class="text-xl font-bold">Secure Access</h1>
+            <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">
+            <button onclick="login()" class="w-full bg-indigo-600 py-4 rounded-2xl font-bold shadow-xl shadow-indigo-600/20">Authorize</button>
         </div>
     </div>
     <script>
         lucide.createIcons();
+        let ws, currentPath = ".", history = [];
+        // --- Auth & Auto-connect ---
+        window.onload = () => {
+            const savedPass = localStorage.getItem('ultra_pass');
+            if (savedPass) connectWS(savedPass);
+            else document.getElementById('loginBox').classList.remove('hidden');
+        };
+        function login() {
+            const p = document.getElementById('pass').value;
+            connectWS(p);
         }
+        function logout() {
+            localStorage.removeItem('ultra_pass');
+            location.reload();
         }
+        function connectWS(p) {
+            const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+            ws = new WebSocket(`${protocol}//${location.host}/ws`);
+            ws.onopen = () => ws.send(p);
             ws.onmessage = (e) => {
+                if (e.data === "AUTH_SUCCESS") {
+                    localStorage.setItem('ultra_pass', p);
+                    document.getElementById('loginBox').classList.add('hidden');
+                    lucide.createIcons();
+                } else if (e.data === "AUTH_FAILED") {
+                    alert("Invalid Password");
+                    logout();
+                } else appendToTerminal(e.data);
             };
+            ws.onclose = () => setTimeout(() => connectWS(p), 2000);
         }
+        // --- Sidebar ---
+        function toggleSidebar() {
+            const s = document.getElementById('sidebar');
+            const o = document.getElementById('overlay');
+            s.classList.toggle('-translate-x-full');
+            o.classList.toggle('hidden');
         }
+        function showPage(p) {
+            document.querySelectorAll('.page-content').forEach(el => el.classList.add('hidden'));
+            document.getElementById('page-' + p).classList.remove('hidden');
+            if(p === 'files') loadFiles('.');
+            toggleSidebar();
         }
         // --- File Manager ---
+        async function loadFiles(path) {
+            currentPath = path;
+            document.getElementById('currentPath').innerText = path;
+            document.getElementById('backBtn').style.display = path === '.' ? 'none' : 'block';
+            const res = await fetch(`/api/files?path=${path}`);
             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 glass rounded-xl active:scale-95 transition-transform" onclick="${f.is_dir ? `loadFiles('${f.path}')` : `editFile('${f.path}')`}">
                     <div class="flex items-center gap-3">
+                        <i data-lucide="${f.is_dir ? 'folder' : 'file-text'}" class="w-5 h-5 ${f.is_dir ? 'text-indigo-400' : 'text-slate-500'}"></i>
+                        <span class="text-sm font-medium">${f.name}</span>
                     </div>
+                    <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>
                 </div>
             `).join('');
             lucide.createIcons();
         }
+        function goBack() {
+            const parts = currentPath.split('/');
+            parts.pop();
+            loadFiles(parts.length ? parts.join('/') : '.');
+        }
+        async function editFile(path) {
+            const res = await fetch(`/api/read?path=${path}`);
+            const data = await res.json();
+            document.getElementById('editingFileName').innerText = path;
+            document.getElementById('editorArea').value = data.content;
+            document.getElementById('editorModal').classList.remove('hidden');
+        }
+        async function saveFileContent() {
+            const path = document.getElementById('editingFileName').innerText;
+            const content = document.getElementById('editorArea').value;
+            await fetch('/api/save', {
+                method: 'POST',
+                headers: {'Content-Type': 'application/json'},
+                body: JSON.stringify({path, content})
+            });
+            closeEditor();
+        }
+        function closeEditor() { document.getElementById('editorModal').classList.add('hidden'); }
+        async function handleUpload() {
+            const file = document.getElementById('fileUp').files[0];
+            const fd = new FormData();
+            fd.append('file', file);
+            await fetch(`/api/upload?path=${currentPath}`, {method: 'POST', body: fd});
+            loadFiles(currentPath);
         }
+        async function deleteF(path) {
             if(confirm('Delete?')) {
+                await fetch(`/api/delete?path=${path}`, {method: 'DELETE'});
+                loadFiles(currentPath);
             }
         }
+        // --- Terminal ---
+        function runCmd() {
+            const i = document.getElementById('cmd');
+            if(i.value) {
+                ws.send(i.value);
+                i.value = '';
+            }
+        }
+        function appendToTerminal(t) {
+            const o = document.getElementById('output');
+            const d = document.createElement('div');
+            d.className = "mb-2 text-slate-300 break-all";
+            d.innerText = t;
+            o.appendChild(d);
+            o.scrollTop = o.scrollHeight;
+        }
         function loadProxy() {
+            document.getElementById('pFrame').src = `/proxy?url=${encodeURIComponent(document.getElementById('pUrl').value)}`;
         }
     </script>
 </body>