查看“︁Test”︁的源代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">

  <title>一支烟工作室 · Wiki</title>

  <style>

    /* 全局重置 & 字体 */

    * {

      margin: 0;

      padding: 0;

      box-sizing: border-box;

      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', sans-serif;

    }

    body {

      min-height: 100vh;

      background: #0b0d10;

      color: #f0f3f7;

    }

    /* ----- 背景图 + 蒙版渐变 (固定在底层) ----- */

    .bg-hero {

      position: fixed;

      top: 0;

      left: 0;

      width: 100%;

      height: 100%;

      z-index: 0;

      /* ↓↓↓ 请将 background-image 中的 URL 替换为您的背景图片 ↓↓↓ */

      background-image: url('<nowiki>https://images.unsplash.com/photo-1541701494587-cb58502866ab?w=1600&q=80'</nowiki>);

      background-size: cover;

      background-position: center;

      background-repeat: no-repeat;

      /* 蒙版渐变: 从下到上 (底部更深，顶部透亮) */

      mask-image: linear-gradient(to bottom, rgba(0,0,0,0.05) 5%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.85) 100%);

      -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0.05) 5%, rgba(0,0,0,0.45) 55%, rgba(0,0,0,0.85) 100%);

      /* 叠加一层柔光，增强文字可读性 */

      background-blend-mode: normal;

    }

    /* 额外叠加一层半透明遮罩 (让背景更柔和) */

    .bg-hero::after {

      content: <nowiki>''</nowiki>;

      position: absolute;

      inset: 0;

      background: rgba(10, 12, 18, 0.35);

      pointer-events: none;

    }

    /* 为了让内容在背景之上 */

    .app-wrapper {

      position: relative;

      z-index: 2;

      max-width: 1260px;

      margin: 0 auto;

      padding: 24px 20px 80px;

      min-height: 100vh;

      display: flex;

      flex-direction: column;

      align-items: center;

    }

    /* ----- 工作室 logo (请替换图片) ----- */

    .studio-logo {

      margin: 12px 0 20px 0;

      display: flex;

      justify-content: center;

      align-items: center;

      filter: drop-shadow(0 8px 24px rgba(0,0,0,0.7));

      transition: transform 0.2s ease;

      width: 100%;

    }

    .studio-logo img {

      max-width: 340px;

      width: 80%;

      height: auto;

      display: block;

      border-radius: 20px;

      /* 如果logo有透明背景，可以加一点微光 */

      box-shadow: 0 0 40px rgba(180, 140, 100, 0.1);

    }

    .studio-logo:hover {

      transform: scale(1.01);

    }

    /* ----- 弹窗 (欢迎卡片) ----- */

    .welcome-popup {

      background: rgba(28, 32, 40, 0.78);

      backdrop-filter: blur(14px);

      -webkit-backdrop-filter: blur(14px);

      border-radius: 40px;

      padding: 30px 34px 26px;

      margin: 6px 0 28px 0;

      width: 100%;

      max-width: 820px;

      box-shadow: 0 20px 40px -12px rgba(0,0,0,0.7), 0 0 0 1px rgba(220, 190, 150, 0.15);

      border: 1px solid rgba(230, 210, 170, 0.12);

      transition: all 0.25s;

    }

    .welcome-popup h2 {

      font-size: 1.9rem;

      font-weight: 500;

      letter-spacing: 1px;

      margin-bottom: 16px;

      color: #f5e7d9;

      display: flex;

      align-items: center;

      gap: 10px;

    }

    .welcome-popup h2 span {

      font-size: 2.2rem;

    }

    .welcome-popup ul {

      list-style: none;

      margin: 12px 0 18px 0;

      padding-left: 8px;

    }

    .welcome-popup li {

      padding: 6px 0 6px 24px;

      position: relative;

      line-height: 1.6;

      font-size: 1.02rem;

      color: #d6dce5;

    }

    .welcome-popup li::before {

      content: "•";

      position: absolute;

      left: 2px;

      color: #dbbd94;

      font-weight: bold;

      font-size: 1.3rem;

    }

    .welcome-popup a {

      color: #e6cbaa;

      text-decoration: none;

      border-bottom: 1px dashed #a58767;

      transition: 0.2s;

    }

    .welcome-popup a:hover {

      color: #f5e2c5;

      border-bottom-color: #dfc094;

    }

    .popup-actions {

      display: flex;

      flex-wrap: wrap;

      align-items: center;

      justify-content: space-between;

      margin-top: 18px;

      gap: 16px 10px;

    }

    .popup-actions .btn-group {

      display: flex;

      gap: 12px;

      align-items: center;

      flex-wrap: wrap;

    }

    .btn-primary {

      background: #c7a77b;

      border: none;

      padding: 10px 32px;

      border-radius: 60px;

      font-weight: 600;

      font-size: 1.05rem;

      color: #1c1f26;

      cursor: pointer;

      box-shadow: 0 6px 14px rgba(0,0,0,0.3);

      transition: all 0.2s;

      letter-spacing: 0.3px;

      border: 1px solid #dcbf99;

    }

    .btn-primary:hover {

      background: #dbbc92;

      transform: scale(1.01);

      box-shadow: 0 8px 18px rgba(0,0,0,0.4);

    }

    .checkbox-reminder {

      display: flex;

      align-items: center;

      gap: 8px;

      font-size: 0.95rem;

      color: #bac4d0;

      cursor: pointer;

    }

    .checkbox-reminder input[type="checkbox"] {

      width: 18px;

      height: 18px;

      accent-color: #b7976e;

      transform: scale(1.0);

      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3));

      cursor: pointer;

    }

    /* ----- 神秘语录 (渐显+模糊) ----- */

    .motto-section {

      margin: 48px 0 40px 0;

      font-size: 1.8rem;

      font-weight: 300;

      letter-spacing: 4px;

      color: #e2d3be;

      text-shadow: 0 2px 12px rgba(0,0,0,0.6);

      text-align: center;

      opacity: 0.7;

      transition: all 0.1s;

      backdrop-filter: blur(2px);

      padding: 12px 24px;

      border-radius: 100px;

      background: rgba(0,0,0,0.1);

    }

    .motto-section span {

      display: inline-block;

      background: linear-gradient(135deg, #f3e2cb, #cfb697);

      -webkit-background-clip: text;

      background-clip: text;

      color: transparent;

      font-weight: 500;

    }

    /* ----- 模块网格 (R角矩形) ----- */

    .modules-grid {

      display: grid;

      grid-template-columns: repeat(3, 1fr);

      gap: 22px 22px;

      width: 100%;

      max-width: 1100px;

      margin: 12px 0 30px;

    }

    /* 通用卡片样式 — R角 + 毛玻璃 + 动态渐显模糊 */

    .module-card {

      background: rgba(30, 34, 42, 0.55);

      backdrop-filter: blur(10px);

      -webkit-backdrop-filter: blur(10px);

      border-radius: 28px;

      padding: 26px 18px 24px;

      box-shadow: 0 10px 28px -8px rgba(0,0,0,0.6), 0 0 0 1px rgba(210, 180, 140, 0.08);

      border: 1px solid rgba(225, 200, 165, 0.06);

      transition: all 0.3s cubic-bezier(0.15, 0.75, 0.3, 1.1);

      color: #eceff5;

      display: flex;

      flex-direction: column;

      backdrop-filter: blur(8px);

      /* 初始透明 + 模糊 (为滚动渐显准备) */

      opacity: 0.4;

      transform: translateY(10px);

      filter: blur(2px);

      transition: opacity 0.7s ease, transform 0.6s ease, filter 0.7s ease, box-shadow 0.3s;

    }

    /* 当卡片进入可视区 (通过JS添加类 .visible) */

    .module-card.visible {

      opacity: 1;

      transform: translateY(0);

      filter: blur(0);

      background: rgba(30, 34, 42, 0.65);

      box-shadow: 0 16px 36px -10px rgba(0,0,0,0.7), 0 0 0 1px rgba(210, 180, 140, 0.12);

    }

    /* 特殊：长条 YZY春秋 (占一整行) */

    .module-card.long-row {

      grid-column: 1 / -1;

      padding: 24px 26px;

      min-height: 90px;

      justify-content: center;

      align-items: center;

      text-align: center;

      background: rgba(40, 36, 30, 0.6);

      backdrop-filter: blur(12px);

      border: 1px solid rgba(200, 175, 135, 0.1);

    }

    .module-card.long-row h3 {

      font-size: 2.2rem;

      letter-spacing: 6px;

      font-weight: 400;

      color: #eddcc6;

      text-shadow: 0 2px 6px rgba(0,0,0,0.5);

    }

    .module-card.long-row h3 small {

      font-size: 1rem;

      font-weight: 300;

      opacity: 0.7;

      margin-left: 18px;

      letter-spacing: 2px;

    }

    /* 普通卡片标题 + 内容 */

    .module-card h3 {

      font-weight: 500;

      font-size: 1.4rem;

      letter-spacing: 1px;

      color: #ebddcc;

      margin-bottom: 12px;

      border-bottom: 1px solid rgba(200, 175, 140, 0.15);

      padding-bottom: 8px;

    }

    .module-card p, .module-card .desc {

      font-size: 0.98rem;

      line-height: 1.6;

      color: #cfd7e2;

      opacity: 0.85;

    }

    .module-card .badge-list {

      display: flex;

      flex-wrap: wrap;

      gap: 8px 12px;

      margin-top: 8px;

    }

    .module-card .badge-list span {

      background: rgba(220, 195, 160, 0.08);

      padding: 3px 12px;

      border-radius: 40px;

      font-size: 0.85rem;

      border: 1px solid rgba(210, 185, 145, 0.1);

    }

    .module-card .meta-link {

      color: #ccb99a;

      text-decoration: none;

      border-bottom: 1px dotted #7f6e58;

    }

    .module-card .friend-links {

      display: flex;

      flex-wrap: wrap;

      gap: 4px 16px;

      margin-top: 6px;

    }

    /* 响应式 */

    @media (max-width: 820px) {

      .modules-grid {

        grid-template-columns: repeat(2, 1fr);

        gap: 18px;

      }

      .module-card.long-row {

        grid-column: 1 / -1;

      }

      .welcome-popup {

        padding: 24px 20px;

      }

      .popup-actions {

        flex-direction: column;

        align-items: flex-start;

      }

      .motto-section {

        font-size: 1.4rem;

      }

    }

    @media (max-width: 520px) {

      .modules-grid {

        grid-template-columns: 1fr;

        gap: 16px;

      }

      .module-card.long-row h3 {

        font-size: 1.8rem;

      }

      .welcome-popup h2 {

        font-size: 1.5rem;

      }

    }

  </style>

</head>

<body>

  <!-- 背景层 (请替换背景图片) -->

  <nowiki><div class="bg-hero" style="background-image: url('https://images.unsplash.com/photo-1541701494587-cb58502866ab?w=1600&q=80');"></nowiki>

    <!-- ↑ 将 url() 中的链接替换为您的背景图片 -->

  <nowiki></div></nowiki>

  <nowiki><div class="app-wrapper"></nowiki>

    <!-- 工作室 LOGO (请替换 src 为您的图片地址) -->

    <nowiki><div class="studio-logo"></nowiki>

      <img src="https://via.placeholder.com/600x200/2a251e/dbc39e?text=一支烟工作室+LOGO" alt="一支烟工作室 Logo">

      <!-- ↑ 请将 src 替换为您的实际Logo图片URL，建议透明背景 PNG -->

    <nowiki></div></nowiki>

    <!-- 欢迎弹窗 -->

    <nowiki><div class="welcome-popup" id="welcomePopup"></nowiki>

      <nowiki><h2><span>🎉</span></nowiki> 欢迎来到一支烟工作室 Wiki！<nowiki></h2></nowiki>

      <nowiki><ul></nowiki>

        <nowiki><li>欢迎参与编辑！一支烟工作室 Wiki是一个社区，你需要遵守一些社区规则。</li></nowiki>

        <nowiki><li>没有编辑的经验？推荐查阅：<a href="#">指导手册</a></nowiki><nowiki></li></nowiki>

        <nowiki><li>加入一支烟工作室官方QQ频道 或 WIKI编辑讨论，以便更流畅地参与编辑和维护。</li></nowiki>

      <nowiki></ul></nowiki>

      <nowiki><div class="popup-actions"></nowiki>

        <nowiki><div class="btn-group"></nowiki>

          <button class="btn-primary" id="closePopupBtn">好的</button>

          <label class="checkbox-reminder">

            <input type="checkbox" id="dontShowAgain"> 下次不再提醒

          </label>

        <nowiki></div></nowiki>

        <nowiki><span style="opacity:0.4; font-size:0.85rem; letter-spacing:1px;">✨ 一支烟 · 共创</span></nowiki>

      <nowiki></div></nowiki>

    <nowiki></div></nowiki>

    <!-- 神秘语录 -->

    <nowiki><div class="motto-section"></nowiki>

      <nowiki><span>因为热爱，创造未来</span></nowiki>

    <nowiki></div></nowiki>

    <!-- 模块网格 -->

    <nowiki><div class="modules-grid" id="modulesGrid"></nowiki>

      <!-- YZY春秋 (长条) -->

      <nowiki><div class="module-card long-row" data-delay="0"></nowiki>

        <nowiki><h3>🌿 YZY春秋 <small>· 长卷</small></nowiki><nowiki></h3></nowiki>

        <nowiki><p style="font-size:1rem; opacity:0.8; letter-spacing:1px;">春秋笔墨，烟云共赏</p></nowiki>

      <nowiki></div></nowiki>

      <!-- 守则条目 -->

      <nowiki><div class="module-card" data-delay="50"></nowiki>

        <nowiki><h3>📜 守则条目</h3></nowiki>

        <nowiki><p>社区准则 · 编辑规范 · 行为公约</p></nowiki>

        <nowiki><div class="badge-list"></nowiki>

          <nowiki><span>尊重</span></nowiki><nowiki><span>版权</span></nowiki><nowiki><span>协作</span></nowiki>

        <nowiki></div></nowiki>

      <nowiki></div></nowiki>

      <!-- 说明文档 -->

      <nowiki><div class="module-card" data-delay="100"></nowiki>

        <nowiki><h3>📘 说明文档</h3></nowiki>

        <nowiki><p>Wiki语法 · 模板使用 · 命名规范</p></nowiki>

        <nowiki><div class="desc">快速上手，轻松编辑</div></nowiki>

      <nowiki></div></nowiki>

      <!-- 常用见面 -->

      <nowiki><div class="module-card" data-delay="150"></nowiki>

        <nowiki><h3>🤝 常用见面</h3></nowiki>

        <nowiki><p>会议室 · 编辑沙龙 · 线上茶话</p></nowiki>

        <nowiki><div class="badge-list"><span>每周二</span></nowiki><nowiki><span>周五</span></nowiki><nowiki></div></nowiki>

      <nowiki></div></nowiki>

      <!-- 模板列表 -->

      <nowiki><div class="module-card" data-delay="200"></nowiki>

        <nowiki><h3>🧩 模板列表</h3></nowiki>

        <nowiki><p>信息框 · 导航 · 引用 · 更多</p></nowiki>

        <nowiki><div class="badge-list"><span>50+</span></nowiki><nowiki><span>常用</span></nowiki><nowiki></div></nowiki>

      <nowiki></div></nowiki>

      <!-- 特殊页面 -->

      <nowiki><div class="module-card" data-delay="250"></nowiki>

        <nowiki><h3>⚡ 特殊页面</h3></nowiki>

        <nowiki><p>最近更改 · 随机页面 · 统计</p></nowiki>

        <a href="#" class="meta-link">查看全部 →</a>

      <nowiki></div></nowiki>

      <!-- 友情链接 -->

      <nowiki><div class="module-card" data-delay="300"></nowiki>

        <nowiki><h3>🔗 友情链接</h3></nowiki>

        <nowiki><div class="friend-links"></nowiki>

          <a href="#" class="meta-link">烟雨社区</a>

          <a href="#" class="meta-link">创作工坊</a>

          <a href="#" class="meta-link">档案馆</a>

        <nowiki></div></nowiki>

        <nowiki><p style="margin-top:6px;">交换链接 · 合作</p></nowiki>

      <nowiki></div></nowiki>

      <!-- 更新记录 -->

      <nowiki><div class="module-card" data-delay="350"></nowiki>

        <nowiki><h3>📋 更新记录</h3></nowiki>

        <nowiki><p>2026.09.05 · 重构首页</p></nowiki>

        <nowiki><p style="font-size:0.9rem; opacity:0.7;">更多历史 →</p></nowiki>

      <nowiki></div></nowiki>

    <nowiki></div></nowiki>

    <!-- 底部占位 -->

    <nowiki><div style="margin: 30px 0 10px; opacity:0.3; font-size:0.9rem; letter-spacing:2px;">— 一支烟工作室 · 因热爱而创造 —</div></nowiki>

  <nowiki></div></nowiki>

  <script>

    (function() {

      'use strict';

      // ---------- 弹窗控制 ----------

      const popup = document.getElementById('welcomePopup');

      const closeBtn = document.getElementById('closePopupBtn');

      const dontShowCheck = document.getElementById('dontShowAgain');

      // 检查 localStorage 是否记录 “不再提醒”

      const noShow = localStorage.getItem('wikiWelcomeNoShow') === 'true';

      if (noShow) {

        popup.style.display = 'none';

      }

      // 关闭弹窗

      function closePopup() {

        popup.style.display = 'none';

        if (dontShowCheck.checked) {

          localStorage.setItem('wikiWelcomeNoShow', 'true');

        }

      }

      closeBtn.addEventListener('click', closePopup);

      // ---------- 滚动渐显 (Intersection Observer) ----------

      const cards = document.querySelectorAll('.module-card');

      if ('IntersectionObserver' in window) {

        const observer = new IntersectionObserver((entries) => {

          entries.forEach(entry => {

            if (entry.isIntersecting) {

              const card = entry.target;

              const delay = parseInt(card.getAttribute('data-delay')) || 0;

              setTimeout(() => {

                card.classList.add('visible');

              }, delay);

              observer.unobserve(card);

            }

          });

        }, {

          threshold: 0.15,

          rootMargin: '0px 0px -30px 0px'

        });

        cards.forEach(card => {

          observer.observe(card);

        });

      } else {

        cards.forEach(card => {

          card.classList.add('visible');

        });

      }

    })();

  </script>

</body>

</html>