Spaces:

build-small-hackathon
/

certificate-generator

Running

File size: 9,841 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Build Small — Certificate</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@100..125,400..900&family=Spline+Sans+Mono:wght@400;500;600&display=swap');

:root{
  --paper:#f4eee1; --paper-2:#efe7d4; --kraft:#e4d5b7; --kraft-deep:#d6c19a; --line:#cdbb95;
  --ink:#33312b; --ink-2:#4a4639; --ink-soft:rgba(51,49,43,.62); --ink-faint:rgba(51,49,43,.40);
  --forest:#3d6a55; --forest-deep:#2b4d3d; --forest-ink:#20392d;
  --amber:#e0913a; --amber-deep:#c2762a; --clay:#bd5f37;
  --font-display:'Archivo',system-ui,sans-serif;
  --font-mono:'Spline Sans Mono',ui-monospace,monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{width:2000px;height:1414px;overflow:hidden;}

.certificate{
  width:2000px;height:1414px;position:relative;overflow:hidden;
  background:var(--paper);color:var(--ink);
  font-family:var(--font-display);
  print-color-adjust:exact;-webkit-print-color-adjust:exact;
}

/* paper grain (from the field-guide global.css) */
.grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");}

/* topographic contour backdrops — corners, forest tint */
.topo{position:absolute;z-index:1;pointer-events:none;opacity:.32;}
.topo--br{right:-260px;bottom:-300px;width:1100px;height:1100px;}
.topo--tl{left:-320px;top:-340px;width:1000px;height:1000px;opacity:.22;}

/* frame */
.frame{position:absolute;inset:46px;z-index:3;border:3px solid var(--ink);background:transparent;}
.frame::after{content:"";position:absolute;inset:13px;border:2px solid var(--ink-faint);pointer-events:none;}

/* registration corner ticks */
.tick{position:absolute;z-index:5;width:46px;height:46px;}
.tick path{stroke:var(--ink);stroke-width:3;fill:none;}
.tick--tl{top:30px;left:30px;} .tick--tr{top:30px;right:30px;transform:scaleX(-1);}
.tick--bl{bottom:30px;left:30px;transform:scaleY(-1);} .tick--br{bottom:30px;right:30px;transform:scale(-1,-1);}

.content{position:relative;z-index:4;height:100%;padding:60px 120px 50px;
  display:flex;flex-direction:column;text-align:center;}

/* ---- top bar ---- */
.topbar{display:flex;justify-content:flex-end;align-items:center;}
.coord{font-family:var(--font-mono);font-size:16px;letter-spacing:.10em;color:var(--ink-faint);}

/* ---- lockup ---- */
.lockup{display:flex;align-items:center;justify-content:center;gap:34px;margin-top:30px;}
.lockup img{height:48px;display:block;}
.lockup .hf-mark img{height:42px;}
.lockup .hf-wm{font-weight:800;font-stretch:106%;font-size:28px;letter-spacing:-.01em;color:var(--ink);}
.lockup .cross{font-family:var(--font-mono);font-size:30px;color:var(--ink-faint);font-weight:400;}
.hf-mark{display:inline-flex;align-items:center;gap:16px;}

/* ---- title ---- */
.kicker{font-family:var(--font-mono);font-size:19px;font-weight:600;letter-spacing:.26em;
  text-transform:uppercase;color:var(--forest);margin-top:30px;}
.title{font-weight:900;font-stretch:122%;font-size:142px;line-height:.92;letter-spacing:-.02em;
  margin-top:12px;color:var(--ink);}
.doctype{display:inline-flex;align-items:center;justify-content:center;gap:24px;margin-top:22px;
  font-family:var(--font-mono);font-size:32px;font-weight:600;letter-spacing:.28em;
  text-transform:uppercase;color:var(--forest);}
.doctype::before,.doctype::after{content:"";width:70px;height:2px;background:var(--amber);display:inline-block;}

/* ---- body ---- */
.body{flex-grow:1;display:flex;flex-direction:column;justify-content:center;}
.certifies{font-family:var(--font-mono);font-size:23px;color:var(--ink-soft);letter-spacing:.04em;margin-bottom:6px;}
.name{font-weight:800;font-stretch:105%;font-size:98px;line-height:1;letter-spacing:-.01em;
  color:var(--forest-deep);padding:14px 0 20px;display:inline-block;margin:6px auto 0;
  border-bottom:3px solid var(--ink);}
.desc{font-size:25px;line-height:1.58;color:var(--ink-2);max-width:1300px;margin:32px auto 0;font-weight:500;text-wrap:pretty;}
.desc strong{font-weight:800;color:var(--ink);}
.project{margin:22px auto 0;display:inline-flex;align-items:center;gap:16px;
  font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--ink);
  background:var(--kraft);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  padding:18px 34px;}
.project .lbl{color:var(--forest);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:18px;}

/* ---- stats ---- */
.stats{display:flex;justify-content:center;width:fit-content;margin:32px auto 0;
  border:2px solid var(--ink);background:var(--paper);box-shadow:6px 6px 0 var(--ink);}
