From 48839527f41fc4316528c290d09bb9d4276b7dfe Mon Sep 17 00:00:00 2001 From: root Date: Fri, 24 Jul 2026 15:00:44 +0000 Subject: [PATCH] Design-Sync: Liquid-Glass-Reskin, Create-Menue am Plus-Button, Nav-Hide prototyp-app.html komplett aus dem Design-Projekt uebernommen (dort auf Basis unseres Stands weiterentwickelt): Liquid-Glass-Optik fuer Chips, Feed-Chips, Action-Buttons und Backpills (.lg-Look wie die Navbar), Create-Menue-Popup ueber dem Plus-Button (Bild/Video/Modell), Nav blendet sich situativ aus (.nav.hidden), Prompt-Feld-Restyle (.pf/.pf-box, beam-round), Tastatur-Padding via .screen.kb-pad; Dither-Shader-Test auf den Modell-Chips wie im Design entfernt. Bildpfade wieder auf .jpg gedreht. Co-Authored-By: Claude Fable 5 --- prototyp-app.html | 225 ++++++++++++++++++++++++++++++++-------------- 1 file changed, 159 insertions(+), 66 deletions(-) diff --git a/prototyp-app.html b/prototyp-app.html index edbd318..51ee0c1 100644 --- a/prototyp-app.html +++ b/prototyp-app.html @@ -66,8 +66,13 @@ margin:0 -18px 14px; padding:calc(12px + env(safe-area-inset-top)) 18px 12px; background:rgba(10,10,10,.85); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);} .topbar h1{font-size:16px; font-weight:700; letter-spacing:-.01em;} + /* Liquid-Glass-Helfer (gleiche Optik wie die Navbar) */ + .lg{position:relative; background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(3px) saturate(1.15); backdrop-filter:blur(3px) saturate(1.15); + box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.4), inset -1px -1px 1px 1px rgba(255,255,255,.3), 0 6px 6px rgba(0,0,0,.2), 0 0 20px rgba(0,0,0,.1);} .backpill{display:flex; align-items:center; gap:7px; padding:9px 16px 9px 12px; border-radius:100px; - background:var(--surface2); border:none; color:var(--txt); font-size:13px; font-weight:600; font-family:inherit; + background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(3px) saturate(1.15); backdrop-filter:blur(3px) saturate(1.15); + box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.4), inset -1px -1px 1px 1px rgba(255,255,255,.3), 0 6px 6px rgba(0,0,0,.2), 0 0 20px rgba(0,0,0,.1); + border:none; color:var(--txt); font-size:13px; font-weight:600; font-family:inherit; cursor:pointer; flex-shrink:0; transition:transform .12s;} .backpill:active{transform:scale(.94);} .backpill .ar{font-size:14px; opacity:.8;} @@ -124,7 +129,14 @@ transition:border-color .15s, box-shadow .15s; -webkit-appearance:none;} ::placeholder{color:var(--faint);} input:focus, textarea:focus{outline:none; border-color:rgba(255,92,57,.6); box-shadow:0 0 0 3px rgba(255,92,57,.14);} + #createPrompt:focus{border-color:transparent; box-shadow:none;} + [data-beam="bb"].beam-round, [data-beam="bb"].beam-round::before, [data-beam="bb"].beam-round::after, [data-beam="bb"].beam-round [data-beam-bloom]{border-radius:100px; clip-path:inset(0 round 100px);} textarea{min-height:96px; resize:vertical;} + /* Prompt-Feld im „Post erstellen"-Look (Beam-Box + transparentes Feld) */ + .pf-box{border-radius:24px;} + .pf-box > div{position:relative; border-radius:24px; background:#171717; border:1px solid rgba(255,255,255,.05); box-shadow:0 12px 34px rgba(0,0,0,.4);} + .pf{display:block; width:100%; box-sizing:border-box; min-height:104px; resize:none; border:none !important; border-radius:23px; background:transparent !important; color:#fff; font-size:13.5px; line-height:1.55; padding:16px 18px; outline:none; box-shadow:none !important; font-family:inherit;} + .pf:focus{border:none !important; box-shadow:none !important;} label{font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); display:block;} .req{color:var(--accent); text-transform:none;} @@ -151,8 +163,11 @@ .pill.on{border-color:transparent; color:#000; background:#fff;} .chiprow{display:flex; gap:8px; overflow-x:auto; margin:0 -18px; padding:2px 18px 4px; scrollbar-width:none;} .chiprow::-webkit-scrollbar{display:none;} - .chip{flex:none; display:flex; align-items:center; gap:8px; padding:10px 15px; border-radius:100px; - font-size:12.5px; font-weight:600; cursor:pointer; background:var(--surface); color:rgba(255,255,255,.8); + .chip{flex:none; display:flex; align-items:center; gap:8px; padding:10px 15px; border-radius:100px; overflow:hidden; + font-size:12.5px; font-weight:600; cursor:pointer; + background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(3px) saturate(1.15); backdrop-filter:blur(3px) saturate(1.15); + box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.4), inset -1px -1px 1px 1px rgba(255,255,255,.3), 0 6px 6px rgba(0,0,0,.2), 0 0 20px rgba(0,0,0,.1); + color:rgba(255,255,255,.9); transition:background .15s, color .15s;} .chip.on{background:#fff; color:#000;} .chip .dot{width:9px; height:9px; border-radius:100px; flex:none; background:rgba(255,255,255,.3);} @@ -224,7 +239,9 @@ .x-segs{position:absolute; top:12px; left:14px; right:14px; display:flex; gap:5px; pointer-events:none;} .x-segs div{flex:1; height:3px; border-radius:100px;} .x-chips{position:absolute; top:24px; left:14px; display:flex; gap:6px; pointer-events:none;} - .x-chips div{padding:7px 13px; border-radius:100px; background:rgba(10,10,10,.55); backdrop-filter:blur(12px); font-size:12px; font-weight:600;} + .x-chips div{padding:7px 13px; border-radius:100px; font-size:12px; font-weight:600; + background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(3px) saturate(1.15); backdrop-filter:blur(3px) saturate(1.15); + box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.4), inset -1px -1px 1px 1px rgba(255,255,255,.3), 0 6px 6px rgba(0,0,0,.2), 0 0 20px rgba(0,0,0,.1);} .x-meta{position:absolute; left:0; right:0; bottom:0; padding:56px 18px 18px; background:linear-gradient(transparent,rgba(0,0,0,.78)); pointer-events:none; display:flex; align-items:center; gap:10px;} .x-meta .av{width:38px; height:38px; border-radius:100px; flex:none; display:grid; place-items:center; font-size:14px; font-weight:700;} @@ -238,11 +255,13 @@ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;} .x-actions{position:relative; z-index:3; display:flex; justify-content:center; align-items:center; gap:22px; padding:6px 0 84px;} - .x-act{width:56px; height:56px; border-radius:100px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); - display:grid; place-items:center; cursor:pointer; font-size:20px; color:rgba(255,255,255,.8); transition:transform .12s;} + .x-act{width:56px; height:56px; border-radius:100px; border:none; + background:rgba(255,255,255,.12); -webkit-backdrop-filter:blur(3px) saturate(1.15); backdrop-filter:blur(3px) saturate(1.15); + box-shadow:inset 2px 2px 1px 0 rgba(255,255,255,.4), inset -1px -1px 1px 1px rgba(255,255,255,.3), 0 6px 6px rgba(0,0,0,.2), 0 0 20px rgba(0,0,0,.1); + display:grid; place-items:center; cursor:pointer; font-size:20px; color:rgba(255,255,255,.9); transition:transform .12s;} .x-act:active{transform:scale(.92);} .x-act.sm{width:44px; height:44px;} - .x-act.like{position:relative; background:none; border:none; + .x-act.like{position:relative; background:none; border:none; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 2px 5px rgba(0,0,0,.4), 0 9px 9px rgba(0,0,0,.15);} /* ================= DETAIL & CREATE ================= */ @@ -253,6 +272,7 @@ .c-scroll{flex:1; overflow-y:auto; min-height:0; margin:0 -20px; padding:8px 18px 110px; scrollbar-width:none; transition:padding-bottom .3s ease;} .c-scroll::-webkit-scrollbar{display:none;} + .screen.kb-pad{padding-bottom:440px;} .c-scroll.kb-open{padding-bottom:380px;} .c-optlabel{font-size:11px; font-weight:700; letter-spacing:.12em; color:rgba(255,255,255,.4); margin-bottom:9px;} /* Dithering-Shader-Chips (Testeffekt auf den Modell-Chips) */ @@ -307,7 +327,8 @@ .nav{position:fixed; bottom:14px; left:50%; transform:translateX(-50%); z-index:30; display:flex; align-items:center; gap:6px; padding:8px 10px; border-radius:100px; box-shadow:0 6px 6px rgba(0,0,0,.2), 0 0 20px rgba(0,0,0,.1); - transition:all .7s cubic-bezier(.175,.885,.32,2.2);} + transition:transform .32s cubic-bezier(.4,0,.2,1), opacity .32s ease;} + .nav.hidden{transform:translateX(-50%) translateY(130px); opacity:0; pointer-events:none;} .nav-glass{position:absolute; inset:0; border-radius:100px;} .nav-glass.blur{overflow:hidden; -webkit-backdrop-filter:blur(3px) saturate(1.15); backdrop-filter:blur(3px) saturate(1.15);} .nav-glass.refract{overflow:hidden; -webkit-backdrop-filter:url(#bl-glass-refract); backdrop-filter:url(#bl-glass-refract);} @@ -325,6 +346,11 @@ .nav button.plus{background:none; box-shadow:0 2px 5px rgba(0,0,0,.35);} .nav button.plus.on{width:40px; padding:0;} .nav button.plus.on span{display:none;} + #createMenu.open{opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0);} + .cm-item{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:15px; cursor:pointer; + color:#fff; font-size:14px; font-weight:600; transition:background .15s;} + .cm-item:hover, .cm-item:active{background:rgba(255,255,255,.14);} + .cm-item svg{flex:none; color:rgba(255,255,255,.85);} /* ---- Info-Sheet ---- */ .backdrop{position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .25s; z-index:40;} @@ -443,64 +469,70 @@
-

