From e55bc810e614604668831ee7be1d9c10be398076 Mon Sep 17 00:00:00 2001 From: root Date: Wed, 22 Jul 2026 14:43:53 +0000 Subject: [PATCH] Design-Update 2 aus BrandLoop.dc.html: roter Glow, Liquid-Glass-Nav, Mara-Avatar, Karten-Stack - Radial-Glow rgba(241,99,99,.21) am unteren Rand auf Explore, Detail und Create - Bottom-Nav als Liquid-Glass: feTurbulence+feDisplacementMap-Filter als backdrop-filter (blur(20px) als Fallback) + Glas-Kanten-Ring via inset-Shadows - Mara S. mit Avatar-Foto (50% 16% / 300%-Ausschnitt) im Feed und Detail-Header, Fallback bleibt Gradient+Initial solange das Bild fehlt - Hintere Deck-Karten zeigen ihr eigenes erstes Bild (brightness .85) statt des geblurrten Top-Bilds Co-Authored-By: Claude Fable 5 --- prototyp-app.html | 53 +++++++++++++++++++++++++++++++++++++---------- 1 file changed, 42 insertions(+), 11 deletions(-) diff --git a/prototyp-app.html b/prototyp-app.html index bc83ead..0ec9c14 100644 --- a/prototyp-app.html +++ b/prototyp-app.html @@ -182,6 +182,8 @@ .x-hood{position:absolute; inset:0; pointer-events:none; z-index:2;} .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; @@ -222,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;} @@ -247,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;} @@ -281,9 +296,16 @@ - +
+
@@ -335,7 +358,7 @@
-
M
+
M
Mara S.
1.2k Remakes
@@ -865,7 +888,8 @@ var POSTS=[ {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']}, + 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]'], @@ -886,7 +910,7 @@ 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; }); }); + 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(); }; @@ -994,18 +1018,17 @@ 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 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+='
'; - var bg=u ? '#141414 url("'+u+'") center / cover no-repeat' : dummy(top?hue:(topP.h+X.imgIdx*25)); - html+='
'; + var bg=u ? '#141414 url("'+u+'") center / cover no-repeat' : dummy(hue); + html+='
'; if(top){ if(!u) html+='
'+esc(p.imgs[imgI])+'
'; if(p.video){ @@ -1017,8 +1040,11 @@ function renderDeck(){ } html+='
'; html+='
'+esc(p.cat)+'
'+(p.imgs.length>1?'
⧉ '+p.imgs.length+' Bilder
':'')+'
'; + 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+='
'+ - '
'+esc(p.creator[0])+'
'+ + '
'+(avOk?'':esc(p.creator[0]))+'
'+ '
'+esc(p.creator)+'
Modell · '+esc(p.model)+'
'+ '
'; html+=''; @@ -1098,6 +1124,11 @@ 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);