104 lines
3.7 KiB
HTML
104 lines
3.7 KiB
HTML
{% extends 'base.html' %}
|
|
{% block content %}
|
|
<section class="py-24 bg-gradient-to-br from-teal-100 to-primary flex items-center justify-center">
|
|
<div class="max-w-md w-full mx-auto text-center shadow-2xl border border-accent rounded-2xl p-4 bg-white/90 backdrop-blur">
|
|
<h2 class="text-3xl font-extrabold mb-6 text-accent">Payment</h2>
|
|
<p class="text-lg text-gray-700 mb-6">Please enter your demo code to proceed to document.</p>
|
|
|
|
{% if success %}
|
|
<p class="text-green-600 font-semibold mb-4">{{ success }}</p>
|
|
{% endif %}
|
|
<form method="post" class="space-y-6">
|
|
{% csrf_token %}
|
|
<div class="relative flex items-center">
|
|
<input
|
|
type="text"
|
|
id="code-input"
|
|
name="code"
|
|
maxlength="10"
|
|
class="w-full px-4 py-3 border-2 border-accent rounded-lg focus:outline-none focus:ring-2 focus:ring-accent text-lg tracking-widest text-center font-mono mb-2"
|
|
placeholder="Enter your code"
|
|
required
|
|
autocomplete="off"
|
|
>
|
|
<span id="code-status" class="absolute right-3 top-1/2 -translate-y-1/2 text-2xl"></span>
|
|
</div>
|
|
<button
|
|
type="submit"
|
|
class="w-full bg-accent text-primary hover:bg-yellow-400 font-bold py-3 px-8 rounded-lg shadow-lg text-lg transition-all duration-200 ease-in-out transform hover:scale-105"
|
|
id="submit-btn"
|
|
disabled
|
|
>
|
|
Enter Code
|
|
</button>
|
|
</form>
|
|
<p id="code-error" class="mt-6 font-semibold text-lg"></p>
|
|
{% if error %}
|
|
<p id="backend-error" class="text-red-600 mt-6 font-semibold text-lg">{{ error }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</section>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const input = document.getElementById('code-input');
|
|
const status = document.getElementById('code-status');
|
|
const codeError = document.getElementById('code-error');
|
|
const backendError = document.getElementById('backend-error');
|
|
const submitBtn = document.getElementById('submit-btn');
|
|
|
|
function disableBtn() {
|
|
submitBtn.disabled = true;
|
|
submitBtn.classList.add('opacity-50', 'cursor-not-allowed');
|
|
}
|
|
|
|
function enableBtn() {
|
|
submitBtn.disabled = false;
|
|
submitBtn.classList.remove('opacity-50', 'cursor-not-allowed');
|
|
}
|
|
|
|
disableBtn();
|
|
|
|
input.addEventListener('input', function() {
|
|
status.innerHTML = '';
|
|
codeError.innerHTML = '';
|
|
if (backendError) backendError.style.display = 'none';
|
|
const code = input.value.trim();
|
|
if (code.length === 0) {
|
|
disableBtn();
|
|
return;
|
|
};
|
|
disableBtn();
|
|
|
|
status.innerHTML = `<svg class="animate-spin h-6 w-6 text-accent" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"></path>
|
|
</svg>`;
|
|
|
|
fetch("{% url 'core:validate_code' %}", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json",
|
|
"X-CSRFToken": "{{ csrf_token }}",
|
|
},
|
|
body: JSON.stringify({ code: code })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
status.innerHTML = '';
|
|
if (data.valid) {
|
|
codeError.innerHTML = '<span class="text-green-600">✅ Valid code</span>';
|
|
enableBtn();
|
|
} else {
|
|
codeError.innerHTML = '<span class="text-red-600">❌ Invalid code</span>';
|
|
disableBtn();
|
|
}
|
|
})
|
|
.catch(() => {
|
|
status.innerHTML = '';
|
|
codeError.innerHTML = '<span class="text-red-600">❌ Error checking code</span>';
|
|
disableBtn();
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %} |