<!--BIENVENUE-->

<section id="home"
    class="relative overflow-hidden z-10 pt-[120px] pb-[110px] md:pt-[150px] md:pb-[120px] xl:pt-[180px] xl:pb-[160px] 2xl:pt-[210px] 2xl:pb-[200px]">
    <div class="container">
        <div class="flex flex-wrap mx-[-16px]">
            <div class="w-full px-4">
                <div class="mx-auto max-w-[570px] text-center wow fadeInUp" data-wow-delay=".2s">
                    <h1
                        class="text-black dark:text-white font-bold text-3xl sm:text-4xl md:text-5xl leading-tight sm:leading-tight md:leading-tight mb-8">
                        Comparateur d'articles Wikipédia
                    </h1>
                    <img src="assets/images/wikipedia.png" alt="logo wikipedia" width="150"
                        class="mx-auto mb-8 dark:hidden" />
                    <img src="assets/images/wikipedia-dark.png" alt="logo wikipedia" width="150"
                        class="mx-auto mb-8 hidden dark:block" />
                    <p
                        class="font-lg text-lg md:text-xl leading-relaxed md:leading-relaxed text-body-color dark:text-white dark:opacity-90 mb-12">
                        Bienvenue sur notre outil de comparaison d'articles Wikipédia ! Cet outil permet de comparer les
                        données contenues dans les infoboîtes ainsi que les statistiques liées aux utilisateurs tels que
                        les
                        vues et le nombre de contributions.
                    </p>
                    <div class="flex items-center justify-center">
                        <a href="/#comparaison" id="letzgooo"
                            class="text-base font-semibold text-white bg-primary py-4 px-8 hover:bg-opacity-80 mx-2 rounded-md transition duration-300 ease-in-out">
                            C'est parti !
                        </a>
                        <!--
                        <a href="/#savoir-plus"
                            class="text-base font-semibold text-black bg-black bg-opacity-10 dark:text-white dark:bg-white dark:bg-opacity-10 py-4 px-8 hover:bg-opacity-20 dark:hover:bg-opacity-20 mx-2 rounded-md transition duration-300 ease-in-out">
                            En savoir plus
                        </a>
                        -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<!--COMPARAISON DES SITES-->

