WebTermX

Sleeping

App Files Files Community

userbymahadi commited on May 13

Commit

8a05da4

verified ·

1 Parent(s): 8d2b6d7

Create index.html

Browse files

Files changed (1) hide show

index.html +163 -0

index.html ADDED Viewed

	@@ -0,0 +1,163 @@

+<!DOCTYPE html>
+<html lang="bn">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DevOps Pro Terminal</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=Fira+Code:wght@400;500&display=swap');
+        body { font-family: 'Fira Code', monospace; }
+        .theme-dracula { --bg: #282a36; --fg: #f8f8f2; --accent: #bd93f9; }
+        .theme-monokai { --bg: #272822; --fg: #f8f8f2; --accent: #a6e22e; }
+        .theme-ocean { --bg: #0f172a; --fg: #e2e8f0; --accent: #38bdf8; }
+        .main-container { background-color: var(--bg); color: var(--fg); }
+    </style>
+</head>
+<body class="theme-ocean main-container min-h-screen transition-colors duration-300">
+    <!-- Login Overlay -->
+    <div id="loginOverlay" class="fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4">
+        <div class="bg-slate-800 p-8 rounded-2xl border border-slate-700 w-full max-w-md shadow-2xl">
+            <h2 class="text-2xl font-bold mb-6 flex items-center gap-2">
+                <i data-lucide="lock"></i> Authentication
+            </h2>
+            <input type="password" id="passInput" placeholder="Enter Secret Password"
+                class="w-full bg-slate-900 border border-slate-600 p-3 rounded-lg mb-4 outline-none focus:border-blue-500">
+            <button onclick="authenticate()" class="w-full bg-blue-600 hover:bg-blue-500 py-3 rounded-lg font-bold">Access Terminal</button>
+        </div>
+    </div>
+    <!-- Dashboard Layout -->
+    <div class="flex h-screen">
+        <!-- Sidebar: File Explorer -->
+        <div class="w-64 bg-black/20 border-r border-slate-800 flex flex-col">
+            <div class="p-4 border-b border-slate-800 font-bold flex items-center gap-2">
+                <i data-lucide="folder-tree"></i> Explorer
+            </div>
+            <div id="fileList" class="flex-1 overflow-y-auto p-2 text-sm opacity-80">
+                Loading files...
+            </div>
+        </div>
+        <!-- Main Area -->
+        <div class="flex-1 flex flex-col">
+            <!-- Header/Top Bar -->
+            <div class="h-16 bg-black/10 border-b border-slate-800 flex items-center justify-between px-6">
+                <div class="flex gap-4 items-center">
+                    <span class="flex items-center gap-1"><i data-lucide="cpu" class="w-4 h-4"></i> <span id="cpuVal">0%</span></span>
+                    <span class="flex items-center gap-1"><i data-lucide="database" class="w-4 h-4"></i> <span id="ramVal">0%</span></span>
+                </div>
+                <div class="flex gap-3">
+                    <select onchange="changeTheme(this.value)" class="bg-slate-800 text-xs p-1 rounded border border-slate-600">
+                        <option value="theme-ocean">Ocean Dark</option>
+                        <option value="theme-dracula">Dracula</option>
+                        <option value="theme-monokai">Monokai</option>
+                    </select>
+                    <button onclick="downloadLogs()" class="p-2 hover:bg-slate-700 rounded"><i data-lucide="download" class="w-4 h-4"></i></button>
+                </div>
+            </div>
+            <!-- Terminal Area -->
+            <div id="terminal" class="flex-1 overflow-y-auto p-6 space-y-2 text-sm">
+                <div class="text-blue-400">Welcome to DevOps Pro. System Secure.</div>
+            </div>
+            <!-- Input Bar -->
+            <div class="p-4 bg-black/30">
+                <div class="flex gap-2 bg-slate-900 p-2 rounded-lg border border-slate-700">
+                    <span class="text-accent font-bold px-2">❯</span>
+                    <input type="text" id="cmdInput" class="flex-1 bg-transparent border-none outline-none" placeholder="Enter command...">
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        lucide.createIcons();
+        let socket;
+        let commandHistory = JSON.parse(localStorage.getItem('history') || '[]');
+        let historyIndex = -1;
+        function authenticate() {
+            const pass = document.getElementById('passInput').value;
+            const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+            socket = new WebSocket(`${protocol}//${window.location.host}/ws`);
+            socket.onopen = () => socket.send(pass);
+            socket.onmessage = (event) => {
+                if (event.data === "AUTH_SUCCESS") {
+                    document.getElementById('loginOverlay').style.display = 'none';
+                    initApp();
+                } else if (event.data === "AUTH_FAILED") {
+                    alert("Wrong Password!");
+                } else {
+                    appendOutput(event.data);
+                }
+            };
+        }
+        function initApp() {
+            updateMetrics();
+            loadFiles();
+            setInterval(updateMetrics, 5000);
+        }
+        async function updateMetrics() {
+            const res = await fetch('/api/metrics');
+            const data = await res.json();
+            document.getElementById('cpuVal').innerText = data.cpu + '%';
+            document.getElementById('ramVal').innerText = data.ram + '%';
+        }
+        async function loadFiles() {
+            const res = await fetch('/api/files');
+            const files = await res.json();
+            const container = document.getElementById('fileList');
+            container.innerHTML = files.map(f => `
+                <div class="flex items-center gap-2 p-1 hover:bg-white/10 rounded cursor-pointer">
+                    <i data-lucide="${f.is_dir ? 'folder' : 'file-text'}" class="w-4 h-4"></i>
+                    <span>${f.name}</span>
+                </div>
+            `).join('');
+            lucide.createIcons();
+        }
+        function appendOutput(text) {
+            const div = document.createElement('pre');
+            div.className = "bg-black/20 p-3 rounded text-slate-300 border-l-2 border-indigo-500 whitespace-pre-wrap mt-2";
+            div.innerText = text;
+            const term = document.getElementById('terminal');
+            term.appendChild(div);
+            term.scrollTop = term.scrollHeight;
+        }
+        document.getElementById('cmdInput').addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                const cmd = e.target.value;
+                if (!cmd) return;
+                appendOutput("➜ " + cmd);
+                socket.send(cmd);
+                commandHistory.push(cmd);
+                localStorage.setItem('history', JSON.stringify(commandHistory));
+                e.target.value = "";
+            }
+        });
+        function changeTheme(theme) {
+            document.body.className = `${theme} main-container min-h-screen transition-colors duration-300`;
+        }
+        function downloadLogs() {
+            const content = document.getElementById('terminal').innerText;
+            const blob = new Blob([content], {type: 'text/plain'});
+            const a = document.createElement('a');
+            a.href = URL.createObjectURL(blob);
+            a.download = 'terminal_logs.txt';
+            a.click();
+        }
+    </script>
+</body>
+</html>