be734cb111
- Reorganize project: clean structure (portable/ u-claw-app/ usb-scripts/ website/) - Move docs into website/, rename uclaw-scripts to usb-scripts - Add u-claw-app/ Electron desktop source code - Add portable/setup.sh: one-command dev environment setup - Add portable/SkillHub.html: skill marketplace page - Update README: dev guide, contribution workflow, project structure - Update .gitignore: exclude runtime binaries and build artifacts - Expand China install guide: npm mirrors, detailed onboard wizard
139 lines
3.4 KiB
HTML
139 lines
3.4 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 - Loading</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, "Microsoft YaHei", "Segoe UI", sans-serif;
|
|
background: #0a0a0a;
|
|
color: #e0e0e0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
-webkit-app-region: drag;
|
|
}
|
|
.container {
|
|
text-align: center;
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
.logo {
|
|
width: 120px;
|
|
height: 120px;
|
|
margin: 0 auto 24px;
|
|
animation: pulse 2s ease-in-out infinite;
|
|
}
|
|
.logo svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { transform: scale(1); opacity: 1; }
|
|
50% { transform: scale(1.05); opacity: 0.8; }
|
|
}
|
|
h1 {
|
|
font-size: 2em;
|
|
margin-bottom: 8px;
|
|
font-weight: 600;
|
|
}
|
|
h1 span { color: #ff6b35; }
|
|
.subtitle {
|
|
color: #888;
|
|
font-size: 1.1em;
|
|
margin-bottom: 32px;
|
|
}
|
|
.loader {
|
|
width: 200px;
|
|
height: 3px;
|
|
background: #222;
|
|
border-radius: 3px;
|
|
margin: 0 auto 16px;
|
|
overflow: hidden;
|
|
}
|
|
.loader-bar {
|
|
height: 100%;
|
|
width: 40%;
|
|
background: linear-gradient(90deg, #ff6b35, #ff8f65);
|
|
border-radius: 3px;
|
|
animation: loading 1.5s ease-in-out infinite;
|
|
}
|
|
@keyframes loading {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(350%); }
|
|
}
|
|
.status {
|
|
color: #666;
|
|
font-size: 0.9em;
|
|
}
|
|
.status span {
|
|
animation: dots 1.5s steps(4) infinite;
|
|
}
|
|
@keyframes dots {
|
|
0% { content: ''; }
|
|
25% { content: '.'; }
|
|
50% { content: '..'; }
|
|
75% { content: '...'; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="logo">
|
|
<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
|
|
<!-- Lobster/Claw icon -->
|
|
<circle cx="60" cy="60" r="55" fill="none" stroke="#ff6b35" stroke-width="2" opacity="0.3"/>
|
|
<circle cx="60" cy="60" r="40" fill="none" stroke="#ff6b35" stroke-width="1.5" opacity="0.2"/>
|
|
<!-- Claw shape -->
|
|
<path d="M35 55 C35 35, 55 25, 60 40 C65 25, 85 35, 85 55 C85 70, 75 80, 60 85 C45 80, 35 70, 35 55Z"
|
|
fill="#ff6b35" opacity="0.9"/>
|
|
<!-- U shape inside -->
|
|
<path d="M45 50 L45 65 C45 75, 55 80, 60 80 C65 80, 75 75, 75 65 L75 50"
|
|
fill="none" stroke="#fff" stroke-width="4" stroke-linecap="round"/>
|
|
<!-- Eyes -->
|
|
<circle cx="50" cy="45" r="3" fill="#fff"/>
|
|
<circle cx="70" cy="45" r="3" fill="#fff"/>
|
|
</svg>
|
|
</div>
|
|
<h1><span>U-Claw</span></h1>
|
|
<p class="subtitle">AI Assistant / AI 助手</p>
|
|
<div class="loader"><div class="loader-bar"></div></div>
|
|
<p class="status" id="status">Starting OpenClaw engine...</p>
|
|
</div>
|
|
|
|
<script>
|
|
const messages = [
|
|
'Starting OpenClaw engine...',
|
|
'正在启动 OpenClaw 引擎...',
|
|
'Checking configuration...',
|
|
'检查配置文件...',
|
|
'Initializing AI gateway...',
|
|
'初始化 AI 网关...',
|
|
];
|
|
let i = 0;
|
|
setInterval(() => {
|
|
document.getElementById('status').textContent = messages[i % messages.length];
|
|
i++;
|
|
}, 2000);
|
|
|
|
// Check if gateway is ready via IPC
|
|
async function checkReady() {
|
|
try {
|
|
if (window.uclaw) {
|
|
const status = await window.uclaw.getGatewayStatus();
|
|
if (status.ready) {
|
|
document.getElementById('status').textContent = 'Ready! / 就绪！';
|
|
// Main process will handle navigation
|
|
return;
|
|
}
|
|
}
|
|
} catch(e) {}
|
|
setTimeout(checkReady, 1000);
|
|
}
|
|
checkReady();
|
|
</script>
|
|
</body>
|
|
</html>
|