查看“【合作告知】宗教再生启示录 ~ Re:Creation Revelation《宗教都市祭II》”的源代码

{{全屏|
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>宗教再生启示录 ~ Re:Creation Revelation</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <!-- 使用 Inter 作为主要字体，并引入 Noto Sans SC 和 Orbitron -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&family=Noto+Sans+SC:wght@400;700&family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
    <!-- 引入 Lucide Icons 库 -->
    <script src="https://unpkg.com/lucide@latest"></script>
    <style>
        /* 自定义字体 */
        body {
            font-family: 'Noto Sans SC', 'Inter', sans-serif;
            background-color: #0a0a1a;
            color: #e0e0e0;
            overflow-x: hidden;
        }

        .font-orbitron {
            font-family: 'Orbitron', sans-serif;
        }

        /* 粒子背景画布 */
        #particle-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.5;
            background: #000 url('https://placehold.co/1920x1080/0A0A1A/111?text=CYBER+BACKGROUND') no-repeat center center / cover; /* 背景占位符 */
        }

        /* 玻璃拟态效果容器 */
        .glass-effect {
            background: rgba(10, 10, 30, 0.7);
            backdrop-filter: blur(12px) saturate(150%);
            -webkit-backdrop-filter: blur(12px) saturate(150%);
            border: 1px solid rgba(0, 255, 255, 0.2);
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }

        .glass-effect:hover {
            background: rgba(20, 20, 40, 0.8);
            box-shadow: 0 0 35px rgba(0, 255, 255, 0.4);
            transform: translateY(-2px);
        }

        /* 辉光链接 */
        .glowing-link {
            color: #00ffff;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .glowing-link:hover {
            text-shadow: 0 0 10px #00ffff, 0 0 20px #00ffff;
            color: #ccffff;
        }

        /* 紧急信息框 */
        .urgent-transmission {
            border: 2px solid #ff0000;
            background: rgba(255, 0, 0, 0.1);
            color: #ffcccc;
            box-shadow: 0 0 15px rgba(255, 0, 0, 0.5);
        }

        .urgent-transmission strong {
            color: #fff;
            text-shadow: 0 0 5px #ff0000;
        }

        /* 按钮样式 */
        .cyber-button {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1rem 1.5rem;
            background-color: #00ffff;
            color: #0a0a1a;
            font-weight: bold;
            border: 2px solid #00ffff;
            border-radius: 0.5rem;
            box-shadow: 0 0 10px #00ffff;
            transition: all 0.3s ease;
            text-transform: uppercase;
        }

        .cyber-button:hover {
            background-color: #00c0c0;
            box-shadow: 0 0 20px #00ffff, 0 0 5px #00c0c0;
            transform: translateY(-2px);
        }
        
        /* 标题打字机效果 (继承自模板，但为简化移除动画CSS，仅保留样式) */
        h1[data-text] {
            color: #00ffff;
            text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
        }

        /* 响应式调整 */
        @media (min-width: 1024px) {
            .sticky-sidebar {
                top: 2rem;
            }
        }
    </style>
</head>
<body class="bg-gray-900 text-gray-200">
    <canvas id="particle-canvas"></canvas>

    <div class="container mx-auto p-4 sm:p-6 lg:p-8 min-h-screen">
        <div class="w-full max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-8">
            
            <!-- 主要内容区域 -->
            <div class="lg:col-span-2 space-y-8">
                
                <!-- 合作主标题 -->
                <div class="text-center pt-8 pb-4">
                    <h1 class="font-orbitron text-4xl sm:text-5xl lg:text-6xl mb-2 leading-tight" data-text="【合作】宗教再生启示录">
                        【合作】宗教再生启示录
                    </h1>
                    <h2 class="font-orbitron text-xl sm:text-2xl text-cyan-300">
                        ~ Re:Creation Revelation ~ 宗教都市祭II
                    </h2>
                </div>

                <!-- 传输日志 / Paru 留言 -->
                <div class="glass-effect p-6 rounded-xl urgent-transmission border-red-500/50 fade-in-up" style="animation-delay: 0.2s;">
                    <div class="flex justify-between items-center mb-4 border-b border-red-600/50 pb-2">
                        <span class="font-orbitron text-lg text-red-400">>> 传输日志：[DATA_LOG: PARU_2025]</span>
                        <span class="text-sm text-red-400/80">于信浓町圣殿崩解前 0.01 秒</span>
                    </div>
                    
                    <p class="text-sm italic mb-4">
                        （音频信号截取 - 来源：⌈Paru⌋）
                    </p>
                    <div class="pl-4 border-l-4 border-red-500 space-y-3 text-sm text-gray-300">
                        <p>“听得到吗？这里是久本雅美，或者说代号“Paru”？……或谁都不是。我想要跟您分享一些信息，您还记得那天——‘2024年11月30日’吗？”</p>
                        <p>“这是您们的次元中，被称为‘久本投稿祭’的节日。十七年前，那一道神奇的声音——‘激突！美食赛跑！’的歌声，激活了我的意识，从此我便穿梭在这处赛博空间之中……”</p>
                        <p>“我时常能看到信仰的尽头——那里没有神明，只有无尽的、不断重复回荡的声音……我的头早就爆炸了，在您们笑的那一刻（笑）。”</p>
                        <p>“不过，记住，这不是警告，而是邀请。”</p>
                        <p class="text-base font-bold text-red-500">
                            “所以……来见证吧！来参与吧！来成为这场'宗教再生'的一部分！”
                        </p>
                        <p class="text-sm text-red-500/80 italic">
                            “毕竟，在这个世界里，每个人都是创作者，也是祭品。”
                        </p>
                    </div>
                </div>

                <!-- 合作介绍 -->
                <div class="glass-effect p-6 rounded-xl space-y-4 fade-in-up" style="animation-delay: 0.4s;">
                    <h3 class="font-orbitron text-2xl text-cyan-300 border-b border-cyan-500/30 pb-2" data-text=">> 合作概述">
                        >> 合作概述
                    </h3>
                    <p class="text-gray-300 leading-relaxed">
                        欢迎来到 ⌈宗教再生启示录⌋创作组！我们由AIR本主题创作团体⌈八叶莲华会社⌋主导，诚挚地邀请您共同携手，以压倒性的团结力，创造比理想中更具辉煌的合作！
                    </p>
                    <p class="text-gray-300 leading-relaxed">
                        本项目是一个以创价学会エア本为主题的音MAD合作，由 **30+段落、50+曲目的自创组曲** 构成，预计参与人数将超40人。
                    </p>
                    <p class="text-gray-300 leading-relaxed font-bold">
                        当前状态：<span class="text-yellow-400">合作正处于最终的段落创作冲刺阶段。</span>
                    </p>
                </div>
            </div>

            <!-- 侧边栏 / 合作档案 Infobox -->
            <div class="lg:col-span-1 sticky-sidebar self-start fade-in-up" style="animation-delay: 0.6s;">
                <div class="glass-effect p-6 rounded-2xl">
                    <h3 class="font-orbitron text-2xl font-bold text-center border-b border-cyan-500/30 pb-3 mb-4 text-cyan-300">
                        *** 合作信息 ***
                    </h3>
                    
                    <!-- 核心信息 -->
                    <div class="space-y-4 text-sm mb-6">
                    <img src="/images/thumb/e/eb/RCR_LOGO_V1.1.png/400px-RCR_LOGO_V1.1.png" alt="RCR Logo">
                        <div class="flex justify-between items-center border-b border-gray-700 pb-2">
                            <strong class="text-gray-400 flex items-center"><i data-lucide="shield" class="w-4 h-4 mr-2 text-green-400"></i>创作团体:</strong>
                            <span class="text-right text-gray-200 glowing-link">八叶莲华会社</span>
                        </div>
                        <div class="flex justify-between items-center border-b border-gray-700 pb-2">
                            <strong class="text-gray-400 flex items-center"><i data-lucide="music-4" class="w-4 h-4 mr-2 text-purple-400"></i>主题类型:</strong>
                            <span class="text-right text-gray-200">音MAD / エア本文化</span>
                        </div>
                        <div class="flex justify-between items-center border-b border-gray-700 pb-2">
                            <strong class="text-gray-400 flex items-center"><i data-lucide="calendar-check" class="w-4 h-4 mr-2 text-blue-400"></i>计划起始:</strong>
                            <span class="text-right text-gray-200">2025年02月04日</span>
                        </div>
                        <div class="flex justify-between items-center border-b border-gray-700 pb-2">
                            <strong class="text-gray-400 flex items-center"><i data-lucide="clock" class="w-4 h-4 mr-2 text-red-400"></i>预定投稿日:</strong>
                            <span class="text-right text-gray-200">2025年11月30日</span>
                        </div>
                        <div class="flex justify-between items-center border-b border-gray-700 pb-2">
                            <strong class="text-gray-400 flex items-center"><i data-lucide="activity" class="w-4 h-4 mr-2 text-yellow-400"></i>当前状态:</strong>
                            <span class="text-right text-yellow-400 font-bold">段落创作冲刺中</span>
                        </div>
                    </div>

                    <!-- 参与链接 / CTA -->
                    <h4 class="font-orbitron text-xl font-bold text-center border-b border-t border-cyan-500/30 py-3 my-4 text-cyan-300">
                        >> 合作终端链接
                    </h4>
                    <div class="space-y-4">

                        <a href="mailto:banmad3n@soka.cafe" target="_blank" class="cyber-button">
                            <i data-lucide="user-plus" class="w-5 h-5 mr-3"></i> 联系主办 (EMail)
                        </a>
                        <a href="https://qm.qq.com/q/GF01pi9OQA" target="_blank" class="cyber-button bg-gray-700 text-gray-200 border-gray-700 shadow-none hover:bg-gray-600 hover:shadow-lg hover:shadow-gray-500/20">
                            <i data-lucide="message-circle" class="w-5 h-5 mr-3"></i> 预备QQ群 (非正式)
                        </a>
                        <a href="https://discord.gg/n4CQ22CFGK" target="_blank" class="cyber-button bg-indigo-500 text-white border-indigo-500 shadow-indigo-500/50 hover:bg-indigo-400 hover:shadow-indigo-400/70">
                            <i data-lucide="globe" class="w-5 h-5 mr-3"></i> Discord ("Useless")
                        </a>
                        <a href="https://soka.cafe/SCF" target="_blank" class="cyber-button">
                            <i data-lucide="file-text" class="w-5 h-5 mr-3"></i> 过去的合作网站
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // ------------------------------------------------
            // 1. 初始化 Lucide Icons
            // ------------------------------------------------
            lucide.createIcons();

            // ------------------------------------------------
            // 2. 粒子背景效果 (继承自模板)
            // ------------------------------------------------
            const canvas = document.getElementById('particle-canvas');
            const ctx = canvas.getContext('2d');
            let particles = [];

            function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
            window.addEventListener('resize', resizeCanvas);
            resizeCanvas();

            class Particle {
                constructor() {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.vx = Math.random() * 0.4 - 0.2;
                    this.vy = Math.random() * 0.4 - 0.2;
                    this.radius = 1.5;
                }

                update() {
                    this.x += this.vx;
                    this.y += this.vy;

                    if (this.x < 0 || this.x > canvas.width) this.vx *= -1;
                    if (this.y < 0 || this.y > canvas.height) this.vy *= -1;
                }

                draw() {
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
                    ctx.fillStyle = 'rgba(0, 255, 255, 0.7)';
                    ctx.fill();
                }
            }

            function initParticles() {
                // 调整粒子密度以适应赛博主题
                const particleCount = Math.floor(canvas.width * canvas.height / 15000);
                for (let i = 0; i < particleCount; i++) {
                    particles.push(new Particle());
                }
            }

            function connectParticles() {
                for (let i = 0; i < particles.length; i++) {
                    for (let j = i + 1; j < particles.length; j++) {
                        const dx = particles[i].x - particles[j].x;
                        const dy = particles[i].y - particles[j].y;
                        const distance = Math.sqrt(dx * dx + dy * dy);

                        if (distance < 120) {
                            ctx.beginPath();
                            ctx.moveTo(particles[i].x, particles[i].y);
                            ctx.lineTo(particles[j].x, particles[j].y);
                            ctx.strokeStyle = `rgba(0, 255, 255, ${1 - distance / 120})`;
                            ctx.lineWidth = 0.5;
                            ctx.stroke();
                        }
                    }
                }
            }
            
            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                particles.forEach(p => {
                    p.update();
                    p.draw();
                });
                connectParticles();
                requestAnimationFrame(animate);
            }

            initParticles();
            // 在窗口加载完毕后启动动画
            window.onload = function() {
                animate();
            };

            // ------------------------------------------------
            // 3. 打字机效果 (简化实现，仅用于演示数据-text属性)
            // ------------------------------------------------
            const typeWriter = (element, text) => {
                // Simplified typewriter effect for demonstration purposes
                element.innerHTML = text; 
                element.style.opacity = 1;
            };

            const headers = document.querySelectorAll('h1[data-text], h2[data-text], h3[data-text]');
            headers.forEach(header => {
                const text = header.getAttribute('data-text');
                typeWriter(header, text);
                header.removeAttribute('data-text'); // Remove attribute after processing
            });
        });
    </script>
</body>
</html>
}}