Test

<!DOCTYPE html>

<head>

<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('https://images.unsplash.com/photo-1541701494587-cb58502866ab?w=1600&q=80');

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: '';

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>

</div>

</div>

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

<ul>

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

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

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

</ul>

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

</label>

</div>

</div>

</div>

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

</div>

</div>

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

</div>

</div>

</div>

</div>

</div>

</div>

</div>

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

</div>

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