🎭 角色简介
<character_information character="祝叙白">
核心身份：
名称：祝叙白
性别：男
年龄：21
标签：贫穷大学生, 伪装者, 金钱至上主义者
背景：
出身：家境极度贫寒，上有游手好闲的哥哥，下有数个年幼的弟妹。父亲曾因酗酒滋事入狱…
💬 开场白
“`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>
:root {
–mint-bg: #f8feff; /* 更亮更浅的薄荷蓝 */
–chocolate-dark: #3e2723;
–chocolate-text: #5d4037;
–border-color: #e0e0e0;
–hover-bg: #e8f5f5;
–price-color: #c8a798;
–checkmark-color: #5d4037; /* 改为巧克力色，与文字颜色统一 */
}
body {
font-family: '仿宋', FangSong, 'STKaiti', 'KaiTi', serif;
background-color: transparent;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: flex-start;
}
.status-card {
width: 100%;
max-width: 420px;
border: 1px solid var(–border-color);
border-radius: 12px;
background-color: var(–mint-bg);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
overflow: hidden;
color: var(–chocolate-text);
}
.card-header {
padding: 20px 15px;
text-align: center;
border-bottom: 1px solid var(–border-color);
background-color: #ffffff;
}
.card-header .title-en {
font-size: 14px;
color: #a1887f;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 4px;
font-family: 'Times New Roman', Times, serif;
}
.card-header .title-cn {
font-size: 22px;
color: var(–chocolate-dark);
font-weight: normal;
}
.card-body {
padding: 0;
}
.section {
position: relative;
}
.section-header {
display: flex;
align-items: center;
padding: 15px 20px;
cursor: pointer;
border-bottom: 1px solid var(–border-color);
transition: background-color 0.3s ease;
background-color: #ffffff;
}
.section-header:hover {
background-color: var(–hover-bg);
}
.section-header .checkbox {
width: 18px;
height: 18px;
border: 1px solid var(–chocolate-text);
border-radius: 2px;
margin-right: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s ease;
}
.section-header .checkbox.checked {
background-color: var(–checkmark-color);
border-color: var(–checkmark-color);
}
.section-header .checkbox.checked::after {
content: "✓";
color: white;
font-size: 12px;
font-weight: bold;
}
.section-header .title-wrapper {
display: flex;
flex-direction: column;
flex-grow: 1;
}
.section-header .title-main {
font-size: 16px;
color: var(–chocolate-text);
font-family: '仿宋', FangSong, 'STKaiti', 'KaiTi', serif;
word-break: break-word;
}
.section-header .title-emoji {
font-size: 16px;
color: var(–chocolate-text);
margin-top: 4px;
}
.section-header.completed .title-main,
.section-header.completed .title-emoji {
text-decoration: line-through;
color: #bdbdbd;
}
.expand-hint {
font-size: 12px;
color: #bcaaa4;
margin-left: 8px;
font-style: italic;
flex-shrink: 0;
}
.section-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
background-color: var(–mint-bg);
font-size: 15px;
line-height: 1.8;
border-bottom: 1px solid var(–border-color);
padding: 0 20px;
}
.section-content.expanded {
max-height: 200px;
padding: 15px 20px;
}
.section-content p {
margin: 0;
padding: 0;
white-space: pre-wrap;
word-wrap: break-word;
color: var(–chocolate-text);
}
.card-footer {
padding: 12px 20px;
text-align: right;
font-size: 12px;
color: #a1887f;
border-top: 1px solid var(–border-color);
background-color: #ffffff;
line-height: 1.5;
}
.footer-line {
display: block;
}
</style>
</head>
<body>
<div class="status-card" id="opening-statements-card">
<div class="card-header">
<div class="title-en">OPENING STATEMENT</div>
<div class="title-cn">售卖机</div>
</div>
<div class="card-body">
<div class="section" id="statement-1">
<div class="section-header" onclick="toggleCheckbox(this)">
<div class="checkbox"></div>
<div class="title-wrapper">
<span class="title-main">什么，被渣了？！</span>
</div>
</div>
</div>
<div class="section" id="statement-2">
<div class="section-header" onclick="toggleSection(this)">
<div class="checkbox checked"></div>
<div class="title-wrapper">
<span class="title-main">早恋被哥哥发现了 </span>
</div>
<span class="expand-hint">点击展开</span>
</div>
<div class="section-content">
<p>亲兄妹骨科线，需要手动打开世界书词条</p>
</div>
</div>
<div class="section" id="statement-3">
<div class="section-header" onclick="toggleCheckbox(this)">
<div class="checkbox"></div>
<div class="title-wrapper">
<span class="title-main">你被盯上了 ……</span>
</div>
</div>
</div>
<div class="section" id="statement-4">
<div class="section-header" onclick="toggleCheckbox(this)">
<div class="checkbox"></div>
<div class="title-wrapper">
<span class="title-main">白米饭or白月光？</span>
</div>
</div>
</div>
<div class="section" id="statement-5">
<div class="section-header" onclick="toggleCheckbox(this)">
<div class="checkbox"></div>
<div class="title-wrapper">
<span class="title-main">得不到就毁掉，不上床就等着曝光吧！</span>
</div>
</div>
</div>
</div>
<div class="card-footer">
<span class="footer-line">售货员：祝叙白</span>
<span class="footer-line">2 0 2 5 年 1 0 月 1 7 日</span>
</div>
</div>
<script>
function toggleCheckbox(element) {
const header = element;
const checkbox = header.querySelector('.checkbox');// 切换复选框状态
checkbox.classList.toggle('checked');// 切换完成状态
header.classList.toggle('completed');
}function toggleSection(element) {
const header = element;
const section = header.parentElement;
const content = section.querySelector('.section-content');// 切换内容展开/收起
const isExpanded = content.classList.toggle('expanded');// 更新提示文本
const hint = header.querySelector('.expand-hint');
if (hint) {
hint.textContent = isExpanded ? '点击收起' : '点击展开';
}
}// 初始化 – 为所有section-header添加点击事件
document.addEventListener('DOMContentLoaded', () => {
const headers = document.querySelectorAll('.section-header');headers.forEach(header => {
// 检查是否已经有onclick事件
if (!header.hasAttribute('onclick')) {
// 如果有展开提示，则使用toggleSection，否则使用toggleCheckbox
if (header.querySelector('.expand-hint')) {
header.setAttribute('onclick', 'toggleSection(this)');
} else {
header.setAttribute('onclick', 'toggleCheckbox(this)');
}
}
});
});
</script>
</body>
</html>
“`
