查看“分类:人物图鉴”的源代码


{{提示
|内容='''人物图鉴'''<br><small><div style="margin-top: 6px;line-height:22px;">本页面为SOKA CAFE站点中“人物图鉴”区的中心页，用以收录相关人物信息。</div></small>
}}
<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);
        }

        .filter-panel {
            border-bottom: 1px solid #eee;
            padding-bottom: 16px;
            margin-bottom: 20px;
        }

        .filter-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 12px;
            color: #333;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .close-btn {
            background: none;
            border: none;
            font-size: 24px;
            cursor: pointer;
            color: #999;
            padding: 0 8px;
        }

        .filter-section {
            margin-bottom: 16px;
        }

        .filter-section h3 {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 8px;
            color: #555;
        }

        .filter-tags {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
        }

        .filter-tag {
            padding: 6px 14px;
            background: #f0f2f5;
            border: 1px solid #ddd;
            border-radius: 20px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s;
        }

        .filter-tag.active {
            background: #4facfe;
            color: #fff;
            border-color: #4facfe;
        }

        .filter-tag.link-tag {
            color: #4facfe;
            background: transparent;
            border-color: #4facfe;
        }

        .filter-tag.link-tag:hover {
            background: rgba(79,172,254,0.1);
        }

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

        .org-card {
            display: block;
            text-decoration: none;
            border-radius: 8px;
            overflow: hidden;
            transition: all 0.3s ease;
        }

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

        .org-img {
            width: 100%;
            height: 240px;
            object-fit: cover;
            border-radius: 6px;
            border: 1px solid #eee;
        }

        @media (max-width: 768px) {
            .org-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .org-img {
                height: 200px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="title-bar">
            <span class="title-text">人物图鉴</span>
        </div>

        <div class="filter-panel">
            <input type="text" class="search-box" placeholder="搜索你想寻找的人物">

            <div class="filter-section">
                <h3>身份</h3>
                <div class="filter-tags">
                    <span class="filter-tag" data-filter="non-religious">非政教人士</span>
                    <span class="filter-tag" data-filter="religious">政教人士</span>
                </div>
            </div>

            <div class="filter-section">
                <h3>所属团体势力</h3>
                <div class="filter-tags">
                    <span class="filter-tag" data-filter="soka">创价学会</span>
                    <span class="filter-tag" data-filter="nichiren">日莲正宗</span>
                    <span class="filter-tag" data-filter="kensho">显正会</span>
                    <span class="filter-tag" data-filter="neutral">其他</span>
                </div>
            </div>

            <div class="filter-section">
                <h3>主要登场于</h3>
                <div class="filter-tags">
                    <span class="filter-tag" data-filter="main">本篇作品</span>
                    <span class="filter-tag" data-filter="side">编外作品</span>
                </div>
            </div>

            <div class="filter-section">
                <h3>主要职业</h3>
                <div class="filter-tags">
                    <span class="filter-tag" data-filter="actor">演员</span>
                    <span class="filter-tag" data-filter="vocal">歌手 / Vocal</span>
                    <span class="filter-tag" data-filter="musician">乐手</span>
                    <span class="filter-tag" data-filter="worker">工人</span>
                    <span class="filter-tag" data-filter="teacher">教师</span>
                    <span class="filter-tag" data-filter="artist">美术家</span>
                    <span class="filter-tag" data-filter="athlete">运动员</span>
                    <span class="filter-tag" data-filter="dancer">舞者</span>
                    <span class="filter-tag" data-filter="journalist">记者</span>
                    <span class="filter-tag" data-filter="doctor">医生</span>
                    <span class="filter-tag" data-filter="lawyer">律师</span>
                </div>
            </div>

            <div class="filter-section">
                <h3>其他</h3>
                <div class="filter-tags">
                    <a href="https://soka.cafe/index.php?title=問題発言シリーズ" class="filter-tag link-tag">問題発言シリーズ</a>
                    <a href="https://soka.cafe/index.php?title=900シリーズ" class="filter-tag link-tag">900シリーズ</a>
                </div>
            </div>
        </div>

        <div class="org-grid" id="orgGrid"></div>
    </div>

<script>
    const wikiDomain = "https://soka.cafe"; 
    const orgData = [
        {
            imgName: "图鉴久本雅美.jpg",
            link: "久本雅美",
            name: "久本雅美",
            tags: ["non-religious", "soka", "main", "actor"]
        },
        {
            imgName: "图鉴柴田理惠.jpg",
            link: "柴田理惠",
            name: "柴田理惠",
            tags: ["non-religious", "soka", "main", "actor"]
        },
        {
            imgName: "图鉴男子部石川.jpg",
            link: "石川",
            name: "石川",
            tags: ["non-religious", "soka", "main"]
        },
        {
            imgName: "图鉴齐藤房子.jpg",
            link: "齐藤房子",
            name: "齐藤房子",
            tags: ["non-religious", "soka", "main"]
        },
        {
            imgName: "图鉴森雅晴.jpg",
            link: "森雅晴",
            name: "森雅晴",
            tags: ["non-religious", "neutral", "main", "actor"]
        },
        {
            imgName: "图鉴古贺清.jpg",
            link: "古贺清",
            name: "古贺清",
            tags: ["non-religious", "neutral", "main", "actor"]
        },
        {
            imgName: "图鉴元气安.jpg",
            link: "元气安",
            name: "元气安",
            tags: ["non-religious", "neutral", "main", "actor"]
        },
        {
            imgName: "挑同图鉴仓地.png",
            link: "仓地透",
            name: "仓地透",
            tags: ["non-religious", "soka", "main", "worker"]
        },
                {
            imgName: "图鉴背后灵.jpg",
            link: "背后灵",
            name: "背后灵",
            tags: ["non-religious", "soka", "main"]
        },
        {
            imgName: "图鉴大岛正幸.jpg",
            link: "大岛正幸",
            name: "大岛正幸",
            tags: ["non-religious", "soka", "main", "worker"]
        },
        {
            imgName: "图鉴大野俊三.jpg",
            link: "大野俊三",
            name: "大野俊三",
            tags: ["non-religious", "soka", "main", "musician"]
        },
        {
            imgName: "图鉴城达也.jpg",
            link: "城达也",
            name: "城达也",
            tags: ["non-religious", "soka", "main", "vocal"]
        },
        {
            imgName: "人物图鉴阿尔伯特.jpg",
            link: "阿尔伯特·城间",
            name: "阿尔伯特",
            tags: ["non-religious", "soka", "main", "vocal"]
        },
        {
            imgName: "图鉴马尼修.jpg",
            link: "马尼修·卡普尔",
            name: "卡普尔",
            tags: ["non-religious", "soka", "main", "vocal"]
        },
        {
            imgName: "图鉴凯瑟琳.jpg",
            link: "凯瑟琳·卡什",
            name: "凯瑟琳",
            tags: ["non-religious", "neutral", "main", "musician"]
        },
        {
            imgName: "图鉴内斯特.jpg",
            link: "内斯特·托雷斯",
            name: "内斯特",
            tags: ["non-religious", "soka", "main", "musician"]
        },
                {
            imgName: "图鉴高桥.jpg",
            link: "高桥乔治",
            name: "高桥乔治",
            tags: ["non-religious", "soka", "main" ,"vocal", "musician",]
        },
        {
            imgName: "图鉴山崎旭萃.jpg",
            link: "山崎旭萃",
            name: "山崎旭萃",
            tags: ["non-religious", "soka", "main", "musician"]
        },
        {
            imgName: "图鉴伊藤日出夫.jpg",
            link: "伊藤日出夫",
            name: "伊藤日出夫",
            tags: ["non-religious", "soka", "main", "musician"]
        },
        {
            imgName: "图鉴松田芳正.jpg",
            link: "城达也",
            name: "城达也",
            tags: ["non-religious", "neutral", "main", "musician"]
        },
    ];

    const orgGrid = document.getElementById("orgGrid");
    let activeFilters = new Set();

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

    function renderOrgCards(filteredData = orgData) {
        orgGrid.innerHTML = "";
        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`;
            };

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

    // 筛选标签
    document.querySelectorAll('.filter-tag:not(.link-tag)').forEach(tag => {
        tag.addEventListener('click', function() {
            const filter = this.dataset.filter;
            if (activeFilters.has(filter)) {
                activeFilters.delete(filter);
                this.classList.remove('active');
            } else {
                activeFilters.add(filter);
                this.classList.add('active');
            }
            applyFilters();
        });
    });

    // 搜索
    const searchBox = document.querySelector(".search-box");
    searchBox.addEventListener("input", applyFilters);

    function applyFilters() {
        const keyword = searchBox.value.toLowerCase().trim();
        let filtered = [...orgData];

        // 标签筛选
        if (activeFilters.size > 0) {
            filtered = filtered.filter(item => {
                return item.tags.some(t => activeFilters.has(t));
            });
        }

        // 关键词搜索
        if (keyword) {
            filtered = filtered.filter(item =>
                item.name.toLowerCase().includes(keyword)
            );
        }

        renderOrgCards(filtered);
    }

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