查看“设定区”的源代码

{{全屏|
<html>
<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 rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700&family=Orbitron:wght@400;700&display=swap" rel="stylesheet">
    <style>
        /* 自定义字体 */
        body {
            font-family: 'Noto Sans SC', 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;
        }

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

        .glass-effect:hover {
            background: rgba(20, 20, 40, 0.7);
            box-shadow: 0 0 25px rgba(0, 255, 255, 0.3);
            transform: translateY(-5px);
        }

        /* 标题打字机效果 */
        .typewriter-text {
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            border-right: .15em solid cyan;
            letter-spacing: .1em;
            animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
        }

        /* 链接悬停辉光效果 */
        .glowing-link {
            color: #00ffff;
            text-decoration: none;
            transition: all 0.3s ease;
            font-weight: bold;
        }

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

        /* 自定义 hr 分割线 */
        hr {
            border: 0;
            height: 1px;
            background-image: linear-gradient(to right, rgba(0, 255, 255, 0), rgba(0, 255, 255, 0.75), rgba(0, 255, 255, 0));
        }

        /* 初始加载动画 */
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s ease-out forwards;
        }
        
        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* 针对不同元素的延迟加载 */
        .main-content { animation-delay: 0.2s; }
        .sidebar { animation-delay: 0.4s; }

        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
        }
        ::-webkit-scrollbar-track {
            background: #0a0a1a;
        }
        ::-webkit-scrollbar-thumb {
            background: #00ffff;
            border-radius: 4px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: #00c0c0;
        }
    </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 flex items-center justify-center">
        <div class="w-full max-w-7xl grid grid-cols-1 lg:grid-cols-3 gap-8">
            
            <!-- 主要内容区域 -->
            <div class="lg:col-span-2 space-y-8">
                <div class="mini-block glass-effect p-6 sm:p-8 rounded-2xl fade-in-up main-content">
                    <h1 class="font-orbitron text-2xl sm:text-3xl text-cyan-300 mb-4" data-text="欢迎您，迪普菲的居民。"></h1>
                    <p class="text-gray-300 leading-relaxed">
                        这里是迪普菲的重要公共档案数据库，记载着迪普菲上面发生的任何重要事件、档案等内容。本页面为迪普菲公共档案库的中心页，右测为各个分支类别中心页的快速导航，可以通过右侧组件快速进入相关区域。
                    </p>
                    <p class="mt-4 text-gray-300 leading-relaxed">
                        最初，该网站被 <b class="text-cyan-400"><a href="S.T.R.探索对策总署" title="S.T.R.探索对策总署">S.T.R.探索对策总署</a></b>——数据部设立，这处数据库皆在维系整个迪普菲这片庞大都市的稳定，S.T.R.总是致力于为每一位迪普菲的原住民提供人身安全保障服务。
                    </p>
                    <hr class="my-6"/>
                    <h2 class="font-orbitron text-xl sm:text-2xl text-cyan-300 mb-4" data-text="前言"></h2>
                    <p class="text-gray-300 leading-relaxed">
                        你清楚，我们皆处于这处神秘而奇妙的庇护之地，在这个奇幻的学园社会中，或许你早已因学分争夺、学园战争、邪教迷雾而感到疲惫不堪了。
                    </p>
                    <p class="mt-4 text-gray-300 leading-relaxed">
                        当下的迪普菲，正变得十分不稳定——学生之间开始产生分歧，这引发了一系列的抗议活动和示威游行，许多团体和党派产生，势力之间不断发生纷争，恐怖袭击不断发生……
                    </p>
                     <p class="mt-4 text-gray-300 leading-relaxed">
                        迪普菲的未来充满了挑战和变数。你——作为学生们的一员，即使是一人的选择与行动，也将决定了这座城市的命运。
                    </p>
                    <p class="mt-4 text-gray-300 leading-relaxed">
                        我们是 <b class="text-cyan-400"><a href="S.T.R.探索对策总署" title="S.T.R.探索对策总署">S.T.R.探索对策总署</a></b>——数据处理部，我们真诚地邀请您为迪普菲档案数据处理做出贡献！
                    </p>
                    <hr class="my-6"/>
                    <h2 class="font-orbitron text-xl sm:text-2xl text-cyan-300 mb-4" data-text="屏幕之外"></h2>
                    <p class="my-4">
                        <a href="#" class="glowing-link text-lg"><b class="text-cyan-400"><a href="墨绿色的启示录" title="墨绿色的启示录">点我查看《墨绿色的启示录》设定详情中心页！</a></b></a>
                    </p>
                    <p class="text-gray-300 leading-relaxed">
                        本页面是HUIJIA FUN的两大区之一——设定区的中心页。本区隶属于“汇佳世界观设定”系列二创，定义为“以汇佳为基础背景，所进行的世界观二创系列”，是一种网络接力创作形式。
                    </p>
                    <p class="mt-4 text-gray-300 leading-relaxed">
                        目前，“汇佳世界观设定”有多种版本。设定区以 <b class="text-cyan-400"><a href="墨绿色的启示录" title="墨绿色的启示录">IP版设定——墨绿色的启示录</a></b> 为默认设定，其它设定集可以在位于设定区的分区中心页——<a href="设定" title="设定">设定</a>中进行阅读和了解。
                    </p>
                    <p class="mt-4 text-gray-300 leading-relaxed">
                       “汇佳世界观设定”系列具有丰富的叙事等方面上的潜能，等待着创作者的发掘，因此请尽情抒怀您的创造力！
                    </p>
                    <p class="mt-4 text-gray-300 leading-relaxed">
                        作为作者，您拥有无限的创作自由，您可以从任意角度出发，构建一个引人深思的平行世界。如果您具有深度的思想及文学功底，您甚至可以从“全球性问题”等论理方面角度上出发，创作富含人文思想或哲学内涵的故事情节，引发读者的一系列思考，真正体现出这一系列的潜能性。
                    </p>
                     <p class="mt-4 text-gray-300 leading-relaxed">
                        你当然可以从任何事物为出发点，发挥任何你的创作自由，构建出这样一个奇幻的平行世界。祝你好运，作者！
                    </p>
                </div>
            </div>

            <!-- 侧边栏导航 -->
            <div class="sidebar lg:col-span-1 glass-effect p-6 sm:p-8 rounded-2xl self-start sticky top-8 fade-in-up">
                <h2 class="font-orbitron text-2xl text-cyan-300 mb-6 border-b-2 border-cyan-500/30 pb-3">设定区导航</h2>
                <nav class="space-y-4">
                    <a href="#" class="glowing-link block text-lg hover:pl-2 transition-all">世界观总览</a>
                    <a href="#" class="glowing-link block text-lg hover:pl-2 transition-all">角色档案</a>
                    <a href="#" class="glowing-link block text-lg hover:pl-2 transition-all">组织与势力</a>
                    <a href="#" class="glowing-link block text-lg hover:pl-2 transition-all">地理与地点</a>
                    <a href="#" class="glowing-link block text-lg hover:pl-2 transition-all">历史年表</a>
                    <a href="#" class="glowing-link block text-lg hover:pl-2 transition-all">物品与技术</a>
                    <a href="#" class="glowing-link block text-lg hover:pl-2 transition-all">创作指南</a>
                </nav>
            </div>

        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            // 粒子背景效果
            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();
            animate();

            // 打字机效果
            function typeWriter(element, text, speed = 70) {
                let i = 0;
                element.innerHTML = ''; // 清空内容以开始打字
                const typingInterval = setInterval(() => {
                    if (i < text.length) {
                        element.innerHTML += text.charAt(i);
                        i++;
                    } else {
                        clearInterval(typingInterval);
                    }
                }, speed);
            }

            const headers = document.querySelectorAll('h1[data-text], h2[data-text]');
            headers.forEach((header, index) => {
                const text = header.getAttribute('data-text');
                // 使用 Intersection Observer 来触发动画
                const observer = new IntersectionObserver((entries) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            setTimeout(() => {
                                typeWriter(entry.target, text);
                            }, index * 200); // 错开动画开始时间
                            observer.unobserve(entry.target); // 动画只播放一次
                        }
                    });
                }, { threshold: 0.5 });

                observer.observe(header);
            });
        });
    </script>
</body>
</html>
}}
[[分类:中心页]]