Upload folder using huggingface_hub

README.md

@@ -15,6 +15,8 @@ Rate any Hugging Face profile out of 99 as an Ultimate-Team-style player card, s
 
 Fully static: everything runs client-side against the public Hub API (`huggingface.co/api`). No token, no backend, nothing stored.
 
+Card layout geometry ported from [gitfut](https://github.com/Younesfdj/gitfut) (MIT, © Younesfdj); card artwork recreated from scratch in CSS/SVG.
+
 ## Stat mapping
 
 | Card stat | Hub meaning |

index.html

@@ -9,7 +9,7 @@
 <meta property="og:description" content="Turn your Hugging Face stats into a transfer-market player card. Get drafted.">
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-<link href="https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" crossorigin="anonymous">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.min.js"></script>
 <style>
   :root{
@@ -21,7 +21,7 @@
     --hf-orange:#FF9D00;
     --line:#242c40;
     --card-w:320px;
-    --card-h:500px;
+    --card-h:486px;
     --fan-scale:.58;
   }
   *{box-sizing:border-box;margin:0;padding:0}
@@ -57,21 +57,45 @@
   .status.err{color:#ff8484}
   .status.busy{color:var(--ink-dim)}
 
-  /* ---------- the card ---------- */
+  /* ---------- the card ----------
+     Layout numbers ported from gitfut's PlayerCard (MIT). Art recreated in
+     CSS: traced FUT-style silhouette, brushed texture, gloss break, tier
+     palettes, feathered avatar. Card is a size container so cqw = % width. */
   .fut{
+    --ink-card:#46390c;
+    --glow:rgba(225,185,80,.55);
+    --av-halo:rgba(243,214,121,.45);
+    --av-tint:radial-gradient(ellipse 72% 76% at 52% 40%, transparent 46%, rgba(243,214,121,.24) 78%, rgba(156,118,33,.44));
+    --grad:linear-gradient(180deg,#f2e19c 0%,#e7d281 22%,#d9c262 45%,#d2ba5c 53.5%,#fce487 54%,#f3da7d 80%,#dfc261 100%);
     position:relative;width:var(--card-w);height:var(--card-h);
-    clip-path:path("M160 0 L288 30 Q320 38 320 72 L320 372 Q320 412 284 428 L160 500 L36 428 Q0 412 0 372 L0 72 Q0 38 32 30 Z");
-    color:#241a05;
+    container-type:inline-size;
+    clip-path:path("M160 11 C 128 12, 96 18, 71 24 C 46 30, 24 48, 15 70 C 12.5 77, 12 82, 12 89 L 12 408 C 12 415, 18 421, 30 427 C 52 437, 80 446, 108 454 C 126 460, 144 469, 160 478 C 176 469, 194 460, 212 454 C 240 446, 268 437, 290 427 C 302 421, 308 415, 308 408 L 308 89 C 308 82, 307.5 77, 305 70 C 296 48, 274 30, 249 24 C 224 18, 192 12, 160 11 Z");
+    color:var(--ink-card);
     font-family:'Saira Condensed',sans-serif;
     transform-origin:center;
+    user-select:none;-webkit-user-select:none;
   }
-  .fut-bg{position:absolute;inset:0}
-  .fut.tier-silver .fut-bg{background:linear-gradient(160deg,#e7eaf1 0%,#b9c0cd 34%,#8f97a8 60%,#cfd4de 100%)}
-  .fut.tier-silver{color:#232733}
-  .fut.tier-gold .fut-bg{background:linear-gradient(160deg,#f4dd8f 0%,#e2bb5e 36%,#b8863a 64%,#e9cc76 100%)}
-  .fut.tier-legend .fut-bg{background:linear-gradient(160deg,#ffe680 0%,#ffd21e 30%,#f0a13d 55%,#ffdf5e 78%,#ffef9e 100%)}
+  .fut.tier-bronze{--ink-card:#3a2717;--glow:rgba(190,120,60,.45);--av-halo:rgba(214,163,110,.4);
+    --av-tint:radial-gradient(ellipse 72% 76% at 52% 40%, transparent 46%, rgba(106,69,39,.26) 78%, rgba(50,31,14,.44));
+    --grad:linear-gradient(180deg,#f1ca98 0%,#e8b877 22%,#dda863 45%,#d49e5c 53.5%,#f2c993 54%,#e2b986 80%,#c59661 100%)}
+  .fut.tier-silver{--ink-card:#303536;--glow:rgba(170,188,210,.5);--av-halo:rgba(220,228,238,.4);
+    --av-tint:radial-gradient(ellipse 72% 76% at 52% 40%, transparent 46%, rgba(170,188,210,.22) 78%, rgba(70,78,90,.42));
+    --grad:linear-gradient(180deg,#c4cacf 0%,#aeb4b9 22%,#9da2a6 45%,#969b9f 53.5%,#c2c9ce 54%,#afb5b9 80%,#8e9497 100%)}
+  .fut.tier-legend{--ink-card:#625217;--glow:rgba(243,213,128,.5);--av-halo:rgba(243,214,136,.5);
+    --av-tint:radial-gradient(ellipse 72% 76% at 52% 40%, transparent 46%, rgba(243,214,121,.24) 78%, rgba(120,90,30,.46));
+    --grad:linear-gradient(180deg,#fcfaf4 0%,#f9f7f0 22%,#f4f1e8 45%,#efebe0 53.5%,#fffef9 54%,#eeebe2 80%,#d2cdc1 100%)}
+
+  .fut-bg{position:absolute;inset:0;background:
+    linear-gradient(180deg,rgba(255,255,255,.30),rgba(255,255,255,0) 9%),
+    linear-gradient(180deg,transparent 53%,rgba(255,255,255,.55) 53.6%,rgba(255,255,255,0) 55.6%),
+    var(--grad);}
+  /* brushed-metal streaks, only on the upper finish */
+  .fut-bg::before{content:"";position:absolute;inset:0;opacity:.45;mix-blend-mode:overlay;
+    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='280'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.012 0.85' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0.9 0.9 0.9 0 0'/></filter><rect width='280' height='280' filter='url(%23n)'/></svg>");
+    -webkit-mask-image:linear-gradient(180deg,#000 53.5%,transparent 54%);
+    mask-image:linear-gradient(180deg,#000 53.5%,transparent 54%);}
   .fut.tier-legend .fut-bg::after{
-    content:"";position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.9;
+    content:"";position:absolute;inset:0;mix-blend-mode:soft-light;opacity:.6;
     background:linear-gradient(115deg,transparent 30%,rgba(255,0,200,.55) 44%,rgba(0,229,255,.55) 52%,transparent 66%);
     background-size:300% 300%;
   }
@@ -79,26 +103,42 @@
     .fut.tier-legend .fut-bg::after{animation:holo 4.5s ease-in-out infinite alternate}
     @keyframes holo{from{background-position:0% 50%}to{background-position:100% 50%}}
   }
-  .fut-inner{position:absolute;inset:0;padding:26px 30px 0}
-
-  .fut-top{position:absolute;top:56px;left:32px;display:flex;flex-direction:column;align-items:center;gap:2px;width:72px}
-  .fut-rating{font-size:3.4rem;font-weight:800;line-height:.9}
-  .fut-pos{font-size:1.15rem;font-weight:700;letter-spacing:.05em;border-bottom:2px solid currentColor;padding-bottom:3px;margin-bottom:5px}
-  .fut-domain{font-size:1.5rem;line-height:1.2}
-  .fut-club{width:30px;height:30px;border-radius:50%;object-fit:cover;margin-top:6px;border:2px solid rgba(0,0,0,.25);background:#fff;display:none}
-
-  .fut-avatar{position:absolute;top:44px;right:26px;width:186px;height:186px;border-radius:14px;object-fit:cover;background:rgba(0,0,0,.12)}
-  .fut-avatar.letter{display:flex;align-items:center;justify-content:center;font-size:5rem;font-weight:800}
-
-  .fut-name{position:absolute;top:246px;left:0;right:0;text-align:center;font-size:1.9rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:0 16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-  .fut-rule{position:absolute;top:292px;left:56px;right:56px;height:2px;background:currentColor;opacity:.45}
-
-  .fut-stats{position:absolute;top:304px;left:44px;right:44px;display:grid;grid-template-columns:1fr 1fr;column-gap:34px;row-gap:5px}
-  .fut-stat{display:flex;align-items:baseline;gap:8px;font-size:1.35rem}
-  .fut-stat b{font-weight:800;min-width:2ch;text-align:right}
-  .fut-stat span{font-weight:600;letter-spacing:.06em;font-size:1.05rem;opacity:.85}
-
-  .fut-foot{position:absolute;top:436px;left:0;right:0;text-align:center;font-weight:600;letter-spacing:.18em;font-size:.72rem;opacity:.7}
+  /* ghost watermark in the brushed band */
+  .fut-mark{position:absolute;left:-4cqw;top:29.5%;font-size:22cqw;font-weight:800;line-height:1;letter-spacing:-.02em;white-space:nowrap;color:var(--ink-card);opacity:.10;transform:skewX(-8deg)}
+
+  .fut-avatar{position:absolute;left:27cqw;top:13cqw;width:68cqw;height:70cqw;
+    background-size:cover;background-position:center 20%;
+    -webkit-mask-image:radial-gradient(ellipse 66% 88% at 52% 40%, #000 56%, transparent 80%), linear-gradient(220deg, #000 70%, transparent 100%), linear-gradient(180deg, transparent 1%, #000 22%);
+    mask-image:radial-gradient(ellipse 66% 88% at 52% 40%, #000 56%, transparent 80%), linear-gradient(220deg, #000 70%, transparent 100%), linear-gradient(180deg, transparent 1%, #000 22%);
+    -webkit-mask-composite:source-in;mask-composite:intersect;
+    filter:drop-shadow(0 3cqw 6cqw rgba(0,0,0,.5)) drop-shadow(0 0 5cqw var(--av-halo));}
+  .fut-avatar::after{content:"";position:absolute;inset:0;background:var(--av-tint)}
+  .fut-avatar.letter{display:flex;align-items:center;justify-content:center;font-size:30cqw;font-weight:800;background:rgba(0,0,0,.10)}
+
+  .fut-rating{position:absolute;left:16.3%;top:9.76%;font-size:22.2cqw;font-weight:600;line-height:1}
+  .fut-pos{position:absolute;left:25%;top:23.78%;transform:translateX(-50%);font-size:9.3cqw;font-weight:600;letter-spacing:.02em;line-height:1}
+  .fut-domain{position:absolute;left:25%;top:33.4%;transform:translateX(-50%);font-size:8.2cqw;line-height:1}
+  .fut-club{position:absolute;left:19.06%;top:42.25%;width:11.875%;aspect-ratio:1;border-radius:50%;object-fit:cover;display:none;background:#fff;border:.4cqw solid rgba(0,0,0,.18)}
+
+  .fut-name{position:absolute;left:50%;top:53.66%;transform:translateX(-50%);font-size:13cqw;font-weight:700;line-height:1;white-space:nowrap;text-transform:uppercase}
+
+  .fut-line{position:absolute;height:.35cqw;background:var(--ink-card);opacity:.5}
+  .fut-line.l1{left:19.44%;top:31.1%;width:10.19%}
+  .fut-line.l2{left:19.44%;top:40.85%;width:10.19%}
+  .fut-line.l3{left:16.67%;top:64.02%;width:66.67%}
+  .fut-line.l4{left:44.44%;top:89.63%;width:11.11%}
+  .fut-vline{position:absolute;left:50%;top:66.46%;width:.35cqw;height:20.12%;background:var(--ink-card);opacity:.5}
+
+  .fut-stat-v{position:absolute;font-size:10.2cqw;font-weight:700;line-height:1}
+  .fut-stat-l{position:absolute;font-size:9.3cqw;font-weight:600;letter-spacing:.02em;line-height:1}
+  .v-PAC{left:21.3%;top:64.63%}  .lab-PAC{left:32.41%;top:65.24%}
+  .v-DRI{left:56.48%;top:64.63%} .lab-DRI{left:67.59%;top:65.24%}
+  .v-SHO{left:21.3%;top:72.2%}   .lab-SHO{left:32.41%;top:72.8%}
+  .v-DEF{left:56.48%;top:72.2%}  .lab-DEF{left:67.59%;top:72.8%}
+  .v-PAS{left:21.3%;top:79.76%}  .lab-PAS{left:32.41%;top:80.37%}
+  .v-PHY{left:56.48%;top:79.76%} .lab-PHY{left:67.59%;top:80.37%}
+
+  .fut-foot{position:absolute;left:50%;top:91.2%;transform:translateX(-50%);font-size:4.1cqw;font-weight:700;letter-spacing:.1em;line-height:1;opacity:.6;white-space:nowrap}
 
   /* ---------- stage: fan of collected cards / scouted card ---------- */
   .stage{display:flex;flex-direction:column;align-items:center;gap:16px;min-height:calc(var(--card-h) + 60px);justify-content:center}
@@ -126,7 +166,8 @@
 
   .card-holder{display:flex;flex-direction:column;align-items:center;gap:16px}
   .card-holder[hidden]{display:none}
-  .card-holder .fut{filter:drop-shadow(0 18px 40px rgba(0,0,0,.55))}
+  .card-holder .fut{filter:drop-shadow(0 18px 40px rgba(0,0,0,.55)) drop-shadow(0 0 20px var(--glow))}
+  .fan-slot .fut{filter:drop-shadow(0 0 14px var(--glow))}
   @media (prefers-reduced-motion:no-preference){
     .card-holder .fut.deal{animation:walkout 1.05s cubic-bezier(.16,1,.3,1) both}
     /* THE WALKOUT: card rises out of darkness into the spotlight */
@@ -217,26 +258,21 @@
 <template id="card-tpl">
   <div class="fut">
     <div class="fut-bg"></div>
-    <div class="fut-inner">
-      <div class="fut-top">
-        <div class="fut-rating"></div>
-        <div class="fut-pos"></div>
-        <div class="fut-domain"></div>
-        <img class="fut-club" alt="">
-      </div>
-      <div class="fut-avatar letter"></div>
-      <div class="fut-name"></div>
-      <div class="fut-rule"></div>
-      <div class="fut-stats">
-        <div class="fut-stat"><b class="s-PAC"></b><span>PAC</span></div>
-        <div class="fut-stat"><b class="s-DRI"></b><span>DRI</span></div>
-        <div class="fut-stat"><b class="s-SHO"></b><span>SHO</span></div>
-        <div class="fut-stat"><b class="s-DEF"></b><span>DEF</span></div>
-        <div class="fut-stat"><b class="s-PAS"></b><span>PAS</span></div>
-        <div class="fut-stat"><b class="s-PHY"></b><span>PHY</span></div>
-      </div>
-      <div class="fut-foot">HUGFUT · HF.CO</div>
-    </div>
+    <div class="fut-mark">HUGFUT</div>
+    <div class="fut-avatar letter"></div>
+    <div class="fut-rating"></div>
+    <div class="fut-pos"></div>
+    <div class="fut-domain"></div>
+    <img class="fut-club" alt="">
+    <div class="fut-line l1"></div><div class="fut-line l2"></div><div class="fut-line l3"></div><div class="fut-line l4"></div><div class="fut-vline"></div>
+    <div class="fut-name"></div>
+    <span class="fut-stat-v v-PAC"></span><span class="fut-stat-l lab-PAC">PAC</span>
+    <span class="fut-stat-v v-DRI"></span><span class="fut-stat-l lab-DRI">DRI</span>
+    <span class="fut-stat-v v-SHO"></span><span class="fut-stat-l lab-SHO">SHO</span>
+    <span class="fut-stat-v v-DEF"></span><span class="fut-stat-l lab-DEF">DEF</span>
+    <span class="fut-stat-v v-PAS"></span><span class="fut-stat-l lab-PAS">PAS</span>
+    <span class="fut-stat-v v-PHY"></span><span class="fut-stat-l lab-PHY">PHY</span>
+    <div class="fut-foot">HUGFUT · HF.CO</div>
   </div>
 </template>
 
@@ -275,19 +311,29 @@ const ANGLE = 7, SPREAD_CLOSED = 88, SPREAD_OPEN = 124;
 
 function makeCard(){ return document.getElementById("card-tpl").content.firstElementChild.cloneNode(true); }
 
+const pad2 = n => String(Math.round(n)).padStart(2, "0");
+
 function fillCard(el, d){
   el.className = "fut tier-" + d.tier;
-  el.querySelector(".fut-rating").textContent = d.rating;
+  el.querySelector(".fut-rating").textContent = pad2(d.rating);
   el.querySelector(".fut-pos").textContent = d.pos;
   el.querySelector(".fut-domain").textContent = d.domain;
   el.querySelector(".fut-name").textContent = d.name.toUpperCase();
   for (const k of ["PAC","SHO","PAS","DRI","DEF","PHY"])
-    el.querySelector(".s-"+k).textContent = d.stats[k];
+    el.querySelector(".v-"+k).textContent = pad2(d.stats[k]);
   const av = el.querySelector(".fut-avatar");
-  if (d.avatar){ av.className = "fut-avatar"; av.style.background = `center/cover url(${d.avatar})`; av.textContent = ""; }
-  else { av.className = "fut-avatar letter"; av.style.background = ""; av.textContent = d.name[0].toUpperCase(); }
+  if (d.avatar){ av.className = "fut-avatar"; av.style.backgroundImage = `url(${d.avatar})`; av.textContent = ""; }
+  else { av.className = "fut-avatar letter"; av.style.backgroundImage = ""; av.textContent = d.name[0].toUpperCase(); }
   const club = el.querySelector(".fut-club");
   if (d.club){ club.src = d.club; club.style.display = "block"; } else club.style.display = "none";
+  /* shrink long names to fit the shield */
+  const nameEl = el.querySelector(".fut-name");
+  nameEl.style.fontSize = "";
+  requestAnimationFrame(() => {
+    const max = el.clientWidth * .84;
+    if (nameEl.scrollWidth > max)
+      nameEl.style.fontSize = (parseFloat(getComputedStyle(nameEl).fontSize) * max / nameEl.scrollWidth) + "px";
+  });
 }
 
 /* ---------- fan of collected cards ---------- */
@@ -402,7 +448,7 @@ function domainEmoji(models){
   return "🤗";
 }
 
-function tier(overall){ return overall >= 89 ? "legend" : overall >= 75 ? "gold" : "silver"; }
+function tier(overall){ return overall >= 89 ? "legend" : overall >= 75 ? "gold" : overall >= 65 ? "silver" : "bronze"; }
 
 async function scout(user){
   user = user.trim().replace(/^@/,"");