<!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>Import Video — Upload Card</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:#eceef2; --card:#ffffff; --fg:#0b0c12; --muted:#8b91a1; --faint:#aab0bd; --line:#edeff3; --field:#f6f7f9; --field-bd:#e7e9ee; --chip:#f2f3f6; --chip-bd:#e7e9ee; --primary:#0d1422; --primary-fg:#ffffff; --accent:#3b82f6; --ok:#22c55e; --cta-bg:#ffffff; --cta-fg:#0b0c12; --gl:rgba(18,22,40,.08); --gl-strong:rgba(18,22,40,.32); --shadow:0 40px 90px rgba(15,20,40,.12); --ease:cubic-bezier(.34,1.4,.5,1); } html[data-theme="dark"]{ --bg:#080a0e; --card:#13161c; --fg:#eef1f6; --muted:#8b93a3; --faint:#5b6373; --line:#21262f; --field:#191d24; --field-bd:#272d38; --chip:#1b2029; --chip-bd:#2a313d; --primary:#ffffff; --primary-fg:#0b0c12; --accent:#5b9bff; --cta-bg:#13161c; --cta-fg:#eef1f6; --gl:rgba(255,255,255,.06); --gl-strong:rgba(255,255,255,.26); --shadow:0 40px 90px rgba(0,0,0,.6); } *{margin:0;padding:0;box-sizing:border-box} body{min-height:100vh;display:flex;background:var(--bg);color:var(--fg);overflow-x:hidden;overflow-y:auto; font-family:"Inter",system-ui,sans-serif;transition:background .5s var(--ease),color .5s var(--ease)} .stage{margin:auto;padding:40px 20px;width:100%;max-width:560px;display:flex;justify-content:center} .frame{position:relative;width:100%;display:flex;flex-direction:column;align-items:center} .cta,.card{position:relative;z-index:2} /* design-canvas guide lines through the card edges + corner crosshairs */ .gl,.gl-dot{position:absolute;opacity:0;transition:opacity .6s ease;pointer-events:none} .frame.open .gl,.frame.open .gl-dot{opacity:1} .gl{background:var(--gl);z-index:0} .gl.top{top:0;left:50%;transform:translateX(-50%);width:100vw;height:1px} .gl.bottom{bottom:0;left:50%;transform:translateX(-50%);width:100vw;height:1px} .gl.left{left:0;top:50%;transform:translateY(-50%);height:100vh;width:1px} .gl.right{right:0;top:50%;transform:translateY(-50%);height:100vh;width:1px} .gl-dot{width:11px;height:11px;z-index:3} .gl-dot::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;transform:translateY(-50%);background:var(--gl-strong)} .gl-dot::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;transform:translateX(-50%);background:var(--gl-strong)} .gl-dot.tl{top:-5px;left:-5px} .gl-dot.tr{top:-5px;right:-5px} .gl-dot.bl{bottom:-5px;left:-5px} .gl-dot.br{bottom:-5px;right:-5px} .themetog{position:fixed;top:16px;right:16px;z-index:9;width:38px;height:38px;border-radius:50%; display:grid;place-items:center;cursor:pointer;background:var(--card);border:1px solid var(--field-bd); color:var(--fg);transition:background .5s,border-color .5s,transform .2s} .themetog:hover{transform:scale(1.08)} .themetog svg{width:18px;height:18px} /* ---------- Get started button ---------- */ .cta{position:relative;isolation:isolate;overflow:hidden;border:none;cursor:pointer; padding:20px 56px;border-radius:18px;font:inherit;font-size:17px;font-weight:600; background:var(--cta-bg);color:var(--cta-fg); transition:color .45s var(--ease),background .45s var(--ease),transform .2s var(--ease),box-shadow .4s; box-shadow:0 16px 40px rgba(15,20,40,.10)} .cta-gfx{position:absolute;inset:-30%;width:160%;height:160%;z-index:0;filter:blur(16px);pointer-events:none} .cta::after{content:"";position:absolute;inset:3px;z-index:1;border-radius:15px; background:var(--cta-bg);transition:background .45s var(--ease)} .cta span{position:relative;z-index:2} .cta:hover{background:var(--cta-fg);color:var(--cta-bg);transform:translateY(-2px)} .cta:hover::after{background:var(--cta-fg)} .cta:active{transform:translateY(0) scale(.98)} .cta.out{opacity:0;transform:scale(.85);pointer-events:none;transition:opacity .35s,transform .35s} /* ---------- Card ---------- */ .card{width:100%;background:var(--card);border:1px solid var(--line);border-radius:26px; padding:30px;box-shadow:var(--shadow);transition:background .5s var(--ease),border-color .5s,box-shadow .5s; opacity:0;transform:translateY(24px) scale(.97)} .card.in{opacity:1;transform:none;transition:opacity .55s var(--ease),transform .55s var(--ease)} .head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:6px} .title{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.15;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .title .soft{color:var(--faint)} .badge{width:30px;height:30px;border-radius:9px;background:var(--field);border:1px solid var(--field-bd); display:inline-grid;place-items:center;color:var(--muted)} .badge svg{width:16px;height:16px} .sub{color:var(--muted);font-size:14px;margin-top:6px} .deco{display:flex;gap:-6px;position:relative;width:90px;height:62px;flex-shrink:0} .deco i{position:absolute;width:38px;height:38px;border-radius:11px;background:var(--card); border:1px solid var(--field-bd);display:grid;place-items:center;color:var(--fg);box-shadow:0 6px 16px rgba(0,0,0,.08); animation:floaty 4s var(--ease) infinite} .deco i svg{width:18px;height:18px} .deco i:nth-child(1){left:0;top:14px;transform:rotate(-12deg);animation-delay:0s} .deco i:nth-child(2){left:26px;top:0;z-index:2;animation-delay:.5s} .deco i:nth-child(3){left:52px;top:16px;transform:rotate(12deg);animation-delay:1s} @keyframes floaty{0%,100%{transform:translateY(0) rotate(var(--r,0))}50%{transform:translateY(-5px) rotate(var(--r,0))}} .divider{height:1px;background:var(--line);margin:22px 0} /* tabs */ .tabs{display:flex;align-items:center;gap:6px;background:var(--field);border:1px solid var(--field-bd); border-radius:14px;padding:5px} .tab{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 8px;border-radius:10px; font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;background:transparent;border:none;font-family:inherit; transition:color .25s,background .35s var(--ease),box-shadow .25s;white-space:nowrap} .tab svg{width:15px;height:15px} .tab.on{background:var(--card);color:var(--fg);box-shadow:0 2px 8px rgba(0,0,0,.08)} .gear{width:42px;height:42px;flex-shrink:0;border-radius:12px;border:1px solid var(--field-bd);background:var(--field); display:grid;place-items:center;color:var(--muted);cursor:pointer;transition:transform .4s var(--ease),color .25s} .gear:hover{transform:rotate(60deg);color:var(--fg)} .gear svg{width:18px;height:18px} .toprow{display:flex;gap:10px;align-items:center;margin:18px 0} /* dropzone */ .drop{position:relative;overflow:hidden;border:1.5px dashed var(--field-bd);border-radius:16px; padding:30px;text-align:center;cursor:pointer;transition:border-color .3s,background .3s; background:repeating-linear-gradient(135deg,var(--field) 0 14px,transparent 14px 28px)} .drop:hover,.drop.drag{border-color:var(--accent);background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--accent) 7%,var(--field)) 0 14px,transparent 14px 28px)} .drop .ic{width:42px;height:42px;border-radius:50%;background:var(--card);border:1px solid var(--field-bd); display:grid;place-items:center;margin:0 auto 10px;color:var(--fg);transition:transform .3s var(--ease)} .drop:hover .ic{transform:translateY(-3px)} .drop .ic svg{width:18px;height:18px} .drop b{font-size:14px;font-weight:600} .drop small{display:block;color:var(--faint);font-size:12px;margin-top:8px} .bar{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent);transition:width .2s linear} .drop.done{border-style:solid;border-color:var(--ok)} .filechip{display:none;align-items:center;gap:8px;justify-content:center;font-size:13px;font-weight:600} .drop.done .filechip{display:flex} .drop.done .promo{display:none} .filechip .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:20px} @media(max-width:520px){.grid2{grid-template-columns:1fr}} label{display:block;font-size:14px;font-weight:600;margin-bottom:9px} label .req{color:#ef4444} .label-row{display:flex;justify-content:space-between;align-items:center} .label-row .ic-i{color:var(--faint);cursor:help} .ic-i svg{width:16px;height:16px} input.t,textarea.t{width:100%;font:inherit;font-size:14px;color:var(--fg);background:var(--field); border:1.5px solid var(--field-bd);border-radius:12px;padding:13px 14px;outline:none; transition:border-color .25s,box-shadow .25s,background .5s} input.t::placeholder,textarea.t::placeholder{color:var(--faint)} input.t:focus,textarea.t:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)} textarea.t{resize:vertical;min-height:96px;margin-top:20px} /* segmented time */ .seg{display:flex;background:var(--field);border:1px solid var(--field-bd);border-radius:12px;padding:4px;gap:2px} .seg button{flex:1;font:inherit;font-size:13px;font-weight:600;color:var(--muted);background:transparent;border:none; padding:9px 4px;border-radius:9px;cursor:pointer;transition:color .25s,background .3s var(--ease)} .seg button.on{background:var(--card);color:var(--fg);box-shadow:0 2px 8px rgba(0,0,0,.08)} .seg input[type=time]{flex:1;font:inherit;font-size:13px;background:transparent;border:none;color:var(--fg);outline:none;display:none} /* tags */ .tagsec{margin-top:24px} .tagbox{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:var(--field);border:1.5px solid var(--field-bd); border-radius:12px;padding:10px 12px;transition:border-color .25s,box-shadow .25s} .tagbox.focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 16%,transparent)} .chip{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--chip-bd); border-radius:9px;padding:6px 8px 6px 11px;font-size:13px;font-weight:600;animation:chipin .3s var(--ease)} @keyframes chipin{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}} .chip.out{animation:chipout .25s var(--ease) forwards} @keyframes chipout{to{opacity:0;transform:scale(.6);margin-right:-4px}} .chip button{border:none;background:transparent;color:var(--faint);cursor:pointer;display:grid;place-items:center;padding:2px;border-radius:5px;transition:color .2s,background .2s} .chip button:hover{color:var(--fg);background:var(--field)} .chip button svg{width:12px;height:12px} .tagbox input{flex:1;min-width:120px;font:inherit;font-size:13px;background:transparent;border:none;outline:none;color:var(--fg)} .tagbox input::placeholder{color:var(--faint)} .remain{font-size:12px;color:var(--faint)} .suggest{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .sug{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--field-bd); border-radius:9px;padding:6px 11px;font:inherit;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer; transition:border-color .2s,color .2s,background .2s,transform .15s} .sug:hover{color:var(--fg);border-color:var(--muted);transform:translateY(-1px)} .sug svg{width:12px;height:12px} /* footer */ .foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap} .draft{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:var(--muted)} .draft .d{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent);animation:pulse 2s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}} .actions{display:flex;gap:10px} .btn{font:inherit;font-size:14px;font-weight:600;padding:12px 22px;border-radius:12px;cursor:pointer;transition:transform .15s var(--ease),background .3s,color .3s,border-color .3s} .btn:active{transform:scale(.97)} .btn.ghost{background:transparent;border:1.5px solid var(--field-bd);color:var(--fg)} .btn.ghost:hover{border-color:var(--muted)} .btn.primary{background:var(--primary);color:var(--primary-fg);border:1.5px solid var(--primary);min-width:120px;display:inline-flex;align-items:center;justify-content:center;gap:8px} .btn.primary:hover{filter:brightness(1.08)} .btn.primary.ok{background:var(--ok);border-color:var(--ok);color:#fff} .spin{width:15px;height:15px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:rot .7s linear infinite;display:none} .btn.primary.loading .spin{display:inline-block} @keyframes rot{to{transform:rotate(360deg)}} </style> </head> <body> <div class="themetog" id="theme" title="Toggle theme"></div> <div class="stage"> <div class="frame" id="frame"> <span class="gl top"></span><span class="gl bottom"></span><span class="gl left"></span><span class="gl right"></span> <span class="gl-dot tl"></span><span class="gl-dot tr"></span><span class="gl-dot bl"></span><span class="gl-dot br"></span> <button class="cta" id="getStarted"><canvas class="cta-gfx"></canvas><span>Get started</span></button> <div class="card" id="card" hidden> <div class="head"> <div> <h1 class="title">Import new <span class="soft">Video</span> <span class="badge"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 10l4.55-2.27A1 1 0 0 1 21 8.6v6.8a1 1 0 0 1-1.45.87L15 14M5 18h8a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2z"/></svg></span> </h1> <p class="sub">Add the details and choose when it goes live.</p> </div> <div class="deco"> <i style="--r:-12deg"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l1.9 5.6L19.5 10l-5.6 1.4L12 17l-1.9-5.6L4.5 10l5.6-1.4z"/></svg></i> <i><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L4 14h7l-1 8 9-12h-7z"/></svg></i> <i style="--r:12deg"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 4C12 6 7 11 4 20l3-1c2-7 6-11 13-13z"/><path d="M5 18h6"/></svg></i> </div> </div> <div class="divider"></div> <div class="toprow"> <div class="tabs" id="tabs"> <button class="tab on">Nova</button> <button class="tab">Lumen</button> <button class="tab">Relay</button> <button class="tab">Forge</button> </div> <div class="gear" title="Settings"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3.2"/><path d="M19.4 15a1.6 1.6 0 0 0 .3 1.8l.1.1a2 2 0 1 1-2.8 2.8l-.1-.1a1.6 1.6 0 0 0-2.7 1.1V21a2 2 0 0 1-4 0v-.1A1.6 1.6 0 0 0 7 19.4a1.6 1.6 0 0 0-1.8.3l-.1.1a2 2 0 1 1-2.8-2.8l.1-.1a1.6 1.6 0 0 0-1.1-2.7H1a2 2 0 0 1 0-4h.1A1.6 1.6 0 0 0 2.6 7a1.6 1.6 0 0 0-.3-1.8l-.1-.1a2 2 0 1 1 2.8-2.8l.1.1A1.6 1.6 0 0 0 7 2.6h.1A1.6 1.6 0 0 0 8.7 1.1V1a2 2 0 0 1 4 0v.1A1.6 1.6 0 0 0 15 2.6a1.6 1.6 0 0 0 1.8-.3l.1-.1a2 2 0 1 1 2.8 2.8l-.1.1a1.6 1.6 0 0 0 1.1 2.7H21a2 2 0 0 1 0 4h-.1a1.6 1.6 0 0 0-1.5 1z"/></svg></div> </div> <div class="drop" id="drop"> <div class="promo"> <div class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 16V4M7 9l5-5 5 5M5 20h14"/></svg></div> <b>Drag your video here, or browse</b> <small>MP4 or MOV · up to 10 MB · 1920×1080</small> </div> <div class="filechip"><span class="dot"></span> midnight_cut.mp4 · ready</div> <div class="bar" id="bar"></div> </div> <div class="grid2"> <div> <label>Project Name <span class="req">*</span></label> <input class="t" id="pname" placeholder="e.g. Midnight Skyline — Teaser" /> </div> <div> <div class="label-row"><label>Choose Publish Time</label><span class="ic-i" title="When the video goes live"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 8v.01M11 12h1v4h1" stroke-linecap="round"/></svg></span></div> <div class="seg" id="seg"> <button class="on" data-v="now">Now</button> <button data-v="t1">—</button> <button data-v="t2">—</button> <button data-v="more">···</button> <input type="time" id="customtime" /> </div> </div> </div> <label style="margin-top:20px">Project Description <span class="req">*</span></label> <textarea class="t" id="pdesc" placeholder="What's the story behind this clip?" style="margin-top:0"></textarea> <div class="tagsec"> <div class="label-row"><label style="margin:0">Tags</label><span class="remain" id="remain">12 tags remaining</span></div> <div class="tagbox" id="tagbox" style="margin-top:9px"> <span class="chip" data-tag="Cinematic">Cinematic <button aria-label="remove"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 5l14 14M19 5L5 19"/></svg></button></span> <span class="chip" data-tag="Teaser">Teaser <button aria-label="remove"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 5l14 14M19 5L5 19"/></svg></button></span> <input id="taginput" placeholder="Add tags (e.g. drone, promo, vlog)…" /> </div> <div class="suggest" id="suggest"></div> </div> <div class="foot"> <span class="draft"><span class="d"></span> Auto-saved · just now</span> <div class="actions"> <button class="btn ghost" id="cancel">Cancel</button> <button class="btn primary" id="schedule"><span class="spin"></span><span id="schedtext">Schedule</span></button> </div> </div> </div> </div> </div> <script> var root=document.documentElement; var SUN='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="4.5"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.4 1.4M17.6 17.6L19 19M19 5l-1.4 1.4M6.4 17.6L5 19"/></svg>'; var MOON='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>'; var themeBtn=document.getElementById("theme"); function paintTheme(){ themeBtn.innerHTML = root.getAttribute("data-theme")==="dark"?SUN:MOON; } themeBtn.addEventListener("click",function(){ root.setAttribute("data-theme", root.getAttribute("data-theme")==="dark"?"light":"dark"); paintTheme(); }); paintTheme(); /* ---------- WebGL shader gradient for the Get started button ---------- */ (function(){ var btn=document.getElementById("getStarted"); var cv=btn.querySelector(".cta-gfx"); var gl=cv.getContext("webgl")||cv.getContext("experimental-webgl"); if(!gl){ cv.style.background="conic-gradient(from 0deg,#ff6b6b,#feca57,#22d3ee,#6c5ce7,#ff9ff3,#48dbfb,#ff6b6b)"; return; } var VS="attribute vec2 p;void main(){gl_Position=vec4(p,0.0,1.0);}"; var FS="precision highp float;uniform vec2 uRes;uniform float uTime;"+ "vec3 pal(float t){return 0.5+0.5*cos(6.28318*(t+vec3(0.0,0.33,0.67)));}"+ "void main(){vec2 uv=(gl_FragCoord.xy/uRes-0.5);uv.x*=uRes.x/uRes.y;float t=uTime;"+ "float a=sin(uv.x*2.5+t*0.7)+sin(uv.y*2.0-t*0.6);"+ "float b=sin((uv.x+uv.y)*2.2+t*0.5)+cos(length(uv)*4.0-t*0.8);"+ "float m=(a+b)*0.25;vec3 col=pal(m+t*0.05);col=pow(clamp(col,0.0,1.0),vec3(0.8));"+ "gl_FragColor=vec4(col,1.0);}"; function sh(type,src){var s=gl.createShader(type);gl.shaderSource(s,src);gl.compileShader(s);return s;} var prog=gl.createProgram(); gl.attachShader(prog,sh(gl.VERTEX_SHADER,VS)); gl.attachShader(prog,sh(gl.FRAGMENT_SHADER,FS)); gl.linkProgram(prog);gl.useProgram(prog); var buf=gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER,buf); gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,3,-1,-1,3]),gl.STATIC_DRAW); var loc=gl.getAttribLocation(prog,"p");gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc,2,gl.FLOAT,false,0,0); var uRes=gl.getUniformLocation(prog,"uRes"),uTime=gl.getUniformLocation(prog,"uTime"); function size(){var dpr=Math.min(window.devicePixelRatio||1,2),w=cv.clientWidth,h=cv.clientHeight; if(!w||!h)return false; var W=Math.max(1,Math.round(w*dpr)),H=Math.max(1,Math.round(h*dpr)); if(cv.width!==W||cv.height!==H){cv.width=W;cv.height=H;gl.viewport(0,0,W,H);} gl.uniform2f(uRes,cv.width,cv.height); return true;} var speed=0.35,target=0.35,last=performance.now(),tt=0; btn.addEventListener("mouseenter",function(){target=1.8;}); btn.addEventListener("mouseleave",function(){target=0.35;}); function frame(now){var dt=Math.min(0.05,(now-last)/1000);last=now; speed+=(target-speed)*Math.min(1,dt*4); tt+=dt*speed*2.0; if(size()){gl.uniform1f(uTime,tt);gl.drawArrays(gl.TRIANGLES,0,3);} requestAnimationFrame(frame);} requestAnimationFrame(frame); })(); /* stage: get started -> card */ var cta=document.getElementById("getStarted"), card=document.getElementById("card"), frame=document.getElementById("frame"); cta.addEventListener("click",function(){ cta.classList.add("out"); setTimeout(function(){ cta.style.display="none"; card.hidden=false; requestAnimationFrame(function(){ card.classList.add("in"); frame.classList.add("open"); }); }, 320); }); /* tabs */ document.getElementById("tabs").addEventListener("click",function(e){ var t=e.target.closest(".tab"); if(!t)return; this.querySelectorAll(".tab").forEach(function(x){x.classList.toggle("on",x===t);}); }); /* publish time (live-ish) */ function hhmm(d){return String(d.getHours()).padStart(2,"0")+":"+String(d.getMinutes()).padStart(2,"0");} (function(){var now=new Date();var t1=new Date(now.getTime()+90*60000);var t2=new Date(now.getTime()+5*3600000); document.querySelector('[data-v="t1"]').textContent=hhmm(t1); document.querySelector('[data-v="t2"]').textContent=hhmm(t2);})(); var seg=document.getElementById("seg"), ctime=document.getElementById("customtime"); seg.addEventListener("click",function(e){var b=e.target.closest("button");if(!b)return; if(b.dataset.v==="more"){ ctime.style.display="block"; ctime.focus(); this.querySelectorAll("button").forEach(function(x){x.classList.remove("on");}); b.classList.add("on"); return; } ctime.style.display="none"; this.querySelectorAll("button").forEach(function(x){x.classList.toggle("on",x===b);}); }); /* dropzone (simulated upload) */ var drop=document.getElementById("drop"), bar=document.getElementById("bar"); function fakeUpload(){ if(drop.classList.contains("done"))return; var p=0; var iv=setInterval(function(){ p+=Math.random()*22+8; if(p>=100){p=100;clearInterval(iv); setTimeout(function(){drop.classList.add("done");bar.style.width="0";},250);} bar.style.width=p+"%"; },120); } drop.addEventListener("click",fakeUpload); ["dragover","dragenter"].forEach(function(ev){drop.addEventListener(ev,function(e){e.preventDefault();drop.classList.add("drag");});}); ["dragleave","drop"].forEach(function(ev){drop.addEventListener(ev,function(e){e.preventDefault();drop.classList.remove("drag");if(ev==="drop")fakeUpload();});}); /* tags */ var MAX=14, tagbox=document.getElementById("tagbox"), taginput=document.getElementById("taginput"), remain=document.getElementById("remain"), suggestWrap=document.getElementById("suggest"); var SUGGEST=["Behind the Scenes","Short Film","Drone","Timelapse","Music Video","Promo","Vlog"]; function tags(){ return [].map.call(tagbox.querySelectorAll(".chip"),function(c){return c.dataset.tag;}); } function update(){ var n=MAX-tags().length; remain.textContent=n+" tag"+(n===1?"":"s")+" remaining"; taginput.style.display = n<=0 ? "none":"block"; } function plus(){return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M12 5v14M5 12h14"/></svg>';} function x(){return '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M5 5l14 14M19 5L5 19"/></svg>';} function renderSuggest(){ var cur=tags(); suggestWrap.innerHTML=""; SUGGEST.filter(function(s){return cur.indexOf(s)<0;}).slice(0,4).forEach(function(s){ var b=document.createElement("button"); b.className="sug"; b.innerHTML=plus()+" "+s; b.addEventListener("click",function(){addTag(s);}); suggestWrap.appendChild(b); }); } function addTag(name){ name=(name||"").trim(); if(!name||tags().length>=MAX)return; if(tags().some(function(t){return t.toLowerCase()===name.toLowerCase();}))return; var chip=document.createElement("span"); chip.className="chip"; chip.dataset.tag=name; chip.innerHTML=name+' <button aria-label="remove">'+x()+'</button>'; chip.querySelector("button").addEventListener("click",function(){removeTag(chip);}); tagbox.insertBefore(chip, taginput); update(); renderSuggest(); } function removeTag(chip){ chip.classList.add("out"); setTimeout(function(){chip.remove();update();renderSuggest();},230); } tagbox.querySelectorAll(".chip button").forEach(function(b){b.addEventListener("click",function(){removeTag(b.closest(".chip"));});}); taginput.addEventListener("keydown",function(e){ if(e.key==="Enter"||e.key===","){e.preventDefault();addTag(taginput.value);taginput.value="";} else if(e.key==="Backspace"&&!taginput.value){var c=tagbox.querySelectorAll(".chip");if(c.length)removeTag(c[c.length-1]);} }); taginput.addEventListener("focus",function(){tagbox.classList.add("focus");}); taginput.addEventListener("blur",function(){tagbox.classList.remove("focus");}); update(); renderSuggest(); /* schedule + cancel */ var sched=document.getElementById("schedule"), schedtext=document.getElementById("schedtext"); sched.addEventListener("click",function(){ if(sched.classList.contains("loading")||sched.classList.contains("ok"))return; sched.classList.add("loading"); schedtext.textContent="Scheduling"; setTimeout(function(){ sched.classList.remove("loading"); sched.classList.add("ok"); schedtext.textContent="Scheduled ✓"; setTimeout(function(){ sched.classList.remove("ok"); schedtext.textContent="Schedule"; },1800); },1300); }); document.getElementById("cancel").addEventListener("click",function(){ card.classList.remove("in"); frame.classList.remove("open"); setTimeout(function(){ card.hidden=true; cta.style.display=""; cta.classList.remove("out"); },420); }); </script> </body> </html>

Code & assets

Design System