Files
u-claw/website/cloud.html
hfshfg d4205215d3 docs: 更新新手提示、隐藏虾盘云注册入口
- README 新手提示加入产品经理故事和招募号召
- 删除 SophNet 广告大段内容
- cloud.html 注册按钮置灰,加暂停服务提示
- index.html 虾盘云入口全部改为不可点击

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-31 19:41:54 +08:00

606 lines
26 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>虾盘云 — OpenClaw AI API 服务</title>
<meta name="description" content="虾盘云:为 OpenClaw / 虾盘 U 盘用户提供的 AI API 服务。接入 DeepSeek、Qwen按量计费开箱即用。">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🦞</text></svg>">
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
--bg: #0a0a0f;
--surface: #12121a;
--border: #1e1e2e;
--text: #e4e4e7;
--text-dim: #71717a;
--accent: #ef4444;
--accent2: #f97316;
--green: #22c55e;
--blue: #3b82f6;
--purple: #a855f7;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
background: var(--bg);
color: var(--text);
line-height: 1.6;
overflow-x: hidden;
}
/* NAV */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between;
padding: 0 40px; height: 58px;
background: rgba(10,10,15,0.85);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.nav-logo {
font-size: 18px; font-weight: 800; letter-spacing: -0.5px;
background: linear-gradient(135deg, #ef4444, #f97316);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
text-decoration: none;
}
.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a {
color: var(--text-dim); text-decoration: none;
font-size: 14px; transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }
.nav-cta {
background: linear-gradient(135deg, #ef4444, #dc2626) !important;
color: white !important;
padding: 8px 20px; border-radius: 8px;
font-weight: 600; font-size: 14px;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 4px 20px rgba(239,68,68,0.3); }
/* HERO */
.hero {
min-height: 100vh;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
text-align: center; padding: 80px 20px 60px;
background: radial-gradient(ellipse at 50% 0%, rgba(239,68,68,0.15) 0%, transparent 60%);
}
.hero-emoji { font-size: 72px; margin-bottom: 20px; }
.hero h1 {
font-size: clamp(40px, 7vw, 80px);
font-weight: 800; letter-spacing: -3px; line-height: 1.05;
margin-bottom: 12px;
background: linear-gradient(135deg, #ef4444, #f97316);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.hero-sub {
font-size: clamp(18px, 2.5vw, 26px);
color: var(--text); font-weight: 600; margin-bottom: 16px;
}
.hero-desc {
font-size: clamp(14px, 1.8vw, 18px);
color: var(--text-dim); max-width: 520px; margin: 0 auto 40px;
}
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.btn {
padding: 14px 32px; border-radius: 12px;
font-size: 16px; font-weight: 600; text-decoration: none;
transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px;
}
.btn-primary {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: white; border: none;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(239,68,68,0.3); }
.btn-outline {
background: transparent; color: var(--text);
border: 1px solid var(--border);
}
.btn-outline:hover { border-color: var(--accent); background: rgba(239,68,68,0.05); }
.hero-stats {
display: flex; gap: 48px; margin-top: 64px;
flex-wrap: wrap; justify-content: center;
}
.stat { text-align: center; }
.stat-num {
font-size: 34px; font-weight: 800;
background: linear-gradient(135deg, #ef4444, #f97316);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-label { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
/* CONFIG DEMO */
.config-demo {
margin-top: 56px; width: 100%; max-width: 560px;
background: var(--surface); border: 1px solid var(--border);
border-radius: 16px; overflow: hidden; text-align: left;
}
.config-header {
display: flex; align-items: center; gap: 8px;
padding: 12px 16px; background: var(--bg);
border-bottom: 1px solid var(--border);
}
.dot { width: 12px; height: 12px; border-radius: 50%; }
.dot.r{background:#ff5f57} .dot.y{background:#febc2e} .dot.g{background:#28c840}
.config-filename { font-size: 12px; color: var(--text-dim); margin-left: 6px; font-family: monospace; }
.config-demo pre {
padding: 20px; font-family: 'Fira Code','Courier New',monospace;
font-size: 13px; line-height: 1.8;
}
.c-comment { color: #4a5568; }
.c-key { color: #68d391; }
.c-str { color: #fbd38d; }
.c-url { color: #63b3ed; }
/* SECTION */
section { padding: 96px 20px; }
.section-inner { max-width: 1080px; margin: 0 auto; }
.section-tag {
display: inline-block; font-size: 12px; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase;
color: var(--accent); margin-bottom: 12px;
}
.section-title {
font-size: clamp(28px, 4vw, 48px); font-weight: 800;
letter-spacing: -1.5px; margin-bottom: 14px;
}
.section-desc { font-size: 17px; color: var(--text-dim); max-width: 500px; }
/* MODELS */
.models-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px; margin-top: 48px;
}
.model-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: 16px; padding: 28px;
transition: border-color 0.2s, transform 0.2s;
}
.model-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.model-emoji { font-size: 32px; margin-bottom: 14px; }
.model-name { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.model-desc { font-size: 13px; color: var(--text-dim); margin-bottom: 20px; line-height: 1.5; }
.model-price-row { display: flex; align-items: baseline; gap: 4px; }
.model-price { font-size: 26px; font-weight: 800;
background: linear-gradient(135deg, #ef4444, #f97316);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.model-unit { font-size: 12px; color: var(--text-dim); }
.model-badge {
display: inline-block; margin-top: 12px;
font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 6px;
}
.badge-hot { background: rgba(239,68,68,0.15); color: var(--accent); }
.badge-fast { background: rgba(34,197,94,0.15); color: var(--green); }
.badge-think { background: rgba(168,85,247,0.15); color: var(--purple); }
/* HOW */
.steps {
display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
gap: 36px; margin-top: 52px;
}
.step-num {
width: 48px; height: 48px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: 800;
background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25);
color: var(--accent); margin-bottom: 18px;
}
.step h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--text-dim); line-height: 1.6; }
/* PRICING */
.pricing-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(270px,1fr));
gap: 20px; margin-top: 52px;
}
.plan {
background: var(--surface); border: 1px solid var(--border);
border-radius: 20px; padding: 36px; position: relative;
transition: transform 0.2s;
}
.plan:hover { transform: translateY(-4px); }
.plan.featured { border-color: var(--accent); background: linear-gradient(160deg, rgba(239,68,68,0.06) 0%, var(--surface) 100%); }
.plan-top-badge {
position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
background: linear-gradient(135deg, #ef4444, #dc2626);
color: #fff; font-size: 11px; font-weight: 700;
padding: 4px 16px; border-radius: 20px; white-space: nowrap;
}
.plan-label { font-size: 13px; font-weight: 600; color: var(--text-dim); margin-bottom: 10px; }
.plan-price-row { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 6px; }
.plan-price {
font-size: 48px; font-weight: 800; letter-spacing: -2px; line-height: 1;
background: linear-gradient(135deg, #ef4444, #f97316);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.plan-price-unit { font-size: 16px; color: var(--text-dim); margin-bottom: 6px; }
.plan-desc { font-size: 14px; color: var(--text-dim); margin-bottom: 28px; }
.plan-features { list-style: none; display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; }
.plan-features li { font-size: 14px; display: flex; align-items: center; gap: 10px; }
.plan-features li::before {
content: ''; width: 18px; height: 18px; flex-shrink: 0; border-radius: 50%;
background: rgba(34,197,94,0.15);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='%2322c55e' d='M14 5L7.5 11.5 4 8 3 9l4.5 4.5 7.5-7.5z'/%3E%3C/svg%3E");
background-size: cover;
}
.btn-plan {
display: block; text-align: center; text-decoration: none;
padding: 13px; border-radius: 10px; font-size: 15px; font-weight: 600; transition: all 0.2s;
}
.btn-plan-outline { border: 1px solid var(--border); color: var(--text); }
.btn-plan-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-plan-filled { background: linear-gradient(135deg, #ef4444, #dc2626); color: #fff; }
.btn-plan-filled:hover { box-shadow: 0 6px 24px rgba(239,68,68,0.35); transform: translateY(-1px); }
/* U盘专属 */
.udisk-wrap {
background: var(--surface);
border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.udisk-inner {
max-width: 1080px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr;
gap: 64px; align-items: center; padding: 96px 20px;
}
.udisk-inner h2 {
font-size: clamp(26px,3.5vw,44px); font-weight: 800;
letter-spacing: -1.5px; margin-bottom: 14px;
}
.udisk-inner p { color: var(--text-dim); font-size: 16px; margin-bottom: 28px; }
.udisk-points { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.udisk-points li { font-size: 15px; display: flex; align-items: flex-start; gap: 12px; }
.udisk-points li::before {
content: '🦞'; font-size: 16px; flex-shrink: 0; margin-top: 1px;
}
.code-box {
background: var(--bg); border: 1px solid var(--border);
border-radius: 16px; overflow: hidden;
}
.code-box-header {
padding: 10px 16px; border-bottom: 1px solid var(--border);
font-size: 12px; color: var(--text-dim); font-family: monospace;
display: flex; align-items: center; gap: 8px;
}
.code-box pre {
padding: 20px; font-family: 'Fira Code','Courier New',monospace;
font-size: 13px; line-height: 1.8;
}
/* FAQ */
.faq-list { max-width: 700px; margin: 48px auto 0; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
background: var(--surface); border: 1px solid var(--border);
border-radius: 12px; padding: 22px 26px;
transition: border-color 0.2s;
}
.faq-item:hover { border-color: rgba(239,68,68,0.3); }
.faq-q { font-size: 15px; font-weight: 700; margin-bottom: 8px; }
.faq-a { font-size: 14px; color: var(--text-dim); line-height: 1.6; }
/* CTA */
.cta-wrap {
text-align: center; padding: 100px 20px;
background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(239,68,68,0.08) 0%, transparent 70%);
}
.cta-wrap .hero-emoji { font-size: 56px; margin-bottom: 16px; }
.cta-wrap h2 {
font-size: clamp(28px,4vw,52px); font-weight: 800;
letter-spacing: -2px; margin-bottom: 14px;
}
.cta-wrap p { font-size: 18px; color: var(--text-dim); margin-bottom: 36px; }
/* FOOTER */
footer {
border-top: 1px solid var(--border);
padding: 36px 40px;
display: flex; align-items: center; justify-content: space-between;
flex-wrap: wrap; gap: 16px;
}
.footer-logo { font-size: 16px; font-weight: 800;
background: linear-gradient(135deg,#ef4444,#f97316);
-webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
footer a { color: var(--text-dim); text-decoration: none; font-size: 13px; transition: color 0.2s; }
footer a:hover { color: var(--accent); }
.footer-links { display: flex; gap: 20px; }
.footer-copy { font-size: 13px; color: var(--text-dim); }
@media (max-width: 768px) {
nav { padding: 0 20px; }
.nav-links { display: none; }
.udisk-inner { grid-template-columns: 1fr; gap: 32px; }
footer { flex-direction: column; align-items: flex-start; }
}
</style>
</head>
<body>
<nav>
<a href="https://cloud.u-claw.org" class="nav-logo">虾盘云</a>
<div class="nav-links">
<a href="#models">模型</a>
<a href="#pricing">价格</a>
<a href="#howto">接入</a>
<a href="https://u-claw.org">虾盘官网</a>
<span class="nav-cta" style="opacity:0.5;cursor:not-allowed;">暂不可用</span>
</div>
</nav>
<!-- HERO -->
<div class="hero">
<div class="hero-emoji">🦞</div>
<h1>虾盘云</h1>
<div class="hero-sub">OpenClaw 官方 AI API 服务</div>
<div class="hero-desc">为虾盘 U 盘用户专属打造。接入 DeepSeek、Qwen按量计费开箱即用无需折腾。</div>
<div class="hero-cta">
<span class="btn btn-primary" style="opacity:0.5;cursor:not-allowed;">暂时不可用</span>
<a href="#howto" class="btn btn-outline">查看接入教程</a>
</div>
<p style="color:#ff6b35;margin-top:8px;font-size:14px;">⚠️ 虾盘云目前暂停服务,敬请期待。</p>
<div class="hero-stats">
<div class="stat"><div class="stat-num">¥3</div><div class="stat-label">DeepSeek V3 起</div></div>
<div class="stat"><div class="stat-num">2s</div><div class="stat-label">平均响应时间</div></div>
<div class="stat"><div class="stat-num">¥5</div><div class="stat-label">U 盘附赠额度</div></div>
<div class="stat"><div class="stat-num">5+</div><div class="stat-label">可用模型</div></div>
</div>
<div class="config-demo">
<div class="config-header">
<div class="dot r"></div><div class="dot y"></div><div class="dot g"></div>
<span class="config-filename">openclaw.json — 一行配置搞定</span>
</div>
<pre><span class="c-comment">// 虾盘 U 盘已预装此配置,注册后填入 apiKey 即用</span>
{
<span class="c-key">"agent"</span>: {
<span class="c-key">"model"</span>: <span class="c-str">"deepseek-chat"</span>,
<span class="c-key">"apiKey"</span>: <span class="c-str">"sk-your-key-here"</span>,
<span class="c-key">"baseUrl"</span>: <span class="c-url">"https://api.u-claw.org/v1"</span>
}
}</pre>
</div>
</div>
<!-- MODELS -->
<section id="models">
<div class="section-inner">
<span class="section-tag">支持模型</span>
<h2 class="section-title">主流模型,统一接口</h2>
<p class="section-desc">OpenAI 兼容格式,切换模型只改一个字段。</p>
<div class="models-grid">
<div class="model-card">
<div class="model-emoji">🐋</div>
<div class="model-name">DeepSeek V3</div>
<div class="model-desc">日常对话、写作、代码,综合能力最强的主力模型,性价比极高</div>
<div class="model-price-row">
<span class="model-price">¥3</span>
<span class="model-unit">/ 百万 token输入</span>
</div>
<span class="model-badge badge-hot">推荐首选</span>
</div>
<div class="model-card">
<div class="model-emoji">🧠</div>
<div class="model-name">DeepSeek R1</div>
<div class="model-desc">深度推理模型,复杂逻辑、数学证明、代码调试效果出色</div>
<div class="model-price-row">
<span class="model-price">¥12</span>
<span class="model-unit">/ 百万 token输入</span>
</div>
<span class="model-badge badge-think">深度推理</span>
</div>
<div class="model-card">
<div class="model-emoji"></div>
<div class="model-name">Qwen-Turbo</div>
<div class="model-desc">极速响应,适合高频轻量对话,中文表现好</div>
<div class="model-price-row">
<span class="model-price">¥1.8</span>
<span class="model-unit">/ 百万 token输入</span>
</div>
<span class="model-badge badge-fast">极速</span>
</div>
<div class="model-card">
<div class="model-emoji">🌟</div>
<div class="model-name">Qwen-Plus</div>
<div class="model-desc">长文档理解强,中文语义把握准确,适合写作场景</div>
<div class="model-price-row">
<span class="model-price">¥4</span>
<span class="model-unit">/ 百万 token输入</span>
</div>
<span class="model-badge badge-hot">中文优化</span>
</div>
</div>
</div>
</section>
<!-- HOW IT WORKS -->
<section id="howto" style="background: var(--surface); border-top: 1px solid var(--border);">
<div class="section-inner">
<span class="section-tag">快速接入</span>
<h2 class="section-title">3 步5 分钟搞定</h2>
<p class="section-desc">虾盘 U 盘用户更简单U 盘已预装 API 地址。</p>
<div class="steps">
<div class="step">
<div class="step-num">1</div>
<h3>注册账号</h3>
<p>访问 api.u-claw.org 注册。有虾盘激活码的直接兑换 ¥5 免费额度,无需充值即可开始。</p>
</div>
<div class="step">
<div class="step-num">2</div>
<h3>创建 API Key</h3>
<p>登录控制台 → 令牌管理 → 新建令牌,复制生成的 Key格式sk-xxxx</p>
</div>
<div class="step">
<div class="step-num">3</div>
<h3>填入 OpenClaw</h3>
<p>打开 OpenClaw 或 openclaw.json将 apiKey 填入baseUrl 填 api.u-claw.org/v1保存即用。</p>
</div>
</div>
</div>
</section>
<!-- U盘专属 -->
<div class="udisk-wrap">
<div class="udisk-inner">
<div>
<span class="section-tag">U 盘用户专属</span>
<h2>买了虾盘 U 盘?<br>直接用,免费送</h2>
<p>正版虾盘 U 盘预装了虾盘云 API 配置。插上盘,注册账号,兑换激活码,立刻可用。</p>
<ul class="udisk-points">
<li>U 盘出厂已预装 API 地址,无需手动配置</li>
<li>每个正版 U 盘附赠一张激活码,价值 ¥5</li>
<li>兑换后立即到账,够用一段时间</li>
<li>用完可按需充值¥10 起,余额永不过期</li>
</ul>
</div>
<div class="code-box">
<div class="code-box-header">
<span>📁</span>
<span>data/.openclaw/openclaw.json</span>
</div>
<pre><span class="c-comment">// 出厂预装,插上 U 盘即生效</span>
{
<span class="c-key">"agent"</span>: {
<span class="c-key">"model"</span>: <span class="c-str">"deepseek-chat"</span>,
<span class="c-key">"apiKey"</span>: <span class="c-str">"注册后填入你的 Key"</span>,
<span class="c-key">"baseUrl"</span>: <span class="c-url">"https://api.u-claw.org/v1"</span>
}
}</pre>
</div>
</div>
</div>
<!-- PRICING -->
<section id="pricing">
<div class="section-inner">
<span class="section-tag">价格</span>
<h2 class="section-title">简单透明,按用付费</h2>
<p class="section-desc">用多少花多少,没有套路,余额永久有效。</p>
<div class="pricing-grid">
<div class="plan">
<div class="plan-label">按量充值</div>
<div class="plan-price-row">
<span class="plan-price">¥10</span>
<span class="plan-price-unit">起充</span>
</div>
<div class="plan-desc">适合轻度用户,灵活无压力</div>
<ul class="plan-features">
<li>全模型可用</li>
<li>余额永久有效</li>
<li>微信 / 支付宝充值</li>
<li>实时用量统计</li>
</ul>
<a href="https://api.u-claw.org/register" class="btn-plan btn-plan-outline">立即注册</a>
</div>
<div class="plan featured">
<div class="plan-top-badge">最受欢迎</div>
<div class="plan-label">月费套餐</div>
<div class="plan-price-row">
<span class="plan-price">¥29</span>
<span class="plan-price-unit">/ 月</span>
</div>
<div class="plan-desc">约 500 万 token日常够用</div>
<ul class="plan-features">
<li>500 万 token / 月</li>
<li>全模型可用</li>
<li>超出后按量计费</li>
<li>优先技术支持</li>
</ul>
<a href="https://api.u-claw.org/register" class="btn-plan btn-plan-filled">立即订阅</a>
</div>
<div class="plan">
<div class="plan-label">U 盘激活码</div>
<div class="plan-price-row">
<span class="plan-price">¥5</span>
<span class="plan-price-unit">随盘附赠</span>
</div>
<div class="plan-desc">正版虾盘 U 盘专属福利</div>
<ul class="plan-features">
<li>开箱即有激活码</li>
<li>注册后直接兑换</li>
<li>可叠加充值使用</li>
<li>每个 U 盘限一张</li>
</ul>
<a href="https://api.u-claw.org/register" class="btn-plan btn-plan-outline">去兑换</a>
</div>
</div>
</div>
</section>
<!-- FAQ -->
<section style="background: var(--surface); border-top: 1px solid var(--border);">
<div class="section-inner" style="text-align:center;">
<span class="section-tag">常见问题</span>
<h2 class="section-title">FAQ</h2>
<div class="faq-list">
<div class="faq-item">
<div class="faq-q">虾盘云和直接用 DeepSeek 官方有什么区别?</div>
<div class="faq-a">虾盘云提供统一入口,人民币充值,多模型一个 Key 搞定,不用单独注册各家账号。对国内用户更友好,配合虾盘 U 盘开箱即用。</div>
</div>
<div class="faq-item">
<div class="faq-q">兼容哪些 AI 工具?</div>
<div class="faq-a">完全兼容 OpenAI 接口,支持 OpenClaw、Cherry Studio、Cursor、Bob 翻译、沉浸式翻译等所有支持自定义 baseUrl 的工具。</div>
</div>
<div class="faq-item">
<div class="faq-q">充值余额会过期吗?</div>
<div class="faq-a">按量充值余额永不过期。月费套餐额度按月重置,未用完不累积。</div>
</div>
<div class="faq-item">
<div class="faq-q">激活码可以重复用吗?</div>
<div class="faq-a">每个激活码只能用一次,兑换后绑定账号。正版 U 盘每个附赠一张,复制的 U 盘没有激活码。</div>
</div>
</div>
</div>
</section>
<!-- CONTACT -->
<section id="contact" style="border-top: 1px solid var(--border);">
<div class="section-inner" style="text-align:center;">
<span class="section-tag">联系我们</span>
<h2 class="section-title">有问题?找我</h2>
<p class="section-desc" style="margin: 0 auto 48px;">余额充值、使用问题、U 盘激活码,直接联系</p>
<div style="display:flex; flex-wrap:wrap; gap:40px; justify-content:center; align-items:flex-start;">
<div style="text-align:center;">
<img src="wechat-qr.jpg" alt="微信二维码" style="width:180px;height:180px;border-radius:14px;border:1px solid var(--border);">
<p style="margin-top:12px;color:var(--text-dim);font-size:14px;">微信扫码添加</p>
</div>
<div style="text-align:center;">
<a href="https://xhslink.com/m/6mf7Mq2M5wP" target="_blank" style="display:flex;flex-direction:column;align-items:center;justify-content:center;width:180px;height:180px;border-radius:14px;background:linear-gradient(135deg,#ff2442,#ff6670);text-decoration:none;">
<span style="font-size:44px;">📕</span>
<span style="color:white;font-size:16px;font-weight:700;margin-top:8px;">小红书</span>
<span style="color:rgba(255,255,255,0.8);font-size:12px;margin-top:4px;">8777+ 赞</span>
</a>
<p style="margin-top:12px;color:var(--text-dim);font-size:14px;">小红书关注</p>
</div>
<div style="text-align:left;display:flex;flex-direction:column;gap:16px;justify-content:center;">
<p style="font-size:16px;"><span style="color:var(--text-dim);">邮箱:</span><a href="mailto:hefangsheng@gmail.com" style="color:var(--accent);text-decoration:none;">hefangsheng@gmail.com</a></p>
<p style="font-size:16px;"><span style="color:var(--text-dim);">GitHub</span><a href="https://github.com/dongsheng123132" style="color:var(--accent);text-decoration:none;">dongsheng123132</a></p>
<p style="font-size:16px;"><span style="color:var(--text-dim);">官网:</span><a href="https://u-claw.org" style="color:var(--accent);text-decoration:none;">u-claw.org</a></p>
</div>
</div>
</div>
</section>
<!-- CTA -->
<div class="cta-wrap">
<div class="hero-emoji">🦞</div>
<h2>现在开始,免费体验</h2>
<p>注册即用U 盘激活码兑换 ¥5 免费额度</p>
<a href="https://api.u-claw.org/register" class="btn btn-primary" style="font-size:18px;padding:16px 44px;">免费注册 →</a>
</div>
<footer>
<div class="footer-logo">🦞 虾盘云</div>
<div class="footer-links">
<a href="https://api.u-claw.org">控制台</a>
<a href="https://u-claw.org">虾盘官网</a>
<a href="mailto:38004547@qq.com">联系我们</a>
</div>
<div class="footer-copy">© 2026 虾盘云 · api.u-claw.org</div>
</footer>
</body>
</html>