Mit wow-Effekt: Personalisiere deine Cards - live!

Easy:
1. Deine erstellte JSON-Datei aus dem Card-Builder hier einfügen.
2. Die erstellte Datei in Netlify ziehen.

Du erhältst einen Netlify-Link. Mit ihm kannst du JUST IN TIME personalisierte digitale Kartensets erstellen. Mit WOW-Moment!

Meta-Personalisierer

Kartenset personalisieren

Lade eine JSON-Datei aus dem Card-Builder hoch. Fehlen darin noch Platzhalter, ergänzt das Tool automatisch die persönliche Anrede. Du erhältst eine fertige index.html für Netlify.

Card-Builder-JSON auswählen Datei hier ablegen oder anklicken

So funktioniert die Personalisierung

Das Tool ergänzt automatisch eine persönliche Anrede vor jedem Kartentext. Mit dem Namen „Anna“ erscheint zum Beispiel „Hallo Anna!“. Ohne Namen bleibt der Kartentext unverändert.

<!doctype html>
<html xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml" lang="de-DE"  lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Kartenset</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=DM+Serif+Display&display=swap" rel="stylesheet">
<style>
html,body{margin:0;padding:0;background:#fff}*{box-sizing:border-box}
body{min-height:100vh;padding:64px 24px 40px;font-family:'DM Sans',sans-serif;color:#2f4255}
.page{width:min(900px,100%);margin:0 auto}.hidden,[hidden]{display:none!important}
.generator{width:min(620px,100%);margin:30px auto 0;padding:38px 36px 36px;border:1px solid #e1e5e8;border-radius:22px;background:#fff;box-shadow:0 10px 32px rgba(41,58,74,.09)}
.generator h1{margin:0 0 10px;font-family:'DM Serif Display',serif;font-size:36px;font-weight:400;line-height:1.12;color:#2f4255}
.generator>p{margin:0 0 30px;font-size:16px;line-height:1.55;color:#5d6a78}
.generator form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px 12px;align-items:end}
.generator form>label{grid-column:1/-1;font-size:15px;font-weight:700}.generator input[type=text]{width:100%;min-height:50px;padding:11px 15px;border:1.5px solid #cbd2d8;border-radius:12px;font:16px 'DM Sans',sans-serif;color:#2f4255}
.generator input[type=text]:focus{outline:none;border-color:#ff6026;box-shadow:0 0 0 4px rgba(255,96,38,.14)}
.salutations{grid-column:1/-1;border:0;margin:12px 0 0;padding:0}.salutations legend{margin:0 0 9px;padding:0;font-size:15px;font-weight:700}.salutation-row{display:flex;gap:8px;flex-wrap:wrap}.salutation{position:relative;cursor:pointer}.salutation input{position:absolute;opacity:0}.salutation span{display:block;padding:8px 14px;border:1px solid #cbd2d8;border-radius:999px;font-size:14px;font-weight:600;line-height:1}.salutation input:checked+span{border-color:#ff6026;background:#ff6026;color:#fff}
.actions{display:flex;gap:10px;flex-wrap:wrap}.generator form>.actions{margin:0}.button{min-height:50px;padding:11px 20px;border:0;border-radius:12px;background:#ff6026;color:#fff;font:700 16px 'DM Sans',sans-serif;white-space:nowrap;cursor:pointer}.button.secondary{border:1px solid #cbd2d8;background:#fff;color:#2f4255}.link-result{margin-top:24px;padding-top:20px;border-top:1px solid rgba(44,62,80,.14)}.link-result a{display:block;overflow-wrap:anywhere;color:#2f4255;font-size:14px}.link-result .actions{margin-top:14px}.copy-status{min-height:20px;margin:8px 0 0;font-size:13px;color:#63707d}
@media(max-width:760px){body{padding:28px 16px 26px}.generator{margin-top:0;padding:30px 22px 28px;border-radius:20px}.generator h1{font-size:32px}.generator form{grid-template-columns:1fr;gap:12px}.generator form>label,.salutations{grid-column:1}.generator form>.actions{display:grid}.generator form>.actions .button{width:100%}}
</style>
</head>
<body>
<div class="page">
<section class="generator" id="generator">
  <h1>Kartenset personalisieren</h1>
  <p>Gib einen Namen ein und erstelle einen persönlichen Link zum Teilen.</p>
  <form id="link-form">
    <label for="recipient-name">Für wen ist das Kartenset?</label>
    <fieldset class="salutations" id="salutations">
      <legend>Anrede</legend>
      <div class="salutation-row">
        <label class="salutation"><input type="radio" name="salutation" value="Liebe"><span>Liebe</span></label>
        <label class="salutation"><input type="radio" name="salutation" value="Lieber"><span>Lieber</span></label>
        <label class="salutation"><input type="radio" name="salutation" value="Hallo" checked><span>Hallo</span></label>
      </div>
    </fieldset>
    <input id="recipient-name" type="text" maxlength="80" autocomplete="off" placeholder="Zum Beispiel Anna">
    <div class="actions"><button class="button" type="submit">Link erstellen</button></div>
  </form>
  <div class="link-result" id="link-result" hidden>
    <a id="personal-link"></a>
    <div class="actions"><button class="button secondary" id="copy-link" type="button">Link kopieren</button><a class="button" id="open-link" target="_blank" rel="noopener noreferrer" style="text-decoration:none;display:inline-flex;align-items:center;justify-content:center">Link öffnen</a></div>
    <p class="copy-status" id="copy-status" aria-live="polite"></p>
  </div>
</section>
<main id="card-view" hidden><div id="card-root"></div></main>
</div>
<script>
(function(){
const payload=__PAYLOAD__;
const S=payload.settings||{};
const cards=Array.isArray(payload.cards)?payload.cards:[];
function boolSetting(keys,fallback){for(const key of keys){if(Object.prototype.hasOwnProperty.call(S,key))return!!S[key]}return fallback}
const showStatusHints=boolSetting(["showStatusHints","showEndNotice","showEndMessage","showEndOverlay","showEndScreen"],boolSetting(["showNotices","showStatusMessages"],true));
const allText=cards.map(c=>String(c.title||"")+" "+String(c.body||"")).join(" ");
const usesGreeting=allText.includes("{gruss}");
const hash=new URLSearchParams(location.hash.replace(/^#/,""));
const recipient=String(hash.get("name")||"").trim().slice(0,80);
const allowed=["Liebe","Lieber","Hallo"];
const requested=String(hash.get("salutation")||"Hallo");
const salutation=allowed.includes(requested)?requested:"Hallo";
const isCardView=hash.get("view")==="card"||recipient!=="";
const generator=document.getElementById("generator"),cardView=document.getElementById("card-view");

if(!isCardView){
  generator.hidden=false;
  const form=document.getElementById("link-form"),input=document.getElementById("recipient-name"),salutations=document.getElementById("salutations"),result=document.getElementById("link-result"),link=document.getElementById("personal-link"),open=document.getElementById("open-link"),copy=document.getElementById("copy-link"),status=document.getElementById("copy-status");
  salutations.hidden=!usesGreeting;
  form.addEventListener("submit",function(e){
    e.preventDefault();
    const name=String(input.value||"").trim();
    const choice=form.querySelector('input[name="salutation"]:checked').value;
    const h=new URLSearchParams();h.set("view","card");
    if(name){h.set("name",name);if(usesGreeting)h.set("salutation",choice)}
    const url=location.href.split("#")[0]+"#"+h.toString();
    link.href=url;link.textContent=url;open.href=url;result.hidden=false;status.textContent="";
  });
  copy.addEventListener("click",async function(){try{await navigator.clipboard.writeText(link.href);status.textContent="Link kopiert."}catch(e){status.textContent="Bitte den Link oben markieren und kopieren."}});
  input.focus();return;
}

generator.hidden=true;cardView.hidden=false;document.title=recipient?"Kartenset für "+recipient:"Kartenset";
const greeting=recipient?salutation+" "+recipient+"!":"";
function personalize(value){
  let text=String(value||"").replace(/\{gruss\}\s*\{name\}(?:\s*!){0,1}/g,greeting).split("{gruss}").join(greeting).split("{name}").join(recipient);
  if(!recipient){text=text.replace(/,\s*([.!?])/g,"$1").replace(/,\s*$/g,"").replace(/$\s*$/g,"").replace(/[ \t]{2,}/g," ").replace(/\s+([,.;:!?])/g,"$1")}
  return text.trim();
}
function esc(s){return String(s??"").replaceAll("&","&"+"amp;").replaceAll("<","&"+"lt;").replaceAll(">","&"+"gt;").replaceAll('"',"&"+"quot;").replaceAll("'","&"+"#039;")}
function shuffle(a){const c=a.slice();for(let i=c.length-1;i>0;i--){const j=Math.floor(Math.random()*(i+1));[c[i],c[j]]=[c[j],c[i]]}return c}
function icon(){return '<svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="4.25"></circle><path d="M12 2.75V5M12 19V21.25M21.25 12H19M5 12H2.75M18.54 5.46L16.95 7.05M7.05 16.95L5.46 18.54M18.54 18.54L16.95 16.95M7.05 7.05L5.46 5.46"></path></svg>'}
const root=document.getElementById("card-root");
const tc=S.textColor||"#182712",bg=S.cardColor||"#f7ece8",frontImage=String(S.bgImageFront||""),hasFront=!!frontImage,showFrontText=!!S.showFrontText;
root.innerHTML=`<style>
#card-root{font-family:'DM Sans',sans-serif;color:${tc}}#card-root *{box-sizing:border-box}#card-root .hidden{display:none!important}.wrap{width:min(760px,100%);margin:0 auto;text-align:center;padding:58px 0 20px}.card{perspective:1100px;width:300px;height:410px;margin:0 auto;cursor:pointer;border-radius:18px;-webkit-tap-highlight-color:transparent}.card:focus{outline:none}.card:focus-visible{outline:2px solid rgba(24,39,18,.16);outline-offset:4px}.inner{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 420ms cubic-bezier(.2,.8,.2,1)}.card.flipped .inner{transform:rotateY(180deg)}.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:18px;border:1px solid rgba(44,62,80,.1);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:34px 26px;background:${bg};box-shadow:0 4px 24px rgba(0,0,0,.08);overflow:hidden;transform:translateZ(0)}.card:hover .face{box-shadow:0 8px 28px rgba(0,0,0,.12)}.back{transform:rotateY(180deg) translateZ(0)}.icon{width:54px;height:54px;border-radius:50%;background:rgba(44,62,80,.1);display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:${tc}}.icon svg{width:25px;height:25px;stroke:currentColor;fill:none;stroke-width:1.65;stroke-linecap:round}.ftitle{font-family:'DM Serif Display',serif;font-size:22px;margin:0 0 8px}.fsub{font-size:13px;opacity:.6;margin:0}.bc{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden}.lbl{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin:0 0 18px}.txt{font-weight:600;font-size:clamp(18px,2.2vh,25px);line-height:1.38;margin:0;max-width:24ch;white-space:pre-line}.sig{margin-top:20px;font-size:14px;opacity:.72}.ctr{font-size:14px;opacity:.6;margin-top:24px}@media(prefers-reduced-motion:reduce){.inner{transition:none}}
</style><div class="wrap"><div class="card" data-card role="button" tabindex="0" aria-label="Impulskarte aufdecken" aria-pressed="false"><div class="inner"><div class="face front" style="${hasFront?'background:url('+frontImage+') center/cover no-repeat':''}">${hasFront?'':'<div class="icon">'+icon()+'</div>'}${showFrontText||!hasFront?'<p class="ftitle">Karte ziehen</p><p class="fsub">Tippe zum Aufdecken</p>':'<p class="ftitle hidden"></p><p class="fsub hidden"></p>'}</div><div class="face back" data-back><div class="bc"><div class="lbl hidden" data-lbl></div><div class="txt" data-txt></div><div class="sig hidden" data-sig></div></div></div></div></div><p class="ctr ${S.showDeckCount?'':'hidden'}"><strong>${cards.length}</strong> ${esc(S.deckCountLabel||'Karten im Set')}</p></div>`;
const card=root.querySelector("[data-card]"),back=root.querySelector("[data-back]"),lbl=root.querySelector("[data-lbl]"),txt=root.querySelector("[data-txt]"),sig=root.querySelector("[data-sig]");
function fill(d){const title=personalize(d.title),body=personalize(d.body),img=String(d.imgBack||""),signature=personalize(S.signatureText||""),showSignature=S.showSignature!==false&&!!signature;lbl.textContent=title;lbl.classList.toggle("hidden",!title);txt.textContent=body;sig.textContent=showSignature?signature:"";sig.classList.toggle("hidden",!showSignature);back.style.background=img?"url("+img+") center/cover no-repeat":bg;const len=(title+body+signature).length;txt.style.fontSize=len>380?"18px":len>280?"20px":""}
function seededShuffle(arr,seed){const c=arr.slice();let h=2166136261>>>0,s=String(seed||"");for(let i=0;i<s.length;i++){h^=s.charCodeAt(i);h=Math.imul(h,16777619)}let state=h>>>0;function rnd(){state=(state+0x6D2B79F5)|0;let t=state;t=Math.imul(t^(t>>>15),t|1);t^=t+Math.imul(t^(t>>>7),t|61);return((t^(t>>>14))>>>0)/4294967296}for(let i=c.length-1;i>0;i--){const j=Math.floor(rnd()*(i+1));[c[i],c[j]]=[c[j],c[i]]}return c}
function weekdays(start,end){let count=0,d=new Date(start);while(d<=end){const day=d.getDay();if(day!==0&&day!==6)count++;d.setDate(d.getDate()+1)}return count}
function dayState(){if(!cards.length)return{status:"empty"};if(!S.startDate)return{status:"ok",index:0};const p=String(S.startDate).split("-").map(Number),start=new Date(p[0],p[1]-1,p[2]),today=new Date();start.setHours(0,0,0,0);today.setHours(0,0,0,0);if(today<start)return{status:"locked"};let index;if(S.weekendImpulseFree){const effective=new Date(today),startWorkday=new Date(start);if(effective.getDay()===0)effective.setDate(effective.getDate()-2);else if(effective.getDay()===6)effective.setDate(effective.getDate()-1);if(startWorkday.getDay()===0)startWorkday.setDate(startWorkday.getDate()+1);else if(startWorkday.getDay()===6)startWorkday.setDate(startWorkday.getDate()+2);if(effective<startWorkday)return{status:"locked"};index=weekdays(startWorkday,effective)-1}else index=Math.floor((today-start)/86400000);return index>=cards.length?{status:"end"}:{status:"ok",index}}
let stack=[],flipped=false,seq=0;
function randomCard(){if(!stack.length)stack=shuffle(cards);return stack.pop()}
function setFront(message,sub){const t=root.querySelector('.ftitle'),s=root.querySelector('.fsub');if(t){t.textContent=message;t.classList.remove('hidden')}if(s){s.textContent=sub||'';s.classList.toggle('hidden',!sub)}}
function resetFront(){const t=root.querySelector('.ftitle'),s=root.querySelector('.fsub'),show=showFrontText||!hasFront;if(t){t.textContent=show?'Karte ziehen':'';t.classList.toggle('hidden',!show)}if(s){s.textContent=show?'Tippe zum Aufdecken':'';s.classList.toggle('hidden',!show)}}
function dailyRandomOrder(){if(Array.isArray(S.dailyOrder)&&S.dailyOrder.length){const byId=new Map(cards.map(c=>[String(c.id||""),c])),ordered=S.dailyOrder.map(id=>byId.get(String(id))).filter(Boolean);cards.forEach(c=>{if(!ordered.includes(c))ordered.push(c)});return ordered}return seededShuffle(cards,S.startDate||"seed")}
function formatDateDE(iso){const p=String(iso||"").split("-");return p.length===3?p[2]+"."+p[1]+"."+p[0]:String(iso||"")}
function makeStartMessage(){return String(S.startMessage||"Start am {datum}").split("{datum}").join(formatDateDE(S.startDate))}
function setFlipped(value){flipped=value;card.classList.toggle("flipped",value);card.setAttribute("aria-pressed",String(value))}
function toggle(){if(!cards.length)return;const mode=S.displayMode||"set-random";if(mode.startsWith("daily-")){if(flipped){setFlipped(false);return}const state=dayState();if(state.status!=="ok")return;const selected=mode==="daily-sequential"?cards[state.index]:dailyRandomOrder()[state.index];fill(selected);setFlipped(true);return}if(mode==="set-sequential"){if(!flipped){fill(cards[seq]);setFlipped(true)}else{seq=(seq+1)%cards.length;setFlipped(false)}return}if(!flipped){fill(randomCard());setFlipped(true)}else setFlipped(false)}
if((S.displayMode||"").startsWith("daily-")){const state=dayState();if(state.status==="locked"){if(showStatusHints)setFront(makeStartMessage(),"");else resetFront()}else if(state.status==="end"){if(showStatusHints)setFront(S.endMessage||"Dein Kartenset ist zu Ende","");else resetFront()}}
card.addEventListener("click",toggle);card.addEventListener("keydown",e=>{if(e.key==="Enter"||e.key===" "){e.preventDefault();toggle()}});
})();
</script>
</body>
</html>