knso/videogen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Explore-Update aus BrandLoop.dc.html: adaptive Hood-Tab-Leiste + echte Beispielbilder

Browse Source 
- Hood-Kurve 1:1 aus dem Design: pro Tab eigene Plateau-Breite (hoodPath(cx,nh)),
  Tab-Positionen werden aus dem DOM gemessen, am Rand verschmilzt die Hood mit
  der Bildschirmkante; Center+Breite werden gemeinsam animiert (460ms, Overshoot)
- Tabs als zentrierte Flex-Row (gap 96px) mit vergroesserter Hit-Area
- Neue Geometrie: viewBox 430x120, floor 76, Statushoehe 64px (Design-Basis)
- POSTS mit pics-Arrays (uploads/pasted-*.png): Karten, Hintergrund-Blur und
  Detail-Strip nutzen echte Bilder; Fallback auf Dummy-Verlaeufe solange eine
  Datei fehlt (Preload-Probe), Labels nur ohne Bild
- Detail: neuer Prompt (Roter Toner im rosa Bogenfenster), Maras Ketten-Labels
  (Toner im Bogenfenster / Age Decoder Essence / Poster-Ad), Strip JS-gerendert

Hinweis: uploads/*.png folgen separat (Design-API kappt Dateien >256KiB)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
root
2026-07-21 21:09:09 +00:00
parent 3916f7d7f5
commit 8c7fbfe581
1 changed files with 121 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
prototyp-app.html
View File

@@ -175,18 +175,20 @@
.tut .sub{font-size:14.5px;}
/* ================= EXPLORE (Feed) ================= */
#explore{padding:0;}
#explore{padding:0; --xs:max(env(safe-area-inset-top, 0px), 64px);}
#explore.active{display:flex; flex-direction:column; height:100dvh; overflow:hidden;}
.x-blur{position:absolute; inset:-50px; pointer-events:none; z-index:0;
filter:blur(36px) brightness(.78) saturate(1.15); transform:scale(1.08); transition:background .3s;}
.x-hood{position:absolute; inset:0; pointer-events:none; z-index:2;}
.x-hood svg{position:absolute; top:calc(44px + env(safe-area-inset-top)); left:0; display:block; width:100%; height:60px;}
.x-hood .solid{position:absolute; top:calc(103px + env(safe-area-inset-top)); left:0; right:0; bottom:0; background:var(--bg);}
.x-tabs{position:absolute; top:calc(60px + env(safe-area-inset-top)); left:0; right:0; height:24px; z-index:6;}
.x-tab{position:absolute; top:0; transform:translateX(-50%); white-space:nowrap; padding:4px 6px;
.x-hood svg{position:absolute; top:calc(var(--xs) - 14px); left:0; display:block; width:100%; height:120px;}
.x-hood .solid{position:absolute; top:calc(var(--xs) + 105px); left:0; right:0; bottom:0; background:var(--bg);}
.x-tabs{position:absolute; top:calc(var(--xs) + 12px); left:0; right:0; height:24px; z-index:6;
display:flex; justify-content:center; align-items:center; gap:96px;}
.x-tab{position:relative; white-space:nowrap; padding:4px 6px;
font-size:14.5px; font-weight:600; cursor:pointer; color:rgba(255,255,255,.42); transition:color .25s;}
.x-tab::before{content:''; position:absolute; inset:-18px -30px;}
.x-tab.on{color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.45);}
.x-deck{flex:1; position:relative; margin:calc(114px + env(safe-area-inset-top)) 22px 10px; min-height:0; z-index:3;}
.x-deck{flex:1; position:relative; margin:calc(var(--xs) + 144px) 22px 10px; min-height:0; z-index:3;}
.x-card{position:absolute; inset:0; border-radius:26px; overflow:hidden; background:#141414;
touch-action:none; box-shadow:0 18px 44px rgba(0,0,0,.45);}
.x-card .img{position:absolute; inset:0; pointer-events:none;}
@@ -311,14 +313,14 @@
<div class="screen active" id="explore">
<div class="x-blur" id="xBlur"></div>
<div class="x-hood">
<svg viewBox="0 0 430 60" preserveAspectRatio="none"><path id="xHoodPath" d="" fill="#0a0a0a"></path></svg>
<svg viewBox="0 0 430 120" preserveAspectRatio="none"><path id="xHoodPath" d="" fill="#0a0a0a"></path></svg>
<div class="solid"></div>
</div>
<button class="iconbtn" style="position:absolute; top:calc(12px + env(safe-area-inset-top)); right:14px; z-index:8;" onclick="toggleInfo(true)" aria-label="Info zum Prototyp"><svg class="ic"><use href="#i-info"/></svg></button>
<button class="iconbtn" style="position:absolute; top:calc(var(--xs) - 54px); right:14px; z-index:8;" onclick="toggleInfo(true)" aria-label="Info zum Prototyp"><svg class="ic"><use href="#i-info"/></svg></button>
<div class="x-tabs">
<div class="x-tab" data-tab="videos" style="left:14.4%;">Videos</div>
<div class="x-tab" data-tab="folge" style="left:50%;">Folge ich</div>
<div class="x-tab on" data-tab="posts" style="left:85.6%;">Posts</div>
<div class="x-tab" data-tab="videos">Videos</div>
<div class="x-tab" data-tab="folge">Folge ich</div>
<div class="x-tab on" data-tab="posts">Posts</div>
</div>
<div class="x-deck" id="xDeck"></div>
<div class="x-actions">
@@ -337,16 +339,12 @@
<div><div style="font-size:13.5px; font-weight:700;">Mara S.</div><div style="font-size:11px; color:rgba(255,255,255,.5);">1.2k Remakes</div></div>
</div>
</div>
<div class="d-strip">
<div class="d-img" style="background:linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.12)),repeating-linear-gradient(135deg,transparent 0 14px,rgba(255,255,255,.05) 14px 28px),linear-gradient(160deg,oklch(.62 .09 150),oklch(.34 .09 190));"><span class="lbl">[ki-bild 1/3: serum auf stein]</span><span class="num">1/3</span></div>
<div class="d-img" style="background:linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.12)),repeating-linear-gradient(135deg,transparent 0 14px,rgba(255,255,255,.05) 14px 28px),linear-gradient(160deg,oklch(.62 .09 175),oklch(.34 .09 215));"><span class="lbl">[ki-bild 2/3: anwendung]</span><span class="num">2/3</span></div>
<div class="d-img" style="background:linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.12)),repeating-linear-gradient(135deg,transparent 0 14px,rgba(255,255,255,.05) 14px 28px),linear-gradient(160deg,oklch(.62 .09 200),oklch(.34 .09 240));"><span class="lbl">[ki-bild 3/3: close-up haut]</span><span class="num">3/3</span></div>
</div>
<div class="d-strip" id="dStrip"></div>
<div class="d-title">Skincare Routine – 3er Kette</div>
<div class="d-sub">Bild-Kette · Produkt-Modell · Format 4:5</div>
<div class="promptbox">
<div class="k">PROMPT</div>
<div class="v" id="detailPrompt">Serum-Flasche auf nassem Stein, weiches Morgenlicht, Wassertropfen, Editorial-Look, cleaner Hintergrund in Salbeigrün — Kette: Produkt solo → Anwendung → Ergebnis-Close-up</div>
<div class="v" id="detailPrompt">Roter Toner im rosa Bogenfenster, weiches Gegenlicht, Editorial-Look — Kette: Fenster-Szene → Dropper auf Glaskante → Poster-Ad in Orange</div>
</div>
<div style="margin-bottom:22px;">
<span class="tag">Modell · Glow Serum v3</span><span class="tag">4:5</span><span class="tag">Editorial</span><span class="tag">3 Bilder</span>
@@ -864,16 +862,37 @@ function toggleInfo(open){
var ACCENT='#ff5c39';
var HUES={Produkt:40, Mensch:260, Szene:170};
var POSTS=[
{id:1, creator:'Lena M.', cat:'Produkt', model:'Sneaker Studio v2', video:true, h:250, imgs:['[ki-video: sneaker spot]']},
{id:2, creator:'Mara S.', cat:'Produkt', model:'Glow Serum v3', video:false, h:150, imgs:['[ki-bild 1/3: serum auf stein]','[ki-bild 2/3: anwendung]','[ki-bild 3/3: close-up haut]']},
{id:3, creator:'Jonas K.', cat:'Mensch', model:'Coach Avatar', video:true, h:40, imgs:['[ki-video: gym coaching ad]']},
{id:4, creator:'Tom B.', cat:'Mensch', model:'Barber Ich v1', video:false, h:90, imgs:['[ki-bild 1/4: portrait]','[ki-bild 2/4: fade cut]','[ki-bild 3/4: shop szene]','[ki-bild 4/4: logo karte]']},
{id:5, creator:'Feld & Co',cat:'Szene', model:'Café Interieur', video:false, h:190, imgs:['[ki-bild 1/3: tresen]','[ki-bild 2/3: latte art]','[ki-bild 3/3: fassade]']},
{id:6, creator:'Nina R.', cat:'Produkt', model:'Schmuck Makro', video:false, h:310, imgs:['[ki-bild: ring makro]']},
{id:7, creator:'Kai W.', cat:'Szene', model:'Immo Walkthrough', video:true, h:210, imgs:['[ki-video: wohnungs-tour]']}
{id:1, creator:'Lena M.', cat:'Produkt', model:'Sneaker Studio v2', video:true, h:250, imgs:['[ki-video: sneaker spot]'],
pics:['uploads/pasted-1784663207742-0.png']},
{id:2, creator:'Mara S.', cat:'Produkt', model:'Glow Serum v3', video:false, h:150, imgs:['Toner im Bogenfenster','Age Decoder Essence','Poster-Ad'],
pics:['uploads/pasted-1784643149542-0.png','uploads/pasted-1784643165286-0.png','uploads/pasted-1784643111353-0.png']},
{id:3, creator:'Jonas K.', cat:'Mensch', model:'Coach Avatar', video:true, h:40, imgs:['[ki-video: gym coaching ad]'],
pics:['uploads/pasted-1784663200459-0.png']},
{id:4, creator:'Tom B.', cat:'Mensch', model:'Barber Ich v1', video:false, h:90, imgs:['[ki-bild 1/4: portrait]','[ki-bild 2/4: fade cut]','[ki-bild 3/4: shop szene]','[ki-bild 4/4: logo karte]'],
pics:['uploads/pasted-1784663261701-0.png','uploads/pasted-1784663207742-0.png','uploads/pasted-1784663200459-0.png','uploads/pasted-1784663233931-0.png']},
{id:5, creator:'Feld & Co',cat:'Szene', model:'Café Interieur', video:false, h:190, imgs:['[ki-bild 1/3: tresen]','[ki-bild 2/3: latte art]','[ki-bild 3/3: fassade]'],
pics:['uploads/pasted-1784663233931-0.png','uploads/pasted-1784663383522-0.png','uploads/pasted-1784663261701-0.png']},
{id:6, creator:'Nina R.', cat:'Produkt', model:'Schmuck Makro', video:false, h:310, imgs:['[ki-bild: ring makro]'],
pics:['uploads/pasted-1784663383522-0.png']},
{id:7, creator:'Kai W.', cat:'Szene', model:'Immo Walkthrough', video:true, h:210, imgs:['[ki-video: wohnungs-tour]'],
pics:['uploads/pasted-1784663233931-0.png']}
];
var X={tab:'posts', idx:0, dx:0, imgIdx:0, liked:[], anim:false, hoodCx:null, hoodRaf:null};
var TAB_CENTERS={videos:62, folge:215, posts:368};
var X={tab:'posts', idx:0, dx:0, imgIdx:0, liked:[], anim:false, hoodCx:null, hoodHalf:null, hoodRaf:null, centers:null, halves:null};
var TAB_CENTERS={videos:40, folge:205, posts:366};
var TAB_HALVES={videos:40, folge:46, posts:35};
/* Bilder vorladen: nur geladene Dateien werden benutzt, sonst Dummy-Verlauf */
var PICS_OK={};
function pic(p,i){ var u=p.pics&&p.pics[i]; return (u&&PICS_OK[u])?u:null; }
function preloadPics(){
var all={};
POSTS.forEach(function(p){ (p.pics||[]).forEach(function(u){ all[u]=1; }); });
Object.keys(all).forEach(function(u){
var im=new Image();
im.onload=function(){ PICS_OK[u]=true; renderDeck(); renderDetailStrip(); };
im.src=u;
});
}
function dummy(h){
return 'linear-gradient(rgba(0,0,0,.12),rgba(0,0,0,.12)),'+
@@ -886,32 +905,60 @@ function deck(){
return POSTS.filter(function(p){return !p.video;});
}
/* Hood-Kurve unter dem aktiven Tab (Geometrie aus dem Design übernommen) */
function hoodPath(cx){
var W=430, top=6, floor=54, hw=66, sw=36, r=16;
var xl=cx-hw, xr=cx+hw;
function blend(edge){ return edge<=0 ? floor : (edge<r+10 ? top+(floor-top)*(1-edge/(r+10)) : top); }
var lY=blend(xl-sw), rY=blend(W-xr-sw);
var d='M0 60 L0 '+Math.min(lY+r,58)+' Q0 '+lY+' '+r+' '+lY+' ';
if(lY<floor-1) d+='L'+(xl-sw)+' '+lY+' C'+(xl-sw*.45)+' '+lY+' '+(xl-sw*.55)+' '+floor+' '+xl+' '+floor+' ';
else d+='L'+Math.max(xl,r)+' '+floor+' ';
d+='L'+Math.min(xr,W-r)+' '+floor+' ';
if(rY<floor-1) d+='C'+(xr+sw*.55)+' '+floor+' '+(xr+sw*.45)+' '+rY+' '+(xr+sw)+' '+rY+' L'+(W-r)+' '+rY+' ';
d+='Q'+W+' '+rY+' '+W+' '+Math.min(rY+r,58)+' L'+W+' 60 Z';
/* Hood-Kurve unter dem aktiven Tab (Geometrie 1:1 aus BrandLoop.dc.html):
pro Tab eigene Breite (nh = halbe Plateau-Breite), am Bildschirmrand
verschmilzt die Hood mit der Kante statt eine Schulter zu zeichnen */
function hoodPath(cx, nh){
var W=430, top=8, floor=76, r=40, sw=80, bt=.6, tt=.6, H=120;
var xl=cx-nh, xr=cx+nh, lStart=xl-sw, rEnd=xr+sw;
var rl=Math.max(8,Math.min(r,lStart-2)), rr=Math.max(8,Math.min(r,W-rEnd-2));
var d;
if(lStart<=24){
d='M0 '+H+' L0 '+Math.min(floor+r,H-4)+' Q0 '+floor+' '+Math.min(Math.max(xl,r),xr-10)+' '+floor+' ';
}else{
d='M0 '+H+' L0 '+(top+rl)+' Q0 '+top+' '+rl+' '+top+' ';
d+='L'+lStart+' '+top+' C'+(lStart+sw*tt)+' '+top+' '+(xl-sw*bt)+' '+floor+' '+xl+' '+floor+' ';
}
d+='L'+xr+' '+floor+' ';
if(rEnd>=W-24){
d+='L'+Math.max(Math.min(xr,W-r),xl+10)+' '+floor+' Q'+W+' '+floor+' '+W+' '+Math.min(floor+r,H-4)+' L'+W+' '+H+' Z';
}else{
d+='C'+(xr+sw*bt)+' '+floor+' '+(rEnd-sw*tt)+' '+top+' '+rEnd+' '+top+' ';
d+='L'+(W-rr)+' '+top+' Q'+W+' '+top+' '+W+' '+(top+rr)+' L'+W+' '+H+' Z';
}
return d;
}
function setHood(cx){
X.hoodCx=cx;
document.getElementById('xHoodPath').setAttribute('d',hoodPath(cx));
function centerOf(k){ return (X.centers&&X.centers[k]!=null)?X.centers[k]:TAB_CENTERS[k]; }
function halfOf(k){ return (X.halves&&X.halves[k]!=null)?X.halves[k]:TAB_HALVES[k]; }
/* Tab-Positionen aus dem DOM messen (in 430er-viewBox-Koordinaten) */
function measureTabs(){
var cont=document.querySelector('.x-tabs');
if(!cont||!cont.offsetWidth) return;
var scale=430/cont.offsetWidth;
var els={};
['videos','folge','posts'].forEach(function(k){ els[k]=cont.querySelector('.x-tab[data-tab="'+k+'"]'); });
if(!els.videos||!els.folge||!els.posts) return;
function m(el){ return {L:el.offsetLeft*scale, R:(el.offsetLeft+el.offsetWidth)*scale}; }
var v=m(els.videos), f=m(els.folge), p=m(els.posts);
var sw=80, m1=(v.R+f.L)/2, m2=(f.R+p.L)/2;
var x={videos:[v.L-12, m1-sw/2], folge:[m1+sw/2, m2-sw/2], posts:[m2+sw/2, p.R+12]};
var c={}, h={};
for(var k in x){ c[k]=(x[k][0]+x[k][1])/2; h[k]=(x[k][1]-x[k][0])/2; }
X.centers=c; X.halves=h;
}
function animateHood(target){
function setHood(cx,nh){
X.hoodCx=cx; X.hoodHalf=nh;
document.getElementById('xHoodPath').setAttribute('d',hoodPath(cx,nh));
}
function animateHood(target,targetHalf){
if(X.hoodRaf) cancelAnimationFrame(X.hoodRaf);
var from=(X.hoodCx==null)?TAB_CENTERS[X.tab]:X.hoodCx;
var from=(X.hoodCx==null)?centerOf(X.tab):X.hoodCx;
var fromH=(X.hoodHalf==null)?halfOf(X.tab):X.hoodHalf;
var t0=performance.now(), dur=460, c1=1.3;
function step(now){
var t=Math.min((now-t0)/dur,1);
var e=1+(c1+1)*Math.pow(t-1,3)+c1*Math.pow(t-1,2);
setHood(from+(target-from)*e);
setHood(from+(target-from)*e, fromH+(targetHalf-fromH)*e);
if(t<1) X.hoodRaf=requestAnimationFrame(step);
}
X.hoodRaf=requestAnimationFrame(step);
@@ -925,7 +972,9 @@ function renderTabs(){
function renderBlur(){
var d=deck(), top=d[X.idx];
var el=document.getElementById('xBlur');
el.style.background = top ? dummy(top.h + Math.min(X.imgIdx, top.imgs.length-1)*25) : 'var(--bg)';
if(!top){ el.style.background='var(--bg)'; return; }
var imgI=Math.min(X.imgIdx, top.imgs.length-1), u=pic(top,imgI);
el.style.background = u ? '#0a0a0a url("'+u+'") center / cover no-repeat' : dummy(top.h+imgI*25);
}
function esc(s){ return s.replace(/&/g,'&amp;').replace(/</g,'&lt;'); }
@@ -945,17 +994,20 @@ function renderDeck(){
}
var html='';
var slice=d.slice(X.idx, X.idx+3);
var topP=d[X.idx], topImgI=topP?Math.min(X.imgIdx,topP.imgs.length-1):0, topPic=topP?pic(topP,topImgI):null;
for(var i=slice.length-1; i>=0; i--){
var p=slice[i], top=(i===0);
var imgI=top?Math.min(X.imgIdx,p.imgs.length-1):0;
var u=top?pic(p,imgI):topPic;
var hue=p.h+imgI*25;
var tf=top
? 'translateX('+X.dx+'px) rotate('+(X.dx/22)+'deg)'
: 'scale('+(1-i*.06)+') translateY('+(-i*34)+'px)';
html+='<div class="x-card'+(top?' top':'')+'" data-i="'+i+'" style="z-index:'+(4-i)+'; transform:'+tf+'; transition:transform .28s ease; cursor:'+(top?'grab':'default')+';">';
html+='<div class="img" style="background:'+dummy(top?hue:(d[X.idx].h+X.imgIdx*25))+';'+(top?'':'inset:-24px; filter:blur(16px) brightness(.8);')+'"></div>';
var bg=u ? '#141414 url(&quot;'+u+'&quot;) center / cover no-repeat' : dummy(top?hue:(topP.h+X.imgIdx*25));
html+='<div class="img" style="background:'+bg+';'+(top?'':'inset:-24px; filter:blur(16px) brightness(.8);')+'"></div>';
if(top){
html+='<div class="imglabel"><span>'+esc(p.imgs[imgI])+'</span></div>';
if(!u) html+='<div class="imglabel"><span>'+esc(p.imgs[imgI])+'</span></div>';
if(p.video){
html+='<div class="playwrap"><div class="play"><svg width="22" height="22" viewBox="0 0 24 24" fill="#fff"><path d="M8 5 L19 12 L8 19 Z"/></svg></div></div>';
}
@@ -1031,13 +1083,30 @@ function onDown(e){
document.querySelectorAll('.x-tab').forEach(function(el){
el.addEventListener('click',function(){
X.tab=el.dataset.tab; X.idx=0; X.dx=0; X.imgIdx=0;
renderTabs(); renderDeck(); animateHood(TAB_CENTERS[X.tab]);
renderTabs(); renderDeck(); animateHood(centerOf(X.tab), halfOf(X.tab));
});
});
window.addEventListener('resize',function(){
measureTabs(); setHood(centerOf(X.tab), halfOf(X.tab));
});
document.getElementById('btnSkip').onclick=function(){ fling(-1); };
document.getElementById('btnLike').onclick=function(){ fling(1); };
document.getElementById('btnDetail').onclick=function(){ go('detail'); };
/* ---------- Detail: Bild-Strip (Maras Kette, echte Bilder mit Fallback) ---------- */
function renderDetailStrip(){
var host=document.getElementById('dStrip');
if(!host) return;
var p=POSTS[1];
host.innerHTML=p.imgs.map(function(label,i){
var u=pic(p,i);
var bg=u ? '#141414 url(&quot;'+u+'&quot;) center / cover no-repeat' : dummy(150+i*25);
return '<div class="d-img" style="background:'+bg+';">'+
(u?'':'<span class="lbl">'+esc(label)+'</span>')+
'<span class="num">'+(i+1)+'/'+p.imgs.length+'</span></div>';
}).join('');
}
/* ---------- Detail: Modell wählen + Nachmachen ---------- */
var MODELS=['Mensch – Ich (Avatar)','Produkt – Kerze Studio','Szene – Showroom'];
var D={model:1, remade:false};
@@ -1098,9 +1167,12 @@ document.getElementById('generateBtn').onclick=function(){
};
/* ---------- Init ---------- */
setHood(TAB_CENTERS[X.tab]);
setHood(centerOf(X.tab), halfOf(X.tab));
requestAnimationFrame(function(){ measureTabs(); setHood(centerOf(X.tab), halfOf(X.tab)); });
renderTabs();
renderDeck();
renderDetailStrip();
preloadPics();
renderDetailModels();
renderCreateModels();
renderFrames();