Rene Luria
f94dd12216
Changes made: - Remove problematic configuration-snippet from base ingress - Add namespace creation for math-tables - Configure ingress with nginx class and letsencrypt-prod issuer - Set production hostname to math-tables.cl1.parano.ch - Reduce production replicas to 1 - Update copyright year in index.html
219 lines
12 KiB
HTML
219 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Générateur d'Exercices de Mathématiques</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<style>
|
|
.card {
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
|
transition: 0.3s;
|
|
margin-bottom: 20px;
|
|
}
|
|
.card:hover {
|
|
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
|
|
}
|
|
.exercise-result {
|
|
background-color: #f8f9fa;
|
|
border-radius: 5px;
|
|
padding: 15px;
|
|
margin-top: 20px;
|
|
}
|
|
.feature-icon {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
margin-right: 0.75rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container mt-5 mb-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8">
|
|
<div class="text-center mb-5">
|
|
<h1 class="display-4 fw-bold">Générateur d'Exercices de Mathématiques</h1>
|
|
<p class="lead">Créez des exercices de multiplication et division personnalisés en PDF</p>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h5 class="card-title">Paramètres des Exercices</h5>
|
|
<form id="exerciseForm">
|
|
<div class="mb-3">
|
|
<label for="minTable" class="form-label">Table minimale</label>
|
|
<input type="number" class="form-control" id="minTable" min="1" max="12" value="1" required>
|
|
<div class="form-text">La plus petite table de multiplication à inclure</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="maxTable" class="form-label">Table maximale</label>
|
|
<input type="number" class="form-control" id="maxTable" min="1" max="12" value="10" required>
|
|
<div class="form-text">La plus grande table de multiplication à inclure</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="numExercises" class="form-label">Nombre d'exercices</label>
|
|
<input type="number" class="form-control" id="numExercises" min="1" max="100" value="15" required>
|
|
<div class="form-text">Nombre total d'exercices à générer (entre 1 et 100)</div>
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary btn-lg" id="generateBtn">
|
|
<span id="buttonText">Générer le PDF</span>
|
|
<span id="spinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="resultContainer" class="exercise-result d-none">
|
|
<h5>Résultat</h5>
|
|
<div id="resultMessage"></div>
|
|
<div id="downloadLinkContainer" class="mt-3 d-none">
|
|
<a id="downloadLink" class="btn btn-success" href="#" download>Télécharger le PDF</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-5">
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-start">
|
|
<div class="feature-icon bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-x-lg text-primary" viewBox="0 0 16 16">
|
|
<path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h5 class="fw-bold">Multiplications</h5>
|
|
<p>Exercices de multiplication avec des opérateurs aléatoires de la table spécifiée.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-start">
|
|
<div class="feature-icon bg-success bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-slash-lg text-success" viewBox="0 0 16 16">
|
|
<path d="M3.5 1.5l9 13"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h5 class="fw-bold">Divisions</h5>
|
|
<p>Exercices de division correspondants aux tables de multiplication sélectionnées.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row mt-3">
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-start">
|
|
<div class="feature-icon bg-info bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-file-earmark-pdf text-info" viewBox="0 0 16 16">
|
|
<path d="M14 14V4.5L9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2zM9.5 3A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h5.5v2z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h5 class="fw-bold">Format PDF</h5>
|
|
<p>Générez des fichiers PDF prêts à imprimer avec une mise en page organisée.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<div class="d-flex align-items-start">
|
|
<div class="feature-icon bg-warning bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-columns-gap text-warning" viewBox="0 0 16 16">
|
|
<path d="M6 1H1v3h5V1zM1 0a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V1a1 1 0 0 0-1-1H1zm14 12h-5v3h5v-3zm-5-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-5zM6 8H1v7h5V8zm-1 1a1 1 0 0 0-1 1v5a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1v-5a1 1 0 0 0-1-1H5zm9-9h-5v5h5V1zm-1 1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1h-5z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h5 class="fw-bold">Trois Colonnes</h5>
|
|
<p>Les exercices sont présentés en trois colonnes pour économiser du papier.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="bg-light text-center text-muted py-4 mt-5">
|
|
<div class="container">
|
|
<p>Générateur d'Exercices de Mathématiques © 2025</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script>
|
|
document.getElementById('exerciseForm').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
const minTable = parseInt(document.getElementById('minTable').value);
|
|
const maxTable = parseInt(document.getElementById('maxTable').value);
|
|
const numExercises = parseInt(document.getElementById('numExercises').value);
|
|
|
|
const generateBtn = document.getElementById('generateBtn');
|
|
const buttonText = document.getElementById('buttonText');
|
|
const spinner = document.getElementById('spinner');
|
|
|
|
// Show loading state
|
|
buttonText.textContent = 'Génération en cours...';
|
|
spinner.classList.remove('d-none');
|
|
generateBtn.disabled = true;
|
|
|
|
try {
|
|
const response = await fetch('/generate', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
min_table: minTable,
|
|
max_table: maxTable,
|
|
num_exercises: numExercises
|
|
})
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
const resultContainer = document.getElementById('resultContainer');
|
|
const resultMessage = document.getElementById('resultMessage');
|
|
const downloadLinkContainer = document.getElementById('downloadLinkContainer');
|
|
const downloadLink = document.getElementById('downloadLink');
|
|
|
|
if (result.error) {
|
|
resultMessage.innerHTML = `<div class="alert alert-danger">${result.error}</div>`;
|
|
downloadLinkContainer.classList.add('d-none');
|
|
} else {
|
|
resultMessage.innerHTML = `
|
|
<div class="alert alert-success">
|
|
<h6>${result.message}</h6>
|
|
<ul class="mb-0">
|
|
<li>Tables de ${result.min_table} à ${result.max_table}</li>
|
|
<li>${result.num_exercises} exercices générés</li>
|
|
</ul>
|
|
</div>
|
|
`;
|
|
downloadLink.href = `/download/${result.pdf_filename}`;
|
|
downloadLinkContainer.classList.remove('d-none');
|
|
}
|
|
|
|
resultContainer.classList.remove('d-none');
|
|
} catch (error) {
|
|
const resultContainer = document.getElementById('resultContainer');
|
|
const resultMessage = document.getElementById('resultMessage');
|
|
|
|
resultMessage.innerHTML = `<div class="alert alert-danger">Erreur: ${error.message}</div>`;
|
|
resultContainer.classList.remove('d-none');
|
|
} finally {
|
|
// Reset button state
|
|
buttonText.textContent = 'Générer le PDF';
|
|
spinner.classList.add('d-none');
|
|
generateBtn.disabled = false;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |