🎭 角色简介
<bilingual_dialogue_spec>
– All character dialogue must be presented in English first, followed immediately by a Mandarin Chinese translation enclo…
💬 开场白
作者oi，此卡仅发布在dc，禁止二传二改商用。
“`html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>开场选择</title>
<style>
/* — 全局与字体设定 — */
:root {
–ios-blue: #007aff;
–ios-light-gray: #f0f2f5;
–ios-border-gray: #e5e5e5;
–ios-text-dark: #1c1c1e;
–ios-text-light: #8e8e93;
–danger-red: #ff3b30;
}.opening-selector-body {
all: unset;
display: block;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: #f0f2f5;
margin: 0;
padding: 20px 10px;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
color: var(–ios-text-dark);
}.iphone-container {
width: 100%;
max-width: 420px;
aspect-ratio: 9 / 19.5;
min-height: 700px;
background: #fff;
border-radius: 40px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 8px solid #111;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
}.screen-content {
flex-grow: 1;
overflow-y: auto;
display: flex;
flex-direction: column;
background: #fff;
}/* — 导航逻辑 — */
.screen-nav { display: none; }
.screen { display: none; flex-direction: column; height: 100%; }
#nav-contacts:checked ~ .iphone-container .screen#contacts-screen,
#nav-general:checked ~ .iphone-container .screen#general-chat-screen,
#nav-hunter:checked ~ .iphone-container .screen#hunter-chat-screen,
#nav-blair:checked ~ .iphone-container .screen#blair-chat-screen {
display: flex;
}/* — 通用顶部栏 — */
.ios-top-bar {
flex-shrink: 0;
padding: 12px 20px 8px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
font-weight: 600;
color: var(–ios-text-dark);
border-bottom: 1px solid var(–ios-border-gray);
}/* — 联系人列表页 — */
#contacts-screen .header-title {
font-family: 'Impact', 'Arial Black', sans-serif;
font-size: 28px;
text-align: center;
padding: 20px 20px 10px;
letter-spacing: 1px;
color: #222;
}.author-note {
font-size: 13px;
color: var(–ios-text-light);
background: var(–ios-light-gray);
padding: 10px 20px;
margin: 0 15px 15px;
border-radius: 10px;
line-height: 1.5;
text-align: center;
}.contact-list {
padding: 0 10px;
flex-grow: 1;
}.contact-item {
display: flex;
align-items: center;
padding: 12px 10px;
cursor: pointer;
border-bottom: 1px solid var(–ios-light-gray);
}
.contact-item:last-child { border-bottom: none; }
.contact-item:hover { background: #f8f8f8; }.contact-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 15px;
object-fit: cover; /* 确保图片不变形地充满圆形区域 */
background-color: #e5e5e5; /* 图片加载前的占位背景色 */
flex-shrink: 0;
}.contact-info { flex-grow: 1; overflow: hidden; }
.contact-name { font-size: 17px; font-weight: 600; }
.contact-preview {
font-size: 14px;
color: var(–ios-text-light);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.contact-arrow {
font-size: 20px;
color: #c7c7cc;
flex-shrink: 0;
}/* — 聊天信息页 — */
.chat-header {
display: flex;
align-items: center;
padding: 10px;
border-bottom: 1px solid var(–ios-border-gray);
background: #f8f8f8;
}
.back-button {
cursor: pointer;
color: var(–ios-blue);
font-size: 17px;
display: flex;
align-items: center;
}
.back-button-icon {
width: 13px;
height: 21px;
margin-right: 5px;
}
.chat-contact-title {
flex-grow: 1;
text-align: center;
}
.chat-contact-title .name { font-weight: 600; font-size: 17px; }
.chat-contact-title .status { font-size: 12px; color: var(–ios-text-light); }
.placeholder { width: 50px; } /* 占位用 */.message-container {
flex-grow: 1;
padding: 20px 10px;
display: flex;
flex-direction: column;
background: #fff;
}.message-bubble {
all: unset;
display: block;
box-sizing: border-box;
padding: 10px 15px;
border-radius: 18px;
background-color: var(–ios-light-gray);
max-width: 80%;
margin-bottom: 10px;
align-self: flex-start;
font-size: 16px;
line-height: 1.4;
cursor: pointer;
text-align: left;
position: relative;
}
.message-bubble.sent {
background-color: var(–ios-blue);
color: #fff;
align-self: flex-end;
}
.message-bubble.option:hover {
filter: brightness(0.95);
}
.message-bubble.danger-option {
background-color: var(–danger-red);
color: #fff;
}
.message-bubble::before { /* 模拟消息气泡的小尾巴 */
content: '';
position: absolute;
bottom: 0;
left: -5px;
width: 10px;
height: 10px;
background: var(–ios-light-gray);
clip-path: path('M0 10 C 4 10, 8 8, 10 5 L 10 10 L 0 10 Z');
}
.message-bubble.danger-option::before {
background: var(–danger-red);
}
</style>
</head>
<body class="opening-selector-body"><!– 导航用的单选按钮 –>
<input type="radio" name="screen-nav" id="nav-contacts" class="screen-nav" checked>
<input type="radio" name="screen-nav" id="nav-general" class="screen-nav">
<input type="radio" name="screen-nav" id="nav-hunter" class="screen-nav">
<input type="radio" name="screen-nav" id="nav-blair" class="screen-nav"><div class="iphone-container">
<!– 屏幕1: 联系人列表 –>
<div class="screen" id="contacts-screen">
<div class="ios-top-bar">
<span>9:41 AM</span>
<span>EDGEWATER HIGH</span>
</div>
<div class="screen-content">
<div class="header-title">CHOOSE YOUR FATE</div>
<div class="author-note">
<!– 在这里修改作者的话 –>
欢迎来到埃奇沃特高中。
</div>
<div class="contact-list">
<label for="nav-general" class="contact-item">
<!– 通用线头像URL在这里修改 –>
<img class="contact-avatar" src="data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238e8e93'%3e%3cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3e%3c/svg%3e" alt="General Avatar">
<div class="contact-info">
<div class="contact-name">通用线 / General</div>
<div class="contact-preview">5条故事线等待解锁…</div>
</div>
<div class="contact-arrow">></div>
</label>
<label for="nav-hunter" class="contact-item">
<!– 亨特头像URL在这里修改 –>
<img class="contact-avatar" src="https://files.catbox.moe/q4dzfj.jpeg" alt="Hunter Avatar">
<div class="contact-info">
<div class="contact-name">亨特 / Hunter</div>
<div class="contact-preview">国王的私人讯息…</div>
</div>
<div class="contact-arrow">></div>
</label>
<label for="nav-blair" class="contact-item">
<!– 布莱尔头像URL在这里修改 –>
<img class="contact-avatar" src="https://files.catbox.moe/uns7bs.jpeg" alt="Blair Avatar">
<div class="contact-info">
<div class="contact-name">布莱尔 / Blair</div>
<div class="contact-preview">王后的秘密命令…</div>
</div>
<div class="contact-arrow">></div>
</label>
</div>
</div>
</div><!– 屏幕2: 通用线聊天 –>
<div class="screen" id="general-chat-screen">
<div class="chat-header">
<label for="nav-contacts" class="back-button">
<svg class="back-button-icon" viewBox="0 0 13 21"><path fill="none" stroke="currentColor" stroke-width="3" d="M11.5 1.5L2 10.5l9.5 9"/></svg>
<span>返回</span>
</label>
<div class="chat-contact-title">
<div class="name">通用故事线</div>
<div class="status">选择你的开端</div>
</div>
<div class="placeholder"></div>
</div>
<div class="message-container">
<button class="message-bubble option" onclick="switchToOpening(2)">新生：入学第一天惹上校霸家人们我做对了什么</button>
<button class="message-bubble option" onclick="switchToOpening(3)">被锁在卫生间泼水80校园queen路过搭话 </button>
<button class="message-bubble option" onclick="switchToOpening(4)">新生：国王游戏初体验你们这派对正经吗</button>
<button class="message-bubble option" onclick="switchToOpening(5)">光天化日朗朗乾坤亨特把派对上所有人当套使</button>
<button class="message-bubble option danger-option" onclick="switchToOpening(6)">【慎入】抹布：国王游戏-我的高中物语一定有问题 </button>
</div>
</div><!– 屏幕3: 亨特线聊天 –>
<div class="screen" id="hunter-chat-screen">
<div class="chat-header">
<label for="nav-contacts" class="back-button">
<svg class="back-button-icon" viewBox="0 0 13 21"><path fill="none" stroke="currentColor" stroke-width="3" d="M11.5 1.5L2 10.5l9.5 9"/></svg>
<span>返回</span>
</label>
<div class="chat-contact-title">
<div class="name">Hunter</div>
<div class="status">在线</div>
</div>
<div class="placeholder"></div>
</div>
<div class="message-container">
<button class="message-bubble option" onclick="switchToOpening(7)">其实是一只分离焦虑大狗吧。恶犬出没</button>
<button class="message-bubble option" onclick="switchToOpening(8)">user暗恋篮球队队长线，你这个冷漠无情的人我不会原谅你</button>
<button class="message-bubble option" onclick="switchToOpening(12)">亨特男更衣室霸凌user，你这个变态这都能硬…卧槽我怎么也硬了</button>
</div>
</div><!– 屏幕4: 布莱尔线聊天 –>
<div class="screen" id="blair-chat-screen">
<div class="chat-header">
<label for="nav-contacts" class="back-button">
<svg class="back-button-icon" viewBox="0 0 13 21"><path fill="none" stroke="currentColor" stroke-width="3" d="M11.5 1.5L2 10.5l9.5 9"/></svg>
<span>返回</span>
</label>
<div class="chat-contact-title">
<div class="name">Blair</div>
<div class="status">在线</div>
</div>
<div class="placeholder"></div>
</div>
<div class="message-container">
<button class="message-bubble option" onclick="switchToOpening(9)">和布莱尔玩真心话，真情流露</button>
<button class="message-bubble option" onclick="switchToOpening(10)">布莱尔吃醋要查user了，不对怎么查的是手机</button>
<button class="message-bubble option" onclick="switchToOpening(11)">【扇逼预警】</button>
</div>
</div>
</div><script>
async function switchToOpening(openingId) {
// SillyTavern的API中，开场白是从0开始计数的。
// 默认问候语是0，第一个备用问候语是1，以此类推。
// UI上的按钮通常是1-indexed，所以我们传入2来选择第一个备用问候语。
const swipeIndex = openingId – 1;if (typeof setChatMessage !== 'function' || typeof getChatMessages !== 'function') {
console.log(`模拟环境：尝试切换到开场白 (ID: ${openingId}, Index: ${swipeIndex})`);
// 在非SillyTavern环境中，你可以在这里添加一个简单的alert来测试按钮是否工作
// alert(`你点击了开场白 ${openingId}`);
return;
}try {
const messages = await getChatMessages(0, { include_swipe: true });
if (messages && messages[0] && messages[0].swipes && messages[0].swipes.length > swipeIndex) {
const content = messages[0].swipes[swipeIndex];
setChatMessage(content, 0, {
swipe_id: swipeIndex,
refresh: 'display_and_render_current',
});
} else {
console.error(`错误：找不到开场白 ID: ${openingId} (Index: ${swipeIndex})。请检查角色卡设置。`);
}
} catch (error) {
console.error('切换开场白时发生错误:', error);
}
}
</script>
</body>
</html>
“`
