play.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><text x='0' y='25' font-size='25'>🔒</text></svg>" type="image/svg+xml">
    <link rel="stylesheet" href="style.css">
    <title>Play Encoded !</title>
</head>
<body>
    <h1>Play Encoded</h1>
    <h2>Two main goals to win:</h2>
    <table border="1">
        <tr>
            <td id="demitable">
                Find the key !
            </td>
            <td id="demitable">
                <message id="messageToDecode">You're not done yet ! Find the key to unlock the hidden message !</message> <!-- HERE FIND A SOLUTION --> 
            </td>
        </tr>
        <tr>
            <td>
                Submit words in the field and see how they look when they are encoded ! If you submit the key, 
                then you will unlock the hidden message and be able to DECODE it !
                <form onsubmit="playEncode(event)">
                    <label for="textToEncode">Enter your text to encode or the key if you found it:</label>
                    <input type="text" id="textToEncode" placeholder="Can write anything...">
                    <br>
                    <button type="submit">Encode !</button>
                    <p id="submitHistory"></p>
                </form>
            </td>
            <td>
                <p>You only have one attempt to decode the message, after that, it will be revealed ! 
                    So watch carefully what you're submiting !</p>
                <form onsubmit="playDecode(event)">
                    <label for="textToDecode">Enter your text to decode:</label>
                    <input type="text" id="textToDecode" placeholder="Only one attempt...">
                    <br>
                    <button type="submit">Decode !</button> <!-- Trouver comment modifier la disabilité du bouton quand on trouve la clé -->
                    <p id="motDeLaFin"></p>
                </form>
            </td>
        </tr>
        <tr>
            
        </tr>
    </table>
    <br>
    <button onclick="window.location.href='index.html'" id="home">Return home ?</button> <button onclick="window.location.href='encode_/free_encode.html'">Want to encode messages ?</button>

    <script src="script.js"></script>
</body>
</html>

<!--ICI-->