<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8" />
<title>AO MASTER DASHBOARD</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background: #111;
color: white;
display: flex;
height: 100vh;
}
/* Sidebar */
#sidebar {
width: 260px;
background: #181818;
padding: 20px;
box-shadow: 0px 8px 8px rgba(0,0,0,0.5);
}
#sidebar h2 {
margin-top: 0;
font-size: 20px;
margin-bottom: 15px;
color: #46ff7b;
}
#sidebar button {
width: 100%;
padding: 12px;
margin-bottom: 10px;
background: #222;
border: 1px solid #333;
color: white;
cursor: pointer;
text-align: left;
}
#sidebar button:hover {
background: #333;
}
/* Content */
#content {
flex: 1;
padding: 20px;
overflow-y: auto;
}
.panel {
background: #1e1e1e;
padding: 20px;
border-radius: 10px;
margin-bottom: 20px;
}
.panel h3 {
margin-top: 0;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
table th, table td {
border-bottom: 1px solid #333;
padding: 10px;
text-align: left;
}
.status-ok {
color: #4cff50;
}
.status-error {
color: #ff4c4c;
}
</style>
</head>
<body>
<div id="sidebar">
<h2>Dashboard</h2>
<button onclick="loadPanel('ping')">API Ping</button>
<button onclick="loadPanel('modules')">Modules</button>
<button onclick="loadPanel('uploads')">Uploads</button>
<button onclick="loadPanel('engine')">Module Engine</button>
<button onclick="loadPanel('calc')">Calculator</button>
<button onclick="loadPanel('projects')">Projecten</button>
</div>
<div id="content">
<h1>Welkom bij AO MASTER DASHBOARD</h1>
<p>Kies een optie in het menu links.</p>
</div>
<script>
async function loadPanel(type) {
const content = document.getElementById("content");
if (type === "ping") {
const res = await fetch("https://ao-master-full-deploy.onrender.com/api/ping");
const data = await res.json();
content.innerHTML = `
<div class='panel'>
<h3>API Status</h3>
<p>Status: <span class="status-ok">${data.status}</span></p>
</div>`;
}
if (type === "modules") {
const res = await fetch("https://ao-master-full-deploy.onrender.com/api/modules");
const data = await res.json();
content.innerHTML = `
<div class='panel'>
<h3>Modules</h3>
<pre>${JSON.stringify(data, null, 2)}</pre>
</div>`;
}
if (type === "uploads") {
content.innerHTML = `
<div class='panel'>
<h3>Uploads</h3>
<p>Upload functionaliteit komt later hier.</p>
</div>`;
}
if (type === "engine") {
const res = await fetch("https://ao-master-full-deploy.onrender.com/api/module-engine");
const data = await res.json();
content.innerHTML = `
<div class='panel'>
<h3>Module Engine</h3>
<pre>${JSON.stringify(data, null, 2)}</pre>
</div>`;
}
if (type === "calc") {
content.innerHTML = `
<div class='panel'>
<h3>Calculator</h3>
<p>Rekenmodule komt hier.</p>
</div>`;
}
if (type === "projects") {
const res = await fetch("https://ao-master-full-deploy.onrender.com/api/projects");
const data = await res.json();
content.innerHTML = `
<div class='panel'>
<h3>Projecten</h3>
<pre>${JSON.stringify(data, null, 2)}</pre>
</div>`;
}
}
</script>
</body>
</html>