Compare commits
2 Commits
3916f7d7f5
...
e55bc810e6
| Author | SHA1 | Date | |
|---|---|---|---|
|
e55bc810e6 | ||
|
|
8c7fbfe581 |
@@ -175,18 +175,22 @@
|
||||
.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-hood .glowred, .glowred-screen{background:radial-gradient(125% 125% at 50% 150%, rgba(241,99,99,.21) 40%, transparent 100%);}
|
||||
.x-hood .glowred{position:absolute; inset:0;}
|
||||
.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;}
|
||||
@@ -220,6 +224,8 @@
|
||||
.x-act.like{background:var(--accent); border:none; box-shadow:0 0 22px rgba(255,92,57,.27);}
|
||||
|
||||
/* ================= DETAIL & CREATE ================= */
|
||||
#detail.active, #create.active{min-height:100dvh;
|
||||
background:radial-gradient(125% 125% at 50% 150%, rgba(241,99,99,.21) 40%, transparent 100%);}
|
||||
.d-strip{display:flex; gap:10px; overflow-x:auto; margin:0 -18px; padding:0 18px; scrollbar-width:none; scroll-snap-type:x mandatory;}
|
||||
.d-strip::-webkit-scrollbar{display:none;}
|
||||
.d-img{flex:none; width:272px; height:330px; border-radius:20px; position:relative; display:grid; place-items:center; scroll-snap-align:center;}
|
||||
@@ -245,10 +251,21 @@
|
||||
.p-hero p{color:var(--mut); font-size:13px; margin-top:3px;}
|
||||
|
||||
/* ================= Bottom-Navigation ================= */
|
||||
/* Liquid-Glass-Nav (aus BrandLoop.dc.html): Turbulenz-Filter als backdrop,
|
||||
blur(20px) als Fallback falls der Browser url()-backdrop-filter nicht kann */
|
||||
.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;
|
||||
background:rgba(18,18,18,.82); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
|
||||
border:1px solid rgba(255,255,255,.08); margin-bottom:env(safe-area-inset-bottom);}
|
||||
margin-bottom:env(safe-area-inset-bottom);}
|
||||
.nav::before{content:''; position:absolute; inset:0; z-index:-1; border-radius:100px;
|
||||
background:rgba(10,10,10,.18);
|
||||
-webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
|
||||
-webkit-backdrop-filter:url(#bl-liquid-glass); backdrop-filter:url(#bl-liquid-glass);}
|
||||
.nav::after{content:''; position:absolute; inset:0; z-index:2; border-radius:100px; pointer-events:none;
|
||||
box-shadow:0 0 8px rgba(0,0,0,.03), 0 2px 6px rgba(0,0,0,.08),
|
||||
inset 3px 3px .5px -3.5px rgba(255,255,255,.09), inset -3px -3px .5px -3.5px rgba(255,255,255,.85),
|
||||
inset 1px 1px 1px -.5px rgba(255,255,255,.6), inset -1px -1px 1px -.5px rgba(255,255,255,.6),
|
||||
inset 0 0 6px 6px rgba(255,255,255,.12), inset 0 0 2px 2px rgba(255,255,255,.06),
|
||||
0 0 12px rgba(0,0,0,.15);}
|
||||
.nav button{display:flex; align-items:center; gap:8px; background:none; border:none; font-family:inherit;
|
||||
width:40px; height:40px; justify-content:center; border-radius:100px; color:rgba(255,255,255,.6);
|
||||
font-size:13.5px; font-weight:600; cursor:pointer; transition:background .2s, color .2s, width .2s;}
|
||||
@@ -279,9 +296,16 @@
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Lucide-Icon-Sprite -->
|
||||
<!-- Lucide-Icon-Sprite + Liquid-Glass-Filter -->
|
||||
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
|
||||
<defs>
|
||||
<filter id="bl-liquid-glass" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB">
|
||||
<feTurbulence type="fractalNoise" baseFrequency="0.05 0.05" numOctaves="1" seed="1" result="turbulence"/>
|
||||
<feGaussianBlur in="turbulence" stdDeviation="2" result="blurredNoise"/>
|
||||
<feDisplacementMap in="SourceGraphic" in2="blurredNoise" scale="70" xChannelSelector="R" yChannelSelector="B" result="displaced"/>
|
||||
<feGaussianBlur in="displaced" stdDeviation="4" result="finalBlur"/>
|
||||
<feComposite in="finalBlur" in2="finalBlur" operator="over"/>
|
||||
</filter>
|
||||
<symbol id="i-back" viewBox="0 0 24 24"><path d="m15 18-6-6 6-6"/></symbol>
|
||||
<symbol id="i-chev" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></symbol>
|
||||
<symbol id="i-home" viewBox="0 0 24 24"><path d="M4 11 L12 4 L20 11 V20 H14 V15 H10 V20 H4 Z"/></symbol>
|
||||
@@ -311,14 +335,15 @@
|
||||
<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 class="glowred"></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">
|
||||
@@ -333,20 +358,16 @@
|
||||
<div class="topbar">
|
||||
<button class="backpill" onclick="go('explore')"><span class="ar">‹</span> Zurück</button>
|
||||
<div style="margin-left:auto; display:flex; align-items:center; gap:10px;">
|
||||
<div style="width:34px; height:34px; border-radius:100px; background:linear-gradient(140deg,oklch(.72 .13 40),oklch(.55 .13 40)); display:grid; place-items:center; font-size:13px; font-weight:700;">M</div>
|
||||
<div id="dAvatar" style="width:34px; height:34px; border-radius:100px; background:linear-gradient(140deg,oklch(.72 .13 40),oklch(.55 .13 40)); display:grid; place-items:center; font-size:13px; font-weight:700;">M</div>
|
||||
<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 +885,38 @@ 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'],
|
||||
avatar:'uploads/pasted-1784663200459-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; }); if(p.avatar) all[p.avatar]=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 +929,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 +996,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(/</g,'<'); }
|
||||
|
||||
@@ -948,14 +1021,16 @@ function renderDeck(){
|
||||
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=pic(p,imgI);
|
||||
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("'+u+'") center / cover no-repeat' : dummy(hue);
|
||||
html+='<div class="img" style="background:'+bg+';'+(top?'':' filter:brightness(.85);')+'"></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>';
|
||||
}
|
||||
@@ -965,8 +1040,11 @@ function renderDeck(){
|
||||
}
|
||||
html+='</div>';
|
||||
html+='<div class="x-chips"><div>'+esc(p.cat)+'</div>'+(p.imgs.length>1?'<div>⧉ '+p.imgs.length+' Bilder</div>':'')+'</div>';
|
||||
var avOk=p.avatar&&PICS_OK[p.avatar];
|
||||
var avBg=avOk ? '#141414 url("'+p.avatar+'") 50% 16% / 300% no-repeat'
|
||||
: 'linear-gradient(140deg,oklch(.72 .13 '+HUES[p.cat]+'),oklch(.5 .13 '+HUES[p.cat]+'))';
|
||||
html+='<div class="x-meta">'+
|
||||
'<div class="av" style="background:linear-gradient(140deg,oklch(.72 .13 '+HUES[p.cat]+'),oklch(.5 .13 '+HUES[p.cat]+'));">'+esc(p.creator[0])+'</div>'+
|
||||
'<div class="av" style="background:'+avBg+';">'+(avOk?'':esc(p.creator[0]))+'</div>'+
|
||||
'<div style="min-width:0;"><div class="nm">'+esc(p.creator)+'</div><div class="md">Modell · '+esc(p.model)+'</div></div>'+
|
||||
'</div>';
|
||||
html+='<div class="x-badge like" id="xLikeBadge">LIKE</div><div class="x-badge skip" id="xSkipBadge">SKIP</div>';
|
||||
@@ -1031,13 +1109,35 @@ 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];
|
||||
var av=document.getElementById('dAvatar');
|
||||
if(av && p.avatar && PICS_OK[p.avatar]){
|
||||
av.style.background='#141414 url("'+p.avatar+'") 50% 16% / 300% no-repeat';
|
||||
av.textContent='';
|
||||
}
|
||||
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 '<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 +1198,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();
|
||||
|
||||
Reference in New Issue
Block a user