38515-vm/core/templates/core/register.html
Flatlogic Bot fb3e799193 Raktapulse
2026-03-01 16:16:12 +00:00

91 lines
3.5 KiB
HTML

{% extends 'base.html' %}
{% load i18n %}
{% block title %}Create Account - RaktaPulse{% endblock %}
{% block content %}
<div class="row justify-content-center align-items-center py-5" style="min-height: 80vh;">
<div class="col-md-6 col-lg-5">
<div class="glass-card shadow-lg border-0 p-4 p-md-5" style="border-top: 5px solid #E63946 !important;">
<div class="text-center mb-5">
<div class="d-inline-flex align-items-center justify-content-center mb-4" style="width: 60px; height: 60px; background: #fff5f5; border-radius: 12px;">
<i class="bi bi-person-plus text-danger fs-2"></i>
</div>
<h2 class="fw-bold text-dark brand-font mb-2">{% trans "Create Account" %}</h2>
<p class="text-secondary small">{% trans "Join the next-gen management system" %}</p>
</div>
<form method="post" class="needs-validation">
{% csrf_token %}
{% for field in form %}
<div class="mb-3">
<label class="form-label small fw-bold text-secondary text-uppercase mb-2" for="{{ field.id_for_label }}">
{{ field.label }}
</label>
{{ field }}
{% if field.help_text %}
<div class="form-text small mb-1">{{ field.help_text|safe }}</div>
{% endif %}
{% if field.errors %}
<div class="text-danger small mt-1">
{% for error in field.errors %}{{ error }}{% endfor %}
</div>
{% endif %}
</div>
{% endfor %}
<button type="submit" class="btn btn-danger w-100 py-3 fw-bold mt-4 shadow-sm" style="background-color: #E63946; border: none; border-radius: 8px;">
{% trans "CREATE ACCOUNT" %} <i class="bi bi-check-circle ms-1"></i>
</button>
</form>
<div class="text-center mt-5">
<p class="text-secondary small mb-4">Already have an account? <a href="{% url 'login' %}" class="text-danger fw-bold text-decoration-none">Log in here</a></p>
<hr class="opacity-10 mb-4">
<a href="{% url 'home' %}" class="btn btn-link btn-sm text-secondary text-decoration-none">
<i class="bi bi-house-door me-1"></i> Back to Home
</a>
</div>
</div>
</div>
</div>
<style>
input:not([type="checkbox"]) {
display: block;
width: 100%;
padding: 0.85rem 1.25rem;
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #2b2d42;
background-color: #ffffff;
background-clip: padding-box;
border: 1px solid #e9ecef;
border-radius: 12px;
transition: all 0.2s ease-in-out;
}
input:not([type="checkbox"]):focus {
border-color: #E63946;
outline: 0;
box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.08);
background-color: #fff;
}
.glass-card {
background: #ffffff;
border-radius: 24px;
border: 1px solid rgba(0,0,0,0.05);
}
.shadow-danger {
box-shadow: 0 10px 20px rgba(230, 57, 70, 0.2);
}
.helptext ul {
list-style: none;
padding-left: 0;
margin-top: 5px;
color: #6c757d;
font-size: 0.8rem;
}
</style>
{% endblock %}