HorlogeDS1307 7 segments

International Français
85

Le soucis avec ce que tu veux faire, c'est que tu ne peux pas forcément utiliser un Framework et qu'il est presque obligatoire de faire son CSS à la main, mais cela fait vite beaucoup de code à embarquer sur ton ESP32.
Toute fois si tu as accès à internet dans ton gymnase tu peux quand même utiliser un Framework que le navigateur téléchargera via un adresse de CDN

Si tu le fais à la main parmi tous les sites qui fournissent des informations, j'aime bien w3schools, j'ai tiré en grande partis le code suivant de ce site

<!DOCTYPE html> 
<html><head>
<title>PROGRAMMATION OPE</title>
</head>
<style>
    /* CSS Normal */
body {
   font-size: medium;
}

@media (max-width: 1024px) {
   /* CSS appliqué aux petits écrans */
   body {
      font-size: xx-large;
   }
}
.blueBloc {
    display: inline-block;
    vertical-align: middle;
    border-style: solid;
    border-width: 1px;
    border-color: black;
    background-color: #2196F3;
    padding: 5px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 36px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(36px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

</style>
<body bgcolor = '#FFFFFF' style="text-align: center;">
<h1>TEST</h1><form>
    <span style="display: inline-block;vertical-align: middle;">
        <span class="blueBloc">CHRONO</span>
        <label style="display: inline-block;vertical-align: middle;" class="switch">
            <input type="checkbox">
            <span class="slider round"></span>
        </label>
        <span class="blueBloc">HORLOGE</span>
    </span>

<h2>TEST</h2>
<h2>Exemple valeur de la variable: 0</h2>
<p style="text-align: center;">0</p>
<button name="BUTTON0" button style="color:green" value="ON" type="submit">+1</button>
<button name="BUTTON1" button style="color:green" value="ON" type="submit">-1</button>
</form></body></html>