Gestionnaire de fichiers - Editer - /home/pactamm/update/indicator.tar
Arrière
blocanime - Copie - Copie.html 0000604 00000036437 14756001416 0011672 0 ustar 00 <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Évaluation de la Formation</title> <!-- Bootstrap CSS --> <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css" rel="stylesheet"> <style> .evaluation-charts { padding-top: 50px; padding-bottom: 50px; background-color: #add5f7; } .chart-container { position: relative; height: 250px; margin-bottom: 1rem; background: rgba(255, 255, 255, 0.95); border-radius: 8px; padding: 10px; } .card { height: 100%; transition: transform 0.3s ease, box-shadow 0.3s ease; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(3px); margin-bottom: 20px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .card:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); } .card-header { background: rgba(41, 50, 100, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px 10px 0 0 !important; color: white; padding: 15px 20px; } .card-header small { font-size: 0.85rem; opacity: 0.9; font-family: 'Segoe UI', sans-serif; display: block; margin-top: 5px; animation: fadeInOut 2s infinite; } @keyframes fadeInOut { 0% { opacity: 0.7; } 50% { opacity: 1; } 100% { opacity: 0.7; } } h2.evaluation-title { color: #293264; font-weight: 300; letter-spacing: 1px; margin-bottom: 30px; text-align: center; font-family: 'Cocogoose Narrows', sans-serif; } h6.card-title { font-weight: 500 !important; font-family: 'Cocogoose Narrows', sans-serif; margin: 0; font-size: 1.1rem; color: white; } @media (max-width: 768px) { .chart-container { height: 200px; } } </style> </head> <body> <section class="evaluation-charts"> <div class="container"> <div class="row justify-content-center"> <div class="col-12"> <div class="section-content"> <h2 class="evaluation-title mbr-section-title align-center mb-4">Indicateurs de Performance.</h2> <section> <h2>Données sur la capacité au transport de poids lourds en 2024</h2> </section> <div class="row g-4"> <!-- Préformation --> <div class="col-md-6 col-lg-4"> <div class="card"> <div class="card-header"> <h6 class="card-title">Évaluation Préformation</h6> </div> <div class="card-body"> <div class="chart-container"> <canvas id="preformationChart"></canvas> </div> </div> </div> </div> <!-- Intervenants --> <div class="col-md-6 col-lg-4"> <div class="card"> <div class="card-header"> <h6 class="card-title">Performance des Enseignants</h6> </div> <div class="card-body"> <div class="chart-container"> <canvas id="intervenantsChart"></canvas> </div> </div> </div> </div> <!-- Organisation --> <div class="col-md-6 col-lg-4"> <div class="card"> <div class="card-header"> <h6 class="card-title">Organisation et Déroulement</h6> </div> <div class="card-body"> <div class="chart-container"> <canvas id="organisationChart"></canvas> </div> </div> </div> </div> <!-- Efficacité --> <div class="col-md-6 col-lg-6"> <div class="card"> <div class="card-header"> <h6 class="card-title">Efficacité de la Formation</h6> <small class="text-light"> Avis : Les résultats d'efficacité de la formation sont en cours de mise à jour... </small> </div> <div class="card-body"> <div class="chart-container"> <canvas id="efficaciteChart"></canvas> </div> </div> </div> </div> <!-- Suivi --> <div class="col-md-6 col-lg-6"> <div class="card"> <div class="card-header"> <h6 class="card-title">Suivi Administratif</h6> </div> <div class="card-body"> <div class="chart-container"> <canvas id="suiviChart"></canvas> </div> </div> </div> </div> </div> </div> </div> </div> </div> </section> <!-- Bootstrap JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script> <!-- Chart.js --> <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script> <script> document.addEventListener('DOMContentLoaded', function() { Chart.defaults.font.family = 'Segoe UI, sans-serif'; Chart.defaults.font.size = 12; function createGradient(ctx, colorStart, colorEnd) { const gradient = ctx.createLinearGradient(0, 0, ctx.canvas.width, 0); gradient.addColorStop(0, colorStart); gradient.addColorStop(1, colorEnd); return gradient; } function animateCharts(charts) { const config = { duration: 3000, delay: 100, interval: 10000 }; setInterval(() => { charts.forEach(chart => { chart.data.datasets.forEach(dataset => { const originalData = dataset.originalData; dataset.data = originalData.map(value => 0); }); chart.update('none'); let startTime; let progress = 0; function animate(currentTime) { if (!startTime) startTime = currentTime; progress = (currentTime - startTime) / config.duration; if (progress <= 1) { chart.data.datasets.forEach(dataset => { dataset.data = dataset.originalData.map(value => value * progress ); }); chart.options.plugins.tooltip.callbacks.label = function(context) { const percentage = Math.round(context.parsed.x * 10) / 10; return percentage.toFixed(1) + '/10 (' + Math.round(percentage * 10) + '%)'; }; chart.update('none'); requestAnimationFrame(animate); } } setTimeout(() => { requestAnimationFrame(animate); }, config.delay); }); }, config.interval); } const commonOptions = { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, tooltip: { backgroundColor: 'rgba(255, 255, 255, 0.9)', titleColor: '#333', bodyColor: '#333', borderColor: '#ddd', borderWidth: 1, padding: 10, callbacks: { label: function(context) { const value = context.parsed.x; return value.toFixed(1) + '/10 (' + Math.round(value * 10) + '%)'; } } } }, scales: { x: { beginAtZero: true, max: 10, grid: { display: false }, ticks: { font: { size: 10 } } }, y: { grid: { display: false }, ticks: { font: { size: 10 } } } }, animation: { duration: 1500, easing: 'easeInOutQuart' } }; const charts = []; // Préformation Chart const preformationCtx = document.getElementById('preformationChart').getContext('2d'); const preformationGradient = createGradient(preformationCtx, '#ff4444', '#ff8888'); const preformationChart = new Chart(preformationCtx, { type: 'bar', data: { labels: ['Préformation', 'Motivation', 'Compétences'], datasets: [{ data: [8.1, 7.5, 9.0], originalData: [8.1, 7.5, 9.0], backgroundColor: preformationGradient, borderWidth: 0 }] }, options: commonOptions }); charts.push(preformationChart); // Intervenants Chart const intervenantsCtx = document.getElementById('intervenantsChart').getContext('2d'); const intervenantsGradient = createGradient(intervenantsCtx, '#4444ff', '#8888ff'); const intervenantsChart = new Chart(intervenantsCtx, { type: 'bar', data: { labels: ['Performance Totale des Enseignants'], datasets: [{ data: [8.0], originalData: [8.0], backgroundColor: intervenantsGradient, borderWidth: 0 }] }, options: commonOptions }); charts.push(intervenantsChart); // Organisation Chart const organisationCtx = document.getElementById('organisationChart').getContext('2d'); const organisationGradient = createGradient(organisationCtx, '#00285f', '#0750b3'); const organisationChart = new Chart(organisationCtx, { type: 'bar', data: { labels: ['Org. 1', 'Org. 2', 'Dér. 1', 'Dér. 2', 'Dér. 3'], datasets: [{ data: [10.0, 9.1, 8.3, 8.4, 9.0], originalData: [10.0, 9.1, 8.3, 8.4, 9.0], backgroundColor: organisationGradient, borderWidth: 0 }] }, options: commonOptions }); charts.push(organisationChart); // Efficacité Chart const efficaciteCtx = document.getElementById('efficaciteChart').getContext('2d'); const efficaciteGradient = createGradient(efficaciteCtx, '#0D6986', '#BEEB9F'); const efficaciteChart = new Chart(efficaciteCtx, { type: 'bar', data: { labels: ['1ère éval.', '2ème éval.', '3ème éval.'], datasets: [{ data: [10.0, 9.6, 10.0], originalData: [10.0, 9.6, 10.0], backgroundColor: efficaciteGradient, borderWidth: 0 }] }, options: commonOptions }); charts.push(efficaciteChart); // Suivi Chart const suiviCtx = document.getElementById('suiviChart').getContext('2d'); const suiviGradient = createGradient(suiviCtx, '#25064C', '#decbf0'); const suiviChart = new Chart(suiviCtx, { type: 'bar', data: { labels: ['Satisfaction', 'Délais docs'], datasets: [{ data: [2.5, 2.9], originalData: [2.5, 2.9], backgroundColor: suiviGradient, borderWidth: 0 }] }, options: commonOptions }); charts.push(suiviChart); // Inicia a animação animateCharts(charts); }); </script> </body> </html>
| ver. 1.4 |
Github
|
.
| PHP 5.4.45 | Génération de la page: 0 |
proxy
|
phpinfo
|
Réglages