48 lines
1.8 KiB
HTML
48 lines
1.8 KiB
HTML
{% 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 %}
|
|
|
|
|