index.html

<!--
    Auteurs: Yannis, Dorian
    Date-debut: 19/05/2023
    Date-fin: ...
-->

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css" type="text/css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="icon" type="image/png" href="assets/flame-removebg.png">
        <script src="src/scripts/script.js"></script>
        <title>ThemoNetControl</title>
    </head>

    <body>

        <div class="boite">

            <a href="index.html" class="logo"><img src="assets/logoTNC-removebg-preview.png" alt="Logo T.N.C"></a>
            
            <button id="bouton-allumer" onclick="connectToArduino()">allumer</button>
            <button id="bouton-eteindre">eteindre</button>
            

            <div  class="cadran">
                <div class="point-central"></div>
                <div class="cache-centre-cadran"></div>
                <div class="cache-pied-cadran"></div>
                <div class="boite-aiguille-cadran">
                    <div class="cache-aiguille-cadran rotation-aiguille-0">
                        <div class="aiguille-cadran"></div> 
                    </div>
                </div>
                <div class="graduation-cadran graduation-cadran-12"></div>
                <div class="graduation-cadran graduation-cadran-13"></div>
                <div class="graduation-cadran graduation-cadran-14"></div>
                <div class="graduation-cadran graduation-cadran-15"></div>
                <div class="graduation-cadran graduation-cadran-16"></div>
                <div class="graduation-cadran graduation-cadran-17"></div>
                <div class="graduation-cadran graduation-cadran-18"></div>
                <div class="graduation-cadran graduation-cadran-19"></div>
                <div class="graduation-cadran graduation-cadran-20"></div>
                <div class="graduation-cadran graduation-cadran-21"></div>
                <div class="graduation-cadran graduation-cadran-22"></div>
                <div class="graduation-cadran graduation-cadran-23"></div>
                <div class="graduation-cadran graduation-cadran-24"></div>
                <div class="graduation-cadran graduation-cadran-25"></div>
                <div class="graduation-cadran graduation-cadran-26"></div>
                <div class="graduation-cadran graduation-cadran-27"></div>
                <div class="graduation-cadran graduation-cadran-28"></div> 
                <div class="graduation-cadran graduation-cadran-29"></div>
                <div class="graduation-cadran graduation-cadran-30"></div>

                <br><br><br><br><br><br>
                <br><br><br><br><br><br>
                <br><br><br><br><br><br>   
                
                <label for="temperature" size="5cm">T&deg;C :</label><br> 
                <input type="number" id="temperature" maxlength="4" placeholder="0&deg;C" min="12" max="30">

                <button id="boutonValider">Appliquer</button>
                
                <div class="visuel-humidite"></div>
            </div>
             
        </div>     

    </body>
</html>