491 lines
31 KiB
HTML
491 lines
31 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>BrandLoop – Prototyp (Textversion)</title>
|
||
<style>
|
||
:root{
|
||
--bg:#0f0f13; --card:#1a1a22; --card2:#22222c; --line:#2e2e3a;
|
||
--txt:#f2f2f5; --mut:#9a9aa8; --acc:#e0446c; --acc2:#f0a350;
|
||
--ok:#4cc38a; --gold:#f5c542;
|
||
}
|
||
*{box-sizing:border-box; margin:0; padding:0; font-family:'Segoe UI',system-ui,sans-serif;}
|
||
body{background:#08080b; color:var(--txt); display:flex; justify-content:center; align-items:flex-start; gap:32px; padding:24px; flex-wrap:wrap;}
|
||
.side{max-width:260px; color:var(--mut); font-size:13px; line-height:1.6; padding-top:12px;}
|
||
.side h2{color:var(--txt); font-size:15px; margin-bottom:8px;}
|
||
.side p{margin-bottom:10px;}
|
||
.phone{width:400px; min-height:780px; background:var(--bg); border:1px solid var(--line); border-radius:36px; padding:18px 16px 84px; position:relative; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.5);}
|
||
.screen{display:none; animation:fade .25s ease;}
|
||
.screen.active{display:block;}
|
||
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;}}
|
||
.topbar{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
|
||
.back{background:var(--card); border:1px solid var(--line); color:var(--mut); border-radius:10px; padding:6px 12px; cursor:pointer; font-size:13px;}
|
||
.back:hover{color:var(--txt);}
|
||
h1{font-size:20px; font-weight:600;}
|
||
h3{font-size:14px; margin:18px 0 8px; color:var(--txt);}
|
||
.sub{color:var(--mut); font-size:13px; margin-top:4px; line-height:1.5;}
|
||
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px; margin-bottom:12px;}
|
||
.card.click{cursor:pointer; transition:border-color .15s;}
|
||
.card.click:hover{border-color:var(--acc);}
|
||
.card h4{font-size:15px; margin-bottom:4px;}
|
||
.card p{font-size:13px; color:var(--mut); line-height:1.5;}
|
||
.placeholder{border:1.5px dashed #4a4a5c; border-radius:12px; padding:14px; font-size:13px; color:var(--mut); font-style:italic; line-height:1.55; background:rgba(255,255,255,.015); margin:8px 0;}
|
||
.btn{display:block; width:100%; text-align:center; background:var(--acc); color:#fff; border:none; border-radius:14px; padding:14px; font-size:15px; font-weight:600; cursor:pointer; margin-top:14px;}
|
||
.btn.sec{background:var(--card2); color:var(--txt); border:1px solid var(--line); font-weight:500;}
|
||
.btn:hover{filter:brightness(1.1);}
|
||
input[type=text], textarea{width:100%; background:var(--card2); border:1px solid var(--line); border-radius:12px; color:var(--txt); padding:12px; font-size:14px; margin:6px 0;}
|
||
textarea{min-height:74px; resize:vertical;}
|
||
label{font-size:12.5px; color:var(--mut);}
|
||
.req{color:var(--acc);}
|
||
.tag{display:inline-block; background:var(--card2); border:1px solid var(--line); color:var(--mut); border-radius:999px; padding:3px 10px; font-size:11.5px; margin:2px 3px 2px 0;}
|
||
.score{color:var(--gold); font-weight:600; font-size:12.5px;}
|
||
.fav{border:2px solid var(--gold) !important; position:relative;}
|
||
.favlabel{position:absolute; top:-9px; right:12px; background:var(--gold); color:#000; font-size:10.5px; font-weight:700; border-radius:999px; padding:2px 8px;}
|
||
.note{font-size:11.5px; color:#6f6f80; line-height:1.5; margin-top:8px;}
|
||
.nav{position:absolute; bottom:0; left:0; right:0; display:flex; border-top:1px solid var(--line); background:var(--bg);}
|
||
.nav button{flex:1; background:none; border:none; color:var(--mut); padding:14px 4px 18px; font-size:12px; cursor:pointer;}
|
||
.nav button.on{color:var(--acc);}
|
||
.pill-row{display:flex; gap:8px; margin:8px 0;}
|
||
.pill{flex:1; text-align:center; background:var(--card2); border:1px solid var(--line); border-radius:12px; padding:10px 6px; font-size:13px; cursor:pointer;}
|
||
.pill.on{border-color:var(--acc); color:var(--acc); font-weight:600;}
|
||
.row{display:flex; gap:10px;}
|
||
.row .card{flex:1;}
|
||
.badge{font-size:10.5px; border-radius:999px; padding:2px 8px; font-weight:600;}
|
||
.b-ok{background:rgba(76,195,138,.15); color:var(--ok);}
|
||
.b-arch{background:rgba(154,154,168,.15); color:var(--mut);}
|
||
.b-new{background:rgba(240,163,80,.15); color:var(--acc2);}
|
||
.log{font-size:12px; color:var(--mut); border-left:2px solid var(--line); padding:4px 0 4px 10px; margin:6px 0;}
|
||
.steps{display:flex; gap:6px; margin-bottom:14px;}
|
||
.steps div{flex:1; height:4px; border-radius:4px; background:var(--card2);}
|
||
.steps div.on{background:var(--acc);}
|
||
.vs{display:flex; align-items:center; gap:8px; margin:10px 0;}
|
||
.vs .placeholder{flex:1; margin:0;}
|
||
.vs span{color:var(--mut); font-size:12px; font-weight:700;}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="side">
|
||
<h2>BrandLoop – Prototyp</h2>
|
||
<p><b style="color:#f2f2f5">Textversion:</b> Alle Bilder & Videos sind durch Beschreibungen (gestrichelte Boxen) ersetzt. Alles ist klickbar.</p>
|
||
<p><b style="color:#f2f2f5">Prinzipien:</b><br>· Start ohne Fragen – Profil erst beim ersten „Erstellen", tutorial-artig<br>· Script mit Bestätigung vor jeder Generierung<br>· Favorit dezent umrandet (gold)<br>· Verbessern jederzeit auf jedes Asset<br>· Feste Regeln + Prompt-Einblick + Elo-Parameter im versteckten Developer-Modus (das App-Geheimnis)</p>
|
||
<p style="font-size:12px;">Klickpfad zum Präsentieren:<br>Home → Erstellen → Tutorial/Profil → Szene → Script → Auswahl → Frage → Knowledge Base → Verbessern → Dev-Modus</p>
|
||
</div>
|
||
|
||
<div class="phone">
|
||
|
||
<!-- ============ HOME ============ -->
|
||
<div class="screen active" id="home">
|
||
<div style="text-align:center; padding:40px 0 28px;">
|
||
<div style="font-size:30px; font-weight:700;">Brand<span style="color:var(--acc)">Loop</span></div>
|
||
<div class="sub">Deine Ads lernen aus jedem Euro.</div>
|
||
</div>
|
||
<div class="card click" onclick="go('create-choice')">
|
||
<h4>＋ Erstellen</h4>
|
||
<p>Neue Szene (Video) oder neues Modell (Person / Produkt)</p>
|
||
</div>
|
||
<div class="card click" onclick="go('improve-select')">
|
||
<h4>✦ Verbessern</h4>
|
||
<p>Ein Asset deiner Brand weiterentwickeln – jederzeit</p>
|
||
</div>
|
||
<h3>Zuletzt</h3>
|
||
<div class="card click" onclick="go('scene-results')">
|
||
<h4 style="font-size:13.5px;">Szene: „Roter Lippenstift – Close-up"</h4>
|
||
<p>3 Videos generiert · Vote offen</p>
|
||
</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="back" onclick="go('home')">‹ Zurück</button><h1>Erstellen</h1></div>
|
||
<div class="card click" onclick="go('tut1')">
|
||
<h4>🎬 Szene</h4>
|
||
<p>Video aus einem Prompt – mit deiner Brand Knowledge angereichert. Mehrere KI-Modelle parallel.</p>
|
||
</div>
|
||
<div class="card click" onclick="go('model-create')">
|
||
<h4>👤 Modell</h4>
|
||
<p>Person oder Produkt als festes Brand-Asset erstellen – bleibt in jedem Video 1:1 gleich.</p>
|
||
</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 style="display:flex; flex-direction:column; justify-content:center; min-height:620px; text-align:center; padding:0 10px;">
|
||
<div style="font-size:44px; margin-bottom:16px;">👋</div>
|
||
<h1 style="margin-bottom:12px;">Bevor's losgeht</h1>
|
||
<p class="sub" style="font-size:14.5px;">Damit deine Videos nach <b style="color:var(--txt)">deiner Brand</b> 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="back" onclick="go('tut1')">‹</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 style="display:flex; flex-direction:column; justify-content:center; min-height:620px; text-align:center; padding:0 10px;">
|
||
<div style="font-size:44px; margin-bottom:16px;">📸</div>
|
||
<h1 style="margin-bottom:12px;">Zeig uns deine Brand</h1>
|
||
<p class="sub" style="font-size:14.5px;">Logo, Produktbilder, deine besten bisherigen Ads – alles optional.<br><br>Aber: Je mehr du hochlädst, desto besser sieht schon dein <b style="color:var(--txt)">allererstes Video</b> aus.</p>
|
||
<button class="btn" onclick="go('onboarding2')">Weiter</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ ONBOARDING 2 ============ -->
|
||
<div class="screen" id="onboarding2">
|
||
<div class="topbar"><button class="back" onclick="go('tut2')">‹</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="placeholder">⬆ [Upload: Logo]</div>
|
||
<div class="placeholder">⬆ [Upload: Produktbilder – z. B. Lippenstift „Rouge No. 5" aus 3 Winkeln]</div>
|
||
<div class="placeholder">⬆ [Upload: Deine bisher besten Ads (Video/Bild) – das System lernt daraus deine Startattribute]</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="back" onclick="go('create-choice')">‹</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:8px;">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="back" onclick="go('scene-create')">‹</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')">✓ Bestätigen & 4 Videos generieren</button>
|
||
<button class="btn sec" onclick="go('script-confirm')">↻ Script neu schreiben lassen</button>
|
||
</div>
|
||
|
||
<!-- ============ SZENE ERGEBNISSE ============ -->
|
||
<div class="screen" id="scene-results">
|
||
<div class="topbar"><button class="back" onclick="go('scene-create')">‹</button><h1>Wähle das Beste</h1></div>
|
||
<p class="sub" style="margin-bottom:12px;">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 style="font-size:13.5px;">Video 1 · Modell A</h4>
|
||
<div class="placeholder">▶ [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."]</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 style="font-size:13.5px;">Video 2 · Modell B</h4>
|
||
<div class="placeholder">▶ [VIDEO: Gleiche Szene, aber kühles Studiolicht, langsamer Schwenk von der Hand zum Gesicht, Text-Overlay statt Stimme]</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 style="font-size:13.5px;">Video 3 · Modell C</h4>
|
||
<div class="placeholder">▶ [VIDEO: Outdoor Köln, Mara läuft auf Kamera zu, hält Lippenstift hoch, Upbeat-Musik, schnelle Schnitte]</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 style="font-size:13.5px;">Video 4 · Modell D</h4>
|
||
<div class="placeholder">▶ [VIDEO: Extreme Makro-Aufnahme nur vom Lippenstift, der sich dreht, ASMR-Sound beim Öffnen]</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="back" onclick="go('scene-results')">‹</button><h1>Danke!</h1></div>
|
||
<div class="card" style="border-color:var(--ok);">
|
||
<h4><span class="badge b-ok">GESPEICHERT</span></h4>
|
||
<p style="margin-top:6px;">Dein Vote fließt in die Knowledge Base. Übereinstimmung mit System-Vorhersage: <b style="color:var(--txt)">78 %</b> (letzte 30 Votes).</p>
|
||
</div>
|
||
<h3>Kurze Frage (optional)</h3>
|
||
<div class="card">
|
||
<p style="color:var(--txt); font-size:14px; margin-bottom:10px;">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')">Hochladen / Ad schalten</button>
|
||
<button class="btn sec" onclick="go('improve-select')">Erst noch verbessern</button>
|
||
</div>
|
||
|
||
<!-- ============ PUBLISH / PERFORMANCE ============ -->
|
||
<div class="screen" id="publish">
|
||
<div class="topbar"><button class="back" onclick="go('scene-vote')">‹</button><h1>Ad läuft</h1></div>
|
||
<div class="card">
|
||
<h4 style="font-size:13.5px;">„Roter Lippenstift – Close-up" · Video 1</h4>
|
||
<div class="placeholder">▶ [Gewähltes Video – veröffentlicht auf TikTok & Instagram via Ads-API]</div>
|
||
</div>
|
||
<h3>Live-Performance (Meta / TikTok API)</h3>
|
||
<div class="row">
|
||
<div class="card" style="text-align:center;"><p>CTR</p><h4 style="color:var(--ok);">2,4 %</h4></div>
|
||
<div class="card" style="text-align:center;"><p>Thumbstop</p><h4 style="color:var(--ok);">41 %</h4></div>
|
||
<div class="card" style="text-align:center;"><p>ROAS</p><h4 style="color:var(--ok);">3,1×</h4></div>
|
||
</div>
|
||
<div class="card">
|
||
<p>+218 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="back" onclick="go('create-choice')">‹</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>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="placeholder">⬆ [Upload: 3–10 Referenzbilder der gewünschten Person / des Looks]</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="back" onclick="go('model-create')">‹</button><h1>Dein Modell</h1></div>
|
||
<div class="card">
|
||
<h4>„Mara" <span class="badge b-new">v1 · ENTWURF</span></h4>
|
||
<div class="placeholder">🖼 [BILD: Generierte Frau, Ende 20, dunkle schulterlange Haare, natürliches Lächeln, cleaner Studiohintergrund – aus 4 Blickwinkeln]</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')">✓ Freigeben (Release v1)</button>
|
||
<button class="btn sec" onclick="go('improve-input')">✦ Verbessern – sieht noch nicht gut aus</button>
|
||
<div class="note">Nur <b>freigegebene</b> 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="back" onclick="go('home')">‹</button><h1>Verbessern</h1></div>
|
||
<p class="sub" style="margin-bottom:12px;">Wähle das Asset, das du weiterentwickeln willst.</p>
|
||
<div class="card click" onclick="go('improve-input')">
|
||
<h4>👤 Gesicht „Mara" <span class="badge b-ok">v3 · FREIGEGEBEN</span></h4>
|
||
<p>Verwendet in 12 Videos · Score <span class="score">6120</span></p>
|
||
</div>
|
||
<div class="card click" onclick="go('improve-input')">
|
||
<h4>💄 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>
|
||
<div class="card click" onclick="go('improve-input')">
|
||
<h4>🎬 Szene „Lippenstift Close-up"</h4>
|
||
<p>Video-Iteration: Licht, Schnitt, Tempo anpassen</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ============ VERBESSERN: EINGABE ============ -->
|
||
<div class="screen" id="improve-input">
|
||
<div class="topbar"><button class="back" onclick="go('improve-select')">‹</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>Was soll besser werden?</label>
|
||
<textarea>Haare etwas dunkler, Ausstrahlung natürlicher, weniger Studio-Look.</textarea>
|
||
<div class="card" style="border-style:dashed;">
|
||
<p><b style="color:var(--txt)">Bei Referenz-Upload:</b></p>
|
||
<div class="placeholder">⬆ [Upload: Referenzbild]</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">
|
||
<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="back" onclick="go('improve-input')">‹</button><h1>Vorher / Nachher</h1></div>
|
||
<h3>Vorher (v3 – aktuell freigegeben)</h3>
|
||
<div class="placeholder">🖼 [BILD: Mara v3 – schulterlange dunkle Haare, Studio-Look]</div>
|
||
<h3>Wähle die neue Version</h3>
|
||
<p class="sub" style="margin-bottom:10px;">Jede Version zieht andere Vorlieben aus deiner Knowledge Base.</p>
|
||
|
||
<div class="card click" onclick="go('improve-vote')">
|
||
<h4 style="font-size:13.5px;">Version A</h4>
|
||
<div class="placeholder">🖼 [BILD: Haare fast schwarz, Tageslicht statt Studio, dezentes Lächeln]</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 style="font-size:13.5px;">Version B</h4>
|
||
<div class="placeholder">🖼 [BILD: Dunkelbraune Haare, warmes Abendlicht (Top-Attribut!), offenes Lachen]</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 style="font-size:13.5px;">Version C</h4>
|
||
<div class="placeholder">🖼 [BILD: Wie v3, aber Outdoor-Hintergrund unscharf, natürlichere Haut-Textur]</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 <b>unterscheiden</b>. 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="back" onclick="go('improve-results')">‹</button><h1>Version gewählt</h1></div>
|
||
<div class="card" style="border-color:var(--ok);">
|
||
<h4><span class="badge b-ok">MARA v4 ERSTELLT</span></h4>
|
||
<p style="margin-top:6px;">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')">✓ v4 freigeben (ab jetzt in Videos)</button>
|
||
<button class="btn sec" onclick="go('improve-input')">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="back" onclick="go('home')">‹</button><h1>Knowledge Base</h1></div>
|
||
|
||
<h3>Feste Regeln <span class="note" style="display:inline">(kein Score, gelten immer)</span></h3>
|
||
<div class="card"><p>· Cleaner Hintergrund · Nur zeigen, was verlangt ist · Logo nie verzerren</p></div>
|
||
|
||
<h3>Assets (freigegebene Versionen)</h3>
|
||
<div class="card">
|
||
<h4 style="font-size:13.5px;">👤 Mara <span class="badge b-ok">v4</span> <span class="score">6120</span> 💄 Rouge No. 5 <span class="badge b-ok">v2</span> <span class="score">6480</span></h4>
|
||
</div>
|
||
|
||
<h3>Attribute (Elo 0–10.000)</h3>
|
||
<div class="card click" onclick="go('kb-detail')">
|
||
<h4 style="font-size:13.5px;">📍 Location: Kaiserslautern <span class="score">5240 ▲</span></h4>
|
||
<p>12 Videos · 8 Siege · Unter-Attribut: Stadion <span class="score">5560</span></p>
|
||
</div>
|
||
<div class="card">
|
||
<h4 style="font-size:13.5px;">📍 Location: Köln <span class="score">4980 ▼</span> <span class="badge b-arch">ARCHIVIERT</span></h4>
|
||
<p>Historie bleibt erhalten – ein schlechter Score ist auch Wissen.</p>
|
||
</div>
|
||
<div class="card">
|
||
<h4 style="font-size:13.5px;">💡 Licht: warmes Abendlicht <span class="score">6350 ▲</span> 🗣 Voice: warm-weiblich <span class="score">5890</span></h4>
|
||
</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:var(--acc2)">(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="back" onclick="go('knowledge')">‹</button><h1>Kaiserslautern</h1></div>
|
||
<div class="card">
|
||
<h4>Score: <span class="score">5240</span> · 12 Videos · 8 Siege</h4>
|
||
<p style="margin-top:8px;"><b style="color:var(--txt)">Was diese Location ausmacht:</b><br>Urban, aber nahbar; Stadion als Wiedererkennungspunkt. Warmes Abendlicht funktioniert besser als Tageslicht.</p>
|
||
<p style="margin-top:8px;"><b style="color:var(--txt)">Gelernt aus Vergleichen:</b><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="back" onclick="go('home')">‹</button><h1>Developer-Modus</h1></div>
|
||
<div class="card" style="border-color:var(--acc2);">
|
||
<p>🔒 <b style="color:var(--acc2)">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>
|
||
|
||
<h3>Feste Regeln (Prompt-Injection, jede Generierung)</h3>
|
||
<div class="card"><p>✓ Cleaner, neutraler Hintergrund</p></div>
|
||
<div class="card"><p>✓ Nur zeigen, was verlangt ist – nicht mehr, nicht weniger</p></div>
|
||
<div class="card"><p>✓ Logo nie verzerren oder umfärben</p></div>
|
||
<div class="card"><p>✓ Aus fremden Referenzen lernen, nie 1:1 kopieren</p></div>
|
||
<input type="text" placeholder="+ Regel hinzufügen …">
|
||
<div class="note">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="placeholder" style="font-family:monospace; font-style:normal; font-size:11.5px;">[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>[USER-PROMPT] Eine Frau hält einen roten Lippenstift in die Kamera.</div>
|
||
|
||
<h3>Elo-Parameter</h3>
|
||
<div class="row">
|
||
<div class="card" style="text-align:center;"><p>K-Faktor neu</p><h4>32</h4></div>
|
||
<div class="card" style="text-align:center;"><p>K-Faktor etabliert</p><h4>8</h4></div>
|
||
</div>
|
||
<div class="row">
|
||
<div class="card" style="text-align:center;"><p>Performance : Vote</p><h4>2 : 1</h4></div>
|
||
<div class="card" style="text-align:center;"><p>Favorit bestätigt</p><h4>× 0,3</h4></div>
|
||
</div>
|
||
<div class="card"><p>Startwert neuer Einträge: <b style="color:var(--txt)">Kategorie-Durchschnitt</b> (Fallback 5000, wenn Kategorie leer)</p></div>
|
||
</div>
|
||
|
||
<!-- ============ NAVIGATION ============ -->
|
||
<div class="nav">
|
||
<button id="n-home" class="on" onclick="go('home')">⌂<br>Home</button>
|
||
<button id="n-create" onclick="go('create-choice')">＋<br>Erstellen</button>
|
||
<button id="n-improve" onclick="go('improve-select')">✦<br>Verbessern</button>
|
||
<button id="n-kb" onclick="go('knowledge')">🧠<br>Knowledge</button>
|
||
<button id="n-dev" onclick="go('devmode')" style="opacity:.4;" title="Nur intern sichtbar">⚙<br>Dev</button>
|
||
</div>
|
||
</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');
|
||
document.querySelector('.phone').scrollTop=0;
|
||
}
|
||
function pick(el){
|
||
el.parentElement.querySelectorAll('.pill').forEach(p=>p.classList.remove('on'));
|
||
el.classList.add('on');
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|