<html lang="en"><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: '#06B6D4',
secondary: '#8B5CF6',
accent: '#EC4899',
dark: '#0F172A',
light: '#E2E8F0',
neon: '#22D3EE',
cosmic: '#4F46E5'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
sci: ['Orbitron', 'sans-serif']
},
animation: {
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
'float': 'float 6s ease-in-out infinite',
'glow': 'glow 2s ease-in-out infinite alternate'
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' }
},
glow: {
'0%': { textShadow: '0 0 5px #fff, 0 0 10px #fff, 0 0 15px #06B6D4, 0 0 20px #06B6D4' },
'100%': { textShadow: '0 0 10px #fff, 0 0 20px #fff, 0 0 30px #22D3EE, 0 0 40px #22D3EE' }
}
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.text-shadow {
text-shadow: 0 0 8px rgba(6, 182, 212, 0.5);
}
.bg-stars {
background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
background-size: 50px 50px;
}
.neon-border {
box-shadow: 0 0 5px #06B6D4, 0 0 10px #06B6D4;
}
.planet-hover {
transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.planet-hover:hover {
transform: scale(1.05);
box-shadow: 0 0 15px rgba(6, 182, 212, 0.7);
}
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body class="bg-dark text-light min-h-screen overflow-x-hidden bg-stars">
<!-- 导航栏 -->
<nav class="fixed top-0 w-full z-50 backdrop-blur-md bg-dark/80 border-b border-primary/30">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<div class="h-10 w-10 rounded-full bg-gradient-to-r from-primary to-cosmic flex items-center justify-center">
<i class="fa fa-rocket text-white text-xl"></i>
</div>
<h1 class="text-[clamp(1.2rem,3vw,1.8rem)] font-sci font-bold text-white">
<span class="text-neon animate-glow">星际</span>穿越
</h1>
</div>
<div class="hidden md:flex items-center space-x-8">
<a href="#" class="font-sci text-light hover:text-neon transition-colors">首页</a>
<a href="#" class="font-sci text-light hover:text-neon transition-colors">目的地</a>
<a href="#" class="font-sci text-light hover:text-neon transition-colors">飞船</a>
<a href="#" class="font-sci text-light hover:text-neon transition-colors">会员</a>
<a href="#" class="font-sci text-light hover:text-neon transition-colors">帮助</a>
</div>
<div class="flex items-center space-x-4">
<button class="hidden md:block px-4 py-2 rounded-full bg-primary/20 border border-primary/50 hover:bg-primary/30 transition-all">
<i class="fa fa-user-circle mr-2"></i>登录
</button>
<button class="md:hidden text-2xl">
<i class="fa fa-bars"></i>
</button>
</div>
</div>
</nav>
<!-- 英雄区域 -->
<header class="pt-24 pb-16 relative overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-b from-dark/80 via-dark/60 to-dark z-10"></div>
<div class="container mx-auto px-4 relative z-20">
<div class="max-w-4xl mx-auto text-center">
<h1 class="text-[clamp(2rem,5vw,4rem)] font-sci font-bold mb-6 leading-tight">
<span class="text-neon animate-glow">探索</span>宇宙的奇迹
</h1>
<p class="text-[clamp(1rem,2vw,1.25rem)] text-light/80 mb-8 max-w-2xl mx-auto">
预订您的星际旅行，体验前所未有的太空冒险。从地球出发，探索太阳系的奇妙行星。
</p>
<div class="flex flex-wrap justify-center gap-4">
<button class="px-8 py-3 rounded-full bg-gradient-to-r from-primary to-cosmic font-sci font-medium text-white hover:shadow-lg hover:shadow-primary/30 transition-all transform hover:-translate-y-1">
立即预订
</button>
<button class="px-8 py-3 rounded-full bg-transparent border border-primary/70 font-sci font-medium text-primary hover:bg-primary/10 transition-all">
了解更多
</button>
</div>
</div>
</div>
<!-- 背景装饰 -->
<div class="absolute top-1/4 right-10 w-40 h-40 bg-primary/20 rounded-full filter blur-3xl animate-pulse-slow"></div>
<div class="absolute bottom-1/3 left-10 w-60 h-60 bg-secondary/20 rounded-full filter blur-3xl animate-pulse-slow" style="animation-delay: 2s;"></div>
</header>
<!-- 主内容区 -->
<main class="container mx-auto px-4 pb-20">
<!-- 预订表单 -->
<section class="mb-20">
<div class="bg-dark/60 backdrop-blur-md rounded-2xl p-6 md:p-8 border border-primary/30 shadow-xl max-w-5xl mx-auto transform transition-all hover:shadow-primary/20 hover:shadow-2xl">
<h2 class="text-[clamp(1.5rem,3vw,2rem)] font-sci font-bold mb-6 text-center">预订您的星际旅程</h2>
<form id="booking-form" class="space-y-6">
<!-- 目的地选择 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-2">
<label for="departure" class="block text-sm font-medium text-light/80">出发地</label>
<div class="relative">
<select id="departure" class="w-full bg-dark/80 border border-primary/50 rounded-lg px-4 py-3 appearance-none focus:outline-none focus:ring-2 focus:ring-primary/50">
<option value="earth">地球 - 月球基地</option>
<option value="mars">火星 - 奥林匹斯城</option>
<option value="jupiter">木星 - 欧罗巴站</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none">
<i class="fa fa-chevron-down text-primary"></i>
</div>
</div>
</div>
<div class="space-y-2">
<label for="destination" class="block text-sm font-medium text-light/80">目的地</label>
<div class="relative">
<select id="destination" class="w-full bg-dark/80 border border-primary/50 rounded-lg px-4 py-3 appearance-none focus:outline-none focus:ring-2 focus:ring-primary/50">
<option value="moon">月球 - 静海基地</option>
<option value="mars">火星 - 亚马逊平原</option>
<option value="jupiter">木星 - 伽利略卫星群</option>
<option value="saturn">土星 - 泰坦星</option>
<option value="neptune">海王星 - 特里同</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none">
<i class="fa fa-chevron-down text-primary"></i>
</div>
</div>
</div>
</div>
<!-- 日期选择 -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-2">
<label for="departure-date" class="block text-sm font-medium text-light/80">出发日期</label>
<div class="relative">
<input type="date" id="departure-date" min="2025-07-01" class="w-full bg-dark/80 border border-primary/50 rounded-lg px-4 py-3 appearance-none focus:outline-none focus:ring-2 focus:ring-primary/50">
<div class="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none">
<i class="fa fa-calendar text-primary"></i>
</div>
</div>
</div>
<div class="space-y-2">
<label for="return-date" class="block text-sm font-medium text-light/80">返回日期 (可选)</label>
<div class="relative">
<input type="date" id="return-date" min="2025-07-01" class="w-full bg-dark/80 border border-primary/50 rounded-lg px-4 py-3 appearance-none focus:outline-none focus:ring-2 focus:ring-primary/50">
<div class="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none">
<i class="fa fa-calendar text-primary"></i>
</div>
</div>
</div>
</div>
<!-- 乘客信息 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<div class="space-y-2">
<label for="passengers" class="block text-sm font-medium text-light/80">乘客数量</label>
<div class="relative">
<select id="passengers" class="w-full bg-dark/80 border border-primary/50 rounded-lg px-4 py-3 appearance-none focus:outline-none focus:ring-2 focus:ring-primary/50">
<option value="1">1 人</option>
<option value="2">2 人</option>
<option value="3">3 人</option>
<option value="4">4 人</option>
<option value="5">5+ 人</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none">
<i class="fa fa-user text-primary"></i>
</div>
</div>
</div>
<div class="space-y-2">
<label for="cabin" class="block text-sm font-medium text-light/80">舱位类型</label>
<div class="relative">
<select id="cabin" class="w-full bg-dark/80 border border-primary/50 rounded-lg px-4 py-3 appearance-none focus:outline-none focus:ring-2 focus:ring-primary/50">
<option value="economy">经济舱</option>
<option value="business">商务舱</option>
<option value="first">头等舱</option>
<option value="luxury">豪华套房</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none">
<i class="fa fa-bed text-primary"></i>
</div>
</div>
</div>
<div class="space-y-2">
<label for="travel-class" class="block text-sm font-medium text-light/80">旅行等级</label>
<div class="relative">
<select id="travel-class" class="w-full bg-dark/80 border border-primary/50 rounded-lg px-4 py-3 appearance-none focus:outline-none focus:ring-2 focus:ring-primary/50">
<option value="standard">标准旅行</option>
<option value="expedition">探索之旅</option>
<option value="luxury">豪华体验</option>
<option value="scientific">科学考察</option>
</select>
<div class="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none">
<i class="fa fa-star text-primary"></i>
</div>
</div>
</div>
</div>
<!-- 附加服务 -->
<div class="space-y-4">
<h3 class="text-base font-medium text-light">附加服务</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<label class="flex items-center space-x-3 p-3 bg-dark/40 rounded-lg border border-primary/20 hover:border-primary/40 cursor-pointer transition-colors">
<input type="checkbox" class="rounded text-primary focus:ring-primary/50 bg-dark border-primary/50">
<span>太空行走体验 (+¥29,999)</span>
</label>
<label class="flex items-center space-x-3 p-3 bg-dark/40 rounded-lg border border-primary/20 hover:border-primary/40 cursor-pointer transition-colors">
<input type="checkbox" class="rounded text-primary focus:ring-primary/50 bg-dark border-primary/50">
<span>私人导游服务 (+¥15,999)</span>
</label>
<label class="flex items-center space-x-3 p-3 bg-dark/40 rounded-lg border border-primary/20 hover:border-primary/40 cursor-pointer transition-colors">
<input type="checkbox" class="rounded text-primary focus:ring-primary/50 bg-dark border-primary/50">
<span>科学考察套件 (+¥8,999)</span>
</label>
<label class="flex items-center space-x-3 p-3 bg-dark/40 rounded-lg border border-primary/20 hover:border-primary/40 cursor-pointer transition-colors">
<input type="checkbox" class="rounded text-primary focus:ring-primary/50 bg-dark border-primary/50">
<span>零重力训练 (+¥12,499)</span>
</label>
</div>
</div>
<!-- 提交按钮 -->
<div class="text-center">
<button type="submit" class="px-10 py-4 rounded-full bg-gradient-to-r from-primary to-cosmic font-sci font-medium text-white hover:shadow-lg hover:shadow-primary/30 transition-all transform hover:-translate-y-1 focus:outline-none focus:ring-2 focus:ring-primary/50 focus:ring-offset-2 focus:ring-offset-dark">
<i class="fa fa-rocket mr-2"></i>搜索航班
</button>
</div>
</form>
</div>
</section>
<!-- 目的地展示 -->
<section class="mb-20">
<div class="text-center mb-12">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-sci font-bold mb-4">热门目的地</h2>
<p class="text-light/70 max-w-2xl mx-auto">探索太阳系中令人惊叹的行星和卫星，每一个都有其独特的景观和体验。</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 火星卡片 -->
<div class="bg-dark/40 backdrop-blur-sm rounded-xl overflow-hidden border border-primary/20 group hover:border-primary/40 transition-all duration-300 planet-hover">
<div class="relative h-56 overflow-hidden">
<img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/da2b1ad2bff040eb8c9266ff8d76c5c8~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1751944224&x-signature=ZyQxbbnxR7V22tKbPkyZp4aUcSE%3D" alt="火星表面" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-dark via-dark/20 to-transparent"></div>
<div class="absolute top-4 right-4 bg-primary/20 backdrop-blur-sm text-white text-xs px-3 py-1 rounded-full">
热门
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-3">
<h3 class="text-xl font-sci font-bold text-white">火星</h3>
<span class="text-neon font-bold">¥129,999</span>
</div>
<p class="text-light/70 text-sm mb-4">探索这颗红色星球的峡谷和火山，体验低重力环境下的独特冒险。</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="text-xs px-2 py-1 bg-primary/10 rounded-full">6-8天旅程</span>
<span class="text-xs px-2 py-1 bg-primary/10 rounded-full">科学考察</span>
<span class="text-xs px-2 py-1 bg-primary/10 rounded-full">低重力</span>
</div>
<button class="w-full py-2 rounded-lg border border-primary/50 text-primary hover:bg-primary/10 transition-colors">
了解详情
</button>
</div>
</div>
<!-- 泰坦星卡片 -->
<div class="bg-dark/40 backdrop-blur-sm rounded-xl overflow-hidden border border-primary/20 group hover:border-primary/40 transition-all duration-300 planet-hover">
<div class="relative h-56 overflow-hidden">
<img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/11db0584a6ea40ecbe7e04556b0ffba4~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1751944277&x-signature=PAs%2B4dt6wiPbK%2FLIbTwRp7OSxPA%3D" alt="泰坦星表面" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-dark via-dark/20 to-transparent"></div>
<div class="absolute top-4 right-4 bg-accent/20 backdrop-blur-sm text-white text-xs px-3 py-1 rounded-full">
新目的地
</div>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-3">
<h3 class="text-xl font-sci font-bold text-white">泰坦星</h3>
<span class="text-neon font-bold">¥199,999</span>
</div>
<p class="text-light/70 text-sm mb-4">探索土星最大的卫星，欣赏液态甲烷湖泊和独特的外星地貌。</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="text-xs px-2 py-1 bg-primary/10 rounded-full">12-15天旅程</span>
<span class="text-xs px-2 py-1 bg-primary/10 rounded-full">外星景观</span>
<span class="text-xs px-2 py-1 bg-primary/10 rounded-full">科学考察</span>
</div>
<button class="w-full py-2 rounded-lg border border-primary/50 text-primary hover:bg-primary/10 transition-colors">
了解详情
</button>
</div>
</div>
<!-- 欧罗巴卡片 -->
<div class="bg-dark/40 backdrop-blur-sm rounded-xl overflow-hidden border border-primary/20 group hover:border-primary/40 transition-all duration-300 planet-hover">
<div class="relative h-56 overflow-hidden">
<img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/a801a52cad284025881c14d255c074aa~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1751944306&x-signature=xuol7qkVcUoHAu38GVfK%2F2lxct4%3D" alt="欧罗巴表面" class="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110">
<div class="absolute inset-0 bg-gradient-to-t from-dark via-dark/20 to-transparent"></div>
</div>
<div class="p-6">
<div class="flex justify-between items-start mb-3">
<h3 class="text-xl font-sci font-bold text-white">欧罗巴</h3>
<span class="text-neon font-bold">¥179,999</span>
</div>
<p class="text-light/70 text-sm mb-4">探索木星的冰卫星，有机会目睹壮观的喷泉和潜在的外星生命。</p>
<div class="flex flex-wrap gap-2 mb-4">
<span class="text-xs px-2 py-1 bg-primary/10 rounded-full">10-12天旅程</span>
<span class="text-xs px-2 py-1 bg-primary/10 rounded-full">冰下海洋</span>
<span class="text-xs px-2 py-1 bg-primary/10 rounded-full">外星生命探索</span>
</div>
<button class="w-full py-2 rounded-lg border border-primary/50 text-primary hover:bg-primary/10 transition-colors">
了解详情
</button>
</div>
</div>
</div>
<div class="text-center mt-10">
<button class="px-6 py-3 rounded-full bg-dark/40 border border-primary/50 text-primary hover:bg-primary/10 transition-colors">
查看更多目的地 <i class="fa fa-arrow-right ml-2"></i>
</button>
</div>
</section>
<!-- 飞船选项 -->
<section class="mb-20">
<div class="text-center mb-12">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-sci font-bold mb-4">我们的星际飞船</h2>
<p class="text-light/70 max-w-2xl mx-auto">选择适合您旅程的星际飞船，每艘飞船都配备最先进的科技和舒适设施。</p>
</div>
<div class="relative overflow-hidden rounded-2xl border border-primary/30">
<div class="flex overflow-x-auto snap-x snap-mandatory py-6 scrollbar-hide">
<!-- 飞船1 -->
<div class="min-w-[280px] md:min-w-[320px] p-4 snap-center">
<div class="bg-dark/60 backdrop-blur-sm rounded-xl overflow-hidden h-full border border-primary/20 transition-all hover:border-primary/40 hover:shadow-lg hover:shadow-primary/10">
<div class="relative h-48 overflow-hidden">
<img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/5d6f8c75319f49c88e278d06b81d5e21~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1751944072&x-signature=27%2FtpBcsALXQQGX%2BX12fmiR2z7U%3D" alt="星际巡航者号" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-dark via-dark/20 to-transparent"></div>
</div>
<div class="p-5">
<h3 class="text-xl font-sci font-bold text-white mb-2">星际巡航者号</h3>
<p class="text-light/70 text-sm mb-4">适合短途旅行的中型飞船，提供舒适的客舱和基础娱乐设施。</p>
<div class="flex justify-between items-center">
<div>
<div class="text-sm font-medium">速度</div>
<div class="flex items-center mt-1">
<div class="w-20 bg-dark/60 rounded-full h-2">
<div class="bg-primary h-2 rounded-full" style="width: 60%"></div>
</div>
<span class="text-xs ml-2">60%</span>
</div>
</div>
<div>
<div class="text-sm font-medium">舒适度</div>
<div class="flex items-center mt-1">
<div class="w-20 bg-dark/60 rounded-full h-2">
<div class="bg-primary h-2 rounded-full" style="width: 75%"></div>
</div>
<span class="text-xs ml-2">75%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 飞船2 -->
<div class="min-w-[280px] md:min-w-[320px] p-4 snap-center">
<div class="bg-dark/60 backdrop-blur-sm rounded-xl overflow-hidden h-full border border-primary/20 transition-all hover:border-primary/40 hover:shadow-lg hover:shadow-primary/10">
<div class="relative h-48 overflow-hidden">
<img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/527793236dee4975be4eab7e9fb7120c~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1751944102&x-signature=o3DK7r5bEUUGKpKZdLyIV34h%2ByM%3D" alt="银河探索者号" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-dark via-dark/20 to-transparent"></div>
</div>
<div class="p-5">
<h3 class="text-xl font-sci font-bold text-white mb-2">银河探索者号</h3>
<p class="text-light/70 text-sm mb-4">专为长途旅行设计，配备高级科学设备和豪华客舱。</p>
<div class="flex justify-between items-center">
<div>
<div class="text-sm font-medium">速度</div>
<div class="flex items-center mt-1">
<div class="w-20 bg-dark/60 rounded-full h-2">
<div class="bg-primary h-2 rounded-full" style="width: 85%"></div>
</div>
<span class="text-xs ml-2">85%</span>
</div>
</div>
<div>
<div class="text-sm font-medium">舒适度</div>
<div class="flex items-center mt-1">
<div class="w-20 bg-dark/60 rounded-full h-2">
<div class="bg-primary h-2 rounded-full" style="width: 90%"></div>
</div>
<span class="text-xs ml-2">90%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 飞船3 -->
<div class="min-w-[280px] md:min-w-[320px] p-4 snap-center">
<div class="bg-dark/60 backdrop-blur-sm rounded-xl overflow-hidden h-full border border-primary/20 transition-all hover:border-primary/40 hover:shadow-lg hover:shadow-primary/10">
<div class="relative h-48 overflow-hidden">
<img src="https://p9-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/a044758f21f54decb39f3bea3bef4ccc~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1751944161&x-signature=RUYiPDEJRsZYpfNccfF247%2BgVyI%3D" alt="量子跳跃者号" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-dark via-dark/20 to-transparent"></div>
</div>
<div class="p-5">
<h3 class="text-xl font-sci font-bold text-white mb-2">量子跳跃者号</h3>
<p class="text-light/70 text-sm mb-4">最先进的超光速飞船，适合紧急任务和快速运输。</p>
<div class="flex justify-between items-center">
<div>
<div class="text-sm font-medium">速度</div>
<div class="flex items-center mt-1">
<div class="w-20 bg-dark/60 rounded-full h-2">
<div class="bg-primary h-2 rounded-full" style="width: 95%"></div>
</div>
<span class="text-xs ml-2">95%</span>
</div>
</div>
<div>
<div class="text-sm font-medium">舒适度</div>
<div class="flex items-center mt-1">
<div class="w-20 bg-dark/60 rounded-full h-2">
<div class="bg-primary h-2 rounded-full" style="width: 65%"></div>
</div>
<span class="text-xs ml-2">65%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 飞船4 -->
<div class="min-w-[280px] md:min-w-[320px] p-4 snap-center">
<div class="bg-dark/60 backdrop-blur-sm rounded-xl overflow-hidden h-full border border-primary/20 transition-all hover:border-primary/40 hover:shadow-lg hover:shadow-primary/10">
<div class="relative h-48 overflow-hidden">
<img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/code_assistant/0ef8d88aca214f38991aef2d11e9fc58~tplv-a9rns2rl98-image.image?rk3s=8e244e95&rrcfp=2609e108&x-expires=1751944189&x-signature=LtCNIgS0OtuWK2LGoqKY7OEM8A8%3D" alt="豪华太空游轮" class="w-full h-full object-cover">
<div class="absolute inset-0 bg-gradient-to-t from-dark via-dark/20 to-transparent"></div>
</div>
<div class="p-5">
<h3 class="text-xl font-sci font-bold text-white mb-2">豪华太空游轮</h3>
<p class="text-light/70 text-sm mb-4">为奢华旅行设计，配备顶级餐厅、娱乐设施和观景台。</p>
<div class="flex justify-between items-center">
<div>
<div class="text-sm font-medium">速度</div>
<div class="flex items-center mt-1">
<div class="w-20 bg-dark/60 rounded-full h-2">
<div class="bg-primary h-2 rounded-full" style="width: 70%"></div>
</div>
<span class="text-xs ml-2">70%</span>
</div>
</div>
<div>
<div class="text-sm font-medium">舒适度</div>
<div class="flex items-center mt-1">
<div class="w-20 bg-dark/60 rounded-full h-2">
<div class="bg-primary h-2 rounded-full" style="width: 98%"></div>
</div>
<span class="text-xs ml-2">98%</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 滚动指示器 -->
<div class="absolute bottom-2 left-0 right-0 flex justify-center space-x-2">
<span class="w-2 h-2 rounded-full bg-primary"></span>
<span class="w-2 h-2 rounded-full bg-primary/30"></span>
<span class="w-2 h-2 rounded-full bg-primary/30"></span>
<span class="w-2 h-2 rounded-full bg-primary/30"></span>
</div>
</div>
</section>
<!-- 客户评价 -->
<section class="mb-20">
<div class="text-center mb-12">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-sci font-bold mb-4">旅行者的反馈</h2>
<p class="text-light/70 max-w-2xl mx-auto">听听已经体验过星际旅行的旅客分享他们的难忘经历。</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- 评价1 -->
<div class="bg-dark/40 backdrop-blur-sm rounded-xl p-6 border border-primary/20 hover:border-primary/40 transition-all">
<div class="flex items-center mb-4">
<div class="text-primary text-xl">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="ml-2 text-light/70 text-sm">5.0</span>
</div>
<p class="text-light mb-6">"火星之旅超出了我的期望！低重力环境下的行走体验令人难忘，太空服的设计非常舒适。工作人员专业且友好，整个旅程安全又刺激。"</p>
<div class="flex items-center">
<img src="https://picsum.photos/id/1005/100/100" alt="用户头像" class="w-12 h-12 rounded-full object-cover">
<div class="ml-4">
<h4 class="font-medium text-white">亚历山大·陈</h4>
<p class="text-light/70 text-sm">火星探险者</p>
</div>
</div>
</div>
<!-- 评价2 -->
<div class="bg-dark/40 backdrop-blur-sm rounded-xl p-6 border border-primary/20 hover:border-primary/40 transition-all">
<div class="flex items-center mb-4">
<div class="text-primary text-xl">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="ml-2 text-light/70 text-sm">5.0</span>
</div>
<p class="text-light mb-6">"泰坦星的甲烷湖泊是我见过最壮观的景色！豪华太空游轮的服务无可挑剔，房间宽敞舒适，餐厅的外星美食令人惊喜。绝对值得每一分钱！"</p>
<div class="flex items-center">
<img src="https://picsum.photos/id/1000/100/100" alt="用户头像" class="w-12 h-12 rounded-full object-cover">
<div class="ml-4">
<h4 class="font-medium text-white">索菲亚·罗德里格斯</h4>
<p class="text-light/70 text-sm">太空旅行者</p>
</div>
</div>
</div>
<!-- 评价3 -->
<div class="bg-dark/40 backdrop-blur-sm rounded-xl p-6 border border-primary/20 hover:border-primary/40 transition-all">
<div class="flex items-center mb-4">
<div class="text-primary text-xl">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half-o"></i>
</div>
<span class="ml-2 text-light/70 text-sm">4.5</span>
</div>
<p class="text-light mb-6">"作为一名科学家，欧罗巴之旅让我收获颇丰。冰层下的海洋探索是一生一次的机会，船上的科研设备非常先进。唯一的小缺点是旅程有点颠簸。"</p>
<div class="flex items-center">
<img src="https://picsum.photos/id/1012/100/100" alt="用户头像" class="w-12 h-12 rounded-full object-cover">
<div class="ml-4">
<h4 class="font-medium text-white">罗伯特·金</h4>
<p class="text-light/70 text-sm">天体生物学家</p>
</div>
</div>
</div>
</div>
</section>
<!-- 常见问题 -->
<section class="mb-20">
<div class="text-center mb-12">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-sci font-bold mb-4">常见问题</h2>
<p class="text-light/70 max-w-2xl mx-auto">关于星际旅行的常见问题解答，帮助您准备完美的太空冒险。</p>
</div>
<div class="max-w-3xl mx-auto space-y-4">
<!-- 问题1 -->
<div class="bg-dark/40 backdrop-blur-sm rounded-xl overflow-hidden border border-primary/20">
<button class="w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none">
<span class="font-medium text-white">星际旅行需要哪些准备？</span>
<i class="fa fa-plus text-primary transition-transform"></i>
</button>
<div class="px-6 pb-4 hidden">
<p class="text-light/70">星际旅行需要进行全面的身体检查和太空适应训练。您需要准备适当的太空服和个人物品，同时建议购买太空旅行保险。我们会提供详细的准备指南和培训课程，确保您的旅程安全舒适。</p>
</div>
</div>
<!-- 问题2 -->
<div class="bg-dark/40 backdrop-blur-sm rounded-xl overflow-hidden border border-primary/20">
<button class="w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none">
<span class="font-medium text-white">太空旅行安全吗？</span>
<i class="fa fa-plus text-primary transition-transform"></i>
</button>
<div class="px-6 pb-4 hidden">
<p class="text-light/70">我们将安全放在首位。所有飞船都经过严格检测，配备最先进的安全系统和应急设备。宇航员和工作人员都接受过专业训练，能够应对各种突发情况。我们的事故率远低于地球航空旅行，您可以放心出行。</p>
</div>
</div>
<!-- 问题3 -->
<div class="bg-dark/40 backdrop-blur-sm rounded-xl overflow-hidden border border-primary/20">
<button class="w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none">
<span class="font-medium text-white">太空旅行对健康有什么影响？</span>
<i class="fa fa-plus text-primary transition-transform"></i>
</button>
<div class="px-6 pb-4 hidden">
<p class="text-light/70">长期太空旅行可能会导致一些健康问题，如骨质疏松、肌肉萎缩和辐射暴露。我们会提供专业的医疗监督和预防措施，包括定期体检、特殊饮食和锻炼计划，以最大程度减少这些影响。短期旅行通常不会对健康造成明显影响。</p>
</div>
</div>
<!-- 问题4 -->
<div class="bg-dark/40 backdrop-blur-sm rounded-xl overflow-hidden border border-primary/20">
<button class="w-full px-6 py-4 text-left flex justify-between items-center focus:outline-none">
<span class="font-medium text-white">不同舱位有什么区别？</span>
<i class="fa fa-plus text-primary transition-transform"></i>
</button>
<div class="px-6 pb-4 hidden">
<p class="text-light/70">我们提供四种舱位选择：经济舱提供基本舒适的住宿和餐饮；商务舱增加了空间和高级餐饮服务；头等舱提供私人套房和个性化服务；豪华套房则包括最大的空间、专属管家和顶级设施。不同舱位在价格、空间大小、服务水平和设施配备上有所不同，您可以根据预算和需求选择。</p>
</div>
</div>
</div>
</section>
<!-- 订阅区域 -->
<section>
<div class="bg-gradient-to-r from-primary/20 to-cosmic/20 backdrop-blur-md rounded-3xl p-8 md:p-12 border border-primary/30 relative overflow-hidden">
<div class="absolute top-0 right-0 w-64 h-64 bg-primary/10 rounded-full filter blur-3xl -mr-32 -mt-32"></div>
<div class="absolute bottom-0 left-0 w-64 h-64 bg-cosmic/10 rounded-full filter blur-3xl -ml-32 -mb-32"></div>
<div class="relative z-10 max-w-3xl mx-auto text-center">
<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-sci font-bold mb-4">准备好开启您的星际之旅了吗？</h2>
<p class="text-light/80 mb-8">订阅我们的通讯，获取最新的太空旅行优惠、目的地信息和特别活动。</p>
<form class="flex flex-col sm:flex-row gap-4 max-w-xl mx-auto">
<input type="email" placeholder="输入您的邮箱地址" class="flex-1 px-5 py-3 rounded-full bg-dark/60 border border-primary/50 focus:outline-none focus:ring-2 focus:ring-primary/50">
<button type="submit" class="px-8 py-3 rounded-full bg-gradient-to-r from-primary to-cosmic font-sci font-medium text-white hover:shadow-lg hover:shadow-primary/30 transition-all transform hover:-translate-y-1 whitespace-nowrap">
立即订阅
</button>
</form>
<p class="text-light/60 text-sm mt-4">我们尊重您的隐私，绝不会分享您的个人信息。</p>
</div>
</div>
</section>
</main>
<!-- 页脚 -->
<footer class="bg-dark/80 backdrop-blur-md border-t border-primary/30 py-12">
<div class="container mx-auto px-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
<div>
<div class="flex items-center space-x-2 mb-6">
<div class="h-10 w-10 rounded-full bg-gradient-to-r from-primary to-cosmic flex items-center justify-center">
<i class="fa fa-rocket text-white text-xl"></i>
</div>
<h2 class="text-xl font-sci font-bold text-white">
<span class="text-neon">星际</span>穿越
</h2>
</div>
<p class="text-light/70 mb-6">引领人类探索宇宙的边界，提供安全、舒适、难忘的星际旅行体验。</p>
<div class="flex space-x-4">
<a href="#" class="w-10 h-10 rounded-full bg-dark/60 border border-primary/30 flex items-center justify-center text-primary hover:bg-primary/10 transition-colors">
<i class="fa fa-facebook"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-dark/60 border border-primary/30 flex items-center justify-center text-primary hover:bg-primary/10 transition-colors">
<i class="fa fa-twitter"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-dark/60 border border-primary/30 flex items-center justify-center text-primary hover:bg-primary/10 transition-colors">
<i class="fa fa-instagram"></i>
</a>
<a href="#" class="w-10 h-10 rounded-full bg-dark/60 border border-primary/30 flex items-center justify-center text-primary hover:bg-primary/10 transition-colors">
<i class="fa fa-youtube-play"></i>
</a>
</div>
</div>
<div>
<h3 class="text-lg font-sci font-bold text-white mb-6">目的地</h3>
<ul class="space-y-3">
<li><a href="#" class="text-light/70 hover:text-primary transition-colors">火星</a></li>
<li><a href="#" class="text-light/70 hover:text-primary transition-colors">泰坦星</a></li>
<li><a href="#" class="text-light/70 hover:text-primary transition-colors">欧罗巴</a></li>
<li><a href="#" class="text-light/70 hover:text-primary transition-colors">月球基地</a></li>
<li><a href="#" class="text-light/70 hover:text-primary transition-colors">小行星带</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-sci font-bold text-white mb-6">服务</h3>
<ul class="space-y-3">
<li><a href="#" class="text-light/70 hover:text-primary transition-colors">预订系统</a></li>
<li><a href="#" class="text-light/70 hover:text-primary transition-colors">太空旅游</a></li>
<li><a href="#" class="text-light/70 hover:text-primary transition-colors">科学考察</a></li>
<li><a href="#" class="text-light/70 hover:text-primary transition-colors">太空站访问</a></li>
<li><a href="#" class="text-light/70 hover:text-primary transition-colors">零重力体验</a></li>
</ul>
</div>
<div>
<h3 class="text-lg font-sci font-bold text-white mb-6">联系我们</h3>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fa fa-map-marker text-primary mt-1 mr-3"></i>
<span class="text-light/70">月球基地阿尔法，静海，月球</span>
</li>
<li class="flex items-center">
<i class="fa fa-phone text-primary mr-3"></i>
<span class="text-light/70">+86 123 4567 8901</span>
</li>
<li class="flex items-center">
<i class="fa fa-envelope text-primary mr-3"></i>
<span class="text-light/70">info@xingjichuanyue.com</span>
</li>
<li class="flex items-center">
<i class="fa fa-clock-o text-primary mr-3"></i>
<span class="text-light/70">24/7 全天候服务</span>
</li>
</ul>
</div>
</div>
<div class="pt-8 border-t border-primary/10 flex flex-col md:flex-row justify-between items-center">
<p class="text-light/60 text-sm mb-4 md:mb-0">© 2025 星际穿越. 保留所有权利.</p>
<div class="flex space-x-6">
<a href="#" class="text-light/60 text-sm hover:text-primary transition-colors">隐私政策</a>
<a href="#" class="text-light/60 text-sm hover:text-primary transition-colors">服务条款</a>
<a href="#" class="text-light/60 text-sm hover:text-primary transition-colors">Cookie政策</a>
<a href="#" class="text-light/60 text-sm hover:text-primary transition-colors">网站地图</a>
</div>
</div>
</div>
</footer>
<script>
// 日期选择逻辑
document.addEventListener('DOMContentLoaded', function() {
const departureDate = document.getElementById('departure-date');
const returnDate = document.getElementById('return-date');
// 设置默认日期为今天
const today = new Date().toISOString().split('T')[0];
departureDate.value = today;
returnDate.value = today;
// 确保返回日期不早于出发日期
departureDate.addEventListener('change', function() {
returnDate.min = this.value;
});
// 手风琴效果
const faqButtons = document.querySelectorAll('.bg-dark\\/40.backdrop-blur-sm.rounded-xl.overflow-hidden button');
faqButtons.forEach(button => {
button.addEventListener('click', function() {
const content = this.nextElementSibling;
const icon = this.querySelector('i');
// 切换内容显示/隐藏
if (content.classList.contains('hidden')) {
content.classList.remove('hidden');
icon.classList.add('rotate-45');
} else {
content.classList.add('hidden');
icon.classList.remove('rotate-45');
}
});
});
// 表单提交处理
const bookingForm = document.getElementById('booking-form');
bookingForm.addEventListener('submit', function(e) {
e.preventDefault();
alert('搜索功能已触发！在实际应用中，这将搜索可用的航班。');
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
});
});
});
</script>
</body></html>
<div>
<h3 class="text-lg font-sci font-bold text-white mb-6">联系我们</h3>
<ul class="space-y-3">
<li class="flex items-start">
<i class="fa fa-map-marker text-primary mt-1 mr-3"></i>
<span class="text-light/70">月球基地阿尔法，静海，月球</span>
</li>
<li class="flex items-center">
<i class="fa fa-phone text-primary mr-3"></i>
<span class="text-light/70">+86 123 4567 8901</span>
</li>
<li class="flex items-center">
<i class="fa fa-envelope text-primary mr-3"></i>
<span class="text-light/70">i***@******************</span>
</li>
<li class="flex items-center">
<i class="fa fa-clock-o text-primary mr-3"></i>
<span class="text-light/70">24/7 全天候服务</span>
</li>
</ul>
</div>
</div>
<div class="pt-8 border-t border-primary/10 flex flex-col md:flex-row justify-between items-center">
<p class="text-light/60 text-sm mb-4 md:mb-0">© 2025 星际穿越. 保留所有权利.</p>
<div class="flex space-x-6">
<a href="#" class="text-light/60 text-sm hover:text-primary transition-colors">隐私政策</a>
<a href="#" class="text-light/60 text-sm hover:text-primary transition-colors">服务条款</a>
<a href="#" class="text-light/60 text-sm hover:text-primary transition-colors">Cookie政策</a>
<a href="#" class="text-light/60 text-sm hover:text-primary transition-colors">网站地图</a>
</div>
</div>
</div>
</footer>
<script>
// 日期选择逻辑
document.addEventListener('DOMContentLoaded', function() {
const departureDate = document.getElementById('departure-date');
const returnDate = document.getElementById('return-date');
// 设置默认日期为今天
const today = new Date().toISOString().split('T')[0];
departureDate.value = today;
returnDate.value = today;
// 确保返回日期不早于出发日期
departureDate.addEventListener('change', function() {
returnDate.min = this.value;
});
// 手风琴效果
const faqButtons = document.querySelectorAll('.bg-dark\\/40.backdrop-blur-sm.rounded-xl.overflow-hidden button');
faqButtons.forEach(button => {
button.addEventListener('click', function() {
const content = this.nextElementSibling;
const icon = this.querySelector('i');
// 切换内容显示/隐藏
if (content.classList.contains('hidden')) {
content.classList.remove('hidden');
icon.classList.add('rotate-45');
} else {
content.classList.add('hidden');
icon.classList.remove('rotate-45');
}
});
});
// 表单提交处理
const bookingForm = document.getElementById('booking-form');
bookingForm.addEventListener('submit', function(e) {
e.preventDefault();
alert('搜索功能已触发！在实际应用中，这将搜索可用的航班。');
});
// 平滑滚动
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
if (targetId === '#') return;
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({
behavior: 'smooth'
});
}
});
});
});
</script>
</body>
</html>```
BC20270270
LV 1
@
2025-10-4 15:28:35