<section id="comparaison" class="pt-[120px] overflow-hidden">

    <!--ENVOYER LA COMPARAISON-->
    <div class="container">
        <div class="flex flex-wrap mx-[-16px]">
            <div class="w-full px-4">
                <div class="bg-dark bg-opacity-15 dark:text-white dark:bg-dark rounded-md p-11 mb-4 lg:mb-5 sm:p-[55px] lg:p-11 xl:p-[55px] wow fadeInUp"
                    data-wow-delay=".15s">

                    <h2
                        class="font-bold text-white dark:text-white text-2xl sm:text-3xl lg:text-2xl xl:text-3xl mb-6 flex items-center justify-center">
                        Articles à Comparer
                    </h2>
                    <p class="text-body-color text-base font-medium mb-16 flex items-center justify-center">
                        Completer les champs suivant :
                    </p>

                    <!--FORMULAIRE-->
                    <form id="formulaire-comp" method="POST" autocomplete="off">
                        <div class="flex flex-wrap mx-[-16px] p-10">
                            <div class="w-full md:w-1/2 px-4">
                                <div class="mb-8">
                                    <label for="name" class="block text-sm font-medium text-white dark:text-white mb-3">
                                        Premier article <sup class="text-body-color">*</sup>
                                    </label>

                                    <input type="text" name="articleTitle1" id="articleTitle1" required="required"
                                        autocomplete="new-password" placeholder="Rechercher un article..."
                                        class="w-full border border-transparent bg-primary bg-opacity-10 dark:bg-[#242B51] rounded-md shadow-one dark:shadow-signUp py-3 px-6 text-body-color text-base placeholder-body-color outline-none focus-visible:shadow-none focus:border-primary" />

                                </div>
                            </div>
                            <div class="w-full mb-8 md:w-1/2 px-4">
                                <div class="mb-8 ">
                                    <label for="text" class="block text-sm font-medium text-white dark:text-white mb-3">
                                        Deuxième article <sup class="text-body-color">*</sup>
                                    </label>
                                    <input type="text" name="articleTitle2" id="articleTitle2" required="required"
                                        autocomplete="new-password" placeholder="Rechercher un article..."
                                        class="w-full border border-transparent bg-primary bg-opacity-10 dark:bg-[#242B51] rounded-md shadow-one dark:shadow-signUp py-3 px-6 text-body-color text-base placeholder-body-color outline-none focus-visible:shadow-none focus:border-primary " />
                                </div>
                            </div>

                            <div class="w-full px-4  flex items-center justify-center">
                                <button type="submit"
                                    class="text-base mb-16 font-medium text-white bg-primary py-4 px-9 hover:bg-opacity-80 hover:shadow-signUp rounded-md transition duration-300 ease-in-out">
                                    Comparer
                                </button>
                            </div>
                            <sup class="text-body-color">* champs obligatoires</sup>
                        </div>
                    </form>

                </div>
            </div>

        </div>
    </div>

    </div>

    <!--RESULTAT RECHERCHE-->
    <section id="resultat" class="pt-[120px] pb-[120px]">
        <div class="container">
            <div class="flex flex-wrap mx-[-16px] justify-center">

                <!--ANNIMATION CHAREMENT-->
                <div id="loading" class="hidden">
                    <div class="loadingio-spinner-dual-ring-4e7xs5jqq4d">
                        <div class="ldio-jzq166pp4c">
                            <div></div>
                            <div>
                                <div></div>
                            </div>
                        </div>
                    </div>
                </div>

                <!--RESULTAT INTROUVABLE-->
                <div id="articleIntrouvable"
                    class="hidden font-lg text-lg md:text-xl leading-relaxed md:leading-relaxed text-body-color dark:text-white dark:opacity-90 mb-12 text-center">
                </div>





                <!--Article 1-->

                <div id="articleContainer1" class="w-full md:w-2/3 lg:w-1/2 xl:w-2/4 px-4 hidden">
                    <div class="relative bg-dark bg-opacity-15 text-white dark:text-white dark:bg-dark shadow-one rounded-md overflow-hidden mb-10 wow fadeInUp"
                        data-wow-delay=".1s">

                        <div class="p-6 sm:p-8 md:py-8 md:px-6 lg:p-8 xl:py-8 xl:px-5 2xl:p-8 mb-12 pb-4">
                            <div
                                class="mb-12 pb-8 border-b border-body-color border-opacity-5 dark:border-white dark:border-opacity-10">
                                <h3 class="font-bold text-white dark:text-white text-xl sm:text-2xl block mb-6">
                                    <span id="articleInfo1Title"></span>
                                </h3>
                                <p id="articleInfo1extract" class="pb-8"></p>

                                <div class="flex items-center justify-center">
                                    <a id="articleInfo1url" href="#" target="_blank"
                                        class="text-base font-semibold bg-opacity-10 text-white bg-white py-4 px-8 hover:bg-opacity-20 mx-2 rounded-md transition duration-300 ease-in-out">
                                        Voir l'article (wiki)
                                    </a>
                                </div>
                            </div>



                            <table>
                                <!-- Infobox -->
                                <tr>
                                    <th style="background-color: #151b20; text-align:center; padding: 12px;"
                                        colspan="2">INFOBOX</th>
                                </tr>

                                <tbody id="infoboxcontainer1"></tbody>

                                <!-- Statistiques -->
                                <tr>
                                    <th style="background-color: #151b20 ; text-align:center; padding: 12px;"
                                        colspan="2">STATISTIQUES</th>
                                </tr>
                                <tr>
                                    <th>Dernière modification</th>
                                    <td><span id="articleInfo1lastEdit"></span></td>
                                </tr>
                                <tr>
                                    <th>Nombre de révisions</th>
                                    <td><span id="articleInfo1numRevisions"></span></td>
                                </tr>
                                <tr>
                                    <th>Taille de la page</th>
                                    <td><span id="articleInfo1pageSize"></span> octets</td>
                                </tr>
                                <tr>
                                    <th>Auteur de la première révision</th>
                                    <td><span id="articleInfo1firstRevisionUser"></span></td>
                                </tr>
                                <tr>
                                    <th>ID de la dernière révision</th>
                                    <td><span id="articleInfo1latestRevisionId"></span></td>
                                </tr>
                                <tr>
                                    <th>ID de la page</th>
                                    <td><span id="articleInfo1pageId"></span></td>
                                </tr>
                                <tr>
                                    <th>Dernière version</th>
                                    <td><span id="articleInfo1latestVersion"></span></td>
                                </tr>
                                <tr>
                                    <th>Nombre de mots</th>
                                    <td><span id="articleInfo1wordCount"></span></td>
                                </tr>
                                <tr>
                                    <th>Nombre de caractères</th>
                                    <td><span id="articleInfo1charCount"></span></td>
                                </tr>
                                <tr>
                                    <th>Dernier contributeur</th>
                                    <td><span id="articleInfo1lastContributor"></span></td>
                                </tr>
                            </table>

                        </div>
                        <a id="articleInfo1image" href="#" class="w-full  block relative" target="_blank">
                            <img id="articleInfo1image" src="#" alt="image" class="w-full" />
                        </a>
                    </div>
                </div>

                <!--Article 2-->

                <div id="articleContainer2" class="w-full md:w-2/3 lg:w-1/2 xl:w-2/4 px-4 hidden">
                    <div class="relative bg-dark bg-opacity-15 text-white dark:text-white dark:bg-dark shadow-one rounded-md overflow-hidden mb-10 wow fadeInUp"
                        data-wow-delay=".1s">

                        <div class="p-6 sm:p-8 md:py-8 md:px-6 lg:p-8 xl:py-8 xl:px-5 2xl:p-8 mb-12 pb-4">
                            <div
                                class="mb-12 pb-8 border-b border-body-color border-opacity-5 dark:border-white dark:border-opacity-10">
                                <h3>
                                    <h3 class="font-bold text-white dark:text-white text-xl sm:text-2xl block mb-6">
                                        <span id="articleInfo2Title"></span>
                                    </h3>
                                </h3>
                                <p id="articleInfo2extract" class="pb-8"></p>
                                <div class="flex items-center justify-center">
                                    <a id="articleInfo2url" href="#" target="_blank"
                                        class="text-base font-semibold bg-opacity-10 text-white bg-white py-4 px-8 hover:bg-opacity-20 mx-2 rounded-md transition duration-300 ease-in-out">
                                        Voir l'article (wiki)
                                    </a>
                                </div>

                            </div>



                            <table>
                                <!-- Infobox -->
                                <tr>
                                    <th style="background-color: #151b20; text-align:center; padding: 12px;"
                                        colspan="2">INFOBOX</th>
                                </tr>

                                <tbody id="infoboxcontainer2"></tbody>

                                <!-- Statistiques -->
                                <tr>
                                    <th style="background-color: #151b20 ; text-align:center; padding: 12px;"
                                        colspan="2">STATISTIQUES</th>
                                </tr>
                                <tr>
                                    <th>Dernière modification</th>
                                    <td><span id="articleInfo2lastEdit"></span></td>
                                </tr>
                                <tr>
                                    <th>Nombre de révisions</th>
                                    <td><span id="articleInfo2numRevisions"></span></td>
                                </tr>
                                <tr>
                                    <th>Taille de la page</th>
                                    <td><span id="articleInfo2pageSize"></span> octets</td>
                                </tr>
                                <tr>
                                    <th>Auteur de la première révision</th>
                                    <td><span id="articleInfo2firstRevisionUser"></span></td>
                                </tr>
                                <tr>
                                    <th>ID de la dernière révision</th>
                                    <td><span id="articleInfo2latestRevisionId"></span></td>
                                </tr>
                                <tr>
                                    <th>ID de la page</th>
                                    <td><span id="articleInfo2pageId"></span></td>
                                </tr>
                                <tr>
                                    <th>Dernière version</th>
                                    <td><span id="articleInfo2latestVersion"></span></td>
                                </tr>
                                <tr>
                                    <th>Nombre de mots</th>
                                    <td><span id="articleInfo2wordCount"></span></td>
                                </tr>
                                <tr>
                                    <th>Nombre de caractères</th>
                                    <td><span id="articleInfo2charCount"></span></td>
                                </tr>
                                <tr>
                                    <th>Dernier contributeur</th>
                                    <td><span id="articleInfo2lastContributor"></span></td>
                                </tr>
                            </table>



                        </div>
                        <a id="articleInfo2image" href="#" class="w-full  block relative" target="_blank">
                            <img id="articleInfo2image" src="#" alt="image" class="w-full" />
                        </a>
                    </div>
                </div>

            </div>
        </div>
    </section>

