Spaces:

build-small-hackathon
/

certificate-generator

Running

App Files Files Community

certificate-generator / certificate_template.html

ysharma HF Staff

Update certificate template (latest design)

246efb5 verified 6 days ago

Raw

History Blame Contribute Delete

9.84 kB

	<!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 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 Face × 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>< 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>