{{ block content }}

<div class="card">
    <div class="card-body">
        <h3>Welcome to the Study</h3>

        <p>Thank you for participating in this research study, which will take about <b>10 minutes</b>.</p>

        <p>Before we begin, please enter your name and class below.</p>

        {{ formfields }}

        {{ next_button }}
    </div>
</div>

<style>
    .card {
        margin-top: 30px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .card-body {
        padding: 30px;
    }

    .info-card {
        background-color: #f8f9fa;
        padding: 20px;
        border-radius: 5px;
        border-left: 4px solid #007bff;
        margin-bottom: 25px;
    }

    .info-card ul {
        margin-bottom: 15px;
    }

    .info-card li {
        margin-bottom: 10px;
    }
</style>

{{ endblock }}