<!DOCTYPE html> <html lang="en" data-theme="light"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Invite Code Gate</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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" /> <style> :root{ --bg:#ffffff; --card:rgba(255,255,255,.72); --fg:#0b0c12; --muted:#6b7280; --field:#ffffff; --field-bd:#e6e8ee; --field-bd-focus:#6c5cff; --accent:#6c5cff; --accent-fg:#ffffff; --accent-soft:#efecff; --dis-bg:#f1f2f5; --dis-fg:#aeb4bf; --ok:#16a34a; --err:#e5484d; --grid:rgba(18,22,60,.05); --beam1:#6c5cff; --beam2:#22d3ee; --shadow:0 30px 80px rgba(20,24,60,.10); --ease:cubic-bezier(.34,1.56,.64,1); } html[data-theme="dark"]{ --bg:#080a0f; --card:rgba(17,19,26,.72); --fg:#f3f5fa; --muted:#9aa3b2; --field:#0f1117; --field-bd:#242938; --field-bd-focus:#7c6cff; --accent:#7c6cff; --accent-soft:#1b1830; --dis-bg:#161922; --dis-fg:#525a6b; --grid:rgba(255,255,255,.05); --beam1:#7c6cff; --beam2:#22d3ee; --shadow:0 30px 80px rgba(0,0,0,.6); } html[data-theme="blue"]{ --bg:#070e26; --card:rgba(13,25,66,.66); --fg:#eaf0ff; --muted:#8ea0cf; --field:#0a1538; --field-bd:#21346f; --field-bd-focus:#38bdf8; --accent:#38bdf8; --accent-fg:#04121f; --accent-soft:#0d2348; --dis-bg:#0d1c44; --dis-fg:#4a5f93; --grid:rgba(120,165,255,.08); --beam1:#38bdf8; --beam2:#8b7cff; --shadow:0 30px 90px rgba(0,8,30,.7); } *{margin:0;padding:0;box-sizing:border-box} body{min-height:100vh;display:grid;place-items:center;background:var(--bg);color:var(--fg); font-family:"Inter",system-ui,sans-serif;overflow:hidden;position:relative; transition:background .5s var(--ease),color .5s var(--ease)} canvas#grid{position:fixed;inset:0;width:100%;height:100%;z-index:0} .themes{position:fixed;top:18px;right:18px;z-index:5;display:flex;gap:8px; background:var(--card);backdrop-filter:blur(12px);border:1px solid var(--field-bd); padding:6px;border-radius:100px;transition:background .5s,border-color .5s} .themes button{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer; transition:transform .25s var(--ease),border-color .25s} .themes button:hover{transform:scale(1.15)} .themes button.on{border-color:var(--fg)} .t-light{background:#fff;box-shadow:inset 0 0 0 1px #e3e3e3} .t-dark{background:#11131a} .t-blue{background:linear-gradient(135deg,#0a1538,#38bdf8)} .card{position:relative;z-index:2;width:min(440px,92vw);padding:40px 36px;text-align:center; background:var(--card);backdrop-filter:blur(16px);border:1px solid var(--field-bd);border-radius:26px; box-shadow:var(--shadow);transition:background .5s var(--ease),border-color .5s,box-shadow .5s; animation:rise .8s var(--ease) both} @keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} /* avatars + bubbles */ .crew{display:flex;align-items:center;justify-content:center;margin-bottom:26px;height:92px} .person{position:relative} .person.p-a{z-index:1} .person.p-b{margin-left:-16px;z-index:2} .ava{width:58px;height:58px;border-radius:50%;border:3px solid var(--card);overflow:hidden; background:var(--accent-soft);display:block;box-shadow:0 6px 16px rgba(0,0,0,.16); animation:bobv 4s var(--ease) infinite} .person.p-b .ava{animation-delay:.6s} .ava img{width:100%;height:100%;object-fit:cover;display:block} @keyframes bobv{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} /* bubbles are absolute to their avatar wrapper, so their width never moves the avatars */ .bubble{position:absolute;white-space:nowrap;font-size:14px;font-weight:600;color:var(--accent); background:var(--accent-soft);padding:9px 14px;border-radius:16px;opacity:0;transform:scale(.6); transition:opacity .3s var(--ease),transform .45s var(--ease);z-index:3} .bubble.l{right:34px;bottom:38px;border-bottom-right-radius:5px;transform-origin:bottom right} .bubble.r{left:34px;bottom:46px;border-bottom-left-radius:5px;transform-origin:bottom left} .bubble.in{opacity:1;transform:scale(1)} h1{font-size:30px;font-weight:800;letter-spacing:-.02em;margin-bottom:10px} .sub{color:var(--muted);font-size:15px;line-height:1.5;max-width:30ch;margin:0 auto 28px} form{text-align:left} label{display:block;font-size:13px;font-weight:600;margin-bottom:8px} .field{position:relative} input{width:100%;font:inherit;font-size:16px;letter-spacing:.06em;padding:16px 18px;color:var(--fg); background:var(--field);border:1.5px solid var(--field-bd);border-radius:14px;outline:none; transition:border-color .25s,box-shadow .25s,background .5s} input::placeholder{color:var(--muted);opacity:.6;letter-spacing:.04em} input:focus{border-color:var(--field-bd-focus);box-shadow:0 0 0 4px color-mix(in srgb,var(--field-bd-focus) 18%,transparent)} .field.bad input{border-color:var(--err);animation:shake .4s} @keyframes shake{10%,90%{transform:translateX(-2px)}30%,70%{transform:translateX(5px)}50%{transform:translateX(-7px)}} .err-msg{color:var(--err);font-size:13px;font-weight:500;margin-top:8px;height:0;opacity:0;overflow:hidden; transition:opacity .25s,height .25s} .err-msg.show{height:18px;opacity:1} .verify{position:relative;width:100%;margin-top:18px;font:inherit;font-size:16px;font-weight:600; padding:16px;border:none;border-radius:14px;cursor:pointer;overflow:hidden; background:var(--accent);color:var(--accent-fg); transition:transform .15s var(--ease),filter .25s,background .35s,color .35s,box-shadow .25s; box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 35%,transparent)} .verify:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.05)} .verify:active:not(:disabled){transform:translateY(0) scale(.99)} .verify:disabled{background:var(--dis-bg);color:var(--dis-fg);cursor:not-allowed;box-shadow:none} .verify .lbl{display:inline-flex;align-items:center;gap:9px;justify-content:center;transition:opacity .2s} .spinner{width:17px;height:17px;border:2.5px solid color-mix(in srgb,var(--accent-fg) 40%,transparent); border-top-color:var(--accent-fg);border-radius:50%;animation:spin .7s linear infinite;display:none} .verify.loading .spinner{display:inline-block} @keyframes spin{to{transform:rotate(360deg)}} .verify.success{background:var(--ok);color:#fff;box-shadow:0 10px 24px color-mix(in srgb,var(--ok) 35%,transparent)} .check{width:18px;height:18px;display:none} .verify.success .check{display:inline-block} .check path{stroke-dasharray:24;stroke-dashoffset:24;animation:draw .5s var(--ease) forwards} @keyframes draw{to{stroke-dashoffset:0}} .reset{display:block;width:100%;text-align:center;margin-top:14px;background:none;border:none;cursor:pointer; color:var(--muted);font:inherit;font-size:13px;font-weight:500;opacity:0;height:0;overflow:hidden;transition:opacity .3s,color .2s} .reset.show{opacity:1;height:auto} .reset:hover{color:var(--fg)} </style> </head> <body> <canvas id="grid"></canvas> <div class="themes" id="themes"> <button class="t-light on" data-t="light" title="Light"></button> <button class="t-dark" data-t="dark" title="Dark"></button> <button class="t-blue" data-t="blue" title="Deep blue"></button> </div> <main class="card"> <div class="crew"> <div class="person p-a"> <span class="bubble l">Hurry up!</span> <span class="ava" aria-hidden="true"><img src="https://exenmmapjeiefsrkwkgo.supabase.co/storage/v1/object/public/item-assets/28/avatar1.jpg" alt="" /></span> </div> <div class="person p-b"> <span class="bubble r">Are you ready?</span> <span class="ava" aria-hidden="true"><img src="https://exenmmapjeiefsrkwkgo.supabase.co/storage/v1/object/public/item-assets/28/avatar2.jpg" alt="" /></span> </div> </div> <h1>Enter Invite Code</h1> <p class="sub">Only invited users can access the product. Enter your code to continue.</p> <form id="form" novalidate> <label for="code">Enter code</label> <div class="field" id="field"> <input id="code" type="text" inputmode="numeric" autocomplete="one-time-code" spellcheck="false" placeholder="Ex: 482913" maxlength="6" /> </div> <div class="err-msg" id="err">That code didn't work. Double-check and try again.</div> <button class="verify" id="verify" type="button" disabled> <span class="lbl" id="lbl"> <span class="spinner"></span> <svg class="check" viewBox="0 0 24 24" fill="none"><path d="M5 13l4 4L19 7" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg> <span id="lbltext">Verify Now</span> </span> </button> <button class="reset" id="reset" type="button">Use a different code</button> </form> </main> <script> /* ---------- animated grid + beams ---------- */ var canvas=document.getElementById("grid"), ctx=canvas.getContext("2d"); var W,H,dpr,cell=46,cols,rows,beams=[],colors={grid:"",b1:"",b2:""}; var reduce=window.matchMedia("(prefers-reduced-motion: reduce)").matches; function readColors(){var s=getComputedStyle(document.body); colors.grid=s.getPropertyValue("--grid").trim(); colors.b1=s.getPropertyValue("--beam1").trim(); colors.b2=s.getPropertyValue("--beam2").trim();} function resize(){dpr=Math.min(window.devicePixelRatio||1,2);W=window.innerWidth;H=window.innerHeight; canvas.width=W*dpr;canvas.height=H*dpr;ctx.setTransform(dpr,0,0,dpr,0,0); cols=Math.ceil(W/cell);rows=Math.ceil(H/cell);} function rint(a,b){return a+Math.floor(Math.random()*(b-a+1));} function spawn(){ if(beams.length>14) return; var horizontal=Math.random()<0.5; var idx=rint(1,(horizontal?rows:cols)-1); var pos=idx*cell; var dir=Math.random()<0.5?1:-1; var len=70+Math.random()*150, span=(horizontal?W:H); beams.push({h:horizontal,pos:pos,dir:dir,len:len, x:dir>0?-len:span+len, span:span, col:Math.random()<0.5?colors.b1:colors.b2, speed:1.4+Math.random()*2.6}); } function draw(){ ctx.clearRect(0,0,W,H); ctx.strokeStyle=colors.grid;ctx.lineWidth=1;ctx.beginPath(); for(var i=0;i<=cols;i++){var x=i*cell+.5;ctx.moveTo(x,0);ctx.lineTo(x,H);} for(var j=0;j<=rows;j++){var y=j*cell+.5;ctx.moveTo(0,y);ctx.lineTo(W,y);} ctx.stroke(); ctx.lineWidth=2.2;ctx.shadowBlur=10; for(var k=beams.length-1;k>=0;k--){ var b=beams[k];b.x+=b.dir*b.speed; // alpha envelope: fade in then out across the full travel var travelled=b.dir>0?(b.x+b.len)/(b.span+2*b.len):(b.span+b.len-b.x)/(b.span+2*b.len); var a=Math.sin(Math.max(0,Math.min(1,travelled))*Math.PI); if((b.dir>0&&b.x>b.span+b.len)||(b.dir<0&&b.x<-b.len)){beams.splice(k,1);continue;} var x2=b.x+b.dir*b.len, g=b.h?ctx.createLinearGradient(b.x,0,x2,0):ctx.createLinearGradient(0,b.x,0,x2); g.addColorStop(0,"transparent");g.addColorStop(.5,b.col);g.addColorStop(1,"transparent"); ctx.strokeStyle=g;ctx.shadowColor=b.col;ctx.globalAlpha=a*0.9;ctx.beginPath(); if(b.h){ctx.moveTo(b.x,b.pos);ctx.lineTo(x2,b.pos);}else{ctx.moveTo(b.pos,b.x);ctx.lineTo(b.pos,x2);} ctx.stroke(); } ctx.globalAlpha=1;ctx.shadowBlur=0; requestAnimationFrame(draw); } readColors();resize();draw(); window.addEventListener("resize",resize); if(!reduce) setInterval(spawn,640); /* ---------- form behaviour ---------- */ var form=document.getElementById("form"), input=document.getElementById("code"), btn=document.getElementById("verify"), lbltext=document.getElementById("lbltext"), field=document.getElementById("field"), err=document.getElementById("err"), reset=document.getElementById("reset"); var LEN=6; // exactly 6 digits function refresh(){ if(btn.classList.contains("loading")||btn.classList.contains("success"))return; btn.disabled = input.value.length !== LEN; } input.addEventListener("input",function(){ var digits=input.value.replace(/\D/g,"").slice(0,LEN); // numbers only, max 6 if(digits!==input.value) input.value=digits; field.classList.remove("bad"); err.classList.remove("show"); refresh(); }); input.addEventListener("keydown",function(e){ if(e.key==="Enter"){ e.preventDefault(); verify(); } }); function verify(){ if(btn.disabled||btn.classList.contains("loading")||btn.classList.contains("success")) return; btn.classList.add("loading"); btn.disabled=true; lbltext.textContent="Verifying"; err.classList.remove("show"); field.classList.remove("bad"); setTimeout(function(){ btn.classList.remove("loading"); if(Math.random()<0.5){ btn.classList.add("success"); lbltext.textContent="Verified!"; input.disabled=true; reset.classList.add("show"); } else { lbltext.textContent="Verify Now"; field.classList.add("bad"); err.classList.add("show"); refresh(); input.focus(); } }, 1500); } btn.addEventListener("click", verify); reset.addEventListener("click",function(){ btn.classList.remove("success"); lbltext.textContent="Verify Now"; input.disabled=false; input.value=""; reset.classList.remove("show"); field.classList.remove("bad"); err.classList.remove("show"); refresh(); input.focus(); }); /* ---------- theme switch ---------- */ document.getElementById("themes").addEventListener("click",function(e){ var b=e.target.closest("button"); if(!b)return; document.documentElement.setAttribute("data-theme", b.dataset.t); this.querySelectorAll("button").forEach(function(x){x.classList.toggle("on",x===b);}); readColors(); }); /* ---------- chat bubbles: random phrases, one at a time, looping every 3s ---------- */ (function(){ var bl=document.querySelector(".bubble.l"), br=document.querySelector(".bubble.r"); if(!bl||!br) return; var phrases=["Hurry up!","Waiting for you","Are you ready?","Bro....","Gurl.....", "It's giving....","This is soo peak!","Come thru!","You're in!","Get in here", "Let's gooo","Saved you a spot","Don't miss this","Almost time","We're waiting ⏳","You're invited ✨", "Where you at?","Pull up!","We started without you 👀"]; function pick(){ return phrases[Math.floor(Math.random()*phrases.length)]; } if(reduce){ bl.classList.add("in"); br.classList.add("in"); return; } function run(){ bl.classList.remove("in"); br.classList.remove("in"); var a=pick(), b=pick(); while(b===a){ b=pick(); } setTimeout(function(){ bl.textContent=a; bl.classList.add("in"); }, 200); setTimeout(function(){ br.textContent=b; br.classList.add("in"); }, 1050); setTimeout(function(){ bl.classList.remove("in"); br.classList.remove("in"); }, 2500); } run(); setInterval(run, 3000); })(); </script> </body> </html>

Code & assets

Design System