查看“分类:团体势力”的源代码

{{提示
|标题=团体势力
|内容=本页面为SOKA CAFE[[档案区]]的分区——团体势力区的中心页，其定义为“创价学会创作文化中重要的团体、组织、势力”。
}}


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>整体页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
.container {
        max-width: 1200px;
        margin: 0 auto;
        background: #fff;
        border-radius: 12px;
        padding: 20px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    }

    .title-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        position: relative;
    }

    .title-bar::before, .title-bar::after {
        content: "";
        flex: 1;
        height: 2px;
        background: #ccc;
        margin: 0 20px;
    }

    .title-text {
        font-size: 24px;
        font-weight: bold;
        color: #333;
    }

    .search-box {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 20px;
        font-size: 16px;
        outline: none;
        transition: border-color 0.3s;
    }

    .search-box:focus {
        border-color: #4facfe;
        box-shadow: 0 0 0 3px rgba(79,172,254,0.2);
    }

    .org-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
}

    .org-card {
        display: flex;
        align-items: center;
        background: #f8f9fa;
        border-radius: 8px;
        padding: 12px;
        text-decoration: none;
        color: #333;
        transition: transform 0.3s, box-shadow 0.3s;
    }

    .org-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 16px rgba(0,0,0,0.1);
    }

    .org-img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 6px;
        margin-right: 16px;
        border: 1px solid #eee;
    }

    .org-name {
        font-size: 18px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    @media (max-width: 768px) {
    .org-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    .org-img {
        width: 90px;
        height: 70px;
    }
}
</style>

</head>
<body>
    <div class="container">
        <div class="title-bar">
            <span class="title-text">团体势力一览</span>
        </div>
        <input type="text" class="search-box" placeholder="搜索团体势力">
        <div class="org-grid" id="orgGrid">
        </div>
    </div>
<script>
    const wikiDomain = "https://soka.cafe"; 
    const orgData = [
        { imgName: "创价学会势力.jpg", link: "创价学会", name: "创价学会" },
        { imgName: "日莲正宗势力.jpg", link: "日莲正宗", name: "日莲正宗" },
        { imgName: "显正会势力1.jpg", link: "富士大石寺显正会", name: "富士大石寺显正会" },
        { imgName: "鸟肌翼赞会.jpg", link: "鸟肌翼赞会", name: "鸟肌翼赞会" },
        { imgName: "在特会势力.jpg", link: "禁止在日特权市民会", name: "反在日特权市民会" },
        { imgName: "公明党势力1.jpg", link: "公明党", name: "公明党" },
        { imgName: "统一教会势力.jpg", link: "统一教会", name: "统一教会" },
        { imgName: "幸福科学教势力.jpg", link: "幸福科学教", name: "幸福科学教" },
        { imgName: "奥姆真理教势力.jpg", link: "奥姆真理教", name: "奥姆真理教" },
        { imgName: "WAHAHA本铺势力.jpg", link: "WAHAHA本铺", name: "WAHAHA本铺" },
        { imgName: "其他势力.jpg", link: "分类:团体势力-其他", name: "其他" },
    ];

    const orgGrid = document.getElementById("orgGrid");

    function getWikiImageUrl(imgName) {
        return `${wikiDomain}/Special:FilePath/${encodeURIComponent(imgName)}`;
    }

    function renderOrgCards() {
        orgData.forEach(org => {
            const card = document.createElement("a");
            card.className = "org-card";
            card.href = `${wikiDomain}/index.php?title=${encodeURIComponent(org.link)}`;

            const img = document.createElement("img");
            img.className = "org-img";
            img.src = getWikiImageUrl(org.imgName);
            img.alt = org.name;
            img.onerror = function() {
                this.src = `${wikiDomain}/Special:FilePath/默认图片.png`;
            };

            const name = document.createElement("div");
            name.className = "org-name";
            name.textContent = org.name;

            card.appendChild(img);
            card.appendChild(name);
            orgGrid.appendChild(card);
        });
    }

    const searchBox = document.querySelector(".search-box");
    searchBox.addEventListener("input", function() {
        const keyword = this.value.toLowerCase().trim();
        orgGrid.innerHTML = "";
        const filteredData = orgData.filter(org => 
            org.name.toLowerCase().includes(keyword)
        );
        filteredData.forEach(org => {
            const card = document.createElement("a");
            card.className = "org-card";
            card.href = `${wikiDomain}/index.php?title=${encodeURIComponent(org.link)}`;

            const img = document.createElement("img");
            img.className = "org-img";
            img.src = getWikiImageUrl(org.imgName);
            img.alt = org.name;
            img.onerror = function() {
                this.src = `${wikiDomain}/Special:FilePath/默认图片.png`;
            };

            const name = document.createElement("div");
            name.className = "org-name";
            name.textContent = org.name;

            card.appendChild(img);
            card.appendChild(name);
            orgGrid.appendChild(card);
        });
    });

    renderOrgCards();
</script>
</body>
</html>
[[分类:中心页]]