<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clock CAPTCHA</title>
<link rel="stylesheet" href="/static/css/captcha_form.css">
</head>
<body>
<div class="captcha-container">
<h1>Clock CAPTCHA Verification</h1>
<div class="instructions">
<strong>Instructions:</strong> Look at the clock below and enter the time shown.
Enter the hour (1-12) and minute (0-59) that the clock hands are pointing to.
</div>
{% if error %}
<div class="error">{{ error }}</div>
{% endif %}
{% if success %}
<div class="success">{{ success }}</div>
{% else %}
<form method="POST" action="/captcha/verify">
<div class="captcha-image">
<img src="/captcha/image/{{ session_id }}" alt="Clock CAPTCHA" width="200" height="200">
</div>
<div class="form-group">
<label>What time is shown on the clock?</label>
<div class="time-inputs">
<input type="number" name="hour" min="1" max="12" placeholder="Hour" required>
<span>:</span>
<input type="number" name="minute" min="0" max="59" placeholder="Min" required>
</div>
</div>
<input type="hidden" name="session_id" value="{{ session_id }}">
<button type="submit">Verify</button>
</form>
<a href="/captcha/form" class="refresh-link">🔄 Get a new CAPTCHA</a>
{% endif %}
</div>
</body>
</html>