114 lines
3.6 KiB
HTML
114 lines
3.6 KiB
HTML
{% extends 'shop/base.html' %}
|
|
{% load i18n %}
|
|
{% load static %}
|
|
|
|
{% block title %}{% trans "Reset Password" %} - Kasico Art & Design{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="content-container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-6">
|
|
<div class="furry-card">
|
|
<!-- Header -->
|
|
<div class="text-center mb-4">
|
|
<img src="{% static 'images/kasicoLogo.png' %}"
|
|
alt="Kasico Art & Design Logo"
|
|
class="img-fluid mb-4"
|
|
style="max-width: 150px; height: auto;">
|
|
<h1 class="h3 mb-3">{% trans "Reset Password" %}</h1>
|
|
<p class="text-muted">{% trans "Enter your email address below, and we'll send you instructions for setting a new password." %}</p>
|
|
</div>
|
|
|
|
<form method="post" class="needs-validation" novalidate>
|
|
{% csrf_token %}
|
|
|
|
{% if form.errors %}
|
|
<div class="alert alert-danger">
|
|
{% for field in form %}
|
|
{% for error in field.errors %}
|
|
<p class="mb-0">{{ error }}</p>
|
|
{% endfor %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="mb-4">
|
|
<label for="{{ form.email.id_for_label }}" class="form-label">
|
|
{% trans "Email Address" %}
|
|
</label>
|
|
{{ form.email }}
|
|
{% if form.email.help_text %}
|
|
<div class="form-text">{{ form.email.help_text }}</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="d-grid">
|
|
<button type="submit" class="btn btn-primary">
|
|
{% trans "Send Reset Link" %}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="mt-3 text-center">
|
|
<p>{% trans "Remember your password?" %}
|
|
<a href="{% url 'login' %}">{% trans "Login here" %}</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
:root {
|
|
--primary-color: #8B5CF6;
|
|
--secondary-color: #EC4899;
|
|
--accent-color: #F59E0B;
|
|
--dark-color: #1F2937;
|
|
--light-color: #F3E8FF;
|
|
--white-color: #FFFFFF;
|
|
--gradient-start: #8B5CF6;
|
|
--gradient-middle: #EC4899;
|
|
}
|
|
|
|
.furry-card {
|
|
background: white;
|
|
border-radius: 20px;
|
|
padding: 2rem;
|
|
box-shadow: 0 8px 32px rgba(139, 92, 246, 0.1);
|
|
}
|
|
|
|
#id_email {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border-radius: 10px;
|
|
border: 2px solid var(--light-color);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
#id_email:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.25);
|
|
outline: none;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: linear-gradient(135deg, var(--gradient-start), var(--gradient-middle));
|
|
border: none;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 50px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
|
|
}
|
|
|
|
.form-text {
|
|
color: var(--dark-color);
|
|
opacity: 0.7;
|
|
font-size: 0.875rem;
|
|
}
|
|
</style>
|
|
{% endblock %} |