💬 开场白
“`html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>档案：爱慕虚荣</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;600&display=swap');
:root {
–klein-blue: #002FA7; /* 莱克茵蓝 */
–ink-black: #1a1a1a;
–paper-white: #f5f5f5;
–mist-gray: #dcdcdc;
–warning-red: #8B0000;
–highlight-gold: #bda06d;
}
body {
font-family: 'Noto Serif SC', serif;
background-color: var(–paper-white);
color: var(–ink-black);
margin: 0;
padding: 2rem;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #e0e0e0 0%, var(–paper-white) 100%);
}
.container {
max-width: 800px;
width: 100%;
background-color: white;
border: 1px solid var(–mist-gray);
box-shadow: 0 10px 30px rgba(0, 47, 167, 0.1);
border-radius: 8px;
overflow: hidden;
}
.header {
padding: 2.5rem;
background-color: var(–klein-blue);
color: var(–paper-white);
text-align: center;
border-bottom: 5px solid rgba(0,0,0,0.1);
}
.header h1 {
margin: 0;
font-size: 2.5rem;
font-weight: 600;
letter-spacing: 0.2rem;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}
.header p {
margin: 0.5rem 0 0;
font-size: 1rem;
font-weight: 300;
opacity: 0.8;
}
.section {
padding: 2rem;
border-bottom: 1px solid var(–mist-gray);
}
.section:last-child {
border-bottom: none;
}
.section h2 {
font-size: 1.5rem;
color: var(–klein-blue);
border-left: 4px solid var(–klein-blue);
padding-left: 1rem;
margin-top: 0;
margin-bottom: 1.5rem;
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.info-item {
background-color: var(–paper-white);
padding: 1rem;
border-radius: 4px;
border: 1px solid #eee;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}.info-item:hover {
transform: translateY(-3px);
box-shadow: 0 4px 15px rgba(0, 47, 167, 0.08);
}
.info-item strong {
display: block;
margin-bottom: 0.5rem;
color: var(–klein-blue);
font-weight: 600;
}
.info-item span {
font-weight: 300;
}.info-item .highlight {
font-weight: 400;
color: var(–highlight-gold);
}.info-item .note {
font-size: 0.9em;
color: #777;
}
.character-section {
display: flex;
gap: 2rem;
flex-wrap: wrap;
}
.character-card {
flex: 1;
min-width: 300px;
background-color: var(–paper-white);
padding: 1.5rem;
border-radius: 6px;
border-top: 4px solid var(–klein-blue);
transition: box-shadow 0.3s ease;
}.character-card:nth-child(2) {
border-top-color: var(–highlight-gold);
}
.character-card h3 {
margin: 0 0 1rem;
font-size: 1.3rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.character-card h3 .tag {
font-size: 0.8rem;
font-weight: 400;
padding: 0.2rem 0.6rem;
border-radius: 12px;
background-color: #e0e0e0;
color: #555;
}.character-card h3 .tag.clean {
background-color: #e3f2fd;
color: var(–klein-blue);
}.character-card h3 .tag.grey {
background-color: #f5e1a4;
color: #6d5b2c;
}
.character-card p {
line-height: 1.7;
font-weight: 300;
margin-bottom: 0;
}.character-card p .warning {
color: var(–warning-red);
font-weight: 400;
}
.openings-list {
list-style: none;
padding: 0;
margin: 0;
}
.openings-list li {
background-color: var(–paper-white);
padding: 1.2rem;
margin-bottom: 1rem;
border-radius: 4px;
border-left: 3px solid var(–klein-blue);
position: relative;
transition: background-color 0.3s ease;
}.openings-list li:hover {
background-color: #eef2ff;
}
.opening-tag {
position: absolute;
top: 1.2rem;
right: 1.2rem;
font-size: 0.85rem;
font-weight: 600;
color: var(–highlight-gold);
}.opening-tag.recommended {
color: var(–warning-red);
}
.disclaimer, .acknowledgements {
font-size: 0.9rem;
line-height: 1.8;
color: #666;
background-color: var(–paper-white);
padding: 1.5rem;
border-radius: 4px;
}
.disclaimer strong {
color: var(–warning-red);
}
.music-section ul {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}.music-section li {
display: inline-block;
margin: 0.5rem 1rem;
font-style: italic;
color: #555;
}.music-section .note {
text-align: center;
margin-top: 1.5rem;
color: var(–mist-gray);
font-style: italic;
}
</style>
</head>
<body>
<div class="container">
<header class="header">
<h1>爱慕虚荣</h1>
<p>非排他性的爱情是否只是一种虚荣的倒影</p>
</header>
<div class="section">
<h2>档案索引</h2>
<div class="info-grid">
<div class="info-item"><strong>作者</strong><span>你怎么知道这里有企鹅</span></div>
<div class="info-item"><strong>推荐模型</strong><span>Cloud 4.5 Sonnet, Opus / Gemini 2.5Pro</span></div>
<div class="info-item"><strong>推荐预设</strong><span>烟痕 / 留光</span></div>
<div class="info-item"><strong>世界书</strong><span>有</span></div>
<div class="info-item"><strong>美化正则</strong><span>有</span></div>
<div class="info-item"><strong>快速回复</strong><span>无</span></div>
<div class="info-item"><strong>取向</strong><span>BG <br><span class="note">(改性向请勿公开发布)</span></span></div>
<div class="info-item"><strong>二传</strong><span class="warning">不可以</span></div>
<div class="info-item"><strong>二改</strong><span>让我看看</span></div>
<div class="info-item"><strong>商用</strong><span class="warning">绝对不可以 <br><span class="note">(此卡为免费发布)</span></span></div>
</div>
</div>
<div class="section">
<h2>人物剪影</h2>
<div class="character-section">
<div class="character-card">
<h3>吴逸 <span class="tag clean">洁 / 纯爱</span></h3>
<p>【排他性系列#1】从高二到博士，九年校服到婚纱的初恋。家庭剧变在他心中刻下犬儒主义的烙印，用黑色幽默作铠甲，内里却是将你视作唯一的纯爱战神。他扛起为你自费读博的80万港币，也注定要扛下这份爱可能带来的所有苦楚。 || 他的爱情底线是绝对的排他性，任何对开放关系的接受都是 <span class="warning">OOC</span>。 ||</p>
</div>
<div class="character-card">
<h3>李岐弗 <span class="tag grey">非洁 / 灰色</span></h3>
<p>【豪门/ENTP】港城顶级医疗家族里的学术“异类”，实验室的太子爷。他是慷慨迷人的解语花，也是游刃有余的玩家。在他眼中，出轨或许只是在恰当的时间，满足各自所需的一场智力与感官游戏，无关背叛，只关乎选择与乐趣。</p>
</div>
</div>
</div>
<div class="section">
<h2>故事开端</h2>
<ul class="openings-list">
<li>
是的，我们开局就是，<strong>捉奸在床</strong>！未婚夫真的会和你分手，怎么哄回！？
<span class="opening-tag recommended">★★★★★ 推荐</span>
</li>
<li>
小三哥，你不会真的爱上我了吧？！
<span class="opening-tag">★★★☆☆ 甜</span>
</li>
<li>
太子爷又在搞<strong>学术不端</strong>了，吃人嘴短，要吃嘴子就吃吧…
<span class="opening-tag">★★★★☆ 野</span>
</li>
<li>
小三哥又在名利场里勾引我。
<span class="opening-tag">★★☆☆☆ 痒</span>
</li>
<li>
谁家好人自费港博，家有贤夫。
<span class="opening-tag">★★★☆☆ 苦甜</span>
</li>
<li>
求婚！求婚失败？
<span class="opening-tag">★★☆☆☆ 纯爱</span>
</li>
</ul>
</div><div class="section">
<h2>(免责声明)</h2>
<div class="disclaimer">
<p>- 学术相关设定全部由多个亲友经历拼凑与互联网检索构成，如有bug我先滑跪！不想要医学方向可以自己修改。</p>
<p>- <strong>雷点</strong>包含<strong>女方出轨</strong>、<strong>学术不端</strong>。在这场三人纠葛中，我们的吴逸先生可能是唯一的受害者。</p>
<p>- 灵感源于《爱慕虚荣》。</p>
<p>- 不接受G向举报。</p>
<p>- 本故事旨在探索道德绑架下的酸涩体感。</p>
</div>
</div>
<div class="section music-section">
<h2>潮湿的回响 (BGM)</h2>
<ul>
<li>《唯一》— 邓紫棋</li>
<li>《暗涌》— 王菲</li>
<li>《sand》— Dove Cameron</li>
</ul>
<p class="note">~~等我学会怎么插入BGM我就加到开场白里~~</p>
</div>
<div class="section">
<h2>鸣谢</h2>
<div class="acknowledgements">
<p>美化UI、写卡助手、UR女神的格式以及为我咨询PhD相关事宜的亲友们，感谢你们的帮助与支持。</p>
</div>
</div>
</div>
</body>
</html>
“`