mirror of
https://github.com/superschnups/Emy.git
synced 2026-06-22 03:13:10 +00:00
244 lines
16 KiB
HTML
244 lines
16 KiB
HTML
<!DOCTYPE html>
|
|
<html class="scroll-smooth" lang="de">
|
|
<head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Galerie | {{ .Site.Data.homepage.siteTitle | default .Site.Title }}</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;600;700;800;900&family=Be+Vietnam+Pro:wght@300;400;500;600;700&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"tertiary-container": "#ffffff", "surface-bright": "#f5f6f7",
|
|
"on-tertiary-container": "#636262", "error-dim": "#a70138",
|
|
"on-surface-variant": "#595c5d", "surface-tint": "#b30065",
|
|
"surface-container-highest": "#dadddf", "on-secondary-fixed-variant": "#7d21a4",
|
|
"inverse-on-surface": "#9b9d9e", "inverse-surface": "#0c0f10",
|
|
"surface-container": "#e6e8ea", "surface": "#f5f6f7",
|
|
"primary-fixed": "#ff6ea9", "surface-container-low": "#eff1f2",
|
|
"secondary": "#8930b0", "tertiary": "#5c5b5b",
|
|
"on-secondary": "#ffedff", "secondary-dim": "#7c20a3",
|
|
"secondary-container": "#f0c1ff", "surface-dim": "#d1d5d7",
|
|
"primary": "#b30065", "on-primary-fixed": "#000000",
|
|
"surface-container-high": "#e0e3e4", "primary-fixed-dim": "#ff4e9e",
|
|
"primary-dim": "#9d0058", "outline": "#757778",
|
|
"error": "#b41340", "outline-variant": "#abadae",
|
|
"secondary-fixed": "#f0c1ff", "secondary-fixed-dim": "#eaaeff",
|
|
"tertiary-fixed-dim": "#f3f0ef", "on-surface": "#2c2f30",
|
|
"on-tertiary-fixed-variant": "#6e6d6d", "on-tertiary": "#f5f2f1",
|
|
"tertiary-fixed": "#ffffff", "background": "#f5f6f7",
|
|
"on-primary": "#ffeff2", "surface-container-lowest": "#ffffff",
|
|
"inverse-primary": "#ff479c", "primary-container": "#ff6ea9",
|
|
"on-primary-fixed-variant": "#5c0031", "on-secondary-container": "#72129a",
|
|
"error-container": "#f74b6d", "surface-variant": "#dadddf",
|
|
"on-background": "#2c2f30", "on-error": "#ffefef",
|
|
"on-tertiary-fixed": "#515050", "tertiary-dim": "#504f4f",
|
|
"on-primary-container": "#4b0027", "on-secondary-fixed": "#580079",
|
|
"on-error-container": "#510017"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "1rem", "lg": "2rem", "xl": "3rem", "full": "9999px"
|
|
},
|
|
"fontFamily": {
|
|
"headline": ["Lexend"], "body": ["Be Vietnam Pro"], "label": ["Be Vietnam Pro"]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
|
|
.editorial-shadow { box-shadow: 0 24px 40px -12px rgba(44, 47, 48, 0.06); }
|
|
.no-scrollbar::-webkit-scrollbar { display: none; }
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface font-body text-on-surface selection:bg-primary-container selection:text-on-primary-container">
|
|
|
|
<!-- TopAppBar -->
|
|
<header class="fixed top-0 left-0 w-full z-50 bg-white/70 dark:bg-zinc-900/70 backdrop-blur-lg shadow-xl shadow-pink-500/5">
|
|
<div class="flex justify-between items-center h-20 px-6 md:px-12 max-w-screen-2xl mx-auto">
|
|
<a href="/" class="text-2xl font-black text-pink-600 dark:text-pink-400 italic font-headline tracking-tight uppercase">{{ .Site.Data.homepage.siteTitle | default .Site.Title }}</a>
|
|
<nav class="hidden md:flex items-center gap-8">
|
|
<a class="text-zinc-600 dark:text-zinc-400 font-medium font-headline tracking-tight uppercase hover:text-pink-500 transition-colors duration-300" href="/">Home</a>
|
|
<a class="text-pink-600 dark:text-pink-400 border-b-2 border-pink-500 pb-1 font-headline tracking-tight uppercase font-bold" href="/galerie/">Galerie</a>
|
|
<a class="text-zinc-600 dark:text-zinc-400 font-medium font-headline tracking-tight uppercase hover:text-pink-500 transition-colors duration-300" href="/uebermich/">Über mich</a>
|
|
<a class="text-zinc-600 dark:text-zinc-400 font-medium font-headline tracking-tight uppercase hover:text-pink-500 transition-colors duration-300" href="/erfolge/">Erfolge</a>
|
|
<a class="text-zinc-600 dark:text-zinc-400 font-medium font-headline tracking-tight uppercase hover:text-pink-500 transition-colors duration-300" href="/gaestebuch/">Gästebuch</a>
|
|
</nav>
|
|
<button class="bg-gradient-to-br from-primary to-primary-container text-on-primary px-8 py-3 rounded-xl font-bold font-headline tracking-tight uppercase active:scale-90 transition-transform">
|
|
Kontakt
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="pt-32 pb-20 px-6 max-w-7xl mx-auto">
|
|
<!-- Header -->
|
|
<header class="mb-16 relative">
|
|
{{ $gal := .Site.Data.galerie }}
|
|
<span class="font-label text-sm uppercase tracking-[0.2em] font-bold text-primary mb-4 block">{{ $gal.hero.badge }}</span>
|
|
<h1 class="font-headline text-5xl md:text-7xl font-black text-on-surface leading-[1.1] tracking-tight mb-6">
|
|
{{ $gal.hero.heading_main }} <br/><span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">{{ $gal.hero.heading_colored }}</span>
|
|
</h1>
|
|
<p class="max-w-xl text-on-surface-variant text-lg leading-relaxed">
|
|
{{ $gal.hero.description }}
|
|
</p>
|
|
</header>
|
|
|
|
<!-- Filter -->
|
|
<div class="flex flex-wrap items-center gap-3 mb-12" id="filterBar">
|
|
<button data-filter="Alle" class="filter-btn px-6 py-3 rounded-full bg-secondary text-on-secondary font-bold text-sm tracking-wide shadow-lg shadow-secondary/20 active:scale-95 transition-transform">Alle</button>
|
|
<button data-filter="Training" class="filter-btn px-6 py-3 rounded-full bg-surface-container-low text-on-surface-variant font-bold text-sm tracking-wide hover:bg-surface-container-high transition-colors">Training</button>
|
|
<button data-filter="Wettkämpfe" class="filter-btn px-6 py-3 rounded-full bg-surface-container-low text-on-surface-variant font-bold text-sm tracking-wide hover:bg-surface-container-high transition-colors">Wettkämpfe</button>
|
|
<button data-filter="Gürtelprüfungen" class="filter-btn px-6 py-3 rounded-full bg-surface-container-low text-on-surface-variant font-bold text-sm tracking-wide hover:bg-surface-container-high transition-colors">Gürtelprüfungen</button>
|
|
</div>
|
|
|
|
<!-- Eigene Fotos (dynamisch vom Admin) -->
|
|
{{ if .Site.Data.gallery.photos }}
|
|
<div id="photoGrid" class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-12">
|
|
{{ range .Site.Data.gallery.photos }}
|
|
{{ $katColor := "text-primary-fixed" }}
|
|
{{ if eq .kategorie "Wettkämpfe" }}{{ $katColor = "text-secondary-fixed" }}{{ end }}
|
|
{{ if eq .kategorie "Gürtelprüfungen" }}{{ $katColor = "text-primary-container" }}{{ end }}
|
|
<div class="group relative overflow-hidden rounded-xl cursor-pointer aspect-square gallery-item" data-kat="{{ .kategorie }}" onclick="openLightbox(this)">
|
|
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
|
|
src="/gallery/images/{{ .thumb }}" data-full="/gallery/images/{{ .filename }}"
|
|
alt="{{ .title }}"/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4">
|
|
<span class="{{ $katColor }} font-bold text-xs uppercase tracking-widest mb-1">{{ .kategorie }}</span>
|
|
<h3 class="text-white text-sm font-bold font-headline">{{ .title }}</h3>
|
|
</div>
|
|
<div class="absolute top-3 right-3 p-2 bg-white/20 backdrop-blur-md rounded-full text-white opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<span class="material-symbols-outlined text-lg">zoom_in</span>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
{{ else }}
|
|
<!-- Platzhalter-Bento (solange noch keine eigenen Fotos) -->
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-6 auto-rows-[250px] mb-12">
|
|
<div class="md:col-span-8 md:row-span-2 group relative overflow-hidden rounded-xl cursor-pointer" onclick="openLightbox(this)">
|
|
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
|
|
src="https://lh3.googleusercontent.com/aida-public/AB6AXuCfodpf04EOEGQf-nK3kHQTYwr9XD2AcsKt5R14MJZ3OLhsXJZGmkfG2l1YMjyPyGMl9B42kR8cSqjNPA-DNmN7C66PwajUc8IXha9UeTubW45B_wN2Gr0XWnTOqG6wzFXA8PqesKDWkAqoH1enTRjgtQOQ3X9AuZnQqkKlWr_SppBXpNody64LpAbkAYJsjqfQIwwmotKEIbP6edxW80fuf46Fc4c31e1M27SVtDPR6Rp9yvfcyCM4b_IegYAEc3NTq295pAX9Pw"
|
|
alt="High Kick Training"/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-8">
|
|
<span class="text-primary-fixed font-bold text-sm uppercase tracking-widest mb-2">Training</span>
|
|
<h3 class="text-white text-2xl font-bold font-headline">The Art of the High Kick</h3>
|
|
</div>
|
|
</div>
|
|
<div class="md:col-span-4 md:row-span-3 group relative overflow-hidden rounded-xl cursor-pointer" onclick="openLightbox(this)">
|
|
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
|
|
src="https://lh3.googleusercontent.com/aida-public/AB6AXuBkzRybmeOLCatrp_PsX09PIQuRlaH9iwtDWOoTDtVZ7VeTgz76tk3_NmyDT6L30vQaaEPa7Ir2YqTNdbb5wsXLBbAL3X-fvk9gNVgHRAoV5Qm6QPRY5S0p89zRkoAy51TZgIJEKGTv4YnoEWbI6QN0Zsvgp6xU95Ubn7x2cvN4dGbrIK2gXSralq7NVC56vUm9kA7L_L6ebOtzKGpI_6FZa_jHUr86ASTT2JMDKpQ0EmJJcUD-J4oDnsADRU7B91qTPaMmAMNvcQ"
|
|
alt="Portrait"/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-8">
|
|
<span class="text-secondary-fixed font-bold text-sm uppercase tracking-widest mb-2">Fokus</span>
|
|
<h3 class="text-white text-2xl font-bold font-headline">Vorbereitung</h3>
|
|
</div>
|
|
</div>
|
|
<div class="md:col-span-4 md:row-span-1 group relative overflow-hidden rounded-xl cursor-pointer" onclick="openLightbox(this)">
|
|
<img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
|
|
src="https://lh3.googleusercontent.com/aida-public/AB6AXuAvps_MgZKjN93kl4O8188gvviUsvhBuGlXVGvHU40hNS_Rxo1mou3qsQqlC9yDmpY0g1vv9yFf2uL3FHLZcczmZDrLdqVX3n6Cw6xjuiBmHnWEfdqEz7uBNL5tTYAhL5OvjwjzwfGLlKNJw5sL46GzGLuyEl8UKyFb8Z6VOFMO9XSH1Jm70hpY9kiGV38wv1JzNk9d0cySLSlJ1Z6EE9p5JLDILHVBREHg3VH_23pdRO5gRVCorfvfP2HgXrp8bl8o04WJD4CGXQ"
|
|
alt="Meisterschaft"/>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-6">
|
|
<span class="text-primary-fixed font-bold text-xs uppercase tracking-widest mb-1">Wettkämpfe</span>
|
|
<h3 class="text-white text-lg font-bold font-headline">Nationale Meisterschaften</h3>
|
|
</div>
|
|
</div>
|
|
<div class="md:col-span-4 md:row-span-1 bg-gradient-to-br from-secondary to-secondary-dim rounded-xl p-8 flex flex-col justify-between text-on-secondary">
|
|
<span class="material-symbols-outlined text-4xl" style="font-variation-settings: 'FILL' 1;">rewarded_ads</span>
|
|
<div>
|
|
<p class="text-xl font-bold font-headline mb-2">Deine Fotos kommen hier!</p>
|
|
<p class="text-sm opacity-80 leading-relaxed">Lad Fotos im Admin-Bereich hoch.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{ end }}
|
|
</main>
|
|
|
|
<!-- Stats Ribbon -->
|
|
<section class="bg-surface-container-low py-20 px-6">
|
|
{{ $ribbon := $gal.ribbon }}
|
|
{{ $statColors := slice "text-primary" "text-secondary" "text-primary" }}
|
|
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center gap-12">
|
|
<div class="flex-1">
|
|
<h2 class="font-headline text-3xl font-bold mb-4">{{ $ribbon.heading }}</h2>
|
|
<p class="text-on-surface-variant max-w-md">{{ $ribbon.description }}</p>
|
|
</div>
|
|
<div class="flex gap-8 overflow-x-auto pb-4 no-scrollbar w-full md:w-auto">
|
|
{{ range $i, $s := $ribbon.stats }}
|
|
{{ if gt $i 0 }}<div class="h-12 w-px bg-outline-variant/30 hidden md:block"></div>{{ end }}
|
|
<div class="flex-shrink-0 text-center">
|
|
<p class="text-4xl font-black {{ index $statColors $i }} font-headline">{{ $s.wert }}</p>
|
|
<p class="text-xs uppercase tracking-widest font-bold opacity-60">{{ $s.label }}</p>
|
|
</div>
|
|
{{ end }}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Footer -->
|
|
<footer class="bg-zinc-50 dark:bg-zinc-950 w-full rounded-t-[3rem] mt-20">
|
|
<div class="flex flex-col md:flex-row justify-between items-center py-12 px-8 max-w-7xl mx-auto gap-6 text-sm tracking-wide">
|
|
{{ $social := .Site.Data.global.social }}
|
|
<div class="text-lg font-bold text-zinc-900 dark:text-zinc-100 font-headline uppercase italic">{{ .Site.Data.homepage.siteTitle | default .Site.Title }}</div>
|
|
<div class="flex gap-8">
|
|
<a class="text-zinc-500 hover:text-pink-500 hover:underline decoration-pink-500 decoration-2 underline-offset-4 transition-opacity opacity-80 hover:opacity-100" href="{{ $social.instagram }}">Instagram</a>
|
|
<a class="text-zinc-500 hover:text-pink-500 hover:underline decoration-pink-500 decoration-2 underline-offset-4 transition-opacity opacity-80 hover:opacity-100" href="{{ $social.youtube }}">YouTube</a>
|
|
<a class="text-zinc-500 hover:text-pink-500 hover:underline decoration-pink-500 decoration-2 underline-offset-4 transition-opacity opacity-80 hover:opacity-100" href="mailto:{{ $social.email }}">Email</a>
|
|
</div>
|
|
<div class="text-zinc-500">© 2024 {{ .Site.Data.homepage.siteTitle | default .Site.Title }}. Alle Rechte vorbehalten.</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Lightbox -->
|
|
<div class="fixed inset-0 z-[100] bg-black/90 backdrop-blur-xl hidden items-center justify-center p-6 md:p-20" id="lightbox">
|
|
<button class="absolute top-10 right-10 text-white hover:text-primary transition-colors" onclick="closeLightbox()">
|
|
<span class="material-symbols-outlined text-4xl">close</span>
|
|
</button>
|
|
<img class="max-w-full max-h-full rounded-lg shadow-2xl" id="lightbox-img" src="" alt=""/>
|
|
</div>
|
|
|
|
<script>
|
|
function openLightbox(el) {
|
|
const img = el.querySelector('img');
|
|
document.getElementById('lightbox-img').src = img.src;
|
|
document.getElementById('lightbox-img').alt = img.alt;
|
|
const lb = document.getElementById('lightbox');
|
|
lb.classList.remove('hidden');
|
|
lb.classList.add('flex');
|
|
}
|
|
function closeLightbox() {
|
|
const lb = document.getElementById('lightbox');
|
|
lb.classList.add('hidden');
|
|
lb.classList.remove('flex');
|
|
}
|
|
document.getElementById('lightbox').addEventListener('click', function(e) {
|
|
if (e.target === this) closeLightbox();
|
|
});
|
|
|
|
// Filter-Logik
|
|
document.getElementById('filterBar').addEventListener('click', function(e) {
|
|
const btn = e.target.closest('.filter-btn');
|
|
if (!btn) return;
|
|
const filter = btn.dataset.filter;
|
|
document.querySelectorAll('.filter-btn').forEach(b => {
|
|
const active = b === btn;
|
|
b.classList.toggle('bg-secondary', active);
|
|
b.classList.toggle('text-on-secondary', active);
|
|
b.classList.toggle('shadow-lg', active);
|
|
b.classList.toggle('shadow-secondary/20', active);
|
|
b.classList.toggle('bg-surface-container-low', !active);
|
|
b.classList.toggle('text-on-surface-variant', !active);
|
|
});
|
|
document.querySelectorAll('.gallery-item').forEach(item => {
|
|
const show = filter === 'Alle' || item.dataset.kat === filter;
|
|
item.style.display = show ? '' : 'none';
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|