<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>原神代码展示 | Genshin Impact Code</title>
<!-- Tailwind CSS v3 -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- Font Awesome -->
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Chart.js -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
<!-- 统一的 Tailwind 配置 -->
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#1a365d',
secondary: '#2a6f97',
accent: '#fbbf24',
fire: '#ff4d4f',
water: '#3b82f6',
wind: '#10b981',
thunder: '#8b5cf6',
grass: '#84cc16',
ice: '#60a5fa',
rock: '#f59e0b',
dark: '#1e293b',
light: '#f8fafc'
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
animation: {
'float': 'float 3s ease-in-out infinite',
'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
}
}
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.text-shadow {
text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.text-shadow-lg {
text-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.bg-blur {
backdrop-filter: blur(8px);
}
.element-fire { @apply bg-fire text-white; }
.element-water { @apply bg-water text-white; }
.element-wind { @apply bg-wind text-white; }
.element-thunder { @apply bg-thunder text-white; }
.element-grass { @apply bg-grass text-white; }
.element-ice { @apply bg-ice text-white; }
.element-rock { @apply bg-rock text-white; }
}
</style>
</head>
<body class="bg-dark text-light min-h-screen flex flex-col">
<!-- 背景图 -->
<div class="fixed inset-0 z-0">
<img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/10a6e6b8a8aa47aebd15a7c3b892adfd~tplv-a9rns2rl98-image.image?rcl=20251009060139BF5FFC995B2D90359A17&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1762552929&x-signature=s9kYYZ5ua9aGoMF1pYtuIRBGNRo%3D"
alt="原神背景"
class="w-full h-full object-cover opacity-30">
</div>
<!-- 顶部导航栏 -->
<header class="relative z-10 bg-primary/80 bg-blur border-b border-secondary/50">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center space-x-2">
<div class="w-10 h-10 rounded-full bg-accent flex items-center justify-center">
<i class="fa fa-star text-primary text-xl"></i>
</div>
<h1 class="text-2xl font-bold text-accent">原神代码</h1>
</div>
</header>
<!-- 移动端菜单 -->
<div id="mobile-menu" class="fixed inset-0 z-20 bg-dark/95 bg-blur hidden flex-col items-center justify-center space-y-8 text-xl">
<button id="close-menu" class="absolute top-6 right-6 text-2xl">
<i class="fa fa-times"></i>
</button>
<a href="#characters" class="hover:text-accent transition-colors">角色展示</a>
<a href="#elements" class="hover:text-accent transition-colors">元素反应</a>
<a href="#weapons" class="hover:text-accent transition-colors">武器装备</a>
</div>
<!-- 主内容区 -->
<main class="relative z-10 flex-grow">
<!-- 英雄区 -->
<section class="relative h-[500px] flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-b from-primary/30 to-dark/80 z-10"></div>
<div class="container mx-auto px-4 z-20 text-center">
<h1 class="text-5xl md:text-6xl font-bold mb-4 text-shadow-lg">原神代码展示</h1>
<p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto text-shadow">探索提瓦特大陆的角色、元素反应和武器装备</p>
<div class="flex flex-wrap justify-center gap-4">
<a href="#characters" class="bg-accent hover:bg-accent/80 text-primary font-bold py-2 px-6 rounded-full transition-all transform hover:scale-105">
角色展示
</a>
<a href="#elements" class="bg-transparent border-2 border-accent hover:bg-accent/20 text-accent font-bold py-2 px-6 rounded-full transition-all transform hover:scale-105">
元素反应
</a>
</div>
</div>
</section>
