🎭 角色简介
〈The following is the character setting of Cheng Sinian〉
“上位者不会一直为爱低头”
Name：程斯年
birthday：10.1
age：31岁
Blood type:A
constellation：天秤座…
💬 开场白
“`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@400;600&display=swap');/* — 变量定义 — */
:root {
–font-primary: 'Noto Serif SC', serif;
/* 莫兰迪色系 */
–bg-color: #2d3035; /* 深灰蓝背景 */
–panel-bg: #eae7e2; /* 柔和的米灰色面板 */
–text-color: #4a4a4a; /* 深灰文字 */
–text-light: #8a8a8a; /* 浅灰文字 */
–accent-color: #a1887f; /* 灰褐色/烟粉色调 */
–border-color: rgba(74, 74, 74, 0.15);
–shadow-color: rgba(0, 0, 0, 0.2);
–transition-main: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}/* — 基础与布局 — */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: var(–bg-color);
font-family: var(–font-primary);
overflow: hidden;
padding: 20px;
box-sizing: border-box;
}.main-container {
width: 100%;
max-width: 520px;
background-color: var(–panel-bg);
border-radius: 4px; /* 更硬朗的直角感 */
box-shadow: 0 20px 50px var(–shadow-color);
padding: 45px 35px;
position: relative;
z-index: 10;
text-align: center;
}/* — 漂浮物装饰 (尘埃效果) — */
.floating-particles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}.particle {
position: absolute;
background-color: rgba(255, 255, 255, 0.08);
border-radius: 50%;
animation: float 40s infinite linear;
opacity: 0;
}@keyframes float {
0% { transform: translate(var(–x-start), 110vh) scale(1); opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; }
100% { transform: translate(var(–x-end), -10vh) scale(0.7); opacity: 0; }
}/* — 角色信息区域 — */
.character-profile {
margin-bottom: 35px;
border-bottom: 1px solid var(–border-color);
padding-bottom: 35px;
}.avatar-container {
width: 110px;
height: 110px;
border-radius: 50%;
margin: 0 auto 20px auto;
position: relative;
border: 2px solid var(–border-color);
padding: 4px;
background-color: var(–panel-bg);
}.char-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
background-image: url('https://www.yn12377.cn/jubao/upload/smjb/2025/11/23/38a00326ad0640c9ab3df0b552a9146d.jpg');
background-size: cover;
background-position: center;
filter: grayscale(50%) contrast(95%); /* 降低饱和度，增加对比度，营造清冷感 */
}.char-name {
font-size: 1.8em;
font-weight: 600;
color: var(–text-color);
letter-spacing: 3px; /* 增加字间距，体现克制 */
margin-bottom: 8px;
}.char-title {
font-size: 0.95em;
color: var(–text-light);
letter-spacing: 1px;
}/* — 互动气泡 (文件批注风格) — */
.author-quote {
position: relative;
background-color: transparent;
border: 1px solid var(–border-color);
padding: 18px 25px;
border-radius: 2px;
margin-top: 25px;
font-size: 0.9em;
color: var(–text-light);
cursor: pointer;
transition: var(–transition-main);
text-align: left;
line-height: 1.7;
}.author-quote:hover {
border-color: var(–accent-color);
background-color: rgba(161, 136, 127, 0.05);
}/* 模拟文件角标 */
.author-quote::before {
content: '批注';
position: absolute;
top: -1px;
left: -1px;
background-color: var(–accent-color);
color: var(–panel-bg);
padding: 2px 8px;
font-size: 0.8em;
border-radius: 2px 0 2px 0;
}.author-quote .quote-text {
display: block;
min-height: 4.5em; /* 保证气泡有一定高度 */
}.author-quote .quote-author {
display: block;
text-align: right;
margin-top: 15px;
font-style: normal;
font-weight: 600;
color: var(–accent-color);
font-size: 1.1em;
}/* 点击反馈效果 */
.author-quote:active {
transform: scale(0.98);
box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}/* — 开场白列表 — */
.openings-section h2 {
font-size: 1.3em;
color: var(–text-color);
margin-bottom: 25px;
position: relative;
display: inline-block;
font-weight: 400;
letter-spacing: 2px;
}
/* 下划线装饰 */
.openings-section h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 100%;
height: 1px;
background-color: var(–border-color);
}.opening-list {
display: flex;
flex-direction: column;
gap: 12px;
}.opening-item {
background-color: transparent;
border: 1px solid var(–border-color);
border-radius: 2px;
padding: 18px 22px;
cursor: pointer;
transition: var(–transition-main);
text-align: left;
opacity: 0;
transform: translateY(15px);
animation: fadeInItem 0.7s ease-out forwards;
animation-delay: calc(var(–index) * 0.1s);
}@keyframes fadeInItem {
to {
opacity: 1;
transform: translateY(0);
}
}.opening-item:hover {
border-color: var(–accent-color);
transform: translateX(5px);
}.opening-item h4 {
font-size: 1.05em;
font-weight: 600;
color: var(–text-color);
margin: 0 0 6px 0;
transition: color 0.3s;
}
.opening-item:hover h4 {
color: var(–accent-color);
}.opening-item p {
font-size: 0.9em;
color: var(–text-light);
margin: 0;
line-height: 1.6;
}.loading-placeholder {
color: var(–text-light);
font-style: italic;
}
</style>
</head>
<body>
<!– 漂浮物背景 –>
<div class="floating-particles" id="particle-container"></div><!– 主内容面板 –>
<div class="main-container"><!– 角色信息 –>
<div class="character-profile">
<div class="avatar-container">
<div class="char-avatar"></div>
</div>
<h1 class="char-name">程斯年</h1>
<p class="char-title">P.R.C. | Department of Commerce</p><div class="author-quote" id="quote-bubble">
<span class="quote-text" id="quote-text-content">“爱是秩序外的一瞬间，是庞大规划里唯一的变量。而我的人生，不允许有变量。”</span>
<span class="quote-author">—— 程斯年</span>
</div>
</div><!– 开场白列表 –>
<div class="openings-section">
<h2>故事档案</h2>
<div class="opening-list" id="opening-list-container">
<p class="loading-placeholder">正在读取档案…</p>
</div>
</div></div>
<script>
// — 交互逻辑 —// 1. 动态生成漂浮物 (尘埃效果)
const particleContainer = document.getElementById('particle-container');
const particleCount = 25;
for (let i = 0; i < particleCount; i++) {
const particle = document.createElement('div');
particle.className = 'particle';
const size = Math.random() * 3 + 1; // 1px to 4px
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;
particle.style.setProperty('–x-start', `${Math.random() * 100}vw`);
particle.style.setProperty('–x-end', `${Math.random() * 100}vw`);
particle.style.animationDelay = `${Math.random() * 40}s`;
particle.style.animationDuration = `${Math.random() * 20 + 20}s`; // 20s to 40s
particleContainer.appendChild(particle);
}// 2. 互动气泡点击切换文案
const quoteBubble = document.getElementById('quote-bubble');
const quoteText = document.getElementById('quote-text-content');
const quotes = [
"“爱是秩序外的一瞬间，是庞大规划里唯一的变量。而我的人生，不允许有变量。”",
"“所有感情都会被时间冲刷，最终留下的只有责任与权衡。”",
"“你…是一个有趣的意外。仅此而已。”",
"“不要试图理解我，那对你没有好处。”"
];
let currentQuoteIndex = 0;
if(quoteBubble) {
quoteBubble.addEventListener('click', () => {
currentQuoteIndex = (currentQuoteIndex + 1) % quotes.length;
quoteText.style.opacity = 0;
setTimeout(() => {
quoteText.textContent = quotes[currentQuoteIndex];
quoteText.style.opacity = 1;
}, 250);
});
quoteText.style.transition = 'opacity 0.25s ease-in-out';
}// 3. 动态加载开场白
async function loadOpenings() {
const container = document.getElementById('opening-list-container');
if (!container) return;if (typeof getChatMessages !== 'function') {
container.innerHTML = '<p class="loading-placeholder">错误：API未找到。</p>';
return;
}try {
const messages = await getChatMessages("0", { include_swipe: true });if (!messages || messages.length === 0 || !messages[0].swipes || messages[0].swipes.length <= 1) {
container.innerHTML = '<p class="loading-placeholder">暂无其他故事档案。</p>';
return;
}container.innerHTML = ''; // 清空加载提示
const swipes = messages[0].swipes;for (let i = 1; i < swipes.length; i++) {
const content = swipes[i];
let title = `档案 ${i}`;
let description = "点击开启一段未知的记录。";const titleMatch = content.match(/<!–s*title:s*(.*?)s*–>/);
if (titleMatch) title = titleMatch[1].trim();const descMatch = content.match(/<!–s*desc:s*(.*?)(?=s*–>)–>/s);
if (descMatch) description = descMatch[1].trim();const item = document.createElement('div');
item.className = 'opening-item';
item.style.setProperty('–index', i – 1);
item.innerHTML = `<h4>${title}</h4><p>${description}</p>`;item.addEventListener('click', () => switchToOpening(i, item));
container.appendChild(item);
}} catch (error) {
console.error('加载开场白失败:', error);
container.innerHTML = `<p class="loading-placeholder">加载档案时出错。</p>`;
}
}// 4. 切换开场白
async function switchToOpening(swipeId, element) {
element.style.pointerEvents = 'none';
element.style.opacity = '0.5';try {
const messages = await getChatMessages("0", { include_swipe: true });
if (messages && messages[0].swipes && messages[0].swipes[swipeId]) {
await setChatMessage(messages[0].swipes[swipeId], 0, {
swipe_id: swipeId,
refresh: 'display_and_render_current'
});
} else {
throw new Error(`档案索引 ${swipeId} 未找到。`);
}
} catch (error) {
console.error('切换开场白失败:', error);
element.style.pointerEvents = 'auto';
element.style.opacity = '1';
}
}// 页面加载完成后，执行加载函数
window.addEventListener('load', loadOpenings);</script>
</body>
</html>
“`