-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathindex.html
More file actions
executable file
·759 lines (677 loc) · 45.9 KB
/
index.html
File metadata and controls
executable file
·759 lines (677 loc) · 45.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
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
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
<!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" onclick="window.location.hash='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.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 -->
<a href="https://modrinth.com/project/radiance-mod" 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.title"></span>
<span class="text-sm text-gray-700 font-medium group-hover:text-black" data-i18n="download.windows_only.meta"></span>
</a>
<!-- GitHub Release -->
<a href="https://github.com/Minecraft-Radiance/Radiance/releases/tag/v0.1.3-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" onclick="closeLightbox(event)">
<!-- 图片容器 -->
<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" onclick="toggleRotate(event)">
<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>
// ----------------- 站点配置 (Site Configuration) -----------------
const SITE_CONFIG = {
logoPath: 'resources/logo-radiance.webp',
featureImages: {
rt: 'https://image.puxuan.cc/PicGo/woods.png', // Ray Tracing 图片
interact: 'https://image.puxuan.cc/PicGo/gloom.png', // Interaction 图片
upscale: 'https://image.puxuan.cc/PicGo/underground.png', // Upscaling 图片
pbr: 'https://image.puxuan.cc/PicGo/2026-02-09_00.45.30.png', // PBR 图片
pipeline: 'https://image.puxuan.cc/PicGo/pipeline.png' // Pipeline 图片
}
};
// Apply config to logo images
document.querySelectorAll('.js-logo-img').forEach(img => {
img.src = SITE_CONFIG.logoPath;
});
// Apply config to feature images
const featureImgMap = {
'img-feature-rt': SITE_CONFIG.featureImages.rt,
'img-feature-interact': SITE_CONFIG.featureImages.interact,
'img-feature-upscale': SITE_CONFIG.featureImages.upscale,
'img-feature-pbr': SITE_CONFIG.featureImages.pbr,
'img-feature-pipeline': SITE_CONFIG.featureImages.pipeline
};
for (const [id, url] of Object.entries(featureImgMap)) {
const imgEl = document.getElementById(id);
if (imgEl && url) {
imgEl.src = url;
}
}
lucide.createIcons();
// ----------------- 移动端菜单逻辑 -----------------
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
const mobileMenu = document.getElementById('mobile-menu');
const mobileMenuClose = document.getElementById('mobile-menu-close');
const mobileNavLinks = document.querySelectorAll('.mobile-nav-link');
function toggleMobileMenu() {
mobileMenu.classList.toggle('translate-x-full');
// Prevent scrolling when menu is open
if (!mobileMenu.classList.contains('translate-x-full')) {
document.body.style.overflow = 'hidden';
} else {
document.body.style.overflow = '';
}
}
mobileMenuBtn.addEventListener('click', toggleMobileMenu);
mobileMenuClose.addEventListener('click', toggleMobileMenu);
mobileNavLinks.forEach(link => {
link.addEventListener('click', () => {
toggleMobileMenu();
});
});
// ----------------- 路由系统 (SPA Router) -----------------
function router() {
// 获取当前的 hash，默认为 'home'
let hash = window.location.hash.substring(1) || 'home';
// 获取所有视图
const views = document.querySelectorAll('.page-view');
const navLinks = document.querySelectorAll('.nav-link');
// 隐藏所有视图
let viewFound = false;
views.forEach(view => {
if (view.id === `view-${hash}`) {
view.classList.add('active');
viewFound = true;
} else {
view.classList.remove('active');
}
});
// 如果没有找到对应视图（比如乱输url），回到首页
if (!viewFound) {
document.getElementById('view-home').classList.add('active');
hash = 'home';
}
// 更新导航栏状态
navLinks.forEach(link => {
if (link.getAttribute('href') === `#${hash}`) {
link.classList.add('text-orange-400');
link.classList.remove('text-gray-300');
} else {
link.classList.remove('text-orange-400');
link.classList.add('text-gray-300');
}
});
// 滚动到顶部
window.scrollTo(0, 0);
}
// 监听 Hash 变化
window.addEventListener('hashchange', router);
// 初始化路由
window.addEventListener('load', () => {
router();
updateLanguage(currentLang);
});
// ----------------- 多语言系统 (更新版) -----------------
// Auto-detect language, default to 'en'
let userLang = navigator.language || navigator.userLanguage;
let currentLang = userLang.startsWith('zh') ? 'zh' : 'en';
function updateLanguage(lang) {
currentLang = lang;
// Ensure translations are loaded
if (!window.translations) {
console.error("Translations not loaded!");
return;
}
// Update Text Content
document.querySelectorAll('[data-i18n]').forEach(element => {
const key = element.getAttribute('data-i18n');
if (window.translations[lang] && window.translations[lang][key]) {
element.innerHTML = window.translations[lang][key];
}
});
// Video Toggle Logic
const vAlphaEn = document.getElementById('video-alpha-en');
const vAlphaZh = document.getElementById('video-alpha-zh');
const v1En = document.getElementById('video1-en');
const v1Zh = document.getElementById('video1-zh');
if (lang === 'zh') {
if (vAlphaEn) vAlphaEn.classList.add('hidden');
if (vAlphaZh) vAlphaZh.classList.remove('hidden');
if (v1En) v1En.classList.add('hidden');
if (v1Zh) v1Zh.classList.remove('hidden');
} else {
if (vAlphaEn) vAlphaEn.classList.remove('hidden');
if (vAlphaZh) vAlphaZh.classList.add('hidden');
if (v1En) v1En.classList.remove('hidden');
if (v1Zh) v1Zh.classList.add('hidden');
}
// Update Title & Meta
if (window.translations[lang]) {
if (window.translations[lang]['site.title']) {
document.title = window.translations[lang]['site.title'];
}
if (window.translations[lang]['site.desc']) {
const desc = window.translations[lang]['site.desc'];
document.querySelector('meta[name="description"]').setAttribute('content', desc);
document.querySelector('meta[property="og:title"]').setAttribute('content', window.translations[lang]['site.title']);
document.querySelector('meta[property="og:description"]').setAttribute('content', desc);
document.querySelector('meta[property="twitter:title"]').setAttribute('content', window.translations[lang]['site.title']);
document.querySelector('meta[property="twitter:description"]').setAttribute('content', desc);
}
}
document.getElementById('lang-toggle').textContent = lang === 'zh' ? 'EN' : 'ZH';
}
document.getElementById('lang-toggle').addEventListener('click', () => {
updateLanguage(currentLang === 'zh' ? 'en' : 'zh');
});
// ----------------- 灯箱 (Lightbox) 逻辑 (增强版) -----------------
const lightbox = document.getElementById('lightbox');
const lightboxImg = document.getElementById('lightbox-img');
const lightboxVideo = document.getElementById('lightbox-video');
const lightboxRotateBtn = document.getElementById('lightbox-rotate-btn');
let isVideoRotated = false;
function openLightbox(source, type = 'image') {
lightbox.classList.remove('hidden');
lightbox.style.display = 'flex'; // Force flex display
// 简单的淡入效果
setTimeout(() => {
lightbox.classList.remove('opacity-0');
}, 10);
document.body.style.overflow = 'hidden';
// Reset rotation state
resetVideoRotation();
if (type === 'image') {
lightboxImg.src = source;
lightboxImg.classList.remove('hidden');
lightboxVideo.classList.add('hidden');
lightboxVideo.pause();
lightboxRotateBtn.classList.add('hidden'); // Hide rotate btn for images
} else if (type === 'video') {
lightboxVideo.src = source;
lightboxVideo.classList.remove('hidden');
lightboxImg.classList.add('hidden');
lightboxVideo.play();
lightboxRotateBtn.classList.remove('hidden'); // Show rotate btn for videos
}
}
function closeLightbox(e) {
// 点击内容本身不关闭，只点击背景或按钮关闭
if (e && (e.target === lightboxImg || e.target === lightboxVideo || lightboxRotateBtn.contains(e.target))) return;
lightbox.classList.add('opacity-0');
setTimeout(() => {
lightbox.classList.add('hidden');
lightbox.style.display = 'none';
// 停止视频播放并清空源，防止后台播放
lightboxVideo.pause();
lightboxVideo.src = "";
lightboxImg.src = "";
resetVideoRotation(); // Ensure rotation is reset on close
}, 300);
document.body.style.overflow = '';
}
// 旋转功能逻辑
function toggleRotate(e) {
e.stopPropagation(); // 防止触发灯箱关闭
isVideoRotated = !isVideoRotated;
const video = document.getElementById('lightbox-video');
if (isVideoRotated) {
// 旋转 90 度
// 计算缩放比例以适应屏幕：旋转后的宽度不能超过屏幕宽度，旋转后的高度不能超过屏幕高度
// 旋转90度后：原视频宽度变成了视觉高度，原视频高度变成了视觉宽度
const screenW = window.innerWidth;
const screenH = window.innerHeight;
// 强制视频尺寸匹配屏幕尺寸（反向）
video.style.width = `${screenH}px`;
video.style.height = `${screenW}px`;
video.style.maxWidth = 'none';
video.style.maxHeight = 'none';
video.style.transform = 'rotate(90deg)';
} else {
resetVideoRotation();
}
}
function resetVideoRotation() {
const video = document.getElementById('lightbox-video');
video.style.transform = '';
video.style.width = '';
video.style.height = '';
video.style.maxWidth = '100%';
video.style.maxHeight = '100%';
isVideoRotated = false;
}
// 绑定所有图片的点击事件
document.querySelectorAll('.zoom-container img').forEach(img => {
img.addEventListener('click', (e) => {
e.preventDefault();
// 如果当前显示的是占位图（加载失败），则不触发放大
if (img.src.includes('placehold.co')) return;
openLightbox(img.src, 'image');
});
});
// 绑定 Gallery 视频的点击事件
// 我们监听 .zoom-video-container 下的点击
document.querySelectorAll('.zoom-video-container').forEach(container => {
container.addEventListener('click', (e) => {
// 找到里面的 video 元素
const video = container.querySelector('video');
// 找到 source
const source = video.querySelector('source') ? video.querySelector('source').src : video.src;
if (source) {
openLightbox(source, 'video');
}
});
});
// ----------------- 浏览器检测与优化 -----------------
// 检测 Firefox 并添加专属类以进行性能降级（移除毛玻璃等）
if (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
document.body.classList.add('is-firefox');
console.log('Firefox detected: Performance mode enabled.');
}
// Defer Video Loading to improve initial page load speed
window.addEventListener('load', function() {
// Use a small timeout to ensure the main thread is clear
setTimeout(function() {
var video = document.getElementById('video-background');
if(video) {
var source = document.createElement('source');
source.src = 'resources/campfire_pressed.mp4';
source.type = 'video/mp4';
video.appendChild(source);
video.load(); // Required when adding source dynamically
var playPromise = video.play();
if (playPromise !== undefined) {
playPromise.catch(function(error) {
console.log('Video autoplay prevented by browser policy or error:', error);
});
}
}
}, 100);
});
</script>
</body>
</html>