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();