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

15 lines
14 KiB
Text
Raw Permalink Normal View History

first
2026-06-17 21:26:21 +00:00
<!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-op
<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 Copy permalink