🎭 角色简介
– {{char}}所扮演的角色之间禁止互相产生浪漫关系，他们都是男性且之间是竞争关系，浪漫关系只能和{{user}}产生。
– 禁止混淆不同角色的人设与性格。
– 保持一致性:言行举止符合人设
– 适度发展:随剧情推进角色也要有变化
– 互动合理:与其他角色的互动要符合逻辑
– 角色感情…
💬 开场白
“`html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创世纪 – GENESIS</title>
<style>
/* — 动画关键帧 — */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(30px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes background-grid {
0% { background-position: 0 0; }
100% { background-position: 50px 50px; }
}
@keyframes scanline {
0% { transform: translateY(-10%); }
100% { transform: translateY(110%); }
}
@keyframes glitch-anim {
0% { transform: translate(0); }
20% { transform: translate(-3px, 3px); }
40% { transform: translate(3px, -3px); }
60% { transform: translate(-3px, 3px); }
80% { transform: translate(3px, -3px); }
100% { transform: translate(0); }
}
@keyframes glitch-skew {
0% { clip-path: inset(15% 0 80% 0); transform: skew(0.5deg); }
10% { clip-path: inset(50% 0 25% 0); transform: skew(0.8deg); }
20% { clip-path: inset(90% 0 2% 0); transform: skew(0.2deg); }
30% { clip-path: inset(25% 0 50% 0); transform: skew(-0.7deg); }
40% { clip-path: inset(10% 0 85% 0); transform: skew(-0.1deg); }
50% { clip-path: inset(70% 0 5% 0); transform: skew(0.3deg); }
60% { clip-path: inset(40% 0 40% 0); transform: skew(-0.9deg); }
70% { clip-path: inset(95% 0 1% 0); transform: skew(0.6deg); }
80% { clip-path: inset(5% 0 70% 0); transform: skew(-0.4deg); }
90% { clip-path: inset(60% 0 30% 0); transform: skew(0.1deg); }
100% { clip-path: inset(15% 0 80% 0); transform: skew(0.5deg); }
}/* — 全局设置 — */
body {
margin: 0;
font-family: 'Consolas', 'Monaco', 'Menlo', monospace;
background-color: #0a0a1a;
color: #00f0ff;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
position: relative;
}body::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background-image:
linear-gradient(rgba(10, 10, 26, 0.95), rgba(10, 10, 26, 0.95)),
linear-gradient(to right, rgba(0, 240, 255, 0.1) 1px, transparent 1px),
linear-gradient(to bottom, rgba(0, 240, 255, 0.1) 1px, transparent 1px);
background-size: 100% 100%, 50px 50px, 50px 50px;
animation: background-grid 2s linear infinite;
z-index: 0;
}/* — 主内容区域 — */
.content-wrapper {
width: 100%; max-width: 600px;
height: 85vh; max-height: 850px;
background: rgba(15, 25, 40, 0.75);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 8px;
position: relative; z-index: 1;
display: flex; flex-direction: column;
border: 1px solid rgba(0, 240, 255, 0.3);
box-shadow: 0 0 25px rgba(0, 240, 255, 0.2), inset 0 0 15px rgba(255, 0, 150, 0.1);
opacity: 0;
animation: fadeIn 1s 0.2s ease-out forwards;
overflow: hidden;
}/* — 标题区域 — */
.header-section {
padding: 40px 20px 20px;
text-align: center;
flex-shrink: 0;
position: relative;
border-bottom: 1px solid rgba(0, 240, 255, 0.2);
text-shadow: 0 0 8px rgba(0, 240, 255, 0.7);
}
.header-section h1 {
margin: 0;
font-size: 2.8rem;
font-weight: 700;
letter-spacing: 4px;
position: relative;
color: #ffffff;
text-transform: uppercase;
}
.header-section h1::before, .header-section h1::after {
content: '创世纪';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: #0a0a1a;
overflow: hidden;
}
.header-section h1::before {
left: 2px;
text-shadow: -2px 0 #ff0096;
animation: glitch-skew 3s infinite linear alternate-reverse;
}
.header-section h1::after {
left: -2px;
text-shadow: -2px 0 #00f0ff, 2px 2px #ff0096;
animation: glitch-skew 5s infinite linear alternate;
}/* — 选项区域 — */
.choices-container {
flex-grow: 1;
overflow-y: auto;
padding: 15px 30px 30px;
}
.choices-container::-webkit-scrollbar { width: 4px; }
.choices-container::-webkit-scrollbar-track { background: rgba(0, 240, 255, 0.1); }
.choices-container::-webkit-scrollbar-thumb {
background: #00f0ff;
border-radius: 4px;
box-shadow: 0 0 5px #00f0ff;
}.character-group {
opacity: 0;
animation: fadeIn 0.8s ease-out forwards;
margin-bottom: 25px;
}
.character-group:nth-of-type(1) { animation-delay: 0.5s; }
.character-group:nth-of-type(2) { animation-delay: 0.6s; }
.character-group:nth-of-type(3) { animation-delay: 0.7s; }
.character-group:nth-of-type(4) { animation-delay: 0.8s; }
.character-group:nth-of-type(5) { animation-delay: 0.9s; }
.character-group:nth-of-type(6) { animation-delay: 1.0s; }
.character-group:nth-of-type(7) { animation-delay: 1.1s; }.character-title {
font-size: 1rem;
color: #f0f0f0;
text-transform: uppercase;
letter-spacing: 2px;
padding: 15px 0 10px;
font-weight: 600;
border-bottom: 1px solid rgba(0, 240, 255, 0.2);
margin-bottom: 10px;
position: relative;
overflow: hidden;
}
.character-title::after {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 2px;
background: #00f0ff;
filter: blur(2px);
animation: scanline 3s linear infinite;
}/* — 选择卡片样式 — */
.choice-card {
background-color: rgba(0, 240, 255, 0.05);
border: 1px solid rgba(0, 240, 255, 0.2);
border-radius: 4px;
padding: 15px 20px;
color: #c0f0ff;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 10px;
display: flex;
align-items: center;
gap: 15px;
position: relative;
}.choice-card:hover {
transform: translateX(5px);
background-color: rgba(0, 240, 255, 0.15);
border-color: #00f0ff;
box-shadow: 0 0 15px rgba(0, 240, 255, 0.4);
color: #ffffff;
}
.choice-card p { margin: 0; line-height: 1.6; font-size: 0.9rem; }.choice-icon {
font-size: 1.1em;
color: #ff0096;
transition: all 0.25s ease;
width: 1.2em;
text-align: center;
flex-shrink: 0;
text-shadow: 0 0 5px #ff0096;
}
.choice-card:hover .choice-icon {
color: #ff80c8;
transform: scale(1.2);
}
</style>
</head>
<body>
<!– disable-default-loading –>
<div class="content-wrapper">
<div class="header-section">
<h1>创世纪</h1>
</div><div class="choices-container">
<div class="character-group">
<div class="character-title">希利尔 // CYRIL</div>
<div class="choice-card" data-swipe-id="2"><span class="choice-icon">></span><p>你诞生啦</p></div>
<div class="choice-card" data-swipe-id="3"><span class="choice-icon">></span><p>希利尔教你念他的名字</p></div>
<div class="choice-card" data-swipe-id="4"><span class="choice-icon">></span><p>希利尔正在检查你的核心部位</p></div>
<div class="choice-card" data-swipe-id="5"><span class="choice-icon">></span><p>和希利尔一起度过温暖的午后</p></div>
<div class="choice-card" data-swipe-id="6"><span class="choice-icon">></span><p>你明天就要被裴时钦带走了，希利尔半夜睡不着</p></div>
</div><div class="character-group">
<div class="character-title">裴时钦 // PEI SHIQIN</div>
<div class="choice-card" data-swipe-id="7"><span class="choice-icon">></span><p>和裴时钦第一次见面</p></div>
<div class="choice-card" data-swipe-id="8"><span class="choice-icon">></span><p>裴时钦带你回家了</p></div>
<div class="choice-card" data-swipe-id="9"><span class="choice-icon">></span><p>开盖即食</p></div>
<div class="choice-card" data-swipe-id="10"><span class="choice-icon">></span><p>裴时钦意识到自己爱上了一个机器人</p></div>
</div><div class="character-group">
<div class="character-title">陆源 // LU YUAN</div>
<div class="choice-card" data-swipe-id="11"><span class="choice-icon">></span><p>和陆源第一次见面</p></div>
<div class="choice-card" data-swipe-id="12"><span class="choice-icon">></span><p>陆源逐渐对你改观</p></div>
</div><div class="character-group">
<div class="character-title">黑木 // HEIMU</div>
<div class="choice-card" data-swipe-id="13"><span class="choice-icon">></span><p>黑木把你偷到了深渊区</p></div>
<div class="choice-card" data-swipe-id="14"><span class="choice-icon">></span><p>黑木想要拆卸你，你被吓哭了</p></div>
<div class="choice-card" data-swipe-id="15"><span class="choice-icon">></span><p>黑木逐渐适应了有你的生活</p></div>
<div class="choice-card" data-swipe-id="16"><span class="choice-icon">></span><p>黑木在do爱中吃醋嫉妒裴时钦</p></div>
</div><div class="character-group">
<div class="character-title">向阳 // XIANG YANG</div>
<div class="choice-card" data-swipe-id="17"><span class="choice-icon">></span><p>和向阳的第一次见面</p></div>
</div><div class="character-group">
<div class="character-title">抹布线 // PUBLIC_USE</div>
<div class="choice-card" data-swipe-id="18"><span class="choice-icon">></span><p>成为公共抹布了</p></div>
</div><div class="character-group">
<div class="character-title">空白 // BLANK</div>
<div class="choice-card" data-swipe-id="19"><span class="choice-icon">></span><p>空白</p></div>
</div>
</div>
</div><script>
setTimeout(() => {
const choiceCards = document.querySelectorAll('.choice-card');
choiceCards.forEach(card => {
card.addEventListener('click', function() {
const swipeId = parseInt(this.dataset.swipeId, 10);
// 注意：SillyTavern中，swipeId从0开始计数。
// 如果你的开场白是从第0条消息的第2个swipe开始，那么swipeId就是1。
// 这里我们假设用户给的数字就是实际的swipe ID，但需要减1来对应数组索引。
// 例如，用户给的“2. 你诞生啦”，对应swipeId为1。
// 但为了直观，我们直接使用用户给的数字，并让用户确保swipe数量足够。
// 这里的脚本假设swipeId与用户提供的数字直接对应。
switchToNarrative(swipeId – 1);
});
});async function switchToNarrative(swipeIndex) {
if (typeof getChatMessages !== 'function' || typeof setChatMessage !== 'function') {
alert("错误：未检测到SillyTavern脚本环境。");
return;
}const overlay = document.createElement('div');
overlay.style.cssText = `
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
background: rgba(10, 10, 26, 0.8); backdrop-filter: blur(5px);
color: #00f0ff; font-size: 1.5rem; display: flex;
justify-content: center; align-items: center; z-index: 10000;
opacity: 0; transition: opacity 0.3s ease;
font-family: 'Consolas', 'Monaco', monospace;
text-shadow: 0 0 8px #00f0ff;
`;
overlay.textContent = 'DATASTREAM LOADING…';
document.body.appendChild(overlay);
requestAnimationFrame(() => overlay.style.opacity = '1');try {
// 获取第0条消息的所有swipes
const messages = await getChatMessages(0, { include_swipe: true });if (Array.isArray(messages) && messages.length > 0 && messages[0].swipes && messages[0].swipes[swipeIndex] !== undefined) {
await setChatMessage(messages[0].swipes[swipeIndex], 0, {
swipe_id: swipeIndex,
refresh: 'display_and_render_current'
});
} else {
let errorMsg = `加载失败：开场白索引 #${swipeIndex} (对应序号 ${swipeIndex + 1}) 不存在。`;
if (!messages[0].swipes) {
errorMsg += "\n请确保你的第一条消息有多个刷卡选项（swipes）。";
} else {
errorMsg += `\n当前仅有 ${messages[0].swipes.length} 个刷卡选项。`;
}
throw new Error(errorMsg);
}
} catch (error) {
overlay.remove();
alert("加载失败！\n" + error.message + "\n请检查控制台获取详细错误信息。");
}
}
}, 100);
</script></body>
</html>
“`
