{% load static %}

{% block content %}
<link rel="stylesheet" href="{% static 'venturini_pg/mystyle.css' %}">

<div style="
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-top: -10px;
    margin-bottom: 25px;
">
    {% if is_stem %}
        <img src="{% static 'venturini_pg/Calculator.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/DNA.png' %}" style="height: 100px;">
    {% else %}
        <img src="{% static 'venturini_pg/iPhone_16_Wallpaper3.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/Samsung_Galaxy_S24_Wallpaper1.png' %}" style="height: 100px;">
    {% endif %}
</div>


<h2 style="text-align:center; color:#800000; font-weight:800; margin-top:0;">
    Istruzioni Seconda Attività
</h2>

<div style="max-width:800px; margin:auto; margin-top:20px; font-size:20px; line-height:1.45;">

    <p>
     All’inizio di questa seconda attività dell’esperimento sarai abbinato/a ad altri partecipanti. <br>
        Ogni gruppo sarà formato <strong>casualmente</strong> tra i partecipanti presenti oggi e la sua composizione
        rimarrà invariata sia per la seconda che per la terza parte dell'esperimento.
    </p>
<p>
    La dimensione del gruppo può variare: il tuo gruppo sarà composto da <strong>3</strong>, <strong>4</strong> o <strong>5
partecipanti</strong>.
</p>
    <p>
        Verrai informato della composizione numerica del tuo gruppo ma non conoscerai mai l’identità degli altri membri del tuo gruppo né quella degli altri
partecipanti, né durante l’esperimento né alla fine dello stesso. <br>
        Ciascun membro del tuo gruppo riceverà le stesse istruzioni e vedrà le stesse schermate.
    </p>
</div>

<div style="text-align: center; margin-top: 30px;">
        <p style="margin: 0 0 8px 0;">
            Quando hai letto le istruzioni, clicca su Continua.
        </p>
        <button class="otree-btn-next btn btn-bordeaux">Continua</button>
</div>

<div style="
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    align-items: center;
    gap: 25px 20px;
    margin-top: 25px;
    margin-bottom: 30px;
">
    {% if is_stem %}
        <img src="{% static 'venturini_pg/Blackboard.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/Lab.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/Emc.png' %}" style="height: 70px;">
        <img src="{% static 'venturini_pg/sencos.png' %}" style="height: 100px;">
    {% else %}
        <img src="{% static 'venturini_pg/Samsung_Galaxy_S25_Wallpaper1.png' %}" style="height: 90px;">
        <img src="{% static 'venturini_pg/Samsung_Galaxy_S24_Wallpaper2.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/iPhone_16_Wallpaper2.png' %}" style="height: 100px;">
        <img src="{% static 'venturini_pg/iPhone_16_Wallpaper1.png' %}" style="height: 100px;">
    {% endif %}
</div>

{% endblock %}