legendaryjs
Version:
LegendaryJS – The ultimate backend framework for speed, power, and simplicity.
120 lines (113 loc) • 4.49 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Legendary Studio</title>
<style>
body { font-family: sans-serif; background: #0f172a; color: #f8fafc; margin: 0; }
header { background: #1e293b; padding: 1rem; text-align: center; font-size: 1.4rem; }
.tabs { display: flex; background: #1e293b; }
.tab {
flex: 1; padding: 0.75rem; text-align: center; cursor: pointer;
background: #1e293b; border-bottom: 2px solid transparent;
}
.tab.active { background: #334155; border-bottom: 2px solid #38bdf8; }
.panel { display: none; padding: 1rem; }
.panel.active { display: block; }
textarea, input, select {
width: 100%; padding: 0.5rem; margin: 0.5rem 0;
background: #1e293b; color: #f1f5f9; border: 1px solid #334155;
}
button {
background: #38bdf8; color: #0f172a; padding: 0.5rem 1rem;
border: none; cursor: pointer; font-weight: bold;
}
.log-line { border-bottom: 1px solid #334155; margin-bottom: 0.5rem; }
</style>
</head>
<body>
<header>🧠 LegendaryJS Studio</header>
<div class="tabs">
<div class="tab active" onclick="showTab(0)">📊 Dashboard</div>
<div class="tab" onclick="showTab(1)">🛠 Config</div>
<div class="tab" onclick="showTab(2)">📦 Routes</div>
<div class="tab" onclick="showTab(3)">📄 Logs</div>
</div>
<div class="panel active" id="panel-0">
<p>🧠 Memory: <span id="memory"></span></p>
<p>⏱ Uptime: <span id="uptime"></span></p>
<p>🌐 Active Users: <span id="users"></span></p>
<p>📨 Requests: <span id="requests"></span></p>
<p>❌ Errors: <span id="errors"></span></p>
</div>
<div class="panel" id="panel-1">
<h3>⚙ Config Editor</h3>
<textarea id="config" rows="15"></textarea>
<button onclick="saveConfig()">💾 Save Config</button>
</div>
<div class="panel" id="panel-2">
<h3>📦 Routes Editor</h3>
<textarea id="routes" rows="15"></textarea>
<button onclick="saveRoutes()">💾 Save Routes</button>
</div>
<div class="panel" id="panel-3">
<h3>📄 Realtime Logs</h3>
<div id="logs"></div>
</div>
<script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
<script>
const tabs = document.querySelectorAll('.tab');
const panels = document.querySelectorAll('.panel');
function showTab(index) {
tabs.forEach(t => t.classList.remove('active'));
panels.forEach(p => p.classList.remove('active'));
tabs[index].classList.add('active');
panels[index].classList.add('active');
}
const socket = io('/studio');
socket.on('stats', data => {
document.getElementById('memory').textContent = (data.memory.rss / 1024 / 1024).toFixed(2) + ' MB';
document.getElementById('uptime').textContent = data.uptime.toFixed(2) + ' s';
document.getElementById('users').textContent = data.activeUsers;
document.getElementById('requests').textContent = data.requests;
document.getElementById('errors').textContent = data.errors;
});
socket.on('log', msg => {
const el = document.createElement('div');
el.className = 'log-line';
el.textContent = msg;
document.getElementById('logs').prepend(el);
});
async function loadRoutes() {
const res = await fetch('/studio/routes');
document.getElementById('routes').value = JSON.stringify(await res.json(), null, 2);
}
async function saveRoutes() {
const body = JSON.parse(document.getElementById('routes').value);
await fetch('/studio/routes', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body)
});
alert('✅ Routes updated');
}
async function loadConfig() {
const res = await fetch('/legendary.config.js');
const txt = await res.text();
document.getElementById('config').value = txt;
}
async function saveConfig() {
const js = document.getElementById('config').value;
await fetch('/studio/config', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ js })
});
alert('✅ Config updated');
}
loadRoutes();
loadConfig();
</script>
</body>
</html>