3a16b3ecde
10 HTML pages + puro.css + HANDOFF.md + 2 images (~810KB total). Reference artifacts for Stage 3 Vue 3 translation. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
473 lines
31 KiB
HTML
473 lines
31 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="color-scheme" content="dark">
|
||
<title>Pricing — PURO AI</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<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&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||
<link rel="stylesheet" href="puro.css">
|
||
<style>
|
||
.hero { max-width: 1180px; margin: 0 auto; padding: 80px 32px 40px; text-align: center; }
|
||
.hero h1 { font-size: 54px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 18px; }
|
||
.hero h1 .accent { color: var(--cyan); }
|
||
.hero .sub { color: var(--text-2); font-size: 17px; max-width: 620px; margin: 0 auto 14px; line-height: 1.6; }
|
||
.hero .underline { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 12px; color: var(--text-3); padding: 6px 14px; background: rgba(2, 6, 23, 0.5); border: 1px solid var(--border); border-radius: 100px; }
|
||
.hero .underline .dot { width: 6px; height: 6px; background: var(--green); border-radius: 50%; box-shadow: 0 0 0 3px rgba(52,211,153,0.15); }
|
||
|
||
.pricing-wrap { max-width: 1180px; margin: 0 auto; padding: 20px 32px 40px; }
|
||
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
|
||
.tier { position: relative; border: 1px solid var(--border); border-radius: var(--r-xl); background: rgba(15, 23, 42, 0.5); padding: 28px 24px; display: flex; flex-direction: column; transition: all .2s; }
|
||
.tier:hover { border-color: var(--border-2); transform: translateY(-3px); }
|
||
.tier.popular { border-color: rgba(34, 211, 238, 0.4); background: radial-gradient(500px 300px at 50% 0%, rgba(34,211,238,0.08), transparent 60%), rgba(15, 23, 42, 0.7); box-shadow: 0 0 0 1px rgba(34,211,238,0.15), 0 20px 40px -20px rgba(34,211,238,0.2); transform: translateY(-6px); }
|
||
.tier.popular:hover { transform: translateY(-9px); }
|
||
.tier .flag { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; padding: 4px 12px; border-radius: 100px; background: var(--cyan); color: #042f2e; font-weight: 700; }
|
||
.tier .flag.amber { background: var(--amber); color: #422006; }
|
||
.tier .flag.muted { background: rgba(100, 116, 139, 0.2); color: var(--text-2); border: 1px solid var(--border); }
|
||
|
||
.tier-name { font-size: 13px; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
|
||
.tier-headline { font-size: 16px; font-weight: 600; color: var(--text-0); margin-bottom: 22px; line-height: 1.35; min-height: 44px; }
|
||
|
||
.price-row { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
|
||
.price { font-family: var(--font-mono); font-size: 42px; font-weight: 800; letter-spacing: -0.03em; color: var(--text-0); }
|
||
.tier.popular .price { color: var(--cyan); }
|
||
.price .curr { font-size: 18px; font-weight: 600; color: var(--text-3); margin-right: 2px; vertical-align: super; }
|
||
.credit-line { font-family: var(--font-mono); font-size: 12px; color: var(--cyan); margin-bottom: 14px; }
|
||
.credit-line .arrow { margin: 0 6px; color: var(--text-3); }
|
||
.credit-line .bonus { padding: 2px 8px; background: rgba(34,211,238,0.08); border: 1px solid rgba(34,211,238,0.25); border-radius: 4px; font-weight: 600; margin-left: 6px; }
|
||
.discount-tag { display: inline-block; font-family: var(--font-mono); font-size: 11px; color: var(--amber); background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.25); border-radius: 4px; padding: 3px 8px; margin-bottom: 18px; }
|
||
|
||
.tier hr { border: none; border-top: 1px dashed var(--border); margin: 4px 0 18px; }
|
||
|
||
.feat { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--text-1); padding: 4px 0; line-height: 1.55; }
|
||
.feat .tick { color: var(--cyan); flex-shrink: 0; margin-top: 2px; }
|
||
.feat.muted { color: var(--text-3); }
|
||
.feat.muted .tick { color: var(--text-3); }
|
||
.feat b { color: var(--text-0); font-weight: 600; }
|
||
.feats { display: flex; flex-direction: column; gap: 2px; margin-bottom: 24px; flex: 1; }
|
||
.tier-cta { width: 100%; justify-content: center; }
|
||
|
||
.custom-row { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
|
||
.custom-card { padding: 24px; border: 1px solid var(--border); border-radius: var(--r-xl); background: linear-gradient(135deg, rgba(168,85,247,0.05), transparent 50%), rgba(15, 23, 42, 0.4); display: flex; align-items: center; gap: 22px; }
|
||
.custom-card .icon { width: 48px; height: 48px; border-radius: 10px; background: rgba(34,211,238,0.1); color: var(--cyan); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
||
.custom-card .icon.purple { background: rgba(168,85,247,0.1); color: var(--purple); }
|
||
.custom-card h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
|
||
.custom-card p { font-size: 13px; color: var(--text-2); line-height: 1.5; }
|
||
.custom-card .btn { margin-left: auto; flex-shrink: 0; }
|
||
|
||
.works { max-width: 1180px; margin: 0 auto; padding: 80px 32px 40px; }
|
||
.section-head { text-align: center; margin-bottom: 32px; }
|
||
.section-head .kicker { font-family: var(--font-mono); font-size: 12px; color: var(--cyan); letter-spacing: 0.14em; margin-bottom: 10px; }
|
||
.section-head h2 { font-size: 32px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 8px; }
|
||
.section-head p { color: var(--text-2); font-size: 15px; max-width: 560px; margin: 0 auto; line-height: 1.55; }
|
||
.tools-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
|
||
.tool { padding: 18px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: rgba(15, 23, 42, 0.4); text-align: center; transition: all .15s; }
|
||
.tool:hover { border-color: var(--border-2); background: rgba(15, 23, 42, 0.7); }
|
||
.tool .logo { width: 28px; height: 28px; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; color: var(--text-1); }
|
||
.tool .name { font-size: 12px; font-weight: 500; color: var(--text-1); }
|
||
.tool .tag { font-size: 10px; color: var(--text-3); margin-top: 2px; font-family: var(--font-mono); }
|
||
|
||
.calc-section { max-width: 1180px; margin: 0 auto; padding: 40px 32px; }
|
||
.calc { border: 1px solid var(--border); border-radius: var(--r-xl); background: radial-gradient(600px 300px at 0% 0%, rgba(34,211,238,0.06), transparent 60%), radial-gradient(600px 300px at 100% 100%, rgba(168,85,247,0.06), transparent 60%), rgba(15, 23, 42, 0.4); padding: 32px 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
|
||
.calc-left h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
|
||
.calc-left .sub { color: var(--text-2); font-size: 14px; line-height: 1.55; margin-bottom: 22px; }
|
||
.calc-controls { display: flex; flex-direction: column; gap: 14px; }
|
||
.slider-row .s-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 6px; align-items: baseline; }
|
||
.slider-row .s-top .val { font-family: var(--font-mono); font-weight: 700; color: var(--cyan); }
|
||
.slider-row input[type=range] { -webkit-appearance: none; width: 100%; height: 4px; background: var(--border); border-radius: 2px; outline: none; }
|
||
.slider-row input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--cyan); cursor: pointer; box-shadow: 0 0 0 4px rgba(34,211,238,0.15); }
|
||
|
||
.calc-right { background: rgba(2, 6, 23, 0.6); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 28px; }
|
||
.calc-right .breakdown { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
|
||
.calc-right .line { display: flex; justify-content: space-between; font-size: 13px; }
|
||
.calc-right .line .lab { color: var(--text-2); }
|
||
.calc-right .line .v { font-family: var(--font-mono); color: var(--text-0); }
|
||
.calc-right .line.savings .v { color: var(--green); }
|
||
.calc-right .total-line { padding-top: 14px; border-top: 1px dashed var(--border); display: flex; justify-content: space-between; align-items: baseline; }
|
||
.calc-right .total-line .lab { font-size: 12px; color: var(--text-3); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.14em; }
|
||
.calc-right .total-line .big { font-family: var(--font-mono); font-size: 28px; font-weight: 800; color: var(--cyan); letter-spacing: -0.02em; }
|
||
.calc-right .total-line .big .curr { font-size: 14px; color: var(--text-3); font-weight: 500; margin-right: 2px; }
|
||
|
||
.faq-section { max-width: 880px; margin: 0 auto; padding: 60px 32px 100px; }
|
||
.faq { border: 1px solid var(--border); border-radius: var(--r-md); background: rgba(15, 23, 42, 0.4); margin-bottom: 8px; overflow: hidden; transition: all .15s; }
|
||
.faq:hover { border-color: var(--border-2); }
|
||
.faq summary { padding: 18px 22px; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 500; color: var(--text-0); position: relative; }
|
||
.faq summary::-webkit-details-marker { display: none; }
|
||
.faq summary::after { content: "+"; margin-left: auto; font-family: var(--font-mono); font-size: 18px; color: var(--text-3); transition: transform .2s; }
|
||
.faq[open] summary::after { content: "−"; color: var(--cyan); }
|
||
.faq summary .num { font-family: var(--font-mono); font-size: 11px; color: var(--cyan); letter-spacing: 0.1em; min-width: 26px; }
|
||
.faq .answer { padding: 0 22px 20px 62px; color: var(--text-2); font-size: 14px; line-height: 1.7; }
|
||
.faq .answer code { font-family: var(--font-mono); background: rgba(2, 6, 23, 0.6); padding: 1px 6px; border-radius: 3px; color: var(--cyan); font-size: 12.5px; }
|
||
.faq .answer a { color: var(--cyan); }
|
||
.faq .answer ul { padding-left: 20px; margin-top: 8px; }
|
||
|
||
.final-cta { max-width: 1180px; margin: 40px auto 80px; padding: 0 32px; }
|
||
.final-cta-inner { padding: 48px; border: 1px solid var(--border); border-radius: var(--r-xl); background: radial-gradient(800px 400px at 50% 0%, rgba(34,211,238,0.08), transparent 60%), rgba(15, 23, 42, 0.6); text-align: center; }
|
||
.final-cta-inner h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
|
||
.final-cta-inner p { color: var(--text-2); font-size: 15px; margin-bottom: 26px; }
|
||
|
||
@media (max-width: 960px) {
|
||
.pricing-grid { grid-template-columns: 1fr 1fr; }
|
||
.custom-row { grid-template-columns: 1fr; }
|
||
.tools-grid { grid-template-columns: repeat(3, 1fr); }
|
||
.calc { grid-template-columns: 1fr; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="bg-glow"></div>
|
||
<div class="grain"></div>
|
||
|
||
<nav class="nav">
|
||
<div class="container nav-inner">
|
||
<a class="brand" href="Landing.html">
|
||
<svg class="hex" viewBox="0 0 24 24" fill="none">
|
||
<path d="M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke="currentColor" stroke-width="1.8" fill="rgba(34, 211, 238, 0.08)"/>
|
||
<path d="M12 7L17 9.5V14.5L12 17L7 14.5V9.5L12 7Z" fill="currentColor"/>
|
||
</svg>
|
||
PURO AI
|
||
</a>
|
||
<div class="nav-links">
|
||
<a href="Landing.html">产品</a>
|
||
<a href="#" class="active">定价</a>
|
||
<a href="Docs.html">文档</a>
|
||
<a href="Design System.html">设计系统</a>
|
||
</div>
|
||
<div class="nav-cta">
|
||
<a href="Login.html" class="btn btn-ghost">登录</a>
|
||
<a href="Register.html" class="btn btn-primary">开始使用</a>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<section class="hero">
|
||
<div class="section-kicker" style="margin-bottom:14px;">// pricing · 充多少 · 用多少 · 永不过期</div>
|
||
<h1>一次充值,<span class="accent">全平台</span>通用</h1>
|
||
<p class="sub">
|
||
同一份积分可以用在 Claude / ChatGPT / Gemini 任意池上。我们把你的订阅额度变成真正的 API 余额 —— 相比官方 API 便宜 <b class="text-cyan">至多 70%</b>。
|
||
</p>
|
||
<div class="underline">
|
||
<span class="dot"></span>
|
||
余额永不过期 · 支持支付宝 / 微信 / USDT · 无隐藏订阅费
|
||
</div>
|
||
</section>
|
||
|
||
<div class="pricing-wrap">
|
||
<div class="pricing-grid">
|
||
|
||
<div class="tier">
|
||
<span class="flag muted">STARTER</span>
|
||
<div class="tier-name">tier · 01</div>
|
||
<div class="tier-headline">先尝尝鲜,跑通接入</div>
|
||
<div class="price-row"><span class="price"><span class="curr">$</span>9.9</span></div>
|
||
<div class="credit-line">充 $9.9 <span class="arrow">→</span> 得 <b>$12</b> 积分 <span class="bonus">+21%</span></div>
|
||
<span class="discount-tag">相当于官方 API · 0.5 折起</span>
|
||
<hr/>
|
||
<div class="feats">
|
||
<div class="feat"><span class="tick">✓</span>可用所有模型 / 所有池</div>
|
||
<div class="feat"><span class="tick">✓</span><b>1</b> 个 API Key</div>
|
||
<div class="feat"><span class="tick">✓</span>60 RPM 速率限制</div>
|
||
<div class="feat"><span class="tick">✓</span>基础日志(7 天保留)</div>
|
||
<div class="feat muted"><span class="tick">✗</span>自带订阅接入</div>
|
||
<div class="feat muted"><span class="tick">✗</span>团队 / 多人协作</div>
|
||
</div>
|
||
<a href="Register.html" class="btn btn-ghost btn-lg tier-cta">充值 →</a>
|
||
</div>
|
||
|
||
<div class="tier popular">
|
||
<span class="flag">◆ 推荐</span>
|
||
<div class="tier-name">tier · 02</div>
|
||
<div class="tier-headline">个人重度用户 · 最划算</div>
|
||
<div class="price-row"><span class="price"><span class="curr">$</span>29.9</span></div>
|
||
<div class="credit-line">充 $29.9 <span class="arrow">→</span> 得 <b>$45</b> 积分 <span class="bonus">+50%</span></div>
|
||
<span class="discount-tag">相当于官方 API · 3-7 折</span>
|
||
<hr/>
|
||
<div class="feats">
|
||
<div class="feat"><span class="tick">✓</span>可用所有模型 / 所有池</div>
|
||
<div class="feat"><span class="tick">✓</span><b>3</b> 个 API Key · 独立预算</div>
|
||
<div class="feat"><span class="tick">✓</span>120 RPM 速率限制</div>
|
||
<div class="feat"><span class="tick">✓</span>调用日志(30 天保留)</div>
|
||
<div class="feat"><span class="tick">✓</span>自带订阅接入(无限个)</div>
|
||
<div class="feat"><span class="tick">✓</span>多账号 failover 调度</div>
|
||
</div>
|
||
<a href="Register.html" class="btn btn-primary btn-lg tier-cta">立即充值 →</a>
|
||
</div>
|
||
|
||
<div class="tier">
|
||
<span class="flag amber">⚡ 限时 +100%</span>
|
||
<div class="tier-name">tier · 03</div>
|
||
<div class="tier-headline">小团队 / 长跑项目</div>
|
||
<div class="price-row"><span class="price"><span class="curr">$</span>99</span></div>
|
||
<div class="credit-line">充 $99 <span class="arrow">→</span> 得 <b>$198</b> 积分 <span class="bonus">+100%</span></div>
|
||
<span class="discount-tag">相当于官方 API · 2-5 折</span>
|
||
<hr/>
|
||
<div class="feats">
|
||
<div class="feat"><span class="tick">✓</span>所有 Pro 能力</div>
|
||
<div class="feat"><span class="tick">✓</span><b>10</b> 个 API Key · 独立预算</div>
|
||
<div class="feat"><span class="tick">✓</span>300 RPM 速率限制</div>
|
||
<div class="feat"><span class="tick">✓</span>调用日志(90 天保留)</div>
|
||
<div class="feat"><span class="tick">✓</span>请求优先级加权调度</div>
|
||
<div class="feat"><span class="tick">✓</span>Slack / Discord 群组支持</div>
|
||
</div>
|
||
<a href="Register.html" class="btn btn-ghost btn-lg tier-cta">充值 →</a>
|
||
</div>
|
||
|
||
<div class="tier">
|
||
<span class="flag muted">CUSTOM</span>
|
||
<div class="tier-name">tier · 04</div>
|
||
<div class="tier-headline">自定义金额 · 按需充值</div>
|
||
<div class="price-row"><span class="price"><span class="curr">$</span><span id="custom-amt">50</span></span></div>
|
||
<div class="credit-line">得约 <b id="custom-credit">$78</b> 积分 <span class="bonus">+<span id="custom-bonus">56</span>%</span></div>
|
||
<input type="range" min="10" max="500" value="50" step="10" id="custom-slider" style="-webkit-appearance:none; width:100%; height:4px; background:var(--border); border-radius:2px; margin-bottom:12px;">
|
||
<span class="discount-tag">根据金额阶梯自动匹配折扣</span>
|
||
<hr/>
|
||
<div class="feats">
|
||
<div class="feat"><span class="tick">✓</span>积分永不过期</div>
|
||
<div class="feat"><span class="tick">✓</span>Pro 全部能力</div>
|
||
<div class="feat"><span class="tick">✓</span>阶梯 +21% ~ +100%</div>
|
||
<div class="feat"><span class="tick">✓</span>支付宝 / 微信 / USDT</div>
|
||
<div class="feat muted"><span class="tick">—</span>拖动滑块预览赠送</div>
|
||
</div>
|
||
<a href="Register.html" class="btn btn-ghost btn-lg tier-cta">定制充值 →</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="custom-row">
|
||
<div class="custom-card">
|
||
<div class="icon purple"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 20h20"/><path d="M4 20V10l8-6 8 6v10"/><path d="M9 20v-7h6v7"/></svg></div>
|
||
<div style="flex:1;">
|
||
<h3>Enterprise · 企业定制</h3>
|
||
<p>专属订阅池、SLA、合规审计、私有化部署、发票结算。规模 >$500/月起可申请。</p>
|
||
</div>
|
||
<a href="#" class="btn btn-ghost">联系商务 →</a>
|
||
</div>
|
||
<div class="custom-card">
|
||
<div class="icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg></div>
|
||
<div style="flex:1;">
|
||
<h3>已有订阅?直接接入</h3>
|
||
<p>有 Claude Max / ChatGPT Pro?免费注册后绑定,只为 PURO 路由费买单 —— 按次 <code class="pill">$0.0008/request</code>。</p>
|
||
</div>
|
||
<a href="Binding.html" class="btn btn-ghost">接入我的订阅 →</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<section class="calc-section">
|
||
<div class="calc">
|
||
<div class="calc-left">
|
||
<div class="section-kicker" style="margin-bottom:10px">// cost estimator</div>
|
||
<h3>算算你能省多少?</h3>
|
||
<p class="sub">按你的使用场景,对比 PURO 和官方 API 的月度花费差。数字会根据你选的场景自动更新。</p>
|
||
<div class="calc-controls">
|
||
<div class="slider-row">
|
||
<div class="s-top"><span>日均请求数</span><span class="val" id="req-val">5,000</span></div>
|
||
<input type="range" min="500" max="50000" step="500" value="5000" id="req-slider">
|
||
</div>
|
||
<div class="slider-row">
|
||
<div class="s-top"><span>平均每请求 tokens</span><span class="val" id="tok-val">3,000</span></div>
|
||
<input type="range" min="500" max="10000" step="500" value="3000" id="tok-slider">
|
||
</div>
|
||
<div class="slider-row">
|
||
<div class="s-top"><span>Claude 占比</span><span class="val" id="mix-val">50%</span></div>
|
||
<input type="range" min="0" max="100" step="10" value="50" id="mix-slider">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="calc-right">
|
||
<div class="breakdown">
|
||
<div class="line"><span class="lab">月度 tokens 消耗</span><span class="v" id="total-tok">450M</span></div>
|
||
<div class="line"><span class="lab">官方 API 价格</span><span class="v" id="official-cost">$1,620</span></div>
|
||
<div class="line"><span class="lab">PURO 价格(含 +50% 赠送)</span><span class="v" id="puro-cost">$486</span></div>
|
||
<div class="line savings"><span class="lab">节省</span><span class="v" id="save-amt">$1,134 · 70%</span></div>
|
||
</div>
|
||
<div class="total-line">
|
||
<div>
|
||
<div class="lab">建议充值</div>
|
||
<div style="font-size:12px; color:var(--text-3); margin-top:4px;" id="rec-note">≈ 3 天试用 + Pro 档充值</div>
|
||
</div>
|
||
<div class="big"><span class="curr">$</span><span id="rec-amt">486</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="works">
|
||
<div class="section-head">
|
||
<div class="kicker">// works everywhere</div>
|
||
<h2>一个 key,所有工具通用</h2>
|
||
<p>只要支持自定义 <code class="pill">base_url</code> 或 OpenAI / Anthropic API,都能直接接入 PURO。</p>
|
||
</div>
|
||
<div class="tools-grid">
|
||
<div class="tool"><div class="logo"><svg width="22" height="22" viewBox="0 0 24 24" fill="#d97757"><path d="M4.5 19L12 4l7.5 15H16l-4-8.5L8 19H4.5z"/></svg></div><div class="name">Claude Code</div><div class="tag">ANTHROPIC_BASE_URL</div></div>
|
||
<div class="tool"><div class="logo"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 18L18 6M8 6h10v10"/></svg></div><div class="name">Cursor</div><div class="tag">自定义模型</div></div>
|
||
<div class="tool"><div class="logo"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg></div><div class="name">Cline</div><div class="tag">OpenAI 兼容</div></div>
|
||
<div class="tool"><div class="logo"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="8"/><path d="m8 12 2 2 6-6"/></svg></div><div class="name">Roo Code</div><div class="tag">OpenAI 兼容</div></div>
|
||
<div class="tool"><div class="logo"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M3 12h4l3-8 4 16 3-8h4"/></svg></div><div class="name">Continue</div><div class="tag">config.yaml</div></div>
|
||
<div class="tool"><div class="logo"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="9"/><path d="M12 3v18M3 12h18"/></svg></div><div class="name">OpenAI SDK</div><div class="tag">Python / Node</div></div>
|
||
<div class="tool"><div class="logo"><svg width="22" height="22" viewBox="0 0 24 24" fill="#d97757"><path d="M4.5 19L12 4l7.5 15H16l-4-8.5L8 19H4.5z"/></svg></div><div class="name">Anthropic SDK</div><div class="tag">原生 Claude</div></div>
|
||
<div class="tool"><div class="logo"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 10h18M8 5v14"/></svg></div><div class="name">Open WebUI</div><div class="tag">自定义 base</div></div>
|
||
<div class="tool"><div class="logo"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2L2 7v10l10 5 10-5V7z"/><path d="M12 22V12M2 7l10 5 10-5"/></svg></div><div class="name">LangChain</div><div class="tag">LLM 节点</div></div>
|
||
<div class="tool"><div class="logo"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><circle cx="12" cy="18" r="3"/><path d="M6 9v3l6 3M18 9v3l-6 3"/></svg></div><div class="name">LlamaIndex</div><div class="tag">模型路由</div></div>
|
||
<div class="tool"><div class="logo"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M9 9h6v6H9z"/></svg></div><div class="name">Zed</div><div class="tag">Assistant</div></div>
|
||
<div class="tool"><div class="logo"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z"/></svg></div><div class="name">更多…</div><div class="tag">60+ 工具</div></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="faq-section">
|
||
<div class="section-head">
|
||
<div class="kicker">// frequently asked</div>
|
||
<h2>你可能想问的</h2>
|
||
<p>没找到答案?<a href="#" style="color:var(--cyan)">发邮件给我们 ↗</a> · 通常 2 小时内回复。</p>
|
||
</div>
|
||
|
||
<details class="faq" open>
|
||
<summary><span class="num">01</span>PURO 和 API 中转站 / API 代理有什么不同?</summary>
|
||
<div class="answer">
|
||
中转站只是把官方 API 请求转一手,价格取决于你预付多少 balance。PURO 的不同是 —— 我们让你 <b>把已有的 Claude Pro / ChatGPT Plus 订阅变成 API</b>。
|
||
你原本就在付的 $20/月,不再只能在官网聊天里用,而是通过统一 API 喂给 Cursor、Claude Code、任何 SDK。
|
||
同时我们也提供按量充值的官方 API 备用池,两种模式可以混用。
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq">
|
||
<summary><span class="num">02</span>用订阅跑 API 会不会被封号?</summary>
|
||
<div class="answer">
|
||
我们会自动控制每个订阅的请求节奏,并在触发限流时把请求 failover 到池子里的其他订阅。实际上 PURO 的调用模式比你在官方客户端直接复制粘贴大段对话 <b>更不容易触发风控</b>。
|
||
你绑定多个订阅时,单个账号的 <code>RPM</code> 会被压到足够安全的阈值内。另外所有凭证用 AES-256 加密存储,请求链路不经过第三方。
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq">
|
||
<summary><span class="num">03</span>积分会过期吗?可以退款吗?</summary>
|
||
<div class="answer">
|
||
<b>积分永不过期。</b>你可以攒着慢慢用 —— 包括几个月都不用。首次充值 7 天内未产生任何调用可全额退款,之后按剩余积分 85% 比例退。详见 <a href="#">退款政策</a>。
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq">
|
||
<summary><span class="num">04</span>支持哪些支付方式?</summary>
|
||
<div class="answer">
|
||
国内:支付宝 · 微信支付。国际:Stripe 信用卡 · USDT (TRC20 / ERC20) · PayPal。企业充值支持 Invoice 对公打款,人民币开票。
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq">
|
||
<summary><span class="num">05</span>一个 PURO 账号可以绑定多少个订阅?</summary>
|
||
<div class="answer">
|
||
<ul>
|
||
<li>Starter 档:<b>不支持</b>绑定自带订阅</li>
|
||
<li>Pro 档及以上:<b>无限制</b>,你可以把 10 个 ChatGPT Plus + 3 个 Claude Pro 一起绑上去,统一调度</li>
|
||
<li>Enterprise:支持跨团队共享池,按组织维度隔离</li>
|
||
</ul>
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq">
|
||
<summary><span class="num">06</span>如果某个订阅触发限流了会怎样?</summary>
|
||
<div class="answer">
|
||
PURO 的调度器会把受限的订阅自动标记为 <code>cooling</code> 状态,暂时从池子里摘除。同一请求会立刻被 failover 到池内其他健康订阅上 —— 调用方通常 <b>感受不到中断</b>。你可以在 Dashboard 看到每个订阅的当前状态和剩余配额。
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq">
|
||
<summary><span class="num">07</span>计费精度?超量会怎么办?</summary>
|
||
<div class="answer">
|
||
按实际 token 数 + 模型单价计费,精度到 4 位小数。每个 API Key 可设置独立月度预算,达到后 <code>402 Payment Required</code>,不会继续扣费。账户总余额不足时同样会返回 <code>402</code>,且 Dashboard 有 80% / 95% 两级提醒邮件。
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq">
|
||
<summary><span class="num">08</span>数据会被用于训练吗?</summary>
|
||
<div class="answer">
|
||
<b>不会。</b>所有请求仅用于路由转发,不入库、不留存内容(仅保留元数据如模型、token 数、延迟,用于计费和日志)。Pro 档及以上可选开启"零日志模式",我们连请求 ID 都不记录。
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq">
|
||
<summary><span class="num">09</span>可以私有化部署吗?</summary>
|
||
<div class="answer">
|
||
Enterprise 档支持 Docker / K8s 私有化部署,控制面和数据面可以分开。授权按年订阅,包含升级和技术支持。<a href="#">联系商务 →</a>
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq">
|
||
<summary><span class="num">10</span>支持哪些模型?会跟进新模型吗?</summary>
|
||
<div class="answer">
|
||
当前覆盖 Claude(Sonnet 4.5 / Opus 4 / Haiku 4.5)、ChatGPT(GPT-5 / GPT-5 Codex / GPT-4.1)、Gemini(2.5 Pro / 2.5 Flash)。每当官方发布新模型,我们通常在 <b>24 小时内</b>上线。完整模型列表见 <a href="Docs.html">文档</a>。
|
||
</div>
|
||
</details>
|
||
</section>
|
||
|
||
<section class="final-cta">
|
||
<div class="final-cta-inner">
|
||
<div class="section-kicker" style="margin-bottom:12px;">// ready to start</div>
|
||
<h2>5 分钟,拿到你第一个 sk-puro-* key</h2>
|
||
<p>注册送 <b class="text-cyan">$5</b> 测试积分 · 绑定你的第一个订阅即可开始。</p>
|
||
<div style="display:inline-flex; gap:12px;">
|
||
<a href="Register.html" class="btn btn-primary btn-lg">免费注册 →</a>
|
||
<a href="Docs.html" class="btn btn-ghost btn-lg">查看文档</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
const csl = document.getElementById('custom-slider');
|
||
const camt = document.getElementById('custom-amt');
|
||
const ccredit = document.getElementById('custom-credit');
|
||
const cbonus = document.getElementById('custom-bonus');
|
||
function updateCustom() {
|
||
const v = +csl.value;
|
||
camt.textContent = v;
|
||
let bonus = 21;
|
||
if (v >= 500) bonus = 120;
|
||
else if (v >= 200) bonus = 110;
|
||
else if (v >= 99) bonus = 100;
|
||
else if (v >= 50) bonus = 70;
|
||
else if (v >= 30) bonus = 50;
|
||
else if (v >= 20) bonus = 35;
|
||
const credit = Math.round(v * (1 + bonus/100));
|
||
ccredit.textContent = '$' + credit;
|
||
cbonus.textContent = bonus;
|
||
}
|
||
csl.addEventListener('input', updateCustom);
|
||
updateCustom();
|
||
|
||
const reqS = document.getElementById('req-slider');
|
||
const tokS = document.getElementById('tok-slider');
|
||
const mixS = document.getElementById('mix-slider');
|
||
function fmtMoney(n) { return '$' + n.toLocaleString('en-US', { maximumFractionDigits: 0 }); }
|
||
function fmtNum(n) {
|
||
if (n >= 1e9) return (n/1e9).toFixed(1) + 'B';
|
||
if (n >= 1e6) return (n/1e6).toFixed(0) + 'M';
|
||
if (n >= 1e3) return (n/1e3).toFixed(1) + 'k';
|
||
return n.toString();
|
||
}
|
||
function calc() {
|
||
const req = +reqS.value;
|
||
const tok = +tokS.value;
|
||
const mix = +mixS.value;
|
||
document.getElementById('req-val').textContent = req.toLocaleString();
|
||
document.getElementById('tok-val').textContent = tok.toLocaleString();
|
||
document.getElementById('mix-val').textContent = mix + '%';
|
||
const monthlyTok = req * tok * 30;
|
||
const avgOfficial = (mix/100) * 6 + (1 - mix/100) * 3;
|
||
const official = monthlyTok / 1e6 * avgOfficial;
|
||
const puro = official * 0.3;
|
||
const save = official - puro;
|
||
const savePct = Math.round((save / official) * 100);
|
||
document.getElementById('total-tok').textContent = fmtNum(monthlyTok);
|
||
document.getElementById('official-cost').textContent = fmtMoney(official);
|
||
document.getElementById('puro-cost').textContent = fmtMoney(puro);
|
||
document.getElementById('save-amt').textContent = fmtMoney(save) + ' · ' + savePct + '%';
|
||
document.getElementById('rec-amt').textContent = Math.ceil(puro);
|
||
const note = puro < 30 ? '≈ Starter 档够用' : puro < 80 ? '≈ Pro 档 1 个月' : '≈ Scale 档 · 1 个月';
|
||
document.getElementById('rec-note').textContent = note;
|
||
}
|
||
[reqS, tokS, mixS].forEach(s => s.addEventListener('input', calc));
|
||
calc();
|
||
</script>
|
||
</body>
|
||
</html>
|