sascha/Emy
1
0
Fork 0
mirror of https://github.com/superschnups/Emy.git synced 2026-06-21 19:03:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
Emy/.tmp.driveupload/57155
bonzei 16035e2754 first
2026-06-17 23:26:21 +02:00

15 lines
No EOL
14 KiB
Text
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html><html class=scroll-smooth lang=de><head><meta charset=utf-8><meta content="width=device-width,initial-scale=1" name=viewport><title>Galerie | EmyKarate verdammt</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,6%)}.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"><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="flex items-center gap-3 text-2xl font-black text-pink-600 dark:text-pink-400 italic font-headline tracking-tight uppercase group hover:opacity-80 transition-opacity"><span>EmyKarate</span></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 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-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>
<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-colors">Haudrauf</button></div><div id=photoGrid class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 mb-12"><div class="group relative overflow-hidden rounded-xl cursor-pointer aspect-square gallery-item" data-kat=Haudrauf onclick=openLightbox(this)><img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" src=/gallery/images/1778361895205-amw83-thumb.webp data-full=/gallery/images/1778361895205-amw83.webp alt=EF75AE9A-1670-46F8-AB04-798D22334E66><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="text-on-surface-variant font-bold text-xs uppercase tracking-widest mb-1">Haudrauf</span><h3 class="text-white text-sm font-bold font-headline">EF75AE9A-1670-46F8-AB04-798D22334E66</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><div class="group relative overflow-hidden rounded-xl cursor-pointer aspect-square gallery-item" data-kat=Haudrauf onclick=openLightbox(this)><img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" src=/gallery/images/1777571196788-em155-thumb.webp data-full=/gallery/images/1777571196788-em155.webp alt=254E64FC-1F3E-4694-9828-28C620DB7A0D_1_105_c><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="text-on-surface-variant font-bold text-xs uppercase tracking-widest mb-1">Haudrauf</span><h3 class="text-white text-sm font-bold font-headline">254E64FC-1F3E-4694-9828-28C620DB7A0D_1_105_c</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><div class="group relative overflow-hidden rounded-xl cursor-pointer aspect-square gallery-item" data-kat=Training onclick=openLightbox(this)><img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" src=/gallery/images/1775774640975-43j95-thumb.webp data-full=/gallery/images/1775774640975-43j95.webp alt=IMG_1106><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="text-primary-fixed font-bold text-xs uppercase tracking-widest mb-1">Training</span><h3 class="text-white text-sm font-bold font-headline">IMG_1106</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><div class="group relative overflow-hidden rounded-xl cursor-pointer aspect-square gallery-item" data-kat=Wettkämpfe onclick=openLightbox(this)><img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" src=/gallery/images/1775774312130-1yqrc-thumb.webp data-full=/gallery/images/1775774312130-1yqrc.webp alt=Test><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="text-secondary-fixed font-bold text-xs uppercase tracking-widest mb-1">Wettkämpfe</span><h3 class="text-white text-sm font-bold font-headline">Test</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><div class="group relative overflow-hidden rounded-xl cursor-pointer aspect-square gallery-item" data-kat=Wettkämpfe onclick=openLightbox(this)><img class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" src=/gallery/images/1775774187000-q74m0-thumb.webp data-full=/gallery/images/1775774187000-q74m0.webp alt=Test><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="text-secondary-fixed font-bold text-xs uppercase tracking-widest mb-1">Wettkämpfe</span><h3 class="text-white text-sm font-bold font-headline">Test</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></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 decoration-pink-500 decoration-2 underline-offset-4 transition-opacity opacity-80 hover:opacity-100" href=#>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=#>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: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(e){const t=e.querySelector("img");document.getElementById("lightbox-img").src=t.src,document.getElementById("lightbox-img").alt=t.alt;const n=document.getElementById("lightbox");n.classList.remove("hidden"),n.classList.add("flex")}function closeLightbox(){const e=document.getElementById("lightbox");e.classList.add("hidden"),e.classList.remove("flex")}document.getElementById("lightbox").addEventListener("click",function(e){e.target===this&&closeLightbox()}),document.getElementById("filterBar").addEventListener("click",function(e){const t=e.target.closest(".filter-btn");if(!t)return;const n=t.dataset.filter;document.querySelectorAll(".filter-btn").forEach(e=>{const n=e===t;e.classList.toggle("bg-secondary",n),e.classList.toggle("text-on-secondary",n),e.classList.toggle("shadow-lg",n),e.classList.toggle("shadow-secondary/20",n),e.classList.toggle("bg-surface-container-low",!n),e.classList.toggle("text-on-surface-variant",!n)}),document.querySelectorAll(".gallery-item").forEach(e=>{const t=n==="Alle"||e.dataset.kat===n;e.style.display=t?"":"none"})})</script></body></html>
Reference in a new issue View git blame Copy permalink