450 lines
13 KiB
HTML
450 lines
13 KiB
HTML
<<<<<<< HEAD
|
|
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Registrieren - {{ block.super }}{% 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">🐾 Registrieren</h1>
|
|
<p class="text-muted">Werde Teil der Furry-Community!</p>
|
|
</div>
|
|
|
|
<form method="post" class="needs-validation furry-form" novalidate>
|
|
{% csrf_token %}
|
|
|
|
{% if form.non_field_errors %}
|
|
<div class="alert alert-danger">
|
|
{% for error in form.non_field_errors %}
|
|
{{ error }}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% for field in form %}
|
|
<div class="form-group mb-3">
|
|
<label for="{{ field.id_for_label }}" class="form-label">
|
|
{{ field.label }}
|
|
</label>
|
|
{{ field }}
|
|
{% if field.help_text %}
|
|
<div class="form-text">{{ field.help_text }}</div>
|
|
{% endif %}
|
|
{% if field.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{% for error in field.errors %}
|
|
{{ error }}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<div class="d-grid gap-2">
|
|
<button type="submit" class="btn btn-primary furry-btn">
|
|
🐾 Registrieren
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="text-center mt-4">
|
|
<p>Bereits ein Konto? <a href="{% url 'login' %}">Jetzt anmelden</a></p>
|
|
<p><a href="{% url 'password_reset' %}">Passwort vergessen?</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
:root {
|
|
--primary-color: #8B5CF6; /* Helles Lila */
|
|
--secondary-color: #EC4899; /* Pink */
|
|
--accent-color: #F59E0B; /* Orange */
|
|
--dark-color: #1F2937; /* Dunkelgrau */
|
|
--light-color: #F3E8FF; /* Helles Lila */
|
|
--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);
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.furry-form input, .furry-form textarea {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border-radius: 10px;
|
|
border: 2px solid var(--light-color);
|
|
transition: all 0.3s ease;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.furry-form input:focus, .furry-form textarea:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.25);
|
|
outline: none;
|
|
}
|
|
|
|
.furry-form input.invalid, .furry-form textarea.invalid {
|
|
border-color: #EF4444;
|
|
box-shadow: 0 0 0 0.25rem rgba(239, 68, 68, 0.25);
|
|
}
|
|
|
|
.furry-form input.valid, .furry-form textarea.valid {
|
|
border-color: #10B981;
|
|
box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.25);
|
|
}
|
|
|
|
.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;
|
|
font-weight: 700;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
|
|
}
|
|
|
|
a {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
font-weight: 600;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--secondary-color);
|
|
}
|
|
|
|
.form-text {
|
|
font-size: 0.875rem;
|
|
color: var(--dark-color);
|
|
opacity: 0.7;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.alert-danger {
|
|
background: linear-gradient(135deg, #FEE2E2, #FECACA);
|
|
border: 2px solid #EF4444;
|
|
border-radius: 10px;
|
|
color: #991B1B;
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.invalid-feedback {
|
|
color: #EF4444;
|
|
font-size: 0.875rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* Animation für erfolgreiche Registrierung */
|
|
@keyframes success-bounce {
|
|
0%, 20%, 53%, 80%, 100% {
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
40%, 43% {
|
|
transform: translate3d(0, -30px, 0);
|
|
}
|
|
70% {
|
|
transform: translate3d(0, -15px, 0);
|
|
}
|
|
90% {
|
|
transform: translate3d(0, -4px, 0);
|
|
}
|
|
}
|
|
|
|
.success-animation {
|
|
animation: success-bounce 1s ease-in-out;
|
|
}
|
|
</style>
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// Formular-Validierung
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const form = document.querySelector('.furry-form');
|
|
const inputs = form.querySelectorAll('input, textarea');
|
|
|
|
inputs.forEach(input => {
|
|
input.addEventListener('blur', function() {
|
|
validateField(this);
|
|
});
|
|
|
|
input.addEventListener('input', function() {
|
|
if (this.classList.contains('invalid')) {
|
|
validateField(this);
|
|
}
|
|
});
|
|
});
|
|
|
|
function validateField(field) {
|
|
if (field.checkValidity()) {
|
|
field.classList.remove('invalid');
|
|
field.classList.add('valid');
|
|
} else {
|
|
field.classList.remove('valid');
|
|
field.classList.add('invalid');
|
|
}
|
|
}
|
|
|
|
// Erfolgreiche Registrierung Animation
|
|
// {% if form.is_valid and not form.errors %}
|
|
// document.querySelector('.furry-card').classList.add('success-animation');
|
|
// {% endif %}
|
|
});
|
|
|
|
// Formular neu laden, wenn der Benutzer zurück navigiert
|
|
window.addEventListener('pageshow', function(event) {
|
|
if (event.persisted) {
|
|
window.location.reload();
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
=======
|
|
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Registrieren - {{ block.super }}{% 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">🐾 Registrieren</h1>
|
|
<p class="text-muted">Werde Teil der Furry-Community!</p>
|
|
</div>
|
|
|
|
<form method="post" class="needs-validation furry-form" novalidate>
|
|
{% csrf_token %}
|
|
|
|
{% if form.non_field_errors %}
|
|
<div class="alert alert-danger">
|
|
{% for error in form.non_field_errors %}
|
|
{{ error }}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% for field in form %}
|
|
<div class="form-group mb-3">
|
|
<label for="{{ field.id_for_label }}" class="form-label">
|
|
{{ field.label }}
|
|
</label>
|
|
{{ field }}
|
|
{% if field.help_text %}
|
|
<div class="form-text">{{ field.help_text }}</div>
|
|
{% endif %}
|
|
{% if field.errors %}
|
|
<div class="invalid-feedback d-block">
|
|
{% for error in field.errors %}
|
|
{{ error }}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
|
|
<div class="d-grid gap-2">
|
|
<button type="submit" class="btn btn-primary furry-btn">
|
|
🐾 Registrieren
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<div class="text-center mt-4">
|
|
<p>Bereits ein Konto? <a href="{% url 'login' %}">Jetzt anmelden</a></p>
|
|
<p><a href="{% url 'password_reset' %}">Passwort vergessen?</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
:root {
|
|
--primary-color: #8B5CF6; /* Helles Lila */
|
|
--secondary-color: #EC4899; /* Pink */
|
|
--accent-color: #F59E0B; /* Orange */
|
|
--dark-color: #1F2937; /* Dunkelgrau */
|
|
--light-color: #F3E8FF; /* Helles Lila */
|
|
--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);
|
|
margin: 2rem 0;
|
|
}
|
|
|
|
.furry-form input, .furry-form textarea {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
border-radius: 10px;
|
|
border: 2px solid var(--light-color);
|
|
transition: all 0.3s ease;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.furry-form input:focus, .furry-form textarea:focus {
|
|
border-color: var(--primary-color);
|
|
box-shadow: 0 0 0 0.25rem rgba(139, 92, 246, 0.25);
|
|
outline: none;
|
|
}
|
|
|
|
.furry-form input.invalid, .furry-form textarea.invalid {
|
|
border-color: #EF4444;
|
|
box-shadow: 0 0 0 0.25rem rgba(239, 68, 68, 0.25);
|
|
}
|
|
|
|
.furry-form input.valid, .furry-form textarea.valid {
|
|
border-color: #10B981;
|
|
box-shadow: 0 0 0 0.25rem rgba(16, 185, 129, 0.25);
|
|
}
|
|
|
|
.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;
|
|
font-weight: 700;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
|
|
}
|
|
|
|
a {
|
|
color: var(--primary-color);
|
|
text-decoration: none;
|
|
transition: all 0.3s ease;
|
|
font-weight: 600;
|
|
}
|
|
|
|
a:hover {
|
|
color: var(--secondary-color);
|
|
}
|
|
|
|
.form-text {
|
|
font-size: 0.875rem;
|
|
color: var(--dark-color);
|
|
opacity: 0.7;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
.alert-danger {
|
|
background: linear-gradient(135deg, #FEE2E2, #FECACA);
|
|
border: 2px solid #EF4444;
|
|
border-radius: 10px;
|
|
color: #991B1B;
|
|
padding: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.invalid-feedback {
|
|
color: #EF4444;
|
|
font-size: 0.875rem;
|
|
margin-top: 0.25rem;
|
|
}
|
|
|
|
/* Animation für erfolgreiche Registrierung */
|
|
@keyframes success-bounce {
|
|
0%, 20%, 53%, 80%, 100% {
|
|
transform: translate3d(0,0,0);
|
|
}
|
|
40%, 43% {
|
|
transform: translate3d(0, -30px, 0);
|
|
}
|
|
70% {
|
|
transform: translate3d(0, -15px, 0);
|
|
}
|
|
90% {
|
|
transform: translate3d(0, -4px, 0);
|
|
}
|
|
}
|
|
|
|
.success-animation {
|
|
animation: success-bounce 1s ease-in-out;
|
|
}
|
|
</style>
|
|
|
|
{% block extra_js %}
|
|
<script>
|
|
// Formular-Validierung
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const form = document.querySelector('.furry-form');
|
|
const inputs = form.querySelectorAll('input, textarea');
|
|
|
|
inputs.forEach(input => {
|
|
input.addEventListener('blur', function() {
|
|
validateField(this);
|
|
});
|
|
|
|
input.addEventListener('input', function() {
|
|
if (this.classList.contains('invalid')) {
|
|
validateField(this);
|
|
}
|
|
});
|
|
});
|
|
|
|
function validateField(field) {
|
|
if (field.checkValidity()) {
|
|
field.classList.remove('invalid');
|
|
field.classList.add('valid');
|
|
} else {
|
|
field.classList.remove('valid');
|
|
field.classList.add('invalid');
|
|
}
|
|
}
|
|
|
|
// Erfolgreiche Registrierung Animation
|
|
// {% if form.is_valid and not form.errors %}
|
|
// document.querySelector('.furry-card').classList.add('success-animation');
|
|
// {% endif %}
|
|
});
|
|
|
|
// Formular neu laden, wenn der Benutzer zurück navigiert
|
|
window.addEventListener('pageshow', function(event) {
|
|
if (event.persisted) {
|
|
window.location.reload();
|
|
}
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
>>>>>>> 5b9b867963eca600ed64b617dc2dc86c30dbd9cb
|
|
{% endblock %} |