feat: add bilingual landing page for u-claw.org

Dark-themed single-page site with CN/EN toggle, feature grid, 3-step guide, terminal demo, and models comparison table.
2026-03-09 10:26:16 +08:00
parent 6f54151a79
commit eaa90da834
1 changed files with 590 additions and 0 deletions
--- a/website/index.html
+++ b/website/index.html
@@ -0,0 +1,590 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>U-Claw 虾盘 — OpenClaw 离线安装 U 盘</title>
+    <meta name="description" content="U-Claw: OpenClaw AI assistant offline installer USB drive. Built for China, works everywhere. 免翻墙一键安装。">
+    <meta property="og:title" content="U-Claw 虾盘 - OpenClaw Offline Installer">
+    <meta property="og:description" content="Like YuLinMuFeng for AI. Plug in USB, double-click, done. 插上U盘，双击运行，搞定。">
+    <meta property="og:type" content="website">
+    <meta property="og:url" content="https://u-claw.org">
+    <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;
+        }
+        .lang-toggle {
+            position: fixed;
+            top: 20px;
+            right: 20px;
+            z-index: 100;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+            padding: 6px;
+            display: flex;
+            gap: 4px;
+        }
+        .lang-btn {
+            padding: 6px 14px;
+            border: none;
+            background: transparent;
+            color: var(--text-dim);
+            cursor: pointer;
+            border-radius: 6px;
+            font-size: 14px;
+            transition: all 0.2s;
+        }
+        .lang-btn.active {
+            background: var(--accent);
+            color: white;
+        }
+        .hero {
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+            padding: 40px 20px;
+            background: radial-gradient(ellipse at 50% 0%, rgba(239,68,68,0.15) 0%, transparent 60%);
+        }
+        .hero-emoji { font-size: 80px; margin-bottom: 20px; }
+        .hero h1 {
+            font-size: clamp(40px, 8vw, 72px);
+            font-weight: 800;
+            letter-spacing: -2px;
+            margin-bottom: 8px;
+            background: linear-gradient(135deg, #ef4444, #f97316);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .hero .subtitle {
+            font-size: clamp(16px, 3vw, 24px);
+            color: var(--text-dim);
+            margin-bottom: 40px;
+            max-width: 600px;
+        }
+        .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); }
+
+        .stats {
+            display: flex;
+            gap: 40px;
+            margin-top: 60px;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+        .stat { text-align: center; }
+        .stat-num {
+            font-size: 36px;
+            font-weight: 800;
+            background: linear-gradient(135deg, #ef4444, #f97316);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .stat-label { font-size: 14px; color: var(--text-dim); }
+
+        section { padding: 80px 20px; max-width: 1100px; margin: 0 auto; }
+        section h2 {
+            font-size: 36px;
+            font-weight: 700;
+            margin-bottom: 16px;
+            text-align: center;
+        }
+        section .section-sub {
+            text-align: center;
+            color: var(--text-dim);
+            margin-bottom: 48px;
+            font-size: 18px;
+        }
+
+        .pain-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+            gap: 20px;
+        }
+        .pain-card {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            padding: 28px;
+        }
+        .pain-card .icon { font-size: 32px; margin-bottom: 12px; }
+        .pain-card h3 { font-size: 18px; margin-bottom: 8px; }
+        .pain-card p { color: var(--text-dim); font-size: 14px; }
+
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 24px;
+        }
+        .feature-card {
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 16px;
+            padding: 32px;
+            transition: border-color 0.2s;
+        }
+        .feature-card:hover { border-color: var(--accent); }
+        .feature-card .tag {
+            display: inline-block;
+            padding: 4px 12px;
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: 600;
+            margin-bottom: 16px;
+        }
+        .tag-red { background: rgba(239,68,68,0.15); color: #ef4444; }
+        .tag-green { background: rgba(34,197,94,0.15); color: #22c55e; }
+        .tag-blue { background: rgba(59,130,246,0.15); color: #3b82f6; }
+        .tag-purple { background: rgba(168,85,247,0.15); color: #a855f7; }
+        .feature-card h3 { font-size: 20px; margin-bottom: 8px; }
+        .feature-card p { color: var(--text-dim); font-size: 14px; }
+
+        .steps {
+            max-width: 700px;
+            margin: 0 auto;
+        }
+        .step {
+            display: flex;
+            gap: 20px;
+            margin-bottom: 32px;
+            align-items: flex-start;
+        }
+        .step-num {
+            width: 48px;
+            height: 48px;
+            min-width: 48px;
+            border-radius: 12px;
+            background: linear-gradient(135deg, #ef4444, #f97316);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 20px;
+            font-weight: 800;
+            color: white;
+        }
+        .step h3 { font-size: 18px; margin-bottom: 4px; }
+        .step p { color: var(--text-dim); font-size: 14px; }
+
+        .models-table {
+            width: 100%;
+            border-collapse: collapse;
+            margin-top: 20px;
+        }
+        .models-table th, .models-table td {
+            padding: 12px 16px;
+            text-align: left;
+            border-bottom: 1px solid var(--border);
+        }
+        .models-table th {
+            color: var(--text-dim);
+            font-size: 13px;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        .models-table tr:hover { background: rgba(255,255,255,0.02); }
+        .badge {
+            display: inline-block;
+            padding: 2px 8px;
+            border-radius: 4px;
+            font-size: 12px;
+            font-weight: 600;
+        }
+        .badge-free { background: rgba(34,197,94,0.15); color: #22c55e; }
+        .badge-cheap { background: rgba(59,130,246,0.15); color: #3b82f6; }
+        .badge-hot { background: rgba(239,68,68,0.15); color: #ef4444; }
+
+        .terminal {
+            background: #1a1a2e;
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            padding: 20px 24px;
+            font-family: 'SF Mono', 'Fira Code', monospace;
+            font-size: 14px;
+            overflow-x: auto;
+            margin: 20px 0;
+        }
+        .terminal .comment { color: #6b7280; }
+        .terminal .cmd { color: #22c55e; }
+        .terminal .output { color: #9ca3af; }
+
+        .cta-section {
+            text-align: center;
+            padding: 100px 20px;
+            background: radial-gradient(ellipse at 50% 100%, rgba(239,68,68,0.1) 0%, transparent 60%);
+        }
+        .cta-section h2 { font-size: 42px; margin-bottom: 16px; }
+        .cta-section p { color: var(--text-dim); font-size: 18px; margin-bottom: 32px; }
+
+        footer {
+            text-align: center;
+            padding: 40px 20px;
+            color: var(--text-dim);
+            font-size: 14px;
+            border-top: 1px solid var(--border);
+        }
+        footer a { color: var(--accent); text-decoration: none; }
+
+        .hidden { display: none !important; }
+
+        @media (max-width: 640px) {
+            .stats { gap: 24px; }
+            .hero-cta { flex-direction: column; align-items: center; }
+            .pain-grid, .features-grid { grid-template-columns: 1fr; }
+        }
+    </style>
+</head>
+<body>
+
+<!-- Language Toggle -->
+<div class="lang-toggle">
+    <button class="lang-btn active" onclick="switchLang('zh')" id="btn-zh">中文</button>
+    <button class="lang-btn" onclick="switchLang('en')" id="btn-en">EN</button>
+</div>
+
+<!-- Hero -->
+<div class="hero">
+    <div class="hero-emoji">🦞</div>
+    <h1>U-Claw</h1>
+    <p class="subtitle zh">OpenClaw 离线安装 U 盘<br>插上就能用，双击就安装<br>专为中国用户打造</p>
+    <p class="subtitle en hidden">OpenClaw Offline Installer USB<br>Plug in, double-click, done<br>Built for China, works everywhere</p>
+
+    <div class="hero-cta">
+        <a href="https://github.com/dongsheng123132/u-claw/releases" class="btn btn-primary">
+            <span class="zh">⬇️ 下载 U-Claw</span>
+            <span class="en hidden">⬇️ Download U-Claw</span>
+        </a>
+        <a href="https://github.com/dongsheng123132/u-claw" class="btn btn-outline">
+            <span class="zh">⭐ GitHub 开源</span>
+            <span class="en hidden">⭐ GitHub</span>
+        </a>
+    </div>
+
+    <div class="stats">
+        <div class="stat">
+            <div class="stat-num">1.3GB</div>
+            <div class="stat-label zh">全部打包</div>
+            <div class="stat-label en hidden">All-in-one</div>
+        </div>
+        <div class="stat">
+            <div class="stat-num">52</div>
+            <div class="stat-label zh">预装技能</div>
+            <div class="stat-label en hidden">Pre-installed skills</div>
+        </div>
+        <div class="stat">
+            <div class="stat-num">8+</div>
+            <div class="stat-label zh">国产模型</div>
+            <div class="stat-label en hidden">Chinese AI models</div>
+        </div>
+        <div class="stat">
+            <div class="stat-num">3</div>
+            <div class="stat-label zh">平台支持</div>
+            <div class="stat-label en hidden">OS platforms</div>
+        </div>
+    </div>
+</div>
+
+<!-- Pain Points -->
+<section>
+    <h2>
+        <span class="zh">为什么需要 U-Claw？</span>
+        <span class="en hidden">Why U-Claw?</span>
+    </h2>
+    <p class="section-sub">
+        <span class="zh">在中国安装 OpenClaw 是个噩梦，U-Claw 解决所有问题</span>
+        <span class="en hidden">Installing OpenClaw in China is a nightmare. U-Claw fixes everything.</span>
+    </p>
+    <div class="pain-grid">
+        <div class="pain-card">
+            <div class="icon">🚫</div>
+            <h3 class="zh">GitHub 打不开</h3><h3 class="en hidden">GitHub Blocked</h3>
+            <p class="zh">源码下不了，npm 依赖装不上</p>
+            <p class="en hidden">Can't download source, npm install fails</p>
+        </div>
+        <div class="pain-card">
+            <div class="icon">⏳</div>
+            <h3 class="zh">npm install 超时</h3><h3 class="en hidden">npm Timeout</h3>
+            <p class="zh">800+ 依赖包，在国内网络下载到崩溃</p>
+            <p class="en hidden">800+ packages, China's network makes it impossible</p>
+        </div>
+        <div class="pain-card">
+            <div class="icon">🔧</div>
+            <h3 class="zh">环境配置复杂</h3><h3 class="en hidden">Complex Setup</h3>
+            <p class="zh">Node.js 版本、构建工具、各种报错</p>
+            <p class="en hidden">Node.js versions, build tools, endless errors</p>
+        </div>
+        <div class="pain-card">
+            <div class="icon">✅</div>
+            <h3 class="zh">U-Claw 的答案</h3><h3 class="en hidden">U-Claw's Answer</h3>
+            <p class="zh">全部打包好，插 U 盘，双击运行，搞定</p>
+            <p class="en hidden">Everything bundled. Plug USB, double-click, done.</p>
+        </div>
+    </div>
+</section>
+
+<!-- Features -->
+<section>
+    <h2>
+        <span class="zh">功能特性</span>
+        <span class="en hidden">Features</span>
+    </h2>
+    <p class="section-sub">
+        <span class="zh">不只是安装盘，更是一整套 AI 生产力工具</span>
+        <span class="en hidden">Not just an installer — a complete AI productivity toolkit</span>
+    </p>
+    <div class="features-grid">
+        <div class="feature-card">
+            <div class="tag tag-red zh">一键安装</div>
+            <div class="tag tag-red en hidden">One-Click</div>
+            <h3 class="zh">雨林木风风格启动菜单</h3>
+            <h3 class="en hidden">YuLinMuFeng-Style Launcher</h3>
+            <p class="zh">16 个功能：安装、修复、备份、还原、重置。双击就能用，小白也能搞定。</p>
+            <p class="en hidden">16 functions: install, repair, backup, restore, reset. Double-click and go.</p>
+        </div>
+        <div class="feature-card">
+            <div class="tag tag-green zh">中国优化</div>
+            <div class="tag tag-green en hidden">China-Ready</div>
+            <h3 class="zh">8 个国产 AI 模型</h3>
+            <h3 class="en hidden">8 Chinese AI Models</h3>
+            <p class="zh">DeepSeek、Kimi、通义千问、智谱、MiniMax、豆包、百度千帆、小米 Mimo。一键配置。</p>
+            <p class="en hidden">DeepSeek, Kimi, Qwen, Zhipu, MiniMax, Doubao, Qianfan, Mimo. One-click setup.</p>
+        </div>
+        <div class="feature-card">
+            <div class="tag tag-blue zh">QQ 官方</div>
+            <div class="tag tag-blue en hidden">QQ Official</div>
+            <h3 class="zh">腾讯 QQ 机器人</h3>
+            <h3 class="en hidden">Tencent QQ Bot</h3>
+            <p class="zh">腾讯官方支持，3 条命令搞定。QQ 可能是国内 AI 助手最强入口。</p>
+            <p class="en hidden">Official Tencent support. 3 commands, 1 minute, free. No VPN needed.</p>
+        </div>
+        <div class="feature-card">
+            <div class="tag tag-purple zh">多平台</div>
+            <div class="tag tag-purple en hidden">Multi-Platform</div>
+            <h3 class="zh">7+ 聊天平台</h3>
+            <h3 class="en hidden">7+ Chat Platforms</h3>
+            <p class="zh">QQ、飞书、微信、Telegram、Discord、WhatsApp、Slack。企业微信和钉钉即将支持。</p>
+            <p class="en hidden">QQ, Feishu, WeChat, Telegram, Discord, WhatsApp, Slack. WeCom & DingTalk coming.</p>
+        </div>
+        <div class="feature-card">
+            <div class="tag tag-green zh">52 技能</div>
+            <div class="tag tag-green en hidden">52 Skills</div>
+            <h3 class="zh">预装生产力技能</h3>
+            <h3 class="en hidden">Pre-installed Skills</h3>
+            <p class="zh">GitHub、邮件、笔记、PDF、AI绘图、天气、日程...全部离线可用，无需下载。</p>
+            <p class="en hidden">GitHub, email, notes, PDF, AI art, weather, calendar... All offline, no download needed.</p>
+        </div>
+        <div class="feature-card">
+            <div class="tag tag-red zh">维护工具</div>
+            <div class="tag tag-red en hidden">Maintenance</div>
+            <h3 class="zh">备份 / 还原 / 修复</h3>
+            <h3 class="en hidden">Backup / Restore / Repair</h3>
+            <p class="zh">出问题？插 U 盘选修复。要重置？自动备份后恢复出厂。完整维护工具箱。</p>
+            <p class="en hidden">Problems? Plug USB, select repair. Reset? Auto-backup then factory restore.</p>
+        </div>
+    </div>
+</section>
+
+<!-- How It Works -->
+<section>
+    <h2>
+        <span class="zh">3 步搞定</span>
+        <span class="en hidden">3 Steps</span>
+    </h2>
+    <p class="section-sub">
+        <span class="zh">双口 U 盘（USB-A + USB-C），Mac 和 Windows 都能插</span>
+        <span class="en hidden">Dual-port USB (USB-A + USB-C), works on Mac and Windows</span>
+    </p>
+    <div class="steps">
+        <div class="step">
+            <div class="step-num">1</div>
+            <div>
+                <h3 class="zh">插入 U 盘</h3><h3 class="en hidden">Plug in USB</h3>
+                <p class="zh">双口 U 盘，USB-C 插 MacBook，USB-A 插 Windows 电脑</p>
+                <p class="en hidden">Dual-port USB: USB-C for MacBook, USB-A for Windows PC</p>
+            </div>
+        </div>
+        <div class="step">
+            <div class="step-num">2</div>
+            <div>
+                <h3 class="zh">双击启动菜单</h3><h3 class="en hidden">Double-click Launcher</h3>
+                <p class="zh">Mac 双击「启动菜单.command」，Win 双击「启动菜单.bat」</p>
+                <p class="en hidden">Mac: "启动菜单.command", Win: "启动菜单.bat"</p>
+            </div>
+        </div>
+        <div class="step">
+            <div class="step-num">3</div>
+            <div>
+                <h3 class="zh">选择安装，搞定</h3><h3 class="en hidden">Select Install, Done</h3>
+                <p class="zh">选 [1] 一键安装，2 分钟后在终端输入 openclaw 即可使用</p>
+                <p class="en hidden">Select [1] One-click install. 2 minutes later, run "openclaw" in terminal</p>
+            </div>
+        </div>
+    </div>
+
+    <div class="terminal">
+        <div class="comment"># QQ Bot - 3 commands, 1 minute / QQ 机器人 3 条命令搞定</div>
+        <div class="cmd">$ openclaw plugins install @sliverp/qqbot@latest</div>
+        <div class="cmd">$ openclaw channels add --channel qqbot --token "AppID:Secret"</div>
+        <div class="cmd">$ openclaw gateway restart</div>
+        <div class="output">✓ QQ Bot is now running / QQ 机器人已启动</div>
+    </div>
+</section>
+
+<!-- Models -->
+<section>
+    <h2>
+        <span class="zh">支持的 AI 模型</span>
+        <span class="en hidden">Supported AI Models</span>
+    </h2>
+    <p class="section-sub">
+        <span class="zh">国产模型无需翻墙，国内直接可用</span>
+        <span class="en hidden">Chinese models work without VPN</span>
+    </p>
+    <table class="models-table">
+        <thead>
+            <tr>
+                <th><span class="zh">模型</span><span class="en hidden">Model</span></th>
+                <th><span class="zh">提供商</span><span class="en hidden">Provider</span></th>
+                <th><span class="zh">特长</span><span class="en hidden">Best for</span></th>
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td><strong>DeepSeek</strong></td>
+                <td>深度求索</td>
+                <td class="zh">编程，性价比之王</td><td class="en hidden">Coding, best value</td>
+                <td><span class="badge badge-hot">★ 推荐</span></td>
+            </tr>
+            <tr>
+                <td><strong>Kimi K2.5</strong></td>
+                <td>月之暗面</td>
+                <td class="zh">256K 超长上下文</td><td class="en hidden">256K context</td>
+                <td><span class="badge badge-cheap">长文档</span></td>
+            </tr>
+            <tr>
+                <td><strong>Qwen</strong></td>
+                <td>阿里通义千问</td>
+                <td class="zh">免费额度最大</td><td class="en hidden">Large free tier</td>
+                <td><span class="badge badge-free">免费</span></td>
+            </tr>
+            <tr>
+                <td><strong>GLM 4.7</strong></td>
+                <td>智谱 AI</td>
+                <td class="zh">学术，中文 NLP</td><td class="en hidden">Academic</td>
+                <td></td>
+            </tr>
+            <tr>
+                <td><strong>MiniMax</strong></td>
+                <td>MiniMax</td>
+                <td class="zh">语音，多模态</td><td class="en hidden">Voice, multimodal</td>
+                <td></td>
+            </tr>
+            <tr>
+                <td><strong>Doubao</strong></td>
+                <td>字节豆包</td>
+                <td class="zh">火山引擎生态</td><td class="en hidden">ByteDance ecosystem</td>
+                <td></td>
+            </tr>
+            <tr>
+                <td><strong>Claude</strong></td>
+                <td>Anthropic</td>
+                <td class="zh">最强综合能力</td><td class="en hidden">Best overall</td>
+                <td><span class="badge badge-hot">Global</span></td>
+            </tr>
+        </tbody>
+    </table>
+</section>
+
+<!-- CTA -->
+<div class="cta-section">
+    <h2>
+        <span class="zh">开始使用 U-Claw</span>
+        <span class="en hidden">Get U-Claw</span>
+    </h2>
+    <p>
+        <span class="zh">免费开源 · MIT 协议 · 自由分发</span>
+        <span class="en hidden">Free & Open Source · MIT License · Share freely</span>
+    </p>
+    <div class="hero-cta">
+        <a href="https://github.com/dongsheng123132/u-claw/releases" class="btn btn-primary">
+            <span class="zh">⬇️ 下载最新版</span>
+            <span class="en hidden">⬇️ Download Latest</span>
+        </a>
+        <a href="https://github.com/dongsheng123132/u-claw" class="btn btn-outline">
+            <span class="zh">📖 查看文档</span>
+            <span class="en hidden">📖 Documentation</span>
+        </a>
+    </div>
+</div>
+
+<footer>
+    <p>
+        🦞 U-Claw — Made by
+        <a href="https://github.com/dongsheng123132">dongsheng</a>
+        & OpenClaw Community
+    </p>
+    <p style="margin-top: 8px;">
+        <a href="https://github.com/dongsheng123132/u-claw">GitHub</a> ·
+        <a href="https://github.com/openclaw/openclaw">OpenClaw</a>
+    </p>
+</footer>
+
+<script>
+function switchLang(lang) {
+    document.querySelectorAll('.zh').forEach(el => el.classList.toggle('hidden', lang !== 'zh'));
+    document.querySelectorAll('.en').forEach(el => el.classList.toggle('hidden', lang !== 'en'));
+    document.getElementById('btn-zh').classList.toggle('active', lang === 'zh');
+    document.getElementById('btn-en').classList.toggle('active', lang === 'en');
+    document.documentElement.lang = lang === 'zh' ? 'zh-CN' : 'en';
+}
+</script>
+</body>
+</html>