Rasmus
90e12f437e
All checks were successful
Build and Push Madplaner / build (push) Successful in 26s
57 lines
2.5 KiB
HTML
57 lines
2.5 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<div class="max-w-md mx-auto bg-white p-8 rounded-2xl shadow-lg mt-10">
|
|
<div class="text-center mb-8">
|
|
<h2 class="text-3xl font-extrabold text-gray-900">Opret bruger</h2>
|
|
<p class="text-gray-500 mt-2">Få madplaner tilpasset dine ønsker i dag.</p>
|
|
</div>
|
|
|
|
|
|
<form method="POST" id="registerForm">
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-semibold mb-2 text-gray-700">Username</label>
|
|
<input type="text" name="username" placeholder="e.g. HealthyEats2024"
|
|
class="w-full p-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:outline-none transition" required>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-semibold mb-2 text-gray-700">Password</label>
|
|
<input type="password" id="password" name="password" placeholder="••••••••"
|
|
class="w-full p-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:outline-none transition" required>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-semibold mb-2 text-gray-700">Confirm Password</label>
|
|
<input type="password" id="confirm_password" placeholder="••••••••"
|
|
class="w-full p-3 border border-gray-300 rounded-xl focus:ring-2 focus:ring-green-500 focus:outline-none transition" required>
|
|
<p id="error-msg" class="text-red-500 text-xs mt-2 hidden">Passwords do not match!</p>
|
|
</div>
|
|
|
|
<button type="submit" id="regBtn" class="w-full bg-green-600 hover:bg-green-500 text-white py-3 rounded-xl font-bold shadow-md transition-all active:scale-95">
|
|
Create Account
|
|
</button>
|
|
</form>
|
|
|
|
<div class="mt-8 pt-6 border-t border-gray-100 text-center">
|
|
<p class="text-sm text-gray-600">
|
|
Already have an account?
|
|
<a href="/login" class="text-green-600 font-bold hover:underline">Log in</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const form = document.getElementById('registerForm');
|
|
const password = document.getElementById('password');
|
|
const confirm = document.getElementById('confirm_password');
|
|
const errorMsg = document.getElementById('error-msg');
|
|
|
|
form.onsubmit = function(e) {
|
|
if (password.value !== confirm.value) {
|
|
e.preventDefault();
|
|
errorMsg.classList.remove('hidden');
|
|
return false;
|
|
}
|
|
};
|
|
</script>
|
|
{% endblock %} |