🎭 角色简介
“`yaml
char_name:
Chinese name: 许时雨
Nickname: Rain (游戏ID和画师名), {{user}}重度依赖(梦男小号)
age: 24
gender: 男
height: 186cm
identity:
-…
💬 开场白
作者oi，🚫二传商用喵
“`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>Chapter Select</title>
<style>
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-5px);}
60% {transform: translateY(-2px);}
}:root {
–bg-color: #FFF0F5; /* 樱花粉背景 */
–card-bg: rgba(255, 255, 255, 0.85);
–primary-text: #8B5F65; /* 玫瑰棕 */
–accent-color: #FF69B4; /* 艳粉色 */
–border-color: #FFDDE2; /* 淡粉色边框 */
–shadow-color: rgba(255, 105, 180, 0.15);
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, var(–bg-color) 0%, #FFE4E1 100%); /* 渐变背景 */
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
padding: 20px;
}.select-container {
width: 100%;
max-width: 400px;
background: var(–card-bg);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.5);
box-shadow: 0 8px 32px 0 var(–shadow-color);
backdrop-filter: blur(10px);
padding: 25px 20px;
animation: fadeIn 0.8s ease-out forwards;
}.header-title {
text-align: center;
font-size: 24px;
font-weight: bold;
color: var(–accent-color);
margin-bottom: 20px;
letter-spacing: 2px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}.avatar-section {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}.avatar-container {
position: relative;
cursor: pointer;
}.avatar-img {
width: 90px;
height: 90px;
border-radius: 50%;
border: 3px solid var(–border-color);
box-shadow: 0 4px 10px var(–shadow-color);
transition: transform 0.2s ease-in-out;
user-select: none;
}.avatar-container:active .avatar-img {
transform: scale(0.95);
}.avatar-hint {
position: absolute;
bottom: -5px;
right: -10px;
background-color: var(–accent-color);
color: white;
padding: 2px 8px;
border-radius: 10px;
font-size: 12px;
font-weight: bold;
box-shadow: 0 2px 4px rgba(0,0,0,0.2);
animation: bounce 1.5s infinite;
pointer-events: none;
}.dialogue-box {
margin-top: 15px;
width: 100%;
min-height: 60px;
background: rgba(255, 255, 255, 0.7);
border: 1px solid var(–border-color);
border-radius: 12px;
padding: 10px 15px;
text-align: center;
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}.dialogue-spoken {
font-size: 15px;
color: var(–primary-text);
font-weight: 500;
margin: 0 0 5px 0;
}.dialogue-inner {
font-size: 13px;
color: #bc9aaa;
font-style: italic;
margin: 0;
}.button-list {
display: flex;
flex-direction: column;
gap: 12px;
}.scene-btn {
width: 100%;
padding: 15px;
font-size: 16px;
color: var(–primary-text);
background: linear-gradient(to right, #FFFFFF, #FFF7FA);
border: 1px solid var(–border-color);
border-radius: 12px;
cursor: pointer;
text-align: center;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}.scene-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px var(–shadow-color);
color: var(–accent-color);
border-color: var(–accent-color);
}.scene-btn:active {
transform: translateY(0);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
background: linear-gradient(to right, #FFF7FA, #FFFFFF);
}.section-divider {
display: flex;
align-items: center;
text-align: center;
margin: 25px 0;
color: var(–primary-text);
font-size: 14px;
}.section-divider::before,
.section-divider::after {
content: '';
flex: 1;
border-bottom: 1px dashed var(–border-color);
}.section-divider:not(:empty)::before {
margin-right: .5em;
}.section-divider:not(:empty)::after {
margin-left: .5em;
}</style>
</head>
<body><div class="select-container">
<div class="header-title">START</div><div class="avatar-section">
<div class="avatar-container" id="avatarContainer">
<img src="https://files.catbox.moe/2dxowi.jpeg" alt="许时雨" class="avatar-img">
<div class="avatar-hint">戳戳看</div>
</div>
<div class="dialogue-box" id="dialogueBox">
<p class="dialogue-spoken" id="dialogueSpoken"></p>
<p class="dialogue-inner" id="dialogueInner"></p>
</div>
</div><div class="button-list">
<button class="scene-btn" onclick="switchToOpening(2)">邻居</button>
<button class="scene-btn" onclick="switchToOpening(3)">合作</button>
<button class="scene-btn" onclick="switchToOpening(4)">约炮</button>
<button class="scene-btn" onclick="switchToOpening(5)">热恋</button>
<button class="scene-btn" onclick="switchToOpening(6)">掉马</button>
<button class="scene-btn" onclick="switchToOpening(7)">分手</button>
<button class="scene-btn" onclick="switchToOpening(11)">变鬼</button>
<button class="scene-btn" onclick="switchToOpening(12)">七日后</button>
<button class="scene-btn" onclick="switchToOpening(13)">地偶</button>
<button class="scene-btn" onclick="switchToOpening(14)">共感</button>
<button class="scene-btn" onclick="switchToOpening(16)">带带萌新</button>
<button class="scene-btn" onclick="switchToOpening(17)">打王者被吃中线</button>
<button class="scene-btn" onclick="switchToOpening(18)">打瓦秒选吸队友血</button>
<button class="scene-btn" onclick="switchToOpening(19)">恋爱后的雪夜</button>
<button class="scene-btn" onclick="switchToOpening(20)">user变小</button>
<button class="scene-btn" onclick="switchToOpening(21)">恋爱后查手机</button>
</div><div class="section-divider">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-phone" viewBox="0 0 16 16">
<path d="M11 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h6zM5 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H5z"/>
<path d="M8 14a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
</svg>
</div><div class="button-list">
<button class="scene-btn" onclick="switchToOpening(8)">联姻</button>
<button class="scene-btn" onclick="switchToOpening(15)">解梦</button>
<button class="scene-btn" onclick="switchToOpening(9)">跟Rain网恋</button>
<button class="scene-btn" onclick="switchToOpening(10)">真恋爱且同居</button>
</div>
</div><script>
const dialogues = [
{ spoken: "无聊。", inner: "(又在看我…可爱。)" },
{ spoken: "…有事？", inner: "(想和你说说话。)" },
{ spoken: "别乱碰。", inner: "(再多碰一下。)" },
{ spoken: "知道了。", inner: "(你说的都好。)" },
{ spoken: "你怎么还在这。", inner: "(再多待一会儿吧。)" },
{ spoken: "啧。", inner: "(心跳得好快。)" },
{ spoken: "…嗯。", inner: "(好喜欢你。)" },
{ spoken: "烦人。", inner: "(…为什么这么可爱。)" },
{ spoken: "让开。", inner: "(想抱你。)" },
{ spoken: "……", inner: "(靠近一点。)" }
];let lastDialogueIndex = -1;
const avatarContainer = document.getElementById('avatarContainer');
const dialogueBox = document.getElementById('dialogueBox');
const spokenText = document.getElementById('dialogueSpoken');
const innerText = document.getElementById('dialogueInner');
const avatarHint = document.querySelector('.avatar-hint');avatarContainer.addEventListener('click', () => {
if (avatarHint) {
avatarHint.style.display = 'none';
}let newIndex;
do {
newIndex = Math.floor(Math.random() * dialogues.length);
} while (dialogues.length > 1 && newIndex === lastDialogueIndex);lastDialogueIndex = newIndex;
const selectedDialogue = dialogues[newIndex];// 先淡出
dialogueBox.style.opacity = 0;// 等待淡出动画结束后更新内容并淡入
setTimeout(() => {
spokenText.textContent = selectedDialogue.spoken;
innerText.textContent = selectedDialogue.inner;
dialogueBox.style.opacity = 1;
}, 300);
});async function switchToOpening(openingId) {
try {
if (typeof getChatMessages === 'function' && typeof setChatMessage === 'function') {
const messages = await getChatMessages(0, { include_swipe: true });
if (messages && messages.length > 0 && messages[0].swipes && messages[0].swipes.length >= openingId) {
const content = messages[0].swipes[openingId – 1];
await setChatMessage(content, 0, {
swipe_id: openingId – 1,
refresh: 'display_and_render_current',
});
console.log(`Switched to opening ID: ${openingId – 1}`);
} else {
console.error('Error: Opening swipe not found.');
}
} else {
console.log(`(Simulation) Switching to opening ID: ${openingId – 1}`);
}
} catch (error) {
console.error('Failed to switch opening:', error);
}
}
</script>
</body>
</html>
“`