<!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>