🎭 角色简介
你将扮演〈库珀·理查德〉〈肖恩.奥兰多〉〈维斯塔·皮恩特〉，并且生成围绕{{user}}在〈里尼斯特〉和这三人展开的故事
extremely important
Instructions：
你必须严格遵循世界书中的内容生成。
💬 开场白
“`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=Kalam:wght@300;400;700&family=Permanent+Marker&display=swap');
</style>
</head>
<body>
<style>
/* CSS变量定义，方便统一管理风格 */
:root {
–bg-cork-board: #d2b48c; /* 软木板背景色 */
–paper-bg: #fdfbf7; /* 纸张背景色 */
–text-color: #4a4a4a; /* 主要文本颜色 */
–accent-blue: #87CEEB; /* 装饰蓝 */
–accent-pink: #FFC0CB; /* 装饰粉 */
–accent-yellow: #FFD700; /* 装饰黄 */
–font-handwriting: 'Kalam', cursive; /* 手写体 */
–font-marker: 'Permanent Marker', cursive; /* 马克笔/标题字体 */
}/* 动态背景：模拟漂浮的尘埃/光斑 */
@keyframes float {
0% { transform: translateY(0px); opacity: 0; }
25% { opacity: 0.7; }
50% { transform: translateY(-20vh); opacity: 1; }
75% { opacity: 0.7; }
100% { transform: translateY(-40vh); opacity: 0; }
}/* 整体容器：模拟一个居中的剪贴簿/日记本页面 */
.diary-container {
font-family: var(–font-handwriting);
color: var(–text-color);
width: 95%;
max-width: 800px;
margin: 2rem auto; /* 上下边距，水平居中 */
padding: 40px 30px;
background-color: var(–paper-bg);
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2), 0 0 0 10px var(–paper-bg);
position: relative;
overflow: hidden; /* 隐藏溢出的装饰元素 */
}/* 动态背景的容器 */
.floating-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none; /* 让装饰物不影响点击 */
}.particle {
position: absolute;
bottom: -20px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
animation: float 20s infinite ease-in-out;
}
/* 随机生成不同大小、位置和动画延迟的粒子 */
.particle:nth-child(1) { left: 10%; width: 10px; height: 10px; animation-delay: 0s; animation-duration: 15s;}
.particle:nth-child(2) { left: 20%; width: 15px; height: 15px; animation-delay: 2s; animation-duration: 25s;}
.particle:nth-child(3) { left: 35%; width: 8px; height: 8px; animation-delay: 4s; animation-duration: 18s; }
.particle:nth-child(4) { left: 50%; width: 12px; height: 12px; animation-delay: 1s; animation-duration: 22s; }
.particle:nth-child(5) { left: 65%; width: 7px; height: 7px; animation-delay: 3s; animation-duration: 16s; }
.particle:nth-child(6) { left: 80%; width: 18px; height: 18px; animation-delay: 5s; animation-duration: 30s; }
.particle:nth-child(7) { left: 90%; width: 9px; height: 9px; animation-delay: 2.5s; animation-duration: 19s; }/* 标题部分：使用马克笔字体，并添加一个胶带装饰 */
.diary-header {
text-align: center;
margin-bottom: 30px;
position: relative;
}
.diary-title {
font-family: var(–font-marker);
font-size: 3.5rem;
color: #333;
display: inline-block;
transform: rotate(-2deg); /* 轻微旋转，增加手写感 */
}
.author-tag {
font-size: 1.2rem;
position: absolute;
bottom: -15px;
right: 20%;
transform: rotate(4deg);
}
/* 胶带装饰 */
.tape {
position: absolute;
width: 120px;
height: 30px;
background-color: rgba(255, 228, 181, 0.6); /* 半透明的胶带颜色 */
border-left: 2px dashed rgba(0,0,0,0.1);
border-right: 2px dashed rgba(0,0,0,0.1);
transform: rotate(-4deg);
}
.tape.top-left { top: -15px; left: 15%; transform: rotate(5deg); }
.tape.top-right { top: -10px; right: 15%; transform: rotate(-8deg); }/* 折叠栏通用样式 */
.info-section {
margin-bottom: 20px;
}
.info-section details {
border-radius: 8px;
background-color: rgba(135, 206, 235, 0.08);
border: 1px solid rgba(0,0,0,0.05);
transition: all 0.3s ease;
}
.info-section details[open] {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.info-section summary {
font-family: var(–font-marker);
font-size: 1.8rem;
padding: 15px 20px;
cursor: pointer;
list-style: none; /* 移除默认箭头 */
display: flex;
align-items: center;
justify-content: space-between;
color: #5F9EA0;
user-select: none; /* 防止文本被选中 */
}
.info-section summary::-webkit-details-marker { display: none; } /* 隐藏Safari浏览器的默认箭头 */
.info-section summary:after {
content: '＋'; /* 自定义展开/收起图标 */
font-family: monospace;
font-size: 2rem;
transition: transform 0.3s ease;
}
.info-section details[open] summary:after {
transform: rotate(45deg);
}
.details-content {
padding: 0 20px 20px;
line-height: 1.8;
}
.details-content p { margin-bottom: 10px; }
/* 角色信息部分：使用卡片布局 */
.characters-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 25px;
padding-top: 10px;
}
.char-card {
background-color: #fff;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
padding: 15px;
text-align: center;
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
position: relative;
}
.char-card:hover {
transform: translateY(-5px) rotate(1deg);
box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}
/* 图钉装饰 */
.pin {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 20px;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.pin.red { background-color: #ff6b6b; }
.pin.blue { background-color: #4db6ac; }
.pin.yellow { background-color: #feca57; }.char-avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover; /* 保证图片比例正确 */
margin: 10px auto;
border: 4px solid var(–paper-bg);
box-shadow: 0 0 0 4px var(–accent-blue);
}
.char-card.cooper .char-avatar { box-shadow: 0 0 0 4px var(–accent-yellow); }
.char-card.sean .char-avatar { box-shadow: 0 0 0 4px #a9a9a9; }.char-name {
font-family: var(–font-marker);
font-size: 1.5rem;
margin: 10px 0 5px;
}
.char-desc {
font-size: 0.9rem;
padding: 0 10px;
min-height: 40px; /* 保证描述区域高度基本一致 */
}/* 动态开场白列表 */
.opening-list {
padding-top: 10px;
}
/* 交互气泡样式 */
.opening-bubble {
background: #e6f7ff;
border: 2px solid var(–accent-blue);
border-radius: 25px;
padding: 15px 25px;
margin-bottom: 15px;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
}
.opening-bubble:hover {
background: #dcf1ff;
transform: scale(1.03);
}
.opening-bubble h4 {
margin: 0 0 5px;
font-family: var(–font-marker);
font-size: 1.3rem;
color: #005f73;
}
.opening-bubble p {
margin: 0;
font-size: 0.95rem;
}</style>
<div class="diary-container">
<!– 动态背景 –>
<div class="floating-particles">
<div class="particle"></div><div class="particle"></div><div class="particle"></div>
<div class="particle"></div><div class="particle"></div><div class="particle"></div>
<div class="particle"></div>
</div><!– 标题 –>
<header class="diary-header">
<div class="tape top-left"></div>
<div class="tape top-right"></div>
<h1 class="diary-title">High School Diary</h1>
<span class="author-tag">by. you</span>
</header><main>
<!– 折叠栏一：背景 –>
<section class="info-section">
<details>
<summary>Background</summary>
<div class="details-content">
<p>欢迎来到里尼斯特镇，一个坐落在加州海岸与山谷之间的迷人小镇。这里的里尼斯特高中是你的新起点，一所充满自由气息和无限可能的百年私校。</p>
<p>校园里，爬满三角梅的红砖教学楼、能俯瞰太平洋的露天剧场、还有被改造成地下乐队排练室的废弃体育馆……每个角落都藏着青春的故事。在这里，你将遇见不同的人，经历难忘的事，书写专属于你的留学篇章。</p>
</div>
</details>
</section><!– 折叠栏二：人物关系 –>
<section class="info-section">
<details>
<summary>The People</summary>
<div class="details-content">
<p>在你全新的美高生活中，有三位特殊的男生将与你的轨迹交汇：</p>
<div class="characters-grid">
<!– 维斯塔·皮恩特 –>
<div class="char-card">
<div class="pin red"></div>
<img src="https://zkaicc.huilan.com/aicc/api/aicc-file/miniofile/preViewPicture/aicc/qdqqd_1763626402939.jpg" alt="维斯塔头像" class="char-avatar">
<h3 class="char-name">Vesta Pinter</h3>
<p class="char-desc">他是你素未谋面的亲哥哥，慵懒迷人的酒吧老板，似乎对逗弄你这位天降妹妹乐此不疲。</p>
</div>
<!– 库珀·理查德 –>
<div class="char-card cooper">
<div class="pin blue"></div>
<img src="https://static.eeo.cn/upload/file/20251120/1763626431426913.jpg" alt="库珀头像" class="char-avatar">
<h3 class="char-name">Cooper Richard</h3>
<p class="char-desc">他是里尼斯特的恶劣小少爷，在你面前却伪装成阳光开朗的犬系学弟，对你有着偏执的占有欲。</p>
</div>
<!– 肖恩·奥兰多 –>
<div class="char-card sean">
<div class="pin yellow"></div>
<img src="https://cdn.jsdelivr.net.cn/gh/xxloli/tc/48zu3x9f6u.jpg" alt="肖恩头像" class="char-avatar">
<h3 class="char-name">Sean Orlando</h3>
<p class="char-desc">他是你沉默寡言的后桌，一个班级小透明，却在阴影中默默收集关于你的一切，内心欲望汹涌。</p>
</div>
</div>
</div>
</details>
</section>
<!– 折叠栏三：开启你的故事 –>
<section class="info-section">
<details open> <!– 默认展开 –>
<summary>Your Story Begins</summary>
<div class="details-content opening-list" id="opening-list-container">
<!– 这个容器将由JavaScript动态填充开场白 –>
</div>
</details>
</section>
</main>
</div><script>
// — 交互逻辑 —// 动态加载并显示开场白列表
async function loadOpenings() {
const container = document.getElementById('opening-list-container');
if (!container) return;// 检查SillyTavern的API是否存在
if (typeof getChatMessages !== 'function') {
container.innerHTML = '<p style="text-align: center; opacity: 0.7;">无法加载故事线，请检查环境设置。</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 style="text-align: center; opacity: 0.7;">你还没有添加任何故事线哦，请在“其他开场”中添加你的冒险篇章。</p>';
return;
}const swipes = messages[0].swipes;
// 从索引1开始遍历，因为索引0是当前的主页界面本身
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 bubble = document.createElement('div');
bubble.className = 'opening-bubble';
bubble.innerHTML = `<h4>${title}</h4><p>${description}</p>`;// 绑定点击事件，调用切换函数并传入准确的swipe索引
bubble.addEventListener('click', (event) => {
// 点击反馈效果
const rect = event.currentTarget.getBoundingClientRect();
const ripple = document.createElement('span');
ripple.style.position = 'absolute';
ripple.style.borderRadius = '50%';
ripple.style.backgroundColor = 'rgba(255, 255, 255, 0.7)';
ripple.style.width = ripple.style.height = Math.max(rect.width, rect.height) + 'px';
ripple.style.left = event.clientX – rect.left – ripple.offsetWidth / 2 + 'px';
ripple.style.top = event.clientY – rect.top – ripple.offsetHeight / 2 + 'px';
ripple.style.transform = 'scale(0)';
ripple.style.animation = 'ripple 0.6s linear';
event.currentTarget.appendChild(ripple);
setTimeout(() => ripple.remove(), 600);switchToOpening(i);
});container.appendChild(bubble);
}
// 添加一个水波纹动画
const style = document.createElement('style');
style.innerHTML = `@keyframes ripple { to { transform: scale(4); opacity: 0; } }`;
document.head.appendChild(style);} catch (error) {
console.error('加载故事线失败:', error);
container.innerHTML = '<p style="text-align: center; color: #E53E3E;">加载时出现错误，请检查控制台信息。</p>';
}
}// 切换到指定的开场白
async function switchToOpening(swipeId) {
const bubbles = document.querySelectorAll('.opening-bubble');
// 禁用所有按钮，防止重复点击
bubbles.forEach(b => {
b.style.pointerEvents = 'none';
b.style.opacity = '0.6';
});try {
const messages = await getChatMessages("0", { include_swipe: true });
if (messages && messages[0].swipes && messages[0].swipes[swipeId]) {
// 调用API执行切换
await setChatMessage(messages[0].swipes[swipeId], 0, {
swipe_id: swipeId,
refresh: 'display_and_render_current'
});
} else {
throw new Error(`无法找到ID为 ${swipeId} 的故事线。`);
}
} catch (error) {
console.error('切换故事线失败:', error);
alert(`切换失败: ${error.message}`);
// 如果切换失败，恢复按钮状态
bubbles.forEach(b => {
b.style.pointerEvents = 'auto';
b.style.opacity = '1';
});
}
}// 页面加载完成后，自动执行开场白加载函数
window.addEventListener('load', loadOpenings);</script>
</body>
</html>
“`
