apply / index.html
Sergehabis2's picture
Sergehabis2 HF Staff
Upload index.html
0f2aa57 verified
Raw History Blame Contribute Delete
70.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="color-scheme" content="dark">
<meta name="theme-color" content="#000000">
<meta name="description" content="Apply with your team to the Qai × Hugging Face Hackathon O1, 5 to 7 November 2026, in person in Doha.">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ctext y='.9em' font-size='90'%3E%F0%9F%A4%97%3C/text%3E%3C/svg%3E">
<title>Qai × Hugging Face Hackathon: Team Application</title>
<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=Space+Grotesk:wght@500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
:root{
box-sizing:border-box;
padding-top:env(safe-area-inset-top,0px);
padding-bottom:env(safe-area-inset-bottom,0px);
color-scheme:dark;
/* Hackathon 01 design kit */
--black:#000000;
--navy:#092335;
--navy-hi:#0D2E47;
--blue:#A1BADA;
--red:#EE3124;
--red-ui:#FF5A4E;
--red-btn:#DB2B1F;
--yellow:#FFD21F;
--white:#FFFFFF;
--ink:#FFFFFF;
--muted:rgba(255,255,255,.72);
--line:rgba(161,186,218,.18);
--field:rgba(255,255,255,.045);
--field-line:rgba(161,186,218,.34);
--display:'Space Grotesk','Helvetica Neue',Arial,sans-serif;
--body:'Hanken Grotesk','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 76px);-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:#000}
body{margin:0;background:#000;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
a{color:#fff}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}
/* ---------- lockup ---------- */
.lockup{display:inline-flex;align-items:center;gap:16px}
.lockup .qai{height:34px;width:auto;color:#fff;display:block}
.lockup .div{width:1px;height:34px;background:rgba(255,255,255,.42)}
.lockup .hfw{display:flex;align-items:center;gap:10px}
.lockup .hf{height:38px;width:auto;display:block}
.lockup .hf-name{font-family:var(--display);font-weight:700;font-size:19px;letter-spacing:-.01em}
.lockup.mini{gap:12px}
.lockup.mini .qai{height:22px}
.lockup.mini .div{height:22px}
.lockup.mini .hf{height:25px}
.lockup.mini .hf-name{font-size:15px}
/* ---------- sticky bar ---------- */
.topbar{
position:fixed;left:0;right:0;top:0;z-index:20;
padding:calc(10px + env(safe-area-inset-top,0px)) 18px 10px;
background:rgba(0,0,0,.84);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--line);
transform:translateY(-110%);transition:transform .35s ease;
}
.topbar.show{transform:none}
.topbar-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.prog{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--muted)}
.pshapes{display:flex;align-items:center;gap:11px}
.pshape{display:block;width:22px;height:22px;color:rgba(161,186,218,.28);transition:color .3s ease,filter .3s ease}
.pshape[data-done="1"]{color:var(--c)}
.pshape.emo{filter:grayscale(1) opacity(.32)}
.pshape.emo[data-done="1"]{filter:none}
.pshape.pop{animation:pop .55s cubic-bezier(.3,.9,.4,1.3)}
@keyframes pop{0%{transform:none}40%{transform:translateY(-7px) scale(1.3)}100%{transform:none}}
/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;isolation:isolate;background:#000;color:#fff;
padding:calc(30px + env(safe-area-inset-top,0px)) 24px 70px}
.hero-bg{position:absolute;inset:0;z-index:-3;pointer-events:none;
background:
radial-gradient(48% 70% at 100% 0%,rgba(112,166,212,.66) 0,rgba(112,166,212,0) 100%),
radial-gradient(42% 60% at 0% 100%,rgba(112,166,212,.6) 0,rgba(112,166,212,0) 100%)}
.hero-grid{position:absolute;z-index:-2;pointer-events:none;right:0;top:0;bottom:0;width:60%;
background-image:linear-gradient(rgba(161,186,218,.3) 1px,transparent 1px),linear-gradient(90deg,rgba(161,186,218,.3) 1px,transparent 1px);
background-size:76px 76px;background-position:right 0 top 26px;
-webkit-mask-image:radial-gradient(78% 88% at 72% 46%,#000 28%,transparent 80%);
mask-image:radial-gradient(78% 88% at 72% 46%,#000 28%,transparent 80%)}
.pl{position:absolute;z-index:-1;pointer-events:none;width:20px;height:20px;color:var(--c);
background:linear-gradient(currentColor,currentColor) center/100% 4px no-repeat,linear-gradient(currentColor,currentColor) center/4px 100% no-repeat}
.hero-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.02fr .98fr;gap:16px;align-items:center}
h1{margin:36px 0 0;font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:.9;letter-spacing:-.03em;font-size:clamp(3rem,7.6vw,6.1rem)}
h1 .h-top{display:block;color:#fff}
h1 .o1{display:flex;align-items:flex-end;gap:20px;color:var(--red)}
h1 .o1 .big{font-size:1.14em;line-height:.88}
h1 .o1 .tag{font-weight:600;font-size:clamp(.78rem,1.45vw,1rem);letter-spacing:.16em;color:var(--muted);padding-bottom:.6em;line-height:1.2}
.kicker{margin:26px 0 8px;font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:14px;color:#fff}
.sub{margin:0 0 24px;max-width:46ch;font-size:18.5px;color:rgba(255,255,255,.86)}
.facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0;list-style:none}
.facts li{padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.34);font-size:14px;font-weight:500}
.count{display:inline-grid;grid-auto-flow:column;align-items:end;gap:20px;padding:16px 24px;margin-bottom:28px;
border:1px solid rgba(161,186,218,.3);border-radius:16px;background:rgba(9,35,53,.6)}
.count .lead{align-self:center;margin-right:8px;font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);max-width:8ch;line-height:1.35}
.count .u{text-align:center}
.count .n{display:block;font-family:var(--display);font-weight:700;font-size:46px;line-height:1;font-variant-numeric:tabular-nums;min-width:2ch;color:#fff}
.count .l{display:block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.count.live-now{grid-auto-flow:row}
.count.live-now .n{font-size:28px}
.cta{display:inline-flex;align-items:center;gap:12px;background:var(--red-btn);color:#fff;text-decoration:none;font-weight:700;font-size:17px;
padding:16px 30px;border-radius:999px;transition:background .2s ease,color .2s ease,transform .2s ease}
.cta:hover{background:var(--yellow);color:#000;transform:translateY(-2px)}
.stack-col{display:flex;justify-content:center}
.stack{width:min(500px,100%)}
#scene{display:block;width:100%;aspect-ratio:1/1.04;touch-action:pan-y;cursor:grab;-webkit-tap-highlight-color:transparent}
#scene.grabbing{cursor:grabbing}
.scene-hint{margin:2px 0 0;text-align:center;font-size:14px;color:var(--muted)}
.scene-hint{max-width:34ch;margin:2px auto 0}
.dots{display:flex;justify-content:center;gap:10px;margin-top:12px}
.dots i{width:12px;height:12px;border-radius:50%;border:2px solid var(--c);background:transparent;transition:background .3s ease,transform .3s ease}
.dots i[data-on="1"]{background:var(--c);transform:scale(1.15)}
.dots i:nth-child(1){--c:#EE3124}
.dots i:nth-child(2){--c:#6F8DAB}
.dots i:nth-child(3){--c:#A1BADA}
#scene.over:not(.grabbing){cursor:pointer}
/* ---------- content ---------- */
.wrap{max-width:820px;margin:0 auto;padding:0 20px 60px}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;padding:58px 0 38px}
.hn{display:block;font-family:var(--display);font-weight:700;color:var(--muted);font-size:26px;line-height:1;margin-bottom:12px}
.how h2{margin:0 0 6px;font-size:18px;font-weight:700}
.how p{margin:0;color:var(--muted);font-size:15px}
.when{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:0 0 30px;padding:30px;
background:linear-gradient(135deg,var(--navy-hi),var(--navy) 62%);border:1px solid var(--line);border-radius:22px}
.when h2{margin:0 0 12px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.when .date{margin-bottom:14px;font-family:var(--display);font-weight:700;line-height:1.1;color:#fff;font-size:clamp(1.5rem,3.6vw,2rem)}
.when .times{margin:0 0 12px}
.when .times div{display:flex;align-items:baseline;gap:14px;padding:6px 0}
.when .times dt{width:62px;font-size:14px;color:var(--muted)}
.when .times dd{margin:0;font-size:17px;font-weight:600;color:#fff}
.when .place{margin-bottom:8px;font-family:var(--body);font-weight:700;line-height:1.15;color:#fff;font-size:clamp(1.25rem,3vw,1.6rem)}
.when p{margin:0;color:#fff;font-size:16px;line-height:1.6}
.when .dim{font-size:14px;color:var(--muted)}
.when .maps{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:10px 20px;border-radius:999px;border:1.5px solid rgba(255,255,255,.5);color:#fff;text-decoration:none;font-weight:600;font-size:14.5px;transition:background .2s ease,color .2s ease,border-color .2s ease}
.when .maps:hover{background:#fff;color:var(--navy);border-color:#fff}
.block{position:relative;margin-bottom:26px;padding:30px 28px;background:linear-gradient(180deg,#0C2B42 0%,var(--navy) 100%);border:1px solid var(--line);border-radius:22px}
.block::before,.block::after{content:"";position:absolute;width:16px;height:16px;color:rgba(161,186,218,.75);pointer-events:none;
background:linear-gradient(currentColor,currentColor) center/100% 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 100% no-repeat}
.block::before{top:-8px;left:-8px}
.block::after{bottom:-8px;right:-8px}
.sec-head{display:flex;align-items:center;gap:16px;margin-bottom:8px}
.sec-head .num{font-family:var(--display);font-weight:700;font-size:46px;line-height:1;color:var(--red)}
.block h2.t{margin:0;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(1.3rem,3.4vw,1.8rem);line-height:1.05}
.sec-head .shape{display:block;flex:none;margin-left:auto;width:44px;height:44px;color:var(--c);transition:transform .35s ease}
.sec-head .shape:hover{transform:rotate(90deg) scale(1.1)}
.sec-head .shape.pre{opacity:0}
.sec-head .shape.in{animation:shapein .85s cubic-bezier(.2,.9,.3,1.25)}
@keyframes shapein{0%{opacity:0;transform:scale(.25) rotate(-140deg)}45%{opacity:1}100%{opacity:1;transform:none}}
.sec-desc{margin:0 0 22px;color:var(--muted)}
.fieldrow{margin-bottom:20px}
.field-label{display:block;font-weight:600;font-size:15px;margin-bottom:7px;color:#fff}
.opt{font-weight:400;color:var(--muted);font-size:14px}
.hint{font-size:14px;color:var(--muted);margin-top:6px}
.count-w{float:right;font-weight:400;font-size:14px;color:var(--muted)}
input[type=text],input[type=email],input[type=tel],input[type=url],select,textarea{
width:100%;font:inherit;color:#fff;background:var(--field);border:1.5px solid var(--field-line);
border-radius:12px;padding:12px 14px;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.4)}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blue);background:rgba(255,255,255,.07);box-shadow:0 0 0 4px rgba(161,186,218,.22)}
input:-webkit-autofill{-webkit-text-fill-color:#fff;box-shadow:0 0 0 100px #0F3350 inset;caret-color:#fff}
select{appearance:none;-webkit-appearance:none;padding-right:38px;
background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
background-position:calc(100% - 20px) 52%,calc(100% - 14px) 52%;background-size:6px 6px;background-repeat:no-repeat}
select option{background:#0C2B42;color:#fff}
.was-validated :invalid{border-color:var(--red-ui)}
.was-validated input[type=checkbox]:invalid + span{color:var(--red-ui)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.choices{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-block;padding:9px 16px;border-radius:999px;border:1.5px solid var(--field-line);background:transparent;color:#fff;font-weight:500;font-size:14.5px;transition:background .15s ease,color .15s ease,border-color .15s ease}
.chip:hover span{border-color:var(--blue)}
.chip input:checked + span{background:var(--blue);color:var(--navy);border-color:var(--blue);font-weight:600}
.chip input:focus-visible + span{outline:3px solid var(--yellow);outline-offset:2px}
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:15px;margin-bottom:12px}
.check input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:var(--red)}
.member{border:1.5px dashed rgba(161,186,218,.36);border-radius:18px;padding:20px;margin-top:16px}
.mtitle{font-weight:700;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.badge{display:inline-block;padding:3px 10px;border-radius:999px;border:1px solid var(--field-line);font-size:12.5px;font-weight:600;color:var(--muted)}
.badge.lead{background:var(--red-btn);border-color:var(--red-btn);color:#fff}
.member .grid2{gap:14px;margin-bottom:14px}
.member .grid2:last-child{margin-bottom:0}
.note{display:flex;gap:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-left:4px solid var(--yellow);border-radius:12px;padding:14px 16px;font-size:15px;color:#fff}
hr.soft{border:none;border-top:1px solid var(--line);margin:22px 0}
.submit-wrap{text-align:center;padding:10px 0 0}
.submit{font:inherit;font-weight:700;font-size:18px;color:#fff;background:var(--red-btn);border:none;border-radius:999px;padding:17px 46px;cursor:pointer;transition:background .2s ease,color .2s ease,transform .2s ease}
.submit:hover{background:var(--yellow);color:#000;transform:translateY(-2px)}
.submit[disabled]{opacity:.6;cursor:progress;transform:none}
.msg{min-height:22px;margin-top:14px;font-weight:600;color:var(--red-ui)}
.foot{color:var(--muted);font-size:14px;margin-top:6px}
.done{display:none;text-align:center;background:linear-gradient(180deg,#0C2B42,var(--navy));border:1px solid var(--line);border-radius:22px;padding:48px 26px 52px}
.done.show{display:block}
.done-art{position:relative;width:260px;height:170px;margin:0 auto 14px}
.done-art .emo{position:absolute;left:50%;top:50%;width:120px;height:auto;margin:-56px 0 0 -60px}
.done-art .ds{position:absolute;width:30px;height:30px;color:var(--c);opacity:0}
.done h2{margin:0 0 10px;font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(2rem,6vw,3rem);line-height:1}
.done p{margin:0 auto;max-width:44ch;color:var(--muted)}
.done.show .emo{animation:dbob 2.4s ease-in-out infinite}
.done.show .ds{animation:dpop .7s cubic-bezier(.2,.9,.3,1.3) both,dfloat 3.4s ease-in-out infinite;animation-delay:var(--d),calc(var(--d) + .7s)}
@keyframes dbob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes dpop{0%{opacity:0;transform:scale(.2) rotate(-120deg)}100%{opacity:1;transform:none}}
@keyframes dfloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
footer{background:#000;border-top:1px solid var(--line);color:var(--muted);padding:0 22px calc(38px + env(safe-area-inset-bottom,0px))}
.strip{display:block;width:calc(100% + 44px);margin:0 -22px 34px;height:44px}
.foot-grid{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:28px 36px;align-items:start}
.foot-brand p{margin:14px 0 0;font-size:14px;line-height:1.6}
.foot-col h3{margin:0 0 10px;font-family:var(--body);font-weight:600;text-transform:uppercase;font-size:12px;letter-spacing:.16em;color:var(--muted)}
.foot-col a{display:block;width:fit-content;margin-top:8px;font-size:14.5px;color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.35);transition:border-color .2s ease}
.foot-col a:first-of-type{margin-top:0}
.foot-col a:hover{border-color:#fff}
@media (max-width:900px){
.hero-in{grid-template-columns:1fr}
.hero .pl:not(:first-of-type){display:none}
.stack{width:min(420px,92vw)}
.hero-grid{width:100%;top:46%;-webkit-mask-image:radial-gradient(80% 70% at 50% 60%,#000 25%,transparent 80%);mask-image:radial-gradient(80% 70% at 50% 60%,#000 25%,transparent 80%)}
.how{grid-template-columns:1fr;gap:22px}
.when{grid-template-columns:1fr;gap:24px;padding:26px 22px}
.foot-grid{grid-template-columns:1fr 1fr}
.foot-brand{grid-column:1/-1}
}
@media (max-width:640px){
.lockup{gap:12px}
.lockup .qai{height:28px}.lockup .div{height:28px}.lockup .hf{height:32px}.lockup .hf-name{font-size:16px}
.grid2{grid-template-columns:1fr}
.block{padding:24px 18px;border-radius:20px}
.sec-head .num{font-size:38px}
.sec-head .shape{width:38px;height:38px}
.count{gap:14px;padding:14px 16px}.count .n{font-size:34px}.count .lead{display:none}
.prog .txt{display:none}
.lockup.mini .hf-name{display:none}
.foot-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
html{scroll-behavior:auto}
.sec-head .shape.pre{opacity:1}
.sec-head .shape.in,.pshape.pop{animation:none}
.done.show .emo,.done.show .ds{animation:none;opacity:1}
.topbar,.cta,.submit{transition:none}
}
</style>
</head>
<body>
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
<defs>
<symbol id="qai" viewBox="0 0 316 166"><path d="M316 3.25195H280.898V119.502H316V3.25195Z" fill="currentColor"/><path d="M226.42 13.1271C216.877 4.90453 204.829 0.00292969 191.735 0.00292969C160.743 0.00292969 135.619 27.4856 135.619 61.3843C135.619 95.283 160.743 122.766 191.735 122.766C204.826 122.766 216.877 117.861 226.42 109.642V119.511H261.532V3.2546H226.42V13.1271Z" fill="currentColor"/><path d="M125.897 146.58H90.8002V166H125.897V146.58Z" fill="currentColor"/><path d="M110.276 133.687H106.422V123.335H90.8053V142.755H125.902V123.335H110.28L110.276 133.687Z" fill="currentColor"/><path d="M103.784 59.4665H116.77V63.2963H99.9297V3.25469H90.7984V13.1301C81.2552 4.91063 69.2105 0 56.1135 0C25.1207 0 0 27.4827 0 61.3814C0 95.2801 25.1237 122.763 56.1135 122.763C69.2105 122.763 81.2552 117.852 90.8044 109.63V119.49H125.901V33.2725H112.915V29.4427H125.901V3.25469H103.79V59.4665H103.784Z" fill="currentColor"/></symbol>
<symbol id="hf" viewBox="0 0 95 88"> <path fill="#FFD21E" d="M47.21 76.5a34.75 34.75 0 1 0 0-69.5 34.75 34.75 0 0 0 0 69.5Z" /> <path fill="#FF9D0B" d="M81.96 41.75a34.75 34.75 0 1 0-69.5 0 34.75 34.75 0 0 0 69.5 0Zm-73.5 0a38.75 38.75 0 1 1 77.5 0 38.75 38.75 0 0 1-77.5 0Z" /> <path fill="#3A3B45" d="M58.5 32.3c1.28.44 1.78 3.06 3.07 2.38a5 5 0 1 0-6.76-2.07c.61 1.15 2.55-.72 3.7-.32ZM34.95 32.3c-1.28.44-1.79 3.06-3.07 2.38a5 5 0 1 1 6.76-2.07c-.61 1.15-2.56-.72-3.7-.32Z" /> <path fill="#FF323D" d="M46.96 56.29c9.83 0 13-8.76 13-13.26 0-2.34-1.57-1.6-4.09-.36-2.33 1.15-5.46 2.74-8.9 2.74-7.19 0-13-6.88-13-2.38s3.16 13.26 13 13.26Z" /> <path fill="#3A3B45" fill-rule="evenodd" d="M39.43 54a8.7 8.7 0 0 1 5.3-4.49c.4-.12.81.57 1.24 1.28.4.68.82 1.37 1.24 1.37.45 0 .9-.68 1.33-1.35.45-.7.89-1.38 1.32-1.25a8.61 8.61 0 0 1 5 4.17c3.73-2.94 5.1-7.74 5.1-10.7 0-2.34-1.57-1.6-4.09-.36l-.14.07c-2.31 1.15-5.39 2.67-8.77 2.67s-6.45-1.52-8.77-2.67c-2.6-1.29-4.23-2.1-4.23.29 0 3.05 1.46 8.06 5.47 10.97Z" clip-rule="evenodd" /> <path fill="#FF9D0B" d="M70.71 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM24.21 37a3.25 3.25 0 1 0 0-6.5 3.25 3.25 0 0 0 0 6.5ZM17.52 48c-1.62 0-3.06.66-4.07 1.87a5.97 5.97 0 0 0-1.33 3.76 7.1 7.1 0 0 0-1.94-.3c-1.55 0-2.95.59-3.94 1.66a5.8 5.8 0 0 0-.8 7 5.3 5.3 0 0 0-1.79 2.82c-.24.9-.48 2.8.8 4.74a5.22 5.22 0 0 0-.37 5.02c1.02 2.32 3.57 4.14 8.52 6.1 3.07 1.22 5.89 2 5.91 2.01a44.33 44.33 0 0 0 10.93 1.6c5.86 0 10.05-1.8 12.46-5.34 3.88-5.69 3.33-10.9-1.7-15.92-2.77-2.78-4.62-6.87-5-7.77-.78-2.66-2.84-5.62-6.25-5.62a5.7 5.7 0 0 0-4.6 2.46c-1-1.26-1.98-2.25-2.86-2.82A7.4 7.4 0 0 0 17.52 48Zm0 4c.51 0 1.14.22 1.82.65 2.14 1.36 6.25 8.43 7.76 11.18.5.92 1.37 1.31 2.14 1.31 1.55 0 2.75-1.53.15-3.48-3.92-2.93-2.55-7.72-.68-8.01.08-.02.17-.02.24-.02 1.7 0 2.45 2.93 2.45 2.93s2.2 5.52 5.98 9.3c3.77 3.77 3.97 6.8 1.22 10.83-1.88 2.75-5.47 3.58-9.16 3.58-3.81 0-7.73-.9-9.92-1.46-.11-.03-13.45-3.8-11.76-7 .28-.54.75-.76 1.34-.76 2.38 0 6.7 3.54 8.57 3.54.41 0 .7-.17.83-.6.79-2.85-12.06-4.05-10.98-8.17.2-.73.71-1.02 1.44-1.02 3.14 0 10.2 5.53 11.68 5.53.11 0 .2-.03.24-.1.74-1.2.33-2.04-4.9-5.2-5.21-3.16-8.88-5.06-6.8-7.33.24-.26.58-.38 1-.38 3.17 0 10.66 6.82 10.66 6.82s2.02 2.1 3.25 2.1c.28 0 .52-.1.68-.38.86-1.46-8.06-8.22-8.56-11.01-.34-1.9.24-2.85 1.31-2.85Z" /> <path fill="#FFD21E" d="M38.6 76.69c2.75-4.04 2.55-7.07-1.22-10.84-3.78-3.77-5.98-9.3-5.98-9.3s-.82-3.2-2.69-2.9c-1.87.3-3.24 5.08.68 8.01 3.91 2.93-.78 4.92-2.29 2.17-1.5-2.75-5.62-9.82-7.76-11.18-2.13-1.35-3.63-.6-3.13 2.2.5 2.79 9.43 9.55 8.56 11-.87 1.47-3.93-1.71-3.93-1.71s-9.57-8.71-11.66-6.44c-2.08 2.27 1.59 4.17 6.8 7.33 5.23 3.16 5.64 4 4.9 5.2-.75 1.2-12.28-8.53-13.36-4.4-1.08 4.11 11.77 5.3 10.98 8.15-.8 2.85-9.06-5.38-10.74-2.18-1.7 3.21 11.65 6.98 11.76 7.01 4.3 1.12 15.25 3.49 19.08-2.12Z" /> <path fill="#FF9D0B" d="M77.4 48c1.62 0 3.07.66 4.07 1.87a5.97 5.97 0 0 1 1.33 3.76 7.1 7.1 0 0 1 1.95-.3c1.55 0 2.95.59 3.94 1.66a5.8 5.8 0 0 1 .8 7 5.3 5.3 0 0 1 1.78 2.82c.24.9.48 2.8-.8 4.74a5.22 5.22 0 0 1 .37 5.02c-1.02 2.32-3.57 4.14-8.51 6.1-3.08 1.22-5.9 2-5.92 2.01a44.33 44.33 0 0 1-10.93 1.6c-5.86 0-10.05-1.8-12.46-5.34-3.88-5.69-3.33-10.9 1.7-15.92 2.78-2.78 4.63-6.87 5.01-7.77.78-2.66 2.83-5.62 6.24-5.62a5.7 5.7 0 0 1 4.6 2.46c1-1.26 1.98-2.25 2.87-2.82A7.4 7.4 0 0 1 77.4 48Zm0 4c-.51 0-1.13.22-1.82.65-2.13 1.36-6.25 8.43-7.76 11.18a2.43 2.43 0 0 1-2.14 1.31c-1.54 0-2.75-1.53-.14-3.48 3.91-2.93 2.54-7.72.67-8.01a1.54 1.54 0 0 0-.24-.02c-1.7 0-2.45 2.93-2.45 2.93s-2.2 5.52-5.97 9.3c-3.78 3.77-3.98 6.8-1.22 10.83 1.87 2.75 5.47 3.58 9.15 3.58 3.82 0 7.73-.9 9.93-1.46.1-.03 13.45-3.8 11.76-7-.29-.54-.75-.76-1.34-.76-2.38 0-6.71 3.54-8.57 3.54-.42 0-.71-.17-.83-.6-.8-2.85 12.05-4.05 10.97-8.17-.19-.73-.7-1.02-1.44-1.02-3.14 0-10.2 5.53-11.68 5.53-.1 0-.19-.03-.23-.1-.74-1.2-.34-2.04 4.88-5.2 5.23-3.16 8.9-5.06 6.8-7.33-.23-.26-.57-.38-.98-.38-3.18 0-10.67 6.82-10.67 6.82s-2.02 2.1-3.24 2.1a.74.74 0 0 1-.68-.38c-.87-1.46 8.05-8.22 8.55-11.01.34-1.9-.24-2.85-1.31-2.85Z" /> <path fill="#FFD21E" d="M56.33 76.69c-2.75-4.04-2.56-7.07 1.22-10.84 3.77-3.77 5.97-9.3 5.97-9.3s.82-3.2 2.7-2.9c1.86.3 3.23 5.08-.68 8.01-3.92 2.93.78 4.92 2.28 2.17 1.51-2.75 5.63-9.82 7.76-11.18 2.13-1.35 3.64-.6 3.13 2.2-.5 2.79-9.42 9.55-8.55 11 .86 1.47 3.92-1.71 3.92-1.71s9.58-8.71 11.66-6.44c2.08 2.27-1.58 4.17-6.8 7.33-5.23 3.16-5.63 4-4.9 5.2.75 1.2 12.28-8.53 13.36-4.4 1.08 4.11-11.76 5.3-10.97 8.15.8 2.85 9.05-5.38 10.74-2.18 1.69 3.21-11.65 6.98-11.76 7.01-4.31 1.12-15.26 3.49-19.08-2.12Z" /> </symbol>
</defs>
</svg>
<div class="topbar" id="topbar" role="region" aria-label="Application progress">
<div class="topbar-in">
<div class="lockup mini" aria-label="Qai and Hugging Face">
<svg class="qai" viewBox="0 0 316 166" role="img" aria-label="Qai"><use href="#qai"/></svg>
<span class="div" aria-hidden="true"></span>
<span class="hfw"><svg class="hf" viewBox="0 0 95 88" role="img" aria-label="Hugging Face"><use href="#hf"/></svg><span class="hf-name">Hugging Face</span></span>
</div>
<div class="prog">
<span class="pshapes" id="pshapes" aria-hidden="true"></span>
<span class="txt" id="progTxt">0 of 5 sections done</span>
</div>
</div>
</div>
<header class="hero" id="hero">
<div class="hero-bg" aria-hidden="true"></div>
<div class="hero-grid" aria-hidden="true"></div>
<i class="pl" style="--c:var(--blue);top:17%;right:6%" aria-hidden="true"></i>
<i class="pl" style="--c:var(--yellow);top:34%;right:3%;width:16px;height:16px" aria-hidden="true"></i>
<i class="pl" style="--c:var(--red);top:9%;right:44%;width:14px;height:14px" aria-hidden="true"></i>
<div class="hero-in">
<div class="copy">
<div class="lockup" aria-label="Qai and Hugging Face">
<svg class="qai" viewBox="0 0 316 166" role="img" aria-label="Qai"><use href="#qai"/></svg>
<span class="div" aria-hidden="true"></span>
<span class="hfw"><svg class="hf" viewBox="0 0 95 88" role="img" aria-label="Hugging Face"><use href="#hf"/></svg><span class="hf-name">Hugging Face</span></span>
</div>
<h1><span class="h-top">Hackathon</span><span class="o1"><span class="big">O1</span><span class="tag">Code with a hug</span></span></h1>
<p class="kicker">Build it in 48 hours</p>
<p class="sub">The Qai × Hugging Face Hackathon: 48 hours, in person in Doha. The challenge drops at kickoff. You bring the team and the energy.</p>
<ul class="facts">
<li>Thu 5 to Sat 7 Nov</li>
<li>In person at M7, Doha</li>
<li>Teams of 2 to 4</li>
<li>Application only</li>
</ul>
<div class="count" id="count" role="timer" aria-label="Time until kickoff">
<span class="lead" id="countLead">Kickoff in</span>
<span class="u"><span class="n" id="cd-d">--</span><span class="l">days</span></span>
<span class="u"><span class="n" id="cd-h">--</span><span class="l">hours</span></span>
<span class="u"><span class="n" id="cd-m">--</span><span class="l">min</span></span>
<span class="u"><span class="n" id="cd-s">--</span><span class="l">sec</span></span>
</div>
<span class="sr">Kickoff is Thursday 5 November 2026 at 5 PM Doha time.</span>
<div><a class="cta" href="#form">Start your application <span aria-hidden="true">↓</span></a></div>
</div>
<div class="stack-col" aria-hidden="true">
<div class="stack">
<canvas id="scene" width="500" height="520"></canvas>
<p class="scene-hint">Click a block to make it jump. Drag to spin. Visit all three for a surprise.</p>
<div class="dots" id="dots" aria-hidden="true"><i></i><i></i><i></i></div>
</div>
</div>
</div>
</header>
<main class="wrap">
<section class="how" aria-label="How it works">
<div><span class="hn" aria-hidden="true">O1</span><h2>Apply</h2><p>Places are limited and application-based. Tell us why your team should be in the room.</p></div>
<div><span class="hn" aria-hidden="true">O2</span><h2>Build</h2><p>Ideate and build a working solution over 48 hours, in person in Doha. The challenge drops at kickoff.</p></div>
<div><span class="hn" aria-hidden="true">O3</span><h2>Pitch</h2><p>Projects are built with open-source tools on Hugging Face and submitted as a live demo.</p></div>
</section>
<section class="when" aria-label="When and where">
<div class="when-col">
<h2>When</h2>
<div class="date">5 – 7 November 2026</div>
<dl class="times">
<div><dt>Starts</dt><dd>Thursday, 5:00 PM</dd></div>
<div><dt>Ends</dt><dd>Saturday, 5:00 PM</dd></div>
</dl>
<p class="dim">All times are Doha time.</p>
</div>
<div class="when-col">
<h2>Where</h2>
<div class="place">Nestwork Msheireb&nbsp;-&nbsp;M7</div>
<p>Abdulla Bin Thani St, Doha, Qatar</p>
<a class="maps" href="https://www.google.com/maps/search/?api=1&amp;query=Nestwork+M7+Abdulla+Bin+Thani+St+Doha+Qatar" target="_blank" rel="noopener">Open in Google Maps <span aria-hidden="true">→</span></a>
</div>
</section>
<form id="form" novalidate>
<input type="text" name="company_website" tabindex="-1" autocomplete="off" aria-hidden="true" style="position:absolute;left:-9999px;width:1px;height:1px;opacity:0">
<!-- 1. Team -->
<section class="block" id="sec-team" data-sec="0">
<div class="sec-head"><span class="num" aria-hidden="true">O1</span><h2 class="t">Your team</h2><svg class="shape" data-k="0" aria-hidden="true" focusable="false"></svg></div>
<p class="sec-desc">Come as a team, or solo or as a pair and we'll help match you with others.</p>
<div class="fieldrow">
<label class="field-label" for="teamName">Team name <span class="opt">(or a working title, you can change it later)</span></label>
<input type="text" id="teamName" name="teamName" placeholder="e.g. The Falcons">
</div>
<div class="fieldrow">
<span class="field-label" id="sizeLbl">How many are you?</span>
<div class="choices" role="radiogroup" aria-labelledby="sizeLbl">
<label class="chip"><input type="radio" name="size" value="1"><span>Solo, match me</span></label>
<label class="chip"><input type="radio" name="size" value="2"><span>2</span></label>
<label class="chip"><input type="radio" name="size" value="3" checked><span>3</span></label>
<label class="chip"><input type="radio" name="size" value="4"><span>4</span></label>
</div>
<label class="check" style="margin-top:14px" id="matchWrap">
<input type="checkbox" name="openToMatch">
<span>We're open to being matched with other applicants to complete our team</span>
</label>
</div>
<div id="members"></div>
</section>
<!-- 2. Skills -->
<section class="block" id="sec-skills" data-sec="1">
<div class="sec-head"><span class="num" aria-hidden="true">O2</span><h2 class="t">Skills &amp; experience</h2><svg class="shape" data-k="1" aria-hidden="true" focusable="false"></svg></div>
<p class="sec-desc">Help us see the shape of your team.</p>
<div class="fieldrow">
<span class="field-label" id="areasLbl">Which areas does your team cover? <span class="opt">(select all that apply)</span></span>
<div class="choices" role="group" aria-labelledby="areasLbl">
<label class="chip"><input type="checkbox" name="areas" value="AI/ML"><span>AI / Machine Learning</span></label>
<label class="chip"><input type="checkbox" name="areas" value="GenAI/LLMs"><span>Generative AI / LLMs</span></label>
<label class="chip"><input type="checkbox" name="areas" value="Agents"><span>AI Agents</span></label>
<label class="chip"><input type="checkbox" name="areas" value="SWE"><span>Software Engineering</span></label>
<label class="chip"><input type="checkbox" name="areas" value="Data"><span>Data Science</span></label>
<label class="chip"><input type="checkbox" name="areas" value="Product"><span>Product</span></label>
<label class="chip"><input type="checkbox" name="areas" value="Design"><span>UX / UI Design</span></label>
<label class="chip"><input type="checkbox" name="areas" value="Cloud"><span>Cloud / Infra</span></label>
<label class="chip"><input type="checkbox" name="areas" value="Research"><span>Research</span></label>
<label class="chip"><input type="checkbox" name="areas" value="Other"><span>Other</span></label>
</div>
</div>
<div class="fieldrow">
<label class="field-label" for="about">Tell us about your team <span class="count-w"><span id="c-about">0</span>/200 words</span></label>
<div class="hint" style="margin:-2px 0 8px">What brings you together, and what makes you strong for a 48-hour sprint?</div>
<textarea id="about" name="about" maxlength="1400" data-count="c-about" data-words="200"></textarea>
</div>
<hr class="soft">
<div class="fieldrow">
<label class="field-label" for="project">Most relevant project you've built <span class="count-w"><span id="c-project">0</span>/200 words</span></label>
<div class="hint" style="margin:-2px 0 8px">A product, startup, research, uni project or past hackathon. Anything that shows what you can ship.</div>
<textarea id="project" name="project" maxlength="1400" data-count="c-project" data-words="200"></textarea>
</div>
<div class="fieldrow">
<label class="field-label" for="portfolio">GitHub / portfolio link</label>
<input type="url" id="portfolio" name="portfolio" placeholder="https://github.com/…" required>
<div class="hint">Your strongest signal for selection. Please share at least one.</div>
</div>
<div class="fieldrow" style="margin-bottom:0">
<span class="field-label" id="hackLbl">Has anyone on the team done a hackathon before?</span>
<div class="choices" role="radiogroup" aria-labelledby="hackLbl">
<label class="chip"><input type="radio" name="hackedBefore" value="yes"><span>Yes</span></label>
<label class="chip"><input type="radio" name="hackedBefore" value="no"><span>No, first time</span></label>
</div>
</div>
</section>
<!-- 3. Idea -->
<section class="block" id="sec-idea" data-sec="2">
<div class="sec-head"><span class="num" aria-hidden="true">O3</span><h2 class="t">An idea you'd love to explore</h2><svg class="shape" data-k="2" aria-hidden="true" focusable="false"></svg></div>
<p class="sec-desc">Just to hear how you think. A sentence or two is plenty, and it can totally change once you're in the room.</p>
<div class="note" style="margin-bottom:20px">
<div>Answer in your own words. Fully AI-generated responses with no personal voice will likely be rejected.</div>
</div>
<div class="fieldrow">
<label class="field-label" for="idea">One agent, project or idea you'd want to build at the hackathon</label>
<textarea id="idea" name="idea" placeholder="e.g. an agent that handles the whole 'newcomer in Qatar' admin run, or an offline Arabic assistant that works with no internet…" style="min-height:90px"></textarea>
</div>
<div class="fieldrow" style="margin-bottom:0">
<label class="field-label" for="why">Why do you want in? <span class="opt">(optional)</span></label>
<textarea id="why" name="why" style="min-height:80px"></textarea>
</div>
</section>
<!-- 4. Logistics -->
<section class="block" id="sec-logi" data-sec="3">
<div class="sec-head"><span class="num" aria-hidden="true">O4</span><h2 class="t">Logistics &amp; commitment</h2><svg class="shape" data-k="3" aria-hidden="true" focusable="false"></svg></div>
<p class="sec-desc">The practical bits so we can look after you on the day.</p>
<div class="note">
<div>The hackathon is in person in Doha for the full <b>48 hours</b>, from Thursday 5 November at 5:00 PM.</div>
</div>
<div class="fieldrow" style="margin-top:18px">
<label class="check" style="margin-bottom:0">
<input type="checkbox" name="available" required>
<span>All members can attend <b>in person for the full 48 hours</b> on those dates.</span>
</label>
</div>
<div class="grid2">
<div class="fieldrow">
<label class="field-label" for="inQatar">Are you based in Qatar?</label>
<select id="inQatar" name="inQatar">
<option value="">Select…</option>
<option>Yes, based in Qatar</option>
<option>No, travelling in</option>
</select>
</div>
<div class="fieldrow">
<label class="field-label" for="emergency">Emergency contact <span class="opt">(name and number)</span></label>
<input type="text" id="emergency" name="emergency" placeholder="Name, +974 …">
</div>
</div>
<div class="fieldrow" style="margin-bottom:0">
<label class="field-label" for="dietary">Dietary requirements or allergies <span class="opt">(optional)</span></label>
<input type="text" id="dietary" name="dietary" placeholder="e.g. vegetarian, nut allergy. We'll be feeding you!">
</div>
</section>
<!-- 5. Consent -->
<section class="block" id="sec-consent" data-sec="4">
<div class="sec-head"><span class="num" aria-hidden="true">O5</span><h2 class="t">Almost there</h2><svg class="shape" data-k="4" aria-hidden="true" focusable="false"></svg></div>
<p class="sec-desc">A few confirmations, then you're done.</p>
<label class="check"><input type="checkbox" name="c1" required><span>I understand applying doesn't guarantee a place. Teams are selected by the organizers.</span></label>
<label class="check"><input type="checkbox" name="c2" required><span>All members are committed to taking part if selected.</span></label>
<label class="check"><input type="checkbox" name="c3" required><span>I understand projects are built on open-source / Hugging Face and submitted as a working demo.</span></label>
<label class="check" id="mateWrap"><input type="checkbox" name="c4" required><span>My teammates know I'm sharing their details with the organizers.</span></label>
<label class="check"><input type="checkbox" name="photoConsent"><span>I consent to photos and video from the event being used for promotion. <span class="opt">(optional)</span></span></label>
<div class="fieldrow" style="margin:20px 0 0">
<label class="field-label" for="extra">Anything else we should know? <span class="opt">(optional)</span></label>
<textarea id="extra" name="extra" style="min-height:80px"></textarea>
</div>
</section>
<div class="submit-wrap">
<button type="submit" class="submit" id="submitBtn">Submit application</button>
<div class="msg" id="msg" role="alert"></div>
<div class="foot">Questions? Email <a href="mailto:info@trustqai.com">info@trustqai.com</a>. We'd love to have you there.</div>
</div>
</form>
<div class="done" id="done" role="status" tabindex="-1">
<div class="done-art" aria-hidden="true">
<svg class="emo" viewBox="0 0 95 88" focusable="false"><use href="#hf"/></svg>
<svg class="ds" data-s="ring" style="--c:#EE3124;--d:.15s;left:8%;top:14%" viewBox="0 0 40 40"></svg>
<svg class="ds" data-s="plus" style="--c:#A1BADA;--d:.3s;right:10%;top:8%" viewBox="0 0 40 40"></svg>
<svg class="ds" data-s="half" style="--c:#FFD21F;--d:.45s;left:2%;bottom:10%" viewBox="0 0 40 40"></svg>
<svg class="ds" data-s="block" style="--c:#EE3124;--d:.6s;right:4%;bottom:14%" viewBox="0 0 40 40"></svg>
</div>
<h2>Application received</h2>
<p>Thanks for applying to the Qai × Hugging Face Hackathon. We'll review it and get back to you by email.</p>
</div>
</main>
<footer>
<svg class="strip" aria-hidden="true" focusable="false">
<defs>
<pattern id="shapepat" width="168" height="44" patternUnits="userSpaceOnUse">
<g transform="translate(6,6) scale(.8)" fill="#EE3124" fill-rule="evenodd"><path d="M4 20a16 16 0 1 0 32 0a16 16 0 1 0 -32 0Z M12 20a8 8 0 1 0 16 0a8 8 0 1 0 -16 0Z"/></g>
<g transform="translate(48,6) scale(.8)" fill="#FFD21F"><path d="M16 4h8v12h12v8H24v12h-8V24H4v-8h12z"/></g>
<g transform="translate(90,6) scale(.8)" fill="#A1BADA"><path d="M12 2A18 18 0 0 1 12 38V28A8 8 0 0 0 12 12Z"/></g>
<g transform="translate(130,6) scale(.8)" fill="#EE3124"><path d="M6 6h28v13h-9v3h9v12H6V22h9v-3H6z"/></g>
</pattern>
</defs>
<rect width="100%" height="44" fill="url(#shapepat)"/>
</svg>
<div class="foot-grid">
<div class="foot-brand">
<div class="lockup mini" aria-label="Qai and Hugging Face">
<svg class="qai" viewBox="0 0 316 166" role="img" aria-label="Qai"><use href="#qai"/></svg>
<span class="div" aria-hidden="true"></span>
<span class="hfw"><svg class="hf" viewBox="0 0 95 88" role="img" aria-label="Hugging Face"><use href="#hf"/></svg><span class="hf-name">Hugging Face</span></span>
</div>
<p>Qai × Hugging Face Hackathon<br>Doha, 5 to 7 November 2026</p>
</div>
<div class="foot-col">
<h3>Contact</h3>
<a href="mailto:info@trustqai.com">info@trustqai.com</a>
</div>
<div class="foot-col">
<h3>Websites</h3>
<a href="https://www.trustqai.com" target="_blank" rel="noopener">trustqai.com</a>
<a href="https://huggingface.co" target="_blank" rel="noopener">huggingface.co</a>
</div>
</div>
</footer>
<script>
(function(){
/* Set this to your backend URL to collect submissions (Google Sheet script, Space endpoint, etc.).
While it is empty the form runs in preview mode: it validates, then shows the confirmation. */
var SUBMIT_ENDPOINT = 'https://script.google.com/macros/s/AKfycbxMcV2_IaYx95-ZoEu4xw1Q8GhH92DzYpjh5d51mY1lTZMMTTveFOa6xD-OdPFzGvKdgw/exec';
var reduce = matchMedia('(prefers-reduced-motion: reduce)').matches;
/* ---------- kit shapes: ring, plus, half-moon, block ---------- */
var SHP={
ring:'M4 20a16 16 0 1 0 32 0a16 16 0 1 0 -32 0Z M12 20a8 8 0 1 0 16 0a8 8 0 1 0 -16 0Z',
plus:'M16 4h8v12h12v8H24v12h-8V24H4v-8h12z',
half:'M12 2A18 18 0 0 1 12 38V28A8 8 0 0 0 12 12Z',
block:'M6 6h28v13h-9v3h9v12H6V22h9v-3H6z'
};
function shapeInner(s){ return s==='hug' ? '<use href="#hf"/>' : '<path d="'+SHP[s]+'" fill="currentColor" fill-rule="evenodd"/>'; }
/* one shape per section: team = ring, skills = plus, idea = half-moon, logistics = block, final = the hugger */
var ORDER=[{s:'ring',c:'#EE3124'},{s:'plus',c:'#A1BADA'},{s:'half',c:'#FFD21F'},{s:'block',c:'#EE3124'},{s:'hug',c:'#FFD21F'}];
/* section headers: the shape for each step spins in as you reach it */
document.querySelectorAll('.sec-head .shape').forEach(function(el){
var o=ORDER[+el.getAttribute('data-k')];
el.setAttribute('viewBox',o.s==='hug'?'0 0 95 88':'0 0 40 40');
el.style.setProperty('--c',o.c);
el.innerHTML=shapeInner(o.s);
});
(function(){
var els=document.querySelectorAll('.sec-head .shape');
if(reduce||!('IntersectionObserver' in window)) return;
els.forEach(function(e){ e.classList.add('pre'); });
var io=new IntersectionObserver(function(en){
en.forEach(function(x){ if(x.isIntersecting){ x.target.classList.remove('pre'); x.target.classList.add('in'); io.unobserve(x.target); } });
},{threshold:.8,rootMargin:'0px 0px -16% 0px'});
els.forEach(function(e){ io.observe(e); });
})();
/* confirmation art */
document.querySelectorAll('.done-art .ds').forEach(function(el){ el.innerHTML=shapeInner(el.getAttribute('data-s')); });
/* sticky bar: the five shapes fill with colour as each section is completed */
var N=5, pshapes=document.getElementById('pshapes'), pState=[];
ORDER.forEach(function(o,i){
var s=document.createElementNS('http://www.w3.org/2000/svg','svg');
s.setAttribute('class','pshape'+(o.s==='hug'?' emo':''));
s.setAttribute('viewBox',o.s==='hug'?'0 0 95 88':'0 0 40 40');
s.style.setProperty('--c',o.c);
s.innerHTML=shapeInner(o.s);
pshapes.appendChild(s);
});
function setCube(i,done){
var el=pshapes.children[i];
if(!el || pState[i]===done) return;
el.setAttribute('data-done',done?'1':'0');
if(done && pState[i]===false){ el.classList.remove('pop'); void el.getBoundingClientRect(); el.classList.add('pop'); }
pState[i]=done;
}
/* ---------- hero scene: the box cut in three, the emoji hops between the blocks ---------- */
(function(){
var cv=document.getElementById('scene'); if(!cv||!cv.getContext) return;
var ctx=cv.getContext('2d');
var CY=1.5, TOP=3, FL=0.3, IX=0.85, IZ=1.25, ZH=1.5, CX0=-1.1, CX1=1.1;
var PAL={
red: {b:[247,76,60], d:[146,26,20]},
blue: {b:[182,206,237],d:[100,128,166]},
navy: {b:[64,94,122], d:[20,36,52]},
navy2:{b:[52,80,106], d:[16,30,44]},
rim: {b:[232,238,244],d:[148,164,180]},
inner:{b:[106,144,170],d:[26,48,66]},
floor:{b:[16,32,46], d:[16,32,46]}
};
var COL={red:'#EE3124',yellow:'#FFD21F',blue:'#A1BADA'};
var CONF=[['red','red','yellow'],['yellow','blue','red'],['blue','blue','yellow']];
var EMO=document.createElement('canvas'); EMO.width=300; EMO.height=Math.round(300*88/95);
(function(){
var c=EMO.getContext('2d'); c.scale(EMO.width/95,EMO.height/88);
document.querySelectorAll('#hf path').forEach(function(el){
c.fillStyle=el.getAttribute('fill')||'#000';
c.fill(new Path2D(el.getAttribute('d')),el.getAttribute('fill-rule')==='evenodd'?'evenodd':'nonzero');
});
})();
var P2D={}; Object.keys(SHP).forEach(function(k){ P2D[k]=new Path2D(SHP[k]); });
var SLAB={0:{x0:-1.8,x1:-1.1,pal:'red'}, 2:{x0:1.1,x1:1.8,pal:'blue'}};
var LX=-0.4, LY=0.8, LZ=0.45;
function mix(p,q,t){ return [p[0]+(q[0]-p[0])*t, p[1]+(q[1]-p[1])*t, p[2]+(q[2]-p[2])*t]; }
function rgb(c){ return 'rgb('+Math.round(c[0])+','+Math.round(c[1])+','+Math.round(c[2])+')'; }
function inPoly(p,x,y){
var inside=false, j=p.length-2, i;
for(i=0;i<p.length;i+=2){
var xi=p[i], yi=p[i+1], xj=p[j], yj=p[j+1];
if(((yi>y)!==(yj>y)) && (x<(xj-xi)*(y-yi)/(yj-yi)+xi)) inside=!inside;
j=i;
}
return inside;
}
var W=300, H=300, dpr=1, S=50;
var clock=0, yaw=0.35, pitch=0.62, yawVel=0, dragging=false, moved=0, lastX=0, lastY=0, lastT=0;
var px=-1e4, py=-1e4, par=0, visible=true, active=true, raf=0, last=0, hits=[];
var bs={x:reduce?0:-0.26, v:0};
var em={a:reduce?1:0, aV:0, started:reduce, hov:0, rot:0, rotV:0, sq:0, sqV:0, spin:0};
var lift=[0,0,0], lv=[0,0,0], hover=-1, home=1, jump=null, visited=[false,true,false], nextAuto=3.6, waves=[];
var ring={spin:0, spinV:0}, emPos={x:W/2,y:H/2}, parts=[];
var dotEls=document.querySelectorAll('#dots i');
var floaters=[
{k:'ring', c:'red', fx:.88, fy:.10, s:.064, rot:0, vr:.45, dep:1.0, ph:0},
{k:'half', c:'yellow', fx:.09, fy:.10, s:.060, rot:.6, vr:-.5, dep:.8, ph:1.7},
{k:'plus', c:'blue', fx:.91, fy:.82, s:.056, rot:0, vr:.6, dep:1.2, ph:3.1},
{k:'ring', c:'yellow', fx:.09, fy:.82, s:.04, rot:0, vr:0, dep:.7, ph:4.3},
{k:'block',c:'red', fx:.72, fy:.95, s:.05, rot:-.2, vr:.2, dep:.9, ph:5.0}
];
floaters.forEach(function(f){ f.ox=0; f.oy=0; f.vx=0; f.vy=0; });
function syncDots(){ for(var i=0;i<dotEls.length;i++) dotEls[i].setAttribute('data-on',visited[i]?'1':'0'); }
syncDots();
function size(){
var r=cv.getBoundingClientRect(); W=r.width||300; H=r.height||300;
dpr=Math.min(2,window.devicePixelRatio||1);
cv.width=Math.round(W*dpr); cv.height=Math.round(H*dpr);
ctx.setTransform(dpr,0,0,dpr,0,0);
wake();
}
/* where the emoji stands for each block */
function homePos(k){
if(k===1) return {x:0, y:2.25+0.5*em.hov+lift[1]};
return {x:k===0?-1.45:1.45, y:TOP+lift[k]+0.66};
}
function curPos(){
if(jump){
var u=Math.min(1,(clock-jump.t0)/jump.dur), t=homePos(jump.k);
return {x:jump.fx+(t.x-jump.fx)*u, y:jump.fy+(t.y-jump.fy)*u+4*jump.h*u*(1-u), u:u};
}
var h=homePos(home); h.u=-1; return h;
}
function confetti(k,n,spread){
var ex=emPos.x, ey=emPos.y, keys=['ring','plus','half','block'], cols=CONF[k];
for(var i=0;i<n;i++){
var ang=-Math.PI/2+(Math.random()-0.5)*(spread||2.9), sp=190+Math.random()*320;
parts.push({k:i%5===4?'emo':keys[i%4], c:cols[i%3], x:ex, y:ey, vx:Math.cos(ang)*sp, vy:Math.sin(ang)*sp,
rot:Math.random()*6, vr:(Math.random()-0.5)*10, age:0, life:1.2+Math.random()*0.7, size:14+Math.random()*14});
}
}
function kick(ex,ey,power){
floaters.forEach(function(f){
var dx=f.fx*W-ex, dy=f.fy*H-ey, d=Math.sqrt(dx*dx+dy*dy)||1;
f.vx+=dx/d*power; f.vy+=dy/d*power;
});
}
function hopTo(k){
if(jump) return;
if(reduce){ home=k; visited[k]=true; syncDots(); return; }
var f=curPos();
jump={t0:clock, dur:0.6+0.08*Math.abs(k-home), fx:f.x, fy:f.y, k:k, h:(k===home?2.1:1.8), dir:(k>=home?1:-1)};
em.sq=-0.22; em.sqV=0;
nextAuto=clock+3.6+Math.random()*2;
}
function land(){
var k=jump.k;
home=k; jump=null; em.spin=0;
lv[k]-=3.4; em.sq=-0.3; em.sqV=0; bs.v-=0.4;
confetti(k,12,2.9); kick(emPos.x,emPos.y,260);
if(!visited[k]){ visited[k]=true; syncDots(); }
if(visited[0]&&visited[1]&&visited[2]) celebrate();
}
/* the surprise: all three blocks ripple up, the box spins, a big burst */
function celebrate(){
for(var k=0;k<3;k++) waves.push({t:clock+0.15+k*0.14,k:k});
yawVel+=7; ring.spinV+=14;
confetti(home,34,6.2); kick(emPos.x,emPos.y,520);
visited=[false,false,false]; visited[home]=true;
setTimeout(syncDots,900);
}
function update(dt){
clock+=dt;
var over=px>-1e3, anim=false;
par+=(((over?(px/W-0.5):0))-par)*Math.min(1,dt*3);
if(!dragging){
/* idle: a slow sway around the front view, so the three bands stay on show; a drag or the surprise spins it and it eases back */
yaw+=yawVel*dt;
yawVel*=Math.exp(-2.2*dt);
if(Math.abs(yawVel)<0.002) yawVel=0;
if(!reduce){
var dl=(0.2+Math.sin(clock*0.45)*0.5)-yaw; dl=Math.atan2(Math.sin(dl),Math.cos(dl));
yaw+=dl*Math.min(1,dt*0.9);
}
if(!reduce || yawVel!==0) anim=true;
} else { anim=true; }
var tgtHov=(over && home===1 && !jump)?1:0;
em.hov+=(tgtHov-em.hov)*Math.min(1,dt*(reduce?60:6));
if(Math.abs(em.hov-tgtHov)>0.01) anim=true;
for(var k=0;k<3;k++){
var tl=(hover===k && !dragging && !reduce)?0.24:0;
lv[k]+=(-130*(lift[k]-tl)-9*lv[k])*dt; lift[k]+=lv[k]*dt;
if(Math.abs(lv[k])>0.01 || Math.abs(lift[k]-tl)>0.002) anim=true;
}
if(!reduce){
bs.v+=(-170*bs.x-9*bs.v)*dt; bs.x+=bs.v*dt;
if(Math.abs(bs.x)>0.0005 || Math.abs(bs.v)>0.01) anim=true;
if(!em.started){ if(clock>0.55){ em.started=true; em.a=0.001; em.aV=0; } anim=true; }
if(em.started){
em.aV+=(-140*(em.a-1)-9*em.aV)*dt; em.a+=em.aV*dt;
if(Math.abs(em.a-1)>0.002 || Math.abs(em.aV)>0.01) anim=true;
}
if(jump){
var u=(clock-jump.t0)/jump.dur;
em.spin=jump.dir*Math.PI*2*(1-Math.pow(1-Math.min(1,u),2));
if(u>=1) land();
}
if(!jump && !dragging && !over && em.started && clock>nextAuto){
var opts=[0,1,2].filter(function(i){return i!==home;});
hopTo(opts[Math.floor(Math.random()*opts.length)]);
}
for(var w=waves.length-1;w>=0;w--){ if(clock>=waves[w].t){ lv[waves[w].k]+=7.5; waves.splice(w,1); } }
em.sqV+=(-220*em.sq-12*em.sqV)*dt; em.sq+=em.sqV*dt;
if(Math.abs(em.sq)>0.002 || Math.abs(em.sqV)>0.02) anim=true;
var dxn=over?Math.max(-1,Math.min(1,(px-W/2)/(W/2))):0;
var tr=dxn*0.25 + Math.sin(clock*1.3)*0.03 + Math.max(-0.3,Math.min(0.3,-yawVel*0.04));
em.rotV+=(-130*(em.rot-tr)-9*em.rotV)*dt; em.rot+=em.rotV*dt;
ring.spin+=ring.spinV*dt; ring.spinV*=Math.exp(-1.8*dt);
floaters.forEach(function(f){
f.vx+=(-38*f.ox-5.5*f.vx)*dt; f.ox+=f.vx*dt;
f.vy+=(-38*f.oy-5.5*f.vy)*dt; f.oy+=f.vy*dt;
f.rot+=f.vr*dt;
});
for(var q=parts.length-1;q>=0;q--){
var pt=parts[q]; pt.age+=dt;
if(pt.age>=pt.life){ parts.splice(q,1); continue; }
pt.vy+=420*dt; pt.x+=pt.vx*dt; pt.y+=pt.vy*dt; pt.rot+=pt.vr*dt;
pt.vx*=Math.exp(-0.6*dt);
}
anim=true;
}
active=anim;
}
function drawShape(k,color,x,y,size,rot,alpha){
ctx.save();
ctx.globalAlpha=alpha==null?1:alpha;
ctx.translate(x,y); ctx.rotate(rot); ctx.scale(size/40,size/40); ctx.translate(-20,-20);
ctx.fillStyle=color; ctx.fill(P2D[k],'evenodd');
ctx.restore();
}
function drawRing3D(x,y,R,ang,k){
var th=R*0.17, i;
function annulus(ox,oy){
var p=new Path2D(), cs=Math.cos(ang), sn=Math.sin(ang);
p.moveTo(x+ox+R*cs,y+oy+R*sn); p.ellipse(x+ox,y+oy,R,R*k,ang,0,Math.PI*2);
p.moveTo(x+ox+R*0.58*cs,y+oy+R*0.58*sn); p.ellipse(x+ox,y+oy,R*0.58,R*k*0.58,ang,0,Math.PI*2);
return p;
}
ctx.save();
for(i=1;i<=4;i++){ ctx.fillStyle=i===4?'#2C4358':'#344C63'; ctx.fill(annulus(-th*0.49*i/4,th*i/4),'evenodd'); }
var g=ctx.createLinearGradient(x-R,y-R*k,x+R,y+R*k); g.addColorStop(0,'#F4F8FB'); g.addColorStop(1,'#A1BADA');
ctx.fillStyle=g; ctx.fill(annulus(0,0),'evenodd');
ctx.restore();
}
function draw(){
ctx.clearRect(0,0,W,H);
S=Math.min(W/6.3,H/7.2);
var cx=W/2, cy0=H*0.62;
var cyw=Math.cos(yaw), syw=Math.sin(yaw), cp=Math.cos(pitch), sp=Math.sin(pitch), sc=1+bs.x;
function P(x,y,z){
x*=sc; z*=sc; y=(y-CY)*sc;
var x1=x*cyw+z*syw, z1=-x*syw+z*cyw, y2=y*cp-z1*sp;
return [cx+x1*S, cy0-y2*S];
}
function nInfo(nx,ny,nz){
var nx1=nx*cyw+nz*syw, nz1=-nx*syw+nz*cyw, ny2=ny*cp-nz1*sp, nz2=ny*sp+nz1*cp;
var dot=nx1*LX+ny2*LY+nz2*LZ;
return {vis:nz2>0.001, t:Math.min(1,Math.max(0,dot)*1.125)};
}
function face(q,n,palKey,seam,k){
var inf=nInfo(n[0],n[1],n[2]); if(!inf.vis) return;
var pal=PAL[palKey], pts=[], i, dy=lift[k];
ctx.beginPath();
for(i=0;i<4;i++){ var p=P(q[i][0],q[i][1]+dy,q[i][2]); pts.push(p[0],p[1]); if(i) ctx.lineTo(p[0],p[1]); else ctx.moveTo(p[0],p[1]); }
ctx.closePath();
var col=rgb(mix(pal.d,pal.b,inf.t));
ctx.fillStyle=col; ctx.fill();
ctx.strokeStyle=seam?col:'rgba(0,10,20,.34)'; ctx.lineWidth=1; ctx.lineJoin='round'; ctx.stroke();
hits.push({k:k,p:pts});
}
function zOf(x,z){ return -x*syw+z*cyw; }
function slab(k){
var s=SLAB[k], x0=s.x0, x1=s.x1;
face([[x0,TOP,ZH],[x1,TOP,ZH],[x1,0,ZH],[x0,0,ZH]],[0,0,1],s.pal,false,k);
face([[x1,TOP,-ZH],[x0,TOP,-ZH],[x0,0,-ZH],[x1,0,-ZH]],[0,0,-1],s.pal,false,k);
if(k===0) face([[x0,TOP,-ZH],[x0,TOP,ZH],[x0,0,ZH],[x0,0,-ZH]],[-1,0,0],s.pal,false,k);
else face([[x1,TOP,ZH],[x1,TOP,-ZH],[x1,0,-ZH],[x1,0,ZH]],[1,0,0],s.pal,false,k);
face([[x0,TOP,-ZH],[x1,TOP,-ZH],[x1,TOP,ZH],[x0,TOP,ZH]],[0,1,0],'rim',true,k);
}
function wall(name){
if(name==='front'){
face([[CX0,TOP,ZH],[CX1,TOP,ZH],[CX1,0,ZH],[CX0,0,ZH]],[0,0,1],'navy',false,1);
face([[-IX,TOP,IZ],[IX,TOP,IZ],[IX,FL,IZ],[-IX,FL,IZ]],[0,0,-1],'inner',false,1);
face([[CX0,TOP,IZ],[CX1,TOP,IZ],[CX1,TOP,ZH],[CX0,TOP,ZH]],[0,1,0],'rim',true,1);
} else if(name==='back'){
face([[CX1,TOP,-ZH],[CX0,TOP,-ZH],[CX0,0,-ZH],[CX1,0,-ZH]],[0,0,-1],'navy2',false,1);
face([[-IX,TOP,-IZ],[IX,TOP,-IZ],[IX,FL,-IZ],[-IX,FL,-IZ]],[0,0,1],'inner',false,1);
face([[CX0,TOP,-ZH],[CX1,TOP,-ZH],[CX1,TOP,-IZ],[CX0,TOP,-IZ]],[0,1,0],'rim',true,1);
} else if(name==='left'){
face([[-IX,TOP,-IZ],[-IX,TOP,IZ],[-IX,FL,IZ],[-IX,FL,-IZ]],[1,0,0],'inner',false,1);
face([[CX0,TOP,-ZH],[-IX,TOP,-ZH],[-IX,TOP,ZH],[CX0,TOP,ZH]],[0,1,0],'rim',true,1);
} else {
face([[IX,TOP,-IZ],[IX,TOP,IZ],[IX,FL,IZ],[IX,FL,-IZ]],[-1,0,0],'inner',false,1);
face([[IX,TOP,-ZH],[CX1,TOP,-ZH],[CX1,TOP,ZH],[IX,TOP,ZH]],[0,1,0],'rim',true,1);
}
}
/* dashed circle behind the box */
ctx.save();
ctx.setLineDash([5,8]); ctx.lineDashOffset=-clock*9; ctx.lineWidth=1.3; ctx.strokeStyle='rgba(255,210,31,.75)';
ctx.beginPath(); ctx.arc(cx,cy0,S*3.25,0,Math.PI*2); ctx.stroke();
ctx.restore();
/* flat shapes + the 3D ring */
floaters.forEach(function(f){
var bob=reduce?0:Math.sin(clock*0.9+f.ph)*5;
drawShape(f.k,COL[f.c],f.fx*W+f.ox-par*30*f.dep, f.fy*H+f.oy+bob, f.s*W, f.rot);
});
var rk=0.4+(reduce?0:0.07*Math.sin(clock*0.7));
drawRing3D(W*0.18-par*20, H*0.3+(reduce?0:Math.sin(clock*0.8)*5), W*0.1, -0.55+(reduce?0:Math.sin(clock*0.5)*0.12)+ring.spin, rk);
/* the three blocks, sorted by depth, with the emoji slotted in */
hits=[];
var items=[
{z:zOf(-1.45,0), f:function(){ slab(0); }},
{z:zOf(1.45,0), f:function(){ slab(2); }},
{z:zOf(0,1.375), f:function(){ wall('front'); }},
{z:zOf(0,-1.375),f:function(){ wall('back'); }},
{z:zOf(-0.975,0),f:function(){ wall('left'); }},
{z:zOf(0.975,0), f:function(){ wall('right'); }}
].sort(function(A,B){ return A.z-B.z; });
/* floor of the middle block */
(function(){
var q=[[-IX,FL,-IZ],[IX,FL,-IZ],[IX,FL,IZ],[-IX,FL,IZ]], i, dy=lift[1];
ctx.beginPath();
for(i=0;i<4;i++){ var p=P(q[i][0],q[i][1]+dy,q[i][2]); if(i) ctx.lineTo(p[0],p[1]); else ctx.moveTo(p[0],p[1]); }
ctx.closePath(); ctx.fillStyle='rgb(16,32,46)'; ctx.fill();
})();
var cp2=curPos(), inside=(cp2.y<2.7 && Math.abs(cp2.x)<0.95);
var bob=reduce?0:Math.sin(clock*2.2)*0.03;
function emoji(){
if(!(em.started && em.a>0.002)) return;
var bp=P(cp2.x,cp2.y+(home===1&&!jump?0:bob),0);
var ew=S*1.3*sc*em.a*(1+0.04*em.hov), eh=ew*88/95;
var vy=0; if(jump){ var uu=cp2.u, dur=jump.dur; vy=(4*jump.h*(1-2*uu))/dur; }
var syy=Math.max(0.55,1+Math.max(-0.1,Math.min(0.18,vy*0.02))+em.sq), sxs=1-em.sq*0.6;
ctx.save();
ctx.translate(bp[0],bp[1]); ctx.rotate(em.rot+em.spin); ctx.scale(sxs,syy);
ctx.drawImage(EMO,-ew/2,-eh/2,ew,eh);
ctx.restore();
emPos.x=bp[0]; emPos.y=bp[1];
}
var i=0;
for(;i<items.length && items[i].z<0;i++) items[i].f();
if(inside) emoji();
for(;i<items.length;i++) items[i].f();
if(!inside) emoji();
/* confetti */
for(var r=0;r<parts.length;r++){
var pa=parts[r], al=Math.max(0,1-Math.pow(pa.age/pa.life,2));
if(pa.k==='emo'){
ctx.save(); ctx.globalAlpha=al; ctx.translate(pa.x,pa.y); ctx.rotate(pa.rot);
ctx.drawImage(EMO,-pa.size/2,-pa.size*88/95/2,pa.size,pa.size*88/95); ctx.restore();
} else { drawShape(pa.k,COL[pa.c],pa.x,pa.y,pa.size,pa.rot,al); }
}
/* which block is the pointer on? (uses this frame's outlines) */
var hv=-1;
if(px>-1e3 && !dragging){
for(var h=hits.length-1;h>=0;h--){ if(inPoly(hits[h].p,px,py)){ hv=hits[h].k; break; } }
}
hover=hv;
cv.classList.toggle('over',hv>=0);
}
function frame(ts){
raf=0;
var dt=last?Math.min(0.033,(ts-last)/1000):0.016; last=ts;
update(dt); draw();
if(active && visible) raf=requestAnimationFrame(frame); else last=0;
}
function wake(){ if(!raf && visible) raf=requestAnimationFrame(frame); }
function local(e){ var r=cv.getBoundingClientRect(); px=e.clientX-r.left; py=e.clientY-r.top; }
cv.addEventListener('pointerdown',function(e){
dragging=true; moved=0; lastX=e.clientX; lastY=e.clientY; lastT=performance.now(); yawVel=0;
local(e);
try{ cv.setPointerCapture(e.pointerId); }catch(_){}
cv.classList.add('grabbing'); wake();
});
cv.addEventListener('pointermove',function(e){
local(e);
if(dragging){
var dx=e.clientX-lastX, dy=e.clientY-lastY, now=performance.now(), dt=Math.max(0.008,(now-lastT)/1000);
moved+=Math.abs(dx)+Math.abs(dy);
yaw+=dx*0.011;
if(e.pointerType==='mouse') pitch=Math.max(0.35,Math.min(0.85,pitch+dy*0.004));
yawVel=Math.max(-8,Math.min(8,yawVel*0.5+(dx*0.011/dt)*0.5));
lastX=e.clientX; lastY=e.clientY; lastT=now;
}
wake();
});
function release(e){
if(!dragging) return;
dragging=false; cv.classList.remove('grabbing');
if(moved<6){
var hk=-1;
for(var h=hits.length-1;h>=0;h--){ if(inPoly(hits[h].p,px,py)){ hk=hits[h].k; break; } }
hopTo(hk>=0?hk:home);
}
if(reduce) yawVel=0;
if(e.pointerType && e.pointerType!=='mouse'){ px=-1e4; py=-1e4; }
wake();
}
cv.addEventListener('pointerup',release);
cv.addEventListener('pointercancel',release);
cv.addEventListener('pointerleave',function(){ if(!dragging){ px=-1e4; py=-1e4; wake(); } });
if('IntersectionObserver' in window){
new IntersectionObserver(function(en){ visible=en[0].isIntersecting; if(visible){ last=0; wake(); } }).observe(cv);
}
if('ResizeObserver' in window){ new ResizeObserver(size).observe(cv); } else { window.addEventListener('resize',size); }
size();
})();
/* ---------- sticky bar visibility ---------- */
var topbar=document.getElementById('topbar'), hero=document.getElementById('hero');
if('IntersectionObserver' in window){
new IntersectionObserver(function(en){ topbar.classList.toggle('show',!en[0].isIntersecting); },{threshold:0,rootMargin:'-80px 0px 0px 0px'}).observe(hero);
} else { topbar.classList.add('show'); }
/* ---------- countdown to kickoff: Thu 5 Nov 2026, 17:00 Doha (UTC+3) ---------- */
var target=Date.UTC(2026,10,5,14,0,0);
var cd={d:document.getElementById('cd-d'),h:document.getElementById('cd-h'),m:document.getElementById('cd-m'),s:document.getElementById('cd-s')};
var countEl=document.getElementById('count');
function pad(n){return n<10?'0'+n:''+n;}
function tick(){
var diff=target-Date.now();
if(diff<=0){
countEl.classList.add('live-now');
countEl.innerHTML='<span class="u"><span class="n">The hackathon is underway</span></span>';
return false;
}
var s=Math.floor(diff/1000);
cd.d.textContent=Math.floor(s/86400);
cd.h.textContent=pad(Math.floor(s%86400/3600));
cd.m.textContent=pad(Math.floor(s%3600/60));
cd.s.textContent=pad(s%60);
return true;
}
if(tick()){ var iv=setInterval(function(){ if(!tick()) clearInterval(iv); },1000); }
/* ---------- dynamic member cards ---------- */
var membersEl=document.getElementById('members');
var matchWrap=document.getElementById('matchWrap');
function fld(label,type,name,req,hint){
return '<div class="fieldrow" style="margin-bottom:0">'
+'<label class="field-label" for="'+name+'">'+label+(req?'':' <span class="opt">(optional)</span>')+'</label>'
+'<input type="'+type+'" id="'+name+'" name="'+name+'" '+(req?'required':'')+'>'
+(hint?'<div class="hint">'+hint+'</div>':'')
+'</div>';
}
function roleField(name){
var roles=['Software Engineer','Technical Founder','Researcher (ML / AI)','Data Scientist','ML Engineer','Product / Design','Student','Other'];
var opts='<option value="">Select…</option>';
roles.forEach(function(r){opts+='<option>'+r+'</option>';});
return '<div class="fieldrow" style="margin-bottom:0">'
+'<label class="field-label" for="'+name+'">Role</label>'
+'<select id="'+name+'" name="'+name+'" required>'+opts+'</select></div>';
}
function memberCard(i){
var title=i===0?'<span class="badge lead">Team lead</span> Member 1':'<span class="badge">Member '+(i+1)+'</span>';
return '<div class="member"><div class="mtitle">'+title+'</div>'
+'<div class="grid2">'
+fld('Full name','text','m'+i+'_name',true)
+fld('Email','email','m'+i+'_email',true)
+fld('Mobile number','tel','m'+i+'_mobile',true)
+roleField('m'+i+'_role')
+fld('Organization / University','text','m'+i+'_org',false)
+fld('Hugging Face username','text','m'+i+'_hf',false,'Leave blank if you\'ll create one')
+'</div><div class="grid2">'
+fld('Primary skills','text','m'+i+'_skills',false,'e.g. Python, LLMs, front-end')
+fld('LinkedIn','url','m'+i+'_li',false)
+'</div></div>';
}
function selectedSize(){ var r=document.querySelector('input[name="size"]:checked'); return r?parseInt(r.value,10):3; }
function refresh(){
var n=selectedSize(), html='', saved={};
membersEl.querySelectorAll('input,select').forEach(function(el){ saved[el.name]=el.value; });
for(var i=0;i<n;i++) html+=memberCard(i);
membersEl.innerHTML=html;
membersEl.querySelectorAll('input,select').forEach(function(el){ if(saved[el.name]!==undefined) el.value=saved[el.name]; });
matchWrap.style.display=(n<3)?'flex':'none';
var mateWrap=document.getElementById('mateWrap'), mateBox=mateWrap.querySelector('input');
mateWrap.style.display=(n>1)?'flex':'none'; mateBox.required=(n>1); if(n===1) mateBox.checked=false;
updateProgress();
}
document.querySelectorAll('input[name="size"]').forEach(function(el){ el.addEventListener('change',refresh); });
/* ---------- word counters ---------- */
document.addEventListener('input',function(e){
var t=e.target;
if(t.tagName==='TEXTAREA' && t.dataset.count){
var v=t.value.trim(), words=v===''?0:v.split(/\s+/).length, el=document.getElementById(t.dataset.count);
var limit=+t.dataset.words;
if(el){ el.textContent=words; el.parentElement.style.color=words>limit?'var(--red-ui)':''; }
t.setCustomValidity(words>limit?'This answer is over '+limit+' words. Please shorten it.':'');
}
});
/* ---------- progress ---------- */
var form=document.getElementById('form'), progTxt=document.getElementById('progTxt');
var secs=Array.prototype.slice.call(document.querySelectorAll('section.block[data-sec]'));
function secDone(sec){
var req=sec.querySelectorAll('[required]'), i;
if(req.length){
for(i=0;i<req.length;i++){ if(!req[i].checkValidity()) return false; }
return true;
}
var f=sec.querySelectorAll('input:not([type=radio]):not([type=checkbox]),textarea,select');
for(i=0;i<f.length;i++){ if(f[i].value.trim()!=='') return true; }
return false;
}
function updateProgress(){
var done=0;
secs.forEach(function(sec,i){ var ok=secDone(sec); if(ok) done++; setCube(i,ok); });
progTxt.textContent=done+' of '+N+' sections done';
}
form.addEventListener('input',updateProgress);
form.addEventListener('change',updateProgress);
refresh();
/* ---------- submit ---------- */
var msg=document.getElementById('msg'), btn=document.getElementById('submitBtn'), doneEl=document.getElementById('done');
function fixUrl(el){
var v=el.value.trim();
el.setCustomValidity('');
if(!v){ el.value=''; return; }
if(!/^[a-z][a-z0-9+.-]*:\/\//i.test(v)) v='https://'+v;
el.value=v;
var ok=false;
try{ var u=new URL(v); ok=/^https?:$/.test(u.protocol) && u.hostname.indexOf('.')>0; }catch(_){}
if(!ok) el.setCustomValidity('Please enter a valid link, for example github.com/yourname');
}
form.addEventListener('change',function(e){ if(e.target.type==='url') fixUrl(e.target); });
var SUBMISSION_ID=(window.crypto && crypto.randomUUID)?crypto.randomUUID():('id-'+Date.now()+'-'+Math.random().toString(16).slice(2));
var SRC='', REF='';
try{
var qs=new URLSearchParams(location.search);
SRC=(qs.get('src')||qs.get('utm_source')||'').trim().slice(0,40);
if(document.referrer) REF=new URL(document.referrer).hostname.slice(0,60);
}catch(_){}
function val(name){ var el=form.elements[name]; return el?String(el.value||'').trim():''; }
function chk(name){ var el=form.elements[name]; return !!(el && el.checked); }
function collect(){
var n=selectedSize(), members=[], i, areas=[];
for(i=0;i<n;i++){
members.push({name:val('m'+i+'_name'), email:val('m'+i+'_email'), mobile:val('m'+i+'_mobile'), role:val('m'+i+'_role'),
organization:val('m'+i+'_org'), hfUsername:val('m'+i+'_hf'), skills:val('m'+i+'_skills'), linkedin:val('m'+i+'_li')});
}
form.querySelectorAll('input[name="areas"]:checked').forEach(function(el){ areas.push(el.value); });
var hb=form.querySelector('input[name="hackedBefore"]:checked');
return {
submissionId:SUBMISSION_ID,
submittedAt:new Date().toISOString(),
source:SRC, referrer:REF,
team:{name:val('teamName'), size:n, openToMatch:chk('openToMatch')},
members:members,
skills:{areas:areas, about:val('about'), project:val('project'), portfolio:val('portfolio'), hackedBefore:hb?hb.value:''},
idea:{idea:val('idea'), why:val('why')},
logistics:{canAttendAll48h:chk('available'), basedInQatar:val('inQatar'), emergencyContact:val('emergency'), dietary:val('dietary')},
consent:{selectionNotGuaranteed:chk('c1'), committed:chk('c2'), openSourceDemo:chk('c3'), teammatesInformed:(n>1?chk('c4'):null), photoVideo:chk('photoConsent')},
extra:val('extra')
};
}
function showDone(){
form.style.display='none';
doneEl.classList.add('show');
doneEl.scrollIntoView({behavior:reduce?'auto':'smooth',block:'center'});
doneEl.focus({preventScroll:true});
}
form.addEventListener('submit',function(e){
e.preventDefault();
msg.textContent='';
form.querySelectorAll('input[type="url"]').forEach(fixUrl);
form.classList.add('was-validated');
var bad=form.querySelector(':invalid');
if(bad){
msg.textContent=bad.validity.customError?bad.validationMessage:'Some required fields are missing. Check the ones outlined in red.';
bad.focus({preventScroll:true});
bad.scrollIntoView({behavior:reduce?'auto':'smooth',block:'center'});
return;
}
if(form.elements.company_website && form.elements.company_website.value){ showDone(); return; }
if(!SUBMIT_ENDPOINT){ showDone(); return; }
btn.disabled=true; btn.textContent='Sending…';
var ctl=('AbortController' in window)?new AbortController():null;
var timer=setTimeout(function(){ if(ctl) ctl.abort(); },15000);
fetch(SUBMIT_ENDPOINT,{method:'POST',headers:{'Content-Type':'text/plain;charset=utf-8'},body:JSON.stringify(collect()),signal:ctl?ctl.signal:undefined})
.then(function(r){ if(!r.ok) throw new Error('bad status'); return r.json(); })
.then(function(j){ clearTimeout(timer); if(!j || j.ok!==true) throw new Error('rejected'); showDone(); })
.catch(function(){
clearTimeout(timer);
msg.textContent='We could not send your application. Check your connection and try again.';
btn.disabled=false; btn.textContent='Submit application';
});
});
})();
</script>
</body>
</html>