<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超协短邮 - 革命性的节点协作工具</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--fire: #f59e0b;
--water: #3b82f6;
--wood: #10b981;
--metal: #6366f1;
--earth: #8b5cf6;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
background: #000;
color: #fff;
overflow-x: hidden;
}
/* Hero Section */
.hero {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px 20px;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
position: relative;
overflow: hidden;
}
.hero::before {
content: '';
position: absolute;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
border-radius: 50%;
top: -200px;
right: -200px;
animation: pulse 4s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.5; }
50% { transform: scale(1.2); opacity: 0.8; }
}
.hero-content {
text-align: center;
z-index: 1;
max-width: 800px;
}
.logo {
font-size: 80px;
margin-bottom: 20px;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
h1 {
font-size: 64px;
font-weight: 900;
margin-bottom: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1.2;
}
.tagline {
font-size: 24px;
color: #a8b2d1;
margin-bottom: 40px;
font-weight: 300;
}
.cta-button {
display: inline-block;
padding: 20px 50px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
text-decoration: none;
border-radius: 50px;
font-size: 20px;
font-weight: 600;
transition: all 0.3s;
box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
}
.cta-button:hover {
transform: translateY(-5px);
box-shadow: 0 15px 50px rgba(102, 126, 234, 0.5);
}
/* Problem Section */
.problem {
padding: 100px 20px;
background: #0f0f23;
}
.section-title {
text-align: center;
font-size: 48px;
margin-bottom: 60px;
font-weight: 800;
}
.problem-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.problem-card {
background: rgba(255, 255, 255, 0.03);
padding: 40px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s;
}
.problem-card:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.05);
border-color: rgba(102, 126, 234, 0.5);
}
.problem-icon {
font-size: 60px;
margin-bottom: 20px;
}
.problem-card h3 {
font-size: 24px;
margin-bottom: 15px;
color: #667eea;
}
.problem-card p {
color: #a8b2d1;
line-height: 1.6;
}
/* Solution Section */
.solution {
padding: 100px 20px;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 40px;
max-width: 1200px;
margin: 0 auto;
}
.feature-card {
background: rgba(255, 255, 255, 0.05);
padding: 50px;
border-radius: 30px;
border: 2px solid transparent;
transition: all 0.5s;
position: relative;
overflow: hidden;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, transparent 100%);
opacity: 0;
transition: opacity 0.5s;
}
.feature-card:hover::before {
opacity: 1;
}
.feature-card:hover {
border-color: #667eea;
transform: scale(1.05);
}
.feature-number {
font-size: 80px;
font-weight: 900;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;
margin-bottom: 20px;
}
.feature-card h3 {
font-size: 28px;
margin-bottom: 20px;
}
.feature-card p {
color: #a8b2d1;
font-size: 18px;
line-height: 1.6;
}
/* Interactive Demo */
.demo {
padding: 100px 20px;
background: #0f0f23;
}
.demo-container {
max-width: 400px;
margin: 0 auto;
position: relative;
}
.phone-frame {
background: #1a1a2e;
border-radius: 40px;
padding: 20px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
border: 8px solid #2d2d44;
}
.phone-screen {
background: linear-gradient(135deg, #16213e 0%, #0f0f23 100%);
border-radius: 30px;
height: 700px;
overflow: hidden;
position: relative;
}
.demo-inbox {
padding: 20px;
}
.demo-card {
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
padding: 20px;
margin-bottom: 15px;
border: 1px solid rgba(102, 126, 234, 0.3);
cursor: pointer;
transition: all 0.3s;
animation: slideInUp 0.5s ease-out;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.demo-card:hover {
background: rgba(102, 126, 234, 0.1);
transform: translateX(10px);
}
.demo-card-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.demo-icon {
font-size: 24px;
}
.demo-title {
font-size: 16px;
font-weight: 600;
}
.demo-meta {
font-size: 12px;
color: #a8b2d1;
margin-bottom: 10px;
}
.demo-action {
font-size: 14px;
color: #667eea;
}
.demo-compose {
position: absolute;
bottom: 30px;
right: 30px;
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
cursor: pointer;
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.5);
transition: all 0.3s;
animation: pulse-button 2s ease-in-out infinite;
}
@keyframes pulse-button {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}
.demo-compose:hover {
transform: scale(1.2);
box-shadow: 0 15px 40px rgba(102, 126, 234, 0.7);
}
/* Scenarios */
.scenarios {
padding: 100px 20px;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
}
.scenario-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
gap: 60px;
}
.scenario {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
align-items: center;
}
.scenario:nth-child(even) {
direction: rtl;
}
.scenario:nth-child(even) > * {
direction: ltr;
}
.scenario-content {
padding: 40px;
}
.scenario-label {
display: inline-block;
padding: 8px 20px;
background: rgba(102, 126, 234, 0.2);
color: #667eea;
border-radius: 20px;
font-size: 14px;
font-weight: 600;
margin-bottom: 20px;
}
.scenario h3 {
font-size: 36px;
margin-bottom: 20px;
}
.scenario p {
font-size: 18px;
color: #a8b2d1;
line-height: 1.8;
margin-bottom: 15px;
}
.scenario-visual {
background: rgba(255, 255, 255, 0.03);
padding: 40px;
border-radius: 30px;
border: 1px solid rgba(102, 126, 234, 0.3);
}
.flow-step {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 20px;
padding: 20px;
background: rgba(255, 255, 255, 0.05);
border-radius: 15px;
transition: all 0.3s;
}
.flow-step:hover {
background: rgba(102, 126, 234, 0.1);
transform: translateX(10px);
}
.step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
flex-shrink: 0;
}
.step-text {
font-size: 16px;
color: #e0e0e0;
}
/* Gestures */
.gestures {
padding: 100px 20px;
background: #0f0f23;
}
.gesture-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}
.gesture-card {
text-align: center;
padding: 40px;
background: rgba(255, 255, 255, 0.03);
border-radius: 20px;
transition: all 0.3s;
border: 2px solid transparent;
}
.gesture-card:hover {
border-color: #667eea;
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.05);
}
.gesture-icon {
font-size: 80px;
margin-bottom: 20px;
display: inline-block;
animation: gesture-demo 2s ease-in-out infinite;
}
@keyframes gesture-demo {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.gesture-card:nth-child(2) .gesture-icon {
animation: gesture-swipe-up 2s ease-in-out infinite;
}
@keyframes gesture-swipe-up {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.gesture-card:nth-child(3) .gesture-icon {
animation: gesture-swipe-left 2s ease-in-out infinite;
}
@keyframes gesture-swipe-left {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(-20px); }
}
.gesture-name {
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
color: #667eea;
}
.gesture-desc {
color: #a8b2d1;
font-size: 14px;
}
/* CTA Section */
.final-cta {
padding: 100px 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
text-align: center;
}
.final-cta h2 {
font-size: 56px;
margin-bottom: 30px;
font-weight: 900;
}
.final-cta p {
font-size: 24px;
margin-bottom: 50px;
opacity: 0.9;
}
.cta-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.btn-primary {
padding: 20px 50px;
background: white;
color: #667eea;
border-radius: 50px;
font-size: 20px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.btn-primary:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}
.btn-secondary {
padding: 20px 50px;
background: transparent;
color: white;
border: 2px solid white;
border-radius: 50px;
font-size: 20px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s;
}
.btn-secondary:hover {
background: white;
color: #667eea;
}
/* Footer */
footer {
padding: 60px 20px;
background: #000;
text-align: center;
color: #666;
}
footer a {
color: #667eea;
text-decoration: none;
}
footer a:hover {
text-decoration: underline;
}
/* Responsive */
@media (max-width: 768px) {
h1 { font-size: 48px; }
.tagline { font-size: 18px; }
.section-title { font-size: 36px; }
.scenario { grid-template-columns: 1fr; }
.phone-screen { height: 600px; }
}
</style>
</head>
<body>
<!-- Hero Section -->
<section class="hero">
<div class="hero-content">
<div class="logo">💬</div>
<h1>超协短邮</h1>
<p class="tagline">轻量完整，一次说清<br>革命性的节点协作工具</p>
<a href="#demo" class="cta-button">体验革命 →</a>
</div>
</section>
<!-- Problem Section -->
<section class="problem">
<h2 class="section-title">传统通讯的三大困境</h2>
<div class="problem-grid">
<div class="problem-card">
<div class="problem-icon">💬</div>
<h3>微信：信息过载</h3>
<p>一条条碎片消息，重要内容被淹没，群聊99+无法追溯，信息密度极低。</p>
</div>
<div class="problem-card">
<div class="problem-icon">📧</div>
<h3>邮件：太重太慢</h3>
<p>正式但繁琐，写一封邮件要10分钟，手机上更是折磨，不适合快节奏协作。</p>
</div>
<div class="problem-card">
<div class="problem-icon">🤖</div>
<h3>AI只是工具</h3>
<p>现有产品中AI只是助手，无法真正参与协作，人机协同效率低下。</p>
</div>
</div>
</section>
<!-- Solution Section -->
<section class="solution">
<h2 class="section-title">短邮：介于微信与邮件之间</h2>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-number">01</div>
<h3>卡片式发送</h3>
<p>不是一条条发消息，而是一次性构建完整的结构化卡片。轻量但完整，快速但深度。</p>
</div>
<div class="feature-card">
<div class="feature-number">02</div>
<h3>AI提问式构建</h3>
<p>AI智能引导你输入，像朋友聊天一样自然。语音、图片、视频，AI自动理解和总结。</p>
</div>
<div class="feature-card">
<div class="feature-number">03</div>
<h3>高信息密度</h3>
<p>每个短邮都包含：主题、行动点、核心内容、多模态附件、AI洞察。一次说清。</p>
</div>
</div>
</section>
<!-- Interactive Demo -->
<section class="demo" id="demo">
<h2 class="section-title">实际体验</h2>
<div class="demo-container">
<div class="phone-frame">
<div class="phone-screen">
<div class="demo-inbox">
<h3 style="margin-bottom: 20px; font-size: 24px;">📬 收件箱</h3>
<div class="demo-card" style="animation-delay: 0s;">
<div class="demo-card-header">
<span class="demo-icon">💎</span>
<span class="demo-title">积分方案选择</span>
</div>
<div class="demo-meta">产品经理节点 • 20分钟前</div>
<div class="demo-action">🎯 需要你选择A或B方案</div>
<div style="margin-top: 10px; font-size: 12px; color: #888;">📎 草图 • 数据 • 语音 | 🤖 AI: 🏔️土属性</div>
</div>
<div class="demo-card" style="animation-delay: 0.1s;">
<div class="demo-card-header">
<span class="demo-icon">📊</span>
<span class="demo-title">本周进度汇报</span>
</div>
<div class="demo-meta">运营节点 • 1小时前</div>
<div class="demo-action">📋 项目进展更新</div>
<div style="margin-top: 10px; font-size: 12px; color: #888;">📎 数据面板录屏 | 🤖 用户增长30%</div>
</div>
<div class="demo-card" style="animation-delay: 0.2s;">
<div class="demo-card-header">
<span class="demo-icon">❓</span>
<span class="demo-title">技术难题求助</span>
</div>
<div class="demo-meta">技术节点 • 3小时前</div>
<div class="demo-action">🆘 需要技术支持</div>
<div style="margin-top: 10px; font-size: 12px; color: #888;">📎 报错截图 | 🤖 已关联历史晶体</div>
</div>
</div>
<div class="demo-compose" onclick="alert('长按说话，AI实时构建短邮\n松手即发，革命性体验！')">
+
</div>
</div>
</div>
</div>
<p style="text-align: center; margin-top: 30px; color: #a8b2d1; font-size: 18px;">
👆 点击右下角 + 按钮体验
</p>
</section>
<!-- Scenarios -->
<section class="scenarios">
<h2 class="section-title">典型使用场景</h2>
<div class="scenario-grid">
<!-- Scenario 1 -->
<div class="scenario">
<div class="scenario-content">
<span class="scenario-label">场景 01</span>
<h3>快速决策请求</h3>
<p>产品经理需要团队选择积分方案A或B。</p>
<p>传统方式：微信群里发几十条消息，方案文件被刷屏，讨论混乱。</p>
<p style="color: #667eea; font-weight: 600;">短邮方式：长按说话30秒，拍照上传两个方案，AI自动构建决策卡片。3分钟完成。</p>
</div>
<div class="scenario-visual">
<div class="flow-step">
<div class="step-number">1</div>
<div class="step-text">长按说话："需要选A或B方案"</div>
</div>
<div class="flow-step">
<div class="step-number">2</div>
<div class="step-text">上滑添加方案图片（2张）</div>
</div>
<div class="flow-step">
<div class="step-number">3</div>
<div class="step-text">AI自动识别内容并构建卡片</div>
</div>
<div class="flow-step">
<div class="step-number">4</div>
<div class="step-text">松手发送给运营+技术节点</div>
</div>
</div>
</div>
<!-- Scenario 2 -->
<div class="scenario">
<div class="scenario-content">
<span class="scenario-label">场景 02</span>
<h3>多模态进度汇报</h3>
<p>运营需要汇报项目进展，包含数据和分析。</p>
<p>传统方式：截图、打字、上传文件，分好几条消息发送。</p>
<p style="color: #667eea; font-weight: 600;">短邮方式：录屏展示数据面板，语音补充说明，AI识别关键数据生成可视化摘要。</p>
</div>
<div class="scenario-visual">
<div class="flow-step">
<div class="step-number">1</div>
<div class="step-text">录屏展示数据面板（30秒）</div>
</div>
<div class="flow-step">
<div class="step-number">2</div>
<div class="step-text">语音补充："本周增长30%"</div>
</div>
<div class="flow-step">
<div class="step-number">3</div>
<div class="step-text">AI提取关键帧和数据</div>
</div>
<div class="flow-step">
<div class="step-number">4</div>
<div class="step-text">生成结构化进度报告卡片</div>
</div>
</div>
</div>
<!-- Scenario 3 -->
<div class="scenario">
<div class="scenario-content">
<span class="scenario-label">场景 03</span>
<h3>线下会议沉淀</h3>
<p>10分钟见面快速决策后，需要沉淀成文档。</p>
<p>传统方式：会后花1小时整理会议纪要，可能遗漏关键信息。</p>
<p style="color: #667eea; font-weight: 600;">短邮方式：会议中语音回顾要点，拍照白板内容，AI生成会议纪要并自动转化为任务和晶体。</p>
</div>
<div class="scenario-visual">
<div class="flow-step">
<div class="step-number">1</div>
<div class="step-text">会议结束，语音回顾要点</div>
</div>
<div class="flow-step">
<div class="step-number">2</div>
<div class="step-text">拍照白板上的草图和决策</div>
</div>
<div class="flow-step">
<div class="step-number">3</div>
<div class="step-text">AI自动生成会议纪要</div>
</div>
<div class="flow-step">
<div class="step-number">4</div>
<div class="step-text">转化为3个任务 + 1个晶体</div>
</div>
</div>
</div>
<!-- Scenario 4 -->
<div class="scenario">
<div class="scenario-content">
<span class="scenario-label">场景 04</span>
<h3>灵感即时捕捉</h3>
<p>突然想到好主意，需要立即记录并分享。</p>
<p>传统方式：打开备忘录，打字半天，还要整理格式。</p>
<p style="color: #667eea; font-weight: 600;">短邮方式：立即语音记录想法，手绘草图，AI帮助结构化，发给团队或未来的自己。</p>
</div>
<div class="scenario-visual">
<div class="flow-step">
<div class="step-number">1</div>
<div class="step-text">灵感闪现，立即语音记录</div>
</div>
<div class="flow-step">
<div class="step-number">2</div>
<div class="step-text">手绘简单草图补充</div>
</div>
<div class="flow-step">
<div class="step-number">3</div>
<div class="step-text">AI自动结构化内容</div>
</div>
<div class="flow-step">
<div class="step-number">4</div>
<div class="step-text">定时发送或立即分享</div>
</div>
</div>
</div>
</div>
</section>
<!-- Gestures -->
<section class="gestures">
<h2 class="section-title">革命性手势交互</h2>
<div class="gesture-grid">
<div class="gesture-card">
<div class="gesture-icon">👆</div>
<div class="gesture-name">长按说话</div>
<div class="gesture-desc">AI实时构建卡片<br>松手即发送</div>
</div>
<div class="gesture-card">
<div class="gesture-icon">☝️</div>
<div class="gesture-name">上滑添加</div>
<div class="gesture-desc">添加图片/视频/文件<br>多模态输入</div>
</div>
<div class="gesture-card">
<div class="gesture-icon">👈</div>
<div class="gesture-name">左滑回复</div>
<div class="gesture-desc">快速回复<br>同意/拒绝/评论</div>
</div>
<div class="gesture-card">
<div class="gesture-icon">👉</div>
<div class="gesture-name">右滑详情</div>
<div class="gesture-desc">查看完整内容<br>AI洞察</div>
</div>
<div class="gesture-card">
<div class="gesture-icon">👇</div>
<div class="gesture-name">下滑取消</div>
<div class="gesture-desc">取消当前操作<br>返回上级</div>
</div>
<div class="gesture-card">
<div class="gesture-icon">✌️</div>
<div class="gesture-name">双击转化</div>
<div class="gesture-desc">转为深度协作空间<br>或知识晶体</div>
</div>
</div>
</section>
<!-- Final CTA -->
<section class="final-cta">
<h2>准备好革新你的协作方式了吗？</h2>
<p>加入良渚超协体网络，体验下一代通讯工具</p>
<div class="cta-buttons">
<a href="/register.html" class="btn-primary">立即加入</a>
<a href="/dashboard.html" class="btn-secondary">了解更多</a>
</div>
</section>
<!-- Footer -->
<footer>
<p>超协体 · 良渚节点网络</p>
<p style="margin-top: 10px;">
<a href="/about.html">关于我们</a> ·
<a href="/privacy.html">隐私政策</a> ·
<a href="mailto:hello@supercoordination.com">联系我们</a>
</p>
<p style="margin-top: 20px; font-size: 12px;">
© 2026 超协体. 让每次协作都值得沉淀.
</p>
</footer>
<script>
// 简单的滚动动画
const observerOptions = {
threshold: 0.1,
rootMargin: '0px 0px -100px 0px'
};
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
document.querySelectorAll('.problem-card, .feature-card, .scenario, .gesture-card').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(30px)';
el.style.transition = 'all 0.6s ease-out';
observer.observe(el);
});
// Demo卡片点击
document.querySelectorAll('.demo-card').forEach((card, index) => {
card.addEventListener('click', () => {
const titles = [
'💎 积分方案选择\n\n🎯 请选择方案A或B\n\n💭 基于用户增长数据，两个方案各有优势...\n\n📎 附件：产品流程图、语音说明、数据分析\n\n🤖 AI洞察：方案A偏🏔️土属性（长期），方案B偏🔥火属性（短期）',
'📊 本周进度汇报\n\n📋 项目进展更新\n\n💭 本周用户增长30%，日活提升显著...\n\n📎 数据面板录屏（30秒）\n\n🤖 AI识别：关键指标都在上升',
'❓ 技术难题求助\n\n🆘 API调用报错\n\n💭 用户登录时偶尔出现500错误...\n\n📎 报错截图、错误日志\n\n🤖 AI关联：找到2个相似历史问题的解决方案'
];
alert(titles[index]);
});
});
</script>
</body>
</html>
