{% 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-bottom:30px;">
    Istruzioni Prima Attività
</h2>
<!-- ===== TESTO ISTRUZIONI (COMUNE A TUTTI) ===== -->
<div style="margin-top: 15px; max-width: 800px; margin-left:auto; margin-right:auto;">

    <p style="margin: 4px 0;">
        In questa prima attività dell’esperimento ti chiederemo di svolgere un breve compito di scrittura.
    </p>

    <p style="margin: 4px 0;">
       Questa attività <u><strong>NON</strong></u> permette di guadagnare dei punti. <br>
        La tua risposta non ti permetterà, quindi, di accumulare ulteriori punti rispetto alla dotazione iniziale fornita.
    </p>

    <p style="margin: 4px 0;">
        Avrai a disposizione <strong>5 minuti</strong> per scrivere in uno spazio apposito.
    </p>

</div>

    <!-- ===== STEM: TESTO + BOTTONE CENTRALE ===== -->
    <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 %}