Skip to content

Revamp index.html for Javas Pro Terminal OS #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aligrow126-rgb wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Revamp index.html for Javas Pro Terminal OS #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 126 additions & 42 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,48 +1,132 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Jarvis</title>
<script src="https://cdn.tailwindcss.com"></script>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JAVAS PRO - TERMINAL OS</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Rajdhani:wght@300;400;500;600&display=swap');
body {
font-family: 'Rajdhani', sans-serif;
background-color: #0f172a;
color: #e2e8f0;
overflow: hidden; /* Prevent scrolling in main app view */
}
.font-hud {
font-family: 'Orbitron', sans-serif;
}
/* Custom scrollbar for content areas */
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-track {
background: #1e293b;
}
::-webkit-scrollbar-thumb {
background: #0ea5e9;
border-radius: 3px;
}
:root { --main: #00ffcc; --bg: #000d0d; --danger: #ff3333; --glass: rgba(0, 255, 204, 0.1); }
body, html { margin: 0; padding: 0; background: var(--bg); color: var(--main); font-family: 'Courier New', monospace; height: 100vh; overflow: hidden; }

#matrix { position: fixed; inset: 0; z-index: -1; opacity: 0.25; }

/* Admin Sidebar */
#sidebar { position: fixed; right: -250px; top: 0; width: 250px; height: 100%; background: rgba(0,20,20,0.95); border-left: 2px solid var(--main); transition: 0.4s; z-index: 1000; padding: 20px; box-sizing: border-box; }
#sidebar.active { right: 0; }
.menu-item { margin-bottom: 20px; padding: 10px; border-bottom: 1px solid var(--glass); cursor: pointer; }
.menu-item:hover { background: var(--glass); }

/* Main Container */
#container { display: flex; flex-direction: column; height: 100vh; padding: 15px; box-sizing: border-box; }
.top-bar { display: flex; justify-content: space-between; padding: 5px 10px; border: 1px solid var(--main); background: rgba(0,0,0,0.5); font-size: 12px; margin-bottom: 10px; }

.terminal { flex: 1; border: 1px solid var(--main); background: rgba(0,0,0,0.85); overflow-y: auto; padding: 15px; border-radius: 5px; box-shadow: 0 0 15px rgba(0,255,204,0.2); }
.line { margin-bottom: 8px; line-height: 1.4; }
.cmd-prefix { color: #fff; font-weight: bold; }
.sys-msg { color: var(--main); }
.error-msg { color: var(--danger); }

.input-wrapper { display: flex; gap: 10px; margin-top: 15px; background: #000; border: 1px solid var(--main); padding: 10px; align-items: center; }
input { background: transparent; border: none; color: var(--main); flex: 1; outline: none; font-size: 16px; font-family: 'Courier New', monospace; }
.btn { background: var(--main); color: #000; border: none; padding: 8px 15px; cursor: pointer; font-weight: bold; }

/* Toggle Switch for NSFW/Security */
.switch { position: relative; display: inline-block; width: 40px; height: 20px; float: right; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; inset: 0; background-color: #333; transition: .4s; border-radius: 20px; }
input:checked + .slider { background-color: var(--main); }
</style>
<script type="importmap">
{
"imports": {
"react/": "https://esm.sh/react@^19.2.2/",
"react": "https://esm.sh/react@^19.2.2",
"lucide-react": "https://esm.sh/lucide-react@^0.560.0",
"react-dom/": "https://esm.sh/react-dom@^19.2.2/",
"@google/genai": "https://esm.sh/@google/genai@^1.33.0"
}
}
</script>
<link rel="stylesheet" href="/index.css">
</head>
<body>
<div id="root"></div>
<script type="module" src="/index.tsx"></script>
<body>
<canvas id="matrix"></canvas>

<div id="sidebar">
<h2 style="color:#fff; border-bottom: 2px solid var(--main);">ADMIN MENU</h2>
<div class="menu-item">🛡️ SECURITY:
<label class="switch"><input type="checkbox" checked id="sec-toggle"><span class="slider"></span></label>
</div>
<div class="menu-item">🔞 NSFW FILTER:
<label class="switch"><input type="checkbox" id="nsfw-toggle"><span class="slider"></span></label>
</div>
<div class="menu-item" onclick="clearTerminal()">🗑️ CLEAR LOGS</div>
<div class="menu-item" onclick="systemReboot()" style="color:var(--danger)">🔄 SYSTEM REBOOT</div>
<button class="btn" style="width:100%" onclick="toggleMenu()">CLOSE MENU</button>
</div>

<div id="container">
<div class="top-bar">
<span>DEVICE: ASAD_MOBILE_V1</span>
<span>OS: JAVAS-TERMUX-V15</span>
<span id="status-tag" style="color:var(--main)">● SECURE</span>
<button onclick="toggleMenu()" style="background:none; border:1px solid var(--main); color:var(--main); cursor:pointer;">MENU</button>
</div>

<div class="terminal" id="term-out">
<div class="line sys-msg">Welcome to Javas-Termux Terminal Interface...</div>
<div class="line sys-msg">Type 'help' to see available commands.</div>
</div>

<div class="input-wrapper">
<span class="cmd-prefix">root@javas:~#</span>
<input type="text" id="user-in" placeholder="Waiting for command..." onkeypress="handleInput(event)">
<button class="btn" onclick="runCommand()">RUN</button>
</div>
</div>

<script>
// Matrix Effect
const canvas = document.getElementById('matrix');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth; canvas.height = window.innerHeight;
const drops = Array(Math.floor(canvas.width/20)).fill(1);
function draw() {
ctx.fillStyle = 'rgba(0,0,0,0.05)'; ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.fillStyle = '#00ffcc'; ctx.font = '15px monospace';
drops.forEach((y, i) => {
const text = String.fromCharCode(Math.random() * 128);
ctx.fillText(text, i*20, y*20);
if(y*20 > canvas.height && Math.random() > 0.975) drops[i] = 0;
drops[i]++;
});
}
setInterval(draw, 35);

function toggleMenu() { document.getElementById('sidebar').classList.toggle('active'); }

function handleInput(e) { if(e.key === 'Enter') runCommand(); }

function log(msg, type = 'sys-msg') {
const out = document.getElementById('term-out');
out.innerHTML += `<div class="line ${type}">${msg}</div>`;
out.scrollTop = out.scrollHeight;
}

function runCommand() {
const input = document.getElementById('user-in');
const cmd = input.value.trim().toLowerCase();
if(!cmd) return;

log(`<span class="cmd-prefix">root@javas:~#</span> ${input.value}`, '');
input.value = "";

// Termux-Style Logic
if(cmd === 'help') {
log("Available Commands: help, status, security --on/off, nsfw --on/off, clear, whoami");
} else if(cmd === 'status') {
log("System: Javas OS is running smoothly. All encryption protocols active.");
} else if(cmd === 'whoami') {
log("User: Asad (Administrator). Privilege Level: Root.");
} else if(cmd.includes('nsfw')) {
log("NSFW Filter updated successfully.", 'sys-msg');
} else if(cmd === 'clear') {
clearTerminal();
} else {
log(`sh: command not found: ${cmd}`, 'error-msg');
}
}

function clearTerminal() { document.getElementById('term-out').innerHTML = ""; log("Terminal logs cleared."); }
function systemReboot() { log("Rebooting Javas OS...", 'error-msg'); setTimeout(() => location.reload(), 1500); }
</script>
</body>
</html>
</html>