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 <noreply@anthropic.com>
2026-07-22 14:43:53 +00:00
parent 8c7fbfe581
commit e55bc810e6
1 changed files with 42 additions and 11 deletions
--- 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 @@
 </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>
@@ -315,6 +337,7 @@
    <div class="x-hood">
      <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(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">
@@ -335,7 +358,7 @@
    <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>
@@ -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+='<div class="x-card'+(top?' top':'')+'" data-i="'+i+'" style="z-index:'+(4-i)+'; transform:'+tf+'; transition:transform .28s ease; cursor:'+(top?'grab':'default')+';">';
-    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>';
+    var bg=u ? '#141414 url(&quot;'+u+'&quot;) center / cover no-repeat' : dummy(hue);
+    html+='<div class="img" style="background:'+bg+';'+(top?'':' filter:brightness(.85);')+'"></div>';
    if(top){
      if(!u) html+='<div class="imglabel"><span>'+esc(p.imgs[imgI])+'</span></div>';
      if(p.video){
@@ -1017,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(&quot;'+p.avatar+'&quot;) 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>';
@@ -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(&quot;'+u+'&quot;) center / cover no-repeat' : dummy(150+i*25);