ou alors prendre une approche très CSS où vous décidez du look and feel dans une partie CSS au début et vous appliquez cela à vos éléments dans le body ensuite
un truc comme ça (tapé un peu à la va-vite)
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Les Plantes de Pandaroux</title>
<style>
body { margin: 0; font-family: Arial, sans-serif; }
header, nav { background-color: green; color: white; }
header { display: flex; align-items: center; padding: 10px; }
header img { margin-right: 5px; max-height: 100%; object-fit: cover; border: 2px solid white; border-radius: 5px; }
header div { display: flex; flex-direction: column; align-items: center; width: 100%; }
header h1 { font-size: 24px; margin: 10px 0; }
nav { display: flex; }
nav a { text-decoration: none; color: blue; flex: 1; text-align: center; padding: 10px; }
.container { margin: 5% 5%; }
.separator { height: 30px; background-color: white; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; border-radius: 5px; }
.led-container, .brightness-container, .lamp-control-container { padding: 10px; background-color: white; border: 1px solid #ddd; border-radius: 5px; text-align: center; margin-top: 20px; }
.led-row, .lamp-control-buttons { display: flex; justify-content: space-between; }
.button { flex: 1; width: 48%; padding: 10px; margin: 10px 1%; border: 2px solid black; border-radius: 10px; cursor: pointer; transition: font-weight 0.3s; }
.button:hover { font-weight: bold; }
.button:active { font-weight: normal; }
.button.clicked { animation: none; background-color: yellow !important; color: black !important; }
.led-red { background-color: red; color: white; }
.led-blue { background-color: blue; color: white; }
.led-green { background-color: green; color: white; }
.led-white { background-color: #eee; color: black; }
.brightness-slider { width: 80%; margin: 0 auto; }
@keyframes blink { 0%, 49%, 100% { background-color: inherit; color: inherit; } 50% { background-color: yellow; color: black; } }
</style>
</head>
<body>
<header>
<img src="icone.png" alt="Image">
<div>
<h1>Bio Support for plants</h1><br>
<h1>V 3.1 WiFi</h1>
</div>
</header>
<nav>
<a href="#">Page</a>
<a href="#">Tableau de bord</a>
<a href="#">Couleur des Leds</a>
<a href="#">Commande lampe</a>
</nav>
<div class="container">
<div class="separator"></div>
<div class="led-container">
<p>Couleur des LEDs</p>
<div class="led-row">
<button class="button led-red" onclick="toggleButton(this)">LEDs rouges</button>
<button class="button led-blue" onclick="toggleButton(this)">LEDs bleues</button>
</div>
<div class="led-row">
<button class="button led-green" onclick="toggleButton(this)">LEDs vertes</button>
<button class="button led-white" onclick="toggleButton(this)">LEDs blanches</button>
</div>
</div>
<div class="brightness-container">
<p class="brightness-text">Luminosité des LEDs</p>
<input type="range" min="0" max="100" value="50" class="brightness-slider" id="brightnessSlider">
<p class="brightness-value" id="brightnessValue">50%</p>
</div>
<div class="lamp-control-container">
<p class="lamp-control-text">Commande de la lampe</p>
<div class="lamp-control-buttons">
<button class="button led-red" onclick="toggleButton(this)">ON</button>
<button class="button led-green" onclick="toggleButton(this)">OFF</button>
</div>
</div>
</div>
<script>
const brightnessSlider = document.getElementById('brightnessSlider');
const brightnessValue = document.getElementById('brightnessValue');
brightnessSlider.addEventListener('input', () => {
const value = brightnessSlider.value;
brightnessValue.textContent = `${value}%`;
updateServer('slider', value); // Appel AJAX lorsque le slider est relâché
});
function toggleButton(button) {
button.classList.add('clicked');
setTimeout(() => {
button.classList.remove('clicked');
updateServer('button', button.textContent); // Appel AJAX lorsqu'un bouton est cliqué
}, 200);
}
function updateServer(type, value) {
const url = 'majArduino'; // Remplacez l'URL par votre propre URL
const data = { // Données à envoyer
type: type,
value: value
};
// Options pour la requête fetch
const options = {
method: 'POST', // ou 'GET' selon vos besoins
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(data)
};
// Effectuer la requête fetch
fetch(url, options)
.then(response => response.json())
.then(data => console.log(data)) // Utilisez les données de la réponse si nécessaire
.catch(error => console.error('Erreur:', error));
}
</script>
</body>
</html>
vous retrouvez les trois sections dans juste un seul fichier
- au début les styles
- puis le corps (body)
- puis les fonctions javascript
j'ai mis les bases d'une requête AJAX pour les boutons et le slider si nécessaire (ça appelle l'URI majArduino)
le fichier image (icone.png) à mettre au même niveau que le fichier .htm
ça devrait donner cela:
si vous ne voulez pas que le bandeau + l'image aient un liseré blanc par exemple, vous enlevez border: 2px solid white; border-radius: 5px; du style de header img et hop ça disparait
si vous voulez que les 4 liens ne soient pas en bleu mais en blanc vous changez la couleur dans
nav a { text-decoration: none; color: blue; flex: 1; text-align: center; padding: 10px; } et si vous voulez souligner le lien, vous mettez sa décoration à underline au lieu de none
bref - en jouant avec le CSS on fait beaucoup de choses qui sont factorisées
PS/ je viens de voir que j'ai inversé la couleur des boutons ON et OFF. il suffit de donner la classe led-red ou led-green au bon bouton
au lieu de
<button class="button led-red" onclick="toggleButton(this)">ON</button>
<button class="button led-green" onclick="toggleButton(this)">OFF</button>
on fait
<button class="button led-green" onclick="toggleButton(this)">ON</button>
<button class="button led-red" onclick="toggleButton(this)">OFF</button>
