<!DOCTYPE html>

<html lang="fr">

<head>
    <meta charset="UTF-8">
    <title>anti-sutom</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:ital@1&display=swap" rel="stylesheet">
    <meta name="google-site-verification" content="ciXzhe6TAteeESfeLQKdvIMKB0-9ASE21aFz2wLMHxE" />
    <link rel="icon" type="image/icon" href="img/favicon.ico" />
</head>

<body>

    <div id="titre">
        <h1>ANTI-SUTOM
        </h1>
    </div>

    <div id="texte">
        <p>
            Bonjour et bienvenue sur ANTI-SUTOM, un site créé par un simple étudiant pour pouvoir trouver plus facilement un mot dans le jeu du motus en ligne.
        </p>
    </div>



    <form id="my_form" action="/poursuite" method="post">
        <div id="centrer">

            <div id="longueur_mot">
                <label for="nbLettreChoice">la longueur du mot :</label>
                <input type="number" list="nbLettre" id="nbLettreChoice" name="nbLettreChoice" required pattern="[1-9]+" required>



                <datalist id="nbLettre">
                    <option value="2"><option value="3"><option value="4"><option value="5"><option value="6"><option value="7"><option value="8"><option value="9"><option value="10"><option value="11">
                    <option value="12"><option value="13"><option value="14"><option value="15"><option value="16"><option value="17"><option value="18">
                </datalist>
            </div>


            <div id="premiereLettre">
                <label for="firstLettreChoice">les premières lettres :</label>
                <input type="text" list="firstLettre" id="firstLettreChoice" name="firstLettreChoice" required pattern="[A-Za-z]+" required>

                <datalist id="firstLettre">
                    <option value="a"><option value="b"><option value="c"><option value="d"><option value="e"><option value="f"><option value="g"><option value="h"><option value="i"><option value="j"><option value="k"><option value="l"><option value="m"><option value="n"><option value="o"><option value="p">
                    <option value="q"><option value="r"><option value="s"><option value="t"><option value="u"><option value="v"><option value="w"><option value="x"><option value="y"><option value="z">
                </datalist>
            </div>
        </div>
    

        <div id="firstSearch">
            <div class="wrapper">
                <a href="/"><button type="submit" class="bn632-hover bn21">chercher</button></a>
            </div>
        </div>

</form>

</body>

</html>