grabbit
95353ae2d7
- Remove .bmad-core/ and web-bundles/ (AI tool configs) - Remove tmp-home/ directories and cache files - Move test scripts to scripts/ directory - Move design file to docs/ directory - Remove duplicate AGENTS.md (content in CLAUDE.md) - Remove duplicate sample-app-config.toml - Update .gitignore with missing entries - Fix hardcoded credentials in check-migrations.js - Update IMPLEMENTATION_SUMMARY.md date 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
434 lines
14 KiB
HTML
434 lines
14 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>分布式流星监测网络</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||
background: linear-gradient(135deg, #0a0a23 0%, #1a1a3a 50%, #2a2a4a 100%);
|
||
color: white;
|
||
overflow-x: hidden;
|
||
}
|
||
|
||
.starfield {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: -1;
|
||
}
|
||
|
||
.star {
|
||
position: absolute;
|
||
background: white;
|
||
border-radius: 50%;
|
||
animation: twinkle 2s infinite alternate;
|
||
}
|
||
|
||
@keyframes twinkle {
|
||
0% { opacity: 0.3; transform: scale(1); }
|
||
100% { opacity: 1; transform: scale(1.2); }
|
||
}
|
||
|
||
.meteor {
|
||
position: absolute;
|
||
width: 2px;
|
||
height: 100px;
|
||
background: linear-gradient(to bottom, #ff6b35, transparent);
|
||
animation: meteor-fall 3s linear infinite;
|
||
}
|
||
|
||
@keyframes meteor-fall {
|
||
0% {
|
||
transform: translateY(-100px) translateX(0);
|
||
opacity: 1;
|
||
}
|
||
100% {
|
||
transform: translateY(100vh) translateX(-200px);
|
||
opacity: 0;
|
||
}
|
||
}
|
||
|
||
.hero {
|
||
min-height: 100vh;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
text-align: center;
|
||
padding: 2rem;
|
||
position: relative;
|
||
}
|
||
|
||
.hero-title {
|
||
font-size: 4rem;
|
||
font-weight: 700;
|
||
margin-bottom: 1rem;
|
||
background: linear-gradient(45deg, #ffffff, #ff6b35);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
animation: glow 2s ease-in-out infinite alternate;
|
||
}
|
||
|
||
@keyframes glow {
|
||
0% { text-shadow: 0 0 20px rgba(255, 107, 53, 0.5); }
|
||
100% { text-shadow: 0 0 40px rgba(255, 107, 53, 0.8); }
|
||
}
|
||
|
||
.hero-subtitle {
|
||
font-size: 1.5rem;
|
||
color: #cccccc;
|
||
margin-bottom: 3rem;
|
||
max-width: 600px;
|
||
}
|
||
|
||
.split-section {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 4rem;
|
||
max-width: 1200px;
|
||
margin: 4rem auto;
|
||
padding: 0 2rem;
|
||
}
|
||
|
||
.science-visual {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 20px;
|
||
padding: 2rem;
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.constellation {
|
||
width: 100%;
|
||
height: 300px;
|
||
position: relative;
|
||
background: radial-gradient(circle at center, rgba(255, 107, 53, 0.1), transparent);
|
||
}
|
||
|
||
.constellation-dot {
|
||
position: absolute;
|
||
width: 6px;
|
||
height: 6px;
|
||
background: #ff6b35;
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 15px #ff6b35;
|
||
}
|
||
|
||
.constellation-line {
|
||
position: absolute;
|
||
height: 1px;
|
||
background: linear-gradient(to right, #ff6b35, transparent);
|
||
transform-origin: left;
|
||
}
|
||
|
||
.value-prop {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
}
|
||
|
||
.value-prop h2 {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 1.5rem;
|
||
color: #ff6b35;
|
||
}
|
||
|
||
.value-prop p {
|
||
font-size: 1.2rem;
|
||
line-height: 1.6;
|
||
color: #cccccc;
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.feature-cards {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 2rem;
|
||
max-width: 1200px;
|
||
margin: 4rem auto;
|
||
padding: 0 2rem;
|
||
}
|
||
|
||
.feature-card {
|
||
background: rgba(255, 255, 255, 0.05);
|
||
border-radius: 20px;
|
||
padding: 2rem;
|
||
backdrop-filter: blur(10px);
|
||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||
transition: all 0.3s ease;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.feature-card:hover {
|
||
transform: translateY(-10px);
|
||
box-shadow: 0 20px 40px rgba(255, 107, 53, 0.2);
|
||
border-color: #ff6b35;
|
||
}
|
||
|
||
.feature-icon {
|
||
width: 60px;
|
||
height: 60px;
|
||
background: linear-gradient(45deg, #ff6b35, #ff8c42);
|
||
border-radius: 15px;
|
||
margin-bottom: 1.5rem;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 1.5rem;
|
||
}
|
||
|
||
.feature-card h3 {
|
||
font-size: 1.5rem;
|
||
margin-bottom: 1rem;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.feature-card p {
|
||
color: #cccccc;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.cta-section {
|
||
text-align: center;
|
||
padding: 4rem 2rem;
|
||
max-width: 800px;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.cta-buttons {
|
||
display: flex;
|
||
gap: 1rem;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.btn {
|
||
padding: 1rem 2rem;
|
||
border-radius: 50px;
|
||
font-size: 1.1rem;
|
||
font-weight: 600;
|
||
text-decoration: none;
|
||
transition: all 0.3s ease;
|
||
border: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.btn-primary {
|
||
background: linear-gradient(45deg, #ff6b35, #ff8c42);
|
||
color: white;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 10px 30px rgba(255, 107, 53, 0.4);
|
||
}
|
||
|
||
.btn-secondary {
|
||
background: transparent;
|
||
color: #ff6b35;
|
||
border: 2px solid #ff6b35;
|
||
}
|
||
|
||
.btn-secondary:hover {
|
||
background: #ff6b35;
|
||
color: white;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.hero-title {
|
||
font-size: 2.5rem;
|
||
}
|
||
|
||
.split-section {
|
||
grid-template-columns: 1fr;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.cta-buttons {
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="starfield" id="starfield"></div>
|
||
|
||
<main>
|
||
<section class="hero">
|
||
<h1 class="hero-title">分布式流星监测网络</h1>
|
||
<p class="hero-subtitle">
|
||
连接全球观测者，记录天空中每一道流星的轨迹，为科学研究提供珍贵数据
|
||
</p>
|
||
</section>
|
||
|
||
<section class="split-section">
|
||
<div class="science-visual">
|
||
<div class="constellation" id="constellation">
|
||
<!-- 星座连线将通过JavaScript生成 -->
|
||
</div>
|
||
<h3 style="text-align: center; margin-top: 1rem; color: #ff6b35;">实时监测网络</h3>
|
||
</div>
|
||
|
||
<div class="value-prop">
|
||
<h2>科学价值</h2>
|
||
<p>
|
||
通过分布式监测网络，我们能够精确追踪流星轨迹，分析其起源、速度和成分。
|
||
每一次观测都为天体物理学研究贡献宝贵数据。
|
||
</p>
|
||
<p>
|
||
加入我们的网络，成为公民科学家，让您的观测为人类对宇宙的理解做出贡献。
|
||
</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="feature-cards">
|
||
<div class="feature-card">
|
||
<div class="feature-icon">🛰️</div>
|
||
<h3>设备网络</h3>
|
||
<p>分布在全球的高精度监测设备，24小时不间断捕捉流星事件，构建完整的观测网络。</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📸</div>
|
||
<h3>事件画廊</h3>
|
||
<p>精彩的流星照片和视频集合，每一帧都记录着宇宙的壮丽瞬间，见证天空的奇迹。</p>
|
||
</div>
|
||
|
||
<div class="feature-card">
|
||
<div class="feature-icon">📊</div>
|
||
<h3>研究数据</h3>
|
||
<p>开放的科学数据平台，为天文学家和研究人员提供准确、详细的流星观测数据。</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="cta-section">
|
||
<h2 style="font-size: 2.5rem; margin-bottom: 1.5rem; color: #ff6b35;">
|
||
开始您的星空探索之旅
|
||
</h2>
|
||
<p style="font-size: 1.2rem; color: #cccccc; margin-bottom: 2rem;">
|
||
注册账户，访问实时数据，加入全球观测者社区
|
||
</p>
|
||
<div class="cta-buttons">
|
||
<a href="#" class="btn btn-primary">立即注册</a>
|
||
<a href="#" class="btn btn-secondary">了解更多</a>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<script>
|
||
// 生成星空背景
|
||
function createStarfield() {
|
||
const starfield = document.getElementById('starfield');
|
||
const numStars = 100;
|
||
|
||
for (let i = 0; i < numStars; i++) {
|
||
const star = document.createElement('div');
|
||
star.className = 'star';
|
||
star.style.left = Math.random() * 100 + '%';
|
||
star.style.top = Math.random() * 100 + '%';
|
||
star.style.width = Math.random() * 3 + 1 + 'px';
|
||
star.style.height = star.style.width;
|
||
star.style.animationDelay = Math.random() * 2 + 's';
|
||
starfield.appendChild(star);
|
||
}
|
||
|
||
// 添加流星
|
||
setInterval(() => {
|
||
const meteor = document.createElement('div');
|
||
meteor.className = 'meteor';
|
||
meteor.style.left = Math.random() * 100 + '%';
|
||
meteor.style.animationDuration = (Math.random() * 2 + 2) + 's';
|
||
starfield.appendChild(meteor);
|
||
|
||
setTimeout(() => {
|
||
meteor.remove();
|
||
}, 5000);
|
||
}, 3000);
|
||
}
|
||
|
||
// 生成星座图案
|
||
function createConstellation() {
|
||
const constellation = document.getElementById('constellation');
|
||
const dots = [
|
||
{x: 20, y: 30}, {x: 40, y: 20}, {x: 60, y: 40},
|
||
{x: 30, y: 60}, {x: 70, y: 50}, {x: 50, y: 80},
|
||
{x: 80, y: 70}, {x: 15, y: 75}, {x: 85, y: 25}
|
||
];
|
||
|
||
// 创建星点
|
||
dots.forEach((dot, index) => {
|
||
const dotEl = document.createElement('div');
|
||
dotEl.className = 'constellation-dot';
|
||
dotEl.style.left = dot.x + '%';
|
||
dotEl.style.top = dot.y + '%';
|
||
dotEl.style.animationDelay = index * 0.2 + 's';
|
||
constellation.appendChild(dotEl);
|
||
});
|
||
|
||
// 创建连线
|
||
const connections = [
|
||
[0, 1], [1, 2], [2, 4], [4, 6], [3, 5], [5, 7], [0, 3]
|
||
];
|
||
|
||
connections.forEach(([start, end]) => {
|
||
const line = document.createElement('div');
|
||
line.className = 'constellation-line';
|
||
|
||
const startDot = dots[start];
|
||
const endDot = dots[end];
|
||
const dx = endDot.x - startDot.x;
|
||
const dy = endDot.y - startDot.y;
|
||
const length = Math.sqrt(dx * dx + dy * dy);
|
||
const angle = Math.atan2(dy, dx) * 180 / Math.PI;
|
||
|
||
line.style.left = startDot.x + '%';
|
||
line.style.top = startDot.y + '%';
|
||
line.style.width = length + '%';
|
||
line.style.transform = `rotate(${angle}deg)`;
|
||
|
||
constellation.appendChild(line);
|
||
});
|
||
}
|
||
|
||
// 平滑滚动动画
|
||
function handleScrollAnimations() {
|
||
const cards = document.querySelectorAll('.feature-card');
|
||
|
||
const observer = new IntersectionObserver((entries) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
entry.target.style.opacity = '1';
|
||
entry.target.style.transform = 'translateY(0)';
|
||
}
|
||
});
|
||
}, { threshold: 0.1 });
|
||
|
||
cards.forEach(card => {
|
||
card.style.opacity = '0';
|
||
card.style.transform = 'translateY(50px)';
|
||
card.style.transition = 'all 0.6s ease';
|
||
observer.observe(card);
|
||
});
|
||
}
|
||
|
||
// 初始化
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
createStarfield();
|
||
createConstellation();
|
||
handleScrollAnimations();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |