furry/templates/base.html

231 lines
9.2 KiB
HTML

<!DOCTYPE html>
{% load i18n %}
{% load static %}
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Kasico Art & Design - Fursuit Shop{% endblock %}</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome für Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Quicksand:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Ko-fi Widget -->
<script type='text/javascript' src='https://storage.ko-fi.com/cdn/widget/Widget_2.js'></script>
<script type='text/javascript'>
kofiwidget2.init('Unterstütze mich auf Ko-fi', '#c800ff', 'C0C41FM0ZT');
</script>
<!-- Custom CSS -->
{% block extra_css %}{% endblock %}
<link rel="stylesheet" href="{% static 'css/kofi-button.css' %}">
<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;
--gradient-end: #F59E0B;
}
body {
font-family: 'Quicksand', sans-serif;
background: linear-gradient(135deg, var(--light-color), #FDF2F8);
color: var(--dark-color);
line-height: 1.6;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Fredoka', sans-serif;
font-weight: 600;
}
/* Navbar Styling */
.navbar {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
padding: 1rem 0;
box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}
.navbar-brand {
display: flex;
align-items: center;
color: white !important;
}
.navbar-brand img {
height: 40px;
margin-right: 10px;
}
.nav-link {
color: rgba(255,255,255,0.9) !important;
font-weight: 500;
padding: 0.5rem 1rem;
border-radius: 20px;
transition: all 0.3s ease;
}
.nav-link:hover {
color: white !important;
background: rgba(255,255,255,0.1);
transform: translateY(-2px);
}
/* Ko-Fi Button Styling */
.kofi-button {
background-color: #FF5E5B;
color: white !important;
border-radius: 20px;
padding: 0.5rem 1rem !important;
margin-right: 1rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
}
.kofi-button:hover {
background-color: #FF7A77;
transform: translateY(-2px);
}
.kofi-button img {
height: 20px;
margin-right: 0.5rem;
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="{% url 'shop:home' %}">
<img src="{% static 'images/kasicoLogo.png' %}" alt="Kasico Logo">
Kasico Art & Design
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="{% url 'products:product_list' %}">
<i class="fas fa-store me-1"></i> Shop
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'products:gallery' %}">
<i class="fas fa-images me-1"></i> Galerie
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'products:custom_order' %}">
<i class="fas fa-magic me-1"></i> Custom Order
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'shop:contact' %}">
<i class="fas fa-envelope me-1"></i> Kontakt
</a>
</li>
<!-- Ko-Fi Button -->
<li class="nav-item">
<script type='text/javascript'>kofiwidget2.draw();</script>
</li>
{% if user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'products:cart_detail' %}">
<i class="fas fa-shopping-cart me-1"></i> Warenkorb
{% with total_items=cart.get_total_items %}
{% if total_items > 0 %}
<span class="badge bg-danger">{{ total_items }}</span>
{% endif %}
{% endwith %}
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'products:profile' %}">
<i class="fas fa-user me-1"></i> Profil
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'logout' %}">
<i class="fas fa-sign-out-alt me-1"></i> Logout
</a>
</li>
{% else %}
<li class="nav-item">
<a class="nav-link" href="{% url 'login' %}">
<i class="fas fa-sign-in-alt me-1"></i> Login
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'products:register' %}">
<i class="fas fa-user-plus me-1"></i> Registrieren
</a>
</li>
{% endif %}
</ul>
</div>
</div>
</nav>
<!-- Main Content -->
<main class="py-4">
{% if messages %}
<div class="container mb-4">
{% for message in messages %}
<div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
{{ message }}
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
{% endfor %}
</div>
{% endif %}
{% block content %}{% endblock %}
</main>
<!-- Footer -->
<footer class="bg-dark text-light py-4 mt-5">
<div class="container">
<div class="row">
<div class="col-md-4">
<h5>Über uns</h5>
<p>Kasico Art & Design - Ihr Partner für hochwertige Fursuits und Custom Designs.</p>
</div>
<div class="col-md-4">
<h5>Links</h5>
<ul class="list-unstyled">
<li><a href="#" class="text-light">FAQ</a></li>
<li><a href="{% url 'shop:contact' %}" class="text-light">Kontakt</a></li>
<li><a href="#" class="text-light">Impressum</a></li>
<li><a href="#" class="text-light">Datenschutz</a></li>
</ul>
</div>
<div class="col-md-4">
<h5>Kontakt</h5>
<ul class="list-unstyled">
<li><i class="fas fa-envelope me-2"></i> info@kasico-art.com</li>
<li><i class="fas fa-phone me-2"></i> +49 (0) 123 456789</li>
<li><i class="fas fa-map-marker-alt me-2"></i> Berlin, Deutschland</li>
</ul>
</div>
</div>
<hr class="my-4">
<div class="text-center">
<p class="mb-0">&copy; {% now "Y" %} Kasico Art & Design. Alle Rechte vorbehalten.</p>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
{% block extra_js %}{% endblock %}
</body>
</html>