Spaces:
Running
Running
Download index.html from qai-hackathon/apply: direct link, hf CLI and curl.
- Browser
- Download file 70.8 kB
-
https://huggingface.co/spaces/qai-hackathon/apply/resolve/main/index.html
- Command line
-
hf download hf://spaces/qai-hackathon/apply/index.html
-
curl -L -o index.html https://huggingface.co/spaces/qai-hackathon/apply/resolve/main/index.html
70.8 kB
| <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 - M7</div> | |
| <p>Abdulla Bin Thani St, Doha, Qatar</p> | |
| <a class="maps" href="https://www.google.com/maps/search/?api=1&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 & 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 & 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> | |