{% extends "global/Page.html" %}

{% block head %}
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&display=swap" rel="stylesheet">
<style>
    body{background:#0f0f0f;margin:0;padding:0;font-family:'Rajdhani',sans-serif;color:#eee;}
    .container{max-width:600px;margin-top:100px;}
    .card{background:#1c1c1c;border:none;border-radius:8px;box-shadow:0 0 20px rgba(0,0,0,0.8);}
    .card-body{text-align:center;padding:40px 20px;}
    .header-line{
        font-size:2em;font-weight:700;margin-bottom:25px;color:#00e676;
        text-shadow:0 0 15px #00e676;letter-spacing:1px;
    }
    .code-pill{
        display:inline-block;background:linear-gradient(45deg,#7f00ff,#e100ff);
        padding:6px 14px;border-radius:6px;font-weight:700;font-size:1.1em;
        box-shadow:0 0 10px rgba(0,0,0,.7);margin-bottom:25px;color:#fff;
    }
    .lead{
        font-size:1.4em;font-weight:700;color:#fff;margin-bottom:30px;
        text-shadow:0 0 5px rgba(0,0,0,.5);
    }
    .lead::after{
        content:"";display:block;width:80px;height:4px;margin:15px auto 0;border-radius:2px;
        background:linear-gradient(45deg,#7f00ff,#e100ff);
    }
    @media(max-width:600px){
        .header-line{font-size:1.6em;}
        .lead{font-size:1.2em;}
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
  <div class="row justify-content-center mt-5">
    <div class="col-12">
      <div class="card shadow">
        <div class="card-body">

          <p class="header-line">Your session is complete!</p>

          <p>Click the button below to return to Prolific and complete your submission:</p>

          <a href="https://app.prolific.com/submissions/complete?cc=CLUQD9DX"
             class="code-pill" style="text-decoration:none;">Return to Prolific</a>
          <p class="lead">
            You will receive a participation fee of ${{ base_pay }}.
          </p>

          <p style="margin-top:30px;">Thank you for participating in this experiment.</p>

        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}