sascha/Emy
1
0
Fork 0
mirror of https://github.com/superschnups/Emy.git synced 2026-06-22 03:13:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions
Emy/public/neu/index.html

27 lines
20 KiB
HTML
Raw Normal View History

first
2026-06-17 21:26:21 +00:00
<!doctype html><html class=scroll-smooth lang=de><head><meta name=generator content="Hugo 0.161.1"><meta charset=utf-8><meta content="width=device-width,initial-scale=1" name=viewport><title>EmyKarate | EmyKarate</title><link href=https://fonts.googleapis.com rel=preconnect><link crossorigin href=https://fonts.gstatic.com rel=preconnect><link href="https://fonts.googleapis.com/css2?family=Lexend:wght@300;400;500;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 src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script><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-text-shadow{text-shadow:0 10px 30px rgba(179,0,101,.2)}</style></head><body class="bg-surface font-body text-on-surface overflow-x-hidden"><nav 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"><img src=/emy_karate_logo.png alt="Emy Karate Logo" class="h-16 w-16 md:h-20 md:w-20 object-contain group-hover:scale-110 group-hover:opacity-80 transition-all duration-300">
<span>EmyKarate</span></a><div class="hidden md:flex items-center gap-8"><a class="text-pink-600 dark:text-pink-400 border-b-2 border-pink-500 pb-1 font-headline tracking-tight uppercase font-bold transition-colors duration-300" href=/>Home</a>
<a class="text-zinc-600 dark:text-zinc-400 font-medium font-headline tracking-tight uppercase hover:text-pink-500 dark:hover:text-pink-300 transition-colors duration-300" href=/galerie/>Galerie</a>
<a class="text-zinc-600 dark:text-zinc-400 font-medium font-headline tracking-tight uppercase hover:text-pink-500 dark:hover:text-pink-300 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 dark:hover:text-pink-300 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 dark:hover:text-pink-300 transition-colors duration-300" href=/gaestebuch/>Gästebuch</a></div><div class="flex items-center gap-4"><button onclick='document.getElementById("kontaktModal").classList.remove("hidden")' 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 scale-95 active:scale-90 transition-transform">
Kontakt
</button>
<button onclick=toggleMobileMenu() class="md:hidden 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()>Home</a>
<a href=/galerie/ onclick=toggleMobileMenu()>Galerie</a>
<a href=/uebermich/ onclick=toggleMobileMenu()>Über mich</a>
<a href=/erfolge/ onclick=toggleMobileMenu()>Erfolge</a>
<a href=/gaestebuch/ onclick=toggleMobileMenu()>Gästebuch</a></div></div><main class=pt-20><section class="relative min-h-[921px] flex items-center overflow-hidden bg-surface"><div class="absolute -right-20 top-20 w-[600px] h-[600px] bg-secondary-container/20 rounded-full blur-[120px]"></div><div class="max-w-screen-2xl mx-auto px-6 md:px-12 grid grid-cols-1 lg:grid-cols-12 gap-12 items-center relative z-10"><div class="lg:col-span-6 order-2 lg:order-1"><span class="inline-block px-4 py-1 rounded-full bg-secondary-container text-on-secondary-container text-sm font-bold tracking-widest uppercase mb-6 font-label">MEINE REISE IN KATA</span><h1 class="text-6xl md:text-8xl font-headline font-black text-on-surface leading-[0.9] editorial-text-shadow mb-8 italic">EmyKarate</h1><p class="text-xl text-on-surface-variant max-w-lg mb-10 leading-relaxed font-body">Entdecke die Welt des Karate durch meine Augen. Von den ersten Schritten im Dojo bis hin zu nationalen Meisterschaften – hier teile ich meine Leidenschaft für Bewegung, Disziplin und Erfolg.</p><div class="flex flex-wrap gap-4"><a href=/uebermich/ class="bg-gradient-to-br from-primary to-primary-container text-on-primary px-10 py-5 rounded-xl font-bold font-headline text-lg shadow-xl shadow-primary/20 hover:scale-105 active:scale-95 transition-all text-center">Erfahre mehr
</a><a href=/galerie/ class="px-10 py-5 rounded-xl font-bold font-headline text-lg text-primary border-2 border-primary/20 hover:bg-primary/5 transition-all text-center">Galerie ansehen</a></div></div><div class="lg:col-span-6 order-1 lg:order-2 relative"><div class="relative w-full aspect-square rounded-xl overflow-hidden shadow-2xl shadow-primary/10 rotate-3 hover:rotate-0 transition-transform duration-700"><img alt="Miya beim Karate-Tritt" class="w-full h-full object-cover" src=/hero/hero.webp><div class="absolute bottom-8 -left-8 bg-white/40 backdrop-blur-xl p-6 rounded-lg shadow-xl border border-white/20 -rotate-6"><div class="flex items-center gap-4"><div class="w-12 h-12 bg-secondary rounded-full flex items-center justify-center text-white"><span class=material-symbols-outlined style="font-variation-settings:'FILL' 1">stars</span></div><div><p class="font-headline font-bold text-on-surface uppercase leading-none">Grüngurt</p><p class="text-xs text-on-surface-variant uppercase tracking-widest mt-1">Status 2026</p></div></div></div></div></div></div></section><section class="bg-surface-container-low py-16"><div class="max-w-7xl mx-auto px-6 flex flex-wrap justify-around gap-12 text-center"><div><h3 class="text-5xl font-black font-headline text-primary">7+</h3><p class="text-sm font-label uppercase tracking-widest text-on-surface-variant mt-2">Jahre Training</p></div><div><h3 class="text-5xl font-black font-headline text-secondary">1</h3><p class="text-sm font-label uppercase tracking-widest text-on-surface-variant mt-2">Gold Medaillen</p></div><div><h3 class="text-5xl font-black font-headline text-primary-dim">11</h3><p class="text-sm font-label uppercase tracking-widest text-on-surface-variant mt-2">Turniere</p></div></div></section><section class="py-24 max-w-7xl mx-auto px-6"><div class=mb-16><span class="text-primary font-bold tracking-widest uppercase text-sm font-label">Die neuesten Erfolge</span><h2 class="text-5xl font-black font-headline mt-4">Meine Highlights</h2></div><div class="grid grid-cols-1 md:grid-cols-12 gap-8"><div class="md:col-span-12 bg-surface-container-lowest rounded-xl shadow-sm group hover:shadow-xl transition-all duration-500 overflow-hidden relative success-card"><div class="p-8 relative z-10"><span class="bg-secondary text-white px-4 py-1 rounded-full text-xs font-bold uppercase tracking-widest">Gold</span><h3 class="text-3xl font-black font-headline mt-6 mb-4">Landesmeisterschaft Berlin 2024</h3><p class="text-on-surface-variant mb-8 max-w-md">Erster Platz in der Kategorie Kata U14 bei der Berliner Landesmeisterschaft. Ein unvergesslicher Moment!</p><button onclick=toggleSuccess(this) class="flex items-center gap-2 text-primary font-bold hover:gap-4 transition-all">
<span class=btn-label>Bericht lesen</span> <span class="material-symbols-outlined transition-transform duration-300">expand_more</span></button></div><div class="success-body overflow-hidden transition-all duration-500 ease-in-out" style=max-height:0><div class="px-8 pb-8 border-t border-surface-container-high"><div class="pt-6 text-on-surface-variant leading-relaxed space-y-4 text-base"><p>Es war ein langer Weg bis zur Landesmeisterschaft. Monatelang haben wir jeden Tag trainiert, die Kata immer wieder verfeinert. Und dann dieser Moment auf der Matte&mldr;</p><div class="mt-8 flex gap-4 overflow-x-auto pb-4 snap-x"><div class="shrink-0 snap-start relative"><img src=/erfolge-img/success-landesmeisterschaft-2024-1778536783289-lv750.webp class="h-24 w-24 md:h-32 md:w-32 object-cover rounded-xl cursor-pointer hover:opacity-80 transition-opacity editorial-shadow" onclick=openLightbox(this.src,!1)></div><div class="shrink-0 snap-start relative"><img src=/erfolge-img/success-landesmeisterschaft-2024-1778536783364-ykhep.webp class="h-24 w-24 md:h-32 md:w-32 object-cover rounded-xl cursor-pointer hover:opacity-80 transition-opacity editorial-shadow" onclick=openLightbox(this.src,!1)></div><div class="shrink-0 snap-start relative"><img src=/erfolge-img/success-landesmeisterschaft-2024-1778536783524-58ch3.webp class="h-24 w-24 md:h-32 md:w-32 object-cover rounded-xl cursor-pointer hover:opacity-80 transition-opacity editorial-shadow" onclick=openLightbox(this.src,!1)></div><div class="shrink-0 snap-start relative"><img src=/erfolge-img/success-landesmeisterschaft-2024-1778536783576-qd5nb.webp class="h-24 w-24 md:h-32 md:w-32 object-cover rounded-xl cursor-pointer hover:opacity-80 transition-opacity editorial-shadow" onclick=openLightbox(this.src,!1)></div></div></div><a href=/erfolge/ class="inline-flex items-center gap-2 mt-6 text-sm font-bold text-primary hover:underline">Alle Erfolge im Detail ansehen <span class="material-symbols-outlined text-sm">arrow_forward</span></a></div></div><div class="absolute right-0 top-0 w-1/3 h-full opacity-10 group-hover:opacity-20 group-hover:scale-110 transition-all duration-700 pointer-events-none"><img alt="Landesmeisterschaft Berlin 2024" class="w-full h-full object-cover grayscale brightness-50" src=/erfolge-img/success-landesmeisterschaft-2024-1778536783289-lv750.webp></div></div></div><div class=mt-12><a href=/erfolge/ class="block h-64 md:h-80 rounded-xl overflow-hidden relative group editorial-shadow"><img alt="Alle Erfolge ansehen" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-1000 grayscale group-hover:grayscale-0" src=https://lh3.googleusercontent.com/aida-public/AB6AXuAxl_8pFN3p4UiOW5vHu3eUKrCj1VrD6wYTDuajtl3iHvjkNJEOLbqbWt2QL5xcC4jC8H4unZhLKoapi4aH8paj81HeIEcOZwkfBBDZyLz6vQpXOODIg4KyEBDvfGzCyJWGf_qTxRmpzgjNfLAOeKA1dCFuRq5MJGSi3gsuobQBv7cR1kGAkgMKXEMTjsKrR_ZvwVQYyb7tWPzAWfTqEt97ViRO1y05wIOMbBiqTx2qXcbzVfsdVvtyAjaMh9Wh7npl8UTJIlvMXA><div class="absolute inset-0 bg-gradient-to-t from-black/90 via-black/40 to-transparent flex items-end p-8 md:p-12"><div><h3 class="text-3xl md:text-5xl font-black font-headline text-white mb-4">Alle Erfolge entdecken</h3><div class="inline-flex items-center gap-2 bg-primary text-on-primary px-6 py-3 rounded-xl font-bold text-sm uppercase tracking-widest group-hover:bg-primary-dim transition-colors shadow-lg">Zur Übersicht <span class="material-symbols-outlined text-sm">arrow_forward</span></div></div></div></a></div></section><section class="py-24 relative overflow-hidden"><div class="absolute inset-0 bg-zinc-900 -z-10"></div><div class="max-w-7xl mx-auto px-6 text-center text-white"><h2 class="text-5xl md:text-7xl font-black font-headline italic mb-8">Bereit für mehr <span class=text-primary-fixed>Action?</span></h2><p class="text-xl text-zinc-400 max-w-2xl mx-auto mb-12">Schau dir hunderte Fotos von Trainingseinheiten, Turnieren und Reisen in meiner großen Galerie an.</p><a class="inline-flex items-center gap-4 bg-primary text-white px-12 py-6 rounded-full font-black font-headline text-xl hover:bg-primary-di
<span class="material-symbols-outlined group-hover:translate-x-2 transition-transform">auto_awesome_motion</span></a></div><div class="absolute top-1/2 left-0 -translate-y-1/2 opacity-5 pointer-events-none whitespace-nowrap"><span class="text-[200px] font-black font-headline italic text-white uppercase tracking-tighter">GALLERY GALLERY GALLERY</span></div></section></main><footer class="w-full rounded-t-[3rem] mt-20 bg-zinc-50 dark:bg-zinc-950"><div class="flex flex-col md:flex-row justify-between items-center py-12 px-8 max-w-7xl mx-auto gap-6"><div class="text-lg font-bold text-zinc-900 dark:text-zinc-100 font-headline uppercase italic">EmyKarate</div><div class="flex gap-8 text-sm tracking-wide"><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-sm tracking-wide text-zinc-500">© 2024 EmyKarate. Alle Rechte vorbehalten.</div></div></footer><div id=kontaktModal class="hidden fixed inset-0 z-[100] flex items-center justify-center p-4"><div class="absolute inset-0 bg-black/50 backdrop-blur-sm" onclick=closeKontakt()></div><div class="relative bg-white rounded-2xl shadow-2xl w-full max-w-lg p-8 animate-none"><div class="flex items-start justify-between mb-8"><div><span class="inline-block px-3 py-1 rounded-full bg-secondary-container text-on-secondary-container text-xs font-bold tracking-widest uppercase mb-3 font-label">Schreib mir</span><h2 class="text-3xl font-black font-headline text-on-surface italic">Kontakt</h2></div><button onclick=closeKontakt() class="text-on-surface-variant hover:text-on-surface transition-colors mt-1">
<span class=material-symbols-outlined>close</span></button></div><form id=kontaktForm class=space-y-4 onsubmit=submitKontakt(event)><div><label class="block text-sm font-bold text-on-surface-variant mb-1.5 font-label uppercase tracking-wide">Name</label>
<input type=text name=name required placeholder="Dein Name" class="w-full border-2 border-outline-variant rounded-xl px-4 py-3 text-on-surface focus:outline-none focus:border-primary transition-colors font-body"></div><div><label class="block text-sm font-bold text-on-surface-variant mb-1.5 font-label uppercase tracking-wide">E-Mail</label>
<input type=email name=email required placeholder=deine@email.de class="w-full border-2 border-outline-variant rounded-xl px-4 py-3 text-on-surface focus:outline-none focus:border-primary transition-colors font-body"></div><div><label class="block text-sm font-bold text-on-surface-variant mb-1.5 font-label uppercase tracking-wide">Nachricht</label>
<textarea name=message required rows=4 placeholder="Deine Nachricht..." class="w-full border-2 border-outline-variant rounded-xl px-4 py-3 text-on-surface focus:outline-none focus:border-primary transition-colors font-body resize-none"></textarea></div><div id=kontaktStatus class="hidden text-sm font-bold text-center py-2 rounded-xl"></div><button type=submit id=kontaktBtn class="w-full py-4 rounded-xl font-black font-headline text-lg bg-gradient-to-br from-primary to-primary-container text-on-primary shadow-lg shadow-primary/20 hover:scale-[1.02] active:scale-95 transition-transform">
Absenden</button></form></div></div><div id=imageLightbox class="hidden fixed inset-0 z-[100] flex items-center justify-center p-4 bg-black/90 backdrop-blur-sm transition-opacity" onclick=closeLightbox(event)><img id=lightboxImage src class="hidden max-w-[90vw] max-h-[90vh] object-contain rounded-xl shadow-2xl">
<video id=lightboxVideo src class="hidden max-w-[90vw] max-h-[90vh] object-contain rounded-xl shadow-2xl" controls autoplay></video>
<button class="absolute top-8 right-8 text-white bg-white/10 hover:bg-white/20 rounded-full p-2" onclick=closeLightbox(event,!0)>
<span class="material-symbols-outlined text-3xl">close</span></button></div><script>function openLightbox(e,t){const s=document.getElementById("lightboxImage"),n=document.getElementById("lightboxVideo");t?(s.classList.add("hidden"),n.classList.remove("hidden"),n.src=e):(n.classList.add("hidden"),n.pause(),s.classList.remove("hidden"),s.src=e),document.getElementById("imageLightbox").classList.remove("hidden")}function closeLightbox(e,t){(t||e.target.id==="imageLightbox")&&(document.getElementById("imageLightbox").classList.add("hidden"),document.getElementById("lightboxVideo").pause())}function closeKontakt(){document.getElementById("kontaktModal").classList.add("hidden"),document.getElementById("kontaktForm").reset(),document.getElementById("kontaktStatus").classList.add("hidden"),document.getElementById("kontaktBtn").disabled=!1,document.getElementById("kontaktBtn").textContent="Absenden"}document.addEventListener("keydown",e=>{e.key==="Escape"&&closeKontakt()});async function submitKontakt(e){e.preventDefault();const n=document.getElementById("kontaktBtn"),t=document.getElementById("kontaktStatus"),s=document.getElementById("kontaktForm");n.disabled=!0,n.textContent="Wird gesendet…";const o=Object.fromEntries(new FormData(s));try{const i=await fetch("https://formsubmit.co/ajax/hallo@emy-karate.de",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify(o)}),e=await i.json();if(e.success==="true"||e.success===!0)t.textContent="✓ Nachricht gesendet! Ich melde mich bald.",t.className="text-sm font-bold text-center py-2 rounded-xl bg-green-50 text-green-700",t.classList.remove("hidden"),s.reset(),n.textContent="Gesendet!";else throw new Error}catch{t.textContent="✗ Fehler beim Senden. Bitte versuche es später nochmal.",t.className="text-sm font-bold text-center py-2 rounded-xl bg-red-50 text-red-700",t.classList.remove("hidden"),n.disabled=!1,n.textContent="Absenden"}}function toggleSuccess(e){var o=e.closest(".success-card"),t=o.querySelector(".success-body"),n=e.querySelector(".material-symbols-outlined"),s=e.querySelector(".btn-label");!t.style.maxHeight||t.style.maxHeight==="0px"?(t.style.maxHeight=t.scrollHeight+"px",n.style.transform="rotate(180deg)",s.textContent="Weniger anzeigen"):(t.style.maxHeight="0",n.style.transform="",s.textContent="Bericht lesen")}function toggleMobileMenu(){var e=document.getElementById("mobileMenu");e&&e.classList.toggle("hidden")}</script></body></html>
Reference in a new issue Copy permalink