{% extends "otree/WaitPage.html" %}
{% load static %}

{% block title %}{% endblock %}

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

<style>
    body {
        margin: 0;
        background: #ffffff;
        font-family: sans-serif;
        overflow-x: hidden;
    }

    .wait-overlay {
        position: fixed;
        inset: 0;
        background: #ffffff;
        z-index: 9999;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        overflow-y: auto;
        padding: 20px 0 24px;
        box-sizing: border-box;
    }

    .wrapper {
        width: 100%;
        max-width: 1200px;
        padding: 10px 20px 40px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 0 auto;
    }

    .top-images {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: 40px;
        margin: 0 0 24px 0;
        flex-wrap: wrap;
    }

    .top-images img {
        height: clamp(90px, 9vw, 140px);
        width: auto;
        display: block;
        object-fit: contain;
    }

    .wait-title {
        color: #800000;
        font-weight: 800;
        margin: 0;
        font-size: clamp(36px, 4vw, 72px);
        line-height: 1.1;
    }

    .wait-text {
        font-size: clamp(20px, 2vw, 34px);
        line-height: 1.35;
        margin: 18px 0 0 0;
        max-width: 1100px;
    }

    .wait-bar-container {
        width: min(80%, 500px);
        height: 16px;
        margin-top: 26px;
        background-color: #eeeeee;
        border-radius: 10px;
        overflow: hidden;
    }

    .wait-bar-inner {
        width: 150%;
        height: 100%;
        background: repeating-linear-gradient(
            45deg,
            #800000,
            #800000 12px,
            #b22222 12px,
            #b22222 24px
        );
        animation: bar-move 0.8s linear infinite;
    }

    @keyframes bar-move {
        from { transform: translateX(0); }
        to   { transform: translateX(-40px); }
    }

    .bottom-grid {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        align-items: center;
        gap: 28px 26px;
        margin-top: 30px;
    }

    .bottom-grid img {
        display: block;
        width: auto;
        object-fit: contain;
        margin: 0 auto;
    }

    .img-large {
        height: clamp(95px, 10vw, 180px);
    }

    .img-medium {
        height: clamp(80px, 8vw, 130px);
    }

    @media (max-width: 768px) {
        .wait-overlay {
            padding: 14px 0 20px;
        }

        .wrapper {
            max-width: 520px;
            padding: 8px 16px 28px;
        }

        .top-images {
            gap: 22px;
            margin-bottom: 20px;
        }

        .top-images img {
            height: 100px;
        }

        .wait-title {
            font-size: clamp(28px, 6vw, 42px);
        }

        .wait-text {
            font-size: clamp(16px, 3.8vw, 24px);
            max-width: 95%;
            margin-top: 14px;
        }

        .wait-bar-container {
            width: 88%;
            height: 14px;
            margin-top: 22px;
        }

        .bottom-grid {
            gap: 20px 18px;
            margin-top: 26px;
        }

        .img-large {
            height: 100px;
        }

        .img-medium {
            height: 80px;
        }
    }
</style>

<div class="wait-overlay">
    <div class="wrapper">

        <div class="top-images">
            {% if is_stem %}
                <img src="{% static 'venturini_pg/Calculator.png' %}" alt="Calcolatrice">
                <img src="{% static 'venturini_pg/DNA.png' %}" alt="DNA">
            {% else %}
                <img src="{% static 'venturini_pg/iPhone_16_Wallpaper3.png' %}" alt="Wallpaper iPhone">
                <img src="{% static 'venturini_pg/Samsung_Galaxy_S24_Wallpaper1.png' %}" alt="Wallpaper Samsung">
            {% endif %}
        </div>

        <h2 class="wait-title">Attendi un momento</h2>

        <p class="wait-text">
            Stiamo aspettando che anche gli altri partecipanti finiscano il loro compito.
            La prossima parte dell’esperimento inizierà tra poco.
        </p>

        <div class="wait-bar-container">
            <div class="wait-bar-inner"></div>
        </div>

        <div class="bottom-grid">
            {% if is_stem %}
                <img class="img-large" src="{% static 'venturini_pg/Blackboard.png' %}" alt="Lavagna">
                <img class="img-large" src="{% static 'venturini_pg/Lab.png' %}" alt="Laboratorio">
                <img class="img-medium" src="{% static 'venturini_pg/Emc.png' %}" alt="Formula">
                <img class="img-large" src="{% static 'venturini_pg/sencos.png' %}" alt="Grafico seno e coseno">
            {% else %}
                <img class="img-large" src="{% static 'venturini_pg/Samsung_Galaxy_S25_Wallpaper1.png' %}" alt="Wallpaper Samsung">
                <img class="img-large" src="{% static 'venturini_pg/Samsung_Galaxy_S24_Wallpaper2.png' %}" alt="Wallpaper Samsung">
                <img class="img-large" src="{% static 'venturini_pg/iPhone_16_Wallpaper2.png' %}" alt="Wallpaper iPhone">
                <img class="img-large" src="{% static 'venturini_pg/iPhone_16_Wallpaper1.png' %}" alt="Wallpaper iPhone">
            {% endif %}
        </div>

    </div>
</div>

{% endblock %}