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>
1424 lines
51 KiB
HTML
1424 lines
51 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="color-scheme" content="dark">
|
||
<title>PURO AI — 你的 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">
|
||
<style>
|
||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||
|
||
:root {
|
||
--bg-0: #0a0e1a;
|
||
--bg-1: #0f172a;
|
||
--bg-2: #111827;
|
||
--border: #1e293b;
|
||
--border-2: #334155;
|
||
--text-0: #f8fafc;
|
||
--text-1: #cbd5e1;
|
||
--text-2: #94a3b8;
|
||
--text-3: #64748b;
|
||
--cyan: #22d3ee;
|
||
--cyan-dim: #0891b2;
|
||
--purple: #a855f7;
|
||
--amber: #fbbf24;
|
||
--green: #34d399;
|
||
--red: #f87171;
|
||
}
|
||
|
||
html, body {
|
||
background: var(--bg-0);
|
||
color: var(--text-0);
|
||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
font-feature-settings: "cv11", "ss01", "ss03";
|
||
-webkit-font-smoothing: antialiased;
|
||
text-rendering: optimizeLegibility;
|
||
line-height: 1.5;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
a { color: inherit; text-decoration: none; }
|
||
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
|
||
|
||
.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
|
||
|
||
/* ---------- Global glows ---------- */
|
||
.bg-glow {
|
||
position: fixed;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
z-index: 0;
|
||
overflow: hidden;
|
||
}
|
||
.bg-glow::before,
|
||
.bg-glow::after {
|
||
content: "";
|
||
position: absolute;
|
||
width: 900px;
|
||
height: 900px;
|
||
border-radius: 50%;
|
||
filter: blur(120px);
|
||
opacity: 0.35;
|
||
}
|
||
.bg-glow::before {
|
||
background: radial-gradient(circle, #22d3ee 0%, transparent 60%);
|
||
top: -300px;
|
||
left: -200px;
|
||
}
|
||
.bg-glow::after {
|
||
background: radial-gradient(circle, #a855f7 0%, transparent 60%);
|
||
top: 200px;
|
||
right: -300px;
|
||
opacity: 0.25;
|
||
}
|
||
|
||
/* grain */
|
||
.grain {
|
||
position: fixed;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
z-index: 1;
|
||
opacity: 0.4;
|
||
mix-blend-mode: overlay;
|
||
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/></svg>");
|
||
}
|
||
|
||
.container {
|
||
max-width: 1100px;
|
||
margin: 0 auto;
|
||
padding: 0 32px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
|
||
/* ---------- NAV ---------- */
|
||
nav {
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 50;
|
||
backdrop-filter: blur(16px);
|
||
background: rgba(10, 14, 26, 0.72);
|
||
border-bottom: 1px solid var(--border);
|
||
}
|
||
.nav-inner {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 64px;
|
||
gap: 48px;
|
||
}
|
||
.brand {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
font-weight: 700;
|
||
font-size: 15px;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
.hex {
|
||
width: 22px;
|
||
height: 22px;
|
||
color: var(--cyan);
|
||
}
|
||
.nav-links {
|
||
display: flex;
|
||
gap: 28px;
|
||
font-size: 14px;
|
||
color: var(--text-2);
|
||
}
|
||
.nav-links a { transition: color .15s; }
|
||
.nav-links a:hover { color: var(--text-0); }
|
||
.nav-links .disabled { color: var(--text-3); cursor: not-allowed; display: inline-flex; align-items: center; gap: 6px; }
|
||
.nav-links .disabled::after {
|
||
content: "即将推出";
|
||
font-size: 10px;
|
||
padding: 2px 6px;
|
||
border: 1px solid var(--border-2);
|
||
border-radius: 4px;
|
||
color: var(--text-3);
|
||
}
|
||
.nav-cta {
|
||
margin-left: auto;
|
||
display: flex;
|
||
gap: 10px;
|
||
align-items: center;
|
||
}
|
||
.btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
padding: 8px 14px;
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
border-radius: 8px;
|
||
transition: all .15s;
|
||
white-space: nowrap;
|
||
}
|
||
.btn-ghost {
|
||
border: 1px solid var(--border-2);
|
||
color: var(--text-1);
|
||
}
|
||
.btn-ghost:hover { border-color: #475569; color: var(--text-0); background: rgba(255,255,255,0.02); }
|
||
.btn-primary {
|
||
background: var(--cyan);
|
||
color: #042f2e;
|
||
font-weight: 600;
|
||
}
|
||
.btn-primary:hover { background: #67e8f9; }
|
||
.btn-lg { padding: 12px 20px; font-size: 14px; }
|
||
|
||
/* ---------- HERO ---------- */
|
||
.hero {
|
||
padding: 120px 0 100px;
|
||
text-align: center;
|
||
position: relative;
|
||
}
|
||
.hero-eyebrow {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 6px 12px 6px 6px;
|
||
border: 1px solid var(--border-2);
|
||
border-radius: 100px;
|
||
font-size: 12px;
|
||
color: var(--text-1);
|
||
margin-bottom: 32px;
|
||
background: rgba(15, 23, 42, 0.6);
|
||
}
|
||
.hero-eyebrow .badge {
|
||
padding: 2px 8px;
|
||
background: rgba(34, 211, 238, 0.1);
|
||
color: var(--cyan);
|
||
border-radius: 100px;
|
||
font-size: 11px;
|
||
font-weight: 600;
|
||
letter-spacing: 0.02em;
|
||
}
|
||
.hero h1 {
|
||
font-size: clamp(40px, 6vw, 72px);
|
||
font-weight: 800;
|
||
line-height: 1.05;
|
||
letter-spacing: -0.03em;
|
||
margin-bottom: 24px;
|
||
}
|
||
.hero h1 .accent {
|
||
color: var(--cyan);
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
.hero h1 .accent::after {
|
||
content: "";
|
||
position: absolute;
|
||
left: -4px; right: -4px;
|
||
bottom: 4px;
|
||
height: 10px;
|
||
background: rgba(34, 211, 238, 0.15);
|
||
z-index: -1;
|
||
border-radius: 2px;
|
||
}
|
||
.hero-sub {
|
||
font-size: 18px;
|
||
color: var(--text-1);
|
||
max-width: 640px;
|
||
margin: 0 auto 40px;
|
||
line-height: 1.6;
|
||
}
|
||
.hero-sub .pill {
|
||
display: inline-block;
|
||
padding: 2px 8px;
|
||
border-radius: 6px;
|
||
background: rgba(255,255,255,0.04);
|
||
border: 1px solid var(--border);
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 13px;
|
||
margin: 0 2px;
|
||
color: var(--text-0);
|
||
}
|
||
.hero-cta {
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: center;
|
||
margin-bottom: 24px;
|
||
}
|
||
.hero-micro {
|
||
font-size: 13px;
|
||
color: var(--text-3);
|
||
display: flex;
|
||
gap: 20px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
.hero-micro span { display: inline-flex; align-items: center; gap: 6px; }
|
||
.hero-micro .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-3); }
|
||
|
||
/* ---------- SECTIONS ---------- */
|
||
section.block {
|
||
padding: 96px 0;
|
||
position: relative;
|
||
}
|
||
.section-head {
|
||
text-align: center;
|
||
margin-bottom: 64px;
|
||
}
|
||
.section-kicker {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 12px;
|
||
color: var(--cyan);
|
||
letter-spacing: 0.15em;
|
||
text-transform: uppercase;
|
||
margin-bottom: 12px;
|
||
}
|
||
.section-title {
|
||
font-size: clamp(28px, 3.5vw, 40px);
|
||
font-weight: 700;
|
||
letter-spacing: -0.02em;
|
||
line-height: 1.15;
|
||
margin-bottom: 16px;
|
||
}
|
||
.section-sub {
|
||
color: var(--text-2);
|
||
font-size: 16px;
|
||
max-width: 560px;
|
||
margin: 0 auto;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* ---------- MODEL WALL ---------- */
|
||
.model-wall {
|
||
display: grid;
|
||
grid-template-columns: repeat(5, 1fr);
|
||
gap: 12px;
|
||
}
|
||
.model-card {
|
||
background: rgba(15, 23, 42, 0.5);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 28px 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 14px;
|
||
transition: all .2s;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.model-card:not(.disabled):hover {
|
||
border-color: var(--border-2);
|
||
background: rgba(15, 23, 42, 0.8);
|
||
transform: translateY(-2px);
|
||
}
|
||
.model-card.disabled { opacity: 0.4; }
|
||
.model-logo {
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: 8px;
|
||
background: rgba(255,255,255,0.04);
|
||
border: 1px solid var(--border);
|
||
}
|
||
.model-name {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: var(--text-0);
|
||
text-align: center;
|
||
}
|
||
.model-tag {
|
||
font-size: 11px;
|
||
color: var(--text-3);
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
.status-chip {
|
||
position: absolute;
|
||
top: 10px;
|
||
right: 10px;
|
||
width: 6px;
|
||
height: 6px;
|
||
border-radius: 50%;
|
||
background: var(--green);
|
||
box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.15);
|
||
}
|
||
.status-chip.dim { background: var(--text-3); box-shadow: none; }
|
||
|
||
/* ---------- FEATURE CARDS ---------- */
|
||
.features {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 16px;
|
||
}
|
||
.feature {
|
||
background: rgba(15, 23, 42, 0.6);
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
padding: 32px 28px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: all .2s;
|
||
}
|
||
.feature:hover { border-color: var(--border-2); }
|
||
.feature-icon {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-bottom: 20px;
|
||
font-size: 18px;
|
||
}
|
||
.feature:nth-child(1) .feature-icon { background: rgba(34, 211, 238, 0.1); color: var(--cyan); }
|
||
.feature:nth-child(2) .feature-icon { background: rgba(168, 85, 247, 0.1); color: var(--purple); }
|
||
.feature:nth-child(3) .feature-icon { background: rgba(251, 191, 36, 0.1); color: var(--amber); }
|
||
.feature h3 {
|
||
font-size: 18px;
|
||
font-weight: 600;
|
||
margin-bottom: 10px;
|
||
letter-spacing: -0.01em;
|
||
}
|
||
.feature p {
|
||
color: var(--text-2);
|
||
font-size: 14px;
|
||
line-height: 1.65;
|
||
}
|
||
.feature-bullets {
|
||
margin-top: 18px;
|
||
padding-top: 18px;
|
||
border-top: 1px dashed var(--border);
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
.feature-bullets li {
|
||
list-style: none;
|
||
font-size: 12px;
|
||
color: var(--text-3);
|
||
font-family: 'JetBrains Mono', monospace;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
.feature-bullets li::before {
|
||
content: "→";
|
||
color: var(--cyan);
|
||
}
|
||
|
||
/* ---------- CODE DEMO ---------- */
|
||
.code-frame {
|
||
background: #020617;
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 30px 60px -30px rgba(0,0,0,0.6);
|
||
}
|
||
.code-tabs {
|
||
display: flex;
|
||
align-items: center;
|
||
height: 40px;
|
||
padding: 0 16px;
|
||
border-bottom: 1px solid var(--border);
|
||
background: rgba(15, 23, 42, 0.8);
|
||
gap: 4px;
|
||
}
|
||
.traffic {
|
||
display: flex;
|
||
gap: 6px;
|
||
margin-right: 16px;
|
||
}
|
||
.traffic span {
|
||
width: 10px;
|
||
height: 10px;
|
||
border-radius: 50%;
|
||
}
|
||
.traffic span:nth-child(1) { background: #475569; }
|
||
.traffic span:nth-child(2) { background: #475569; }
|
||
.traffic span:nth-child(3) { background: #475569; }
|
||
.tab {
|
||
padding: 8px 14px;
|
||
font-size: 12px;
|
||
color: var(--text-3);
|
||
font-family: 'JetBrains Mono', monospace;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: all .15s;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.tab.active { background: rgba(34, 211, 238, 0.08); color: var(--cyan); }
|
||
.tab:not(.active):hover { color: var(--text-1); }
|
||
.tab-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: 0.6; }
|
||
|
||
.code-body {
|
||
padding: 24px 28px;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 13px;
|
||
line-height: 1.75;
|
||
color: var(--text-1);
|
||
overflow-x: auto;
|
||
}
|
||
.code-body .line { display: flex; gap: 20px; }
|
||
.ln { color: var(--text-3); user-select: none; min-width: 16px; text-align: right; opacity: 0.5; }
|
||
.kw { color: #c084fc; }
|
||
.str { color: #86efac; }
|
||
.num { color: #fbbf24; }
|
||
.com { color: #64748b; font-style: italic; }
|
||
.fn { color: #22d3ee; }
|
||
.prop { color: #f0abfc; }
|
||
.var-v { color: #f8fafc; }
|
||
.flag { color: #fb923c; }
|
||
.bash-prompt { color: var(--cyan); user-select: none; }
|
||
|
||
.code-note {
|
||
margin-top: 20px;
|
||
font-size: 12px;
|
||
color: var(--text-3);
|
||
text-align: center;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
.code-note span { margin: 0 6px; color: var(--border-2); }
|
||
|
||
.demo-panels {
|
||
display: grid;
|
||
grid-template-columns: 1fr;
|
||
gap: 16px;
|
||
}
|
||
|
||
/* ---------- DASHBOARD ---------- */
|
||
.dash {
|
||
background: var(--bg-1);
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
overflow: hidden;
|
||
box-shadow: 0 40px 80px -40px rgba(0,0,0,0.8);
|
||
}
|
||
.dash-head {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 14px 20px;
|
||
border-bottom: 1px solid var(--border);
|
||
gap: 12px;
|
||
background: rgba(15, 23, 42, 0.7);
|
||
}
|
||
.dash-head .traffic span { background: #334155; }
|
||
.dash-head .url {
|
||
flex: 1;
|
||
padding: 6px 12px;
|
||
background: var(--bg-0);
|
||
border: 1px solid var(--border);
|
||
border-radius: 6px;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 11px;
|
||
color: var(--text-2);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.dash-head .url::before { content: "🔒"; font-size: 10px; filter: grayscale(1); opacity: 0.6; }
|
||
.dash-body {
|
||
display: grid;
|
||
grid-template-columns: 200px 1fr;
|
||
min-height: 520px;
|
||
}
|
||
.dash-side {
|
||
border-right: 1px solid var(--border);
|
||
padding: 20px 12px;
|
||
background: rgba(2, 6, 23, 0.4);
|
||
}
|
||
.side-group {
|
||
margin-bottom: 24px;
|
||
}
|
||
.side-label {
|
||
font-size: 10px;
|
||
color: var(--text-3);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.12em;
|
||
padding: 0 10px 8px;
|
||
}
|
||
.side-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
padding: 7px 10px;
|
||
border-radius: 6px;
|
||
font-size: 13px;
|
||
color: var(--text-2);
|
||
cursor: pointer;
|
||
}
|
||
.side-item.active { background: rgba(34, 211, 238, 0.08); color: var(--cyan); }
|
||
.side-item .ico {
|
||
width: 14px; height: 14px; opacity: 0.7;
|
||
display: inline-flex; align-items: center; justify-content: center;
|
||
}
|
||
.dash-main { padding: 24px; }
|
||
|
||
.stat-row {
|
||
display: grid;
|
||
grid-template-columns: repeat(4, 1fr);
|
||
gap: 12px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.stat {
|
||
padding: 16px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
background: rgba(15, 23, 42, 0.6);
|
||
}
|
||
.stat-label {
|
||
font-size: 11px;
|
||
color: var(--text-3);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
margin-bottom: 8px;
|
||
}
|
||
.stat-value {
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.02em;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
.stat-delta {
|
||
font-size: 11px;
|
||
color: var(--green);
|
||
margin-top: 4px;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
.stat-delta.down { color: var(--red); }
|
||
|
||
.chart-grid {
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr;
|
||
gap: 16px;
|
||
margin-bottom: 20px;
|
||
}
|
||
.chart-card {
|
||
border: 1px solid var(--border);
|
||
border-radius: 10px;
|
||
background: rgba(15, 23, 42, 0.6);
|
||
padding: 18px;
|
||
}
|
||
.chart-title {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
margin-bottom: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
.chart-title .legend {
|
||
display: flex; gap: 12px; font-size: 11px; color: var(--text-3); font-weight: 400;
|
||
}
|
||
.chart-title .legend span { display: inline-flex; align-items: center; gap: 5px; }
|
||
.chart-title .legend .sw { width: 8px; height: 8px; border-radius: 2px; }
|
||
|
||
/* log table */
|
||
.log-table {
|
||
width: 100%;
|
||
font-size: 12px;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
border-collapse: collapse;
|
||
}
|
||
.log-table th {
|
||
text-align: left;
|
||
color: var(--text-3);
|
||
font-weight: 500;
|
||
padding: 10px 12px;
|
||
border-bottom: 1px solid var(--border);
|
||
text-transform: uppercase;
|
||
font-size: 10px;
|
||
letter-spacing: 0.08em;
|
||
}
|
||
.log-table td {
|
||
padding: 10px 12px;
|
||
border-bottom: 1px solid rgba(30, 41, 59, 0.5);
|
||
color: var(--text-1);
|
||
}
|
||
.log-table tr:last-child td { border-bottom: none; }
|
||
.log-table .status-200 { color: var(--green); }
|
||
.log-table .status-429 { color: var(--amber); }
|
||
.log-table .provider {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.log-table .provider .dot {
|
||
width: 6px; height: 6px; border-radius: 50%;
|
||
}
|
||
.provider.claude .dot { background: #d97757; }
|
||
.provider.gpt .dot { background: #10a37f; }
|
||
.provider.gemini .dot { background: #4285f4; }
|
||
|
||
/* ---------- CTA BANNER ---------- */
|
||
.cta-banner {
|
||
margin: 40px 0;
|
||
padding: 56px 48px;
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
background:
|
||
radial-gradient(600px 300px at 20% 0%, rgba(34,211,238,0.12), transparent 60%),
|
||
radial-gradient(600px 300px at 80% 100%, rgba(168,85,247,0.12), transparent 60%),
|
||
var(--bg-1);
|
||
text-align: center;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.cta-banner h2 {
|
||
font-size: 32px;
|
||
font-weight: 700;
|
||
letter-spacing: -0.02em;
|
||
margin-bottom: 12px;
|
||
}
|
||
.cta-banner p {
|
||
color: var(--text-2);
|
||
margin-bottom: 28px;
|
||
}
|
||
|
||
/* ---------- PRICING (landing preview) ---------- */
|
||
.pricing-grid-landing {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 14px;
|
||
}
|
||
.tier-l {
|
||
position: relative;
|
||
border: 1px solid var(--border);
|
||
border-radius: 16px;
|
||
background: rgba(15, 23, 42, 0.5);
|
||
padding: 28px 24px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
transition: all .2s;
|
||
}
|
||
.tier-l:hover { border-color: var(--border-2); transform: translateY(-3px); }
|
||
.tier-l.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.25);
|
||
transform: translateY(-6px);
|
||
}
|
||
.tier-l.popular:hover { transform: translateY(-9px); }
|
||
.tier-l-flag {
|
||
position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 10px; letter-spacing: 0.14em; padding: 4px 12px;
|
||
border-radius: 100px; background: var(--cyan); color: #042f2e; font-weight: 700;
|
||
white-space: nowrap;
|
||
}
|
||
.tier-l-flag.amber { background: var(--amber); color: #422006; }
|
||
.tier-l-flag.muted { background: rgba(100, 116, 139, 0.2); color: var(--text-2); border: 1px solid var(--border); }
|
||
.tier-l-name { font-size: 12px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
|
||
.tier-l-headline { font-size: 15px; font-weight: 600; color: var(--text-0); margin-bottom: 22px; min-height: 22px; }
|
||
.tier-l-price { font-family: 'JetBrains Mono', monospace; font-size: 42px; font-weight: 800; letter-spacing: -0.03em; color: var(--text-0); line-height: 1; margin-bottom: 6px; }
|
||
.tier-l-price .c { font-size: 18px; font-weight: 600; color: var(--text-3); margin-right: 2px; vertical-align: super; }
|
||
.tier-l.popular .tier-l-price { color: var(--cyan); }
|
||
.tier-l-credit { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--cyan); margin-bottom: 10px; }
|
||
.tier-l-credit .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: 4px; }
|
||
.tier-l-credit b { color: var(--text-0); font-weight: 700; }
|
||
.tier-l-discount {
|
||
display: inline-block;
|
||
font-family: 'JetBrains Mono', monospace; 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-l hr { border: none; border-top: 1px dashed var(--border); margin: 0 0 16px; }
|
||
.tier-l-feats { display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-1); margin-bottom: 22px; flex: 1; }
|
||
.tier-l-feats .muted { color: var(--text-3); }
|
||
.tier-l-cta { width: 100%; justify-content: center; }
|
||
.pricing-footer-row { text-align: center; margin-top: 32px; }
|
||
.pricing-more-link {
|
||
font-family: 'JetBrains Mono', monospace; font-size: 13px;
|
||
color: var(--text-2); display: inline-flex; align-items: center; gap: 8px;
|
||
border-bottom: 1px dashed var(--border-2);
|
||
padding: 4px 0;
|
||
}
|
||
.pricing-more-link span { color: var(--cyan); }
|
||
.pricing-more-link:hover { color: var(--text-0); border-color: var(--cyan); }
|
||
|
||
/* ---------- FAQ (landing) ---------- */
|
||
.faq-l {
|
||
border: 1px solid var(--border);
|
||
border-radius: 12px;
|
||
background: rgba(15, 23, 42, 0.4);
|
||
margin-bottom: 8px;
|
||
overflow: hidden;
|
||
transition: all .15s;
|
||
}
|
||
.faq-l:hover { border-color: var(--border-2); }
|
||
.faq-l 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);
|
||
}
|
||
.faq-l summary::-webkit-details-marker { display: none; }
|
||
.faq-l summary::after {
|
||
content: "+";
|
||
margin-left: auto;
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 18px;
|
||
color: var(--text-3);
|
||
transition: transform .2s;
|
||
}
|
||
.faq-l[open] summary::after { content: "−"; color: var(--cyan); }
|
||
.faq-l summary .num {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 11px;
|
||
color: var(--cyan);
|
||
letter-spacing: 0.1em;
|
||
min-width: 26px;
|
||
}
|
||
.faq-l .faq-answer {
|
||
padding: 0 22px 20px 62px;
|
||
color: var(--text-2);
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
}
|
||
.faq-l .faq-answer b { color: var(--text-1); }
|
||
|
||
@media (max-width: 820px) {
|
||
.pricing-grid-landing { grid-template-columns: 1fr; }
|
||
.tier-l.popular { transform: none; }
|
||
}
|
||
|
||
/* ---------- FOOTER ---------- */
|
||
footer {
|
||
border-top: 1px solid var(--border);
|
||
padding: 72px 0 48px;
|
||
position: relative;
|
||
z-index: 2;
|
||
}
|
||
.footer-grid {
|
||
display: grid;
|
||
grid-template-columns: 2fr 1fr 1fr 1fr;
|
||
gap: 48px;
|
||
margin-bottom: 56px;
|
||
}
|
||
.footer-brand p {
|
||
color: var(--text-3);
|
||
font-size: 13px;
|
||
line-height: 1.7;
|
||
margin-top: 16px;
|
||
max-width: 280px;
|
||
}
|
||
.footer-brand .small {
|
||
font-family: 'JetBrains Mono', monospace;
|
||
font-size: 11px;
|
||
color: var(--text-3);
|
||
margin-top: 14px;
|
||
}
|
||
.footer-col h4 {
|
||
font-size: 12px;
|
||
font-weight: 600;
|
||
color: var(--text-0);
|
||
margin-bottom: 16px;
|
||
letter-spacing: 0.04em;
|
||
text-transform: uppercase;
|
||
}
|
||
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
|
||
.footer-col a {
|
||
font-size: 13px;
|
||
color: var(--text-2);
|
||
transition: color .15s;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
.footer-col a:hover { color: var(--text-0); }
|
||
.footer-col .soft { color: var(--text-3); cursor: default; }
|
||
.footer-bottom {
|
||
border-top: 1px solid var(--border);
|
||
padding-top: 28px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 12px;
|
||
color: var(--text-3);
|
||
font-family: 'JetBrains Mono', monospace;
|
||
}
|
||
.footer-bottom .st {
|
||
display: inline-flex; align-items: center; gap: 8px;
|
||
}
|
||
.footer-bottom .st .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
|
||
|
||
/* responsive */
|
||
@media (max-width: 900px) {
|
||
.model-wall { grid-template-columns: repeat(2, 1fr); }
|
||
.features { grid-template-columns: 1fr; }
|
||
.stat-row { grid-template-columns: repeat(2, 1fr); }
|
||
.chart-grid { grid-template-columns: 1fr; }
|
||
.dash-body { grid-template-columns: 1fr; }
|
||
.dash-side { display: none; }
|
||
.footer-grid { grid-template-columns: 1fr 1fr; }
|
||
.nav-links { display: none; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<div class="bg-glow"></div>
|
||
<div class="grain"></div>
|
||
|
||
<!-- NAV -->
|
||
<nav>
|
||
<div class="container nav-inner">
|
||
<a href="Landing.html" class="brand">
|
||
<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="#features">产品</a>
|
||
<a href="Docs.html">文档</a>
|
||
<a href="#pricing">定价</a>
|
||
<a href="#faq">FAQ</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>
|
||
|
||
<!-- HERO -->
|
||
<section class="hero container">
|
||
<div class="hero-eyebrow">
|
||
<span class="badge">NEW</span>
|
||
统一接入多个 AI 平台 · 零改动切换
|
||
</div>
|
||
<h1>你的 AI 订阅，<br><span class="accent">已经付过钱了。</span></h1>
|
||
<p class="hero-sub">
|
||
Claude Pro · ChatGPT Plus · Codex · Gemini 订阅<br>
|
||
聚合成统一 API，零改动接入 <span class="pill">OpenAI</span> / <span class="pill">Anthropic</span> SDK
|
||
</p>
|
||
<div class="hero-cta">
|
||
<a href="Register.html" class="btn btn-primary btn-lg">立即开始 →</a>
|
||
<a href="#code" class="btn btn-ghost btn-lg">查看文档</a>
|
||
</div>
|
||
<div class="hero-micro">
|
||
<span>无需信用卡</span>
|
||
<span class="dot"></span>
|
||
<span>用你已有的订阅</span>
|
||
<span class="dot"></span>
|
||
<span>5 分钟跑通</span>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- MODEL WALL -->
|
||
<section class="block container" id="models">
|
||
<div class="section-head">
|
||
<div class="section-kicker">// providers</div>
|
||
<h2 class="section-title">支持的 AI 平台</h2>
|
||
<p class="section-sub">通过 OAuth 直接复用你的订阅，无需申请官方 API key</p>
|
||
</div>
|
||
<div class="model-wall">
|
||
<div class="model-card">
|
||
<span class="status-chip" title="在线"></span>
|
||
<div class="model-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="model-name">Claude</div>
|
||
<div class="model-tag">Pro / Max</div>
|
||
</div>
|
||
<div class="model-card">
|
||
<span class="status-chip"></span>
|
||
<div class="model-logo"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#10a37f" stroke-width="1.6"><circle cx="12" cy="12" r="8"/><path d="M12 4v16M4 12h16"/></svg></div>
|
||
<div class="model-name">ChatGPT</div>
|
||
<div class="model-tag">Plus / Pro</div>
|
||
</div>
|
||
<div class="model-card">
|
||
<span class="status-chip"></span>
|
||
<div class="model-logo"><svg width="22" height="22" viewBox="0 0 24 24" fill="#f8fafc"><rect x="4" y="4" width="16" height="16" rx="3" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M8 10l-2 2 2 2M16 10l2 2-2 2M14 8l-4 8" stroke="currentColor" stroke-width="1.6" fill="none" stroke-linecap="round"/></svg></div>
|
||
<div class="model-name">Codex CLI</div>
|
||
<div class="model-tag">OpenAI</div>
|
||
</div>
|
||
<div class="model-card">
|
||
<span class="status-chip"></span>
|
||
<div class="model-logo"><svg width="22" height="22" viewBox="0 0 24 24" fill="#4285f4"><path d="M12 2L14 10L22 12L14 14L12 22L10 14L2 12L10 10Z"/></svg></div>
|
||
<div class="model-name">Gemini</div>
|
||
<div class="model-tag">Code Assist</div>
|
||
</div>
|
||
<div class="model-card disabled">
|
||
<span class="status-chip dim"></span>
|
||
<div class="model-logo"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.6" stroke-linecap="round"><circle cx="5" cy="12" r="1.5" fill="#94a3b8"/><circle cx="12" cy="12" r="1.5" fill="#94a3b8"/><circle cx="19" cy="12" r="1.5" fill="#94a3b8"/></svg></div>
|
||
<div class="model-name">更多</div>
|
||
<div class="model-tag">即将推出</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FEATURES -->
|
||
<section class="block container" id="features">
|
||
<div class="section-head">
|
||
<div class="section-kicker">// features</div>
|
||
<h2 class="section-title">付一次订阅，<br>用起一整个模型池</h2>
|
||
<p class="section-sub">把散落在各个平台的订阅，整合成开发者真正能用的基础设施</p>
|
||
</div>
|
||
<div class="features">
|
||
<div class="feature">
|
||
<div class="feature-icon">⚡</div>
|
||
<h3>一个 key 接所有模型</h3>
|
||
<p>不再为每个 provider 申请 API key、配置 base_url。统一 <span class="mono">sk-</span> 走 Claude / GPT / Gemini，按 model 自动路由到对应账号池。</p>
|
||
<ul class="feature-bullets">
|
||
<li>OpenAI Responses API 兼容</li>
|
||
<li>Anthropic Messages API 兼容</li>
|
||
<li>智能 model → provider 路由</li>
|
||
</ul>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="feature-icon">🔄</div>
|
||
<h3>账号池高可用</h3>
|
||
<p>多账号自动调度。某个 ChatGPT Plus 触发限流，自动 failover 到下一个。重启、刷新 token 全自动。</p>
|
||
<ul class="feature-bullets">
|
||
<li>限流/5xx 自动 failover</li>
|
||
<li>OAuth token 自动刷新</li>
|
||
<li>加权轮询 · 最少连接</li>
|
||
</ul>
|
||
</div>
|
||
<div class="feature">
|
||
<div class="feature-icon">📊</div>
|
||
<h3>用量看板</h3>
|
||
<p>每条请求的 tokens、费用、上游账号、延迟全可视化。模型分布饼图 + 趋势曲线 + Top 排行。</p>
|
||
<ul class="feature-bullets">
|
||
<li>逐请求审计日志</li>
|
||
<li>多维度 tokens / cost 统计</li>
|
||
<li>导出 CSV / 接 Webhook</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- CODE DEMO -->
|
||
<section class="block container" id="code">
|
||
<div class="section-head">
|
||
<div class="section-kicker">// integration</div>
|
||
<h2 class="section-title">把 base_url 一改，就能用</h2>
|
||
<p class="section-sub">兼容 OpenAI / Anthropic / Gemini SDK，零代码改动</p>
|
||
</div>
|
||
|
||
<div class="demo-panels">
|
||
<div class="code-frame">
|
||
<div class="code-tabs">
|
||
<div class="traffic"><span></span><span></span><span></span></div>
|
||
<div class="tab active"><span class="tab-dot"></span>~/.codex/config.toml</div>
|
||
<div class="tab"><span class="tab-dot"></span>curl.sh</div>
|
||
<div style="margin-left:auto; font-size: 11px; color: var(--text-3); font-family: 'JetBrains Mono', monospace;">● edited 2s ago</div>
|
||
</div>
|
||
<pre class="code-body"><div class="line"><span class="ln">1</span><span><span class="com"># Codex CLI — 只改 base_url 就能走 PURO</span></span></div><div class="line"><span class="ln">2</span><span><span class="kw">model_provider</span> = <span class="str">"puro"</span></span></div><div class="line"><span class="ln">3</span><span><span class="kw">model</span> = <span class="str">"gpt-5-codex"</span></span></div><div class="line"><span class="ln">4</span><span></span></div><div class="line"><span class="ln">5</span><span>[<span class="prop">model_providers.puro</span>]</span></div><div class="line"><span class="ln">6</span><span> <span class="kw">name</span> = <span class="str">"PURO AI"</span></span></div><div class="line"><span class="ln">7</span><span> <span class="kw">base_url</span> = <span class="str">"https://ai.puro.im/v1"</span></span></div><div class="line"><span class="ln">8</span><span> <span class="kw">wire_api</span> = <span class="str">"responses"</span></span></div><div class="line"><span class="ln">9</span><span> <span class="kw">env_key</span> = <span class="str">"PURO_API_KEY"</span> <span class="com"># export PURO_API_KEY=sk-puro-…</span></span></div></pre>
|
||
</div>
|
||
|
||
<div class="code-frame">
|
||
<div class="code-tabs">
|
||
<div class="traffic"><span></span><span></span><span></span></div>
|
||
<div class="tab active"><span class="tab-dot"></span>curl.sh</div>
|
||
<div style="margin-left:auto; font-size: 11px; color: var(--text-3); font-family: 'JetBrains Mono', monospace;">zsh · puro ≈ 210ms</div>
|
||
</div>
|
||
<pre class="code-body"><div class="line"><span class="ln">1</span><span><span class="bash-prompt">$</span> <span class="fn">curl</span> https://ai.puro.im/v1/chat/completions <span class="flag">\</span></span></div><div class="line"><span class="ln">2</span><span> <span class="flag">-H</span> <span class="str">"Authorization: Bearer $PURO_API_KEY"</span> <span class="flag">\</span></span></div><div class="line"><span class="ln">3</span><span> <span class="flag">-H</span> <span class="str">"Content-Type: application/json"</span> <span class="flag">\</span></span></div><div class="line"><span class="ln">4</span><span> <span class="flag">-d</span> <span class="str">'{</span></span></div><div class="line"><span class="ln">5</span><span> <span class="str">"model": "claude-sonnet-4-5",</span> <span class="com"># 自动路由到 Claude Pro 池</span></span></div><div class="line"><span class="ln">6</span><span> <span class="str">"stream": true,</span></span></div><div class="line"><span class="ln">7</span><span> <span class="str">"messages": [{ "role": "user", "content": "写一个斐波那契" }]</span></span></div><div class="line"><span class="ln">8</span><span> <span class="str">}'</span></span></div><div class="line"><span class="ln">9</span><span></span></div><div class="line"><span class="ln">10</span><span><span class="com"># ← event: content_block_delta · account=claude-3 · 187ms · 42 tok</span></span></div></pre>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="code-note">
|
||
支持 OpenAI Responses API <span>·</span> Anthropic Messages API <span>·</span> Gemini generateContent <span>·</span> 流式 SSE & WebSocket
|
||
</div>
|
||
</section>
|
||
|
||
<!-- DASHBOARD -->
|
||
<section class="block container" id="dashboard">
|
||
<div class="section-head">
|
||
<div class="section-kicker">// observability</div>
|
||
<h2 class="section-title">每条请求都看得见</h2>
|
||
<p class="section-sub">
|
||
不像第三方 API 池子那种"扣了多少不告诉你"。你能看到每次调用：扣了哪个账号、跑了哪个模型、用了多少 tokens、花了多少钱、上游响应几秒。
|
||
</p>
|
||
</div>
|
||
|
||
<div class="dash">
|
||
<div class="dash-head">
|
||
<div class="traffic"><span></span><span></span><span></span></div>
|
||
<div class="url">ai.puro.im/dashboard</div>
|
||
<div style="font-size: 11px; color: var(--text-3); font-family: 'JetBrains Mono', monospace;">me@puro</div>
|
||
</div>
|
||
<div class="dash-body">
|
||
<aside class="dash-side">
|
||
<div class="side-group">
|
||
<div class="side-label">WORKSPACE</div>
|
||
<div class="side-item active">
|
||
<span class="ico">📊</span> Overview
|
||
</div>
|
||
<div class="side-item">
|
||
<span class="ico">📜</span> Request logs
|
||
</div>
|
||
<div class="side-item">
|
||
<span class="ico">🔑</span> API keys
|
||
</div>
|
||
<div class="side-item">
|
||
<span class="ico">🔌</span> Accounts
|
||
<span style="margin-left:auto; font-size: 10px; color: var(--text-3);">12</span>
|
||
</div>
|
||
</div>
|
||
<div class="side-group">
|
||
<div class="side-label">SETTINGS</div>
|
||
<div class="side-item"><span class="ico">⚙️</span> General</div>
|
||
<div class="side-item"><span class="ico">💳</span> Billing</div>
|
||
<div class="side-item"><span class="ico">👥</span> Team</div>
|
||
</div>
|
||
</aside>
|
||
<div class="dash-main">
|
||
<div class="stat-row">
|
||
<div class="stat">
|
||
<div class="stat-label">Requests · 24h</div>
|
||
<div class="stat-value">18,294</div>
|
||
<div class="stat-delta">▲ 12.4%</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-label">Tokens · 24h</div>
|
||
<div class="stat-value">4.7M</div>
|
||
<div class="stat-delta">▲ 8.1%</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-label">Avg latency</div>
|
||
<div class="stat-value">312ms</div>
|
||
<div class="stat-delta down">▼ 4.2%</div>
|
||
</div>
|
||
<div class="stat">
|
||
<div class="stat-label">Est. savings</div>
|
||
<div class="stat-value" style="color: var(--amber)">$847</div>
|
||
<div class="stat-delta">vs. pay-as-you-go</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chart-grid">
|
||
<div class="chart-card">
|
||
<div class="chart-title">
|
||
Requests over time
|
||
<div class="legend">
|
||
<span><span class="sw" style="background: var(--cyan)"></span> Claude</span>
|
||
<span><span class="sw" style="background: var(--purple)"></span> GPT</span>
|
||
<span><span class="sw" style="background: var(--amber)"></span> Gemini</span>
|
||
</div>
|
||
</div>
|
||
<!-- line chart -->
|
||
<svg viewBox="0 0 500 180" style="width:100%; height:180px;">
|
||
<defs>
|
||
<linearGradient id="gc" x1="0" x2="0" y1="0" y2="1">
|
||
<stop offset="0%" stop-color="#22d3ee" stop-opacity="0.3"/>
|
||
<stop offset="100%" stop-color="#22d3ee" stop-opacity="0"/>
|
||
</linearGradient>
|
||
</defs>
|
||
<!-- grid -->
|
||
<g stroke="#1e293b" stroke-width="1">
|
||
<line x1="0" y1="30" x2="500" y2="30"/>
|
||
<line x1="0" y1="75" x2="500" y2="75"/>
|
||
<line x1="0" y1="120" x2="500" y2="120"/>
|
||
<line x1="0" y1="165" x2="500" y2="165"/>
|
||
</g>
|
||
<!-- area -->
|
||
<path d="M0,120 L40,100 L80,110 L120,80 L160,95 L200,60 L240,70 L280,45 L320,55 L360,30 L400,50 L440,35 L500,25 L500,180 L0,180 Z" fill="url(#gc)"/>
|
||
<!-- cyan line -->
|
||
<path d="M0,120 L40,100 L80,110 L120,80 L160,95 L200,60 L240,70 L280,45 L320,55 L360,30 L400,50 L440,35 L500,25" stroke="#22d3ee" stroke-width="2" fill="none"/>
|
||
<!-- purple line -->
|
||
<path d="M0,140 L40,135 L80,120 L120,130 L160,110 L200,115 L240,90 L280,100 L320,80 L360,90 L400,70 L440,75 L500,55" stroke="#a855f7" stroke-width="2" fill="none" stroke-dasharray="0"/>
|
||
<!-- amber line -->
|
||
<path d="M0,160 L40,155 L80,150 L120,148 L160,145 L200,140 L240,135 L280,130 L320,125 L360,122 L400,118 L440,112 L500,108" stroke="#fbbf24" stroke-width="2" fill="none"/>
|
||
<!-- x labels -->
|
||
<g font-family="JetBrains Mono" font-size="9" fill="#64748b">
|
||
<text x="0" y="178">00:00</text>
|
||
<text x="120" y="178">06:00</text>
|
||
<text x="240" y="178">12:00</text>
|
||
<text x="360" y="178">18:00</text>
|
||
<text x="470" y="178">now</text>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div class="chart-card">
|
||
<div class="chart-title">
|
||
Model distribution
|
||
<span style="font-size: 11px; color: var(--text-3); font-weight: 400;">· 24h</span>
|
||
</div>
|
||
<!-- donut -->
|
||
<div style="display: flex; align-items: center; gap: 20px; padding: 8px 0;">
|
||
<svg viewBox="0 0 42 42" style="width: 120px; height: 120px; transform: rotate(-90deg);">
|
||
<circle cx="21" cy="21" r="15.915" fill="transparent" stroke="#1e293b" stroke-width="6"/>
|
||
<!-- claude 48% -->
|
||
<circle cx="21" cy="21" r="15.915" fill="transparent" stroke="#22d3ee" stroke-width="6" stroke-dasharray="48 52" stroke-dashoffset="0"/>
|
||
<!-- gpt 32% -->
|
||
<circle cx="21" cy="21" r="15.915" fill="transparent" stroke="#a855f7" stroke-width="6" stroke-dasharray="32 68" stroke-dashoffset="-48"/>
|
||
<!-- gemini 14% -->
|
||
<circle cx="21" cy="21" r="15.915" fill="transparent" stroke="#fbbf24" stroke-width="6" stroke-dasharray="14 86" stroke-dashoffset="-80"/>
|
||
<!-- codex 6% -->
|
||
<circle cx="21" cy="21" r="15.915" fill="transparent" stroke="#64748b" stroke-width="6" stroke-dasharray="6 94" stroke-dashoffset="-94"/>
|
||
</svg>
|
||
<div style="flex:1; display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-family: 'JetBrains Mono', monospace;">
|
||
<div style="display:flex; justify-content: space-between;"><span style="color: var(--text-1);"><span style="display:inline-block;width:8px;height:8px;background:#22d3ee;border-radius:2px;margin-right:6px;"></span>Claude</span><span style="color: var(--text-3);">48%</span></div>
|
||
<div style="display:flex; justify-content: space-between;"><span style="color: var(--text-1);"><span style="display:inline-block;width:8px;height:8px;background:#a855f7;border-radius:2px;margin-right:6px;"></span>GPT</span><span style="color: var(--text-3);">32%</span></div>
|
||
<div style="display:flex; justify-content: space-between;"><span style="color: var(--text-1);"><span style="display:inline-block;width:8px;height:8px;background:#fbbf24;border-radius:2px;margin-right:6px;"></span>Gemini</span><span style="color: var(--text-3);">14%</span></div>
|
||
<div style="display:flex; justify-content: space-between;"><span style="color: var(--text-1);"><span style="display:inline-block;width:8px;height:8px;background:#64748b;border-radius:2px;margin-right:6px;"></span>Codex</span><span style="color: var(--text-3);">6%</span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chart-card" style="padding: 0;">
|
||
<div style="padding: 16px 18px 0; display: flex; justify-content: space-between; align-items: center;">
|
||
<div class="chart-title" style="margin: 0;">Recent requests</div>
|
||
<div style="font-size: 11px; color: var(--text-3); font-family: 'JetBrains Mono', monospace;">live · 12 of 18,294</div>
|
||
</div>
|
||
<table class="log-table">
|
||
<thead>
|
||
<tr>
|
||
<th>Time</th>
|
||
<th>Provider</th>
|
||
<th>Model</th>
|
||
<th>Tokens</th>
|
||
<th>Cost</th>
|
||
<th>Latency</th>
|
||
<th>Status</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>13:42:18</td>
|
||
<td><span class="provider claude"><span class="dot"></span>claude-3</span></td>
|
||
<td>sonnet-4-5</td>
|
||
<td>2,847</td>
|
||
<td>$0.042</td>
|
||
<td>213ms</td>
|
||
<td><span class="status-200">● 200</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>13:42:11</td>
|
||
<td><span class="provider gpt"><span class="dot"></span>gpt-plus-7</span></td>
|
||
<td>gpt-5-codex</td>
|
||
<td>1,204</td>
|
||
<td>$0.018</td>
|
||
<td>167ms</td>
|
||
<td><span class="status-200">● 200</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>13:42:03</td>
|
||
<td><span class="provider gemini"><span class="dot"></span>gemini-2</span></td>
|
||
<td>gemini-2.5-pro</td>
|
||
<td>4,102</td>
|
||
<td>$0.000</td>
|
||
<td>392ms</td>
|
||
<td><span class="status-200">● 200</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>13:41:58</td>
|
||
<td><span class="provider claude"><span class="dot"></span>claude-1</span></td>
|
||
<td>sonnet-4-5</td>
|
||
<td>6,318</td>
|
||
<td>$0.095</td>
|
||
<td>284ms</td>
|
||
<td><span class="status-429">● 429 → failover</span></td>
|
||
</tr>
|
||
<tr>
|
||
<td>13:41:49</td>
|
||
<td><span class="provider gpt"><span class="dot"></span>gpt-plus-2</span></td>
|
||
<td>gpt-5</td>
|
||
<td>892</td>
|
||
<td>$0.013</td>
|
||
<td>141ms</td>
|
||
<td><span class="status-200">● 200</span></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CTA BANNER -->
|
||
<div class="cta-banner">
|
||
<h2>把订阅变成 API — 5 分钟</h2>
|
||
<p>绑定第一个账号，生成 sk- key，把 base_url 指过来。就这些。</p>
|
||
<div style="display:flex; gap: 12px; justify-content: center;">
|
||
<a href="Register.html" class="btn btn-primary btn-lg">创建账户 →</a>
|
||
<a href="Login.html" class="btn btn-ghost btn-lg">登录已有账户</a>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- PRICING -->
|
||
<section class="block container" id="pricing">
|
||
<div class="section-head">
|
||
<div class="section-kicker">// pricing</div>
|
||
<h2 class="section-title">充一次,<span class="accent">全平台</span>通用</h2>
|
||
<p class="section-sub">积分永不过期 · 同一份余额可跑 Claude / ChatGPT / Gemini · 支付宝 / 微信 / USDT</p>
|
||
</div>
|
||
|
||
<div class="pricing-grid-landing">
|
||
<div class="tier-l">
|
||
<div class="tier-l-flag muted">STARTER</div>
|
||
<div class="tier-l-name">tier · 01</div>
|
||
<div class="tier-l-headline">尝鲜测试 · 跑通接入</div>
|
||
<div class="tier-l-price"><span class="c">$</span>9.9</div>
|
||
<div class="tier-l-credit">充 $9.9 → 得 <b>$12</b> 积分 <span class="bonus">+21%</span></div>
|
||
<div class="tier-l-discount">相当于官方 API · 0.5 折起</div>
|
||
<hr/>
|
||
<div class="tier-l-feats">
|
||
<div>✓ 全模型 / 全池可用</div>
|
||
<div>✓ 1 个 API Key</div>
|
||
<div>✓ 60 RPM</div>
|
||
<div class="muted">— 不支持自带订阅</div>
|
||
</div>
|
||
<a href="Register.html" class="btn btn-ghost tier-l-cta">充值</a>
|
||
</div>
|
||
|
||
<div class="tier-l popular">
|
||
<div class="tier-l-flag">◆ 推荐</div>
|
||
<div class="tier-l-name">tier · 02</div>
|
||
<div class="tier-l-headline">个人重度用户 · 最划算</div>
|
||
<div class="tier-l-price"><span class="c">$</span>29.9</div>
|
||
<div class="tier-l-credit">充 $29.9 → 得 <b>$45</b> 积分 <span class="bonus">+50%</span></div>
|
||
<div class="tier-l-discount">相当于官方 API · 3-7 折</div>
|
||
<hr/>
|
||
<div class="tier-l-feats">
|
||
<div>✓ 3 个 API Key · 独立预算</div>
|
||
<div>✓ 120 RPM · 30 天日志</div>
|
||
<div>✓ 无限绑定自带订阅</div>
|
||
<div>✓ 多账号 failover 调度</div>
|
||
</div>
|
||
<a href="Register.html" class="btn btn-primary tier-l-cta">立即充值 →</a>
|
||
</div>
|
||
|
||
<div class="tier-l">
|
||
<div class="tier-l-flag amber">⚡ 限时 +100%</div>
|
||
<div class="tier-l-name">tier · 03</div>
|
||
<div class="tier-l-headline">小团队 / 长跑项目</div>
|
||
<div class="tier-l-price"><span class="c">$</span>99</div>
|
||
<div class="tier-l-credit">充 $99 → 得 <b>$198</b> 积分 <span class="bonus">+100%</span></div>
|
||
<div class="tier-l-discount">相当于官方 API · 2-5 折</div>
|
||
<hr/>
|
||
<div class="tier-l-feats">
|
||
<div>✓ 10 个 API Key · 独立预算</div>
|
||
<div>✓ 300 RPM · 90 天日志</div>
|
||
<div>✓ 请求优先级调度</div>
|
||
<div>✓ Slack / Discord 群组支持</div>
|
||
</div>
|
||
<a href="Register.html" class="btn btn-ghost tier-l-cta">充值</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="pricing-footer-row">
|
||
<a href="Pricing.html" class="pricing-more-link">查看完整定价(含 Enterprise / 自定义金额 / 成本估算器) <span>→</span></a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FAQ -->
|
||
<section class="block container" id="faq" style="max-width:920px;">
|
||
<div class="section-head">
|
||
<div class="section-kicker">// frequently asked</div>
|
||
<h2 class="section-title">你可能想问的</h2>
|
||
<p class="section-sub">没找到答案?<a href="#" style="color:var(--cyan); border-bottom:1px dashed var(--cyan);">发邮件给我们 ↗</a> · 通常 2 小时内回复</p>
|
||
</div>
|
||
|
||
<details class="faq-l" open>
|
||
<summary><span class="num">01</span>PURO 和 API 中转站有什么不同?</summary>
|
||
<div class="faq-answer">
|
||
中转站只是转发官方 API,价格取决于你预付的 balance。PURO 的不同是 —— 我们让你<b>把已有的 Claude Pro / ChatGPT Plus 订阅变成 API</b>。
|
||
你原本就在付的 $20/月,不再只能在官网聊天里用,而是通过统一 API 喂给 Cursor、Claude Code、任何 SDK。
|
||
同时也提供按量充值的官方 API 备用池,两种模式可混用。
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq-l">
|
||
<summary><span class="num">02</span>用订阅跑 API 会不会被封号?</summary>
|
||
<div class="faq-answer">
|
||
我们会自动控制每个订阅的请求节奏,并在触发限流时把请求 failover 到池内其他订阅。实际上 PURO 的调用模式比你在官方客户端复制粘贴大段对话<b>更不容易触发风控</b>。
|
||
所有凭证用 AES-256 加密存储,请求链路不经过第三方。
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq-l">
|
||
<summary><span class="num">03</span>积分会过期吗?可以退款吗?</summary>
|
||
<div class="faq-answer">
|
||
<b>积分永不过期。</b>首次充值 7 天内未产生任何调用可全额退款,之后按剩余积分 85% 比例退。
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq-l">
|
||
<summary><span class="num">04</span>支持哪些支付方式?</summary>
|
||
<div class="faq-answer">
|
||
国内:支付宝 · 微信支付。国际:Stripe 信用卡 · USDT (TRC20 / ERC20) · PayPal。企业充值支持 Invoice 对公打款,人民币开票。
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq-l">
|
||
<summary><span class="num">05</span>数据会被用于训练吗?</summary>
|
||
<div class="faq-answer">
|
||
<b>不会。</b>所有请求仅用于路由转发,不入库、不留存内容(仅保留元数据如模型、token 数、延迟,用于计费和日志)。Pro 档及以上可选开启"零日志模式"。
|
||
</div>
|
||
</details>
|
||
|
||
<details class="faq-l">
|
||
<summary><span class="num">06</span>支持哪些模型?新模型上线多久?</summary>
|
||
<div class="faq-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>上线。
|
||
</div>
|
||
</details>
|
||
|
||
<div style="text-align:center; margin-top: 32px;">
|
||
<a href="Pricing.html#faq" style="font-family: 'JetBrains Mono', monospace; font-size: 13px; color: var(--text-2); display:inline-flex; align-items:center; gap:8px;">查看全部 10 个问题 <span style="color:var(--cyan)">→</span></a>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- FOOTER -->
|
||
<footer>
|
||
<div class="container">
|
||
<div class="footer-grid">
|
||
<div class="footer-brand">
|
||
<a href="Landing.html" class="brand">
|
||
<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>
|
||
<p>把多个 AI 订阅聚合成统一 API。让「已经付过钱」的订阅真正为你工作。</p>
|
||
<div class="small">ai.puro.im</div>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>产品</h4>
|
||
<ul>
|
||
<li><a href="Docs.html">文档</a></li>
|
||
<li><a href="Pricing.html">定价</a></li>
|
||
<li><a href="#faq">FAQ</a></li>
|
||
<li><a href="#features">功能</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>资源</h4>
|
||
<ul>
|
||
<li><a href="#">GitHub ↗</a></li>
|
||
<li><a href="#">API 状态</a></li>
|
||
<li><a href="#">Codex 配置示例</a></li>
|
||
<li><a href="#">Claude Code 示例</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="footer-col">
|
||
<h4>账户</h4>
|
||
<ul>
|
||
<li><a href="Login.html">登录</a></li>
|
||
<li><a href="Register.html">注册</a></li>
|
||
<li><a href="Dashboard.html">Dashboard</a></li>
|
||
<li><a href="Binding.html">绑定订阅</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="footer-bottom">
|
||
<div>© 2026 puro.im · Built with ♥ in Shanghai</div>
|
||
<div class="st"><span class="dot"></span>all systems operational</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
|
||
</body>
|
||
</html>
|