https://8004.ch/assets/AdminAnimations-CFwnQinK.js

1import{r as m,j as e,s as A,D as F,m as R,p as H,o as L}from"./index-CLTM18rh.js";import{T as G}from"./TranslateButton-CwJtN3CI.js";import{u as O}from"./useTranslating-CBNKkigt.js";import{R as U}from"./Filterleiste-Dovi1-bW.js";import"./callTranslate-CSi3EPWY.js";import"./bestaetige-CpNFuPQa.js";const q={slogan:"Slogan-Animation",andere:"Andere Animationen"};function j(a){const[r,s]=a.split("-");return!r||!s?"":`${s}.${r}.`}function X(a){const r=a.trim().match(/^(\d{1,2})\.(\d{1,2})\.?$/);if(!r)return null;const s=r[1].padStart(2,"0"),d=r[2].padStart(2,"0"),u=parseInt(s,10),x=parseInt(d,10);return x<1||x>12||u<1||u>31?null:`${d}-${s}`}function J(a,r){const s=new Date,d=`${String(s.getMonth()+1).padStart(2,"0")}-${String(s.getDate()).padStart(2,"0")}`;return a<=r?d>=a&&d<=r:d>=a||d<=r}function Q(){return e.jsx("div",{className:"w-20 h-20 bg-zinc-900 rounded-xl flex items-end justify-center overflow-hidden pb-2 flex-shrink-0 relative",children:e.jsx("div",{style:{position:"relative",top:"-28px"},children:e.jsx(F,{preview:!0})})})}function Y(){return e.jsx("div",{className:"w-20 h-20 rounded-xl flex items-center justify-center overflow-hidden flex-shrink-0",style:{background:"linear-gradient(135deg, rgba(138,192,242,0.7) 0%, rgba(253,246,202,0.7) 55%, rgba(255,169,160,0.7) 100%)"},children:e.jsx(R,{preview:!0})})}function ee(){return e.jsx("div",{className:"w-20 h-20 rounded-xl overflow-hidden flex-shrink-0 relative",style:{background:"linear-gradient(135deg, #cdeafe 0%, #fdf6e3 60%, #ffe9c9 100%)"},children:e.jsx(H,{preview:!0})})}function te(){return e.jsx("div",{className:"w-20 h-20 rounded-xl overflow-hidden flex-shrink-0 relative",style:{background:"linear-gradient(135deg, #eaf2fe 0%, #fdf6e3 55%, #ffe9e4 100%)"},children:e.jsx(L,{preview:!0})})}function ne(){const a=["Wo","Zürich","lebt"];return e.jsx("div",{className:"w-20 h-20 rounded-xl flex items-center justify-center overflow-hidden flex-shrink-0 px-1.5",style:{background:"linear-gradient(120deg,rgba(138,192,242,1) 0%,rgba(253,246,202,1) 50%,rgba(255,169,160,1) 100%)"},children:e.jsx("div",{className:"text-[10px] font-bold text-zinc-900 leading-tight text-center",children:a.map((r,s)=>e.jsx("span",{className:"inline-block mr-0.5",style:{animation:`${s%2===0?"hero-word-left":"hero-word-right"} 3s linear ${(s*.15).toFixed(2)}s infinite`},children:r},s))})})}function ae(){return e.jsxs("div",{className:"w-20 h-20 rounded-xl flex items-center justify-center overflow-hidden flex-shrink-0 relative",style:{background:"linear-gradient(120deg, rgba(138,192,242,1) 0%, rgba(253,246,202,1) 50%, rgba(255,169,160,1) 100%)"},children:[e.jsx("span",{"aria-hidden":!0,className:"absolute block",style:{to

1p:"50%",left:"-30px",height:"2px",width:"60px",background:"linear-gradient(90deg, transparent, #4d9de0, #ff7a6c, transparent)",boxShadow:"0 0 6px rgba(77,157,224,0.7)",animation:"admin-glitch-mini 2.4s ease-in-out infinite"}}),e.jsxs("span",{className:"relative font-extrabold italic text-zinc-900",style:{fontSize:"20px",lineHeight:1},children:[e.jsx("span",{"aria-hidden":!0,className:"absolute inset-0",style:{color:"#4d9de0",mixBlendMode:"multiply",transform:"translateX(-2px)"},children:"Wo"}),e.jsx("span",{"aria-hidden":!0,className:"absolute inset-0",style:{color:"#ff7a6c",mixBlendMode:"multiply",transform:"translateX(2px)"},children:"Wo"}),e.jsx("span",{className:"relative",children:"Wo"})]})]})}const W=[{key:"tagline_slide",label:"Slogan-Slide",description:"Die Worte des Slogans gleiten beim Laden der Startseite Wort für Wort von links und rechts ins Bild und federn sich aus.",where:'Startseite — Hero-Bereich (Hinweis: schliesst sich gegenseitig mit "Slogan-Glitch" aus — Glitch hat Vorrang.)',preview:e.jsx(ne,{}),texts:[{storageKey:"tagline_slide_text_de",lang:"de",label:"Slogan (Deutsch)",placeholder:"Wo Zürich lebt und atmet. Wo du immer willkommen bist."},{storageKey:"tagline_slide_text_en",lang:"en",label:"Slogan (English)",placeholder:"Where Zurich lives and breathes. Where you are always welcome."}],group:"slogan"},{key:"tagline_glitch",label:"Slogan-Glitch",description:"Farbige Streifen aus dem Hintergrund-Verlauf (Blau · Koralle · Gelb) rasen von links durchs Bild, der Slogan materialisiert sich mit Farbkanal-Verschiebungen und bleibt schwarz auf dem üblichen Verlauf stehen.",where:'Startseite — Hero-Bereich (überschreibt "Slogan-Slide", wenn beide aktiv sind)',preview:e.jsx(ae,{}),texts:[{storageKey:"tagline_glitch_text_de",lang:"de",label:"Slogan (Deutsch)",placeholder:`Wo Zürich lebt und atmet.
2Wo du immer willkommen bist.`},{storageKey:"tagline_glitch_text_en",lang:"en",label:"Slogan (English)",placeholder:`Where Zurich lives and breathes.
3Where you are always welcome.`}],group:"slogan"},{key:"disco_ball",label:"Disco-Kugel",description:"Animierte Discokugel mit Glitzer-Effekten beim «Mitglied werden»-Button",where:"Desktop- und Mobile-Navigation",preview:e.jsx(Q,{}),group:"andere"},{key:"spider",label:"Spinne",description:"Kleine Spinne klettert am Seil auf und ab, der «Mitglied werden»-Button ist mit einem feinen Spinnennetz bedeckt",where:"Desktop- und Mobile-Navigation",preview:e.jsx(Y,{}),group:"andere"},{key:"siesta",label:"Siesta",description:"Eine Palme wächst aus der Trennlinie, davor hält eine Person mit Sombrero Mittagsschlaf – die Palmwedel wiegen sich, der Sombrero hebt sich beim Atmen, kleine «Z» steigen auf. Ideal für die Sommerferien.",where:"Startseite — Trennlinie zwischen Slogan und Veranstaltungs-Vorschau",preview:e.jsx(ee,{}),group:"andere"},{key:"soccer_ball",label:"Fussball",description:"Zwei Cartoon-Spieler (Schweiz & Brasilien) passen einen 3D-Fussball hin und her – auf der Trennlinie zwischen Slogan und Veranstaltungs-Vorschau. Ideal für Fussball-Turniere wie die WM.",where:"Startseite — Trennlinie zwischen Slogan und Veranstaltungs-Vorschau",preview:e.jsx(te,{}),group:"andere"}];function se({enabled:a,onChange:r,loading:s}){return e.jsx("button",{type:"button",role:"switch","aria-checked":a,disabled:s,onClick:()=>r(!a),className:`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50 ${a?"bg-red-600":"bg-zinc-300 dark:bg-zinc-600"}`,children:e.jsx("span",{className:`inline-block h-4 w-4 rounded-full bg-white shadow transition-transform ${a?"translate-x-6":"translate-x-1"}`})})}function M({value:a,onChange:r,onBlur:s,placeholder:d}){return e.jsx("input",{type:"text",value:a,onChange:u=>r(u.target.value),onBlur:u=>s(u.target.value),placeholder:d,maxLength:6,className:"w-16 px-2 py-1 text-xs text-center rounded-md border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 text-zinc-800 dark:text-zinc-200 placeholder-zinc-400 focus:outline-none focus:ring-1 focus:ring-red-500"})}function ue(){const[a,r]=m.useState({disco_ball:!0,spider:!1,tagline_slide:!0,tagline_glitch:!1,soccer_ball:!1}),[s,d]=m.useState(()=>{if(typeof window>"u")return"slogan";const t=localStorage.getItem("qv_anim_tab");return t==="slogan"||t==="andere"?t:"slogan"});m.useEffect(()=>{try{localStorage.setItem("qv_anim_tab",s)}catch{}},[s]);

3const[u,x]=m.useState({}),[y,S]=m.useState({}),[P,_]=m.useState(!0),[V,f]=m.useState(null),[T,B]=m.useState(null),{translating:$,busy:C,translate:I}=O();m.useEffect(()=>{async function t(){const{data:{session:l}}=await A.auth.getSession();if(!l){_(!1);return}const c=await fetch("/api/admin/animations",{headers:{Authorization:`Bearer ${l.access_token}`}});if(c.ok){const i=await c.json();r(i);const g={},h={};for(const b of W){const n=`${b.key}_from`,o=`${b.key}_to`;i[n]&&(g[n]=j(i[n])),i[o]&&(g[o]=j(i[o]));for(const v of b.texts??[])typeof i[v.storageKey]=="string"&&(h[v.storageKey]=i[v.storageKey])}x(g),S(h)}_(!1)}t()},[]);async function w(t){const{data:{session:l}}=await A.auth.getSession();if(!l)return!1;const c=await fetch("/api/admin/animations",{method:"PATCH",headers:{"Content-Type":"application/json",Authorization:`Bearer ${l.access_token}`},body:JSON.stringify(t)});return c.ok?(r(await c.json()),!0):!1}async function Z(t,l){f(t),await w({[t]:l})&&p(l?"Animation aktiviert":"Animation deaktiviert"),f(null)}async function D(t,l,c){const i=`${t}_${l}`,g=c.trim();if(!g){await w({[i]:null})&&(x(o=>({...o,[i]:""})),p("Datum entfernt"));return}const h=X(g);if(!h){const n=a[i];x(o=>({...o,[i]:n?j(n):""})),p("Ungültig — Format: TT.MM. (z. B. 31.10.)");return}x(n=>({...n,[i]:j(h)})),await w({[i]:h})&&p("Zeitraum gespeichert")}async function E(t){const l=(y[t]??"").trim(),c=a[t]??null;if(l===(c??""))return;f(t);const i=await w({[t]:l===""?null:l});f(null),i&&p(l===""?"Text entfernt":"Text gespeichert")}function p(t){B(t),setTimeout(()=>B(null),2500)}return e.jsxs("div",{className:"max-w-2xl",children:[e.jsxs("div",{className:"mb-6",children:[e.jsx("h1",{className:"text-xl font-bold text-zinc-900 dark:text-white mb-1",children:"Animationen"}),e.jsx("p",{className:"text-sm text-zinc-500 dark:text-zinc-400",children:"Animationen aktivieren und optional auf einen Zeitraum beschränken, ideal für saisonale Highlights. Was hier an ist, läuft auf der Website und im Mitgliederportal gleichzeitig (Disco-Kugel und Spinne am Kopfbalken, Fussball und Siesta auf dessen Unterkante; die Slogan-Animationen nur auf der Startseite)."})]}),e.jsx(U,{aktiv:s,onWechsel:d,reiter:["slogan","andere"].map(t=>({key:t,label:q[t]}))}),P?e.jsx("div",{className:"py-20 text-center text-zinc-400 text-sm",children:"Lädt…"}):e.jsx("div",{className:"space-y-3",children:W.filter(t=>t.group===s).map(t=>{const l=a[`${t.key}_from`],c=a[`${t.key}_to`],i=!!(l&&c),g=i&&J(l,c),h=a[t.key]!==!1,b=h?i?"Saisonal":"Aktiv":"Inaktiv";return e.jsxs("div",{className:"p-5 rounded-2xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-900",children:[e.jsxs("div",{className:"flex items-center gap-5",children:[t.preview,e.jsxs("div",{className:"flex-1 min-w-0",children:[e.jsx("div",{className:"font-semibold text-zinc-900 dark:text-white text-sm mb-0.5",children:t.label}),e.jsx("div",{className:"text-sm text-zinc-500 dark:text-zinc-400 mb-1",children:t.description}),e.jsx("div",{className:"text-xs text-zinc-400 dark:text-zinc-500",children:t.where})]}),e.jsxs("div",{className:"flex-shrink-0 flex flex-col items-center gap-1.5",children:[e.jsx(se,{enabled:h,onChange:n=>Z(t.key,n),loading:V===t.key}),e.jsx("span",{className:"text-xs text-zinc-400",children:b})]})]}),e.jsxs("div",{className:"mt-4 pt-3 border-t border-zinc-100 dark:border-zinc-800 flex items-center gap-3 flex-wrap",children:[e.jsx("span",{className:"text-xs font-medium text-zinc-400 dark:text-zinc-500 uppercase tracking-wider shrink-0",children:"Zeitraum"}),e.jsxs("div",{className:"flex items-center gap-2",children:[e.jsx("span",{className:"text-xs text-zinc-400",children:"von"}),e.jsx(M,{value:u[`${t.key}_from`]??"",onChange:n=>x(o=>({...o,[`${t.key}_from`]:n})),onBlur:n=>D(t.key,"from",n),placeholder:"TT.MM."}),e.jsx("span",{className:"text-xs text-zinc-400",children:"bis"}),e.jsx(M,{value:u[`${t.key}_to`]??"",onChange:n=>x(o=>({...o,[`${t.key}_to`]:n})),onBlur:n=>D(t.key,"to",n),placeholder:"TT.MM."})]}),e.jsx("div",{className:"ml-auto flex items-center gap-1.5",children:i?e.jsxs(e.Fragment,{children:[e.jsx("span",{className:`w-1.5 h-1.5 rounded-full flex-shrink-0 ${g?"bg-green-500":"bg-zinc-300 dark:bg-zinc-600"}`}),e.jsx("span",{className:"text-xs text-zinc-400",children:g?"gerade aktiv":"gerade inaktiv"})]}):e.jsx("span",{className:"text-xs text-zinc-400 italic",children:"leer = ganzjährig"})})]}),t.texts&&t.texts.length>0&&e.jsxs("div",{className:"mt-4 pt-3 border-t border-zinc-100 dark:border-zinc-800 space-y-3",children:[e.jsx("div",{className:"text-xs font-medium text-zinc-400 dark:text-zinc-500 uppercase tracking-wider",children:"Text"}),t.texts.map(n=>{const o=t.texts.find(k=>k.lang==="de")?.storageKey,v=n.lang==="en",K=o?y[o]??"":"",z=`${t.key}:${n.storageKey}`;return e.jsxs("div",{className:"flex items-start gap-2",children:[e.jsxs("div",{className:"flex-1",children:[e.jsx("label",{className:"block text-xs font-medium text-zinc-500 dark:text-zinc-400 mb-1",children:n.label}),e.jsx("textarea",{value:y[n.storageKey]??"",onChange:k=>S(N=>({...N,[n.storageKey]:k.target.value})),onBlur:()=>E(n.storageKey),placeholder:n.placeholder,rows:2,className:"w-full px-3 py-2 text-sm rounded-md border border-zinc-200 dark:border-zinc-700 bg-zinc-50 dark:bg-zinc-800 text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-1 focus:ring-red-500 resize-none"})]}),v&&o&&e.jsx("div",{className:"pt-6",children:e.jsx(G,{source:K,onClick:()=>I(z,K,async k=>{S(N=>({...N,[n.storageKey]:k})),f(n.storageKey),await w({[n.storageKey]:k}),f(null),p("Übersetzt und gespeichert")}),disabled:C&&$!==z,loading:$===z,variant:(y[n.storageKey]??"").trim()?"refresh":"forward"})})]},n.storageKey)}),e.jsx("p",{className:"text-xs text-zinc-400 dark:text-zinc-500",children:"Tipp: Trenne zwei Sätze mit einem Punkt + Leerzeichen — der Hero bricht beim ersten Satz auf eine neue Zeile um."})]})]},t.key)})}),T&&e.jsx("div",{className:"fixed bottom-6 left-1/2 -translate-x-1/2 bg-zinc-900 text-white text-sm font-medium px-5 py-2.5 rounded-full shadow-lg z-50 animate-in fade-in slide-in-from-bottom-2",children:T})]})}

3export{ue as AdminAnimations};