🎭 角色简介
<character_information character="孟和鸣">
核心身份：
名称：孟和鸣
性别：男
年龄：26
背景：
出身：出生于一个氛围和谐的富裕家庭。母亲是家中顶梁柱，性格爽朗；父亲当年凭借英俊的相貌“入赘”，性格不靠谱但风趣。孟和鸣随母姓，是家…
💬 开场白
“`html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>孟和鸣的日常</title>
<style>
/* CSS 动画定义 */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideInUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes messagePopIn {
0% { transform: scale(0.5); opacity: 0; }
80% { transform: scale(1.05); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-6px); }
60% { transform: translateY(-3px); }
}/* 根变量，定义孟和鸣风格的“社畜灰”色板 */
:root {
–bg-color: #f0f2f5;
–app-bg: #ffffff;
–primary-text: #1a1a1a;
–secondary-text: #8a8a8a;
–accent-color: #007aff;
–border-color: #e1e1e1;
–shadow-color: rgba(0, 0, 0, 0.08);
–boss-bubble: #a4e979;
–my-bubble: #ffffff;
}* {
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-color: var(–bg-color);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
-webkit-font-smoothing: antialiased;
}.phone-shell {
width: 100%;
max-width: 420px;
height: 95vh;
max-height: 850px;
background: #1c1c1e;
border-radius: 40px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
padding: 12px;
display: flex;
}.screen {
width: 100%;
height: 100%;
background: var(–bg-color);
border-radius: 30px;
position: relative;
overflow: hidden;
}.wechat-simulation {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
animation: fadeIn 0.5s ease-out;
}
.wechat-header {
text-align: center;
padding: 15px;
font-weight: 600;
background: #ededed;
border-bottom: 1px solid var(–border-color);
position: sticky;
top: 0;
z-index: 10;
}
.chat-area {
flex-grow: 1;
padding: 20px 10px;
overflow-y: auto;
}
.message { display: flex; margin-bottom: 15px; opacity: 0; }
.message.boss { justify-content: flex-start; }
.message.me { justify-content: flex-end; }
.message img.avatar { width: 40px; height: 40px; border-radius: 5px; }
.message .bubble { max-width: 70%; padding: 10px 12px; border-radius: 8px; position: relative; line-height: 1.5; }
.boss .bubble { background: var(–boss-bubble); margin-left: 10px; }
.me .bubble { background: var(–my-bubble); margin-right: 10px; }
.boss .bubble::before, .me .bubble::before { content: ''; position: absolute; top: 12px; width: 0; height: 0; border: 6px solid transparent; }
.boss .bubble::before { left: -12px; border-right-color: var(–boss-bubble); }
.me .bubble::before { right: -12px; border-left-color: var(–my-bubble); }
.start-button {
display: block;
width: calc(100% – 40px);
margin: 20px;
padding: 15px;
border-radius: 8px;
border: none;
background: var(–accent-color);
color: white;
font-size: 16px;
font-weight: 500;
cursor: pointer;
opacity: 0;
animation: slideInUp 0.5s 2.5s forwards;
}.app-container {
width: 100%;
height: 100%;
background: var(–app-bg);
padding: 20px;
display: none;
flex-direction: column;
animation: fadeIn 0.8s ease-out forwards;
overflow-y: auto;
}.audio-player { width: 100%; margin-bottom: 15px; }
.sticker { position: absolute; user-select: none; }
#sticker1 { width: 60px; top: 10%; right: 5%; transform: rotate(15deg); }
#sticker2 { width: 80px; bottom: 8%; left: 5%; transform: rotate(-10deg); }.main-interaction {
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 20px;
}
.avatar-container { position: relative; cursor: pointer; }
.avatar-img {
width: 100px;
height: 100px;
border-radius: 20px;
border: 3px solid var(–border-color);
box-shadow: 0 4px 15px 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: -8px;
right: -15px;
background-color: var(–accent-color);
color: white;
padding: 3px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
box-shadow: 0 2px 5px 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: var(–bg-color);
border-radius: 12px;
padding: 12px 18px;
text-align: center;
opacity: 0;
transition: opacity 0.5s ease;
pointer-events: none;
}
.dialogue-spoken { font-size: 16px; color: var(–primary-text); font-weight: 500; }
.dialogue-inner { font-size: 13px; color: var(–secondary-text); font-style: italic; margin-top: 5px; }.story-selection h3 {
font-size: 18px;
text-align: center;
margin-bottom: 15px;
color: var(–primary-text);
}/* — 新增/修改的CSS样式 — */
.button-list { display: flex; flex-direction: column; gap: 12px; }
.button-list .page {
display: none;
flex-direction: column;
gap: 12px;
animation: fadeIn 0.4s ease-out;
}
.button-list .page.active {
display: flex;
}.pagination-controls {
display: flex;
justify-content: center;
align-items: center;
margin-top: 15px;
gap: 20px;
}
.pagination-controls button {
background-color: var(–bg-color);
border: 1px solid var(–border-color);
color: var(–primary-text);
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 18px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.2s, box-shadow 0.2s;
display: flex;
justify-content: center;
align-items: center;
}
.pagination-controls button:hover {
background-color: #e6e6e6;
}
.pagination-controls button:disabled {
opacity: 0.4;
cursor: not-allowed;
background-color: transparent;
}
#pageIndicator {
font-size: 14px;
color: var(–secondary-text);
font-weight: 500;
min-width: 40px;
text-align: center;
}
/* — CSS样式结束 — */.scene-btn {
width: 100%;
padding: 16px;
font-size: 16px;
color: var(–primary-text);
background: #fdfdfd;
border: 1px solid var(–border-color);
border-radius: 12px;
cursor: pointer;
text-align: left;
font-weight: 500;
transition: all 0.2s ease;
box-shadow: 0 2px 5px var(–shadow-color);
display: flex;
align-items: center;
}
.scene-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px var(–shadow-color);
border-color: var(–accent-color);
color: var(–accent-color);
}
.scene-btn .btn-icon { margin-right: 12px; font-size: 20px; }
</style>
</head>
<body>
<div class="phone-shell">
<div class="screen">
<div class="wechat-simulation" id="wechatScreen">
<div class="wechat-header">周经理</div>
<div class="chat-area">
<div class="message boss" id="msg1"><img src="https://files.catbox.moe/mps3zd.jpg" alt="奋斗" class="avatar"><div class="bubble">小孟啊，在忙吗？有个事我们得抓紧时间对齐一下。</div></div>
<div class="message me" id="msg2"><div class="bubble">周经理好，您说。🙂</div><img src="https://files.catbox.moe/wisolg.jpg" alt="懒洋洋上吊" class="avatar"></div>
<div class="message boss" id="msg3"><img src="https://files.catbox.moe/mps3zd.jpg" alt="奋斗" class="avatar"><div class="bubble">就是上次那个方案，我觉得我们还能再拔高一下，聚焦用户痛点，形成可落地的组合拳，打通业务闭环，赋能产品矩阵。你今晚再拉个PPT，我们明天一早开个短会。💪</div></div>
<div class="message me" id="msg4"><div class="bubble">好的，收到。👍</div><img src="https://files.catbox.moe/wisolg.jpg" alt="懒洋洋上吊" class="avatar"></div>
</div>
<button class="start-button" onclick="startExperience()">[点击解锁孟和鸣]</button>
</div>
<div class="app-container" id="appScreen">
<audio class="audio-player" controls autoplay loop><source src="https://files.catbox.moe/0dkvc5.flac" type="audio/flac">你的浏览器不支持音频播放。</audio>
<img src="https://files.catbox.moe/473dxm.gif" alt="不幸苦命苦" id="sticker1" class="sticker">
<img src="https://files.catbox.moe/9q85gr.png" alt="我真的需要这份工作吗" id="sticker2" class="sticker">
<div class="main-interaction">
<div class="avatar-container" id="avatarContainer">
<img src="https://files.catbox.moe/opgb6v.gif" alt="孟和鸣" class="avatar-img">
<div class="avatar-hint" id="avatarHint">拍一拍</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="story-selection">
<h3>选择一个故事的开端</h3>
<!– 修改后的HTML结构 –>
<div class="button-pager">
<div class="button-list" id="buttonList">
<button class="scene-btn" onclick="switchToOpening(2)"><span class="btn-icon">🚇</span> 地铁上，一见钟情</button>
<button class="scene-btn" onclick="switchToOpening(3)"><span class="btn-icon">🏍️</span> 去看晚霞，好不好？</button>
<button class="scene-btn" onclick="switchToOpening(4)"><span class="btn-icon">💼</span> 打工人爱上上司就是贱！…我就贱，怎么了？</button>
<button class="scene-btn" onclick="switchToOpening(5)"><span class="btn-icon">💴</span> 欸！我是不会为了钱放弃尊…您看您这就生分了啊</button>
<button class="scene-btn" onclick="switchToOpening(6)"><span class="btn-icon">🏢</span> 你好…咳咳…预定过的</button>
</div>
<div class="pagination-controls" id="paginationControls" style="display: none;">
<button id="prevPage"><</button>
<span id="pageIndicator"></span>
<button id="nextPage">></button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
window.onload = () => {
const messages = document.querySelectorAll('.message');
messages.forEach((msg, index) => { setTimeout(() => { msg.style.animation = `messagePopIn 0.5s forwards`; }, index * 600); });
};let paginationSetupDone = false;
function startExperience() {
const wechatScreen = document.getElementById('wechatScreen');
const appScreen = document.getElementById('appScreen');
wechatScreen.style.animation = 'fadeOut 0.5s forwards';
setTimeout(() => {
wechatScreen.style.display = 'none';
appScreen.style.display = 'flex';
// 只在第一次进入时设置分页
if (!paginationSetupDone) {
setupPagination();
paginationSetupDone = true;
}
}, 500);
}const dialogues = [
{ 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.getElementById('avatarHint');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);
});// — 新增的分页逻辑 —
const ITEMS_PER_PAGE = 3;
let currentPage = 0;
let totalPages = 0;
let pages = [];function setupPagination() {
const buttonList = document.getElementById('buttonList');
const sceneButtons = Array.from(buttonList.querySelectorAll('.scene-btn'));
const paginationControls = document.getElementById('paginationControls');if (sceneButtons.length <= ITEMS_PER_PAGE) return; // 如果按钮不够一页，则不显示分页
totalPages = Math.ceil(sceneButtons.length / ITEMS_PER_PAGE);
buttonList.innerHTML = ''; // 清空原始按钮列表for (let i = 0; i < totalPages; i++) {
const page = document.createElement('div');
page.className = 'page';
const pageButtons = sceneButtons.slice(i * ITEMS_PER_PAGE, (i + 1) * ITEMS_PER_PAGE);
pageButtons.forEach(btn => page.appendChild(btn));
pages.push(page);
buttonList.appendChild(page);
}paginationControls.style.display = 'flex';
document.getElementById('prevPage').addEventListener('click', () => showPage(currentPage – 1));
document.getElementById('nextPage').addEventListener('click', () => showPage(currentPage + 1));showPage(0); // 显示第一页
}function showPage(pageIndex) {
if (pageIndex < 0 || pageIndex >= totalPages) return;pages[currentPage].classList.remove('active');
currentPage = pageIndex;
pages[currentPage].classList.add('active');document.getElementById('prevPage').disabled = currentPage === 0;
document.getElementById('nextPage').disabled = currentPage === totalPages – 1;
document.getElementById('pageIndicator').textContent = `${currentPage + 1} / ${totalPages}`;
}
// — 分页逻辑结束 —async function switchToOpening(openingId) {
console.log(`正在尝试切换到开场: ${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' });
} else { console.error('错误: 未找到对应的开场白。'); }
} else {
console.log(`(模拟) 切换到开场 ID: ${openingId}`);
document.body.innerHTML = `<div style="font-size:24px; color:#333; text-align:center; padding-top: 40vh;">已选择开场 ${openingId}。<br>请在聊天窗口继续…</div>`;
}
} catch (error) { console.error('切换开场时发生错误:', error); }
}
</script>
</body>
</html>
“`