mirror of
https://github.com/superschnups/Emy.git
synced 2026-06-21 19:03:17 +00:00
363 lines
19 KiB
HTML
363 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html class="scroll-smooth" lang="de">
|
||
<head><script src="/livereload.js?mindelay=10&v=2&port=1313&path=livereload" data-no-instant defer></script>
|
||
<meta charset="utf-8"/>
|
||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||
<title>Galerie | EmyKarate</title>
|
||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&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": ["Outfit", "Lexend"], "body": ["Outfit", "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; }
|
||
|
||
|
||
.nav-link-modern {
|
||
position: relative;
|
||
padding-bottom: 4px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.nav-link-modern .jap-text {
|
||
position: absolute;
|
||
top: -24px;
|
||
font-size: 1rem;
|
||
font-family: 'Noto Serif JP', serif;
|
||
opacity: 0;
|
||
transform: translateY(5px);
|
||
transition: all 0.3s ease;
|
||
color: #b30065;
|
||
white-space: nowrap;
|
||
font-weight: 900;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
.nav-link-modern:hover .jap-text {
|
||
opacity: 0.6;
|
||
transform: translateY(0);
|
||
}
|
||
.nav-link-modern.active .jap-text {
|
||
opacity: 0.8;
|
||
transform: translateY(0);
|
||
}
|
||
.header-floating {
|
||
top: 1rem;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: calc(100% - 2rem);
|
||
border-radius: 1.5rem;
|
||
height: 6rem;
|
||
transition: all 0.3s ease;
|
||
}
|
||
.header-scrolled {
|
||
top: 0;
|
||
width: 100%;
|
||
border-radius: 0;
|
||
height: 5rem;
|
||
background: rgba(255, 255, 255, 0.9) !important;
|
||
}
|
||
.btn-glow {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.btn-glow::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -50%;
|
||
left: -50%;
|
||
width: 200%;
|
||
height: 200%;
|
||
background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
|
||
transform: scale(0);
|
||
transition: transform 0.6s ease-out;
|
||
}
|
||
.btn-glow:hover::before {
|
||
transform: scale(1);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-surface font-body text-on-surface selection:bg-primary-container selection:text-on-primary-container">
|
||
|
||
<nav id="mainNav" class="fixed z-50 bg-white/80 dark:bg-zinc-900/80 backdrop-blur-xl shadow-2xl shadow-pink-500/10 header-floating border border-white/20 dark:border-zinc-800/50">
|
||
<div class="flex justify-between items-center h-full px-6 md:px-10 max-w-screen-2xl mx-auto">
|
||
<a href="/" class="flex items-center gap-2 group transition-all duration-500">
|
||
<div class="w-10 h-10 bg-gradient-to-br from-primary to-primary-container rounded-lg flex items-center justify-center text-white shadow-lg group-hover:rotate-12 transition-transform">
|
||
<span class="material-symbols-outlined text-xl" style="font-variation-settings:'FILL' 1">sports_martial_arts</span>
|
||
</div>
|
||
<span class="text-xl font-black text-on-surface dark:text-white italic font-headline tracking-tighter uppercase">EmyKarate</span>
|
||
</a>
|
||
<div class="hidden md:flex items-center gap-10">
|
||
<a class="nav-link-modern font-bold font-headline tracking-tight uppercase text-sm hover:text-primary transition-colors text-zinc-500 dark:text-zinc-400" href="/">
|
||
<span class="relative z-10">Home</span>
|
||
<span class="jap-text">ホーム</span>
|
||
</a>
|
||
<a class="nav-link-modern font-bold font-headline tracking-tight uppercase text-sm hover:text-primary transition-colors active text-primary dark:text-pink-400" href="/galerie/">
|
||
<span class="relative z-10">Galerie</span>
|
||
<span class="jap-text">ギャラリー</span>
|
||
</a>
|
||
<a class="nav-link-modern font-bold font-headline tracking-tight uppercase text-sm hover:text-primary transition-colors text-zinc-500 dark:text-zinc-400" href="/uebermich/">
|
||
<span class="relative z-10">Über mich</span>
|
||
<span class="jap-text">私について</span>
|
||
</a>
|
||
<a class="nav-link-modern font-bold font-headline tracking-tight uppercase text-sm hover:text-primary transition-colors text-zinc-500 dark:text-zinc-400" href="/erfolge/">
|
||
<span class="relative z-10">Erfolge</span>
|
||
<span class="jap-text">成果</span>
|
||
</a>
|
||
<a class="nav-link-modern font-bold font-headline tracking-tight uppercase text-sm hover:text-primary transition-colors text-zinc-500 dark:text-zinc-400" href="/gaestebuch/">
|
||
<span class="relative z-10">Gästebuch</span>
|
||
<span class="jap-text">ゲストブック</span>
|
||
</a>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<button onclick="document.getElementById('kontaktModal').classList.remove('hidden')" class="btn-glow hidden sm:flex items-center gap-2 bg-on-surface text-white dark:bg-white dark:text-on-surface px-6 py-2.5 rounded-full font-bold font-headline tracking-tight uppercase text-xs shadow-xl hover:shadow-primary/20 hover:-translate-y-0.5 transition-all">
|
||
<span>Kontakt</span><span class="material-symbols-outlined text-sm">send</span>
|
||
</button>
|
||
<button onclick="toggleMobileMenu()" class="md:hidden w-10 h-10 flex items-center justify-center rounded-full bg-surface-container-high text-primary">
|
||
<span class="material-symbols-outlined">menu</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
|
||
<div id="mobileMenu" class="hidden fixed inset-0 z-40 bg-white dark:bg-zinc-900 p-6 pt-24">
|
||
<div class="flex flex-col gap-6 text-xl font-headline font-bold uppercase tracking-tight">
|
||
<a href="/" onclick="toggleMobileMenu()" class="nav-link-modern">Home</a>
|
||
<a href="/galerie/" onclick="toggleMobileMenu()" class="nav-link-modern">Galerie</a>
|
||
<a href="/uebermich/" onclick="toggleMobileMenu()" class="nav-link-modern">Über mich</a>
|
||
<a href="/erfolge/" onclick="toggleMobileMenu()" class="nav-link-modern">Erfolge</a>
|
||
<a href="/gaestebuch/" onclick="toggleMobileMenu()" class="nav-link-modern">Gästebuch</a>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<main class="pt-32 pb-20 px-6 max-w-7xl mx-auto">
|
||
<header class="mb-16 relative">
|
||
|
||
<span class="font-label text-sm uppercase tracking-[0.2em] font-bold text-primary mb-4 block">Visuelle Reise</span>
|
||
<h1 class="font-headline text-5xl md:text-7xl font-black text-on-surface leading-[1.1] tracking-tight mb-6">
|
||
Eingefangene<br/>
|
||
<span class="text-transparent bg-clip-text bg-gradient-to-r from-primary to-secondary">Momente</span>
|
||
</h1>
|
||
<p class="max-w-xl text-on-surface-variant text-lg leading-relaxed">
|
||
Die Kunst der Disziplin durch die Linse. Von intensiven Trainingseinheiten bis zum Triumph bei Gürtelprüfungen.
|
||
</p>
|
||
</header>
|
||
|
||
|
||
<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-all active:scale-95">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-all active:scale-95">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-all active:scale-95">Gürtelprüfungen</button>
|
||
|
||
<button data-filter="Haudrauf" 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-all active:scale-95">Haudrauf</button>
|
||
|
||
</div>
|
||
|
||
|
||
|
||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" id="galleryGrid">
|
||
|
||
<div class="gallery-item group relative aspect-square rounded-2xl overflow-hidden cursor-pointer bg-surface-container-highest shadow-sm hover:shadow-2xl transition-all duration-500"
|
||
data-kat="Haudrauf" onclick="openLightbox(this)">
|
||
<img src="/gallery/images/1778361895205-amw83.webp" alt="EF75AE9A-1670-46F8-AB04-798D22334E66" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0"/>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 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">Haudrauf</span>
|
||
<h3 class="text-white text-lg font-bold font-headline">EF75AE9A-1670-46F8-AB04-798D22334E66</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gallery-item group relative aspect-square rounded-2xl overflow-hidden cursor-pointer bg-surface-container-highest shadow-sm hover:shadow-2xl transition-all duration-500"
|
||
data-kat="Haudrauf" onclick="openLightbox(this)">
|
||
<img src="/gallery/images/1777571196788-em155.webp" alt="254E64FC-1F3E-4694-9828-28C620DB7A0D_1_105_c" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0"/>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 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">Haudrauf</span>
|
||
<h3 class="text-white text-lg font-bold font-headline">254E64FC-1F3E-4694-9828-28C620DB7A0D_1_105_c</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gallery-item group relative aspect-square rounded-2xl overflow-hidden cursor-pointer bg-surface-container-highest shadow-sm hover:shadow-2xl transition-all duration-500"
|
||
data-kat="Training" onclick="openLightbox(this)">
|
||
<img src="/gallery/images/1775774640975-43j95.webp" alt="IMG_1106" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0"/>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 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">Training</span>
|
||
<h3 class="text-white text-lg font-bold font-headline">IMG_1106</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gallery-item group relative aspect-square rounded-2xl overflow-hidden cursor-pointer bg-surface-container-highest shadow-sm hover:shadow-2xl transition-all duration-500"
|
||
data-kat="Wettkämpfe" onclick="openLightbox(this)">
|
||
<img src="/gallery/images/1775774312130-1yqrc.webp" alt="Test" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0"/>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 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">Test</h3>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="gallery-item group relative aspect-square rounded-2xl overflow-hidden cursor-pointer bg-surface-container-highest shadow-sm hover:shadow-2xl transition-all duration-500"
|
||
data-kat="Wettkämpfe" onclick="openLightbox(this)">
|
||
<img src="/gallery/images/1775774187000-q74m0.webp" alt="Test" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110 grayscale group-hover:grayscale-0"/>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-black/80 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">Test</h3>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</main>
|
||
|
||
|
||
|
||
<section class="bg-surface-container-low py-20 px-6">
|
||
|
||
|
||
<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">Hinter der Linse ha</h2>
|
||
<p class="text-on-surface-variant max-w-md">Unsere Galerie ist nicht nur Fotos – sie ist ein Zeugnis der Disziplin, die wir jeden Tag im Dojo leben.</p>
|
||
</div>
|
||
<div class="flex gap-8 overflow-x-auto pb-4 no-scrollbar w-full md:w-auto">
|
||
|
||
|
||
<div class="flex-shrink-0 text-center">
|
||
<p class="text-4xl font-black text-primary font-headline">24</p>
|
||
<p class="text-xs uppercase tracking-widest font-bold opacity-60">Turniere</p>
|
||
</div>
|
||
|
||
<div class="h-12 w-px bg-outline-variant/30 hidden md:block"></div>
|
||
<div class="flex-shrink-0 text-center">
|
||
<p class="text-4xl font-black text-secondary font-headline">20</p>
|
||
<p class="text-xs uppercase tracking-widest font-bold opacity-60">Schüler</p>
|
||
</div>
|
||
|
||
<div class="h-12 w-px bg-outline-variant/30 hidden md:block"></div>
|
||
<div class="flex-shrink-0 text-center">
|
||
<p class="text-4xl font-black text-primary font-headline">6</p>
|
||
<p class="text-xs uppercase tracking-widest font-bold opacity-60">Gürtelprüfungen</p>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
<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">
|
||
|
||
<div class="text-lg font-bold text-zinc-900 dark:text-zinc-100 font-headline uppercase italic">EmyKarate</div>
|
||
<div class="flex gap-8">
|
||
<a class="text-zinc-500 hover:text-pink-500 hover:underline transition-opacity" href="#">Instagram</a>
|
||
<a class="text-zinc-500 hover:text-pink-500 hover:underline transition-opacity" href="#">YouTube</a>
|
||
<a class="text-zinc-500 hover:text-pink-500 hover:underline transition-opacity" href="mailto:hallo@emy-karate.de">Email</a>
|
||
</div>
|
||
<div class="text-zinc-500">© 2024 EmyKarate. Alle Rechte vorbehalten.</div>
|
||
</div>
|
||
</footer>
|
||
|
||
<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();
|
||
});
|
||
|
||
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('bg-surface-container-low', !active);
|
||
});
|
||
document.querySelectorAll('.gallery-item').forEach(item => {
|
||
const show = filter === 'Alle' || item.dataset.kat === filter;
|
||
item.style.display = show ? '' : 'none';
|
||
});
|
||
});
|
||
|
||
window.addEventListener('scroll', () => {
|
||
const nav = document.getElementById('mainNav');
|
||
if (nav && window.scrollY > 50) {
|
||
nav.classList.add('header-scrolled');
|
||
} else if (nav) {
|
||
nav.classList.remove('header-scrolled');
|
||
}
|
||
});
|
||
|
||
function toggleMobileMenu() {
|
||
var menu = document.getElementById('mobileMenu');
|
||
if (menu) menu.classList.toggle('hidden');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|