{% extends "layout.html" %}

{% block body %}

    <!-- Option to extend rules -->
    <div class="content__rules">
        <div class="info">
            <button id="rules__btn" class="" onclick="showRules()">
                <i class="fa fa-info icon-info-sign" aria-hidden="true"></i>
                <span class="extra-info">
                CHECK OUT RULES
            </span>
            </button>
        </div>
    </div>

    <!-- Welcome message -->
    <div class="content__container index__container">
        <div class="screen-alert">
            <div id="message">
                <div class="" role="alert">
                    Welcome to the game!
                </div>
            </div>
        </div>
        <h3 id="index__slogan" class="mt-4 mb-3 explanations">Can you detect the common object quickly?</h3>
        <h4 id="index__slogan" class="mt-4 mb-3 explanations">Check out the rules on the top left info button!</h4>

        <form action="/choose-game", method="post">
            <button class="content__btn">PLay the game !</button>
        </form>
    </div>

    <!-- Explanation of rules -->
    <div id="rules__text" class="content__container index__container mt-3 mb-5" style="display:none;">
        <div>
            <img class="my-5 explanations__img" src="" alt="Rule 1 ..." style="width:50%">
            <p class="explanations">Choose the time of the part..</p>
            <img class="my-5 explanations__img" src="" alt="Rule 2 ..." style="width:50%">
            <p class="explanations">Click on the top card to detect the commun object with the bottom card..</p>
            <img class="my-5 explanations__img" src="" alt="Rule 3 ..." style="width:50%">
            <p class="explanations">------------------</p>
        </div>
    </div>

{% endblock %}