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/layouts/gaestebuch/list.html
bonzei ddbe56763d first commit
2026-04-11 23:48:34 +02:00

299 lines
19 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 charset="utf-8"/>
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
<title>Gästebuch | MiyaKarate</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
<link href="https://fonts.googleapis.com/css2?family=Lexend:wght@400;700;800;900&family=Be+Vietnam+Pro:wght@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-text { text-wrap: balance; }
.glass-card { background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(20px); }
</style>
</head>
<body class="bg-surface text-on-surface font-body selection:bg-primary-container selection:text-on-primary-container">
<!-- TopAppBar -->
<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">
<nav class="flex justify-between items-center h-20 px-6 md:px-12 max-w-screen-2xl mx-auto">
<a href="/" class="text-2xl font-black text-pink-600 dark:text-pink-400 italic font-headline tracking-tight uppercase">MiyaKarate</a>
<div 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-zinc-600 dark:text-zinc-400 font-medium font-headline tracking-tight uppercase hover:text-pink-500 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 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</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="/gaestebuch/">Gästebuch</a>
</div>
<button class="bg-gradient-to-br from-primary to-primary-container text-on-primary px-8 py-3 rounded-xl font-bold uppercase tracking-wider scale-95 active:scale-90 transition-transform shadow-lg shadow-primary/20">
Kontakt
</button>
</nav>
</header>
<main class="pt-32 pb-20">
<!-- Hero -->
<section class="max-w-7xl mx-auto px-6 mb-20">
<div class="relative rounded-xl overflow-hidden min-h-[400px] flex items-center p-8 md:p-16">
<img alt="Karate Dojo" class="absolute inset-0 w-full h-full object-cover"
src="https://lh3.googleusercontent.com/aida-public/AB6AXuDlVHSCQA9wTqwkVgz4Q76piwsWS33jFlIXlTw7TBSDubv3dQTnKkIUtU-rBAoPyO3eJ1BHdeKBNqS_CCcyhfI0XH1VHSDFSgxgH1oDxrICcX8b-GoehyY1x8udqwWfuKtSTI-nNW4i15l0HWDcVvSrtlM4u25KjM63nBbo_pfDq6f-larFS9uVzVlBn5KMcj8uioIHmQqPlVxWqlkETOL_6zr_Y-k_doAHs6brW-DdT4clT2MxJjtDFjxxr-cTzgKALEfMvTTJUg"/>
<div class="absolute inset-0 bg-gradient-to-r from-on-surface/80 via-on-surface/40 to-transparent"></div>
<div class="relative z-10 max-w-2xl">
<span class="inline-block px-4 py-1 rounded-full bg-secondary text-on-secondary font-label text-xs tracking-[0.1em] uppercase mb-4">Melde dich bei mir</span>
<h1 class="font-headline text-5xl md:text-7xl font-extrabold text-white leading-tight mb-6 tracking-tighter">
Schreib mir & <span class="text-primary-container">teile deine Geschichte</span>
</h1>
<p class="text-lg text-surface font-medium max-w-lg editorial-text">
Ob du eine Frage zu meinem Training hast oder einfach eine nette Nachricht hinterlassen möchtest – ich freue mich von dir zu hören!
</p>
</div>
</div>
</section>
<!-- Bento: Formular + Sidebar -->
<section class="max-w-7xl mx-auto px-6 grid grid-cols-1 lg:grid-cols-12 gap-8">
<!-- Kontaktformular -->
<div class="lg:col-span-7 bg-surface-container-lowest rounded-xl p-8 md:p-12 shadow-sm relative overflow-hidden">
<div class="absolute top-0 right-0 w-64 h-64 bg-primary/5 rounded-full -mr-32 -mt-32"></div>
<div class="relative z-10">
<h2 class="font-headline text-3xl font-bold mb-8 flex items-center gap-3">
<span class="material-symbols-outlined text-primary text-4xl">send</span>
Nachricht schicken
</h2>
<form class="space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-2">
<label class="text-sm font-bold font-label uppercase tracking-widest text-on-surface-variant px-1">Dein Name</label>
<input class="w-full bg-surface-container-low border-none rounded-sm focus:ring-2 focus:ring-primary/20 p-4 transition-all placeholder:text-outline-variant" placeholder="Mia Muster" type="text"/>
</div>
<div class="space-y-2">
<label class="text-sm font-bold font-label uppercase tracking-widest text-on-surface-variant px-1">E-Mail-Adresse</label>
<input class="w-full bg-surface-container-low border-none rounded-sm focus:ring-2 focus:ring-primary/20 p-4 transition-all placeholder:text-outline-variant" placeholder="hallo@beispiel.de" type="email"/>
</div>
</div>
<div class="space-y-2">
<label class="text-sm font-bold font-label uppercase tracking-widest text-on-surface-variant px-1">Betreff</label>
<div class="flex flex-wrap gap-3 py-2">
<label class="cursor-pointer">
<input checked class="hidden peer" name="subject" type="radio"/>
<span class="px-6 py-2 rounded-full border-2 border-surface-container-high peer-checked:bg-secondary peer-checked:text-on-secondary peer-checked:border-secondary transition-all text-sm font-bold">Allgemeine Frage</span>
</label>
<label class="cursor-pointer">
<input class="hidden peer" name="subject" type="radio"/>
<span class="px-6 py-2 rounded-full border-2 border-surface-container-high peer-checked:bg-secondary peer-checked:text-on-secondary peer-checked:border-secondary transition-all text-sm font-bold">Trainingstipps</span>
</label>
<label class="cursor-pointer">
<input class="hidden peer" name="subject" type="radio"/>
<span class="px-6 py-2 rounded-full border-2 border-surface-container-high peer-checked:bg-secondary peer-checked:text-on-secondary peer-checked:border-secondary transition-all text-sm font-bold">Sonstiges</span>
</label>
</div>
</div>
<div class="space-y-2">
<label class="text-sm font-bold font-label uppercase tracking-widest text-on-surface-variant px-1">Nachricht</label>
<textarea class="w-full bg-surface-container-low border-none rounded-sm focus:ring-2 focus:ring-primary/20 p-4 transition-all placeholder:text-outline-variant resize-none" placeholder="Schreib deine Nachricht hier..." rows="5"></textarea>
</div>
<button class="w-full bg-gradient-to-r from-primary to-primary-container text-on-primary py-5 rounded-xl font-headline text-xl font-bold shadow-xl shadow-primary/30 transition-transform active:scale-95">
Nachricht absenden
</button>
</form>
</div>
</div>
<!-- Sidebar -->
<div class="lg:col-span-5 flex flex-col gap-8">
<div class="bg-secondary-container text-on-secondary-container rounded-xl p-8 shadow-sm">
<h3 class="font-headline text-2xl font-bold mb-4">Direktkontakt</h3>
<div class="space-y-4">
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-on-secondary-container/10 flex items-center justify-center">
<span class="material-symbols-outlined">alternate_email</span>
</div>
<div>
<p class="text-xs font-bold uppercase opacity-60">E-Mail</p>
<p class="font-bold">hallo@miyakarate.de</p>
</div>
</div>
<div class="flex items-center gap-4">
<div class="w-12 h-12 rounded-full bg-on-secondary-container/10 flex items-center justify-center">
<span class="material-symbols-outlined">location_on</span>
</div>
<div>
<p class="text-xs font-bold uppercase opacity-60">Dojo</p>
<p class="font-bold">Kiai Dojo Berlin</p>
</div>
</div>
</div>
</div>
<!-- Neuester Eintrag -->
<div class="bg-surface-container-low rounded-xl p-8 flex-grow">
<div class="flex justify-between items-end mb-8">
<h3 class="font-headline text-2xl font-bold">Neuester Eintrag</h3>
<a class="text-primary font-bold text-sm hover:underline" href="#gaestebuch-wall">Alle ansehen</a>
</div>
<div class="glass-card p-6 rounded-lg shadow-sm border border-white/40">
<div class="flex items-center gap-4 mb-4">
<div class="w-12 h-12 rounded-full bg-surface-container-highest overflow-hidden">
<img alt="Gast Avatar" class="w-full h-full object-cover"
src="https://lh3.googleusercontent.com/aida-public/AB6AXuCyr8FcSn01QbwNHFaE4oEJCeSKkIcv6Qjd7WO_jrfclu0LeV9KMmCJ6VqttBmEZM9Cz7ddfK6gmQ8qGQmJ9YWno683_KcaFT_BhaOws3_rpcvPU2j1xquZD0bzluyw84dqcvLLIXsyqWVYMGqlAwXoW78olS5BfpuvMiBkh3bIIgo8kIhWJkq7R1MZB4yCmnTN2UyzrVSy9aUM_vmaU1AZFhWUgk7UOsN1BST2xOACH2NhCB6HP_93OnTDjAAXBja3bufXiAjZkw"/>
</div>
<div>
<h4 class="font-bold">Jonas L.</h4>
<p class="text-xs text-on-surface-variant font-medium">vor 2 Stunden</p>
</div>
</div>
<p class="text-on-surface-variant leading-relaxed">"Mega Fortschritte bei deiner letzten Kata! Deine Hingabe ist wirklich inspirierend. Weiter so! Oss!"</p>
<div class="mt-4 flex gap-2">
<span class="px-3 py-1 rounded-full bg-primary/10 text-primary text-[10px] font-bold uppercase">Teamkamerad</span>
<span class="px-3 py-1 rounded-full bg-secondary/10 text-secondary text-[10px] font-bold uppercase">Inspiriert</span>
</div>
</div>
</div>
</div>
</section>
<!-- Gästebuch-Wand -->
<section class="max-w-7xl mx-auto px-6 mt-20" id="gaestebuch-wall">
<div class="text-center mb-12">
<h2 class="font-headline text-4xl md:text-5xl font-extrabold mb-4">Gästebuch-Wand</h2>
<p class="text-on-surface-variant max-w-2xl mx-auto">Nachrichten von Trainingspartnern, Familie und Freunden aus aller Welt.</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-white rounded-lg p-6 shadow-xl shadow-black/5 hover:-translate-y-2 transition-transform duration-300">
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 rounded-full bg-surface-container overflow-hidden">
<img alt="Gast" class="w-full h-full object-cover"
src="https://lh3.googleusercontent.com/aida-public/AB6AXuAxxSG4TUDr606KVR8_FBXcG1vZu-IryVXVsyk0ildPn-mTI7Xhf3_kclVMF91JkR_jx9eWesri4dDj4vf9U7gKuzWCMe6W52Bwgndg_mOwNf6WgregdNT9uH1bwxH2reR5LR_M8Stb6dLfl3O1u0qC3l8W_jcpH2FrTQY-onMUIiasTQNndMFCSqJy2Y8NBCjJkq7eSFELqR7CicXvpe3dSLeE_WyzxADxwlGyY3tPS7nYZuYCJvctYZl0hDvGF1HYDhKj3Xw5rg"/>
</div>
<div>
<p class="font-bold text-sm">Trainerin Elena</p>
<p class="text-[10px] uppercase font-bold text-outline">Sensei</p>
</div>
<span class="ml-auto material-symbols-outlined text-primary text-xl" style="font-variation-settings: 'FILL' 1;">favorite</span>
</div>
<p class="text-sm text-on-surface-variant leading-relaxed">Deine Konzentration beim letzten Grading war außergewöhnlich. Die Körperkontrolle, die du entwickelst, ist selten für dein Alter. Ich bin stolz auf dich!</p>
</div>
<div class="bg-white rounded-lg p-6 shadow-xl shadow-black/5 hover:-translate-y-2 transition-transform duration-300">
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 rounded-full bg-surface-container overflow-hidden">
<img alt="Gast" class="w-full h-full object-cover"
src="https://lh3.googleusercontent.com/aida-public/AB6AXuCcEhcufxMA4pz_Ukcsfi9JIzXT6dS8M_1HuhSOhs00ftkIx_Dm74awVwHZURNxLYx0JSSosudUn5s21X0gOha6KwIsVz-esI6HO9WqQcgRm3Y6rxuM0eL2QbJtx16wJdxq9y05JLIjBpLGEQB7iemBIX7lH6RF86cxV0Cq0I_KA_vTkcLwxPunt79vO6NUt-zb0v3PP59gVEHOJOfFnnOlRqTe42kS28CfXGeWY5920CQDOjHFpQ6SH45XSQPSKMICsP5ANa3Wdw"/>
</div>
<div>
<p class="font-bold text-sm">Opa Karl</p>
<p class="text-[10px] uppercase font-bold text-outline">Familie</p>
</div>
</div>
<p class="text-sm text-on-surface-variant leading-relaxed">Wir drücken dir von zuhause alle die Daumen! Kann es kaum erwarten, den nächsten Pokal auf dem Regal zu sehen!</p>
</div>
<div class="bg-white rounded-lg p-6 shadow-xl shadow-black/5 hover:-translate-y-2 transition-transform duration-300">
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 rounded-full bg-surface-container overflow-hidden">
<img alt="Gast" class="w-full h-full object-cover"
src="https://lh3.googleusercontent.com/aida-public/AB6AXuCx78Ehwgx2xoiA9H_WHtwOteg8d8slllmcu2c66Ty-RnDNmX6sUEtNNsUXBXtINwZ4tg8WGxUjfbOSbtBWbcAUlaKqTTGgVOicODmvzt6PsT-hNu-JvwoOsmr-MSza1orgDZlUWKAcCY1XSByhyrJ6pFRT964VljwFvJd9KUKJFtd18GKw5qqh5IqcTt9_jrZFtOMFAGio1uK1GT3pyJA3WyGYMyUAbUWucPVTcnB9qo44WUkfg4k4LcmL7soUZK4bvTGxLg_m-g"/>
</div>
<div>
<p class="font-bold text-sm">Lea M.</p>
<p class="text-[10px] uppercase font-bold text-outline">Freundin</p>
</div>
</div>
<p class="text-sm text-on-surface-variant leading-relaxed">Die Website sieht so professionell aus! Mega cool, alle deine Erfolge an einem Ort zu sehen. Wir müssen bald mal wieder eis essen gehen!</p>
</div>
<div class="bg-gradient-to-br from-secondary/5 to-primary/5 border border-white rounded-lg p-6 shadow-xl shadow-black/5 md:col-span-2">
<div class="flex items-center gap-4 mb-4">
<div class="w-12 h-12 rounded-full bg-secondary text-on-secondary flex items-center justify-center font-bold text-xl">T</div>
<div>
<p class="font-bold">Trainer Thomas</p>
<p class="text-xs font-medium text-secondary">Dojo Kiai Berlin</p>
</div>
</div>
<blockquote class="text-on-surface-variant italic text-lg leading-relaxed mb-4">
"Ich trainiere viele Kinder, aber die kinetische Flüssigkeit in deinen Bewegungen ist etwas Besonderes. Du machst jede Kata zu einem Tanz. Weiter so – der nächste schwarze Gürtel wartet schon!"
</blockquote>
</div>
<div class="bg-white rounded-lg p-6 shadow-xl shadow-black/5 hover:-translate-y-2 transition-transform duration-300">
<div class="flex items-center gap-3 mb-4">
<div class="w-10 h-10 rounded-full bg-surface-container overflow-hidden">
<img alt="Gast" class="w-full h-full object-cover"
src="https://lh3.googleusercontent.com/aida-public/AB6AXuA09PdHK61xpLhrsPtonFk8dj5CKIW26fygdA6IlzV7oS96jGwscnrGsFu947MCZ2oPdbWP8STBciRmN8FDLKPOdHJKd2dBi3-pwlmDsyDAU8Myi4GtGEQLay6v7P_DOoRN64fPfZcEaXRNrje0eYe-DyAiDAXCRfqYVwK_ducZzu4e-ZOQIyXaJRA1LtJwkiF1EHDj2Kcp4z9TmQGWpc9HtLA7D7uQ7XcncDH-HSYLS8ZR3rC4h90gf9_CJfzUfHC8MSeSdQKABg"/>
</div>
<div>
<p class="font-bold text-sm">Herr Braun</p>
<p class="text-[10px] uppercase font-bold text-outline">Lehrer</p>
</div>
</div>
<p class="text-sm text-on-surface-variant leading-relaxed">Balance im Sport führt zu Balance im Leben. Halt die Disziplin, die du im Dojo zeigst, auch in der Schule!</p>
</div>
</div>
<div class="mt-12 text-center">
<button class="bg-surface-container-highest hover:bg-surface-container-high px-10 py-4 rounded-xl font-bold transition-colors">
Weitere Einträge laden
</button>
</div>
</section>
</main>
<!-- Footer -->
<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 text-sm tracking-wide">
<div class="text-lg font-bold text-zinc-900 dark:text-zinc-100 font-headline uppercase italic">MiyaKarate</div>
<div class="flex gap-8 text-zinc-500">
<a class="hover:text-pink-500 transition-opacity hover:underline decoration-pink-500 decoration-2 underline-offset-4" href="#">Instagram</a>
<a class="hover:text-pink-500 transition-opacity hover:underline decoration-pink-500 decoration-2 underline-offset-4" href="#">YouTube</a>
<a class="hover:text-pink-500 transition-opacity hover:underline decoration-pink-500 decoration-2 underline-offset-4" href="#">Email</a>
</div>
<div class="text-zinc-500">© 2024 MiyaKarate. Alle Rechte vorbehalten.</div>
</div>
</footer>
</body>
</html>
Reference in a new issue View git blame Copy permalink