51 lines
2.1 KiB
HTML
51 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>OpoQuizTiny - Copilot</title>
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; margin: 0; padding: 2em; background: #f8f9fa; }
|
|
h1 { font-size: 2em; margin-bottom: 0.5em; }
|
|
.file-input { margin-bottom: 1em; }
|
|
.json-list { background: #fff; border: 1px solid #ccc; padding: 1em; border-radius: 6px; margin-top: 1em; }
|
|
pre { background: #f4f4f4; padding: 1em; border-radius: 4px; overflow-x: auto; }
|
|
.error { color: #b00; margin-top: 1em; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>OpoQuizTiny <small style="font-size:0.5em;">(Copilot)</small></h1>
|
|
<form id="jsonForm" class="file-input">
|
|
<label for="jsonFiles">Cargar archivos JSON de temario:</label>
|
|
<input type="file" id="jsonFiles" name="jsonFiles" accept=".json" multiple>
|
|
</form>
|
|
<div id="output" class="json-list"></div>
|
|
<div id="error" class="error"></div>
|
|
<script>
|
|
document.getElementById('jsonFiles').addEventListener('change', function (e) {
|
|
const files = Array.from(e.target.files);
|
|
const output = document.getElementById('output');
|
|
const error = document.getElementById('error');
|
|
output.innerHTML = '';
|
|
error.textContent = '';
|
|
if (!files.length) return;
|
|
files.forEach(file => {
|
|
const reader = new FileReader();
|
|
reader.onload = function(evt) {
|
|
try {
|
|
const json = JSON.parse(evt.target.result);
|
|
const name = file.name;
|
|
output.innerHTML += `<h3>${name}</h3><pre>${JSON.stringify(json, null, 4)}</pre>`;
|
|
} catch (err) {
|
|
error.textContent = `Error en "${file.name}": ${err.message}`;
|
|
}
|
|
};
|
|
reader.onerror = function() {
|
|
error.textContent = `No se pudo leer el archivo "${file.name}".`;
|
|
};
|
|
reader.readAsText(file, 'utf-8');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |