678 lines
27 KiB
HTML
678 lines
27 KiB
HTML
<<<<<<< HEAD
|
||
<!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">
|
||
|
||
<!-- SEO Meta Tags -->
|
||
{% include 'seo/meta_tags.html' with meta_tags=meta_tags %}
|
||
|
||
<!-- Structured Data -->
|
||
{% include 'seo/structured_data.html' with structured_data=structured_data %}
|
||
|
||
<!-- Google Analytics -->
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
|
||
<script src="{% static 'js/analytics.js' %}"></script>
|
||
|
||
<title>{% block title %}Kasico Fursuit Shop{% endblock %}</title>
|
||
<link rel="stylesheet" href="/static/css/furry.css">
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@700&display=swap">
|
||
{% block extra_head %}{% endblock %}
|
||
</head>
|
||
<body>
|
||
<header class="furry-header">
|
||
<div class="nav-progress"></div>
|
||
<div class="container nav-flex">
|
||
<div class="logo">
|
||
<img src="/static/images/kasico-logo.svg" alt="Kasico Logo" height="48">
|
||
</div>
|
||
|
||
<!-- Mobile Navigation Toggle -->
|
||
<button class="mobile-nav-toggle" id="mobileNavToggle">
|
||
<div class="hamburger-line"></div>
|
||
<div class="hamburger-line"></div>
|
||
<div class="hamburger-line"></div>
|
||
</button>
|
||
|
||
<nav id="mainNav">
|
||
<a href="{% url 'shop:home' %}" class="nav-link" data-page="home">🏠 Home</a>
|
||
<a href="{% url 'products:product_list' %}" class="nav-link" data-page="products">🛍️ Shop</a>
|
||
<a href="{% url 'products:gallery' %}" class="nav-link" data-page="gallery">🖼️ Galerie</a>
|
||
<a href="{% url 'products:custom_order' %}" class="nav-link" data-page="custom">🎨 Custom Orders</a>
|
||
</nav>
|
||
|
||
<div class="header-actions">
|
||
{% if user.is_authenticated %}
|
||
<span class="user-welcome">🐾 Hallo, {{ user.username }}!</span>
|
||
<a href="{% url 'products:profile' %}" class="btn furry-btn-outline">👤 Profil</a>
|
||
<a href="{% url 'logout' %}" class="btn furry-btn">🚪 Logout</a>
|
||
{% else %}
|
||
<a href="{% url 'login' %}" class="btn furry-btn">🔐 Login</a>
|
||
<a href="{% url 'register' %}" class="btn furry-btn-outline">✨ Registrieren</a>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="furry-main">
|
||
{% block content %}{% endblock %}
|
||
</main>
|
||
|
||
<!-- Scroll to Top Button -->
|
||
<button class="scroll-to-top" id="scrollToTop" title="Nach oben scrollen">
|
||
🚀
|
||
</button>
|
||
|
||
<footer class="furry-footer">
|
||
<div class="container">
|
||
<span>© 2025 Kasico Art & Design</span>
|
||
<span class="footer-links">
|
||
<a href="/impressum/">Impressum</a> |
|
||
<a href="/datenschutz/">Datenschutz</a>
|
||
</span>
|
||
</div>
|
||
</footer>
|
||
|
||
<div id="newsletter-popup" class="newsletter-popup">
|
||
<button class="newsletter-close" onclick="closeNewsletter()" title="Schließen">×</button>
|
||
<div class="newsletter-content">
|
||
<div class="newsletter-emoji">🐾</div>
|
||
<div class="newsletter-text">Verpasse keine Furry-News mehr!</div>
|
||
<div class="newsletter-subtitle">Erhalte exklusive Angebote, neue Fursuits und Insider-Updates direkt in dein Postfach!</div>
|
||
|
||
<form class="newsletter-form" id="newsletterForm" onsubmit="handleNewsletterSubmit(event)">
|
||
<input type="email"
|
||
placeholder="Deine E-Mail-Adresse"
|
||
required
|
||
id="newsletterEmail"
|
||
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
|
||
title="Bitte gib eine gültige E-Mail-Adresse ein">
|
||
<button type="submit" id="newsletterSubmit">
|
||
<span class="btn-text">Anmelden</span>
|
||
<span class="btn-loading" style="display: none;">Wird gesendet...</span>
|
||
</button>
|
||
</form>
|
||
|
||
<div class="newsletter-benefits">
|
||
<div class="benefit">Exklusive Rabatte und Frühbucher-Angebote</div>
|
||
<div class="benefit">Erste Infos zu neuen Fursuit-Kollektionen</div>
|
||
<div class="benefit">Tipps zur Fursuit-Pflege und -Wartung</div>
|
||
<div class="benefit">Community-Events und Meetups</div>
|
||
</div>
|
||
|
||
<div style="font-size: 0.8rem; color: #999; margin-top: 1rem;">
|
||
🔒 Deine Daten sind sicher. Abmeldung jederzeit möglich.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sticky Navigation JavaScript -->
|
||
<script>
|
||
// Sticky Navigation Scroll Effects
|
||
const header = document.querySelector('.furry-header');
|
||
const navProgress = document.querySelector('.nav-progress');
|
||
const scrollToTopBtn = document.getElementById('scrollToTop');
|
||
const mobileNavToggle = document.getElementById('mobileNavToggle');
|
||
const mainNav = document.getElementById('mainNav');
|
||
|
||
// Scroll Event Handler
|
||
window.addEventListener('scroll', () => {
|
||
const scrollTop = window.pageYOffset;
|
||
const windowHeight = window.innerHeight;
|
||
const documentHeight = document.documentElement.scrollHeight;
|
||
|
||
// Header scroll effect
|
||
if (scrollTop > 50) {
|
||
header.classList.add('scrolled');
|
||
} else {
|
||
header.classList.remove('scrolled');
|
||
}
|
||
|
||
// Progress bar
|
||
const scrollProgress = (scrollTop / (documentHeight - windowHeight)) * 100;
|
||
navProgress.style.width = scrollProgress + '%';
|
||
|
||
// Scroll to top button
|
||
if (scrollTop > 300) {
|
||
scrollToTopBtn.classList.add('show');
|
||
} else {
|
||
scrollToTopBtn.classList.remove('show');
|
||
}
|
||
});
|
||
|
||
// Scroll to top functionality
|
||
scrollToTopBtn.addEventListener('click', () => {
|
||
window.scrollTo({
|
||
top: 0,
|
||
behavior: 'smooth'
|
||
});
|
||
});
|
||
|
||
// Mobile navigation toggle
|
||
mobileNavToggle.addEventListener('click', () => {
|
||
mobileNavToggle.classList.toggle('active');
|
||
mainNav.classList.toggle('active');
|
||
});
|
||
|
||
// Close mobile nav when clicking on a link
|
||
document.querySelectorAll('.nav-link').forEach(link => {
|
||
link.addEventListener('click', () => {
|
||
mobileNavToggle.classList.remove('active');
|
||
mainNav.classList.remove('active');
|
||
});
|
||
});
|
||
|
||
// Active page highlighting
|
||
const currentPath = window.location.pathname;
|
||
document.querySelectorAll('.nav-link').forEach(link => {
|
||
if (link.getAttribute('href') === currentPath) {
|
||
link.classList.add('active');
|
||
}
|
||
});
|
||
|
||
// Smooth scroll for anchor links
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// Newsletter popup with delay
|
||
setTimeout(function() {
|
||
showNewsletter();
|
||
}, 3500);
|
||
|
||
// Newsletter Functions
|
||
function showNewsletter() {
|
||
const popup = document.getElementById('newsletter-popup');
|
||
if (popup && !localStorage.getItem('newsletterShown')) {
|
||
popup.classList.add('show');
|
||
localStorage.setItem('newsletterShown', 'true');
|
||
}
|
||
}
|
||
|
||
function closeNewsletter() {
|
||
const popup = document.getElementById('newsletter-popup');
|
||
if (popup) {
|
||
popup.classList.add('hide');
|
||
setTimeout(() => {
|
||
popup.classList.remove('show', 'hide');
|
||
}, 600);
|
||
}
|
||
}
|
||
|
||
function handleNewsletterSubmit(event) {
|
||
event.preventDefault();
|
||
|
||
const form = event.target;
|
||
const email = document.getElementById('newsletterEmail').value;
|
||
const submitBtn = document.getElementById('newsletterSubmit');
|
||
const btnText = submitBtn.querySelector('.btn-text');
|
||
const btnLoading = submitBtn.querySelector('.btn-loading');
|
||
|
||
// Validate email
|
||
if (!isValidEmail(email)) {
|
||
showNewsletterError('Bitte gib eine gültige E-Mail-Adresse ein.');
|
||
return;
|
||
}
|
||
|
||
// Show loading state
|
||
submitBtn.classList.add('loading');
|
||
btnText.style.display = 'none';
|
||
btnLoading.style.display = 'inline';
|
||
|
||
// Simulate API call (replace with actual endpoint)
|
||
setTimeout(() => {
|
||
// Simulate success
|
||
showNewsletterSuccess();
|
||
|
||
// Reset form
|
||
form.reset();
|
||
submitBtn.classList.remove('loading');
|
||
btnText.style.display = 'inline';
|
||
btnLoading.style.display = 'none';
|
||
|
||
// Close popup after 3 seconds
|
||
setTimeout(() => {
|
||
closeNewsletter();
|
||
}, 3000);
|
||
|
||
// Track newsletter signup
|
||
if (typeof gtag !== 'undefined') {
|
||
gtag('event', 'newsletter_signup', {
|
||
event_category: 'engagement',
|
||
event_label: 'newsletter_popup'
|
||
});
|
||
}
|
||
}, 1500);
|
||
}
|
||
|
||
function showNewsletterSuccess() {
|
||
const popup = document.getElementById('newsletter-popup');
|
||
const content = popup.querySelector('.newsletter-content');
|
||
|
||
popup.classList.add('newsletter-success');
|
||
content.innerHTML = `
|
||
<div class="newsletter-emoji">🎉</div>
|
||
<div class="newsletter-text">Willkommen in der Furry-Familie!</div>
|
||
<div class="newsletter-subtitle">Du wirst bald deine erste E-Mail von uns erhalten. Schau auch in deinen Spam-Ordner!</div>
|
||
`;
|
||
}
|
||
|
||
function showNewsletterError(message) {
|
||
const popup = document.getElementById('newsletter-popup');
|
||
const content = popup.querySelector('.newsletter-content');
|
||
|
||
popup.classList.add('newsletter-error');
|
||
content.innerHTML = `
|
||
<div class="newsletter-emoji">😔</div>
|
||
<div class="newsletter-text">Oops! Etwas ist schiefgelaufen</div>
|
||
<div class="newsletter-subtitle">${message}</div>
|
||
<button onclick="resetNewsletter()" style="margin-top: 1rem; padding: 0.5rem 1rem; border: none; border-radius: 12px; background: rgba(255,255,255,0.2); color: white; cursor: pointer;">
|
||
Erneut versuchen
|
||
</button>
|
||
`;
|
||
}
|
||
|
||
function resetNewsletter() {
|
||
const popup = document.getElementById('newsletter-popup');
|
||
popup.classList.remove('newsletter-success', 'newsletter-error');
|
||
|
||
// Reload the page to reset the newsletter
|
||
location.reload();
|
||
}
|
||
|
||
function isValidEmail(email) {
|
||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
return emailRegex.test(email);
|
||
}
|
||
|
||
// Close newsletter on escape key
|
||
document.addEventListener('keydown', function(event) {
|
||
if (event.key === "Escape") {
|
||
closeNewsletter();
|
||
}
|
||
});
|
||
|
||
// Close newsletter when clicking outside
|
||
document.addEventListener('click', function(event) {
|
||
const popup = document.getElementById('newsletter-popup');
|
||
if (popup && event.target === popup) {
|
||
closeNewsletter();
|
||
}
|
||
});
|
||
|
||
// Add scroll animation to elements
|
||
const observerOptions = {
|
||
threshold: 0.1,
|
||
rootMargin: '0px 0px -50px 0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.style.opacity = '1';
|
||
entry.target.style.transform = 'translateY(0)';
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
// Observe elements for animation
|
||
document.querySelectorAll('.service-card, .product-card, .hero').forEach(el => {
|
||
el.style.opacity = '0';
|
||
el.style.transform = 'translateY(30px)';
|
||
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||
observer.observe(el);
|
||
});
|
||
</script>
|
||
</body>
|
||
=======
|
||
<!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">
|
||
|
||
<!-- SEO Meta Tags -->
|
||
{% include 'seo/meta_tags.html' with meta_tags=meta_tags %}
|
||
|
||
<!-- Structured Data -->
|
||
{% include 'seo/structured_data.html' with structured_data=structured_data %}
|
||
|
||
<!-- Google Analytics -->
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
|
||
<script src="{% static 'js/analytics.js' %}"></script>
|
||
|
||
<title>{% block title %}Kasico Fursuit Shop{% endblock %}</title>
|
||
<link rel="stylesheet" href="/static/css/furry.css">
|
||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@700&display=swap">
|
||
{% block extra_head %}{% endblock %}
|
||
</head>
|
||
<body>
|
||
<header class="furry-header">
|
||
<div class="nav-progress"></div>
|
||
<div class="container nav-flex">
|
||
<div class="logo">
|
||
<img src="/static/images/kasico-logo.svg" alt="Kasico Logo" height="48">
|
||
</div>
|
||
|
||
<!-- Mobile Navigation Toggle -->
|
||
<button class="mobile-nav-toggle" id="mobileNavToggle">
|
||
<div class="hamburger-line"></div>
|
||
<div class="hamburger-line"></div>
|
||
<div class="hamburger-line"></div>
|
||
</button>
|
||
|
||
<nav id="mainNav">
|
||
<a href="{% url 'shop:home' %}" class="nav-link" data-page="home">🏠 Home</a>
|
||
<a href="{% url 'products:product_list' %}" class="nav-link" data-page="products">🛍️ Shop</a>
|
||
<a href="{% url 'products:gallery' %}" class="nav-link" data-page="gallery">🖼️ Galerie</a>
|
||
<a href="{% url 'products:custom_order' %}" class="nav-link" data-page="custom">🎨 Custom Orders</a>
|
||
</nav>
|
||
|
||
<div class="header-actions">
|
||
{% if user.is_authenticated %}
|
||
<span class="user-welcome">🐾 Hallo, {{ user.username }}!</span>
|
||
<a href="{% url 'products:profile' %}" class="btn furry-btn-outline">👤 Profil</a>
|
||
<a href="{% url 'logout' %}" class="btn furry-btn">🚪 Logout</a>
|
||
{% else %}
|
||
<a href="{% url 'login' %}" class="btn furry-btn">🔐 Login</a>
|
||
<a href="{% url 'register' %}" class="btn furry-btn-outline">✨ Registrieren</a>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="furry-main">
|
||
{% block content %}{% endblock %}
|
||
</main>
|
||
|
||
<!-- Scroll to Top Button -->
|
||
<button class="scroll-to-top" id="scrollToTop" title="Nach oben scrollen">
|
||
🚀
|
||
</button>
|
||
|
||
<footer class="furry-footer">
|
||
<div class="container">
|
||
<span>© 2025 Kasico Art & Design</span>
|
||
<span class="footer-links">
|
||
<a href="/impressum/">Impressum</a> |
|
||
<a href="/datenschutz/">Datenschutz</a>
|
||
</span>
|
||
</div>
|
||
</footer>
|
||
|
||
<div id="newsletter-popup" class="newsletter-popup">
|
||
<button class="newsletter-close" onclick="closeNewsletter()" title="Schließen">×</button>
|
||
<div class="newsletter-content">
|
||
<div class="newsletter-emoji">🐾</div>
|
||
<div class="newsletter-text">Verpasse keine Furry-News mehr!</div>
|
||
<div class="newsletter-subtitle">Erhalte exklusive Angebote, neue Fursuits und Insider-Updates direkt in dein Postfach!</div>
|
||
|
||
<form class="newsletter-form" id="newsletterForm" onsubmit="handleNewsletterSubmit(event)">
|
||
<input type="email"
|
||
placeholder="Deine E-Mail-Adresse"
|
||
required
|
||
id="newsletterEmail"
|
||
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$"
|
||
title="Bitte gib eine gültige E-Mail-Adresse ein">
|
||
<button type="submit" id="newsletterSubmit">
|
||
<span class="btn-text">Anmelden</span>
|
||
<span class="btn-loading" style="display: none;">Wird gesendet...</span>
|
||
</button>
|
||
</form>
|
||
|
||
<div class="newsletter-benefits">
|
||
<div class="benefit">Exklusive Rabatte und Frühbucher-Angebote</div>
|
||
<div class="benefit">Erste Infos zu neuen Fursuit-Kollektionen</div>
|
||
<div class="benefit">Tipps zur Fursuit-Pflege und -Wartung</div>
|
||
<div class="benefit">Community-Events und Meetups</div>
|
||
</div>
|
||
|
||
<div style="font-size: 0.8rem; color: #999; margin-top: 1rem;">
|
||
🔒 Deine Daten sind sicher. Abmeldung jederzeit möglich.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Sticky Navigation JavaScript -->
|
||
<script>
|
||
// Sticky Navigation Scroll Effects
|
||
const header = document.querySelector('.furry-header');
|
||
const navProgress = document.querySelector('.nav-progress');
|
||
const scrollToTopBtn = document.getElementById('scrollToTop');
|
||
const mobileNavToggle = document.getElementById('mobileNavToggle');
|
||
const mainNav = document.getElementById('mainNav');
|
||
|
||
// Scroll Event Handler
|
||
window.addEventListener('scroll', () => {
|
||
const scrollTop = window.pageYOffset;
|
||
const windowHeight = window.innerHeight;
|
||
const documentHeight = document.documentElement.scrollHeight;
|
||
|
||
// Header scroll effect
|
||
if (scrollTop > 50) {
|
||
header.classList.add('scrolled');
|
||
} else {
|
||
header.classList.remove('scrolled');
|
||
}
|
||
|
||
// Progress bar
|
||
const scrollProgress = (scrollTop / (documentHeight - windowHeight)) * 100;
|
||
navProgress.style.width = scrollProgress + '%';
|
||
|
||
// Scroll to top button
|
||
if (scrollTop > 300) {
|
||
scrollToTopBtn.classList.add('show');
|
||
} else {
|
||
scrollToTopBtn.classList.remove('show');
|
||
}
|
||
});
|
||
|
||
// Scroll to top functionality
|
||
scrollToTopBtn.addEventListener('click', () => {
|
||
window.scrollTo({
|
||
top: 0,
|
||
behavior: 'smooth'
|
||
});
|
||
});
|
||
|
||
// Mobile navigation toggle
|
||
mobileNavToggle.addEventListener('click', () => {
|
||
mobileNavToggle.classList.toggle('active');
|
||
mainNav.classList.toggle('active');
|
||
});
|
||
|
||
// Close mobile nav when clicking on a link
|
||
document.querySelectorAll('.nav-link').forEach(link => {
|
||
link.addEventListener('click', () => {
|
||
mobileNavToggle.classList.remove('active');
|
||
mainNav.classList.remove('active');
|
||
});
|
||
});
|
||
|
||
// Active page highlighting
|
||
const currentPath = window.location.pathname;
|
||
document.querySelectorAll('.nav-link').forEach(link => {
|
||
if (link.getAttribute('href') === currentPath) {
|
||
link.classList.add('active');
|
||
}
|
||
});
|
||
|
||
// Smooth scroll for anchor links
|
||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||
anchor.addEventListener('click', function (e) {
|
||
e.preventDefault();
|
||
const target = document.querySelector(this.getAttribute('href'));
|
||
if (target) {
|
||
target.scrollIntoView({
|
||
behavior: 'smooth',
|
||
block: 'start'
|
||
});
|
||
}
|
||
});
|
||
});
|
||
|
||
// Newsletter popup with delay
|
||
setTimeout(function() {
|
||
showNewsletter();
|
||
}, 3500);
|
||
|
||
// Newsletter Functions
|
||
function showNewsletter() {
|
||
const popup = document.getElementById('newsletter-popup');
|
||
if (popup && !localStorage.getItem('newsletterShown')) {
|
||
popup.classList.add('show');
|
||
localStorage.setItem('newsletterShown', 'true');
|
||
}
|
||
}
|
||
|
||
function closeNewsletter() {
|
||
const popup = document.getElementById('newsletter-popup');
|
||
if (popup) {
|
||
popup.classList.add('hide');
|
||
setTimeout(() => {
|
||
popup.classList.remove('show', 'hide');
|
||
}, 600);
|
||
}
|
||
}
|
||
|
||
function handleNewsletterSubmit(event) {
|
||
event.preventDefault();
|
||
|
||
const form = event.target;
|
||
const email = document.getElementById('newsletterEmail').value;
|
||
const submitBtn = document.getElementById('newsletterSubmit');
|
||
const btnText = submitBtn.querySelector('.btn-text');
|
||
const btnLoading = submitBtn.querySelector('.btn-loading');
|
||
|
||
// Validate email
|
||
if (!isValidEmail(email)) {
|
||
showNewsletterError('Bitte gib eine gültige E-Mail-Adresse ein.');
|
||
return;
|
||
}
|
||
|
||
// Show loading state
|
||
submitBtn.classList.add('loading');
|
||
btnText.style.display = 'none';
|
||
btnLoading.style.display = 'inline';
|
||
|
||
// Simulate API call (replace with actual endpoint)
|
||
setTimeout(() => {
|
||
// Simulate success
|
||
showNewsletterSuccess();
|
||
|
||
// Reset form
|
||
form.reset();
|
||
submitBtn.classList.remove('loading');
|
||
btnText.style.display = 'inline';
|
||
btnLoading.style.display = 'none';
|
||
|
||
// Close popup after 3 seconds
|
||
setTimeout(() => {
|
||
closeNewsletter();
|
||
}, 3000);
|
||
|
||
// Track newsletter signup
|
||
if (typeof gtag !== 'undefined') {
|
||
gtag('event', 'newsletter_signup', {
|
||
event_category: 'engagement',
|
||
event_label: 'newsletter_popup'
|
||
});
|
||
}
|
||
}, 1500);
|
||
}
|
||
|
||
function showNewsletterSuccess() {
|
||
const popup = document.getElementById('newsletter-popup');
|
||
const content = popup.querySelector('.newsletter-content');
|
||
|
||
popup.classList.add('newsletter-success');
|
||
content.innerHTML = `
|
||
<div class="newsletter-emoji">🎉</div>
|
||
<div class="newsletter-text">Willkommen in der Furry-Familie!</div>
|
||
<div class="newsletter-subtitle">Du wirst bald deine erste E-Mail von uns erhalten. Schau auch in deinen Spam-Ordner!</div>
|
||
`;
|
||
}
|
||
|
||
function showNewsletterError(message) {
|
||
const popup = document.getElementById('newsletter-popup');
|
||
const content = popup.querySelector('.newsletter-content');
|
||
|
||
popup.classList.add('newsletter-error');
|
||
content.innerHTML = `
|
||
<div class="newsletter-emoji">😔</div>
|
||
<div class="newsletter-text">Oops! Etwas ist schiefgelaufen</div>
|
||
<div class="newsletter-subtitle">${message}</div>
|
||
<button onclick="resetNewsletter()" style="margin-top: 1rem; padding: 0.5rem 1rem; border: none; border-radius: 12px; background: rgba(255,255,255,0.2); color: white; cursor: pointer;">
|
||
Erneut versuchen
|
||
</button>
|
||
`;
|
||
}
|
||
|
||
function resetNewsletter() {
|
||
const popup = document.getElementById('newsletter-popup');
|
||
popup.classList.remove('newsletter-success', 'newsletter-error');
|
||
|
||
// Reload the page to reset the newsletter
|
||
location.reload();
|
||
}
|
||
|
||
function isValidEmail(email) {
|
||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||
return emailRegex.test(email);
|
||
}
|
||
|
||
// Close newsletter on escape key
|
||
document.addEventListener('keydown', function(event) {
|
||
if (event.key === "Escape") {
|
||
closeNewsletter();
|
||
}
|
||
});
|
||
|
||
// Close newsletter when clicking outside
|
||
document.addEventListener('click', function(event) {
|
||
const popup = document.getElementById('newsletter-popup');
|
||
if (popup && event.target === popup) {
|
||
closeNewsletter();
|
||
}
|
||
});
|
||
|
||
// Add scroll animation to elements
|
||
const observerOptions = {
|
||
threshold: 0.1,
|
||
rootMargin: '0px 0px -50px 0px'
|
||
};
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.style.opacity = '1';
|
||
entry.target.style.transform = 'translateY(0)';
|
||
}
|
||
});
|
||
}, observerOptions);
|
||
|
||
// Observe elements for animation
|
||
document.querySelectorAll('.service-card, .product-card, .hero').forEach(el => {
|
||
el.style.opacity = '0';
|
||
el.style.transform = 'translateY(30px)';
|
||
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
|
||
observer.observe(el);
|
||
});
|
||
</script>
|
||
</body>
|
||
>>>>>>> 5b9b867963eca600ed64b617dc2dc86c30dbd9cb
|
||
</html> |