2 lines
2.8 KiB
JavaScript
2 lines
2.8 KiB
JavaScript
import{r as d,h as f,x as _,c as a,i as u,o as n,a as e,F as b,j as y,t as m,l as h,b as x,u as w,X as k}from"#entry";import{u as C}from"./C_U-NUAd.js";const j={key:0,id:"gallery",class:"py-16 sm:py-20 bg-gradient-to-b from-white to-gray-50"},L={class:"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"},$={class:"grid sm:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 gap-2"},E=["onClick"],B=["src","alt"],G={class:"absolute inset-0 bg-gradient-to-t from-black/70 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end"},V={class:"text-white font-semibold text-xs p-1 truncate"},z={class:"relative w-full h-full flex items-center justify-center"},F=["src","alt"],N={class:"absolute bottom-4 left-4 right-4 text-center"},H={class:"text-white font-semibold text-lg bg-black/50 rounded-lg px-4 py-2"},I={__name:"Gallery",setup(p){const s=d([]),t=d(null),g=async()=>{try{const o=await $fetch("/api/galerie");s.value=o||[]}catch(o){console.error("Fehler beim Laden der Galerie-Bilder:",o),s.value=[]}},v=o=>{t.value=o,document.body.style.overflow="hidden"},i=()=>{t.value=null,document.body.style.overflow="auto"},c=o=>{o.key==="Escape"&&t.value&&i()};return f(()=>{g(),document.addEventListener("keydown",c)}),_(()=>{document.removeEventListener("keydown",c),document.body.style.overflow="auto"}),(o,r)=>s.value.length>0?(n(),a("section",j,[e("div",L,[r[1]||(r[1]=e("div",{class:"text-center mb-16"},[e("h2",{class:"text-4xl sm:text-5xl font-display font-bold text-gray-900 mb-4"}," Galerie "),e("div",{class:"w-24 h-1 bg-primary-600 mx-auto mb-6"}),e("p",{class:"text-xl text-gray-600 max-w-3xl mx-auto"}," Eindrücke von unserem Verein ")],-1)),e("div",$,[(n(!0),a(b,null,y(s.value,l=>(n(),a("div",{key:l.filename,class:"group relative w-20 h-20 rounded-md overflow-hidden shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer",onClick:D=>v(l)},[e("img",{src:`/galerie/${l.filename}`,alt:l.title,class:"w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"},null,8,B),e("div",G,[e("p",V,m(l.title),1)])],8,E))),128))]),t.value?(n(),a("div",{key:0,class:"fixed inset-0 z-50 bg-black/90 flex items-center justify-center p-4",onClick:i},[e("div",z,[e("button",{onClick:h(i,["stop"]),class:"absolute top-4 right-4 z-10 w-10 h-10 bg-white/20 hover:bg-white/30 rounded-full flex items-center justify-center text-white transition-colors"},[x(w(k),{size:24})]),e("img",{src:`/galerie/${t.value.filename}`,alt:t.value.title,class:"max-w-[80vw] max-h-[80vh] object-contain rounded-lg",onClick:r[0]||(r[0]=h(()=>{},["stop"]))},null,8,F),e("div",N,[e("p",H,m(t.value.title),1)])])])):u("",!0)])])):u("",!0)}},M={class:"min-h-screen"},T={__name:"galerie",setup(p){return C({title:"Galerie - Harheimer TC"}),(s,t)=>(n(),a("div",M,[x(I)]))}};export{T as default};
|