Neuer KI-Post

+

Post erstellen

-
+
-
- - -
-
-
- +
+ +
+
+
+
-
-
-
-
Post generieren
-
+
+
-

Mehr erstellen

-
+ +
+

Entwürfe

+

Angefangen, aber noch nicht abgeschlossen – hier weitermachen.

+ +
-
-

Szene (Video)

Video aus Prompt mit Script-Bestätigung – mehrere KI-Modelle parallel.

+
+

Glow Serum – 3er-Kette POST

Prompt gesetzt · 2 / 3 Bildern generiert

+ +
+
+
+
+
+

Rouge No. 5 – Statement-Spot VIDEO

Script bestätigt · Rendern ausstehend

-
-

Modell

Person oder Produkt als festes Brand-Asset – bleibt in jedem Video 1:1 gleich.

+
+

„Mara" v1 MODELL

Entwurf · Referenzbilder fehlen noch

-
- -
-
-
-
Fertig
-
-
-
+
Entwürfe werden lokal gehalten, bis du sie abschließt oder verwirfst.
@@ -637,7 +669,7 @@

Szene erstellen

- +

Anzahl Videos

3
@@ -662,7 +694,7 @@

Dein Script

Aus deinem Prompt + Brand Knowledge erstellt. Lies es, ändere was du willst – generiert wird erst nach deiner Bestätigung.

