From 8c7fbfe581af9612bc88af035e0caebde55357d9 Mon Sep 17 00:00:00 2001 From: root Date: Tue, 21 Jul 2026 21:09:09 +0000 Subject: [PATCH] Explore-Update aus BrandLoop.dc.html: adaptive Hood-Tab-Leiste + echte Beispielbilder - 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 --- prototyp-app.html | 170 +++++++++++++++++++++++++++++++++------------- 1 file changed, 121 insertions(+), 49 deletions(-) diff --git a/prototyp-app.html b/prototyp-app.html index cce03a9..bc83ead 100644 --- a/prototyp-app.html +++ b/prototyp-app.html @@ -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 @@
- +
- +
-
Videos
-
Folge ich
-
Posts
+
Videos
+
Folge ich
+
Posts
@@ -337,16 +339,12 @@
Mara S.
1.2k Remakes
-
-
[ki-bild 1/3: serum auf stein]1/3
-
[ki-bild 2/3: anwendung]2/3
-
[ki-bild 3/3: close-up haut]3/3
-
+
Skincare Routine – 3er Kette
Bild-Kette · Produkt-Modell · Format 4:5
PROMPT
-
Serum-Flasche auf nassem Stein, weiches Morgenlicht, Wassertropfen, Editorial-Look, cleaner Hintergrund in Salbeigrün — Kette: Produkt solo → Anwendung → Ergebnis-Close-up
+
Roter Toner im rosa Bogenfenster, weiches Gegenlicht, Editorial-Look — Kette: Fenster-Szene → Dropper auf Glaskante → Poster-Ad in Orange
Modell · Glow Serum v34:5Editorial3 Bilder @@ -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=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,'&').replace(/=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+='
'; - html+='
'; + var bg=u ? '#141414 url("'+u+'") center / cover no-repeat' : dummy(top?hue:(topP.h+X.imgIdx*25)); + html+='
'; if(top){ - html+='
'+esc(p.imgs[imgI])+'
'; + if(!u) html+='
'+esc(p.imgs[imgI])+'
'; if(p.video){ html+='
'; } @@ -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("'+u+'") center / cover no-repeat' : dummy(150+i*25); + return '
'+ + (u?'':''+esc(label)+'')+ + ''+(i+1)+'/'+p.imgs.length+'
'; + }).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();