{% block title %}
Thank You for Participating!
{% endblock %}

{% block content %}

<audio id="thankyou" src="{% static 'ThankYou.wav' %}" preload="auto"></audio>

<style>
    body {
        background-color: #f4f4f4;  
    }

    .thank-you-container {
        font-family: Helvetica, sans-serif;
        text-align: center;
        color: rgb(0, 0, 0);
        background-color: white;
        padding: 40px 50px;
        border-radius: 15px;
        margin: 50px auto;
        max-width: 800px; 
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);  
    }

    h3 {
        color: rgba(13, 202, 240, 1.0);
        margin-bottom: 20px;  
    }

    h4 {
        margin-top: 30px;
        margin-bottom: 20px;
    }

    p {
        line-height: 1.5;  
        margin-bottom: 20px;  
    }

    a {
        color: rgba(13, 202, 240, 1.0);  
        text-decoration: none;  
    }

    a:hover {
        text-decoration: underline;  
    }

</style>

<div class="thank-you-container">
    <h3>Thank You for Your Contribution!</h3>
    <p>Your participation in this study is greatly valued. If you have questions or feedback, please feel free to contact us.</p>
    <p>
        <strong>Contact: Misha Gipsman</strong><br>
        Ariel University, Israel<br>
        Email: <a href="mailto:mishag@ariel.ac.il">mishag@ariel.ac.il</a>
    </p>
    <h4>You will be automatically redirected to the final page in <span id="countdown">20</span> seconds. If you prefer, click <a href="https://connect.cloudresearch.com/participant/project/8ee3db2f3c22439da24670537eb03673/complete">here</a> to proceed now.</h4>
</div>

{% endblock %}

{% block scripts %}

<script src="{{ static 'otree-front-1.3.b1.js' }}"></script>

<!-- Play sound when the page loads and set volume -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var thankYouAudio = document.getElementById('thankyou');
        thankYouAudio.volume = 0.1; // Set volume to 10%
        thankYouAudio.play();
    });
</script>

<!-- Countdown timer script -->
<script>
    var countdownElement = document.getElementById('countdown');
    var secondsLeft = 20;

    var countdownTimer = setInterval(function() {
        secondsLeft--;
        countdownElement.textContent = secondsLeft;

        if (secondsLeft <= 0) {
            clearInterval(countdownTimer);
            window.location.href = "https://connect.cloudresearch.com/participant/project/8ee3db2f3c22439da24670537eb03673/complete";
        }
    }, 1000);
</script>

{% endblock %}