-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·492 lines (449 loc) · 35 KB
/
index.html
File metadata and controls
executable file
·492 lines (449 loc) · 35 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
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Radiance - Minecraft Ray Tracing Mod</title>
<link rel="icon" href="resources/logo-radiance.webp" type="image/webp">
<meta name="description" content="Radiance - Next-Gen Minecraft Path Tracing engine mod. Rebuilt on Vulkan C++ backend, featuring native Hardware Ray Tracing support.">
<meta name="keywords" content="Minecraft, Shader, Ray Tracing, Vulkan, Rendering, Mod, Radiance">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://radiance.mc/">
<meta property="og:title" content="Radiance - Minecraft Ray Tracing Mod">
<meta property="og:description" content="Radiance - Next-Gen Minecraft Path Tracing engine mod. Rebuilt on Vulkan C++ backend, featuring native Hardware Ray Tracing support.">
<meta property="og:image" content="resources/logo-radiance.webp">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="https://radiance.mc/">
<meta property="twitter:title" content="Radiance - Minecraft Ray Tracing Mod">
<meta property="twitter:description" content="Radiance - Next-Gen Minecraft Path Tracing engine mod. Rebuilt on Vulkan C++ backend, featuring native Hardware Ray Tracing support.">
<meta property="twitter:image" content="resources/logo-radiance.webp">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://unpkg.com/lucide@latest"></script>
<!-- Preload critical font -->
<link rel="preload" href="fonts/fusion-pixel/fusion-pixel-10px-monospaced-latin.ttf.woff2" as="font" type="font/woff2" crossorigin>
<!-- 引入外部样式表 (包含字体定义和 Firefox 优化) -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 视频背景 -->
<video loop muted playsinline id="video-background" class="transition-opacity duration-1000 opacity-30">
<!-- Source injected via JS for performance -->
Your web browser does not support / 您的浏览器不支持 HTML5 视频。
</video>
<!-- 视频遮罩层 (用于替代滤镜以提升性能) -->
<div id="video-overlay"></div>
<!-- 导航栏 -->
<nav class="fixed w-full z-50 px-6 py-4 flex justify-between items-center transition-all duration-300 border-b border-transparent bg-[#0a0a0a]/80 backdrop-blur-md" id="navbar">
<div class="flex items-center space-x-3 cursor-pointer" id="logo-home">
<div class="w-10 h-10 rounded-none flex items-center justify-center border-2 border-white/50 shadow-[2px_2px_0px_rgba(255,255,255,0.3)] bg-black">
<img src="resources/logo-radiance.webp" alt="Radiance Logo" class="w-full h-full object-cover js-logo-img">
</div>
<span class="text-white text-base md:text-lg tracking-widest hidden sm:inline">RADIANCE</span>
</div>
<!-- 导航链接：注意 href 变成了 hash 地址 -->
<div class="hidden md:flex space-x-8 text-base text-gray-300">
<a href="#home" class="hover:text-orange-400 transition-colors nav-link active" data-page="home" data-i18n="nav.home"></a>
<a href="#features" class="hover:text-orange-400 transition-colors nav-link" data-page="features" data-i18n="nav.features"></a>
<a href="#gallery" class="hover:text-orange-400 transition-colors nav-link" data-page="gallery" data-i18n="nav.gallery"></a>
<a href="#docs" class="hover:text-orange-400 transition-colors nav-link" data-page="docs" data-i18n="nav.docs"></a>
<a href="#changelog" class="hover:text-orange-400 transition-colors nav-link" data-page="changelog" data-i18n="nav.changelog"></a>
<a href="#download" class="hover:text-orange-400 transition-colors nav-link" data-page="download" data-i18n="nav.download"></a>
</div>
<div class="flex items-center space-x-4">
<button id="lang-toggle" class="text-sm px-3 py-2 border border-white/30 hover:bg-white/10 transition-all uppercase">
EN
</button>
<!-- 移动端菜单按钮 (简化版) -->
<button id="mobile-menu-btn" class="md:hidden text-white">
<i data-lucide="menu" class="w-6 h-6"></i>
</button>
</div>
</nav>
<!-- 移动端菜单 -->
<div id="mobile-menu" class="fixed inset-0 z-40 bg-black/95 flex flex-col items-center justify-center space-y-8 transition-transform duration-300 translate-x-full md:hidden">
<button id="mobile-menu-close" class="absolute top-6 right-6 text-white">
<i data-lucide="x" class="w-8 h-8"></i>
</button>
<a href="#home" class="text-2xl text-gray-300 hover:text-orange-400 mobile-nav-link" data-i18n="nav.home"></a>
<a href="#features" class="text-2xl text-gray-300 hover:text-orange-400 mobile-nav-link" data-i18n="nav.features"></a>
<a href="#gallery" class="text-2xl text-gray-300 hover:text-orange-400 mobile-nav-link" data-i18n="nav.gallery"></a>
<a href="#docs" class="text-2xl text-gray-300 hover:text-orange-400 mobile-nav-link" data-i18n="nav.docs"></a>
<a href="#changelog" class="text-2xl text-gray-300 hover:text-orange-400 mobile-nav-link" data-i18n="nav.changelog"></a>
<a href="#download" class="text-2xl text-gray-300 hover:text-orange-400 mobile-nav-link" data-i18n="nav.download"></a>
</div>
<!-- 页面容器 -->
<main id="app-container" class="pt-20 min-h-screen">
<!-- ==================== 首页视图 (Home) ==================== -->
<div id="view-home" class="page-view active">
<!-- 英雄区 -->
<section class="relative min-h-[80vh] flex flex-col justify-center items-center px-6">
<div class="text-center max-w-5xl z-10">
<div class="text-orange-500 text-sm md:text-xl mb-8 animate-pulse tracking-[0.3em] font-bold" data-i18n="hero.subtitle"></div>
<h1 class="text-5xl md:text-8xl mb-10 hero-text gradient-text leading-tight" data-i18n="hero.title"></h1>
<p class="text-lg md:text-xl text-gray-300 mb-12 max-w-4xl mx-auto leading-relaxed" data-i18n="hero.desc"></p>
<div class="flex flex-col md:flex-row space-y-6 md:space-y-0 md:space-x-6 justify-center">
<a href="#download" class="btn-primary px-8 py-5 text-sm sm:text-base flex items-center justify-center font-bold tracking-wide">
<i data-lucide="zap" class="mr-3 w-5 h-5"></i> <span data-i18n="hero.btn_download"></span>
</a>
<a href="#gallery" class="btn-glass px-8 py-5 text-sm sm:text-base flex items-center justify-center font-bold tracking-wide" data-i18n="hero.btn_gallery">
</a>
</div>
</div>
</section>
<!-- 特性展示 -->
<section class="py-12 px-6 max-w-7xl mx-auto relative z-10 md:-mt-32">
<div class="text-center mb-20">
<h2 class="text-2xl md:text-3xl mb-6 text-white" data-i18n="features.title"></h2>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-10">
<div class="glass p-8 hover:translate-y-[-4px] transition-all">
<i data-lucide="triangle" class="w-12 h-12 mb-6 text-orange-500"></i>
<h3 class="text-xl mb-6 text-orange-400 font-bold" data-i18n="features.card1.title"></h3>
<p class="text-gray-200 text-base leading-relaxed" data-i18n="features.card1.desc"></p>
</div>
<div class="glass p-8 hover:translate-y-[-4px] transition-all">
<i data-lucide="sun" class="w-12 h-12 mb-6 text-yellow-400"></i>
<h3 class="text-xl mb-6 text-yellow-300 font-bold" data-i18n="features.card2.title"></h3>
<p class="text-gray-200 text-base leading-relaxed" data-i18n="features.card2.desc"></p>
</div>
<div class="glass p-8 hover:translate-y-[-4px] transition-all">
<i data-lucide="trending-up" class="w-12 h-12 mb-6 text-amber-400"></i>
<h3 class="text-xl mb-6 text-amber-300 font-bold" data-i18n="features.card3.title"></h3>
<p class="text-gray-200 text-base leading-relaxed" data-i18n="features.card3.desc"></p>
</div>
</div>
</section>
</div>
<!-- ==================== 光影展示视图 (Gallery) ==================== -->
<div id="view-gallery" class="page-view max-w-7xl mx-auto px-6 py-12">
<div class="text-center mb-16">
<h1 class="text-4xl md:text-7xl text-white mb-6" data-i18n="gallery.title"></h1>
<p class="text-xl md:text-2xl text-gray-400 max-w-4xl mx-auto" data-i18n="gallery.subtitle"></p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- 视频卡片 1: Alpha 0.1.3 Showcase (Newest) -->
<div class="glass p-0 overflow-hidden group relative" id="video-alpha-card">
<!-- English (YouTube) -->
<div id="video-alpha-en" class="w-full aspect-video">
<iframe class="w-full h-full" src="https://www.youtube.com/embed/e97xv0BchMA?si=882YNDYEWpZYGuhX" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
<!-- Chinese (Bilibili) -->
<div id="video-alpha-zh" class="hidden w-full aspect-video">
<iframe src="https://player.bilibili.com/player.html?isOutside=true&aid=116041912948011&bvid=BV18SFyzoEBw&cid=35944203736&p=1&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" class="w-full h-full"></iframe>
</div>
<div class="absolute bottom-0 left-0 w-full p-6 bg-gradient-to-t from-black to-transparent pointer-events-none">
<h3 class="text-orange-400 font-bold text-lg" data-i18n="gallery.video_alpha.title"></h3>
<p class="text-gray-300 text-sm" data-i18n="gallery.video_alpha.desc"></p>
</div>
</div>
<!-- 视频卡片 2: Radiance Official Trailer -->
<div class="glass p-0 overflow-hidden group relative" id="video1-card">
<!-- English (YouTube) -->
<div id="video1-en" class="w-full aspect-video">
<iframe class="w-full h-full" src="https://www.youtube.com/embed/jGIQffPM1Wg?origin=http://localhost&rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
<!-- Chinese (Bilibili) -->
<div id="video1-zh" class="hidden w-full aspect-video">
<iframe src="https://player.bilibili.com/player.html?isOutside=true&aid=115820906683133&bvid=BV1NevXBCEPg&cid=35130573412&p=1&autoplay=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" class="w-full h-full"></iframe>
</div>
<div class="absolute bottom-0 left-0 w-full p-6 bg-gradient-to-t from-black to-transparent pointer-events-none">
<h3 class="text-yellow-400 font-bold text-lg" data-i18n="gallery.video1.title"></h3>
<p class="text-gray-300 text-sm" data-i18n="gallery.video1.desc"></p>
</div>
</div>
<!-- 视频卡片 3: Path Tracing Showcase -->
<div class="glass p-0 overflow-hidden group relative zoom-video-container cursor-pointer">
<!-- 播放按钮遮罩 -->
<div class="absolute inset-0 flex items-center justify-center z-10 bg-black/20 group-hover:bg-black/40 transition-all">
<div class="w-16 h-16 rounded-full border-2 border-white/50 flex items-center justify-center bg-black/20 backdrop-blur-sm group-hover:scale-110 group-hover:border-yellow-500 transition-all shadow-xl">
<i data-lucide="play" class="w-8 h-8 text-white fill-white ml-1"></i>
</div>
</div>
<video loop muted playsinline oncontextmenu="return false;" class="w-full aspect-video object-cover" poster="resources/room-walkthrough.webp">
<source src="https://image.puxuan.cc/PicGo/room-walkthrough.mp4" type="video/mp4">
</video>
<div class="absolute bottom-0 left-0 w-full p-6 bg-gradient-to-t from-black to-transparent pointer-events-none">
<h3 class="text-amber-400 font-bold text-lg" data-i18n="gallery.video2.title">Path Tracing Showcase</h3>
<p class="text-gray-300 text-sm" data-i18n="gallery.video2.desc">Complex light bounces and physical materials.</p>
</div>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-gray-500 italic">More videos coming soon...</p>
</div>
</div>
<!-- ==================== 特性详情视图 (Features) ==================== -->
<div id="view-features" class="page-view max-w-7xl mx-auto px-6 py-12">
<div class="text-center mb-16">
<h1 class="text-4xl md:text-7xl text-white mb-6" data-i18n="features_page.title"></h1>
<p class="text-xl md:text-2xl text-gray-300 max-w-4xl mx-auto leading-relaxed" data-i18n="features_page.subtitle"></p>
</div>
<!-- Feature Block 1: Ray Tracing -->
<div class="flex flex-col md:flex-row items-center gap-12 mb-20">
<div class="w-full md:w-1/2 glass p-0 min-h-[300px] flex items-center justify-center bg-black/50 zoom-container group">
<img id="img-feature-rt" src="" alt="Ray Tracing" class="w-full h-full object-cover min-h-[300px]" loading="lazy"
onerror="this.src='https://placehold.co/800x600/1a1a1a/orange?text=RTX+Preview'; this.onerror=null;">
<div class="text-center p-10 hidden w-full h-full flex flex-col justify-center items-center absolute inset-0">
<!-- Fallback Icon if image missing -->
<i data-lucide="sun" class="w-16 h-16 text-orange-500 mb-4"></i>
<span class="text-gray-500 text-xs">RTX VISUALIZATION</span>
</div>
</div>
<div class="w-full md:w-1/2 glass p-8 rounded-xl bg-black/40">
<h2 class="text-3xl text-orange-400 mb-6 font-bold" data-i18n="features_page.rt.title"></h2>
<p class="text-gray-200 text-lg leading-relaxed mb-8" data-i18n="features_page.rt.desc"></p>
<ul class="space-y-4 text-base text-gray-300">
<li class="flex items-center"><i data-lucide="check" class="w-5 h-5 mr-3 text-green-500"></i> <span data-i18n="features_page.rt.point1"></span></li>
<li class="flex items-center"><i data-lucide="check" class="w-5 h-5 mr-3 text-green-500"></i> <span data-i18n="features_page.rt.point2"></span></li>
</ul>
</div>
</div>
<!-- Feature Block 2: Interaction -->
<div class="flex flex-col md:flex-row-reverse items-center gap-12 mb-20">
<div class="w-full md:w-1/2 glass p-0 min-h-[300px] flex items-center justify-center bg-black/50 zoom-container group">
<img id="img-feature-interact" src="" alt="Dynamic Interaction" class="w-full h-full object-cover min-h-[300px]" loading="lazy"
onerror="this.src='https://placehold.co/800x600/1a1a1a/3b82f6?text=Interaction'; this.onerror=null;">
<div class="text-center p-10 hidden w-full h-full flex flex-col justify-center items-center absolute inset-0">
<i data-lucide="hand" class="w-16 h-16 text-blue-500 mb-4"></i>
<span class="text-gray-500 text-xs">DYNAMIC INTERACTION</span>
</div>
</div>
<div class="w-full md:w-1/2 glass p-8 rounded-xl bg-black/40">
<h2 class="text-3xl text-blue-400 mb-6 font-bold" data-i18n="features_page.interact.title"></h2>
<p class="text-gray-200 text-lg leading-relaxed mb-8" data-i18n="features_page.interact.desc"></p>
<ul class="space-y-4 text-base text-gray-300">
<li class="flex items-center"><i data-lucide="check" class="w-5 h-5 mr-3 text-green-500"></i> <span data-i18n="features_page.interact.point1"></span></li>
<li class="flex items-center"><i data-lucide="check" class="w-5 h-5 mr-3 text-green-500"></i> <span data-i18n="features_page.interact.point2"></span></li>
</ul>
</div>
</div>
<!-- Feature Block 3: Upscaling -->
<div class="flex flex-col md:flex-row items-center gap-12 mb-20">
<div class="w-full md:w-1/2 glass p-0 min-h-[300px] flex items-center justify-center bg-black/50 zoom-container group">
<img id="img-feature-upscale" src="" alt="Deep Learning Upscaling" class="w-full h-full object-cover min-h-[300px]" loading="lazy"
onerror="this.src='https://placehold.co/800x600/1a1a1a/eab308?text=DLSS+Upscaling'; this.onerror=null;">
<div class="text-center p-10 hidden w-full h-full flex flex-col justify-center items-center absolute inset-0">
<i data-lucide="zap" class="w-16 h-16 text-yellow-500 mb-4"></i>
<span class="text-gray-500 text-xs">DLSS / FSR</span>
</div>
</div>
<div class="w-full md:w-1/2 glass p-8 rounded-xl bg-black/40">
<h2 class="text-3xl text-yellow-400 mb-6 font-bold flex items-center">
<span data-i18n="features_page.upscale.title"></span>
<span class="ml-4 text-xs px-2 py-1 border border-yellow-500/50 text-yellow-500 bg-yellow-500/10 uppercase" data-i18n="features_page.upscale.status"></span>
</h2>
<p class="text-gray-200 text-lg leading-relaxed mb-8" data-i18n="features_page.upscale.desc"></p>
<ul class="space-y-4 text-base text-gray-300">
<li class="flex items-center"><i data-lucide="check" class="w-5 h-5 mr-3 text-green-500"></i> <span data-i18n="features_page.upscale.point1"></span></li>
<li class="flex items-center"><i data-lucide="check" class="w-5 h-5 mr-3 text-green-500"></i> <span data-i18n="features_page.upscale.point2"></span></li>
<li class="flex items-center"><i data-lucide="flask-conical" class="w-5 h-5 mr-3 text-blue-400"></i> <span data-i18n="features_page.upscale.point3"></span></li>
</ul>
</div>
</div>
<!-- Feature Block 4: PBR Materials -->
<div class="flex flex-col md:flex-row-reverse items-center gap-12 mb-20">
<div class="w-full md:w-1/2 glass p-0 min-h-[300px] flex items-center justify-center bg-black/50 zoom-container group">
<img id="img-feature-pbr" src="https://image.puxuan.cc/PicGo/2026-02-09_00.45.30.png" alt="PBR Materials" class="w-full h-full object-cover min-h-[300px]" loading="lazy"
onerror="this.src='https://placehold.co/800x600/1a1a1a/orange?text=PBR+Preview'; this.onerror=null;">
</div>
<div class="w-full md:w-1/2 glass p-8 rounded-xl bg-black/40">
<h2 class="text-3xl text-emerald-400 mb-6 font-bold" data-i18n="features_page.pbr.title"></h2>
<p class="text-gray-200 text-lg leading-relaxed mb-8" data-i18n="features_page.pbr.desc"></p>
<ul class="space-y-4 text-base text-gray-300">
<li class="flex items-center"><i data-lucide="check" class="w-5 h-5 mr-3 text-green-500"></i> <span data-i18n="features_page.pbr.point1"></span></li>
<li class="flex items-center"><i data-lucide="check" class="w-5 h-5 mr-3 text-green-500"></i> <span data-i18n="features_page.pbr.point2"></span></li>
</ul>
</div>
</div>
<!-- Feature Block 5: Dynamic Pipeline -->
<div class="flex flex-col md:flex-row items-center gap-12 mb-20">
<div class="w-full md:w-1/2 glass p-0 min-h-[300px] flex items-center justify-center bg-black/50 zoom-container group">
<img id="img-feature-pipeline" src="https://image.puxuan.cc/PicGo/pipeline.png" alt="Dynamic Pipeline" class="w-full h-full object-cover min-h-[300px]" loading="lazy"
onerror="this.src='https://placehold.co/800x600/1a1a1a/orange?text=Pipeline+Preview'; this.onerror=null;">
</div>
<div class="w-full md:w-1/2 glass p-8 rounded-xl bg-black/40">
<h2 class="text-3xl text-violet-400 mb-6 font-bold" data-i18n="features_page.pipeline.title"></h2>
<p class="text-gray-200 text-lg leading-relaxed mb-8" data-i18n="features_page.pipeline.desc"></p>
<ul class="space-y-4 text-base text-gray-300">
<li class="flex items-center"><i data-lucide="layers" class="w-5 h-5 mr-3 text-indigo-400"></i> <span data-i18n="features_page.pipeline.point1"></span></li>
<li class="flex items-center"><i data-lucide="zap" class="w-5 h-5 mr-3 text-yellow-400"></i> <span data-i18n="features_page.pipeline.point2"></span></li>
</ul>
</div>
</div>
</div>
<!-- ==================== 文档视图 (Docs) ==================== -->
<div id="view-docs" class="page-view max-w-4xl mx-auto px-6 py-12">
<div class="glass p-10 markdown">
<h1 class="text-3xl md:text-5xl text-white mb-8 border-b border-white/10 pb-4" data-i18n="docs.install.main_title"></h1>
<h3 data-i18n="docs.install.req_title"></h3>
<p data-i18n="docs.install.req_list" />
<h3 data-i18n="docs.install.install_title"></h3>
<p data-i18n="docs.install.install_step" />
</div>
</div>
<!-- ==================== 更新日志视图 (Changelog) ==================== -->
<div id="view-changelog" class="page-view max-w-4xl mx-auto px-6 py-12">
<h1 class="text-2xl md:text-3xl text-white mb-10 text-center" data-i18n="changelog.main_title"></h1>
<div class="space-y-8">
<!-- v0.1.5 -->
<div class="glass p-8 relative border-l-4 border-orange-500">
<div class="absolute top-4 right-4 bg-orange-900/50 text-yellow-400 px-3 py-1 text-[12px] border border-orange-500" data-i18n="changelog.v0_1_5.badge"></div>
<h2 class="text-xl text-white mb-2" data-i18n="changelog.v0_1_5.title"></h2>
<div class="text-gray-500 text-[12px] mb-6" data-i18n="changelog.v0_1_5.date"></div>
<ul class="list-disc list-inside space-y-2 text-sm text-gray-300 mb-6">
<li data-i18n="changelog.v0_1_5.item1"></li>
<li data-i18n="changelog.v0_1_5.item2"></li>
<li data-i18n="changelog.v0_1_5.item3"></li>
<li data-i18n="changelog.v0_1_5.item4"></li>
<li data-i18n="changelog.v0_1_5.item5"></li>
<li data-i18n="changelog.v0_1_5.item6"></li>
<li data-i18n="changelog.v0_1_5.item7"></li>
<li data-i18n="changelog.v0_1_5.item8"></li>
</ul>
</div>
<!-- v0.1.4 -->
<div class="glass p-8 relative border-l-4 border-orange-500">
<div class="absolute top-4 right-4 bg-orange-900/50 text-yellow-400 px-3 py-1 text-[12px] border border-orange-500" data-i18n="changelog.v0_1_4.badge"></div>
<h2 class="text-xl text-white mb-2" data-i18n="changelog.v0_1_4.title"></h2>
<div class="text-gray-500 text-[12px] mb-6" data-i18n="changelog.v0_1_4.date"></div>
<ul class="list-disc list-inside space-y-2 text-sm text-gray-300 mb-6">
<li data-i18n="changelog.v0_1_4.item1"></li>
<li data-i18n="changelog.v0_1_4.item2"></li>
<li data-i18n="changelog.v0_1_4.item3"></li>
<li data-i18n="changelog.v0_1_4.item4"></li>
<li data-i18n="changelog.v0_1_4.item5"></li>
<li data-i18n="changelog.v0_1_4.item6"></li>
<li data-i18n="changelog.v0_1_4.item7"></li>
<li data-i18n="changelog.v0_1_4.item8"></li>
<li data-i18n="changelog.v0_1_4.item9"></li>
</ul>
</div>
<!-- v0.1.3 -->
<div class="glass p-8 relative border-l-4 border-orange-500">
<div class="absolute top-4 right-4 bg-orange-900/50 text-yellow-400 px-3 py-1 text-[12px] border border-orange-500" data-i18n="changelog.v0_1_3.badge"></div>
<h2 class="text-xl text-white mb-2" data-i18n="changelog.v0_1_3.title"></h2>
<div class="text-gray-500 text-[12px] mb-6" data-i18n="changelog.v0_1_3.date"></div>
<ul class="list-disc list-inside space-y-2 text-sm text-gray-300 mb-6">
<li data-i18n="changelog.v0_1_3.item1"></li>
<li data-i18n="changelog.v0_1_3.item2"></li>
<li data-i18n="changelog.v0_1_3.item3"></li>
<li data-i18n="changelog.v0_1_3.item4"></li>
<li data-i18n="changelog.v0_1_3.item5"></li>
<li data-i18n="changelog.v0_1_3.item6"></li>
<li data-i18n="changelog.v0_1_3.item7"></li>
<li data-i18n="changelog.v0_1_3.item8"></li>
<li data-i18n="changelog.v0_1_3.item9"></li>
<li data-i18n="changelog.v0_1_3.item10"></li>
<li data-i18n="changelog.v0_1_3.item11"></li>
</ul>
</div>
<!-- v0.1.2 -->
<div class="glass p-8 relative border-l-4 border-orange-500">
<div class="absolute top-4 right-4 bg-orange-900/50 text-yellow-400 px-3 py-1 text-[12px] border border-orange-500" data-i18n="changelog.v0_1_2.badge"></div>
<h2 class="text-xl text-white mb-2" data-i18n="changelog.v0_1_2.title"></h2>
<div class="text-gray-500 text-[12px] mb-6" data-i18n="changelog.v0_1_2.date"></div>
<ul class="list-disc list-inside space-y-2 text-sm text-gray-300">
<li data-i18n="changelog.v0_1_2.item1"></li>
<li data-i18n="changelog.v0_1_2.item2"></li>
</ul>
</div>
<!-- v0.1.1 -->
<div class="glass p-8 relative border-l-4 border-orange-500">
<div class="absolute top-4 right-4 bg-orange-900/50 text-yellow-400 px-3 py-1 text-[12px] border border-orange-500" data-i18n="changelog.v0_1_1.badge"></div>
<h2 class="text-xl text-white mb-2" data-i18n="changelog.v0_1_1.title"></h2>
<div class="text-gray-500 text-[12px] mb-6" data-i18n="changelog.v0_1_1.date"></div>
<ul class="list-disc list-inside space-y-2 text-sm text-gray-300">
<li data-i18n="changelog.v0_1_1.item1"></li>
</ul>
</div>
<!-- v0.1.0 -->
<div class="glass p-8 relative border-l-4 border-orange-500">
<div class="absolute top-4 right-4 bg-orange-900/50 text-yellow-400 px-3 py-1 text-[12px] border border-orange-500" data-i18n="changelog.v0_1_0.badge"></div>
<h2 class="text-xl text-white mb-2" data-i18n="changelog.v0_1_0.title"></h2>
<div class="text-gray-500 text-[12px] mb-6" data-i18n="changelog.v0_1_0.date"></div>
<ul class="list-disc list-inside space-y-2 text-sm text-gray-300">
<li data-i18n="changelog.v0_1_0.item1"></li>
<li data-i18n="changelog.v0_1_0.item2"></li>
<li data-i18n="changelog.v0_1_0.item3"></li>
</ul>
</div>
</div>
</div>
<!-- ==================== 下载视图 (Download) ==================== -->
<div id="view-download" class="page-view max-w-3xl mx-auto px-6 py-12 text-center">
<div class="glass p-12">
<i data-lucide="download-cloud" class="w-16 h-16 mx-auto text-orange-400 mb-6"></i>
<h2 class="text-2xl text-white mb-8" data-i18n="download.title"></h2>
<div class="grid grid-cols-1 gap-6 max-w-2xl mx-auto">
<!-- CurseForge -->
<a href="https://www.curseforge.com/minecraft/mc-mods/radiance" target="_blank" rel="noopener noreferrer" class="btn-primary py-6 flex flex-col items-center justify-center group border-orange-500/50">
<span class="text-base mb-2 font-bold" data-i18n="download.curseforge.title"></span>
<span class="text-sm text-gray-700 font-medium group-hover:text-black" data-i18n="download.windows_only.meta"></span>
</a>
<!-- Modrinth Windows -->
<a href="https://modrinth.com/mod/radiance-mod-windows" target="_blank" rel="noopener noreferrer" class="btn-primary py-6 flex flex-col items-center justify-center group border-orange-500/50">
<span class="text-base mb-2 font-bold" data-i18n="download.modrinth_windows.title"></span>
<span class="text-sm text-gray-700 font-medium group-hover:text-black" data-i18n="download.windows_only.meta"></span>
</a>
<!-- Modrinth Linux -->
<a href="https://modrinth.com/mod/radiance-mod-linux" target="_blank" rel="noopener noreferrer" class="btn-primary py-6 flex flex-col items-center justify-center group border-orange-500/50">
<span class="text-base mb-2 font-bold" data-i18n="download.modrinth_linux.title"></span>
<span class="text-sm text-gray-700 font-medium group-hover:text-black" data-i18n="download.linux_only.meta"></span>
</a>
<!-- GitHub Release -->
<a href="https://github.com/Minecraft-Radiance/Radiance/releases/tag/v0.1.5-alpha" target="_blank" rel="noopener noreferrer" class="btn-primary py-6 flex flex-col items-center justify-center group border-orange-500/50">
<span class="text-base mb-2 font-bold" data-i18n="download.github.title"></span>
<span class="text-sm text-gray-700 font-medium group-hover:text-black" data-i18n="download.preview.meta"></span>
</a>
<a href="#docs" class="btn-glass py-6 flex items-center justify-center font-bold tracking-wide uppercase hover:bg-white/10 transition-colors" data-i18n="download.btn_docs">
</a>
<!-- Buy Me a Coffee -->
<a href="https://buymeacoffee.com/radiance.mod" target="_blank" rel="noopener noreferrer" class="btn-glass py-6 flex items-center justify-center font-bold tracking-wide uppercase border-yellow-500/50 text-yellow-500 hover:bg-yellow-500/10 transition-colors">
<i data-lucide="coffee" class="mr-3 w-6 h-6"></i> <span data-i18n="download.buymeacoffee"></span>
</a>
</div>
</div>
</div>
</main>
<!-- 灯箱容器 -->
<div id="lightbox" class="hidden fixed inset-0 z-[9999] bg-black/95 backdrop-blur-md justify-center items-center p-8 transition-opacity duration-300 opacity-0">
<!-- 图片容器 -->
<img id="lightbox-img" src="" alt="Enlarged View" class="hidden max-w-full max-h-full object-contain shadow-2xl border border-white/10">
<!-- 视频容器 -->
<video id="lightbox-video" controls controlsList="nodownload" oncontextmenu="return false;" class="hidden max-w-full max-h-full shadow-2xl border border-white/10 focus:outline-none transition-transform duration-300">
Your browser does not support the video tag.
</video>
<!-- 移动端旋转按钮 (仅在视频模式下显示) -->
<button id="lightbox-rotate-btn" class="hidden md:hidden absolute bottom-8 left-8 text-white/70 hover:text-white bg-black/50 p-3 rounded-full backdrop-blur-sm border border-white/10 z-50">
<i data-lucide="rotate-cw" class="w-6 h-6"></i>
</button>
<!-- 关闭按钮提示 -->
<button class="absolute top-6 right-6 text-white/50 hover:text-white transition-colors z-50">
<i data-lucide="x" class="w-10 h-10"></i>
</button>
</div>
<!-- 页脚 -->
<footer class="py-12 border-t-4 border-white/10 px-6 bg-black/80 relative z-10">
<div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center text-gray-500 text-lg">
<div class="flex flex-col mb-4 md:mb-0">
<p data-i18n="footer.copyright"></p>
<p class="text-sm mt-2 opacity-50" data-i18n="footer.credits"></p>
</div>
<div class="flex space-x-8">
<a href="https://buymeacoffee.com/radiance.mod" target="_blank" class="hover:text-orange-400" data-i18n="footer.sponsor"></a>
<a href="#docs" class="hover:text-orange-400">Wiki</a>
<a href="https://github.com/Minecraft-Radiance/Radiance" target="_blank" class="hover:text-orange-400">GitHub</a>
<a href="https://discord.gg/y4Uzf6acqk" target="_blank" class="hover:text-orange-400">Discord</a>
</div>
</div>
</footer>
<script src="js/translations.js"></script>
<script src="js/config.js"></script>
<script src="js/i18n.js"></script>
<script src="js/router.js"></script>
<script src="js/ui.js"></script>
<script src="js/main.js"></script>
</body>
</html>