246 lines
12 KiB
HTML
246 lines
12 KiB
HTML
{% extends 'base.html' %}
|
|
{% load static %}
|
|
|
|
{% block title %}Kasico Fursuit Shop - Handgefertigte Fursuits{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- Hero Section -->
|
|
<div class="furry-card" style="background: linear-gradient(135deg, var(--furry-primary) 0%, var(--furry-secondary) 100%); color: white; text-align: center; padding: 4rem 2rem; margin-bottom: 2rem;">
|
|
<div style="font-size: 4rem; margin-bottom: 1rem;">🐾</div>
|
|
<h1 style="font-size: 3rem; font-weight: 900; margin-bottom: 1rem;">Willkommen bei Kasico</h1>
|
|
<p style="font-size: 1.25rem; margin-bottom: 2rem; opacity: 0.9;">Handgefertigte Fursuits für die Furry-Community</p>
|
|
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
|
|
<a href="{% url 'products:product_list' %}" class="furry-btn furry-btn-secondary furry-btn-lg">
|
|
🛍️ Produkte entdecken
|
|
</a>
|
|
<a href="{% url 'products:custom_order' %}" class="furry-btn furry-btn-outline furry-btn-lg" style="color: white; border-color: white;">
|
|
🎨 Custom Order
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Featured Categories -->
|
|
<div class="furry-card" style="margin-bottom: 2rem;">
|
|
<div class="furry-card-header">
|
|
<h2 class="furry-card-title">🎭 Fursuit Kategorien</h2>
|
|
<p class="furry-card-subtitle">Entdecke verschiedene Fursuit-Typen und Stile</p>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
|
|
<div class="furry-card furry-product-card">
|
|
<div class="furry-card-image" style="background: linear-gradient(45deg, var(--furry-primary), var(--furry-secondary)); display: flex; align-items: center; justify-content: center; color: white; font-size: 3rem;">
|
|
🦊
|
|
</div>
|
|
<div class="furry-card-header">
|
|
<h3 class="furry-card-title">Fullsuits</h3>
|
|
<p class="furry-card-subtitle">Komplette Fursuits</p>
|
|
</div>
|
|
<div class="furry-card-content">
|
|
<p>Vollständige Fursuits mit Kopf, Körper und Pfoten. Perfekt für Conventions und Events.</p>
|
|
</div>
|
|
<div class="furry-card-footer">
|
|
<a href="{% url 'products:product_list' %}?fursuit_type=fullsuit" class="furry-btn furry-btn-primary furry-btn-sm">
|
|
Entdecken
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="furry-card furry-product-card">
|
|
<div class="furry-card-image" style="background: linear-gradient(45deg, var(--furry-accent), var(--furry-warning)); display: flex; align-items: center; justify-content: center; color: white; font-size: 3rem;">
|
|
🐺
|
|
</div>
|
|
<div class="furry-card-header">
|
|
<h3 class="furry-card-title">Partials</h3>
|
|
<p class="furry-card-subtitle">Kopf & Pfoten</p>
|
|
</div>
|
|
<div class="furry-card-content">
|
|
<p>Fursuit-Köpfe mit passenden Pfoten. Ideal für Einsteiger und Budget-Bewusste.</p>
|
|
</div>
|
|
<div class="furry-card-footer">
|
|
<a href="{% url 'products:product_list' %}?fursuit_type=partial" class="furry-btn furry-btn-primary furry-btn-sm">
|
|
Entdecken
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="furry-card furry-product-card">
|
|
<div class="furry-card-image" style="background: linear-gradient(45deg, var(--furry-success), var(--furry-accent)); display: flex; align-items: center; justify-content: center; color: white; font-size: 3rem;">
|
|
🐾
|
|
</div>
|
|
<div class="furry-card-header">
|
|
<h3 class="furry-card-title">Accessoires</h3>
|
|
<p class="furry-card-subtitle">Pfoten, Schwänze & mehr</p>
|
|
</div>
|
|
<div class="furry-card-content">
|
|
<p>Einzelne Accessoires wie Pfoten, Schwänze und andere Fursuit-Teile.</p>
|
|
</div>
|
|
<div class="furry-card-footer">
|
|
<a href="{% url 'products:product_list' %}?fursuit_type=paws" class="furry-btn furry-btn-primary furry-btn-sm">
|
|
Entdecken
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Featured Products -->
|
|
{% if featured_products %}
|
|
<div class="furry-card" style="margin-bottom: 2rem;">
|
|
<div class="furry-card-header">
|
|
<h2 class="furry-card-title">⭐ Empfohlene Produkte</h2>
|
|
<p class="furry-card-subtitle">Unsere beliebtesten Fursuits</p>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem;">
|
|
{% for product in featured_products %}
|
|
<div class="furry-card furry-product-card">
|
|
{% if product.image %}
|
|
<img src="{{ product.image.url }}" alt="{{ product.name }}" class="furry-card-image">
|
|
{% else %}
|
|
<div class="furry-card-image" style="background: linear-gradient(45deg, var(--furry-primary), var(--furry-secondary)); display: flex; align-items: center; justify-content: center; color: white; font-size: 2rem;">
|
|
🐾
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="furry-card-header">
|
|
<div>
|
|
<h3 class="furry-card-title">{{ product.name }}</h3>
|
|
<p class="furry-card-subtitle">{{ product.get_fursuit_type_display }}</p>
|
|
</div>
|
|
<div class="furry-product-badge">Featured</div>
|
|
</div>
|
|
|
|
<div class="furry-card-content">
|
|
<p>{{ product.description|truncatewords:15 }}</p>
|
|
<div class="furry-product-price">{{ product.price }}€</div>
|
|
</div>
|
|
|
|
<div class="furry-card-footer">
|
|
<a href="{% url 'products:product_detail' product.id %}" class="furry-btn furry-btn-primary furry-btn-sm">
|
|
👁️ Details
|
|
</a>
|
|
<button class="furry-btn furry-btn-outline furry-btn-sm" onclick="addToCart({{ product.id }})">
|
|
🛒 In Warenkorb
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div style="text-align: center; margin-top: 2rem;">
|
|
<a href="{% url 'products:product_list' %}" class="furry-btn furry-btn-secondary">
|
|
Alle Produkte anzeigen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Services Section -->
|
|
<div class="furry-card" style="margin-bottom: 2rem;">
|
|
<div class="furry-card-header">
|
|
<h2 class="furry-card-title">🛠️ Unsere Services</h2>
|
|
<p class="furry-card-subtitle">Was wir für dich tun können</p>
|
|
</div>
|
|
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem;">
|
|
<div class="furry-card">
|
|
<div style="font-size: 3rem; text-align: center; margin-bottom: 1rem;">🎨</div>
|
|
<h3 style="text-align: center; margin-bottom: 1rem;">Custom Design</h3>
|
|
<p style="text-align: center;">Individuelle Fursuits nach deinen Wünschen. Wir arbeiten eng mit dir zusammen, um deinen Traum-Fursuit zu verwirklichen.</p>
|
|
<div style="text-align: center; margin-top: 1.5rem;">
|
|
<a href="{% url 'products:custom_order' %}" class="furry-btn furry-btn-primary">
|
|
Custom Order starten
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="furry-card">
|
|
<div style="font-size: 3rem; text-align: center; margin-bottom: 1rem;">🔧</div>
|
|
<h3 style="text-align: center; margin-bottom: 1rem;">Reparaturen</h3>
|
|
<p style="text-align: center;">Professionelle Reparaturen und Wartung für bestehende Fursuits. Wir bringen deinen Fursuit wieder zum Glänzen.</p>
|
|
<div style="text-align: center; margin-top: 1.5rem;">
|
|
<a href="{% url 'products:contact' %}" class="furry-btn furry-btn-secondary">
|
|
Reparatur anfragen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="furry-card">
|
|
<div style="font-size: 3rem; text-align: center; margin-bottom: 1rem;">📦</div>
|
|
<h3 style="text-align: center; margin-bottom: 1rem;">Schnelle Lieferung</h3>
|
|
<p style="text-align: center;">Sichere Verpackung und schnelle Lieferung weltweit. Wir sorgen dafür, dass dein Fursuit sicher bei dir ankommt.</p>
|
|
<div style="text-align: center; margin-top: 1.5rem;">
|
|
<a href="{% url 'products:faq' %}" class="furry-btn furry-btn-outline">
|
|
Versand-Info
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Call to Action -->
|
|
<div class="furry-card" style="background: linear-gradient(135deg, var(--furry-accent) 0%, var(--furry-warning) 100%); color: white; text-align: center; padding: 3rem 2rem;">
|
|
<div style="font-size: 3rem; margin-bottom: 1rem;">🎉</div>
|
|
<h2 style="margin-bottom: 1rem;">Bereit für deinen ersten Fursuit?</h2>
|
|
<p style="margin-bottom: 2rem; font-size: 1.1rem; opacity: 0.9;">Entdecke unsere Kollektion oder starte dein Custom Design Projekt!</p>
|
|
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
|
|
<a href="{% url 'products:product_list' %}" class="furry-btn furry-btn-primary furry-btn-lg" style="background: white; color: var(--furry-accent);">
|
|
🛍️ Shop durchsuchen
|
|
</a>
|
|
<a href="{% url 'products:custom_order' %}" class="furry-btn furry-btn-outline furry-btn-lg" style="color: white; border-color: white;">
|
|
🎨 Custom Order
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Newsletter Signup -->
|
|
<div class="furry-card" style="margin-top: 2rem;">
|
|
<div style="text-align: center;">
|
|
<h3 style="margin-bottom: 1rem;">📧 Bleib auf dem Laufenden</h3>
|
|
<p style="margin-bottom: 2rem; color: var(--furry-text-secondary);">Erhalte Updates über neue Produkte, Special Offers und Fursuit-Tipps!</p>
|
|
|
|
<form method="post" style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; max-width: 500px; margin: 0 auto;">
|
|
{% csrf_token %}
|
|
<input type="email" name="email" placeholder="Deine E-Mail-Adresse" required
|
|
class="furry-input" style="flex: 1; min-width: 250px;">
|
|
<button type="submit" class="furry-btn furry-btn-primary">
|
|
📧 Anmelden
|
|
</button>
|
|
</form>
|
|
|
|
<p style="font-size: 0.8rem; color: var(--furry-text-secondary); margin-top: 1rem;">
|
|
Keine Spam! Du kannst dich jederzeit abmelden.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function addToCart(productId) {
|
|
fetch(`/add-to-cart/${productId}/`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value,
|
|
},
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.success) {
|
|
const alert = document.createElement('div');
|
|
alert.className = 'furry-alert furry-alert-success';
|
|
alert.innerHTML = `
|
|
<div class="furry-alert-icon">✅</div>
|
|
<div class="furry-alert-content">
|
|
<div class="furry-alert-title">Erfolg</div>
|
|
<div class="furry-alert-message">Produkt wurde zum Warenkorb hinzugefügt!</div>
|
|
</div>
|
|
`;
|
|
document.querySelector('main').insertBefore(alert, document.querySelector('main').firstChild);
|
|
setTimeout(() => alert.remove(), 3000);
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %} |