Initial commit: EduBox V2 platform
This commit is contained in:
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>EduBox Agent</title>
|
||||
<script src="https://unpkg.com/htmx.org@1.9.12"></script>
|
||||
<style>
|
||||
body { font-family: system-ui, sans-serif; background: #f8fafc; margin: 0; padding: 2rem; }
|
||||
.card { background: white; border-radius: 8px; padding: 1.5rem; max-width: 400px; margin: 2rem auto; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
|
||||
h1 { font-size: 1.5rem; margin-bottom: 1rem; color: #1e293b; }
|
||||
input { width: 100%; padding: 0.5rem; border: 1px solid #cbd5e1; border-radius: 4px; margin-bottom: 0.75rem; box-sizing: border-box; }
|
||||
button { width: 100%; padding: 0.6rem; background: #2563eb; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 500; }
|
||||
button:hover { background: #1d4ed8; }
|
||||
.status { margin-top: 1rem; font-size: 0.875rem; }
|
||||
.success { color: #16a34a; }
|
||||
.error { color: #dc2626; }
|
||||
.instance-list { margin-top: 1rem; }
|
||||
.instance-item { padding: 0.5rem; border: 1px solid #e2e8f0; border-radius: 4px; margin-bottom: 0.5rem; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="card">
|
||||
<h1>EduBox Agent</h1>
|
||||
<div id="main">
|
||||
<p>Chargement...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const ws = new WebSocket('ws://' + location.host + '/ws');
|
||||
const main = document.getElementById('main');
|
||||
|
||||
ws.onopen = () => {
|
||||
ws.send(JSON.stringify({action: 'check'}));
|
||||
};
|
||||
|
||||
ws.onmessage = (ev) => {
|
||||
const msg = JSON.parse(ev.data);
|
||||
if (msg.action === 'not_activated') {
|
||||
main.innerHTML = `
|
||||
<p>Veuillez entrer votre code d'activation (6 caractères) :</p>
|
||||
<input type="text" id="code" maxlength="6" placeholder="XXXXXX">
|
||||
<button onclick="activate()">Activer</button>
|
||||
<div id="status" class="status"></div>
|
||||
`;
|
||||
} else if (msg.action === 'activated') {
|
||||
main.innerHTML = `
|
||||
<p class="success">✅ Activé : <strong>${msg.studentName}</strong></p>
|
||||
<div class="instance-list" id="instances"></div>
|
||||
`;
|
||||
ws.send(JSON.stringify({action: 'instances'}));
|
||||
} else if (msg.action === 'activation_failed') {
|
||||
document.getElementById('status').innerHTML = `<span class="error">❌ ${msg.error || 'Code invalide'}</span>`;
|
||||
} else if (msg.action === 'instances_list') {
|
||||
const container = document.getElementById('instances');
|
||||
if (!container) return;
|
||||
if (msg.instances.length === 0) {
|
||||
container.innerHTML = '<p class="status">Aucune instance assignée.</p>';
|
||||
} else {
|
||||
container.innerHTML = '<p class="status"><strong>Instances :</strong></p>' +
|
||||
msg.instances.map(i => `<div class="instance-item">${i.id}</div>`).join('');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function activate() {
|
||||
const code = document.getElementById('code').value.trim().toUpperCase();
|
||||
if (code.length !== 6) {
|
||||
document.getElementById('status').innerHTML = '<span class="error">Le code doit faire 6 caractères.</span>';
|
||||
return;
|
||||
}
|
||||
document.getElementById('status').innerHTML = 'Activation en cours...';
|
||||
ws.send(JSON.stringify({action: 'activate', code}));
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user