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
bonzei 16035e2754 first
2026-06-17 23:26:21 +02:00

27 lines
No EOL
20 KiB
HTML
Raw 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 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-dim transition-colors group" href=/galerie/>ZUR GALERIE GEHEN
<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 View git blame Copy permalink