</section>

<!--EN SAVOIR PLUS-->

<!--
<section id="savoir-plus" class="pt-[150px] pb-[120px]">
    <div class="container">
        <div class="flex flex-wrap justify-center mx-[-16px]">
            <div class="w-full lg:w-8/12 px-4">
                <div>
                    <h2
                        class="font-bold text-black dark:text-white text-3xl sm:text-4xl leading-tight sm:leading-tight mb-12 pb-4 border-b border-body-color border-opacity-5 dark:border-white dark:border-opacity-10">
                        En savoir plus
                    </h2>

                    <div>
                        <p
                            class="font-medium text-body-color text-base sm:text-lg lg:text-base xl:text-lg sm:leading-relaxed lg:leading-relaxed xl:leading-relaxed leading-relaxed mb-10">
                            Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                            nulla pariatur.
                            Excepteur sint occaecat cupidatat.
                        </p>
                        <div class="w-full rounded overflow-hidden mb-10">
                            <img src="assets/images/blog-details-02.jpg" alt="image"
                                class="w-full h-full object-cover object-center" />
                        </div>
                        <p
                            class="font-medium text-body-color text-base sm:text-lg lg:text-base xl:text-lg sm:leading-relaxed lg:leading-relaxed xl:leading-relaxed leading-relaxed mb-8">
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                            incididunt ut labore et
                            dolore magna aliqua. Quis enim lobortis scelerisque fermentum. Neque sodales ut
                            etiam sit amet. Ligula ullamcorper
                            <strong class="text-primary dark:text-white"> malesuada </strong>
                            proin libero nunc consequat interdum varius. Quam pellentesque nec nam aliquam sem et
                            tortor consequat.
                            Pellentesque adipiscing commodo elit at imperdiet.
                        </p>
                        <p
                            class="font-medium text-body-color text-base sm:text-lg lg:text-base xl:text-lg sm:leading-relaxed lg:leading-relaxed xl:leading-relaxed leading-relaxed mb-10">
                            Semper auctor neque vitae tempus quam pellentesque nec.
                            <span class="text-primary dark:text-white underline"> Amet dictum sit amet justo </span>
                            donec enim diam. Varius sit amet mattis vulputate enim nulla aliquet porttitor. Odio
                            pellentesque diam
                            volutpat commodo sed.
                        </p>
                        <h3
                            class="font-bold text-black dark:text-white font-xl sm:text-2xl lg:text-xl xl:text-2xl leading-tight sm:leading-tight lg:leading-tight xl:leading-tight mb-10">
                            Digital marketplace for Ui/Ux designers.
                        </h3>
                        <p
                            class="font-medium text-body-color text-base sm:text-lg lg:text-base xl:text-lg sm:leading-relaxed lg:leading-relaxed xl:leading-relaxed leading-relaxed mb-10">
                            consectetur adipiscing elit in voluptate velit esse cillum dolore eu fugiat nulla
                            pariatur. Excepteur
                            sint occaecat mattis vulputate cupidatat.
                        </p>
                        <ul class="list-disc list-inside text-body-color mb-10">
                            <li class="font-medium text-body-color text-base sm:text-lg lg:text-base xl:text-lg mb-2">
                                Consectetur
                                adipiscing elit in voluptate velit.</li>
                            <li class="font-medium text-body-color text-base sm:text-lg lg:text-base xl:text-lg mb-2">
                                Mattis
                                vulputate cupidatat.</li>
                            <li class="font-medium text-body-color text-base sm:text-lg lg:text-base xl:text-lg mb-2">
                                Vulputate enim
                                nulla aliquet porttitor odio pellentesque</li>
                            <li class="font-medium text-body-color text-base sm:text-lg lg:text-base xl:text-lg mb-2">
                                Ligula
                                ullamcorper malesuada proin</li>
                        </ul>
                        <div
                            class="rounded-md overflow-hidden p-8 md:p-9 lg:p-8 xl:p-9 bg-black bg-opacity-10 dark:text-white dark:bg-dark relative z-10 mb-10">
                            <p class="text-center text-base text-body-color italic font-medium">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod incididunt
                                utionals labore et
                                dolore magna aliqua. Quis lobortis scelerisque fermentum, The Neque ut etiam
                                sit amet.
                            </p>
                        </div>
                        <p
                            class="font-medium text-body-color text-base sm:text-lg lg:text-base xl:text-lg sm:leading-relaxed lg:leading-relaxed xl:leading-relaxed leading-relaxed mb-10">
                            consectetur adipiscing elit in voluptate velit esse cillum dolore eu fugiat nulla
                            pariatur. Excepteur
                            sint occaecat mattis vulputate cupidatat.
                        </p>


                        <div
                            class="sm:flex items-center justify-between py-6 border-t border-body-color border-opacity-5 dark:border-white dark:border-opacity-10">
                            <div class="mb-5">
                                <h5 class="font-medium text-body-color text-sm mb-3">
                                    Nous contacter :
                                </h5>
                                <div class="flex items-center">
                                    <a href="mailto:contact@dariow.fr" target="_blank"
                                        class="inline-flex items-center justify-center py-2 px-4 mr-4 rounded-md text-black bg-black bg-opacity-10 dark:text-white dark:bg-white dark:bg-opacity-10 hover:bg-opacity-20 dark:hover:bg-opacity-20 transition duration-300 ease-in-out">
                                        Dario WEINBERGER
                                    </a>

                                    <a href="mailto:raphael.alexis.payet@gmail.com"
                                        class="inline-flex items-center justify-center py-2 px-4 mr-4 rounded-md text-black bg-black bg-opacity-10 dark:text-white dark:bg-white dark:bg-opacity-10 hover:bg-opacity-20 dark:hover:bg-opacity-20 transition duration-300 ease-in-out">
                                        Raphael PAYET
                                    </a>
                                </div>
                            </div>
                            <div class="mb-5">
                                <h5 class="font-medium text-body-color text-sm sm:text-right mb-3">
                                    Code source du projet :
                                </h5>
                                <div class="flex items-center sm:justify-end">
                                    <a href="#gitea" target="_blank"
                                        class="inline-flex items-center justify-center w-9 h-9 sm:ml-3 rounded-md text-black bg-black bg-opacity-10 dark:text-white dark:bg-white dark:bg-opacity-10 hover:bg-opacity-20 dark:hover:bg-opacity-20 transition duration-300 ease-in-out">
                                        <svg version="1.1" id="main_outline" xmlns="http://www.w3.org/2000/svg"
                                            xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
                                            viewBox="0 0 640 640"
                                            style="enable-background:new 0 0 640 640; width: 28px;"
                                            xml:space="preserve">
                                            <g>
                                                <path id="teabag" style="fill:#FFFFFF"
                                                    d="M395.9,484.2l-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5,21.2-17.9,33.8-11.8   c17.2,8.3,27.1,13,27.1,13l-0.1-109.2l16.7-0.1l0.1,117.1c0,0,57.4,24.2,83.1,40.1c3.7,2.3,10.2,6.8,12.9,14.4   c2.1,6.1,2,13.1-1,19.3l-61,126.9C423.6,484.9,408.4,490.3,395.9,484.2z" />
                                                <g>
                                                    <g>
                                                        <path style="fill:#609926"
                                                            d="M622.7,149.8c-4.1-4.1-9.6-4-9.6-4s-117.2,6.6-177.9,8c-13.3,0.3-26.5,0.6-39.6,0.7c0,39.1,0,78.2,0,117.2     c-5.5-2.6-11.1-5.3-16.6-7.9c0-36.4-0.1-109.2-0.1-109.2c-29,0.4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5     c-9.8-0.6-22.5-2.1-39,1.5c-8.7,1.8-33.5,7.4-53.8,26.9C-4.9,212.4,6.6,276.2,8,285.8c1.7,11.7,6.9,44.2,31.7,72.5     c45.8,56.1,144.4,54.8,144.4,54.8s12.1,28.9,30.6,55.5c25,33.1,50.7,58.9,75.7,62c63,0,188.9-0.1,188.9-0.1s12,0.1,28.3-10.3     c14-8.5,26.5-23.4,26.5-23.4s12.9-13.8,30.9-45.3c5.5-9.7,10.1-19.1,14.1-28c0,0,55.2-117.1,55.2-231.1     C633.2,157.9,624.7,151.8,622.7,149.8z M125.6,353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6,321.8,60,295.4     c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5,38.5-30c13.8-3.7,31-3.1,31-3.1s7.1,59.4,15.7,94.2c7.2,29.2,24.8,77.7,24.8,77.7     S142.5,359.9,125.6,353.9z M425.9,461.5c0,0-6.1,14.5-19.6,15.4c-5.8,0.4-10.3-1.2-10.3-1.2s-0.3-0.1-5.3-2.1l-112.9-55     c0,0-10.9-5.7-12.8-15.6c-2.2-8.1,2.7-18.1,2.7-18.1L322,273c0,0,4.8-9.7,12.2-13c0.6-0.3,2.3-1,4.5-1.5c8.1-2.1,18,2.8,18,2.8     l110.7,53.7c0,0,12.6,5.7,15.3,16.2c1.9,7.4-0.5,14-1.8,17.2C474.6,363.8,425.9,461.5,425.9,461.5z" />
                                                        <path style="fill:#609926"
                                                            d="M326.8,380.1c-8.2,0.1-15.4,5.8-17.3,13.8c-1.9,8,2.0,16.3,9.1,20c7.7,4,17.5,1.8,22.7-5.4     c5.1-7.1,4.3-16.9-1.8-23.1l24-49.1c1.5,0.1,3.7,0.2,6.2-0.5c4.1-0.9,7.1-3.6,7.1-3.6c4.2,1.8,8.6,3.8,13.2,6.1     c4.8,2.4,9.3,4.9,13.4,7.3c0.9,0.5,1.8,1.1,2.8,1.9c1.6,1.3,3.4,3.1,4.7,5.5c1.9,5.5-1.9,14.9-1.9,14.9     c-2.3,7.6-18.4,40.6-18.4,40.6c-8.1-0.2-15.3,5-17.7,12.5c-2.6,8.1,1.1,17.3,8.9,21.3c7.8,4,17.4,1.7,22.5-5.3     c5.0-6.8,4.6-16.3-1.1-22.6c1.9-3.7,3.7-7.4,5.6-11.3c5-10.4,13.5-30.4,13.5-30.4c0.9-1.7,5.7-10.3,2.7-21.3     c-2.5-11.4-12.6-16.7-12.6-16.7c-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3c4.7-9.7,9.4-19.3,14.1-29     c-4.1-2-8.1-4-12.2-6.1c-4.8,9.8-9.7,19.7-14.5,29.5c-6.7-0.1-12.9,3.5-16.1,9.4c-3.4,6.3-2.7,14.1,1.9,19.8     C343.2,346.5,335,363.3,326.8,380.1z" />
                                                    </g>
                                                </g>
                                            </g>
                                        </svg>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
</section>
-->