
{% extends '__layout__.html' %}
{% block title %}OTP Verification{% endblock %}
{% block head %}
<style>
.auth-container{height:100vh;display:flex;align-items:center;justify-content:center;background:var(--auth-bg);backdrop-filter:blur(10px)}
.auth-box{background:var(--auth-card-bg);border-radius:8px;box-shadow:0 8px 32px rgba(0,0,0,.2);padding:25px;width:100%;max-width:400px;border:1px solid var(--linebreak)}
.auth-box h1{font-weight:700;margin-bottom:5px;color:var(--bs-body-color)}
.auth-box p{color:var(--text-muted);margin-bottom:20px}
.auth-box input{background:var(--surface-alt);border:1px solid var(--linebreak);color:var(--bs-body-color);padding:12px 15px;border-radius:6px;margin-bottom:12px;backdrop-filter:blur(5px);transition:all .2s;width:100%;text-align:center;letter-spacing:4px;font-size:1.2rem}
.auth-box input:focus{border-color:rgba(236,72,153,.6);box-shadow:0 0 0 2px rgba(236,72,153,.2)}
.auth-box button{width:100%;padding:12px;border-radius:6px;background:#ec4899;border:none;color:#fff;font-weight:600;margin-top:5px;transition:all .2s}
.auth-box button:hover{background:#db2777}
.alert{border-radius:6px;padding:10px;margin-bottom:15px;text-align:center}
.alert-danger{background:rgba(220,38,38,.1);border:1px solid rgba(220,38,38,.3);color:#ef4444}
</style>
{% endblock %}
{% block content %}
<div class="auth-container">
  <div class="auth-box">
    <h1 class="title-logo-lander">NEXIUM</h1>
    <p>relive childhood memories with <b>freedom</b></p></center>
    {% with messages = get_flashed_messages() %}
      {% if messages %}
        {% for message in messages %}
        <div class="alert alert-danger">{{ message }}</div>
        {% endfor %}
      {% endif %}
    {% endwith %}
    <p>Please enter the OTP code from your authenticator app</p>
    <form method="POST">
      <input type="text" placeholder="123456" name="totpCode" required>
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
      <button type="submit">Verify</button>
    </form>
  </div>
</div>
{% endblock %}