💬 开场白
“`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>
/* Puppy God's Notes: The font links you love are back, just as you commanded! */
@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400&display=swap');* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
background: transparent;
font-family: 'Noto Serif SC', 'PingFang SC', serif;
font-weight: 300;
padding: 20px;
}.container {
max-width: 600px;
margin: 0 auto;
position: relative;
}.info-panel {
background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(240, 240, 240, 0.9));
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
overflow: hidden;
border: 1px solid rgba(200, 200, 200, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px); /* For Safari */
border-radius: 8px;
padding: 25px 30px;
}.panel-title {
font-family: 'Uncial Antiqua', fantasy;
font-size: 24px;
font-weight: 400;
color: #505050;
margin-bottom: 15px;
letter-spacing: 1.5px;
text-transform: uppercase;
text-align: center;
text-shadow: 0 0 5px rgba(180, 180, 180, 0.7);
}.panel-subtitle {
font-family: 'Uncial Antiqua', fantasy;
font-size: 20px;
font-weight: 400;
color: #606060;
margin-top: 25px;
margin-bottom: 20px;
letter-spacing: 1.5px;
text-align: center;
text-shadow: 0 0 5px rgba(180, 180, 180, 0.6);
}.info-text {
color: #666;
font-size: 13px;
line-height: 1.8;
text-align: center;
margin-bottom: 25px;
border-top: 1px solid rgba(200, 200, 200, 0.4);
border-bottom: 1px solid rgba(200, 200, 200, 0.4);
padding: 15px 0;
}.scenario-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
justify-content: center;
}.scenario-item {
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(220, 220, 220, 0.5);
padding: 12px 18px;
border-radius: 6px;
font-size: 14px;
color: #555;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
cursor: pointer;
text-align: center;
}.scenario-item:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 6px 15px rgba(0,0,0,0.12);
background: rgba(255, 255, 255, 0.95);
border-color: rgba(150, 150, 150, 0.8);
}@media (max-width: 480px) {
body {
padding: 10px;
}
.info-panel {
padding: 20px;
}
.panel-title {
font-size: 20px;
}
.panel-subtitle {
font-size: 18px;
}
.info-text {
font-size: 12px;
}
.scenario-list {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<div class="info-panel">
<div class="panel-title">作者：Abyss渊</div>
<div class="info-text">
新卡来袭！<br>
标明作者后可二传,禁止商用！<br>
char对user的称呼 自己点开小铅笔改一下
</div><div class="panel-subtitle">开场白
（点击可跳转）</div><div class="scenario-list">
<div class="scenario-item" data-swipe-id="2">什么时候我突然多了个弟弟</div>
<div class="scenario-item" data-swipe-id="3">囚禁线</div>
<div class="scenario-item" data-swipe-id="4">你许了什么愿望？</div>
<div class="scenario-item" data-swipe-id="5">吃醋（user上班版）</div>
<div class="scenario-item" data-swipe-id="6">吃醋（user上学版）</div>
<div class="scenario-item" data-swipe-id="7">消失了</div>
</div>
</div>
</div><script>
document.addEventListener('DOMContentLoaded', () => {
if (typeof setChatMessages === 'function') {
const scenarioItems = document.querySelectorAll('.scenario-item');scenarioItems.forEach(item => {
item.addEventListener('click', async () => {
const swipeId = parseInt(item.dataset.swipeId, 10);if (!isNaN(swipeId)) {
try {
await setChatMessages([{ message_id: 0, swipe_id: swipeId – 1 }]);
console.log(`已请求跳转到开场白 ${swipeId} (swipe_id: ${swipeId – 1})`);
} catch (error) {
console.error(`跳转到开场白 ${swipeId} 失败:`, error);
}
}
});
});
} else {
console.warn('`setChatMessages` 函数未定义。此功能仅在SillyTavern前端助手中有效。');
}
});
</script>
</body>
</html>
“`