114 lines
3.0 KiB
HTML
114 lines
3.0 KiB
HTML
|
<!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>
|