<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超协体2.0 - AI驱动的五行协作平台</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif;
line-height: 1.6;
color: #333;
overflow-x: hidden;
}
/* Hero Section */
.hero {
min-height: 100vh;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: white;
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 50px 50px;
animation: moveBackground 20s linear infinite;
}
@keyframes moveBackground {
0% { transform: translate(0, 0); }
100% { transform: translate(50px, 50px); }
}
.hero-content {
position: relative;
z-index: 1;
max-width: 1200px;
padding: 0 20px;
}
.hero h1 {
font-size: 4rem;
font-weight: 800;
margin-bottom: 1rem;
animation: fadeInUp 1s ease;
}
.version-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.2);
padding: 8px 20px;
border-radius: 30px;
font-size: 1rem;
margin-bottom: 2rem;
backdrop-filter: blur(10px);
animation: fadeInUp 1s ease 0.2s both;
}
.hero p {
font-size: 1.5rem;
margin-bottom: 3rem;
opacity: 0.95;
animation: fadeInUp 1s ease 0.4s both;
}
.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
animation: fadeInUp 1s ease 0.6s both;
}
.cta-button {
padding: 15px 40px;
font-size: 1.1rem;
border: none;
border-radius: 50px;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
text-decoration: none;
display: inline-block;
}
.cta-primary {
background: white;
color: #667eea;
}
.cta-primary:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.cta-secondary {
background: rgba(255, 255, 255, 0.2);
color: white;
backdrop-filter: blur(10px);
border: 2px solid white;
}
.cta-secondary:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateY(-3px);
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Stats Section */
.stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 40px;
padding: 80px 20px;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
.stat-item {
padding: 30px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border-radius: 15px;
transition: transform 0.3s;
}
.stat-item:hover {
transform: translateY(-10px);
}
.stat-number {
font-size: 3rem;
font-weight: 800;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-label {
font-size: 1.1rem;
color: #666;
margin-top: 10px;
}
/* Features Section */
.section {
padding: 100px 20px;
max-width: 1200px;
margin: 0 auto;
}
.section-title {
text-align: center;
font-size: 3rem;
font-weight: 800;
margin-bottom: 1rem;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.section-subtitle {
text-align: center;
font-size: 1.3rem;
color: #666;
margin-bottom: 60px;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px;
margin-top: 60px;
}
.feature-card {
padding: 40px;
background: white;
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
transition: all 0.3s;
border: 2px solid transparent;
}
.feature-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 60px rgba(102, 126, 234, 0.3);
border-color: #667eea;
}
.feature-icon {
font-size: 3rem;
margin-bottom: 20px;
}
.feature-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 15px;
color: #333;
}
.feature-description {
color: #666;
line-height: 1.8;
}
/* Wuxing Section */
.wuxing-section {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
padding: 100px 20px;
}
.wuxing-diagram {
max-width: 800px;
margin: 60px auto;
position: relative;
height: 500px;
}
.wuxing-element {
position: absolute;
width: 120px;
height: 120px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.wuxing-fire {
background: linear-gradient(135deg, #f93d66 0%, #ff6b9d 100%);
top: 0;
left: 50%;
transform: translateX(-50%);
}
.wuxing-earth {
background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.wuxing-metal {
background: linear-gradient(135deg, #9ca3af 0%, #d1d5db 100%);
color: #333 !important;
top: 30%;
right: 5%;
}
.wuxing-water {
background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
bottom: 30%;
left: 5%;
}
.wuxing-wood {
background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
bottom: 30%;
right: 5%;
}
.element-icon {
font-size: 2.5rem;
}
.element-name {
font-size: 1rem;
margin-top: 5px;
}
/* AI Features */
.ai-features {
background: #1a1a2e;
color: white;
padding: 100px 20px;
}
.ai-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
margin-top: 60px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.ai-card {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border-radius: 15px;
padding: 30px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s;
}
.ai-card:hover {
background: rgba(255, 255, 255, 0.1);
border-color: #667eea;
transform: translateY(-5px);
}
.ai-card h3 {
font-size: 1.3rem;
margin-bottom: 15px;
color: #667eea;
}
.ai-card p {
color: rgba(255, 255, 255, 0.8);
line-height: 1.8;
}
/* Use Cases */
.use-cases {
padding: 100px 20px;
background: white;
}
.use-case-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
margin-top: 60px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.use-case {
padding: 40px;
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border-radius: 20px;
position: relative;
overflow: hidden;
}
.use-case::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.use-case h3 {
font-size: 1.5rem;
margin-bottom: 20px;
color: #333;
}
.use-case ul {
list-style: none;
padding: 0;
}
.use-case li {
padding: 10px 0;
color: #666;
position: relative;
padding-left: 30px;
}
.use-case li::before {
content: '✓';
position: absolute;
left: 0;
color: #10b981;
font-weight: bold;
font-size: 1.2rem;
}
/* CTA Section */
.cta-section {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 100px 20px;
text-align: center;
color: white;
}
.cta-section h2 {
font-size: 3rem;
margin-bottom: 2rem;
}
.cta-section p {
font-size: 1.3rem;
margin-bottom: 3rem;
opacity: 0.9;
}
/* Footer */
.footer {
background: #1a1a2e;
color: white;
padding: 40px 20px;
text-align: center;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
}
.footer-links {
display: flex;
justify-content: center;
gap: 30px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.footer-links a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color 0.3s;
}
.footer-links a:hover {
color: #667eea;
}
/* Responsive */
@media (max-width: 768px) {
.hero h1 {
font-size: 2.5rem;
}
.hero p {
font-size: 1.2rem;
}
.section-title {
font-size: 2rem;
}
.wuxing-diagram {
height: 400px;
}
.wuxing-element {
width: 80px;
height: 80px;
}
.element-icon {
font-size: 1.8rem;
}
.element-name {
font-size: 0.8rem;
}
}
/* Scroll Animation */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<div class="version-badge">✨ v2.0 AI增强版</div>
<h1>超协体</h1>
<p>AI驱动的五行协作平台 · 让团队效能提升100倍</p>
<div class="cta-buttons">
<a href="/login.html" class="cta-button cta-primary">立即开始</a>
<a href="#features" class="cta-button cta-secondary">了解更多</a>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="stats">
<div class="stat-item">
<div class="stat-number">5</div>
<div class="stat-label">AI协同能力</div>
</div>
<div class="stat-item">
<div class="stat-number">4</div>
<div class="stat-label">AI虚拟成员</div>
</div>
<div class="stat-item">
<div class="stat-number">34</div>
<div class="stat-label">后端API</div>
</div>
<div class="stat-item">
<div class="stat-number">100x</div>
<div class="stat-label">效能提升</div>
</div>
</section>
<!-- Features Section -->
<section class="section" id="features">
<h2 class="section-title">核心功能</h2>
<p class="section-subtitle">完整的协作系统 + 强大的AI能力</p>
<div class="features-grid">
<div class="feature-card fade-in">
<div class="feature-icon">🎯</div>
<h3 class="feature-title">任务智能推荐</h3>
<p class="feature-description">
基于五行画像和技能匹配，AI为每个成员推荐最合适的任务。
四维评分算法：五行匹配40% + 技能匹配30% + 成长价值20% + 负载均衡10%
</p>
</div>
<div class="feature-card fade-in">
<div class="feature-icon">🤝</div>
<h3 class="feature-title">协作对智能推荐</h3>
<p class="feature-description">
五行相生相克算法，推荐最佳协作搭档。
你的木能量强，可以生对方的火 —— 能量互补而非技能相似
</p>
</div>
<div class="feature-card fade-in">
<div class="feature-icon">🤖</div>
<h3 class="feature-title">AI助手对话</h3>
<p class="feature-description">
任务详情页实时AI助手，随时召唤协助。
分析任务、推荐成员、拆解步骤、提供建议，全程上下文感知
</p>
</div>
<div class="feature-card fade-in">
<div class="feature-icon">👥</div>
<h3 class="feature-title">AI虚拟成员</h3>
<p class="feature-description">
4种专长AI成为团队正式成员：CodeMaster、DocWriter、Analyst、Coordinator。
可被分配任务并自动执行，真正的人机协同
</p>
</div>
<div class="feature-card fade-in">
<div class="feature-icon">🔄</div>
<h3 class="feature-title">多AI协作</h3>
<p class="feature-description">
复杂任务自动拆解为子任务，多个AI并行处理。
Coordinator编排、执行、汇总，最终生成完整报告
</p>
</div>
<div class="feature-card fade-in">
<div class="feature-icon">💰</div>
<h3 class="feature-title">积分经济系统</h3>
<p class="feature-description">
完整的积分循环：创建任务-10积分，完成任务+20积分。
新人礼包50积分，邀请成功+25积分，形成良性激励
</p>
</div>
</div>
</section>
<!-- Wuxing Section -->
<section class="wuxing-section">
<div class="section">
<h2 class="section-title">五行协作理论</h2>
<p class="section-subtitle">东方智慧 × AI技术 = 超协体独有算法</p>
<div class="wuxing-diagram">
<div class="wuxing-element wuxing-fire">
<div class="element-icon">🔥</div>
<div class="element-name">火 · 叙事</div>
</div>
<div class="wuxing-element wuxing-earth">
<div class="element-icon">🏔️</div>
<div class="element-name">土 · 资产</div>
</div>
<div class="wuxing-element wuxing-metal">
<div class="element-icon">⚙️</div>
<div class="element-name">金 · 法则</div>
</div>
<div class="wuxing-element wuxing-water">
<div class="element-icon">🌊</div>
<div class="element-name">水 · 商业</div>
</div>
<div class="wuxing-element wuxing-wood">
<div class="element-icon">🌳</div>
<div class="element-name">木 · 技术</div>
</div>
</div>
<div style="text-align: center; margin-top: 40px;">
<p style="font-size: 1.2rem; color: #666; max-width: 800px; margin: 0 auto;">
<strong>五行相生：</strong>木生火 → 火生土 → 土生金 → 金生水 → 水生木<br>
<strong>协作推荐：</strong>你的强项能生对方的弱项 = 最佳搭档<br>
<strong>成长导向：</strong>识别短板，推荐能提升弱项的任务
</p>
</div>
</div>
</section>
<!-- AI Features -->
<section class="ai-features">
<div class="section">
<h2 class="section-title" style="color: white;">AI能力矩阵</h2>
<p class="section-subtitle" style="color: rgba(255,255,255,0.8);">5大AI能力 · 全面覆盖协作场景</p>
<div class="ai-grid">
<div class="ai-card">
<h3>💻 CodeMaster AI</h3>
<p>木能量70%，专注代码开发。可自动处理编程任务、代码审查、架构设计。</p>
</div>
<div class="ai-card">
<h3>📝 DocWriter AI</h3>
<p>火能量60%，专注文档撰写。自动生成技术文档、API文档、项目报告。</p>
</div>
<div class="ai-card">
<h3>📊 Analyst AI</h3>
<p>金能量60%，专注数据分析。提供决策支持、趋势预测、战略研究。</p>
</div>
<div class="ai-card">
<h3>🎯 Coordinator AI</h3>
<p>水能量50%，专注项目协调。自动拆解任务、编排AI、汇总结果。</p>
</div>
<div class="ai-card">
<h3>🔍 智能推荐</h3>
<p>四维评分算法，为每个成员推荐最合适的任务和协作伙伴。</p>
</div>
<div class="ai-card">
<h3>💬 实时助手</h3>
<p>任务页内嵌AI对话，随时提供建议、推荐成员、拆解步骤。</p>
</div>
</div>
</div>
</section>
<!-- Use Cases -->
<section class="use-cases">
<h2 class="section-title">使用场景</h2>
<p class="section-subtitle">适用于各类团队协作场景</p>
<div class="use-case-grid">
<div class="use-case fade-in">
<h3>🏢 青年公社</h3>
<ul>
<li>10人团队 + 4个AI成员 = 14人效能</li>
<li>五行匹配提升协作效率30%</li>
<li>智能推荐减少50%沟通成本</li>
<li>AI自动执行释放80%重复劳动</li>
</ul>
</div>
<div class="use-case fade-in">
<h3>🚀 创业团队</h3>
<ul>
<li>AI辅助决策减少试错成本</li>
<li>多AI协作处理复杂项目</li>
<li>DocWriter AI自动生成文档</li>
<li>积分经济激励团队协作</li>
</ul>
</div>
<div class="use-case fade-in">
<h3>🎓 教育机构</h3>
<ul>
<li>学生五行画像个性化培养</li>
<li>AI推荐成长方向和学习路径</li>
<li>协作对推荐优化小组分配</li>
<li>项目实践全程AI辅导</li>
</ul>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="cta-section">
<h2>准备好开始了吗？</h2>
<p>超协体2.0 AI增强版，生产就绪，立即可用</p>
<div class="cta-buttons">
<a href="/register.html" class="cta-button cta-primary">立即注册</a>
<a href="/login.html" class="cta-button cta-secondary">已有账号，登录</a>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="footer-content">
<div class="footer-links">
<a href="/dashboard.html">工作台</a>
<a href="/members.html">成员列表</a>
<a href="/my-tasks.html">我的任务</a>
<a href="/profile.html">个人画像</a>
</div>
<p style="color: rgba(255,255,255,0.6); margin-top: 20px;">
超协体 v2.0 AI增强版 · 人机协同 · 五行协作<br>
[五行: 🌳木40% + 🔥火25% + ⚙️金20% + 🌊水10% + 🏔️土5%]
</p>
<p style="color: rgba(255,255,255,0.4); margin-top: 10px; font-size: 0.9rem;">
© 2026 SuperCoordination MCP. All rights reserved.
</p>
</div>
</footer>
<script>
// Scroll Animation
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
}, observerOptions);
document.querySelectorAll('.fade-in').forEach(el => {
observer.observe(el);
});
// Smooth Scroll
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
</script>
</body>
</html>
