<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Paramètres d'utilisation</title> <title>Graphique Chart.js</title> <style> canvas { margin-top: 20px; } </style> <!-- Inclure Chart.js via le CDN --> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> </head> <style> body { font-family: Arial, sans-serif; background-color: #f4f4f4; color: #333; padding: 20px; margin: 0; text-align: center; } h1 { font-size: 18px; margin-bottom: 20px; } label { font-size: 14px; display: block; margin-bottom: 10px; } select { padding: 5px; margin-right: 10px; font-size: 14px; } button { padding: 10px 15px; font-size: 14px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } button:hover { background-color: #45a049; } canvas { margin-top: 20px; } </style> </head> <body> <h1>Temps limite d'utilisation</h1> <label for="timeLimitHours">Heures :</label> <select id="timeLimitHours"> <option value="0">0 h</option> <option value="1">1 h</option> <option value="2">2 h</option> <option value="3">3 h</option> <option value="4" selected>4 h</option> <option value="5">5 h</option> <option value="6">6 h</option> <option value="7">7 h</option> <option value="8">8 h</option> <option value="9">9 h</option> <option value="10">10 h</option> <option value="11">11 h</option> <option value="12">12 h</option> </select> <label for="timeLimitMinutes">Minutes :</label> <select id="timeLimitMinutes"> <option value="0">0 min</option> <option value="15">15 min</option> <option value="30">30 min</option> <option value="45">45 min</option> </select> <button id="saveSettings">Sauvegarder</button> <!-- Canvas pour le diagramme en camembert --> <canvas id="socialMediaChart" width="400" height="400"></canvas> <script src="popup.js"></script> <body> <h1>Mon graphique en camembert</h1> <!-- Canvas pour afficher le graphique --> <canvas id="myPieChart" width="400" height="400"></canvas> <script> // Code JavaScript pour créer le graphique const ctx = document.getElementById('myPieChart').getContext('2d'); const myPieChart = new Chart(ctx, { type: 'pie', data: { labels: ['Facebook', 'Twitter', 'Instagram'], // Les étiquettes du camembert datasets: [{ label: 'Temps passé (en secondes)', data: [1200, 900, 500], // Les données pour chaque section backgroundColor: ['#3b5998', '#1DA1F2', '#E1306C'], // Couleurs personnalisées hoverOffset: 4 }] } }); </script> </body> </html>