c1e94d4dd9
- Add U-Claw.html navigation page with OS auto-detection and live status - Rename scripts: start → Mac-Start/Windows-Start, menu → Mac-Menu/Windows-Menu - Update installer scripts to reference new v2 directory structure (app/core) - Update .gitignore to exclude build artifacts and marketing assets
195 lines
9.1 KiB
HTML
195 lines
9.1 KiB
HTML
<!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 虾盘 - 启动导航</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body { font-family: -apple-system, "Microsoft YaHei", sans-serif; background: #0a0a0a; color: #e0e0e0; min-height: 100vh; }
|
||
.container { max-width: 800px; margin: 0 auto; padding: 40px 20px; }
|
||
.header { text-align: center; margin-bottom: 40px; }
|
||
.header h1 { font-size: 2.5em; margin-bottom: 8px; }
|
||
.header h1 span { color: #ff6b35; }
|
||
.header p { color: #888; font-size: 1.1em; }
|
||
.version { display: inline-block; background: #ff6b35; color: #fff; padding: 2px 10px; border-radius: 12px; font-size: 0.8em; margin-left: 8px; }
|
||
|
||
.os-tabs { display: flex; justify-content: center; gap: 12px; margin-bottom: 30px; }
|
||
.os-tab { padding: 12px 32px; border: 2px solid #333; border-radius: 8px; cursor: pointer; font-size: 1.1em; background: transparent; color: #aaa; transition: all 0.2s; }
|
||
.os-tab:hover { border-color: #666; color: #fff; }
|
||
.os-tab.active { border-color: #ff6b35; color: #ff6b35; background: rgba(255,107,53,0.1); }
|
||
|
||
.panel { display: none; }
|
||
.panel.active { display: block; }
|
||
|
||
.card { background: #1a1a1a; border: 1px solid #333; border-radius: 12px; padding: 24px; margin-bottom: 16px; }
|
||
.card h3 { color: #ff6b35; margin-bottom: 12px; font-size: 1.2em; }
|
||
.card p { color: #bbb; line-height: 1.6; }
|
||
|
||
.step { display: flex; align-items: flex-start; gap: 16px; margin: 12px 0; }
|
||
.step-num { background: #ff6b35; color: #fff; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; flex-shrink: 0; }
|
||
.step-text { flex: 1; }
|
||
.step-text strong { color: #fff; }
|
||
.step-text code { background: #2a2a2a; padding: 2px 8px; border-radius: 4px; color: #ff6b35; font-size: 0.95em; }
|
||
|
||
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
|
||
.grid-item { background: #222; border: 1px solid #333; border-radius: 8px; padding: 16px; }
|
||
.grid-item h4 { color: #fff; margin-bottom: 6px; }
|
||
.grid-item p { color: #999; font-size: 0.9em; }
|
||
|
||
.status-bar { background: #1a1a1a; border: 1px solid #333; border-radius: 8px; padding: 16px; margin-bottom: 24px; display: flex; align-items: center; gap: 12px; }
|
||
.status-dot { width: 12px; height: 12px; border-radius: 50%; }
|
||
.status-dot.off { background: #666; }
|
||
.status-dot.on { background: #4caf50; animation: pulse 2s infinite; }
|
||
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
|
||
.status-link { color: #ff6b35; text-decoration: none; margin-left: auto; }
|
||
.status-link:hover { text-decoration: underline; }
|
||
|
||
.section-title { color: #888; font-size: 0.9em; text-transform: uppercase; letter-spacing: 2px; margin: 30px 0 12px; }
|
||
|
||
.footer { text-align: center; margin-top: 40px; padding-top: 20px; border-top: 1px solid #222; color: #666; }
|
||
.footer a { color: #ff6b35; text-decoration: none; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
|
||
<div class="header">
|
||
<h1>🦞 <span>U-Claw</span> 虾盘 <span class="version">v1.1</span></h1>
|
||
<p>Portable AI Agent — 插上就能用的 AI 助手</p>
|
||
</div>
|
||
|
||
<!-- Status Bar -->
|
||
<div class="status-bar">
|
||
<div class="status-dot off" id="statusDot"></div>
|
||
<span id="statusText">OpenClaw 未运行</span>
|
||
<a href="#" id="statusLink" class="status-link" style="display:none" target="_blank">打开控制台 →</a>
|
||
</div>
|
||
|
||
<!-- OS Tabs -->
|
||
<div class="os-tabs">
|
||
<div class="os-tab active" onclick="switchOS('mac')">🍎 Mac</div>
|
||
<div class="os-tab" onclick="switchOS('win')">🪟 Windows</div>
|
||
</div>
|
||
|
||
<!-- Mac Panel -->
|
||
<div class="panel active" id="panel-mac">
|
||
<div class="card">
|
||
<h3>🚀 快速启动</h3>
|
||
<div class="step">
|
||
<div class="step-num">1</div>
|
||
<div class="step-text">双击 <code>Mac-Start.command</code></div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">2</div>
|
||
<div class="step-text">浏览器自动打开，在网页里配置 AI 模型和 API Key</div>
|
||
</div>
|
||
<p style="margin-top:12px; color:#999;">⚠️ 首次运行如果提示"无法验证开发者"：右键点击 → 打开</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>⚙️ 全部功能（配置/诊断/备份）</h3>
|
||
<p>双击 <code>Mac-Menu.command</code> 打开全功能菜单：</p>
|
||
<div class="grid">
|
||
<div class="grid-item"><h4>配置向导</h4><p>选模型、填 API Key、选平台</p></div>
|
||
<div class="grid-item"><h4>QQ Bot 接入</h4><p>腾讯官方，3条命令搞定</p></div>
|
||
<div class="grid-item"><h4>诊断修复</h4><p>openclaw doctor 一键检测</p></div>
|
||
<div class="grid-item"><h4>备份恢复</h4><p>配置和记忆一键备份</p></div>
|
||
<div class="grid-item"><h4>技能浏览</h4><p>52 个预装技能</p></div>
|
||
<div class="grid-item"><h4>镜像配置</h4><p>npm 淘宝镜像</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Windows Panel -->
|
||
<div class="panel" id="panel-win">
|
||
<div class="card">
|
||
<h3>🚀 快速启动</h3>
|
||
<div class="step">
|
||
<div class="step-num">1</div>
|
||
<div class="step-text">双击 <code>Windows-Start.bat</code></div>
|
||
</div>
|
||
<div class="step">
|
||
<div class="step-num">2</div>
|
||
<div class="step-text">浏览器自动打开，在网页里配置 AI 模型和 API Key</div>
|
||
</div>
|
||
<p style="margin-top:12px; color:#999;">⚠️ 如果弹出安全警告：点击"更多信息" → "仍要运行"</p>
|
||
</div>
|
||
|
||
<div class="card">
|
||
<h3>⚙️ 全部功能（配置/诊断/备份）</h3>
|
||
<p>双击 <code>Windows-Menu.bat</code> 打开全功能菜单：</p>
|
||
<div class="grid">
|
||
<div class="grid-item"><h4>配置向导</h4><p>选模型、填 API Key、选平台</p></div>
|
||
<div class="grid-item"><h4>QQ Bot 接入</h4><p>腾讯官方，3条命令搞定</p></div>
|
||
<div class="grid-item"><h4>诊断修复</h4><p>openclaw doctor 一键检测</p></div>
|
||
<div class="grid-item"><h4>备份恢复</h4><p>配置和记忆一键备份</p></div>
|
||
<div class="grid-item"><h4>技能浏览</h4><p>52 个预装技能</p></div>
|
||
<div class="grid-item"><h4>镜像配置</h4><p>npm 淘宝镜像</p></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Common sections -->
|
||
<div class="section-title">🤖 支持的 AI 模型（国内免翻墙）</div>
|
||
<div class="card">
|
||
<div class="grid">
|
||
<div class="grid-item"><h4>DeepSeek</h4><p>编程首选，性价比最高</p></div>
|
||
<div class="grid-item"><h4>Kimi K2.5</h4><p>256K 上下文，长文档</p></div>
|
||
<div class="grid-item"><h4>通义千问 Qwen</h4><p>免费额度大</p></div>
|
||
<div class="grid-item"><h4>智谱 GLM</h4><p>学术、中文 NLP</p></div>
|
||
<div class="grid-item"><h4>MiniMax</h4><p>语音、多模态</p></div>
|
||
<div class="grid-item"><h4>豆包 Doubao</h4><p>字节跳动，火山引擎</p></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section-title">📖 更多资料</div>
|
||
<div class="card">
|
||
<div class="grid">
|
||
<div class="grid-item" onclick="window.open('帮助文档.html')" style="cursor:pointer"><h4>📖 帮助文档</h4><p>完整使用指南</p></div>
|
||
<div class="grid-item" onclick="window.open('技能市场.html')" style="cursor:pointer"><h4>🎯 技能市场</h4><p>39 个精选技能</p></div>
|
||
<div class="grid-item"><h4>💬 联系我们</h4><p>微信: hecare888</p></div>
|
||
<div class="grid-item"><h4>🌐 官网</h4><p><a href="https://u-claw.org" target="_blank" style="color:#ff6b35">u-claw.org</a></p></div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer">
|
||
<p>Made with 🦞 by <a href="https://github.com/dongsheng123132">dongsheng</a> · <a href="https://u-claw.org">u-claw.org</a></p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
// Auto-detect OS
|
||
const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
|
||
if (!isMac) switchOS('win');
|
||
|
||
function switchOS(os) {
|
||
document.querySelectorAll('.os-tab').forEach(t => t.classList.remove('active'));
|
||
document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
|
||
document.querySelector('#panel-' + os).classList.add('active');
|
||
document.querySelectorAll('.os-tab')[os === 'mac' ? 0 : 1].classList.add('active');
|
||
}
|
||
|
||
// Check if gateway is running
|
||
function checkStatus() {
|
||
fetch('http://127.0.0.1:18789/', { mode: 'no-cors', cache: 'no-cache' })
|
||
.then(() => {
|
||
document.getElementById('statusDot').className = 'status-dot on';
|
||
document.getElementById('statusText').textContent = 'OpenClaw 运行中';
|
||
const link = document.getElementById('statusLink');
|
||
link.style.display = 'inline';
|
||
link.href = 'http://127.0.0.1:18789/#token=uclaw';
|
||
})
|
||
.catch(() => {
|
||
document.getElementById('statusDot').className = 'status-dot off';
|
||
document.getElementById('statusText').textContent = 'OpenClaw 未运行 — 请先双击启动脚本';
|
||
document.getElementById('statusLink').style.display = 'none';
|
||
});
|
||
}
|
||
checkStatus();
|
||
setInterval(checkStatus, 5000);
|
||
</script>
|
||
</body>
|
||
</html>
|