706 lines
47 KiB
HTML
706 lines
47 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||
<meta name="theme-color" content="#09090b">
|
||
<title>BrandLoop – Prototyp</title>
|
||
<style>
|
||
:root{
|
||
--bg:#09090b;
|
||
--surface:rgba(255,255,255,.035);
|
||
--surface2:rgba(255,255,255,.07);
|
||
--sheet:#131316;
|
||
--border:rgba(255,255,255,.09);
|
||
--border-strong:rgba(255,255,255,.18);
|
||
--txt:#fafafa;
|
||
--mut:#a1a1aa;
|
||
--faint:#71717a;
|
||
--rose:#f43f5e;
|
||
--rose-soft:#fb7185;
|
||
--orange:#f97316;
|
||
--grad:linear-gradient(135deg,#f43f5e,#f97316);
|
||
--ok:#34d399;
|
||
--gold:#fbbf24;
|
||
}
|
||
*{box-sizing:border-box; margin:0; padding:0;}
|
||
html{-webkit-text-size-adjust:100%;}
|
||
body{
|
||
background:var(--bg); color:var(--txt);
|
||
font-family:"Geist","Inter",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
|
||
font-size:15px; line-height:1.5;
|
||
-webkit-font-smoothing:antialiased;
|
||
-webkit-tap-highlight-color:transparent;
|
||
}
|
||
svg.ic{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
|
||
|
||
.app{position:relative; max-width:430px; margin:0 auto; min-height:100dvh; padding:0 20px calc(96px + env(safe-area-inset-bottom)); overflow-x:hidden;}
|
||
@media(min-width:480px){.app{border-inline:1px solid var(--border);}}
|
||
.glow{position:fixed; top:-160px; left:50%; transform:translateX(-50%); width:560px; height:420px; background:radial-gradient(closest-side, rgba(244,63,94,.15), rgba(249,115,22,.05) 60%, transparent); pointer-events:none; z-index:0;}
|
||
|
||
.screen{display:none; animation:fade .28s ease; position:relative; z-index:1;}
|
||
.screen.active{display:block;}
|
||
@keyframes fade{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
|
||
|
||
/* ---- Topbar ---- */
|
||
.topbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px;
|
||
margin:0 -20px 16px; padding:calc(12px + env(safe-area-inset-top)) 20px 12px;
|
||
background:rgba(9,9,11,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
|
||
border-bottom:1px solid var(--border);}
|
||
.topbar h1{font-size:17px; font-weight:600; letter-spacing:-.01em;}
|
||
.iconbtn{display:grid; place-items:center; width:36px; height:36px; border-radius:12px;
|
||
background:var(--surface); border:1px solid var(--border); color:var(--mut); cursor:pointer; flex-shrink:0; transition:transform .12s, color .15s;}
|
||
.iconbtn:active{transform:scale(.92);}
|
||
.iconbtn:hover{color:var(--txt);}
|
||
.iconbtn svg{width:18px; height:18px;}
|
||
|
||
/* ---- Typo ---- */
|
||
h3{font-size:12px; font-weight:600; color:var(--mut); text-transform:uppercase; letter-spacing:.07em; margin:22px 0 10px;}
|
||
.sub{color:var(--mut); font-size:13.5px; line-height:1.55; margin-top:4px;}
|
||
.note{font-size:12px; color:var(--faint); line-height:1.55; margin-top:10px;}
|
||
.hl{color:var(--txt); font-weight:600;}
|
||
|
||
/* ---- Cards ---- */
|
||
.card{background:var(--surface); border:1px solid var(--border); border-radius:18px; padding:16px; margin-bottom:12px; position:relative;}
|
||
.card h4{font-size:15px; font-weight:600; margin-bottom:3px;}
|
||
.card h4.t-sm{font-size:13.5px;}
|
||
.card p{font-size:13px; color:var(--mut); line-height:1.55;}
|
||
.card.click{cursor:pointer; transition:border-color .15s, transform .1s, background .15s;}
|
||
.card.click:hover{border-color:var(--border-strong); background:var(--surface2);}
|
||
.card.click:active{transform:scale(.98);}
|
||
.cardrow{display:flex; align-items:center; gap:13px;}
|
||
.cardrow .body{flex:1; min-width:0;}
|
||
.ico{width:42px; height:42px; border-radius:14px; display:grid; place-items:center; flex-shrink:0;}
|
||
.ico svg{width:20px; height:20px;}
|
||
.ico.rose{background:rgba(244,63,94,.12); color:var(--rose-soft);}
|
||
.ico.orange{background:rgba(249,115,22,.12); color:#fb923c;}
|
||
.ico.amber{background:rgba(251,191,36,.12); color:var(--gold);}
|
||
.ico.emerald{background:rgba(52,211,153,.12); color:var(--ok);}
|
||
.ico.zinc{background:var(--surface2); color:var(--mut);}
|
||
.chev{width:16px; height:16px; color:var(--faint); flex-shrink:0;}
|
||
|
||
/* ---- Media-Platzhalter ---- */
|
||
.ph{display:flex; gap:10px; align-items:flex-start; border:1.5px dashed rgba(255,255,255,.16); border-radius:14px;
|
||
padding:13px 14px; font-size:12.5px; color:var(--mut); font-style:italic; line-height:1.55;
|
||
background:rgba(255,255,255,.02); margin:10px 0;}
|
||
.ph svg{width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--faint);}
|
||
|
||
/* ---- Buttons ---- */
|
||
.btn{display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
|
||
border:none; border-radius:16px; padding:15px; font-size:15px; font-weight:600; font-family:inherit; cursor:pointer; margin-top:14px;
|
||
background:var(--grad); color:#fff;
|
||
box-shadow:0 8px 24px rgba(244,63,94,.25), inset 0 1px 0 rgba(255,255,255,.18);
|
||
transition:transform .12s, filter .15s;}
|
||
.btn:hover{filter:brightness(1.08);}
|
||
.btn:active{transform:scale(.98);}
|
||
.btn.sec{background:var(--surface); color:var(--txt); border:1px solid var(--border); box-shadow:none; font-weight:500;}
|
||
.btn svg{width:17px; height:17px;}
|
||
|
||
/* ---- Formulare ---- */
|
||
input[type=text], textarea{width:100%; background:var(--surface); border:1px solid var(--border); border-radius:14px;
|
||
color:var(--txt); padding:13px 14px; font-size:15px; font-family:inherit; margin:6px 0 14px;
|
||
transition:border-color .15s, box-shadow .15s; -webkit-appearance:none;}
|
||
::placeholder{color:var(--faint);}
|
||
input:focus, textarea:focus{outline:none; border-color:rgba(244,63,94,.55); box-shadow:0 0 0 3px rgba(244,63,94,.14);}
|
||
textarea{min-height:84px; resize:vertical; line-height:1.55;}
|
||
label{font-size:13px; font-weight:500; color:var(--mut); display:block;}
|
||
.req{color:var(--rose-soft);}
|
||
|
||
/* ---- Tags, Scores, Badges ---- */
|
||
.tag{display:inline-flex; align-items:center; gap:5px; background:var(--surface2); border:1px solid var(--border);
|
||
color:var(--mut); border-radius:999px; padding:4px 11px; font-size:11.5px; margin:3px 4px 0 0;}
|
||
.score{color:var(--gold); font-weight:600; font-size:.95em;}
|
||
.badge{display:inline-block; font-size:10px; border-radius:999px; padding:3px 9px; font-weight:700; letter-spacing:.03em; vertical-align:2px;}
|
||
.b-ok{background:rgba(52,211,153,.14); color:var(--ok);}
|
||
.b-arch{background:rgba(161,161,170,.14); color:var(--mut);}
|
||
.b-new{background:rgba(249,115,22,.15); color:#fb923c;}
|
||
|
||
/* ---- Favorit ---- */
|
||
.fav{border-color:rgba(251,191,36,.45); box-shadow:0 0 0 1px rgba(251,191,36,.25), 0 8px 28px rgba(251,191,36,.07);}
|
||
.favlabel{position:absolute; top:-10px; right:14px; background:linear-gradient(135deg,#fbbf24,#f59e0b);
|
||
color:#1c1400; font-size:10px; font-weight:700; letter-spacing:.04em; border-radius:999px; padding:3px 10px;}
|
||
|
||
/* ---- Pills ---- */
|
||
.pill-row{display:flex; gap:8px; margin:10px 0 4px;}
|
||
.pill{flex:1; text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:13px;
|
||
padding:11px 6px; font-size:13.5px; color:var(--mut); font-weight:500; cursor:pointer; transition:border-color .15s, color .15s, background .15s, transform .1s;}
|
||
.pill:active{transform:scale(.96);}
|
||
.pill.on{border-color:rgba(244,63,94,.55); color:var(--rose-soft); background:rgba(244,63,94,.1); font-weight:600;}
|
||
|
||
/* ---- Steps ---- */
|
||
.steps{display:flex; gap:6px; margin-bottom:18px;}
|
||
.steps div{flex:1; height:4px; border-radius:4px; background:var(--surface2);}
|
||
.steps div.on{background:var(--grad);}
|
||
|
||
/* ---- Metriken ---- */
|
||
.row{display:flex; gap:10px;}
|
||
.row .card{flex:1;}
|
||
.metric{text-align:center; padding:14px 8px;}
|
||
.metric p{font-size:10.5px; color:var(--faint); margin-bottom:4px; text-transform:uppercase; letter-spacing:.06em; font-weight:600;}
|
||
.metric h4{font-size:19px; font-weight:700; margin:0;}
|
||
.metric h4.g{color:var(--ok);}
|
||
|
||
/* ---- Listen in Cards ---- */
|
||
.rule{display:flex; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--border); font-size:13.5px; color:var(--txt);}
|
||
.rule:last-child{border-bottom:none; padding-bottom:2px;}
|
||
.rule:first-child{padding-top:2px;}
|
||
.rule svg{width:16px; height:16px; color:var(--ok); flex-shrink:0;}
|
||
.asset{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border); font-size:13.5px;}
|
||
.asset:last-child{border-bottom:none; padding-bottom:2px;}
|
||
.asset:first-child{padding-top:2px;}
|
||
.asset svg{width:16px; height:16px; color:var(--mut); flex-shrink:0;}
|
||
.asset .score{margin-left:auto;}
|
||
|
||
/* ---- Log & Code ---- */
|
||
.log{font-size:12.5px; color:var(--mut); border-left:2px solid var(--border-strong); padding:5px 0 5px 12px; margin:8px 0; line-height:1.5;}
|
||
.code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:11px; line-height:1.7; color:var(--mut);
|
||
background:#0c0c0f; border:1px solid var(--border); border-radius:14px; padding:14px; overflow-x:auto; margin:10px 0;}
|
||
.code b{color:var(--rose-soft); font-weight:600;}
|
||
|
||
/* ---- Home Hero ---- */
|
||
.hero{text-align:center; padding:calc(52px + env(safe-area-inset-top)) 0 32px; position:relative;}
|
||
.hero .logo{font-size:34px; font-weight:800; letter-spacing:-.03em;}
|
||
.hero .logo span{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
|
||
.hero p{color:var(--mut); font-size:14px; margin-top:6px;}
|
||
.hero .iconbtn{position:absolute; top:calc(14px + env(safe-area-inset-top)); right:0;}
|
||
|
||
/* ---- Tutorial ---- */
|
||
.tut{display:flex; flex-direction:column; justify-content:center; min-height:calc(100dvh - 160px); text-align:center; padding:20px 6px;}
|
||
.tut .emoji{font-size:52px; margin-bottom:18px;}
|
||
.tut h1{font-size:26px; font-weight:700; letter-spacing:-.02em; margin-bottom:12px;}
|
||
.tut .sub{font-size:14.5px;}
|
||
|
||
/* ---- Bottom-Navigation ---- */
|
||
.nav{position:fixed; bottom:0; left:0; right:0; margin:0 auto; max-width:430px; display:flex; z-index:30;
|
||
background:rgba(9,9,11,.85); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
|
||
border-top:1px solid var(--border); padding:8px 8px calc(8px + env(safe-area-inset-bottom));}
|
||
.nav button{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; background:none; border:none;
|
||
color:var(--faint); font-size:10.5px; font-weight:500; font-family:inherit; padding:8px 2px; cursor:pointer; transition:color .15s;}
|
||
.nav button svg{width:22px; height:22px;}
|
||
.nav button.on{color:var(--rose-soft);}
|
||
|
||
/* ---- Info-Sheet ---- */
|
||
.backdrop{position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .25s; z-index:40;}
|
||
.backdrop.open{opacity:1; pointer-events:auto;}
|
||
.sheet{position:fixed; bottom:0; left:0; right:0; margin:0 auto; max-width:430px; background:var(--sheet);
|
||
border:1px solid var(--border); border-bottom:none; border-radius:24px 24px 0 0;
|
||
padding:14px 20px calc(28px + env(safe-area-inset-bottom));
|
||
transform:translateY(105%); transition:transform .32s cubic-bezier(.32,.72,0,1); z-index:50; max-height:80dvh; overflow-y:auto;}
|
||
.sheet.open{transform:none;}
|
||
.sheet .grab{width:36px; height:4px; border-radius:4px; background:var(--surface2); margin:0 auto 18px;}
|
||
.sheet h2{font-size:17px; font-weight:700; margin-bottom:10px;}
|
||
.sheet p{color:var(--mut); font-size:13.5px; line-height:1.6; margin-bottom:12px;}
|
||
.sheet ul{list-style:none; margin-bottom:12px;}
|
||
.sheet li{color:var(--mut); font-size:13.5px; line-height:1.6; padding-left:14px; position:relative; margin-bottom:4px;}
|
||
.sheet li::before{content:"·"; position:absolute; left:2px; color:var(--rose-soft); font-weight:700;}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<!-- Lucide-Icon-Sprite (KokonutUI nutzt lucide-icons) -->
|
||
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
|
||
<defs>
|
||
<symbol id="i-back" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></symbol>
|
||
<symbol id="i-chev" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></symbol>
|
||
<symbol id="i-home" viewBox="0 0 24 24"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></symbol>
|
||
<symbol id="i-plus" viewBox="0 0 24 24"><path d="M5 12h14"/><path d="M12 5v14"/></symbol>
|
||
<symbol id="i-spark" viewBox="0 0 24 24"><path d="m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z"/><path d="M5 3v4"/><path d="M19 17v4"/><path d="M3 5h4"/><path d="M17 19h4"/></symbol>
|
||
<symbol id="i-db" viewBox="0 0 24 24"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5V19A9 3 0 0 0 21 19V5"/><path d="M3 12A9 3 0 0 0 21 12"/></symbol>
|
||
<symbol id="i-gear" viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></symbol>
|
||
<symbol id="i-film" viewBox="0 0 24 24"><path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z"/><path d="m6.2 5.3 3.1 3.9"/><path d="m12.4 3.4 3.1 4"/><path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z"/></symbol>
|
||
<symbol id="i-user" viewBox="0 0 24 24"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></symbol>
|
||
<symbol id="i-box" viewBox="0 0 24 24"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.29 7 12 12 20.71 7"/><line x1="12" x2="12" y1="22" y2="12"/></symbol>
|
||
<symbol id="i-pin" viewBox="0 0 24 24"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></symbol>
|
||
<symbol id="i-bulb" viewBox="0 0 24 24"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></symbol>
|
||
<symbol id="i-mic" viewBox="0 0 24 24"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" x2="12" y1="19" y2="22"/></symbol>
|
||
<symbol id="i-up" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></symbol>
|
||
<symbol id="i-play" viewBox="0 0 24 24"><polygon points="6 3 20 12 6 21 6 3"/></symbol>
|
||
<symbol id="i-img" viewBox="0 0 24 24"><rect width="18" height="18" x="3" y="3" rx="2" ry="2"/><circle cx="9" cy="9" r="2"/><path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21"/></symbol>
|
||
<symbol id="i-info" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></symbol>
|
||
<symbol id="i-check" viewBox="0 0 24 24"><path d="M20 6 9 17l-5-5"/></symbol>
|
||
<symbol id="i-refresh" viewBox="0 0 24 24"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></symbol>
|
||
<symbol id="i-lock" viewBox="0 0 24 24"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></symbol>
|
||
</defs>
|
||
</svg>
|
||
|
||
<div class="glow"></div>
|
||
|
||
<div class="app">
|
||
|
||
<!-- ============ HOME ============ -->
|
||
<div class="screen active" id="home">
|
||
<div class="hero">
|
||
<button class="iconbtn" onclick="toggleInfo(true)" aria-label="Info zum Prototyp"><svg class="ic"><use href="#i-info"/></svg></button>
|
||
<div class="logo">Brand<span>Loop</span></div>
|
||
<p>Deine Ads lernen aus jedem Euro.</p>
|
||
</div>
|
||
<div class="card click" onclick="go('create-choice')">
|
||
<div class="cardrow">
|
||
<div class="ico rose"><svg class="ic"><use href="#i-plus"/></svg></div>
|
||
<div class="body"><h4>Erstellen</h4><p>Neue Szene (Video) oder neues Modell (Person / Produkt)</p></div>
|
||
<svg class="ic chev"><use href="#i-chev"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="card click" onclick="go('improve-select')">
|
||
<div class="cardrow">
|
||
<div class="ico amber"><svg class="ic"><use href="#i-spark"/></svg></div>
|
||
<div class="body"><h4>Verbessern</h4><p>Ein Asset deiner Brand weiterentwickeln – jederzeit</p></div>
|
||
<svg class="ic chev"><use href="#i-chev"/></svg>
|
||
</div>
|
||
</div>
|
||
<h3>Zuletzt</h3>
|
||
<div class="card click" onclick="go('scene-results')">
|
||
<div class="cardrow">
|
||
<div class="ico zinc"><svg class="ic"><use href="#i-film"/></svg></div>
|
||
<div class="body"><h4 class="t-sm">Szene: „Roter Lippenstift – Close-up"</h4><p>3 Videos generiert · Vote offen</p></div>
|
||
<svg class="ic chev"><use href="#i-chev"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="note">Bewusst leer gehalten: Beim App-Start keine Fragen, kein Formular. Das Unternehmensprofil kommt erst beim ersten Klick auf „Erstellen".</div>
|
||
</div>
|
||
|
||
<!-- ============ ERSTELLEN: AUSWAHL ============ -->
|
||
<div class="screen" id="create-choice">
|
||
<div class="topbar"><button class="iconbtn" onclick="go('home')" aria-label="Zurück"><svg class="ic"><use href="#i-back"/></svg></button><h1>Erstellen</h1></div>
|
||
<div class="card click" onclick="go('tut1')">
|
||
<div class="cardrow">
|
||
<div class="ico rose"><svg class="ic"><use href="#i-film"/></svg></div>
|
||
<div class="body"><h4>Szene</h4><p>Video aus einem Prompt – mit deiner Brand Knowledge angereichert. Mehrere KI-Modelle parallel.</p></div>
|
||
<svg class="ic chev"><use href="#i-chev"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="card click" onclick="go('model-create')">
|
||
<div class="cardrow">
|
||
<div class="ico orange"><svg class="ic"><use href="#i-user"/></svg></div>
|
||
<div class="body"><h4>Modell</h4><p>Person oder Produkt als festes Brand-Asset erstellen – bleibt in jedem Video 1:1 gleich.</p></div>
|
||
<svg class="ic chev"><use href="#i-chev"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="note">Beim allerersten Erstellen erscheint einmalig das Unternehmensprofil (nächster Screen). Danach geht's immer direkt zur Szene.</div>
|
||
</div>
|
||
|
||
<!-- ============ TUTORIAL 1 (Fullscreen) ============ -->
|
||
<div class="screen" id="tut1">
|
||
<div class="tut">
|
||
<div class="emoji">👋</div>
|
||
<h1>Bevor's losgeht</h1>
|
||
<p class="sub">Damit deine Videos nach <span class="hl">deiner Brand</span> aussehen, stellen wir dir einmalig 5 kurze Fragen.<br><br>Danach nie wieder – ab dann lernt die App von selbst, mit jedem Video.</p>
|
||
<button class="btn" onclick="go('onboarding1')">Los geht's</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ ONBOARDING 1 ============ -->
|
||
<div class="screen" id="onboarding1">
|
||
<div class="topbar"><button class="iconbtn" onclick="go('tut1')" aria-label="Zurück"><svg class="ic"><use href="#i-back"/></svg></button><h1>Dein Unternehmen</h1></div>
|
||
<div class="steps"><div class="on"></div><div></div></div>
|
||
<label>Labelname <span class="req">*</span></label>
|
||
<input type="text" placeholder="z. B. VELVET ROUGE Cosmetics">
|
||
<label>Was verkaufst du? <span class="req">*</span></label>
|
||
<input type="text" placeholder="z. B. vegane Lippenstifte & Lipgloss">
|
||
<label>Wen willst du erreichen? <span class="req">*</span></label>
|
||
<input type="text" placeholder="z. B. Frauen 18–35, TikTok & Instagram">
|
||
<label>3 Worte, die deine Brand beschreiben <span class="req">*</span></label>
|
||
<input type="text" placeholder="z. B. mutig, clean, luxuriös">
|
||
<label>Wie lange seid ihr schon auf dem Markt? <span class="req">*</span></label>
|
||
<input type="text" placeholder="z. B. seit 2021">
|
||
<button class="btn" onclick="go('tut2')">Weiter</button>
|
||
</div>
|
||
|
||
<!-- ============ TUTORIAL 2 (Fullscreen) ============ -->
|
||
<div class="screen" id="tut2">
|
||
<div class="tut">
|
||
<div class="emoji">📸</div>
|
||
<h1>Zeig uns deine Brand</h1>
|
||
<p class="sub">Logo, Produktbilder, deine besten bisherigen Ads – alles optional.<br><br>Aber: Je mehr du hochlädst, desto besser sieht schon dein <span class="hl">allererstes Video</span> aus.</p>
|
||
<button class="btn" onclick="go('onboarding2')">Weiter</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ ONBOARDING 2 ============ -->
|
||
<div class="screen" id="onboarding2">
|
||
<div class="topbar"><button class="iconbtn" onclick="go('tut2')" aria-label="Zurück"><svg class="ic"><use href="#i-back"/></svg></button><h1>Uploads</h1></div>
|
||
<div class="steps"><div class="on"></div><div class="on"></div></div>
|
||
<p class="sub" style="margin-bottom:12px;">Optional, aber empfohlen – füttert deine Knowledge Base von Tag 1.</p>
|
||
<div class="ph"><svg class="ic"><use href="#i-up"/></svg><span>[Upload: Logo]</span></div>
|
||
<div class="ph"><svg class="ic"><use href="#i-up"/></svg><span>[Upload: Produktbilder – z. B. Lippenstift „Rouge No. 5" aus 3 Winkeln]</span></div>
|
||
<div class="ph"><svg class="ic"><use href="#i-up"/></svg><span>[Upload: Deine bisher besten Ads (Video/Bild) – das System lernt daraus deine Startattribute]</span></div>
|
||
<button class="btn" onclick="go('scene-create')">Profil speichern → Erste Szene</button>
|
||
<button class="btn sec" onclick="go('scene-create')">Überspringen</button>
|
||
</div>
|
||
|
||
<!-- ============ SZENE ERSTELLEN ============ -->
|
||
<div class="screen" id="scene-create">
|
||
<div class="topbar"><button class="iconbtn" onclick="go('create-choice')" aria-label="Zurück"><svg class="ic"><use href="#i-back"/></svg></button><h1>Szene erstellen</h1></div>
|
||
<label>Dein Prompt</label>
|
||
<textarea>Eine Frau hält einen roten Lippenstift in die Kamera.</textarea>
|
||
<h3>Anzahl Videos</h3>
|
||
<div class="pill-row">
|
||
<div class="pill" onclick="pick(this)">3</div>
|
||
<div class="pill on" onclick="pick(this)">4</div>
|
||
<div class="pill" onclick="pick(this)">5</div>
|
||
<div class="pill" onclick="pick(this)">6</div>
|
||
</div>
|
||
<div class="note">Jedes Video von einem anderen Top-KI-Modell. Mehr Videos = mehr Vergleichssignal, Preis pro Video.</div>
|
||
<h3>Automatisch eingebaut (Brand Knowledge)</h3>
|
||
<div class="card">
|
||
<span class="tag">Regel: cleaner Hintergrund</span>
|
||
<span class="tag">Gesicht: „Mara" v3 <span class="score">6120</span></span>
|
||
<span class="tag">Produkt: Rouge No. 5 v2 <span class="score">6480</span></span>
|
||
<span class="tag">Location: Kaiserslautern <span class="score">5240</span></span>
|
||
<span class="tag">Voice: warm-weiblich <span class="score">5890</span></span>
|
||
<p style="margin-top:10px;">Dein Prompt wird automatisch überarbeitet und mit den Top-Attributen & freigegebenen Assets angereichert.</p>
|
||
</div>
|
||
<button class="btn" onclick="go('script-confirm')">Weiter → Script</button>
|
||
</div>
|
||
|
||
<!-- ============ SCRIPT BESTÄTIGEN ============ -->
|
||
<div class="screen" id="script-confirm">
|
||
<div class="topbar"><button class="iconbtn" onclick="go('scene-create')" aria-label="Zurück"><svg class="ic"><use href="#i-back"/></svg></button><h1>Dein Script</h1></div>
|
||
<p class="sub" style="margin-bottom:10px;">Aus deinem Prompt + Brand Knowledge erstellt. Lies es, ändere was du willst – generiert wird erst nach deiner Bestätigung.</p>
|
||
<textarea style="min-height:250px; font-size:13px; line-height:1.6;">SZENE: „Roter Lippenstift – Close-up"
|
||
|
||
SETTING: Kaiserslautern, Abendlicht (golden hour), cleaner unscharfer Hintergrund
|
||
|
||
PERSON: Mara (v3, freigegeben) – dunkle schulterlange Haare, nahbar-edel
|
||
|
||
ABLAUF:
|
||
1. Close-up: Maras Hand hebt Rouge No. 5 (v2) frontal in die Kamera
|
||
2. Schnitt auf Gesicht: natürliches Lächeln, Blick in die Linse
|
||
3. Produkt dreht sich langsam, Logo sichtbar (nie verzerrt)
|
||
|
||
VOICE (warm-weiblich): „Dein Rot. Dein Statement."
|
||
|
||
TEXT-OVERLAY: keins (Brand-Stil: clean)</textarea>
|
||
<div class="note">Erst nach Bestätigung werden die Videos generiert – Kosten entstehen erst dann. Änderungen am Script fließen als Signal in die Knowledge Base.</div>
|
||
<button class="btn" onclick="go('scene-results')"><svg class="ic"><use href="#i-check"/></svg>Bestätigen & 4 Videos generieren</button>
|
||
<button class="btn sec" onclick="go('script-confirm')"><svg class="ic"><use href="#i-refresh"/></svg>Script neu schreiben lassen</button>
|
||
</div>
|
||
|
||
<!-- ============ SZENE ERGEBNISSE ============ -->
|
||
<div class="screen" id="scene-results">
|
||
<div class="topbar"><button class="iconbtn" onclick="go('scene-create')" aria-label="Zurück"><svg class="ic"><use href="#i-back"/></svg></button><h1>Wähle das Beste</h1></div>
|
||
<p class="sub" style="margin-bottom:16px;">Tippe auf dein Favoriten-Video. Die goldene Umrandung ist die System-Vorhersage.</p>
|
||
|
||
<div class="card click fav" onclick="go('scene-vote')">
|
||
<span class="favlabel">SYSTEM-FAVORIT</span>
|
||
<h4 class="t-sm">Video 1 · Modell A</h4>
|
||
<div class="ph"><svg class="ic"><use href="#i-play"/></svg><span>[VIDEO: Mara (Gesicht v3) hält Rouge No. 5 frontal in die Kamera, Close-up, warmes Abendlicht, Kaiserslautern-Kulisse unscharf im Hintergrund, warme weibliche Stimme: „Dein Rot. Dein Statement."]</span></div>
|
||
<span class="tag">warm-rot</span><span class="tag">Close-up</span><span class="tag">Kaiserslautern</span>
|
||
</div>
|
||
|
||
<div class="card click" onclick="go('scene-vote')">
|
||
<h4 class="t-sm">Video 2 · Modell B</h4>
|
||
<div class="ph"><svg class="ic"><use href="#i-play"/></svg><span>[VIDEO: Gleiche Szene, aber kühles Studiolicht, langsamer Schwenk von der Hand zum Gesicht, Text-Overlay statt Stimme]</span></div>
|
||
<span class="tag">Studio</span><span class="tag">Schwenk</span><span class="tag">Text-Overlay</span>
|
||
</div>
|
||
|
||
<div class="card click" onclick="go('scene-vote')">
|
||
<h4 class="t-sm">Video 3 · Modell C</h4>
|
||
<div class="ph"><svg class="ic"><use href="#i-play"/></svg><span>[VIDEO: Outdoor Köln, Mara läuft auf Kamera zu, hält Lippenstift hoch, Upbeat-Musik, schnelle Schnitte]</span></div>
|
||
<span class="tag">Köln</span><span class="tag">Bewegung</span><span class="tag">Upbeat</span>
|
||
</div>
|
||
|
||
<div class="card click" onclick="go('scene-vote')">
|
||
<h4 class="t-sm">Video 4 · Modell D</h4>
|
||
<div class="ph"><svg class="ic"><use href="#i-play"/></svg><span>[VIDEO: Extreme Makro-Aufnahme nur vom Lippenstift, der sich dreht, ASMR-Sound beim Öffnen]</span></div>
|
||
<span class="tag">Makro</span><span class="tag">ASMR</span><span class="tag">ohne Gesicht</span>
|
||
</div>
|
||
|
||
<div class="note">Bestätigst du den markierten Favoriten → wenig Elo-Punkte. Weichst du ab → volle Punkte (stärkeres Signal).</div>
|
||
</div>
|
||
|
||
<!-- ============ VOTE + GEZIELTE FRAGE ============ -->
|
||
<div class="screen" id="scene-vote">
|
||
<div class="topbar"><button class="iconbtn" onclick="go('scene-results')" aria-label="Zurück"><svg class="ic"><use href="#i-back"/></svg></button><h1>Danke!</h1></div>
|
||
<div class="card" style="border-color:rgba(52,211,153,.4);">
|
||
<h4><span class="badge b-ok">GESPEICHERT</span></h4>
|
||
<p style="margin-top:8px;">Dein Vote fließt in die Knowledge Base. Übereinstimmung mit System-Vorhersage: <span class="hl">78 %</span> (letzte 30 Votes).</p>
|
||
</div>
|
||
<h3>Kurze Frage (optional)</h3>
|
||
<div class="card">
|
||
<p style="color:var(--txt); font-size:14px; margin-bottom:8px;">Welche Location war besser?</p>
|
||
<div class="pill-row">
|
||
<div class="pill" onclick="pick(this)">Kaiserslautern</div>
|
||
<div class="pill" onclick="pick(this)">Köln</div>
|
||
<div class="pill" onclick="pick(this)">Egal</div>
|
||
</div>
|
||
<div class="note">Gezielte Fragen wirken nur auf dieses eine Attribut – das schnellste Signal gegen das Zuordnungsproblem.</div>
|
||
</div>
|
||
<h3>Video verwenden</h3>
|
||
<button class="btn" onclick="go('publish')"><svg class="ic"><use href="#i-up"/></svg>Hochladen / Ad schalten</button>
|
||
<button class="btn sec" onclick="go('improve-select')"><svg class="ic"><use href="#i-spark"/></svg>Erst noch verbessern</button>
|
||
</div>
|
||
|
||
<!-- ============ PUBLISH / PERFORMANCE ============ -->
|
||
<div class="screen" id="publish">
|
||
<div class="topbar"><button class="iconbtn" onclick="go('scene-vote')" aria-label="Zurück"><svg class="ic"><use href="#i-back"/></svg></button><h1>Ad läuft</h1></div>
|
||
<div class="card">
|
||
<h4 class="t-sm">„Roter Lippenstift – Close-up" · Video 1</h4>
|
||
<div class="ph"><svg class="ic"><use href="#i-play"/></svg><span>[Gewähltes Video – veröffentlicht auf TikTok & Instagram via Ads-API]</span></div>
|
||
</div>
|
||
<h3>Live-Performance (Meta / TikTok API)</h3>
|
||
<div class="row">
|
||
<div class="card metric"><p>CTR</p><h4 class="g">2,4 %</h4></div>
|
||
<div class="card metric"><p>Thumbstop</p><h4 class="g">41 %</h4></div>
|
||
<div class="card metric"><p>ROAS</p><h4 class="g">3,1×</h4></div>
|
||
</div>
|
||
<div class="card">
|
||
<p><span class="hl">+218</span> neue Follower seit Schaltung</p>
|
||
</div>
|
||
<div class="note">Performance-Daten fließen automatisch und höher gewichtet als Votes in die Scores – der Markt entscheidet, keine Bestätigung nötig. Jedes Video loggt, welche Asset-Versionen es nutzte.</div>
|
||
<button class="btn sec" onclick="go('knowledge')">→ Was hat das System gelernt?</button>
|
||
</div>
|
||
|
||
<!-- ============ MODELL ERSTELLEN ============ -->
|
||
<div class="screen" id="model-create">
|
||
<div class="topbar"><button class="iconbtn" onclick="go('create-choice')" aria-label="Zurück"><svg class="ic"><use href="#i-back"/></svg></button><h1>Modell erstellen</h1></div>
|
||
<div class="pill-row">
|
||
<div class="pill on" onclick="pick(this)">Person</div>
|
||
<div class="pill" onclick="pick(this)">Produkt</div>
|
||
</div>
|
||
<label style="margin-top:10px;">Beschreibe deine Person</label>
|
||
<textarea>Frau, Ende 20, dunkle schulterlange Haare, natürliches Lächeln, nahbar aber edel – passt zu „mutig, clean, luxuriös".</textarea>
|
||
<label>Referenzbilder</label>
|
||
<div class="ph"><svg class="ic"><use href="#i-up"/></svg><span>[Upload: 3–10 Referenzbilder der gewünschten Person / des Looks]</span></div>
|
||
<div class="note">Rechte-Regel: Gesichter echter Personen nur mit dokumentierter Einwilligung. Rein KI-generierte Gesichter sind der sichere Standard.</div>
|
||
<button class="btn" onclick="go('model-result')">Modell generieren</button>
|
||
</div>
|
||
|
||
<!-- ============ MODELL ERGEBNIS ============ -->
|
||
<div class="screen" id="model-result">
|
||
<div class="topbar"><button class="iconbtn" onclick="go('model-create')" aria-label="Zurück"><svg class="ic"><use href="#i-back"/></svg></button><h1>Dein Modell</h1></div>
|
||
<div class="card">
|
||
<h4>„Mara" <span class="badge b-new">v1 · ENTWURF</span></h4>
|
||
<div class="ph"><svg class="ic"><use href="#i-img"/></svg><span>[BILD: Generierte Frau, Ende 20, dunkle schulterlange Haare, natürliches Lächeln, cleaner Studiohintergrund – aus 4 Blickwinkeln]</span></div>
|
||
<span class="tag">Ende 20</span><span class="tag">dunkle Haare</span><span class="tag">nahbar-edel</span>
|
||
</div>
|
||
<button class="btn" onclick="go('knowledge')"><svg class="ic"><use href="#i-check"/></svg>Freigeben (Release v1)</button>
|
||
<button class="btn sec" onclick="go('improve-input')"><svg class="ic"><use href="#i-spark"/></svg>Verbessern – sieht noch nicht gut aus</button>
|
||
<div class="note">Nur <span class="hl">freigegebene</span> Versionen werden in Videos verwendet. Verbessern erzeugt neue Versionen (v2, v3 …) – ein neues Gesicht ist ein bewusster Release, kein schleichender Drift.</div>
|
||
</div>
|
||
|
||
<!-- ============ VERBESSERN: ASSET WÄHLEN ============ -->
|
||
<div class="screen" id="improve-select">
|
||
<div class="topbar"><button class="iconbtn" onclick="go('home')" aria-label="Zurück"><svg class="ic"><use href="#i-back"/></svg></button><h1>Verbessern</h1></div>
|
||
<p class="sub" style="margin-bottom:16px;">Wähle das Asset, das du weiterentwickeln willst.</p>
|
||
<div class="card click" onclick="go('improve-input')">
|
||
<div class="cardrow">
|
||
<div class="ico rose"><svg class="ic"><use href="#i-user"/></svg></div>
|
||
<div class="body"><h4 class="t-sm">Gesicht „Mara" <span class="badge b-ok">v3 · FREIGEGEBEN</span></h4><p>Verwendet in 12 Videos · Score <span class="score">6120</span></p></div>
|
||
<svg class="ic chev"><use href="#i-chev"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="card click" onclick="go('improve-input')">
|
||
<div class="cardrow">
|
||
<div class="ico orange"><svg class="ic"><use href="#i-box"/></svg></div>
|
||
<div class="body"><h4 class="t-sm">Produkt „Rouge No. 5" <span class="badge b-ok">v2 · FREIGEGEBEN</span></h4><p>Verwendet in 18 Videos · Score <span class="score">6480</span></p></div>
|
||
<svg class="ic chev"><use href="#i-chev"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="card click" onclick="go('improve-input')">
|
||
<div class="cardrow">
|
||
<div class="ico zinc"><svg class="ic"><use href="#i-film"/></svg></div>
|
||
<div class="body"><h4 class="t-sm">Szene „Lippenstift Close-up"</h4><p>Video-Iteration: Licht, Schnitt, Tempo anpassen</p></div>
|
||
<svg class="ic chev"><use href="#i-chev"/></svg>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ VERBESSERN: EINGABE ============ -->
|
||
<div class="screen" id="improve-input">
|
||
<div class="topbar"><button class="iconbtn" onclick="go('improve-select')" aria-label="Zurück"><svg class="ic"><use href="#i-back"/></svg></button><h1>„Mara" verbessern</h1></div>
|
||
<div class="pill-row">
|
||
<div class="pill on" onclick="pick(this)">Text-Feedback</div>
|
||
<div class="pill" onclick="pick(this)">Referenz hochladen</div>
|
||
</div>
|
||
<label style="margin-top:10px;">Was soll besser werden?</label>
|
||
<textarea>Haare etwas dunkler, Ausstrahlung natürlicher, weniger Studio-Look.</textarea>
|
||
<div class="card" style="border-style:dashed;">
|
||
<p style="margin-bottom:8px;"><span class="hl">Bei Referenz-Upload:</span></p>
|
||
<div class="ph"><svg class="ic"><use href="#i-up"/></svg><span>[Upload: Referenzbild]</span></div>
|
||
<label>Was soll aus der Referenz übernommen werden? <span class="req">* Pflichtfeld</span></label>
|
||
<input type="text" placeholder="z. B. nur die Frisur und der Hautton – nicht das Gesicht" style="margin-bottom:0;">
|
||
<div class="note">Ohne Beschreibung rät das System, was gemeint ist, und kopiert das Falsche. Aus fremden Referenzen wird gelernt, nie 1:1 kopiert.</div>
|
||
</div>
|
||
<button class="btn" onclick="go('improve-results')">Neue Versionen generieren</button>
|
||
</div>
|
||
|
||
<!-- ============ VERBESSERN: VORHER/NACHHER ============ -->
|
||
<div class="screen" id="improve-results">
|
||
<div class="topbar"><button class="iconbtn" onclick="go('improve-input')" aria-label="Zurück"><svg class="ic"><use href="#i-back"/></svg></button><h1>Vorher / Nachher</h1></div>
|
||
<h3>Vorher (v3 – aktuell freigegeben)</h3>
|
||
<div class="ph"><svg class="ic"><use href="#i-img"/></svg><span>[BILD: Mara v3 – schulterlange dunkle Haare, Studio-Look]</span></div>
|
||
<h3>Wähle die neue Version</h3>
|
||
<p class="sub" style="margin-bottom:12px;">Jede Version zieht andere Vorlieben aus deiner Knowledge Base.</p>
|
||
|
||
<div class="card click" onclick="go('improve-vote')">
|
||
<h4 class="t-sm">Version A</h4>
|
||
<div class="ph"><svg class="ic"><use href="#i-img"/></svg><span>[BILD: Haare fast schwarz, Tageslicht statt Studio, dezentes Lächeln]</span></div>
|
||
<span class="tag">Tageslicht <span class="score">5210</span></span><span class="tag">dezent</span>
|
||
</div>
|
||
<div class="card click" onclick="go('improve-vote')">
|
||
<h4 class="t-sm">Version B</h4>
|
||
<div class="ph"><svg class="ic"><use href="#i-img"/></svg><span>[BILD: Dunkelbraune Haare, warmes Abendlicht (Top-Attribut!), offenes Lachen]</span></div>
|
||
<span class="tag">warmes Abendlicht <span class="score">6350</span></span><span class="tag">offen</span>
|
||
</div>
|
||
<div class="card click" onclick="go('improve-vote')">
|
||
<h4 class="t-sm">Version C</h4>
|
||
<div class="ph"><svg class="ic"><use href="#i-img"/></svg><span>[BILD: Wie v3, aber Outdoor-Hintergrund unscharf, natürlichere Haut-Textur]</span></div>
|
||
<span class="tag">Outdoor <span class="score">5580</span></span><span class="tag">natürliche Haut <span class="badge b-new">NEU · Start 5720 (Ø Kategorie)</span></span>
|
||
</div>
|
||
<div class="note">Gewinner-Merkmale steigen in der Elo gegenüber der ersetzten Version – aber nur Merkmale, in denen sich die Versionen <span class="hl">unterscheiden</span>. Neue Merkmale starten beim Kategorie-Durchschnitt (nicht bei 5000) mit hohem K-Faktor.</div>
|
||
</div>
|
||
|
||
<!-- ============ VERBESSERN: VOTE ============ -->
|
||
<div class="screen" id="improve-vote">
|
||
<div class="topbar"><button class="iconbtn" onclick="go('improve-results')" aria-label="Zurück"><svg class="ic"><use href="#i-back"/></svg></button><h1>Version gewählt</h1></div>
|
||
<div class="card" style="border-color:rgba(52,211,153,.4);">
|
||
<h4><span class="badge b-ok">MARA v4 ERSTELLT</span></h4>
|
||
<p style="margin-top:8px;">Versionskette geloggt: v3 → v4 · Grund: „Haare dunkler, natürlicher" · Gewinner: Version B</p>
|
||
<p style="margin-top:6px;">Elo-Update: <b style="color:var(--gold);">warmes Abendlicht +14</b> · Studio-Look −14</p>
|
||
</div>
|
||
<button class="btn" onclick="go('knowledge')"><svg class="ic"><use href="#i-check"/></svg>v4 freigeben (ab jetzt in Videos)</button>
|
||
<button class="btn sec" onclick="go('improve-input')"><svg class="ic"><use href="#i-spark"/></svg>Weiter verbessern (v5)</button>
|
||
<div class="note">Bis zur Freigabe nutzen alle Videos weiterhin v3 – Wiedererkennung bleibt erhalten, und es bleibt messbar, welche Version performt.</div>
|
||
</div>
|
||
|
||
<!-- ============ KNOWLEDGE BASE ============ -->
|
||
<div class="screen" id="knowledge">
|
||
<div class="topbar"><button class="iconbtn" onclick="go('home')" aria-label="Zurück"><svg class="ic"><use href="#i-back"/></svg></button><h1>Knowledge Base</h1></div>
|
||
|
||
<h3>Feste Regeln <span style="text-transform:none; letter-spacing:0; color:var(--faint); font-weight:500;">(kein Score, gelten immer)</span></h3>
|
||
<div class="card">
|
||
<div class="rule"><svg class="ic"><use href="#i-check"/></svg><p style="color:var(--txt);">Cleaner Hintergrund</p></div>
|
||
<div class="rule"><svg class="ic"><use href="#i-check"/></svg><p style="color:var(--txt);">Nur zeigen, was verlangt ist</p></div>
|
||
<div class="rule"><svg class="ic"><use href="#i-check"/></svg><p style="color:var(--txt);">Logo nie verzerren</p></div>
|
||
</div>
|
||
|
||
<h3>Assets (freigegebene Versionen)</h3>
|
||
<div class="card">
|
||
<div class="asset"><svg class="ic"><use href="#i-user"/></svg><span>Mara <span class="badge b-ok">v4</span></span><span class="score">6120</span></div>
|
||
<div class="asset"><svg class="ic"><use href="#i-box"/></svg><span>Rouge No. 5 <span class="badge b-ok">v2</span></span><span class="score">6480</span></div>
|
||
</div>
|
||
|
||
<h3>Attribute (Elo 0–10.000)</h3>
|
||
<div class="card click" onclick="go('kb-detail')">
|
||
<div class="cardrow">
|
||
<div class="ico rose"><svg class="ic"><use href="#i-pin"/></svg></div>
|
||
<div class="body"><h4 class="t-sm">Location: Kaiserslautern <span class="score">5240 ▲</span></h4><p>12 Videos · 8 Siege · Unter-Attribut: Stadion <span class="score">5560</span></p></div>
|
||
<svg class="ic chev"><use href="#i-chev"/></svg>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="cardrow">
|
||
<div class="ico zinc"><svg class="ic"><use href="#i-pin"/></svg></div>
|
||
<div class="body"><h4 class="t-sm">Location: Köln <span class="score" style="color:var(--faint);">4980 ▼</span> <span class="badge b-arch">ARCHIVIERT</span></h4><p>Historie bleibt erhalten – ein schlechter Score ist auch Wissen.</p></div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<div class="asset"><svg class="ic"><use href="#i-bulb"/></svg><span>Licht: warmes Abendlicht</span><span class="score">6350 ▲</span></div>
|
||
<div class="asset"><svg class="ic"><use href="#i-mic"/></svg><span>Voice: warm-weiblich</span><span class="score">5890</span></div>
|
||
</div>
|
||
|
||
<h3>Log (letzte Einträge)</h3>
|
||
<div class="log">19.07. · Vote „Verbessern Mara v4": warmes Abendlicht +14 (K hoch), Studio-Look −14</div>
|
||
<div class="log">18.07. · Ad-Performance Video #31: Kaiserslautern +22, Close-up +22 <b style="color:#fb923c;">(Performance zählt 2×)</b></div>
|
||
<div class="log">17.07. · Gezielte Frage: „Kaiserslautern besser als Köln" → K'lautern +10, Köln −10</div>
|
||
<div class="log">17.07. · LLM-Vergleich K'lautern vs. Köln: „Stadion war der Unterschied" → neues Unter-Attribut Stadion (Start: Ø 5480)</div>
|
||
</div>
|
||
|
||
<!-- ============ KB DETAIL ============ -->
|
||
<div class="screen" id="kb-detail">
|
||
<div class="topbar"><button class="iconbtn" onclick="go('knowledge')" aria-label="Zurück"><svg class="ic"><use href="#i-back"/></svg></button><h1>Kaiserslautern</h1></div>
|
||
<div class="card">
|
||
<h4>Score: <span class="score">5240</span> · 12 Videos · 8 Siege</h4>
|
||
<p style="margin-top:10px;"><span class="hl">Was diese Location ausmacht:</span><br>Urban, aber nahbar; Stadion als Wiedererkennungspunkt. Warmes Abendlicht funktioniert besser als Tageslicht.</p>
|
||
<p style="margin-top:10px;"><span class="hl">Gelernt aus Vergleichen:</span><br>vs. Köln (12.07.): Stadion-Hintergrund war der Unterschied → Stadion als eigenes Unter-Attribut angelegt.</p>
|
||
</div>
|
||
<h3>Score-Verlauf</h3>
|
||
<div class="log">Start 5000 → 5090 (Votes) → 5180 (Ad-Performance) → 5240 (heute)</div>
|
||
<div class="note">Vollständige Historie pro Attribut: jeder Vote mit Datum, Vergleichspartner, Punktänderung und Grund. Ablesbar, was besser und was schlechter geworden ist.</div>
|
||
</div>
|
||
|
||
<!-- ============ DEVELOPER-MODUS ============ -->
|
||
<div class="screen" id="devmode">
|
||
<div class="topbar"><button class="iconbtn" onclick="go('home')" aria-label="Zurück"><svg class="ic"><use href="#i-back"/></svg></button><h1>Developer-Modus</h1></div>
|
||
<div class="card" style="border-color:rgba(249,115,22,.4);">
|
||
<div class="cardrow">
|
||
<div class="ico orange"><svg class="ic"><use href="#i-lock"/></svg></div>
|
||
<div class="body"><p><b style="color:#fb923c;">Nur intern.</b> Dieser Bereich ist für Nutzer unsichtbar – hier liegt das Feintuning, das die App ausmacht. Im Prototyp zur Präsentation sichtbar geschaltet.</p></div>
|
||
</div>
|
||
</div>
|
||
|
||
<h3>Feste Regeln (Prompt-Injection, jede Generierung)</h3>
|
||
<div class="card">
|
||
<div class="rule"><svg class="ic"><use href="#i-check"/></svg><p style="color:var(--txt);">Cleaner, neutraler Hintergrund</p></div>
|
||
<div class="rule"><svg class="ic"><use href="#i-check"/></svg><p style="color:var(--txt);">Nur zeigen, was verlangt ist – nicht mehr, nicht weniger</p></div>
|
||
<div class="rule"><svg class="ic"><use href="#i-check"/></svg><p style="color:var(--txt);">Logo nie verzerren oder umfärben</p></div>
|
||
<div class="rule"><svg class="ic"><use href="#i-check"/></svg><p style="color:var(--txt);">Aus fremden Referenzen lernen, nie 1:1 kopieren</p></div>
|
||
</div>
|
||
<input type="text" placeholder="+ Regel hinzufügen …">
|
||
<div class="note" style="margin-top:0;">Regeln nehmen nicht am Scoring teil und können nicht absteigen. Der Nutzer sieht und verwaltet sie nicht – sie sind Teil des Produkts.</div>
|
||
|
||
<h3>Prompt-Einblick (letzte Generierung)</h3>
|
||
<div class="code">[SYSTEM] Regeln: cleaner Hintergrund; nur Verlangtes zeigen; Logo unverändert …<br>[ASSETS] Gesicht: Mara v3 (ref_0231) · Produkt: Rouge No. 5 v2 (ref_0198)<br>[ATTRIBUTE] Location: Kaiserslautern (5240) · Licht: warmes Abendlicht (6350) · Voice: warm-weiblich (5890)<br>[SCRIPT] Close-up: Hand hebt Lippenstift frontal … Voice: „Dein Rot. Dein Statement."<br><b>[USER-PROMPT]</b> Eine Frau hält einen roten Lippenstift in die Kamera.</div>
|
||
|
||
<h3>Elo-Parameter</h3>
|
||
<div class="row">
|
||
<div class="card metric"><p>K-Faktor neu</p><h4>32</h4></div>
|
||
<div class="card metric"><p>K-Faktor etabliert</p><h4>8</h4></div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="card metric"><p>Performance : Vote</p><h4>2 : 1</h4></div>
|
||
<div class="card metric"><p>Favorit bestätigt</p><h4>× 0,3</h4></div>
|
||
</div>
|
||
<div class="card"><p>Startwert neuer Einträge: <span class="hl">Kategorie-Durchschnitt</span> (Fallback 5000, wenn Kategorie leer)</p></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- ============ NAVIGATION ============ -->
|
||
<nav class="nav">
|
||
<button id="n-home" class="on" onclick="go('home')"><svg class="ic"><use href="#i-home"/></svg><span>Home</span></button>
|
||
<button id="n-create" onclick="go('create-choice')"><svg class="ic"><use href="#i-plus"/></svg><span>Erstellen</span></button>
|
||
<button id="n-improve" onclick="go('improve-select')"><svg class="ic"><use href="#i-spark"/></svg><span>Verbessern</span></button>
|
||
<button id="n-kb" onclick="go('knowledge')"><svg class="ic"><use href="#i-db"/></svg><span>Knowledge</span></button>
|
||
<button id="n-dev" onclick="go('devmode')" style="opacity:.4;" title="Nur intern sichtbar"><svg class="ic"><use href="#i-gear"/></svg><span>Dev</span></button>
|
||
</nav>
|
||
|
||
<!-- ============ INFO-SHEET (Präsentationsnotizen) ============ -->
|
||
<div class="backdrop" id="backdrop" onclick="toggleInfo(false)"></div>
|
||
<div class="sheet" id="infoSheet">
|
||
<div class="grab"></div>
|
||
<h2>BrandLoop – Prototyp</h2>
|
||
<p><b>Textversion:</b> Alle Bilder & Videos sind durch Beschreibungen (gestrichelte Boxen) ersetzt. Alles ist klickbar.</p>
|
||
<p style="margin-bottom:6px;"><b>Prinzipien:</b></p>
|
||
<ul>
|
||
<li>Start ohne Fragen – Profil erst beim ersten „Erstellen", tutorial-artig</li>
|
||
<li>Script mit Bestätigung vor jeder Generierung</li>
|
||
<li>Favorit dezent umrandet (gold)</li>
|
||
<li>Verbessern jederzeit auf jedes Asset</li>
|
||
<li>Feste Regeln + Prompt-Einblick + Elo-Parameter im versteckten Developer-Modus (das App-Geheimnis)</li>
|
||
</ul>
|
||
<p style="margin-bottom:0;"><b>Klickpfad zum Präsentieren:</b><br>Home → Erstellen → Tutorial/Profil → Szene → Script → Auswahl → Frage → Knowledge Base → Verbessern → Dev-Modus</p>
|
||
</div>
|
||
|
||
<script>
|
||
function go(id){
|
||
document.querySelectorAll('.screen').forEach(s=>s.classList.remove('active'));
|
||
document.getElementById(id).classList.add('active');
|
||
const map={home:'n-home','create-choice':'n-create','improve-select':'n-improve',knowledge:'n-kb',devmode:'n-dev'};
|
||
document.querySelectorAll('.nav button').forEach(b=>b.classList.remove('on'));
|
||
if(map[id]) document.getElementById(map[id]).classList.add('on');
|
||
window.scrollTo(0,0);
|
||
}
|
||
function pick(el){
|
||
el.parentElement.querySelectorAll('.pill').forEach(p=>p.classList.remove('on'));
|
||
el.classList.add('on');
|
||
}
|
||
function toggleInfo(open){
|
||
document.getElementById('backdrop').classList.toggle('open',open);
|
||
document.getElementById('infoSheet').classList.toggle('open',open);
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|