-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
287 lines (277 loc) · 15.9 KB
/
Copy pathindex.html
File metadata and controls
287 lines (277 loc) · 15.9 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
<!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://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
body {
background-color: #0a0a0a;
color: #f5f5f5;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.glow {
text-shadow: 0 0 10px rgba(255, 0, 0, 0.5), 0 0 20px rgba(255, 0, 0, 0.3);
}
.pulse {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.floating {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
.black-gold-gradient {
background: linear-gradient(45deg, #000, #111, #000);
border: 1px solid #ff0000;
box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
}
.red-glow {
color: #ff0000;
text-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
}
</style>
</head>
<body class="bg-black min-h-screen overflow-x-hidden">
<!-- Header -->
<header class="relative z-10 bg-black border-b border-red-600">
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
<div class="text-2xl font-bold text-red-600 glow">
红月·星夜
</div>
<nav class="hidden md:flex space-x-8">
<a href="#intro" class="text-red-400 hover:text-red-300 transition duration-300">简介</a>
<a href="#story" class="text-red-400 hover:text-red-300 transition duration-300">背景</a>
<a href="#skills" class="text-red-400 hover:text-red-300 transition duration-300">能力</a>
<a href="#gallery" class="text-red-400 hover:text-red-300 transition duration-300">图集</a>
</nav>
<button class="md:hidden text-red-400">
<i class="fas fa-bars"></i>
</button>
</div>
</header>
<!-- Hero Section -->
<section class="relative h-screen flex items-center justify-center overflow-hidden">
<div class="absolute inset-0 bg-gradient-to-br from-black via-gray-900 to-black opacity-80"></div>
<div class="absolute inset-0">
<div class="absolute top-1/4 left-1/4 w-32 h-32 bg-red-600 rounded-full opacity-20 animate-pulse"></div>
<div class="absolute bottom-1/4 right-1/4 w-24 h-24 bg-red-500 rounded-full opacity-20 animate-pulse delay-1000"></div>
<div class="absolute top-1/2 left-1/2 w-16 h-16 bg-red-400 rounded-full opacity-20 animate-pulse delay-500"></div>
</div>
<div class="relative z-10 text-center px-6">
<h1 class="text-6xl md:text-8xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-red-500 to-red-700 mb-4 glow">
红月·星夜
</h1>
<p class="text-xl md:text-2xl text-red-400 mb-8 leading-relaxed">
她是暗夜中的火焰，是命运的舞者，是不可阻挡的希望之光。
</p>
<div class="flex justify-center space-x-4">
<a href="#intro" class="bg-red-600 hover:bg-red-700 text-white px-8 py-3 rounded-lg transition duration-300 font-semibold shadow-lg hover:shadow-red-500/50">
了解她
</a>
<a href="#story" class="border-2 border-red-600 text-red-600 hover:bg-red-600 hover:text-white px-8 py-3 rounded-lg transition duration-300 font-semibold">
背景故事
</a>
</div>
</div>
</section>
<!-- Character Image -->
<section class="py-20 relative">
<div class="container mx-auto px-6">
<div class="flex flex-col md:flex-row items-center justify-center gap-12">
<div class="w-full md:w-1/2">
<img
src="https://placehold.co/600x800/1a1a1a/ffffff?text=红月·星夜"
alt="红月·星夜"
class="w-full h-auto rounded-lg shadow-2xl border-4 border-red-600"
/>
</div>
<div class="w-full md:w-1/2">
<div class="bg-black border border-red-600 p-8 rounded-lg shadow-xl">
<h2 class="text-3xl font-bold text-red-600 mb-6 glow">角色档案</h2>
<div class="space-y-4 text-gray-300">
<div class="flex justify-between">
<span class="font-semibold text-red-400">姓名：</span>
<span>红月·星夜</span>
</div>
<div class="flex justify-between">
<span class="font-semibold text-red-400">年龄：</span>
<span>17岁</span>
</div>
<div class="flex justify-between">
<span class="font-semibold text-red-400">身高：</span>
<span>165cm</span>
</div>
<div class="flex justify-between">
<span class="font-semibold text-red-400">性格：</span>
<span>冷静、坚韧、富有同情心</span>
</div>
<div class="flex justify-between">
<span class="font-semibold text-red-400">所属：</span>
<span>星夜守护者</span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Introduction -->
<section id="intro" class="py-20 bg-gradient-to-b from-black to-gray-900">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-5xl font-bold text-red-600 mb-6 glow">人物介绍</h2>
<div class="w-24 h-1 bg-red-600 mx-auto mb-8"></div>
</div>
<div class="max-w-4xl mx-auto">
<div class="bg-black border border-red-600 p-8 rounded-lg shadow-xl">
<p class="text-lg text-gray-300 leading-relaxed mb-6">
红月·星夜是一位来自异世界的少女，拥有着罕见的“赤焰血脉”。她的双马尾上系着象征力量的红色丝带，那不仅是装饰，更是她力量的源泉。每当夜幕降临，她的双眼会泛起淡淡的蓝光，仿佛能看穿黑暗中的每一个秘密。
</p>
<p class="text-lg text-gray-300 leading-relaxed mb-6">
她身着独特的红白相间的制服，这并非普通的服装，而是由古代魔法织物制成，能够吸收并储存能量。腰间的红色蝴蝶结是她力量的核心，据说在关键时刻能释放出足以照亮整个黑夜的光芒。
</p>
<p class="text-lg text-gray-300 leading-relaxed">
尽管外表看起来温柔可爱，但红月·星夜内心无比坚定。她相信每个人都有改变命运的力量，因此她一直在寻找那些被黑暗笼罩的灵魂，用她的温暖与勇气点燃他们心中的希望之火。
</p>
</div>
</div>
</div>
</section>
<!-- Story -->
<section id="story" class="py-20">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-5xl font-bold text-red-600 mb-6 glow">背景故事</h2>
<div class="w-24 h-1 bg-red-600 mx-auto mb-8"></div>
</div>
<div class="max-w-4xl mx-auto">
<div class="bg-black border border-red-600 p-8 rounded-lg shadow-xl">
<div class="flex flex-col md:flex-row gap-8">
<div class="md:w-1/3">
<img src="https://placehold.co/300x400/1a1a1a/ffffff?text=古老遗迹" alt="古老遗迹" class="w-full h-auto rounded-lg shadow-lg">
</div>
<div class="md:w-2/3">
<p class="text-lg text-gray-300 leading-relaxed mb-6">
在遥远的星辰大陆上，有一个被称为“赤焰之都”的神秘城市。传说中，这里曾是古代魔法师的圣地，拥有着能够操控时间与空间的禁忌之力。然而，一场突如其来的灾难摧毁了这座城市，只留下一片废墟和一个沉睡的封印。
</p>
<p class="text-lg text-gray-300 leading-relaxed mb-6">
数百年后，当新的黑暗势力开始复苏时，封印中诞生了一位少女——红月·星夜。她继承了古代魔法师的血脉，觉醒了“赤焰之心”的力量。为了阻止黑暗的蔓延，她踏上了寻找其他觉醒者的旅程。
</p>
<p class="text-lg text-gray-300 leading-relaxed">
在旅途中，她遇到了许多伙伴，也经历了无数考验。每一次战斗，都是对信念的磨砺；每一次选择，都是对内心的拷问。但她从未放弃，因为她知道，只要还有一丝光明存在，就值得为之奋斗。
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Skills -->
<section id="skills" class="py-20 bg-gradient-to-b from-black to-gray-900">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-5xl font-bold text-red-600 mb-6 glow">特殊能力</h2>
<div class="w-24 h-1 bg-red-600 mx-auto mb-8"></div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-black border border-red-600 p-6 rounded-lg shadow-xl hover:shadow-red-500/30 transition duration-300">
<div class="text-4xl mb-4 text-red-600"><i class="fas fa-fire"></i></div>
<h3 class="text-xl font-bold text-red-400 mb-3">赤焰之怒</h3>
<p class="text-gray-300">释放体内积蓄的赤焰之力，形成灼热的火焰风暴，焚烧一切黑暗。</p>
</div>
<div class="bg-black border border-red-600 p-6 rounded-lg shadow-xl hover:shadow-red-500/30 transition duration-300">
<div class="text-4xl mb-4 text-red-600"><i class="fas fa-eye"></i></div>
<h3 class="text-xl font-bold text-red-400 mb-3">夜视之瞳</h3>
<p class="text-gray-300">在完全黑暗中也能清晰视物，甚至能看穿伪装与幻象。</p>
</div>
<div class="bg-black border border-red-600 p-6 rounded-lg shadow-xl hover:shadow-red-500/30 transition duration-300">
<div class="text-4xl mb-4 text-red-600"><i class="fas fa-heart"></i></div>
<h3 class="text-xl font-bold text-red-400 mb-3">心灵共鸣</h3>
<p class="text-gray-300">与他人建立心灵连接，治愈伤痛，唤醒沉睡的希望。</p>
</div>
</div>
</div>
</section>
<!-- Gallery -->
<section id="gallery" class="py-20">
<div class="container mx-auto px-6">
<div class="text-center mb-16">
<h2 class="text-5xl font-bold text-red-600 mb-6 glow">图集</h2>
<div class="w-24 h-1 bg-red-600 mx-auto mb-8"></div>
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="group cursor-pointer">
<img src="https://placehold.co/400x500/1a1a1a/ffffff?text=战斗姿态" alt="战斗姿态" class="w-full h-auto rounded-lg shadow-lg group-hover:scale-105 transition duration-300">
</div>
<div class="group cursor-pointer">
<img src="https://placehold.co/400x500/1a1a1a/ffffff?text=日常瞬间" alt="日常瞬间" class="w-full h-auto rounded-lg shadow-lg group-hover:scale-105 transition duration-300">
</div>
<div class="group cursor-pointer">
<img src="https://placehold.co/400x500/1a1a1a/ffffff?text=星空之下" alt="星空之下" class="w-full h-auto rounded-lg shadow-lg group-hover:scale-105 transition duration-300">
</div>
<div class="group cursor-pointer">
<img src="https://placehold.co/400x500/1a1a1a/ffffff?text=微笑时刻" alt="微笑时刻" class="w-full h-auto rounded-lg shadow-lg group-hover:scale-105 transition duration-300">
</div>
<div class="group cursor-pointer">
<img src="https://placehold.co/400x500/1a1a1a/ffffff?text=神秘仪式" alt="神秘仪式" class="w-full h-auto rounded-lg shadow-lg group-hover:scale-105 transition duration-300">
</div>
<div class="group cursor-pointer">
<img src="https://placehold.co/400x500/1a1a1a/ffffff?text=胜利之姿" alt="胜利之姿" class="w-full h-auto rounded-lg shadow-lg group-hover:scale-105 transition duration-300">
</div>
</div>
</div>
</section>
<!-- Footer -->
<footer class="py-12 bg-black border-t border-red-600">
<div class="container mx-auto px-6 text-center">
<div class="text-red-600 text-2xl font-bold mb-4 glow">
红月·星夜
</div>
<p class="text-gray-400 mb-6">
© 2024 所有权利保留。这是一个虚构角色，仅供娱乐。
</p>
<div class="flex justify-center space-x-6">
<a href="#" class="text-red-400 hover:text-red-300 transition duration-300">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="text-red-400 hover:text-red-300 transition duration-300">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="text-red-400 hover:text-red-300 transition duration-300">
<i class="fab fa-discord"></i>
</a>
</div>
</div>
</footer>
<script>
// Smooth scrolling for navigation links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Add glow effect on hover for buttons
document.querySelectorAll('.btn').forEach(btn => {
btn.addEventListener('mouseenter', () => {
btn.style.boxShadow = '0 0 20px rgba(255, 0, 0, 0.8)';
});
btn.addEventListener('mouseleave', () => {
btn.style.boxShadow = '0 0 10px rgba(255, 0, 0, 0.5)';
});
});
</script>
</body>
</html>