620 lines
19 KiB
HTML
620 lines
19 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>Trae 2026 年度报告</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&family=Montserrat:wght@700;800;900&display=swap" rel="stylesheet">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root {
|
||
--primary: #6366f1;
|
||
--secondary: #8b5cf6;
|
||
--accent: #ec4899;
|
||
--dark: #0f172a;
|
||
--dark-light: #1e293b;
|
||
--text: #f1f5f9;
|
||
--text-light: #94a3b8;
|
||
}
|
||
|
||
body {
|
||
font-family: 'Inter', sans-serif;
|
||
background: var(--dark);
|
||
color: var(--text);
|
||
overflow-x: hidden;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.noise {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.1'/%3E%3C/svg%3E");
|
||
pointer-events: none;
|
||
z-index: 100;
|
||
}
|
||
|
||
.section {
|
||
min-height: 100vh;
|
||
padding: 80px 20px;
|
||
position: relative;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.cover {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.cover-bg {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: hidden;
|
||
z-index: 0;
|
||
}
|
||
|
||
.gradient-orb {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
filter: blur(100px);
|
||
opacity: 0.6;
|
||
animation: float 8s ease-in-out infinite;
|
||
}
|
||
|
||
.orb-1 {
|
||
width: 400px;
|
||
height: 400px;
|
||
background: linear-gradient(135deg, var(--primary), var(--secondary));
|
||
top: -100px;
|
||
left: -100px;
|
||
animation-delay: 0s;
|
||
}
|
||
|
||
.orb-2 {
|
||
width: 300px;
|
||
height: 300px;
|
||
background: linear-gradient(135deg, var(--secondary), var(--accent));
|
||
bottom: -50px;
|
||
right: -50px;
|
||
animation-delay: 2s;
|
||
}
|
||
|
||
.orb-3 {
|
||
width: 350px;
|
||
height: 350px;
|
||
background: linear-gradient(135deg, var(--accent), var(--primary));
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
animation-delay: 4s;
|
||
}
|
||
|
||
@keyframes float {
|
||
0%, 100% { transform: translateY(0px) rotate(0deg); }
|
||
50% { transform: translateY(-30px) rotate(180deg); }
|
||
}
|
||
|
||
.cover-content {
|
||
position: relative;
|
||
z-index: 1;
|
||
animation: fadeInUp 1s ease-out;
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.logo {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
margin-bottom: 40px;
|
||
background: rgba(255,255,255,0.1);
|
||
backdrop-filter: blur(10px);
|
||
padding: 12px 24px;
|
||
border-radius: 50px;
|
||
border: 1px solid rgba(255,255,255,0.2);
|
||
}
|
||
|
||
.logo-icon {
|
||
font-size: 28px;
|
||
}
|
||
|
||
.logo-text {
|
||
font-size: 24px;
|
||
font-weight: 800;
|
||
font-family: 'Montserrat', sans-serif;
|
||
background: linear-gradient(135deg, var(--primary), var(--accent));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.title {
|
||
font-size: 120px;
|
||
font-weight: 900;
|
||
font-family: 'Montserrat', sans-serif;
|
||
line-height: 1;
|
||
margin-bottom: 20px;
|
||
background: linear-gradient(135deg, #fff, var(--primary));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.subtitle {
|
||
display: block;
|
||
font-size: 48px;
|
||
margin-top: 10px;
|
||
background: linear-gradient(135deg, var(--secondary), var(--accent));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.desc {
|
||
font-size: 20px;
|
||
color: var(--text-light);
|
||
margin-bottom: 60px;
|
||
max-width: 600px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.scroll-hint {
|
||
animation: bounce 2s infinite;
|
||
}
|
||
|
||
@keyframes bounce {
|
||
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
|
||
40% { transform: translateY(-10px); }
|
||
60% { transform: translateY(-5px); }
|
||
}
|
||
|
||
.scroll-hint span {
|
||
display: block;
|
||
margin-bottom: 10px;
|
||
color: var(--text-light);
|
||
font-size: 14px;
|
||
}
|
||
|
||
.scroll-arrow {
|
||
width: 20px;
|
||
height: 30px;
|
||
border: 2px solid var(--text-light);
|
||
border-radius: 10px;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
}
|
||
|
||
.scroll-arrow::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 8px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 4px;
|
||
height: 8px;
|
||
background: var(--text-light);
|
||
border-radius: 2px;
|
||
animation: scroll 2s infinite;
|
||
}
|
||
|
||
@keyframes scroll {
|
||
0% { top: 8px; opacity: 1; }
|
||
100% { top: 18px; opacity: 0; }
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 48px;
|
||
font-weight: 800;
|
||
font-family: 'Montserrat', sans-serif;
|
||
text-align: center;
|
||
margin-bottom: 60px;
|
||
background: linear-gradient(135deg, #fff, var(--primary));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
}
|
||
|
||
.stats-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 30px;
|
||
margin-bottom: 60px;
|
||
}
|
||
|
||
.stat-card {
|
||
background: rgba(30, 41, 59, 0.7);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
border-radius: 20px;
|
||
padding: 40px 20px;
|
||
text-align: center;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.stat-card:hover {
|
||
transform: translateY(-10px);
|
||
border-color: var(--primary);
|
||
box-shadow: 0 20px 40px rgba(99, 102, 241, 0.2);
|
||
}
|
||
|
||
.stat-number {
|
||
font-size: 48px;
|
||
font-weight: 800;
|
||
font-family: 'Montserrat', sans-serif;
|
||
color: var(--primary);
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.stat-label {
|
||
font-size: 16px;
|
||
color: var(--text-light);
|
||
}
|
||
|
||
.chart-container {
|
||
background: rgba(30, 41, 59, 0.7);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
border-radius: 20px;
|
||
padding: 30px;
|
||
}
|
||
|
||
.features-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
|
||
gap: 30px;
|
||
}
|
||
|
||
.feature-card {
|
||
background: rgba(30, 41, 59, 0.7);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
border-radius: 20px;
|
||
padding: 40px 30px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-10px);
|
||
border-color: var(--secondary);
|
||
box-shadow: 0 20px 40px rgba(139, 92, 246, 0.2);
|
||
}
|
||
|
||
.feature-icon {
|
||
font-size: 48px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.feature-card h3 {
|
||
font-size: 24px;
|
||
font-weight: 700;
|
||
margin-bottom: 15px;
|
||
color: #fff;
|
||
}
|
||
|
||
.feature-card p {
|
||
color: var(--text-light);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.future-content {
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.future-item {
|
||
display: flex;
|
||
gap: 30px;
|
||
margin-bottom: 40px;
|
||
align-items: flex-start;
|
||
padding: 30px;
|
||
background: rgba(30, 41, 59, 0.7);
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255,255,255,0.1);
|
||
border-radius: 20px;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.future-item:hover {
|
||
transform: translateX(10px);
|
||
border-color: var(--accent);
|
||
box-shadow: 0 20px 40px rgba(236, 72, 153, 0.2);
|
||
}
|
||
|
||
.future-year {
|
||
font-size: 32px;
|
||
font-weight: 800;
|
||
font-family: 'Montserrat', sans-serif;
|
||
color: var(--accent);
|
||
min-width: 80px;
|
||
}
|
||
|
||
.future-desc {
|
||
font-size: 18px;
|
||
color: var(--text);
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.footer {
|
||
min-height: auto;
|
||
padding: 60px 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.footer-content .logo {
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.footer-text {
|
||
font-size: 20px;
|
||
margin-bottom: 20px;
|
||
color: var(--text-light);
|
||
}
|
||
|
||
.copyright {
|
||
color: var(--text-light);
|
||
font-size: 14px;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.title {
|
||
font-size: 72px;
|
||
}
|
||
.subtitle {
|
||
font-size: 32px;
|
||
}
|
||
.section-title {
|
||
font-size: 32px;
|
||
}
|
||
.stats-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.features-grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.future-item {
|
||
flex-direction: column;
|
||
gap: 15px;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="noise"></div>
|
||
|
||
<section class="section cover">
|
||
<div class="cover-content">
|
||
<div class="logo">
|
||
<span class="logo-icon">⚡</span>
|
||
<span class="logo-text">Trae</span>
|
||
</div>
|
||
<h1 class="title">
|
||
2026
|
||
<span class="subtitle">年度开发者报告</span>
|
||
</h1>
|
||
<p class="desc">赋能每一位开发者，打造极致编码体验</p>
|
||
<div class="scroll-hint">
|
||
<span>向下滑动查看报告</span>
|
||
<div class="scroll-arrow"></div>
|
||
</div>
|
||
</div>
|
||
<div class="cover-bg">
|
||
<div class="gradient-orb orb-1"></div>
|
||
<div class="gradient-orb orb-2"></div>
|
||
<div class="gradient-orb orb-3"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section stats">
|
||
<div class="container">
|
||
<h2 class="section-title">年度核心数据</h2>
|
||
<div class="stats-grid">
|
||
<div class="stat-card">
|
||
<div class="stat-number" data-target="128000">0</div>
|
||
<div class="stat-label">生成代码行数</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number" data-target="2468">0</div>
|
||
<div class="stat-label">修复问题数</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number" data-target="187">0</div>
|
||
<div class="stat-label">支持项目数</div>
|
||
</div>
|
||
<div class="stat-card">
|
||
<div class="stat-number" data-target="98">0</div>
|
||
<div class="stat-label">用户满意度 %</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="chart-container">
|
||
<canvas id="monthlyChart"></canvas>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section features">
|
||
<div class="container">
|
||
<h2 class="section-title">年度亮点功能</h2>
|
||
<div class="features-grid">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🔍</div>
|
||
<h3>智能代码检索</h3>
|
||
<p>全代码库语义化检索，精准定位代码片段，查找效率提升300%</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">⚡</div>
|
||
<h3>实时编码辅助</h3>
|
||
<p>上下文感知的代码补全，边写边提示，编码速度提升200%</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🐛</div>
|
||
<h3>自动Bug修复</h3>
|
||
<p>智能识别代码问题，一键生成修复方案，Bug解决率达92%</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📝</div>
|
||
<h3>自动文档生成</h3>
|
||
<p>根据代码自动生成注释和文档，文档覆盖率提升85%</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🔄</div>
|
||
<h3>多框架支持</h3>
|
||
<p>覆盖12种主流编程语言和28种开发框架，适配全场景开发需求</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<div class="feature-icon">☁️</div>
|
||
<h3>云端同步</h3>
|
||
<p>多设备无缝同步开发上下文，随时随地继续编码工作</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section future">
|
||
<div class="container">
|
||
<h2 class="section-title">2027 展望</h2>
|
||
<div class="future-content">
|
||
<div class="future-item">
|
||
<div class="future-year">Q1</div>
|
||
<div class="future-desc">支持AI自主重构大型项目，代码优化能力全面升级</div>
|
||
</div>
|
||
<div class="future-item">
|
||
<div class="future-year">Q2</div>
|
||
<div class="future-desc">推出低代码可视化搭建平台，零代码快速生成业务系统</div>
|
||
</div>
|
||
<div class="future-item">
|
||
<div class="future-year">Q3</div>
|
||
<div class="future-desc">原生支持多团队协作开发，智能解决代码冲突</div>
|
||
</div>
|
||
<div class="future-item">
|
||
<div class="future-year">Q4</div>
|
||
<div class="future-desc">全平台生态打通，覆盖Web、桌面端、移动端所有开发场景</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="section footer">
|
||
<div class="container">
|
||
<div class="footer-content">
|
||
<div class="logo">
|
||
<span class="logo-icon">⚡</span>
|
||
<span class="logo-text">Trae</span>
|
||
</div>
|
||
<p class="footer-text">感谢每一位开发者的陪伴，2027我们一起创造更多可能</p>
|
||
<p class="copyright">© 2026 Trae. All rights reserved.</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
const counters = document.querySelectorAll('.stat-number');
|
||
const speed = 200;
|
||
|
||
counters.forEach(counter => {
|
||
const updateCount = () => {
|
||
const target = +counter.getAttribute('data-target');
|
||
const count = +counter.innerText;
|
||
const increment = target / speed;
|
||
|
||
if (count < target) {
|
||
counter.innerText = Math.ceil(count + increment);
|
||
setTimeout(updateCount, 1);
|
||
} else {
|
||
counter.innerText = target.toLocaleString();
|
||
}
|
||
};
|
||
updateCount();
|
||
});
|
||
|
||
const ctx = document.getElementById('monthlyChart').getContext('2d');
|
||
new Chart(ctx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
|
||
datasets: [{
|
||
label: '月均生成代码量 (千行)',
|
||
data: [5200, 6800, 7500, 9200, 10500, 11800, 12500, 13200, 14600, 15800, 16500, 17800],
|
||
borderColor: '#6366f1',
|
||
backgroundColor: 'rgba(99, 102, 241, 0.1)',
|
||
fill: true,
|
||
tension: 0.4,
|
||
pointBackgroundColor: '#8b5cf6',
|
||
pointBorderColor: '#fff',
|
||
pointBorderWidth: 2,
|
||
pointRadius: 4
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
plugins: {
|
||
legend: {
|
||
labels: {
|
||
color: '#e0e0e0',
|
||
font: {
|
||
family: 'Inter',
|
||
size: 14
|
||
}
|
||
}
|
||
}
|
||
},
|
||
scales: {
|
||
y: {
|
||
grid: {
|
||
color: 'rgba(255,255,255,0.1)'
|
||
},
|
||
ticks: {
|
||
color: '#a0a0a0',
|
||
font: {
|
||
family: 'Inter'
|
||
}
|
||
}
|
||
},
|
||
x: {
|
||
grid: {
|
||
color: 'rgba(255,255,255,0.1)'
|
||
},
|
||
ticks: {
|
||
color: '#a0a0a0',
|
||
font: {
|
||
family: 'Inter'
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |