失传媒体中文维基

const featuredItems = [
  {
    title: "AV3",
    url: "https://lostmedia.wikidot.com/av3",
    description: "\“AV3\”是指哔哩哔哩弹幕网自建站以来的第三个投稿。其自建站起经历过数次变动，但具体内容和原始版本至今仍是未解之谜。",
    imageUrl: "https://lostmedia.wikidot.com/local--files/av3/av3title"
  },
  {
    title: "废弃武侠小说房墙上的小说文本",
    url: "https://lostmedia.wikidot.com/feiqiwuxiaxiaoshuofang",
    description: "废弃武侠小说房是一座具体地点未知的房屋，其屋内的整面墙壁被写满武侠小说，据推测作者可能为流浪作家。",
    imageUrl: "https://lostmedia.wdfiles.com/local--resized-images/feiqiwuxiaxiaoshuofang/%E6%B2%B3%E5%8D%97%E5%85%89%E5%B1%B1%E5%8E%BF/medium.jpg"
  },
  {
    title: "80版《画皮》",
    url: "https://lostmedia.wikidot.com/80s-hua-pi",
    description: "80版《画皮》是一部传言中被全面封禁的恐怖电影。目前该片证实其存在的论据均能轻易证伪，而证伪其存在的论据均不能轻易证伪，故该片不存在的可能性极大。",
    imageUrl: "https://lostmedia.wdfiles.com/local--resized-images/80s-hua-pi/image_1/medium.jpg"
  },
  {
    title: "冴月麟",
    url: "https://lostmedia.wikidot.com/huyuelin",
    description: "冴月麟是《东方Project》系列中的第六作《东方红魔乡》由ZUN设计的原计划登场的第三位自机角色。由于在开发期间中因开发时间不足被ZUN删除，最终成为废案，且至今为止仍未正式登场。",
    imageUrl: "https://lostmedia.wikidot.com/local--files/huyuelin/c62.jpg"
  }
];
 
const style = document.createElement('style');
style.textContent = `
  :root {
    --text-color: rgb(35, 35, 38);
    --background-color: rgb(252, 252, 252);
    --light-color-2: rgb(240, 240, 244);
    --dark-color-2: rgb(229, 229, 238);
    --dark-color-3: rgb(50, 50, 51);
  }
 
  .featured-section {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-color);
    background-color: var(--background-color);
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
  }
 
  .featured-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
  }
 
  .featured-link-wrapper {
    text-decoration: none;
    color: inherit;
    display: block;
  }
 
  .featured-item {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
 
  .featured-link-wrapper:hover .featured-item {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  }
 
  .featured-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 1px solid var(--dark-color-2);
  }
 
  .featured-content {
    padding: 1.5rem;
  }
 
  .featured-description {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-color);
    opacity: 0.9;
  }
 
  @media (max-width: 768px) {
    .featured-section {
      padding: 1rem;
    }
 
    .featured-items {
      grid-template-columns: 1fr;
    }
  }
`;
document.head.appendChild(style);
 
function createFeaturedSection() {
  const targetContainer = document.querySelector('.from-wikidot');
  if (!targetContainer) {
    console.warn('未找到class为"from-wikidot"的div容器');
    return;
  }
 
  const section = document.createElement('section');
  section.className = 'featured-section';
 
  const itemsContainer = document.createElement('div');
  itemsContainer.className = 'featured-items';
 
  featuredItems.forEach(item => {
    const linkWrapper = document.createElement('a');
    linkWrapper.className = 'featured-link-wrapper';
    linkWrapper.href = item.url;
    linkWrapper.target = '_blank';
 
    const itemElement = document.createElement('article');
    itemElement.className = 'featured-item';
 
    const img = document.createElement('img');
    img.className = 'featured-image';
    img.src = item.imageUrl;
    img.alt = item.title;
    itemElement.appendChild(img);
 
    const content = document.createElement('div');
    content.className = 'featured-content';
 
    const description = document.createElement('p');
    description.className = 'featured-description';
    description.textContent = item.description;
    content.appendChild(description);
 
    itemElement.appendChild(content);
    linkWrapper.appendChild(itemElement);
    itemsContainer.appendChild(linkWrapper);
  });
 
  section.appendChild(itemsContainer);
  targetContainer.appendChild(section);
}
 
window.addEventListener('DOMContentLoaded', createFeaturedSection);