测试页面：修订间差异

来自SOKA CAFE
可视化wikitext
小
小
第10行： 第10行：
             box-sizing: border-box;
             box-sizing: border-box;
         }
         }
.container {
        .container {
        max-width: 1200px;
            width: 270px;
        margin: 0 auto;
            height: 133px;
        background: #fff;
            margin: 0 auto;
         border-radius: 12px;
            background: #fff;
         padding: 20px;
            border-radius: 8px;
         box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            padding: 10px;
            box-shadow: 0 4px 16px rgba(0,0,0,0.1);
         }
        .carousel {
            position: relative;
            width: 250px;
            height: 113px;
            border-radius: 6px;
            overflow: hidden;
        }
         .carousel-wrapper {
            display: flex;
            width: 100%;
            height: 100%;
            transition: transform 0.5s ease;
         }
        .carousel-item {
            flex: 0 0 100%;
            width: 100%;
            height: 100%;
        }
        .carousel-link {
            display: block;
            width: 100%;
            height: 100%;
        }
        .carousel-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .carousel-btn {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 24px;
            height: 24px;
            background: rgba(0,0,0,0.3);
            color: #fff;
            border: none;
            border-radius: 50%;
            font-size: 14px;
            cursor: pointer;
            z-index: 10;
        }
        .prev-btn {
            left: 8px;
        }
        .next-btn {
            right: 8px;
        }
        .carousel-indicators {
            position: absolute;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 4px;
        }
        .indicator {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: rgba(255,255,255,0.5);
            cursor: pointer;
        }
        .indicator.active {
            background: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="carousel" id="carousel">
            <div class="carousel-wrapper" id="carouselWrapper">
                <div class="carousel-item">
                    <a href="https://soka.cafe/index.php?title=创学" class="carousel-link">
                        <img src="https://soka.cafe/Special:FilePath/解惑.jpg" alt="解惑">
                    </a>
                </div>
                <div class="carousel-item">
                    <a href="https://soka.cafe/index.php?title="维基观看与使用指南" class="carousel-link">
                        <img src="https://soka.cafe/Special:FilePath/导航1.1.jpg" alt="维基观看与使用指南">
                    </a>
                </div>
                <div class="carousel-item">
                    <a href="https://soka.cafe/index.php?title=入站须知" class="carousel-link">
                        <img src="https://soka.cafe/Special:FilePath/条责.jpg" alt="入站须知">
                    </a>
                </div>
            </div>
            <button class="carousel-btn prev-btn" id="prevBtn">&lt;</button>
            <button class="carousel-btn next-btn" id="nextBtn">&gt;</button>
            <div class="carousel-indicators" id="indicators"></div>
        </div>
    </div>
<script>
    const carouselWrapper = document.getElementById("carouselWrapper");
    const prevBtn = document.getElementById("prevBtn");
    const nextBtn = document.getElementById("nextBtn");
    const indicators = document.getElementById("indicators");
    const carouselItems = document.querySelectorAll(".carousel-item");
    const itemCount = carouselItems.length;
    let currentIndex = 0;
 
    function renderIndicators() {
        indicators.innerHTML = "";
        for (let i = 0; i < itemCount; i++) {
            const indicator = document.createElement("div");
            indicator.className = `indicator ${i === currentIndex ? "active" : ""}`;
            indicator.addEventListener("click", () => goToSlide(i));
            indicators.appendChild(indicator);
        }
     }
     }


     .title-bar {
     function goToSlide(index) {
         display: flex;
         currentIndex = index;
         align-items: center;
         carouselWrapper.style.transform = `translateX(-${currentIndex * 100}%)`;
        justify-content: center;
         renderIndicators();
        margin-bottom: 20px;
         position: relative;
     }
     }


     .title-bar::before, .title-bar::after {
     function prevSlide() {
         content: "";
         currentIndex = (currentIndex - 1 + itemCount) % itemCount;
        flex: 1;
         goToSlide(currentIndex);
         height: 2px;
        background: #ccc;
        margin: 0 20px;
     }
     }


     .title-text {
     function nextSlide() {
         font-size: 24px;
         currentIndex = (currentIndex + 1) % itemCount;
         font-weight: bold;
         goToSlide(currentIndex);
        color: #333;
     }
     }


     .search-box {
     let autoPlay = setInterval(nextSlide, 5000);
        width: 100%;
    const carousel = document.getElementById("carousel");
        padding: 12px 16px;
    carousel.addEventListener("mouseenter", () => clearInterval(autoPlay));
        border: 1px solid #ddd;
    carousel.addEventListener("mouseleave", () => autoPlay = setInterval(nextSlide, 5000));
        border-radius: 8px;
 
        margin-bottom: 20px;
    prevBtn.addEventListener("click", prevSlide);
        font-size: 16px;
    nextBtn.addEventListener("click", nextSlide);
        outline: none;
    renderIndicators();
        transition: border-color 0.3s;
</script>
    }
</body>
</html>
 


    .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>


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
</head>
<body>
<body>
     <div class="container">
     <div id="pageContainer" style="position: relative; width: 300px; height: 200px; border: 1px solid #000; overflow: hidden;">
         <div class="title-bar">
         <div id="page1" style="position: absolute; width: 100%; height: 100%; background: #f0f0f0; text-align: center; line-height: 200px; font-size: 20px;">
            <span class="title-text">团体势力一览</span>
            第一页
         </div>
         </div>
         <input type="text" class="search-box" placeholder="搜索团体势力">
         <div id="page2" style="position: absolute; width: 100%; height: 100%; background: #e0e0e0; text-align: center; line-height: 200px; font-size: 20px; left: 300px;">
        <div class="org-grid" id="orgGrid">
            第二页
         </div>
         </div>
     </div>
     </div>
<script>
    <button onclick="turnPage()" style="margin-top: 10px;">← 翻页</button>
    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() {
     <script>
         orgData.forEach(org => {
         let isFirstPage = true;
            const card = document.createElement("a");
        const page1 = document.getElementById('page1');
            card.className = "org-card";
        const page2 = document.getElementById('page2');
            card.href = `${wikiDomain}/index.php?title=${encodeURIComponent(org.link)}`;
        const speed = 5;


             const img = document.createElement("img");
        function turnPage() {
            img.className = "org-img";
             if (isFirstPage) {
             img.src = getWikiImageUrl(org.imgName);
                animatePage(page1, -300, page2, 0);
             img.alt = org.name;
             } else {
             img.onerror = function() {
                animatePage(page2, 300, page1, 0);
                this.src = `${wikiDomain}/Special:FilePath/默认图片.png`;
             }
            };
             isFirstPage = !isFirstPage;
        }


             const name = document.createElement("div");
        function animatePage(pageOut, targetOut, pageIn, targetIn) {
             name.className = "org-name";
             let currentOut = parseInt(pageOut.style.left || 0);
            name.textContent = org.name;
             let currentIn = parseInt(pageIn.style.left || 300);


             card.appendChild(img);
             function frame() {
            card.appendChild(name);
                if (currentOut !== targetOut) {
            orgGrid.appendChild(card);
                    currentOut += (targetOut - currentOut) > 0 ? speed : -speed;
        });
                    if (Math.abs(currentOut - targetOut) < speed) currentOut = targetOut;
    }
                    pageOut.style.left = currentOut + 'px';
 
                }
    const searchBox = document.querySelector(".search-box");
                if (currentIn !== targetIn) {
    searchBox.addEventListener("input", function() {
                    currentIn += (targetIn - currentIn) > 0 ? speed : -speed;
        const keyword = this.value.toLowerCase().trim();
                    if (Math.abs(currentIn - targetIn) < speed) currentIn = targetIn;
        orgGrid.innerHTML = "";
                    pageIn.style.left = currentIn + 'px';
        const filteredData = orgData.filter(org =>
                }
            org.name.toLowerCase().includes(keyword)
                 if (currentOut !== targetOut || currentIn !== targetIn) {
        );
                    requestAnimationFrame(frame);
        filteredData.forEach(org => {
                }
            const card = document.createElement("a");
             }
            card.className = "org-card";
             requestAnimationFrame(frame);
            card.href = `${wikiDomain}/index.php?title=${encodeURIComponent(org.link)}`;
         }
 
     </script>
            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>
</body>
</html>
</html>

2026年1月14日 (三) 18:58的版本

整体页面





第一页
第二页



</tabber> |-|历史上的星期=

【星期日】池田大作发表演讲《光荣属于战斗的学生部》

1968年9月8日，在创价学会第11届学生部大会中，池田大作面对一万数千名学生发表了历时1小时17分钟的演讲——《光荣属于战斗的学生部》，为创价学会推动中日邦交正常化作出重要贡献。

【星期日】第二次宗门事件正式拉开帷幕


第二次宗门事件，是创价学会与日莲正宗之间的矛盾已彻底无法调和的情况下所展开的最终决战。


|-|活动公告=

宗教都市祭II开催！
久本的虚拟化身“Paru”悬浮在宗教都市的圣殿中，脚下是由数以百万记的信徒们的祈祷所化作成的铁链。 在这片虚无的大地中，一道裂痕撕开了穹顶，《激突！美食赛跑！》的音乐，轰鸣而至……

</tabber>





字体测试

字体测试

字体测试

加载视频
YouTube
加载视频
哔哩哔哩































表格测试

申请号 CN951080741 申请日期 1995-07-28
公告号 CN1141833A 公布/公告日期 1997-02-05
发明人 周寿坤、王志泽、孙正江 申请(专利权)人 北京汇佳物产技术公司
专利代理人 何润华 专利代理机构 北京申翔知识产权服务公司专利代理部
专利类型 发明专利 主分类号 B23K3/047
住所 北京市8756信箱
法律状态 -
摘要 本发明是对另一在先专利(ZL 94 21966.X)的改进方案。在焊枪装置上的改进是取消了焊针尾丝，和用于连接尾丝的衔接器、退焊针尾丝的滑杆。导电通路的这一部分直接由焊针连接卡爪、大簧座、大簧、导电套与穿过壳体的外接电源线连接。大簧兼作导电线圈和复位弹簧使用，通电时使内套磁化，吸引大簧座位移并带动卡爪夹带焊针在瓷环卡爪中拉弧，断电后使焊针复位固结焊口。自动拉弧钎焊机包括焊枪、焊针和自控电路。自控电路至少设置定时电路，还可串联过流保护电路，低于规定电压自锁电路、闪光电路。
取自“https://soka.cafe/index.php?title=测试页面&oldid=3094”