- +TEXT-OVERLAY: keins (Brand-Stil: clean)
Erst nach Bestätigung werden die Videos generiert – Kosten entstehen erst dann. Änderungen am Script fließen als Signal in die Knowledge Base.
@@ -764,7 +796,7 @@ TEXT-OVERLAY: keins (Brand-Stil: clean)
Produkt
- +
[Upload: 3–10 Referenzbilder der gewünschten Person / des Looks]
Rechte-Regel: Gesichter echter Personen nur mit dokumentierter Einwilligung. Rein KI-generierte Gesichter sind der sichere Standard.
@@ -819,7 +851,7 @@ TEXT-OVERLAY: keins (Brand-Stil: clean)
Referenz hochladen
- +

Bei Referenz-Upload:

[Upload: Referenzbild]
@@ -906,6 +938,15 @@ TEXT-OVERLAY: keins (Brand-Stil: clean)
+ +
+
+
+
Fertig
+
+
+
+ + +
+
Post
+
Video
+
Modell
+
Entwürfe
+
+
@@ -949,7 +998,7 @@ function go(id){ profile:'n-profile','kb-detail':'n-profile','improve-select':'n-profile','improve-input':'n-profile','improve-results':'n-profile','improve-vote':'n-profile', create:'n-create',detail:'n-create',tut1:'n-create',tut2:'n-create',onboarding1:'n-create',onboarding2:'n-create', 'scene-create':'n-create','script-confirm':'n-create','scene-results':'n-create','scene-vote':'n-create',publish:'n-create', - 'model-create':'n-create','model-result':'n-create', + 'model-create':'n-create','model-result':'n-create',drafts:'n-create', devmode:'n-dev' }; document.querySelectorAll('.nav button').forEach(b=>b.classList.remove('on')); @@ -1540,13 +1589,42 @@ function renderCreateOpts(){ pills('countRow',[{v:'1',label:'1 Bild'},{v:'3',label:'3er'},{v:'5',label:'5er'}],String(C.count),function(v){C.count=+v; renderCreateOpts(); renderCreateStack();}); } function toggleOpts(){ C.optOpen=!C.optOpen; renderCreateStack(); } +var createMenuOpen=false; +function toggleCreateMenu(e){ + if(e){ e.stopPropagation(); } + createMenuOpen=!createMenuOpen; + applyCreateMenu(); +} +function applyCreateMenu(){ + var m=document.getElementById('createMenu'); + m.style.opacity=createMenuOpen?'1':'0'; + m.style.pointerEvents=createMenuOpen?'auto':'none'; + m.style.transform='translateX(-50%) translateY('+(createMenuOpen?'0':'10px')+')'; +} +function pickCreate(target){ + createMenuOpen=false; applyCreateMenu(); + go(target); +} +document.addEventListener('click',function(e){ + if(!createMenuOpen) return; + var m=document.getElementById('createMenu'), b=document.getElementById('n-create'); + if((m&&m.contains(e.target))||(b&&b.contains(e.target))) return; + createMenuOpen=false; applyCreateMenu(); +},true); +document.addEventListener('click',function(e){ + if(!C.optOpen) return; + var g=document.getElementById('cSelGroup'), st=document.getElementById('cStack'); + if(g&&g.contains(e.target)) return; + if(st&&st.contains(e.target)) return; + C.optOpen=false; renderCreateStack(); +},true); var DCHIPS={built:false, mounted:false, insts:[]}; var DITHER_ON='#f2f2f2', DITHER_OFF='#555555'; function renderCreateModels(){ var host=document.getElementById('createModels'); if(!DCHIPS.built){ host.innerHTML=C_MODELS.map(function(m,i){ - return '
'+m.name+'
'; + return '
'+m.name+'
'; }).join(''); host.querySelectorAll('.chip').forEach(function(c){ c.onclick=function(){ C.model=+c.dataset.i; renderCreateModels(); }; @@ -1561,8 +1639,8 @@ function renderCreateModels(){ }); } /* Shader erst mounten, wenn der Create-Screen sichtbar ist (sonst Groesse 0) */ -function initCreateDither(){ - if(DCHIPS.mounted) return; +function initCreateDither(){ return; /* Chips sind jetzt Liquid Glass – kein Dither-Shader mehr */ } +function _initCreateDither_old(){ var chips=document.querySelectorAll('#createModels .chip.dither'); if(!chips.length) return; DCHIPS.mounted=true; @@ -1571,8 +1649,9 @@ function initCreateDither(){ }); } /* Prompt-Editing über die Fake-Tastatur (Caret-genau wie im Design) */ +var activeTA=null; function editPrompt(mutate){ - var ta=document.getElementById('createPrompt'); + var ta=activeTA||document.getElementById('createPrompt'); var p=ta.value, s=ta.selectionStart, e=ta.selectionEnd; var r=mutate(p,s,e); ta.value=r.val; @@ -1599,12 +1678,23 @@ function insertToken(tok){ function setKb(open){ C.kbOpen=open; document.getElementById('kbOverlay').classList.toggle('open',open); - document.getElementById('cScroll').classList.toggle('kb-open',open); + document.getElementById('navBar').classList.toggle('hidden',open); + var onCreate=document.getElementById('create').classList.contains('active'); + document.getElementById('cScroll').classList.toggle('kb-open',open&&onCreate); + var scr=document.querySelector('.screen.active'); + if(scr) scr.classList.toggle('kb-pad',open&&!onCreate); if(open){ C.optOpen=false; renderCreateStack(); - requestAnimationFrame(function(){requestAnimationFrame(function(){ - var el=document.getElementById('cScroll'); el.scrollTop=el.scrollHeight; - });}); + if(onCreate){ + requestAnimationFrame(function(){requestAnimationFrame(function(){ + var el=document.getElementById('cScroll'); el.scrollTop=el.scrollHeight; + });}); + } else if(activeTA){ + requestAnimationFrame(function(){ + var r=activeTA.getBoundingClientRect(); + window.scrollBy({top:r.top-130, behavior:'smooth'}); + }); + } } } function renderKb(){ @@ -1642,21 +1732,24 @@ function renderKb(){ el.addEventListener('mousedown',press); el.addEventListener('touchstart',press,{passive:false}); }); - function done(e){ e.preventDefault(); document.getElementById('createPrompt').blur(); setKb(false); } + function done(e){ e.preventDefault(); if(activeTA) activeTA.blur(); setKb(false); } document.getElementById('kbDone').addEventListener('mousedown',done); document.getElementById('kbDone').addEventListener('touchstart',done,{passive:false}); } (function(){ - var ta=document.getElementById('createPrompt'); - ta.addEventListener('focus',function(){ setKb(true); }); - ta.addEventListener('blur',function(){ setKb(false); }); + document.querySelectorAll('textarea.pf, #createPrompt').forEach(function(ta){ + ta.setAttribute('inputmode','none'); + ta.addEventListener('focus',function(){ activeTA=ta; setKb(true); }); + ta.addEventListener('blur',function(){ setKb(false); }); + }); })(); document.getElementById('generateBtn').onclick=function(){ if(C.generating) return; - var lbl=document.getElementById('generateLabel'); - C.generating=1; lbl.textContent='Generiere '+C.count+' Bilder …'; - setTimeout(function(){ C.generating=2; lbl.textContent='✓ In der Warteschlange'; },1400); - setTimeout(function(){ C.generating=0; lbl.textContent='Post generieren'; },3200); + var ta=document.getElementById('createPrompt'); + var ph=ta.placeholder; + C.generating=1; ta.value=''; ta.placeholder='Generiere '+C.count+' Bilder …'; + setTimeout(function(){ C.generating=2; ta.placeholder='✓ In der Warteschlange'; },1400); + setTimeout(function(){ C.generating=0; ta.placeholder=ph; },3200); }; /* ---------- Nav-Glas: dynamische Displacement-Map (aus dem Design) ---------- */