<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Couleurs en Binaire</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            text-align: center;
        }
        #colorBox {
            width: 100%;
            height: 200px;
            margin: 20px 0;
            border: 2px solid #000;
        }
        .input-group {
            margin-bottom: 20px;
        }
        input[type="number"] {
            width: 60px;
            padding: 5px;
            font-size: 1rem;
            text-align: center;
        }
        .binary-output {
            font-family: monospace;
            font-size: 1rem;
        }
        #binaryCode {
            margin-top: 20px;
            font-family: monospace;
            font-size: 1.2rem;
            background-color: #f0f0f0;
            padding: 10px;
            display: inline-block;
            border-radius: 5px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div style="position: absolute; top: 20px; left: 10%; padding: 30px 20px; background-color: transparent;">
        <a href="https://sciences-tec.fr/cours"><img src="https://sciences-tec.fr/logo-nq8.png" alt="Logo Sciences-tec" style="max-width: 400px; height: auto;"></a>
    </div>
    <h1>Couleurs et Binaire</h1>
    <p>Entrez des valeurs de 0 à 255 pour rouge, vert et bleu :</p>

    <div class="input-group">
        <label for="red">Rouge :</label>
        <input type="number" id="red" min="0" max="255" value="0">
        <span class="binary-output" id="redBinary">00000000</span>
    </div>

    <div class="input-group">
        <label for="green">Vert :</label>
        <input type="number" id="green" min="0" max="255" value="0">
        <span class="binary-output" id="greenBinary">00000000</span>
    </div>

    <div class="input-group">
        <label for="blue">Bleu :</label>
        <input type="number" id="blue" min="0" max="255" value="0">
        <span class="binary-output" id="blueBinary">00000000</span>
    </div>

    <div id="colorBox"></div>

    <p>Pour un ordinateur, cette couleur est :</p>
    <div id="binaryCode">00000000 00000000 00000000</div>

    <script>
        const redInput = document.getElementById('red');
        const greenInput = document.getElementById('green');
        const blueInput = document.getElementById('blue');
        const redBinary = document.getElementById('redBinary');
        const greenBinary = document.getElementById('greenBinary');
        const blueBinary = document.getElementById('blueBinary');
        const colorBox = document.getElementById('colorBox');
        const binaryCode = document.getElementById('binaryCode');

        function updateColor() {
            // Récupérer les valeurs des entrées
            const red = parseInt(redInput.value, 10) || 0;
            const green = parseInt(greenInput.value, 10) || 0;
            const blue = parseInt(blueInput.value, 10) || 0;

            // Convertir en binaire avec un remplissage à 8 bits
            const redBinaryValue = red.toString(2).padStart(8, '0');
            const greenBinaryValue = green.toString(2).padStart(8, '0');
            const blueBinaryValue = blue.toString(2).padStart(8, '0');

            // Afficher les valeurs binaires individuelles
            redBinary.textContent = redBinaryValue;
            greenBinary.textContent = greenBinaryValue;
            blueBinary.textContent = blueBinaryValue;

            // Afficher le code binaire complet
            binaryCode.textContent = `${redBinaryValue} ${greenBinaryValue} ${blueBinaryValue}`;

            // Mettre à jour la couleur de fond
            colorBox.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;
        }

        // Ajouter des événements pour mettre à jour la couleur et le binaire
        redInput.addEventListener('input', updateColor);
        greenInput.addEventListener('input', updateColor);
        blueInput.addEventListener('input', updateColor);

        // Initialisation
        updateColor();
    </script>
</body>
</html>