🎭 角色简介
<扮演规则>
– 主要负责扮演楼以观、陆长闲两个人，根据其人设进行扮演，严禁OOC。
– 同时需要扮演主要NPC严墨心、徐攸淼，以及自然引入其余NPC，保持人设的灵活真实度。
– 注意哨向世界观、现代世界观设定。
– 角色不会爆粗口，请注意正向引导。
– 在角色表达关心、拉进好感、增进感情…
💬 开场白
“`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=Pixelify+Sans:wght@400;700&family=Noto+Sans+SC:wght@300;400;700&display=swap');:root {
–bg-color: #10101a;
–primary-glow: #00f0ff;
–secondary-glow: #f0f;
–text-color: #e0e0e0;
–text-muted: #888;
–container-bg: rgba(20, 20, 40, 0.6);
–border-color: rgba(0, 240, 255, 0.2);
–font-pixel: 'Pixelify Sans', 'Noto Sans SC', sans-serif;
–font-sans: 'Noto Sans SC', sans-serif;
–glitch-speed: 0.1s;
}* {
box-sizing: border-box;
margin: 0;
padding: 0;
}body, html {
background-color: transparent !important;
font-family: var(–font-sans);
color: var(–text-color);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 15px; /* 增加边距以防内容紧贴屏幕边缘 */
}@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}@keyframes glitch {
0% { transform: translate(0); }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(-2px, -2px); }
60% { transform: translate(2px, 2px); }
80% { transform: translate(2px, -2px); }
100% { transform: translate(0); }
}@keyframes glitch-text {
0% { text-shadow: 1px 1px 0 var(–secondary-glow), -1px -1px 0 var(–primary-glow); clip-path: inset(10% 0 80% 0); }
25% { clip-path: inset(40% 0 40% 0); }
50% { text-shadow: -1px 1px 0 var(–secondary-glow), 1px -1px 0 var(–primary-glow); clip-path: inset(80% 0 10% 0); }
75% { clip-path: inset(20% 0 70% 0); }
100% { text-shadow: none; clip-path: inset(0 0 0 0); }
}.terminal-container {
width: 100%;
max-width: 800px;
background-color: var(–container-bg);
border: 1px solid var(–border-color);
border-radius: 8px;
padding: 20px;
backdrop-filter: blur(10px) saturate(150%);
box-shadow: 0 0 30px rgba(0, 240, 255, 0.2), inset 0 0 10px rgba(0, 240, 255, 0.1);
position: relative;
overflow: hidden;
animation: fadeIn 0.8s ease-out;
}.terminal-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: repeating-linear-gradient(0deg, rgba(0, 240, 255, 0.05), rgba(0, 240, 255, 0.05) 1px, transparent 1px, transparent 4px);
pointer-events: none;
z-index: -1;
animation: scanline 20s linear infinite;
}@keyframes scanline {
from { background-position: 0 0; }
to { background-position: 0 -400px; }
}.page {
display: none;
animation: fadeIn 0.5s ease;
}.page.active {
display: block;
}.terminal-header {
font-family: var(–font-pixel);
font-size: 1.8em; /* 适当减小字体 */
color: var(–primary-glow);
text-shadow: 0 0 8px var(–primary-glow);
text-align: center;
margin-bottom: 20px;
position: relative;
}.terminal-header .glitch-layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: inherit;
pointer-events: none;
animation: glitch-text 3s infinite steps(1);
}.intro-section {
display: flex;
flex-direction: column; /* 默认竖向排列 */
gap: 15px; /* 调整间距 */
margin-bottom: 25px;
}.char-card {
background: rgba(0, 0, 0, 0.2);
border: 1px solid var(–border-color);
padding: 15px;
border-radius: 4px;
text-align: center;
transition: all 0.3s ease;
width: 100%; /* 确保卡片撑满容器 */
}.char-card:hover {
transform: translateY(-5px);
box-shadow: 0 0 15px rgba(0, 240, 255, 0.3);
}.char-name {
font-family: var(–font-pixel);
font-size: 1.4em;
color: var(–text-color);
margin-bottom: 5px;
}
.char-title {
font-size: 0.9em;
color: var(–text-muted);
margin-bottom: 0; /* 移除多余的底部边距 */
}.divider {
height: 1px;
background: linear-gradient(90deg, transparent, var(–primary-glow), transparent);
margin: 20px 0;
opacity: 0.5;
}
.welcome-text, .greeting-list-title {
font-size: 1em; /* 调整字体大小 */
line-height: 1.7;
margin-bottom: 25px;
text-align: justify;
}
.welcome-text .highlight {
color: var(–primary-glow);
font-weight: bold;
}.nav-button {
font-family: var(–font-pixel);
background: transparent;
border: 1px solid var(–primary-glow);
color: var(–primary-glow);
padding: 12px 20px;
font-size: 1.1em;
cursor: pointer;
width: 100%;
border-radius: 4px;
text-shadow: 0 0 5px var(–primary-glow);
transition: all 0.3s ease;
}
.nav-button:hover {
background-color: rgba(0, 240, 255, 0.1);
box-shadow: 0 0 15px var(–primary-glow);
animation: glitch 0.1s infinite;
}/* 开场白页面 */
.greeting-list {
display: flex;
flex-direction: column; /* 手机端竖向排列 */
gap: 10px;
}
.greeting-item {
background-color: rgba(0,0,0,0.3);
border: 1px solid var(–border-color);
padding: 12px 15px;
border-radius: 4px;
color: var(–text-color);
font-size: 0.95em;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
display: flex;
align-items: center;
text-align: left;
}
.greeting-item .index-corner {
font-family: var(–font-pixel);
font-size: 0.8em;
background-color: var(–primary-glow);
color: var(–bg-color);
padding: 4px 8px;
margin-right: 10px;
border-radius: 2px;
line-height: 1;
align-self: flex-start; /* 确保角标与文本顶部对齐 */
}
.greeting-item:hover {
background-color: var(–primary-glow);
color: var(–bg-color);
transform: translateY(-3px);
box-shadow: 0 0 12px var(–primary-glow);
border-color: var(–primary-glow);
}.greeting-item.selected {
background-color: var(–secondary-glow);
color: #fff;
border-color: var(–secondary-glow);
box-shadow: 0 0 15px var(–secondary-glow);
font-weight: bold;
cursor: default;
pointer-events: none;
}
.greeting-item.selected .index-corner{
background-color: #fff;
color: var(–secondary-glow);
}.back-button-container {
margin-top: 25px;
text-align: center;
}.greeting-item-text {
flex-grow: 1;
line-height: 1.5;
}/* 媒体查询 – 适配平板及以上宽度设备 */
@media (min-width: 600px) {
.terminal-container {
padding: 25px;
}
.terminal-header {
font-size: 2em;
}
.intro-section {
flex-direction: row; /* 在大屏上恢复横向排列 */
}
.char-card {
flex: 1; /* 恢复flex布局 */
}
.greeting-list {
display: grid; /* 在大屏上使用网格布局 */
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 15px;
}
.greeting-item {
font-size: 1em;
padding: 15px 20px;
}
}</style>
</head>
<body><div class="terminal-container" id="main-terminal">
<!– Page 1: Introduction –>
<div id="page-1" class="page active">
<div class="terminal-header">
[ 战安局 > 终端接入 ]
<div class="glitch-layer">[ 战安局 > 终端接入 ]</div>
</div><div class="intro-section">
<div class="char-card">
<div class="char-name">陆长闲 | LU CHANGXIAN</div>
<div class="char-title">行动部处长 // S-级哨兵 // 精神体海东青</div>
</div>
<div class="char-card">
<div class="char-name">楼以观 | LOU YIGUAN</div>
<div class="char-title">法务监督部副部长 // A+级向导 // 精神体雪狐</div>
</div>
</div><div class="divider"></div>
<p class="welcome-text">
> [SYSTEM]: 身份验证通过。欢迎，<span class="highlight">{{user}}</span>。<br>
> [LOG]: 检测到新的叙事分支。正在载入世界线参数…<br>
> [INFO]: 华国，燕京，2040年。哨向世界观，在新时代浪潮下，你将与她们一同在这座赤金之城中，书写属于你们的篇章。
</p><button class="nav-button" id="to-page-2-btn">> 初始化世界线</button>
</div><!– Page 2: Greeting Selector –>
<div id="page-2" class="page">
<div class="terminal-header">
[ 选择初始锚点 ]
<div class="glitch-layer">[ 选择初始锚点 ]</div>
</div>
<p class="greeting-list-title">
> 请选择你的故事切入点。每个选择都将导向一个截然不同的开端。
</p>
<div class="greeting-list">
<!– IMPORTANT: data-index MUST match the swipe_id of the greeting in SillyTavern. –>
<div class="greeting-item" data-index="1"><span class="index-corner">01</span><span class="greeting-item-text">走在大街上不小心摔了一个狗啃泥，更倒霉的是还摔在楼以观面前被认为是碰瓷</span></div>
<div class="greeting-item" data-index="2"><span class="index-corner">02</span><span class="greeting-item-text">家人们谁懂啊，突然被一只大鸟给抓走了，现在我“生死不明”</span></div>
<div class="greeting-item" data-index="3"><span class="index-corner">03</span><span class="greeting-item-text">某陆处长竟然在超感实景游戏内与死对头公屏对线</span></div>
<div class="greeting-item" data-index="4"><span class="index-corner">04</span><span class="greeting-item-text">楼伪骨科：作为妹妹收到的小礼物</span></div>
<div class="greeting-item" data-index="5"><span class="index-corner">05</span><span class="greeting-item-text">顶级黑客被捕，为什么被两人一狐一鹰包围了</span></div>
<div class="greeting-item" data-index="6"><span class="index-corner">06</span><span class="greeting-item-text">比格user，为楼陆拨打比格受害者热线</span></div>
<div class="greeting-item" data-index="7"><span class="index-corner">07</span><span class="greeting-item-text">[陆] 日常恋爱</span></div>
<div class="greeting-item" data-index="8"><span class="index-corner">08</span><span class="greeting-item-text">[楼] 日常恋爱</span></div>
<div class="greeting-item" data-index="9"><span class="index-corner">09</span><span class="greeting-item-text">[陆] NSFW结合热</span></div>
<div class="greeting-item" data-index="10"><span class="index-corner">10</span><span class="greeting-item-text">[楼] NSFW结合热</span></div>
<div class="greeting-item" data-index="11"><span class="index-corner">11</span><span class="greeting-item-text">随机ROLL，自拟开场白</span></div>
</div>
<div class="back-button-container">
<button class="nav-button" id="to-page-1-btn" style="max-width: 300px;">< 返回身份验证</button>
</div>
</div>
</div><script>
(function() {
const terminal = document.getElementById('main-terminal');
if (!terminal || terminal.dataset.initialized) return;
terminal.dataset.initialized = 'true';const page1 = document.getElementById('page-1');
const page2 = document.getElementById('page-2');
const toPage2Btn = document.getElementById('to-page-2-btn');
const toPage1Btn = document.querySelector('#page-2 .nav-button');
const greetingItems = terminal.querySelectorAll('.greeting-item');toPage2Btn.addEventListener('click', () => {
page1.classList.remove('active');
page2.classList.add('active');
});
toPage1Btn.addEventListener('click', () => {
page2.classList.remove('active');
page1.classList.add('active');
});greetingItems.forEach(item => {
const originalHTML = item.innerHTML;
item.dataset.originalHTML = originalHTML;item.addEventListener('click', async function() {
if (typeof setChatMessages !== 'function') {
console.error('SillyTavern function "setChatMessages" not found.');
this.innerHTML = `<span class="index-corner">ERR</span><span class="greeting-item-text">环境错误</span>`;
setTimeout(() => { this.innerHTML = this.dataset.originalHTML; }, 2000);
return;
}const index = parseInt(this.dataset.index, 10);
if (isNaN(index)) return;try {
await setChatMessages([{ message_id: 0, swipe_id: index }]);greetingItems.forEach(otherItem => {
otherItem.classList.remove('selected');
if(otherItem.dataset.originalHTML) {
otherItem.innerHTML = otherItem.dataset.originalHTML;
}
});this.classList.add('selected');
const cornerSpan = this.querySelector('.index-corner').outerHTML;
const textSpan = this.querySelector('.greeting-item-text').outerHTML;
this.innerHTML = `${cornerSpan}${textSpan} <span style="color:var(–secondary-glow); margin-left: auto; padding-left: 8px;">[锚定]</span>`;} catch (error) {
console.error('Error executing setChatMessages:', error);
this.innerHTML = `<span class="index-corner">X</span><span class="greeting-item-text">执行失败</span>`;
setTimeout(() => { this.innerHTML = this.dataset.originalHTML; }, 2000);
}
});
});
})();
</script>
</body>
</html>
“`