.stat{padding:18px 50px;border-right:2px solid var(--ink);}
.stat:last-child{border-right:none;}
.stat b{display:block;font-weight:800;font-stretch:118%;font-size:44px;line-height:1;color:var(--ink);}
.stat span{display:block;font-family:var(--font-mono);font-size:15px;letter-spacing:.10em;
  text-transform:uppercase;color:var(--ink-soft);margin-top:10px;}

/* ---- signature row ---- */
.sigrow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;margin-top:0;padding-top:30px;}
.sig{display:flex;flex-direction:column;gap:10px;}
.sig--l{align-items:flex-start;text-align:left;} .sig--r{align-items:flex-end;text-align:right;}
.sig__val{font-weight:800;font-stretch:110%;font-size:26px;color:var(--ink);}
.sig__lbl{font-family:var(--font-mono);font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);}
.sig__rule{width:280px;height:0;border-top:2px solid var(--ink);margin-bottom:2px;}

/* circular stamp seal */
.seal{width:152px;height:152px;position:relative;transform:rotate(-7deg);}

/* ---- sponsors ---- */
.sponsors{margin-top:24px;margin-bottom:38px;padding-top:22px;border-top:2px dashed var(--line);}
.sponsors__t{font-family:var(--font-mono);font-size:15px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:18px;}
.sponsors__l{font-weight:800;font-stretch:108%;font-size:31px;color:var(--ink);letter-spacing:-.005em;}
.sponsors__l i{color:var(--kraft-deep);font-style:normal;font-weight:400;margin:0 16px;
  position:relative;top:-3px;font-size:24px;}
</style>
</head>
<body>
<div class="certificate">
  <div class="grain"></div>

  <!-- topo contour backdrops -->
  <svg class="topo topo--br" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#3d6a55" stroke-width="1.4">
    <path d="M200 40C120 60 60 120 50 210s40 150 130 150 160-70 150-160S280 20 200 40Z"/>
    <path d="M200 80C140 96 96 142 90 210s34 116 110 116 128-54 122-120S262 64 200 80Z"/>
    <path d="M200 120C158 132 128 166 124 212s26 84 78 84 96-40 92-86S240 108 200 120Z"/>
    <path d="M200 160C176 168 158 188 156 214s16 52 46 52 58-24 56-50S224 152 200 160Z"/>
    <path d="M200 196c-14 4-24 16-24 30s12 26 26 26 28-12 28-28-16-30-30-28Z"/>
  </svg>
  <svg class="topo topo--tl" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#e0913a" stroke-width="1.4">
    <path d="M200 40C120 60 60 120 50 210s40 150 130 150 160-70 150-160S280 20 200 40Z"/>
    <path d="M200 90C146 104 104 146 98 208s32 110 104 110 122-50 116-114S256 76 200 90Z"/>
    <path d="M200 140C166 150 142 180 138 214s22 74 68 74 84-34 80-74S232 130 200 140Z"/>
    <path d="M200 190c-18 4-32 20-32 38s14 32 34 32 34-16 34-36-18-38-36-34Z"/>
  </svg>

  <div class="frame"></div>
  <svg class="tick tick--tl" viewBox="0 0 46 46"><path d="M2 2 L2 22 M2 2 L22 2"/></svg>
  <svg class="tick tick--tr" viewBox="0 0 46 46"><path d="M2 2 L2 22 M2 2 L22 2"/></svg>
  <svg class="tick tick--bl" viewBox="0 0 46 46"><path d="M2 2 L2 22 M2 2 L22 2"/></svg>
  <svg class="tick tick--br" viewBox="0 0 46 46"><path d="M2 2 L2 22 M2 2 L22 2"/></svg>

  <div class="content">
    <div class="topbar">
      <span class="coord">June 5–15, 2026</span>
    </div>

    <div class="lockup">
      <span class="hf-mark">
        <img src="https://huggingface.co/front/assets/huggingface_logo-noborder.svg" alt="Hugging Face">
        <span class="hf-wm">Hugging&nbsp;Face</span>
      </span>
      <span class="cross">×</span>
      <img src="https://www.gradio.app/_app/immutable/assets/gradio-logo-with-title.3SNGTZpF.svg" alt="Gradio">
    </div>

    <div>
      <div class="kicker">Hugging Face × Gradio Hackathon</div>
      <div class="title">Build Small</div>
      <div class="doctype">Certificate of Participation</div>
    </div>

    <div class="body">
      <div class="certifies">This certifies that</div>
      <div class="name" id="participantName">{participant_name}</div>
      <div class="desc">
        has successfully participated in <strong>Build Small</strong>, a Hugging&nbsp;Face&nbsp;×&nbsp;Gradio
        hackathon celebrating small, local, open-weight models — building real, tinkerable apps
        powered entirely by models <strong>under 32B parameters</strong>.
      </div>
      {project_section}
      <div class="stats">
        <div class="stat"><b>&lt; 32B</b><span>Params · Local-first</span></div>
        <div class="stat"><b>$48K+</b><span>Prize Pool</span></div>
      </div>
    </div>

    <div class="sponsors">
      <div class="sponsors__t">Proudly supported by</div>
      <div class="sponsors__l">
        OpenBMB <i>·</i> Black Forest Labs <i>·</i> OpenAI <i>·</i> NVIDIA <i>·</i> Modal <i>·</i> JetBrains <i>·</i> Cohere Labs
      </div>
    </div>
  </div>
</div>
</body>
</html>