{{ block title }}
Experiment Finished!
{{ endblock }}
{{ block content }}

{{ if player.participant.pay_APP == False }}
<div class="inactivity_box">
<div class="inactivity_content">
<h2 class="inactivity_text">⚠️ Inactivity Notice</h2>
<p class="inactivity_message">{{ pay_explanation }}</p>
</div>
</div>
{{ endif }}

<div class="card bg-mid m-0">
<h2 class="card-header">🎉 Thank You for Participating!</h2>
<div class="card-body">
<h5><strong>Your participation has been completed successfully.</strong></h5>
<p>
 Thank you for taking the time to participate in this experiment. Your contribution to this research is greatly appreciated and will help advance our understanding of group decision-making and collective learning dynamics.
</p>
<p>
 We hope you found the experience engaging and insightful. Your decisions as a Research Team member have contributed valuable data to our study of how people choose between options and how they select the rules for making group decisions (majority decision or leader decision).
</p>
<div style="text-align: center; margin-top: 30px;">
<p>🚀 On the next page, you may share any feedback you may have about the experiment.</p>
</div>
</div>
</div>
<br>
{{ formfields }}
<button class="next-button" type="submit">Complete Study</button>
{{ endblock }}
{{ block styles }}
<style>
.green-box {
margin-top: 20px;
background-color: #d4edda;
padding: 12px;
border-left: 5px solid #28a745;
border-radius: 4px;
}

.inactivity_box {
    margin-bottom: 20px;
    width: 100%;
}

.inactivity_content {
    background: linear-gradient(135deg, #ff9800, #ffeb3b);
    border: 3px solid #f57c00;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 25px rgba(245, 124, 0, 0.3);
    animation: inactivityPulse 2s ease-in-out infinite alternate;
    max-width: 600px;
    margin: 0 auto;
}

.inactivity_text {
    color: #2d3436;
    font-weight: bold;
    text-align: center;
    margin: 0 0 10px 0;
    font-size: 1.5rem;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.inactivity_message {
    color: #2d3436;
    text-align: center;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.6);
}

@keyframes inactivityPulse {
    from {
        transform: scale(1);
        box-shadow: 0 8px 25px rgba(245, 124, 0, 0.3);
    }
    to {
        transform: scale(1.02);
        box-shadow: 0 12px 35px rgba(245, 124, 0, 0.4);
    }
}

.responsive-image {
max-width: 100%;
height: auto;
display: block;
margin: auto;
border-radius: 8px;
}
@media (max-width: 600px) {
.responsive-image {
max-width: 90%;
height: auto;
 }
}
.next-button {
background-color: white;
color: black;
border: 2px solid #008CBA;
font-size: 16px;
padding: 10px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
border-radius: 12px;
}
.next-button:hover {
background-color: #008CBA;
color: white;
}
.next-button:active {
background-color: #005f8b;
color: white;
border: 2px solid #005f8b;
}
.card {
border: 1px solid #ddd;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.card-header {
background-color: #f8f9fa;
padding: 15px 20px;
margin: 0;
border-bottom: 1px solid #ddd;
border-radius: 8px 8px 0 0;
font-size: 1.5em;
}
.card-body {
padding: 20px;
}
.bg-mid {
background-color: #ffffff;
}
.m-0 {
margin: 0;
}
</style>
{{ endblock }}