<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>太阳系天体运动模拟器</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#165DFF',
secondary: '#FF7D00',
dark: '#0F172A',
light: '#F8FAFC'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.planet-label {
@apply text-xs font-medium px-1.5 py-0.5 rounded-full backdrop-blur-sm bg-white/20 text-white;
}
.info-card {
@apply bg-white/10 backdrop-blur-md border border-white/20 rounded-lg p-4 shadow-lg transition-all duration-300 hover:bg-white/20;
}
.control-btn {
@apply bg-primary/20 hover:bg-primary/40 text-white p-2 rounded-full transition-all duration-300;
}
}
</style>
</head>
<body class="bg-gradient-to-br from-dark to-dark/90 text-light min-h-screen">
<header class="container mx-auto px-4 py-6 flex justify-between items-center">
<h1 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-white">
<i class="fa fa-globe mr-2"></i>太阳系天体运动模拟器
</h1>
<div class="flex gap-2">
<button id="fullscreenBtn" class="control-btn" title="全屏模式">
<i class="fa fa-expand"></i>
</button>
<button id="infoBtn" class="control-btn" title="天体信息">
<i class="fa fa-info-circle"></i>
</button>
</div>
</header>
</body>
</html>
