查看“魔万学生会社”的源代码

{{全屏|
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>魔万学生会社 (Plurimod Student Union) - 官方维基档案</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;500;700&family=Orbitron:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        /*
         * FONT CONFIGURATION:
         * 'Orbitron' is used for headings and titles for a futuristic, official feel.
         * 'Noto Sans SC' is used for body text for readability in Chinese.
        */
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #0d1117;
            color: #c9d1d9;
            overflow-x: hidden;
        }

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

        /*
         * VISUAL EFFECTS & ANIMATIONS:
         * - 'glow': A subtle glowing effect for titles and key elements.
         * - 'text-flicker': A glitch/flicker animation to simulate data corruption or classified information.
         * - 'fade-in-section': A smooth fade-in effect for sections as they are scrolled into view.
         * - 'typewriter': A classic typewriter effect for the main slogan.
        */
        .glow {
            text-shadow: 0 0 8px rgba(0, 255, 155, 0.4), 0 0 10px rgba(0, 255, 155, 0.3);
            color: #00ff9b;
        }

        .header-glow {
             text-shadow: 0 0 10px rgba(45, 212, 191, 0.5), 0 0 12px rgba(45, 212, 191, 0.4);
        }

        .data-block {
            border: 1px solid #30363d;
            background: repeating-linear-gradient(45deg, #0d1117, #0d1117 10px, #10151c 10px, #10151c 20px);
            position: relative;
            overflow: hidden;
        }
        
        .data-block::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(rgba(13, 17, 23, 0.1), rgba(13, 17, 23, 0.4));
            pointer-events: none;
        }

        .fade-in-section {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        }

        .fade-in-section.is-visible {
            opacity: 1;
            transform: translateY(0);
        }

        @keyframes text-flicker {
            0% { opacity: 1; }
            50% { opacity: 0.7; text-shadow: 0 0 5px rgba(255,0,0,0.5); }
            100% { opacity: 1; }
        }
        
        .flicker {
            animation: text-flicker 3s infinite alternate;
        }
        
        .typewriter h1 {
            overflow: hidden; 
            border-right: .15em solid #00ff9b; 
            white-space: nowrap;
            margin: 0 auto;
            letter-spacing: .1em;
            animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
        }

        /* The typing effect */
        @keyframes typing {
            from { width: 0 }
            to { width: 100% }
        }

        /* The typewriter cursor effect */
        @keyframes blink-caret {
            from, to { border-color: transparent }
            50% { border-color: #00ff9b; }
        }

        .infobox {
            background-color: #161b22;
            border: 1px solid #30363d;
            border-left: 3px solid #00ff9b;
        }
        
        .section-title {
            border-bottom: 2px solid #00ff9b;
        }

    </style>
</head>
<body class="bg-[#0d1117]">

    <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
        
        <!-- Header and Logo -->
        <header class="text-center mb-12 fade-in-section">
            <div class="flex justify-center items-center mb-4">
                <svg class="w-16 h-16 text-teal-400 header-glow" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M12 2L2 7V17L12 22L22 17V7L12 2Z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M2 7L12 12M12 22V12M22 7L12 12M17 4.5L7 9.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <h1 class="font-orbitron text-4xl md:text-5xl font-bold text-teal-400 header-glow">魔万学生会社</h1>
            <p class="font-orbitron text-lg md:text-xl text-gray-400">Plurimod Student Union</p>
            <div class="w-full max-w-lg mx-auto mt-6 typewriter">
                <h1 class="text-md sm:text-lg text-gray-300 font-mono">秩序融汇于多元，联邦守护下统一。</h1>
            </div>
        </header>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
            
            <!-- Main Content -->
            <main class="lg:col-span-8 space-y-12">
                
                <!-- Overview Section -->
                <section class="fade-in-section">
                    <p class="text-lg leading-relaxed border-l-4 border-teal-500 pl-4 italic text-gray-300">
                        “我们梦想着一座完美的乌托邦，我们的选择与抗争正共同书写着这座城市的命运。” 这是迪普菲都市所有学生的共同心声，也是魔万学生会社肩负的使命。作为迪普菲都市的中心政府，会社致力于在多元的学园势力中寻求平衡，维护整个都市的稳定与繁荣。
                    </p>
                </section>

                <!-- History Section -->
                <section class="fade-in-section">
                    <h2 class="font-orbitron text-3xl font-bold mb-4 section-title pb-2 glow">历史沿革</h2>
                    <div class="space-y-6 text-gray-300 leading-relaxed">
                        <div>
                            <h3 class="text-xl font-semibold text-teal-400 mb-2">市统改革与创立</h3>
                            <p>魔万学生会社的诞生，标志着迪普菲都市进入了一个全新的纪元——“市统纪”（Octarchy O.）。在市统纪0年（S.C.1999年），迪普菲都市的社会秩序在经历了长期的动荡后趋于稳定。时任统领者，那位被后世尊称为“华少”的传奇人物，为了构筑一个长久而高效的管理体系，发起了一系列深刻的社会改革。这次改革的核心，便是创立一个能够代表广大学生利益、联合各大区域力量的联邦制管理机构。于是，魔万学生会社应运而生，成为了迪普... <span class="text-red-500 flicker">[数据损坏]</span> ...的最高权力机关。</p>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold text-teal-400 mb-2">早期的辉煌</h3>
                            <p>在成立初期的数十年间，会社的治理卓有成效。在“华少”的远见卓识下，“八大学园”计划得以顺利推行，极大地促进了都市的科技与文化进步。迪普菲都市的秩序得到了前所未有的改善，一个由学生主导的、趋近于乌托邦的社会形态逐渐成型，市统纪也因此被誉为黄金时代。</p>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold text-teal-400 mb-2">近代的动荡</h3>
                            <p>然而，和平的表象之下暗流涌动。自再生2014年（S.C.2014），汇佳学园爆发的“西西里黑手党事件”如同一块投入平静湖面的巨石，彻底打破了都市的宁静。该事件成为导火索，激化了各大学园势力间的潜在矛盾。学生们对都市及学校的治理方式产生严重分歧，抗议、示威乃至武装冲突频发。各种团体和党派如雨后春笋般崛起，学园战争的阴影再次笼罩迪普菲。至今，事件的余波仍未平息，给会社的统治带来了前所未有的挑战。</p>
                        </div>
                    </div>
                </section>

                <!-- Organizational Structure Section -->
                <section class="fade-in-section">
                    <h2 class="font-orbitron text-3xl font-bold mb-4 section-title pb-2 glow">组织架构</h2>
                    <div class="space-y-6 text-gray-300 leading-relaxed">
                        <div>
                            <h3 class="text-xl font-semibold text-teal-400 mb-2">联邦核心：十二坐席</h3>
                            <p>作为迪普菲都市的政治核心，会社的最高决策层由12大坐席构成。这12位代表来自都市内最具影响力的不同学园，通过联邦议会共同商讨和决定都市的重大事务。每一项决议都旨在平衡各方利益，确保了决策的广泛性与公平性，是会社“多元统一”理念的基石。</p>
                        </div>
                        <div>
                            <h3 class="text-xl font-semibold text-teal-400 mb-2">行政管理</h3>
                            <p>虽然迪普菲都市采用联邦制，各个区域（如独立学园区、综合区等）拥有高度的自治权，可以由其内部的政治团体负责具体的行政规划。但所有区域的主要管理者，都必须是魔万学生会社的正式成员，并向中央坐席负责。这一制度确保了地方的自主性与中央的统一领导力之间的平衡。</p>
                        </div>
                    </div>
                </section>
                
                <!-- Classified Data Block -->
                <section class="fade-in-section">
                     <div class="p-6 rounded-lg data-block mt-8">
                        <h3 class="font-orbitron text-xl font-semibold text-red-500 mb-2">[机密档案 // 访问权限受限]</h3>
                        <p class="text-gray-400">根据S.T.R.探索对策总署的非公开情报，会社内部存在着未被公开的派系斗争。部分坐席代表被认为与其他组织，如<span class="flicker">[███]</span>和临光家族，存在秘密联系。这些潜在的内部裂痕可能是导致近代都市动荡的深层原因之一。档案编号：STR-DELTA-7G-04。</p>
                    </div>
                </section>

            </main>

            <!-- Infobox Sidebar -->
            <aside class="lg:col-span-4 h-fit sticky top-8">
                <div class="infobox p-4 rounded-lg shadow-lg fade-in-section">
                    <h3 class="font-orbitron text-xl font-bold text-center border-b border-gray-600 pb-2 mb-4 text-white">组织档案</h3>
                    <div class="space-y-3 text-sm">
                        <div class="flex justify-between">
                            <strong class="text-gray-400">全称:</strong>
                            <span class="text-right text-gray-200">魔万学生会社</span>
                        </div>
                        <div class="flex justify-between">
                            <strong class="text-gray-400">英文名:</strong>
                            <span class="text-right text-gray-200">Plurimod Student Union</span>
                        </div>
                        <div class="flex justify-between">
                            <strong class="text-gray-400">成立时间:</strong>
                            <span class="text-right text-gray-200">市统纪0年 (S.C. 1999)</span>
                        </div>
                        <div class="flex justify-between">
                            <strong class="text-gray-400">创始人:</strong>
                            <span class="text-right text-gray-200">华少 (Huashael)</span>
                        </div>
                        <div class="flex justify-between">
                            <strong class="text-gray-400">政体:</strong>
                            <span class="text-right text-gray-200">学生联邦制</span>
                        </div>
                        <div class="flex justify-between">
                            <strong class="text-gray-400">统治机构:</strong>
                            <span class="text-right text-gray-200">十二坐席联邦议会</span>
                        </div>
                        <div class="flex justify-between">
                            <strong class="text-gray-400">总部:</strong>
                            <span class="text-right text-gray-200">魔万学生会中央区</span>
                        </div>
                        <div class="flex justify-between">
                            <strong class="text-gray-400">状态:</strong>
                            <span class="text-right text-yellow-400">活跃，面临内部挑战</span>
                        </div>
                    </div>
                    <h4 class="font-orbitron text-md font-bold text-center border-b border-t border-gray-600 py-2 my-4 text-white">关联条目</h4>
                     <div class="space-y-2 text-sm">
                        <a href="#" class="block text-teal-400 hover:text-teal-300 hover:underline transition-colors duration-200">迪普菲都市</a>
                        <a href="#" class="block text-teal-400 hover:text-teal-300 hover:underline transition-colors duration-200">市统纪</a>
                        <a href="#" class="block text-teal-400 hover:text-teal-300 hover:underline transition-colors duration-200">华少 (Huashael)</a>
                        <a href="#" class="block text-teal-400 hover:text-teal-300 hover:underline transition-colors duration-200">S.T.R.探索对策总署</a>
                     </div>
                </div>
            </aside>

        </div>
    </div>

    <script>
        // This script handles the fade-in animation for sections as they are scrolled into view.
        // It uses the Intersection Observer API for performance.
        document.addEventListener('DOMContentLoaded', () => {
            const sections = document.querySelectorAll('.fade-in-section');

            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('is-visible');
                    }
                });
            }, {
                rootMargin: '0px',
                threshold: 0.1
            });

            sections.forEach(section => {
                observer.observe(section);
            });
        });
    </script>
</body>
</html>
}}