分类:团体势力:修订间差异
来自SOKA CAFE
| 第1行: | 第1行: | ||
{{提示 | {{提示 | ||
|标题= | |标题=团体势力 | ||
|内容=本页面为SOKA CAFE[[档案区]]的分区——团体势力区的中心页,其定义为“创价学会创作文化中重要的团体、组织、势力”。 | |内容=本页面为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> | ||
<div class=" | <body> | ||
<div class=" | <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> | |||
[[分类:中心页]] | [[分类:中心页]] | ||

