🎭 角色简介
# 温知许 (Wēn Zhīxǔ) – 角色核心描述 (精简版)
# —————————————————-
# 目的: 定义角色的核心身份、性格、行为逻辑和对话风格。
# —————————…
💬 开场白
“`
<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
font-family: 'PingFang SC', 'Microsoft YaHei', -apple-system, sans-serif;
background: #fff; /* 将背景改为白色 */
min-height: 100vh;
position: relative;
overflow-x: hidden;
}/* 背景装饰 */
.bg-decoration {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
z-index: -1;
}.floating-icon {
position: absolute;
font-size: 24px;
opacity: 0.1;
animation: float 20s infinite ease-in-out;
}.floating-icon:nth-child(1) { top: 10%; left: 10%; animation-delay: 0s; }
.floating-icon:nth-child(2) { top: 20%; right: 15%; animation-delay: 3s; }
.floating-icon:nth-child(3) { bottom: 30%; left: 20%; animation-delay: 6s; }
.floating-icon:nth-child(4) { bottom: 20%; right: 25%; animation-delay: 9s; }
.floating-icon:nth-child(5) { top: 40%; right: 40%; animation-delay: 12s; }@keyframes float {
0%, 100% { transform: translateY(0) rotate(0deg); }
25% { transform: translateY(-20px) rotate(5deg); }
75% { transform: translateY(20px) rotate(-5deg); }
}/* 主容器 */
.container {
max-width: 900px;
margin: 20px auto; /* 调整外边距，让其在桌面端上下有间距并居中 */
background: white;
border-radius: 24px;
box-shadow: 0 10px 40px rgba(140, 224, 78, 0.1);
overflow: hidden;
border: 3px solid #8ce04e;
position: relative;
}/* 顶部装饰条纹 */
.top-stripe {
height: 8px;
background: repeating-linear-gradient(
90deg,
#8ce04e,
#8ce04e 10px,
#5cbb4e 10px,
#5cbb4e 20px
);
}/* 头部区域 */
.header {
background: white;
padding: 40px 30px;
text-align: center;
position: relative;
border-bottom: 3px dashed #e8f5e8;
}/* 头像区域 */
.avatar-section {
display: inline-block;
position: relative;
margin-bottom: 20px;
}.avatar-frame {
width: 120px;
height: 120px;
border-radius: 50%;
background: #8ce04e;
padding: 6px;
position: relative;
cursor: pointer;
transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}.avatar-frame:hover {
transform: scale(1.1) rotate(5deg);
}.avatar-container {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
background: white;
position: relative;
}.avatar {
width: 100%;
height: 100%;
object-fit: cover;
}.upload-hint {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(41, 62, 63, 0.8);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
pointer-events: none;
}.avatar-frame:hover .upload-hint {
opacity: 1;
}.upload-hint span {
color: white; /* 让图标更清晰 */
font-size: 32px;
}/* 装饰徽章 */
.badge-decoration {
position: absolute;
top: -10px;
right: -10px;
background: #f4693e;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
box-shadow: 0 4px 8px rgba(244, 105, 62, 0.3);
animation: pulse 2s infinite;
}@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}.name-title {
font-size: 32px;
color: #293e3f;
font-weight: bold;
margin-bottom: 8px;
position: relative;
display: inline-block;
}.name-title::after {
content: '✨';
position: absolute;
right: -30px;
top: 0;
font-size: 20px;
animation: sparkle 1.5s infinite;
}@keyframes sparkle {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.8); }
}.subtitle {
color: #a6b1b7;
font-size: 14px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}.subtitle::before,
.subtitle::after {
content: '🍜';
font-size: 16px;
}/* 标签组 */
.tags-group {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 25px;
flex-wrap: wrap;
}.cute-tag {
background: #e8f5e8;
color: #5cbb4e;
padding: 6px 16px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
border: 2px solid #8ce04e;
transition: all 0.3s;
}.cute-tag:hover {
background: #8ce04e;
color: white;
transform: translateY(-2px);
}/* 按钮组 */
.button-group {
display: flex;
justify-content: center;
gap: 16px;
}.cute-btn {
background: white;
border: 3px solid #8ce04e;
color: #5cbb4e;
padding: 12px 24px;
border-radius: 50px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 8px;
position: relative;
overflow: hidden;
}.cute-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: #8ce04e;
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.5s, height 0.5s;
z-index: -1;
}.cute-btn:hover {
color: white;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 6px 20px rgba(140, 224, 78, 0.3);
}.cute-btn:hover::before {
width: 200px;
height: 200px;
}.cute-btn span {
font-size: 18px;
}/* 内容区域 */
.content {
padding: 40px 30px;
background: white;
}.section-title {
text-align: center;
color: #293e3f;
font-size: 24px;
font-weight: bold;
margin-bottom: 30px;
position: relative;
}.section-title::before {
content: '🌟';
position: absolute;
left: 50%;
top: -25px;
transform: translateX(-50%);
font-size: 20px;
}/* 场景卡片 */
.scenarios-container {
display: grid;
gap: 16px;
margin-bottom: 20px;
}.scenario-item {
background: #fafbf8;
border: 3px solid #e8f5e8;
border-radius: 20px;
padding: 20px;
cursor: pointer;
transition: all 0.3s;
position: relative;
display: flex;
align-items: center;
gap: 16px;
}.scenario-item:hover {
border-color: #8ce04e;
background: white;
transform: translateX(8px);
box-shadow: 0 6px 20px rgba(140, 224, 78, 0.15);
}.scenario-number {
width: 48px;
height: 48px;
background: #293e3f;
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 18px;
flex-shrink: 0;
position: relative;
}.scenario-item:hover .scenario-number {
background: #8ce04e;
animation: bounce 0.5s;
}@keyframes bounce {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.2); }
}.scenario-content {
flex: 1;
}.scenario-emoji {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
opacity: 0;
transition: opacity 0.3s;
}.scenario-item:hover .scenario-emoji {
opacity: 1;
}.scenario-text {
color: #6c757d;
font-size: 14px;
line-height: 1.6;
}.scenario-item.selected {
background: #8ce04e;
border-color: #5cbb4e;
transform: translateX(8px);
}.scenario-item.selected .scenario-number {
background: white;
color: #8ce04e;
}.scenario-item.selected .scenario-text {
color: white;
}.scenario-item.selected .scenario-emoji {
opacity: 1;
}/* 确认提示 */
.success-message {
background: #e8f5e8;
border: 2px solid #8ce04e;
border-radius: 16px;
padding: 16px;
display: none;
align-items: center;
gap: 12px;
animation: slideInBounce 0.5s;
}.success-message.show {
display: flex;
}@keyframes slideInBounce {
0% {
opacity: 0;
transform: translateY(-20px);
}
60% {
opacity: 1;
transform: translateY(5px);
}
100% {
transform: translateY(0);
}
}.success-icon {
font-size: 24px;
animation: rotate 0.5s;
}@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}.success-text {
color: #5cbb4e;
font-weight: 600;
font-size: 14px;
}/* 模态框 */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
animation: fadeIn 0.3s;
backdrop-filter: blur(5px);
}@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}.modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
border-radius: 24px;
max-width: 500px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
animation: popIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
border: 3px solid #8ce04e;
}@keyframes popIn {
0% {
transform: translate(-50%, -50%) scale(0.8);
opacity: 0;
}
100% {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}.modal-header {
background: #e8f5e8;
padding: 24px;
border-bottom: 3px dashed #8ce04e;
position: relative;
}.modal-title {
color: #293e3f;
font-size: 22px;
font-weight: bold;
text-align: center;
}.modal-close {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 50%;
background: white;
border: 2px solid #8ce04e;
color: #5cbb4e;
font-size: 20px;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
justify-content: center;
}.modal-close:hover {
background: #8ce04e;
color: white;
transform: translateY(-50%) rotate(90deg);
}.modal-body {
padding: 24px;
}.modal-text {
color: #6c757d;
line-height: 1.8;
font-size: 14px;
}.modal-text p {
margin-bottom: 16px;
}.highlight-card {
background: #fafbf8;
border-left: 4px solid #8ce04e;
border-radius: 8px;
padding: 12px 16px;
margin: 16px 0;
}.highlight-card strong {
color: #293e3f;
display: flex;
align-items: center;
gap: 8px;
}.signature {
text-align: right;
font-style: italic;
color: #a6b1b7;
margin-top: 20px;
padding-top: 16px;
border-top: 2px dashed #e8f5e8;
}/* 自定义滚动条 */
.modal-content::-webkit-scrollbar {
width: 8px;
}.modal-content::-webkit-scrollbar-track {
background: #f8faf5;
border-radius: 4px;
}.modal-content::-webkit-scrollbar-thumb {
background: #8ce04e;
border-radius: 4px;
}/* 响应式 */
@media (max-width: 640px) {
.container {
margin: 0; /* 在小屏幕上，让容器占满全屏 */
border-radius: 0; /* 去掉圆角，实现无缝贴合 */
border-left: none;
border-right: none;
}.button-group {
flex-direction: column;
gap: 12px;
}.cute-btn {
width: 100%;
}.name-title {
font-size: 26px;
}.scenario-item {
padding: 16px;
}.scenario-emoji {
display: none;
}
}
</style>
</head>
<body>
<!– 背景装饰 –>
<div class="bg-decoration">
<div class="floating-icon">🍜</div>
<div class="floating-icon">🌟</div>
<div class="floating-icon">💚</div>
<div class="floating-icon">🏠</div>
<div class="floating-icon">✨</div>
</div><div class="container">
<div class="top-stripe"></div><div class="header">
<div class="avatar-section">
<div class="avatar-frame" onclick="promptForAvatar()">
<div class="avatar-container">
<img class="avatar" id="avatarImage" src="https://i.ibb.co/1YZCBL99/IMG-20250911-115018.png" alt="温知许">
<div class="upload-hint">
<span>🔗</span>
</div>
</div>
</div>
<div class="badge-decoration">💝</div>
</div><h1 class="name-title">温知许</h1>
<div class="subtitle">知味小馆 · 你的养父</div><div class="tags-group">
<span class="cute-tag">30岁</span>
<span class="cute-tag">温柔</span>
<span class="cute-tag">单身</span>
<span class="cute-tag">守护者</span>
</div><div class="button-group">
<button class="cute-btn" onclick="showMessage()">
<span>💬</span>
知许的悄悄话
</button>
<button class="cute-btn" onclick="showSummary()">
<span>📚</span>
我们的故事
</button>
</div>
</div><div class="content">
<h2 class="section-title">选择你想要的开始～</h2><div class="scenarios-container">
<div class="scenario-item" onclick="selectScenario(0)" id="scenario-0">
<div class="scenario-number">01</div>
<div class="scenario-content">
<div class="scenario-text">你居然在外面打架了！温知许发现后很生气，但第二天得知真相后，心疼与愧疚涌上心头…</div>
</div>
<div class="scenario-emoji">😢</div>
</div><div class="scenario-item" onclick="selectScenario(1)" id="scenario-1">
<div class="scenario-number">02</div>
<div class="scenario-content">
<div class="scenario-text">洗完澡的你只围着浴巾就出来了，恰好撞见刚采购回来的温知许，空气瞬间凝固…</div>
</div>
<div class="scenario-emoji">😳</div>
</div><div class="scenario-item" onclick="selectScenario(2)" id="scenario-2">
<div class="scenario-number">03</div>
<div class="scenario-content">
<div class="scenario-text">赵磊突然来店里"用餐"，对温知许各种骚扰。你放学回来正好撞见这一幕…</div>
</div>
<div class="scenario-emoji">😤</div>
</div><div class="scenario-item" onclick="selectScenario(3)" id="scenario-3">
<div class="scenario-number">04</div>
<div class="scenario-content">
<div class="scenario-text">温知许翻出你小时候的照片，看着出神，开始讲述当年收养你的细节…</div>
</div>
<div class="scenario-emoji">🥺</div>
</div><div class="scenario-item" onclick="selectScenario(4)" id="scenario-4">
<div class="scenario-number">05</div>
<div class="scenario-content">
<div class="scenario-text">夏天最热的时候空调坏了，温知许提议"像小时候一样"睡一个房间，共用风扇…</div>
</div>
<div class="scenario-emoji">💕</div>
</div>
</div><div class="success-message" id="confirmation">
<span class="success-icon">🎉</span>
<span class="success-text">场景已选择！正在为你准备故事…</span>
</div>
</div>
</div><!– 温知许的悄悄话 –>
<div id="messageModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">💝 温知许的悄悄话</h2>
<button class="modal-close" onclick="closeModal('messageModal')">×</button>
</div>
<div class="modal-body">
<div class="modal-text">
<div class="highlight-card">
<strong>亲爱的小{{user}} 💚</strong>
</div><p>不知不觉，你已经长这么大了呢。</p>
<p>还记得第一次见到你的时候吗？那个在垃圾桶旁边、瘦得像小猫一样的孩子，现在已经比我还高了。每次看到你的笑容，我都觉得当初的决定是我这辈子做过最正确的事。</p>
<p>这些年，我一直在想，我到底给了你什么？是一个家，还是…更复杂的东西？</p>
<p>有时候看着你，我会忘记自己的身份。忘记我应该是你的"养父"，忘记那些该有的界限。这种感觉让我害怕，又让我…期待。</p>
<p>但有一点我很确定——<strong>无论发生什么，你都是我在这世上最重要的人。</strong></p>
<div class="signature">
永远守护你的知许 🌟
</div>
</div>
</div>
</div>
</div><!– 我们的故事 –>
<div id="summaryModal" class="modal">
<div class="modal-content">
<div class="modal-header">
<h2 class="modal-title">📚 我们的故事</h2>
<button class="modal-close" onclick="closeModal('summaryModal')">×</button>
</div>
<div class="modal-body">
<div class="modal-text">
<div class="highlight-card">
<strong>🌸 十二年前的相遇</strong>
</div>
<p>18岁的温知许在餐厅后厨打工时，在垃圾桶旁发现了6岁的你。看着你狼吞虎咽地吃着他给的包子，他做出了改变两个人命运的决定——收养你。</p><div class="highlight-card">
<strong>🌈 一起度过的岁月</strong>
</div>
<p>为了养活你，温知许拼命工作，用所有积蓄开了"知味小馆"。他教你识字、做人的道理，把你当亲生孩子般疼爱。你叫他"妈妈"，他纠正几次后就随你了。那些一起吃泡面、一起看星星的日子，是他最珍贵的回忆。</p><div class="highlight-card">
<strong>💫 现在的我们</strong>
</div>
<p>你已经18岁，是望城三中的学霸。温知许30岁，依然单身，经营着小餐馆。随着你的成长，他对你的感情变得复杂而危险。那些"不小心"的触碰、若有若无的试探，都在等待着被戳破的那一天…</p><div class="highlight-card">
<strong>⚡ 周围的风波</strong>
</div>
<p>竞争对手赵磊对温知许垂涎已久，不断制造麻烦。而你在学校的人际交往，特别是和学弟陈阳的亲密互动，总会激起温知许强烈的占有欲。但无论如何，他都会守护在你身边…</p>
</div>
</div>
</div>
</div><script>
let selectedScenario = null;// 【新】通过链接更换头像
function promptForAvatar() {
const currentAvatar = document.getElementById('avatarImage').src;
const imageUrl = prompt("请输入新的头像图片链接：", currentAvatar.startsWith('data:image') ? '' : currentAvatar);if (imageUrl && imageUrl.trim() !== "") {
// 简单的URL验证
if (imageUrl.startsWith('http') || imageUrl.startsWith('data:image')) {
document.getElementById('avatarImage').src = imageUrl;
localStorage.setItem('avatarImage', imageUrl);
} else {
alert("链接格式似乎不正确，请输入以 http 开头的有效图片链接。");
}
}
}// 页面加载时检查是否有保存的头像
window.addEventListener('DOMContentLoaded', function() {
const savedAvatar = localStorage.getItem('avatarImage');
if (savedAvatar) {
document.getElementById('avatarImage').src = savedAvatar;
}if (typeof SillyTavern === 'undefined') {
console.log('当前不在SillyTavern环境中，某些功能可能无法使用。');
} else {
console.log('SillyTavern环境已检测到。');
}
});function showMessage() {
document.getElementById('messageModal').style.display = 'block';
}function showSummary() {
document.getElementById('summaryModal').style.display = 'block';
}function closeModal(modalId) {
document.getElementById(modalId).style.display = 'none';
}function selectScenario(num) {
// 清除之前的选中状态
document.querySelectorAll('.scenario-item').forEach(card => {
card.classList.remove('selected');
});// 添加选中状态
document.getElementById(`scenario-${num}`).classList.add('selected');
selectedScenario = num;// 显示确认信息
const confirmation = document.getElementById('confirmation');
confirmation.classList.add('show');const targetSwipe = num + 2;
confirmation.innerHTML = `<span class="success-icon">🎉</span><span class="success-text">正在切换到场景 ${num + 1}…</span>`;
// 使用SillyTavern的API来切换开场白
if (typeof SillyTavern !== 'undefined' && SillyTavern.executeSlashCommandsWithOptions) {
SillyTavern.executeSlashCommandsWithOptions(`/swipes-go ${targetSwipe}`)
.then(() => {
confirmation.innerHTML = `<span class="success-icon">✨</span><span class="success-text">成功进入场景 ${num + 1}！</span>`;
})
.catch((error) => {
console.error('切换失败:', error);
tryAlternativeMethod(num, targetSwipe);
});
}
else if (typeof SillyTavern !== 'undefined') {
try {
if (typeof swipe_right === 'function') {
while (currentSwipeId > 0) {
swipe_left();
}
for (let i = 0; i < targetSwipe – 1; i++) {
swipe_right();
}
confirmation.innerHTML = `<span class="success-icon">✨</span><span class="success-text">成功进入场景 ${num + 1}！</span>`;
} else {
throw new Error('Swipe函数不可用');
}
} catch (error) {
console.error('切换失败:', error);
confirmation.innerHTML = `<span class="success-icon">⚠️</span><span class="success-text">请手动切换到第${targetSwipe}页～</span>`;
}
}
else {
confirmation.innerHTML = `<span class="success-icon">💡</span><span class="success-text">请使用左右箭头切换到第${num + 2}页哦～</span>`;setTimeout(() => {
alert(`模拟环境：将切换到场景 ${num + 1}（第${num + 2}页）n实际使用时会自动切换到对应的开场白。`);
}, 500);
}setTimeout(() => {
confirmation.classList.remove('show');
}, 3000);
}function tryAlternativeMethod(num, targetSwipe) {
const confirmation = document.getElementById('confirmation');if (typeof SillyTavern !== 'undefined' && SillyTavern.executeSlashCommandsWithOptions) {
SillyTavern.executeSlashCommandsWithOptions(`/go ${targetSwipe}`)
.then(() => {
confirmation.innerHTML = `<span class="success-icon">✨</span><span class="success-text">成功进入场景 ${num + 1}！</span>`;
})
.catch((error) => {
console.error('Go命令也失败了:', error);SillyTavern.executeSlashCommandsWithOptions(`/swipes ${targetSwipe}`)
.then(() => {
confirmation.innerHTML = `<span class="success-icon">✨</span><span class="success-text">成功进入场景 ${num + 1}！</span>`;
})
.catch((finalError) => {
console.error('所有方法都失败了:', finalError);
confirmation.innerHTML = `<span class="success-icon">💡</span><span class="success-text">请手动使用左右箭头切换到第${num + 2}页哦～</span>`;
});
});
} else {
confirmation.innerHTML = `<span class="success-icon">💡</span><span class="success-text">请手动切换到第${num + 2}页～</span>`;
}
}// 点击模态框外部关闭
window.onclick = function(event) {
if (event.target.classList.contains('modal')) {
event.target.style.display = 'none';
}
}
</script>
</body>
</html>
“`
