{{ extends "global/Page.html" }}

{{ block title }}
    Welcome to the Public Goods Game
{{ endblock }}

{{ block content }}

<style>
    .instructions-container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
    }
    .dotted-line {
        border-top: 1px dotted #ccc;
        margin: 20px 0;
    }
    .card {
        background-color: #f8f9fa;
        margin: 20px 0;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
</style>

<hr class="dotted-line" />

<div class="instructions-container">

    <div class="card">

        {% if is_leader %}
            {% include 'public_goods_leader_variable/leader_intro.html' %}
        {% else %}
            {% include 'public_goods_leader_variable/member_intro.html' %}
        {% endif %}

    </div>

    <div class="card" style="background-color: #e8f5e9; border-left: 4px solid #4caf50;">
        <p style="margin: 0; font-size: 16px; color: #2e7d32;">
            <strong>Ready to begin?</strong> When you click the button below, you'll wait for all other participants to be ready. Once everyone is ready, the round will begin and timers will start.
        </p>
    </div>

</div>

{{ next_button label='I\'m Ready to Start' }}

{{ endblock }}