Fonctionnement
- But : Afficher une interface utilisateur (UI) pour que l'utilisateur interagisse avec l'extension.
- Comportement : Le contenu de ce fichier s'affiche dans une petite fenêtre (popup) juste sous l'icône de l'extension dans le navigateur.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Volume Regulator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Volume Regulator</h1>
<!-- Bouton Configuration initiale -->
<section>
<button id="initialSetup" class="btn" disabled aria-label="Configurer le système">Configuration initiale</button>
</section>
<!-- Section Volume de Référence avec visualisation -->
<section>
<label for="referenceVolume">Volume de référence :</label>
<div id="volumeContainer" class="volume-slider">
<!-- Barre de visualisation -->
<div id="volumeVisualization" class="volume-visualization"></div>
<!-- Slider pour définir le volume de référence -->
<input type="range" id="referenceVolume" min="0" max="100" value="20">
</div>
</section>
<!-- Boutons de contrôle -->
<section class="button-row">
<button id="toggleVisualization" class="btn" aria-label="Activer ou désactiver la visualisation">Visualisation du volume actuel</button>
<button id="setVolume" class="btn" aria-label="Définir le volume de référence">Définir le volume de référence</button>
</section>
<!-- Paramètres -->
<section>
<label for="tolerance">Tolérance (en dB) :</label>
<input type="number" id="tolerance" min="1" max="20" value="5" aria-label="Tolérance en décibels">
<label for="frequency">Fréquence d'analyse (en secondes) :</label>
<input type="number" id="frequency" min="0.1" step="0.1" value="0.5" aria-label="Fréquence d'analyse en secondes">
</section>
<!-- Bouton Enregistrer les paramètres -->
<section>
<button id="saveSettings" class="btn save-button" aria-label="Enregistrer les paramètres">Enregistrer les paramètres</button>
</section>
<script src="popup.js"></script>
</body>
</html>