Four Answer Window
Overview
A four-panel answer view in a frosted browser window: the search box cycles keywords, a progress bar fills step by step and four cards switch from Loading to Ready one after another, showing a revenue ranking, a downloads bar chart, an ad creative fan and a paywall phone. Two columns on narrow screens.
Taken from the page template Chengbang App Market Intelligence Home. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Four Answer Window to your project in your colors.
Where to use it
Dashboards, data tables, chart cards, comparison tables and status panels.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add four-answer-window
mcp › Use 8pt MCP to call get_component("four-answer-window")
Code
Source for Four Answer Window. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-faw"><div class="faw-win"><div class="faw-bar"><span class="faw-dots"><i></i><i></i><i></i></span><span class="faw-url">澄榜 / 探索</span><span class="faw-tag"><i></i>示意数据</span></div><div class="faw-body"><div class="faw-top"><div class="faw-q"><svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="M20 20l-4-4"/></svg><span class="faw-typed">卡路里计算</span><i class="faw-caret"></i></div><div class="faw-prog"><span><b class="faw-n">0</b> / 4 个答案已就绪</span><i><u></u></i></div></div><div class="faw-grid"> <div class="faw-c"><div class="faw-h"><span class="faw-hi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 17l6-6 4 4 8-8"/><path d="M15 7h6v6"/></svg></span><b>谁在赚钱</b><span class="faw-st"><i class="spin"></i><i class="ok"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i><span class="t1">读取中</span><span class="t2">就绪</span></span></div><ul class="faw-who"><li><em>1</em><span class="ic" style="background:#22C55E"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19c0-8 6-14 14-14 0 8-6 14-14 14z"/><path d="M5 19l7-7"/></svg></span><span><b>轻食记</b><small>¥80万–150万</small></span></li><li><em>2</em><span class="ic" style="background:#8B5CF6"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg></span><span><b>声浪口语</b><small>¥50万–100万</small></span></li><li><em>3</em><span class="ic" style="background:#0EA5E9"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 14A8 8 0 1 1 10 4a6 6 0 0 0 10 10z"/></svg></span><span><b>眠岛</b><small>¥50万–80万</small></span></li></ul><p class="faw-ft">月收入估算</p></div> <div class="faw-c"><div class="faw-h"><span class="faw-hi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 4v11M7 10l5 5 5-5M5 20h14"/></svg></span><b>下载多少</b><span class="faw-st"><i class="spin"></i><i class="ok"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i><span class="t1">读取中</span><span class="t2">就绪</span></span></div><ul class="faw-bars"><li><span><b>轻食记</b><small>2万–5万</small></span><i><u style="--w:46%"></u></i></li><li><span><b>声浪口语</b><small>5万–10万</small></span><i><u style="--w:82%"></u></i></li><li><span><b>眠岛</b><small>5千–1万</small></span><i><u style="--w:22%"></u></i></li></ul><p class="faw-ft">月下载估算</p></div> <div class="faw-c"><div class="faw-h"><span class="faw-hi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10v4h3l6 4V6L7 10z"/><path d="M17 9a4 4 0 0 1 0 6"/></svg></span><b>怎么投放</b><span class="faw-st"><i class="spin"></i><i class="ok"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i><span class="t1">读取中</span><span class="t2">就绪</span></span></div><div class="faw-ads"><img src="https://8pt.dev/api/media/73e8c0f2a8fe39d4eb44761d.webp" alt=""><img src="https://8pt.dev/api/media/bb261f7dbeedbc68bf1caabb.webp" alt=""><img src="https://8pt.dev/api/media/aa5e034b9c4678b60c3f1f52.webp" alt=""><span class="faw-play"><svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M8 5v14l11-7z"/></svg></span></div><p class="faw-ft">轻食记 · 3 条在投素材</p></div> <div class="faw-c"><div class="faw-h"><span class="faw-hi"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/></svg></span><b>怎么收费</b><span class="faw-st"><i class="spin"></i><i class="ok"><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i><span class="t1">读取中</span><span class="t2">就绪</span></span></div><div class="faw-phone"><div class="faw-ph"><div class="ph-notch"></div><div class="ph-scr"><b>解锁全部计划</b><span class="ph-sub">让目标更快达成</span><div class="ph-ring"><i></i><em>—</em></div><div class="ph-rows"><span></span><span></span><span></span></div><div class="ph-plan on">年度 · 示意价</div><div class="ph-plan">月度</div><div class="ph-btn">继续</div></div></div><span class="faw-pw">付费墙</span></div><p class="faw-ft">轻食记 · 完整流程</p></div> </div></div></div></div>
.x-faw{--ink:#0E1116;--blue:#2F6BEA;--blue2:#5B8DF5;--muted:#667085;--line:#E6E8EE;--soft:#F3F5F9;--bg:#FAFAFB;font-family:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}.x-faw,.x-faw *{box-sizing:border-box}.x-faw a{color:inherit;text-decoration:none}.x-faw button{font:inherit;cursor:pointer}.x-faw{width:100%;max-width:1120px;margin:0 auto;text-align:left}.x-faw .faw-win{border-radius:22px;padding:0 8px 8px;background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.75);box-shadow:0 30px 80px -30px rgba(18,40,90,.45);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.x-faw .faw-bar{display:flex;align-items:center;gap:12px;height:40px;padding:0 10px}.x-faw .faw-dots{display:flex;gap:7px}.x-faw .faw-dots i{width:11px;height:11px;border-radius:50%;background:#FF5F57}.x-faw .faw-dots i:nth-child(2){background:#FEBC2E}.x-faw .faw-dots i:nth-child(3){background:#28C840}.x-faw .faw-url{margin:0 auto;font-size:11px;color:#667085;background:rgba(255,255,255,.8);padding:3px 14px;border-radius:6px}.x-faw .faw-tag{display:flex;align-items:center;gap:6px;font-size:11px;color:#475467}.x-faw .faw-tag i{width:7px;height:7px;border-radius:50%;background:var(--blue)}.x-faw .faw-body{background:#fff;border-radius:16px;padding:18px;background-image:radial-gradient(#E9ECF2 1px,transparent 1px);background-size:16px 16px}.x-faw .faw-top{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:18px}.x-faw .faw-q{display:flex;align-items:center;gap:10px;flex:0 1 380px;height:46px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#fff;color:#98A2B3;box-shadow:0 2px 6px rgba(16,24,40,.04)}.x-faw .faw-typed{color:var(--ink);font-size:15px}.x-faw .faw-caret{width:1.5px;height:18px;background:var(--ink);animation:faw-blink 1s steps(1) infinite}.x-faw .faw-prog{flex:0 1 300px;font-size:12px;color:#344054}.x-faw .faw-prog b{font-weight:600}.x-faw .faw-prog i{display:block;height:4px;border-radius:4px;background:#E6E8EE;margin-top:8px;overflow:hidden}.x-faw .faw-prog u{display:block;height:100%;width:0;background:var(--blue);border-radius:4px;transition:width .6s ease}.x-faw .faw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}.x-faw .faw-c{background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;min-height:236px;box-shadow:0 1px 2px rgba(16,24,40,.04)}.x-faw .faw-h{display:flex;align-items:center;gap:8px;margin-bottom:12px}.x-faw .faw-hi{width:26px;height:26px;border-radius:7px;background:#EEF4FF;color:var(--blue);display:grid;place-items:center}.x-faw .faw-hi svg{width:15px;height:15px}.x-faw .faw-h b{font-size:13px;font-weight:600}.x-faw .faw-st{margin-left:auto;display:flex;white-space:nowrap;flex:none;align-items:center;gap:4px;font-size:11px;color:#475467;background:#F2F4F7;border-radius:999px;padding:3px 9px}.x-faw .faw-st .spin{width:9px;height:9px;border-radius:50%;border:1.5px solid #C7D2E4;border-top-color:var(--blue);animation:faw-spin .8s linear infinite}.x-faw .faw-st .ok,.x-faw .faw-st .t2{display:none}.x-faw .faw-c.done .faw-st{background:#EEF4FF;color:var(--blue)}.x-faw .faw-c.done .spin,.x-faw .faw-c.done .t1{display:none}.x-faw .faw-c.done .ok,.x-faw .faw-c.done .t2{display:inline-flex}.x-faw .faw-c>*:not(.faw-h){transition:opacity .5s ease,transform .5s ease}.x-faw .faw-c:not(.done)>*:not(.faw-h){opacity:.25;transform:translateY(4px)}.x-faw ul{list-style:none;margin:0;padding:0}.x-faw .faw-who{display:grid;gap:6px}.x-faw .faw-who li{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:10px}.x-faw .faw-who li:first-child{background:#F3F5F9}.x-faw .faw-who em{font-style:normal;font-size:11px;color:#98A2B3;width:10px}.x-faw .ic{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;flex:none}.x-faw .ic svg{width:15px;height:15px}.x-faw .faw-who li>span:not(.ic){display:flex;flex-direction:column;line-height:1.3}.x-faw .faw-who b{font-size:13px;font-weight:500}.x-faw .faw-who small,.x-faw .faw-bars small{font-size:11px;color:#667085}.x-faw .faw-bars{display:grid;gap:14px;padding-top:4px}.x-faw .faw-bars span{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}.x-faw .faw-bars b{font-weight:500}.x-faw .faw-bars i{display:block;height:6px;border-radius:6px;background:#EEF1F6;overflow:hidden}.x-faw .faw-bars u{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,#2F6BEA,#7FA6F8);transition:width 1s cubic-bezier(.2,.8,.2,1)}.x-faw .faw-c.done .faw-bars u{width:var(--w)}.x-faw .faw-ads{position:relative;height:132px;display:flex;justify-content:center;align-items:center}.x-faw .faw-ads img{position:absolute;width:72px;height:118px;object-fit:cover;border-radius:9px;border:2px solid #fff;box-shadow:0 8px 20px -8px rgba(0,0,0,.35)}.x-faw .faw-ads img:nth-child(1){transform:translateX(-52px) rotate(-8deg)}.x-faw .faw-ads img:nth-child(2){z-index:2;width:80px;height:128px}.x-faw .faw-ads img:nth-child(3){transform:translateX(52px) rotate(8deg)}.x-faw .faw-play{position:absolute;z-index:3;width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center;color:var(--ink)}.x-faw .faw-phone{position:relative;height:132px;display:flex;justify-content:center;overflow:hidden}.x-faw .faw-phone .faw-ph{transform:scale(.62);transform-origin:top center}.x-faw .faw-pw{position:absolute;right:10%;top:44px;font-size:10px;color:#fff;background:#0E1116;padding:3px 9px;border-radius:999px}.x-faw .faw-ft{margin:auto 0 0;padding-top:10px;font-size:11px;color:#667085}@keyframes faw-spin{to{transform:rotate(360deg)}}@keyframes faw-blink{50%{opacity:0}}@media (max-width:900px){.x-faw .faw-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width:640px){.x-faw .faw-top{flex-direction:column;align-items:stretch;gap:12px}.x-faw .faw-q{flex:none}.x-faw .faw-prog{flex:none}.x-faw .faw-body{padding:12px}.x-faw .faw-grid{gap:10px}.x-faw .faw-c{padding:10px;min-height:210px}.x-faw .faw-st .t1,.x-faw .faw-c.done .faw-st .t2{display:none}.x-faw .faw-st{padding:4px 6px}.x-faw .faw-h b{font-size:12px;white-space:nowrap}.x-faw .faw-hi{width:22px;height:22px}.x-faw .faw-who li{padding:5px 4px;gap:6px}.x-faw .faw-who em{display:none}.x-faw .faw-ads img:nth-child(1){transform:translateX(-36px) rotate(-8deg)}.x-faw .faw-ads img:nth-child(3){transform:translateX(36px) rotate(8deg)}.x-faw .faw-ads img{width:58px;height:100px}.x-faw .faw-ads img:nth-child(2){width:64px;height:110px}.x-faw .faw-url{display:none}}@media (prefers-reduced-motion:reduce){.x-faw *{animation:none!important;transition:none!important}}.x-faw .faw-ph{position:relative;width:118px;height:236px;border-radius:22px;background:#0E1116;padding:5px;box-shadow:0 18px 40px -16px rgba(14,17,22,.45)}.x-faw .faw-ph .ph-notch{position:absolute;top:9px;left:50%;width:34px;height:8px;margin-left:-17px;border-radius:6px;background:#0E1116;z-index:2}.x-faw .faw-ph .ph-scr{height:100%;border-radius:18px;background:#fff;padding:22px 9px 9px;display:flex;flex-direction:column;align-items:center;gap:5px;overflow:hidden}.x-faw .faw-ph b{font-size:10px;font-weight:600;color:#0E1116}.x-faw .faw-ph .ph-sub{font-size:7px;color:#98A2B3}.x-faw .faw-ph .ph-ring{position:relative;width:46px;height:46px;border-radius:50%;background:conic-gradient(#2F6BEA 0 68%,#E6E8EE 0);display:grid;place-items:center;margin:3px 0}.x-faw .faw-ph .ph-ring i{position:absolute;inset:6px;border-radius:50%;background:#fff}.x-faw .faw-ph .ph-ring em{position:relative;font-style:normal;font-size:9px;font-weight:600}.x-faw .faw-ph .ph-rows{width:100%;display:grid;gap:3px}.x-faw .faw-ph .ph-rows span{height:5px;border-radius:3px;background:#EEF1F6}.x-faw .faw-ph .ph-rows span:nth-child(2){width:80%}.x-faw .faw-ph .ph-plan{width:100%;font-size:7px;padding:4px 6px;border:1px solid #E6E8EE;border-radius:6px;color:#475467}.x-faw .faw-ph .ph-plan.on{border-color:#2F6BEA;color:#2F6BEA;background:#EEF4FF}.x-faw .faw-ph .ph-btn{margin-top:auto;width:100%;text-align:center;font-size:8px;color:#fff;background:#0E1116;border-radius:7px;padding:5px 0}.x-faw{max-width:none;padding:56px 4%;background-image:radial-gradient(rgba(255,255,255,.22) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}(root) => {
const cards = [...root.querySelectorAll('.faw-c')];
const n = root.querySelector('.faw-n');
const bar = root.querySelector('.faw-prog u');
const typed = root.querySelector('.faw-typed');
const words = ['卡路里计算', '冥想助眠', '背单词', '记账理财'];
const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
let timers = [], w = 0;
const set = (k) => { cards.forEach((c, i) => c.classList.toggle('done', i < k)); n.textContent = k; bar.style.width = (k * 25) + '%'; };
const run = () => {
timers.forEach(clearTimeout); timers = [];
typed.textContent = words[w % words.length]; w++;
…Subscribe to Builder to see the full source.See pricing