🎭 角色简介
谢枕书
💬 开场白
“`
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>故事开始 – 与谢枕书</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Poppins:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
–c-bg: #161616; –c-box-bg: #1e1e1e; –c-accent: #DD5049;
–c-light-accent: #E78882; –c-text-main: #e6e6e6; –c-text-secondary: #999999;
–c-border: #2f2f2f; –c-shadow: rgba(221, 80, 73, 0.2);
/* — 新增颜色变量 — */
–c-special-accent: #FFC700; /* 荣耀金 */
}
@keyframes fadeIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}
@keyframes modal-fade-in{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
@keyframes checkmark-in{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:1}}body{font-family:'Poppins','Noto Sans SC',sans-serif;background-color:var(–c-bg);color:var(–c-text-main);margin:0;font-size:14px;font-weight:500;display:flex;justify-content:center;align-items:center;min-height:100vh;padding:1rem;box-sizing:border-box;}
.greeting-container{width:100%;max-width:650px;animation:fadeIn .5s ease-out forwards;}
.title{font-size:2.5em;font-weight:800;color:var(–c-light-accent);text-align:center;margin:0 0 30px 0;}
.character-gallery{display:flex;justify-content:center;margin-bottom:15px;}
.character-profile{text-align:center;display:flex;flex-direction:column;align-items:center;cursor:pointer;}
.avatar-image{width:110px;height:110px;border-radius:50%;margin-bottom:12px;box-shadow:0 6px 0 0 var(–c-accent);border:4px solid var(–c-bg);object-fit:cover;transition:transform .2s ease-out;}
.character-profile:hover .avatar-image{transform:scale(1.05);}
.character-name{font-weight:600;font-size:1.1em;color:var(–c-light-accent);}
.gallery-caption{text-align:center;font-size:.9em;color:var(–c-text-secondary);margin-bottom:35px;}
.scenario-list{display:flex;flex-direction:column;gap:20px;}
.scenario-option{background:var(–c-box-bg);border-radius:20px;padding:25px 30px;cursor:pointer;position:relative;box-shadow:0 6px 0 0 var(–c-accent);border:1px solid var(–c-border);transition:all .2s ease-out;min-height:52px;display:flex;align-items:center;justify-content:center;}
.scenario-list:not(.submitted) .scenario-option:hover{transform:translateY(-5px);box-shadow:0 10px 0 0 var(–c-accent);}
.scenario-list.submitted .scenario-option{pointer-events:none;}
.scenario-option.selected{transform:translateY(1px);box-shadow:0 3px 0 0 var(–c-accent);border:1px solid var(–c-accent);}
.scenario-text{font-size:1em;line-height:1.6;margin:0;color:var(–c-text-main);text-align:center;transition:opacity .2s ease-in-out;}
.scenario-option.selected .scenario-text{opacity:0;}
.confirmation-icon{position:absolute;opacity:0;font-size:2em;color:var(–c-accent);pointer-events:none;}
.scenario-option.selected .confirmation-icon{animation:checkmark-in .5s cubic-bezier(.175,.885,.32,1.275) forwards;}/* — 特殊选项的样式 — */
.special-option {
cursor: default !important;
border-color: var(–c-special-accent) !important;
box-shadow: 0 6px 0 0 var(–c-special-accent) !important;
}
.special-option:hover {
transform: none !important;
}
.special-option-content { display: flex; flex-direction: column; gap: 8px; text-align: center; width: 100%; }
.credit-line { font-size: 0.85em; color: var(–c-text-secondary); }
.credit-name { color: var(–c-special-accent); font-weight: 700; }
.special-option .scenario-text { margin-top: 5px; }.panel {
margin-top: 40px; padding: 20px 25px; background: var(–c-box-bg);
border-radius: 20px; box-shadow: 0 6px 0 0 var(–c-accent); border: 1px solid var(–c-border);
animation: fadeIn .5s .2s ease-out forwards; opacity: 0;
text-align: center;
}
.panel h3 { margin-top: 0; margin-bottom: 20px; color: var(–c-light-accent); font-weight: 700; }
.panel ul { list-style-type: none; padding-left: 0; margin: 0; text-align: left;}
.panel li { margin-bottom: 15px; line-height: 1.7; font-size: 0.9em; color: var(–c-text-main); }
.panel li:last-child { margin-bottom: 0; }
.panel code { background-color: #2f2f2f; padding: 2px 6px; border-radius: 5px; font-family: monospace; font-size: 0.95em; color: var(–c-light-accent); margin: 0 2px; }.worldview-btn {
background: transparent; border: none; color: var(–c-text-secondary);
font-size: 0.9em; text-decoration: underline; cursor: pointer;
margin-top: 20px; transition: color 0.2s ease;
}
.worldview-btn:hover { color: var(–c-light-accent); }.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.6);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;z-index:1000;}
.modal-overlay.visible{opacity:1;visibility:visible;}
.modal-content{background:var(–c-box-bg);padding:30px;border-radius:20px;box-shadow:0 10px 30px rgba(0,0,0,.5);max-width:500px;width:90%;position:relative;animation:modal-fade-in .3s ease-out forwards; border: 1px solid var(–c-border);}
.modal-close-btn{position:absolute;top:15px;right:15px;width:30px;height:30px;border:none;background:transparent;font-size:1.5em;color:var(–c-text-secondary);cursor:pointer;transition:color .2s;}
.modal-close-btn:hover{color:var(–c-text-main);}
.modal-description{line-height:1.8;color:var(–c-text-main);margin:0;}
.modal-description h4 { color: var(–c-light-accent); margin: 20px 0 10px 0; }
.modal-actions{text-align:center;margin-top:25px;}
.modal-action-btn{background-color:var(–c-accent);color:white;border:none;border-radius:25px;padding:12px 35px;font-size:1.1em;font-weight:700;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 15px var(–c-shadow);}
.modal-action-btn:hover{background-color:var(–c-light-accent);transform:translateY(-2px);box-shadow:0 6px 20px var(–c-shadow);}
@media (max-width:768px){body{padding:10px;}.title{font-size:2em;}.greeting-container{max-width:100%;}.avatar-image{width:90px;height:90px;}}
</style>
</head>
<body>
<div class="greeting-container">
<h1 class="title">你们的相遇，始于何处？</h1>
<div class="character-gallery">
<div class="character-profile" onclick="showCharacterModal()">
<img class="avatar-image" src="https://i.ibb.co/7tnv5Msz/IMG-20250815-170136.png" alt="谢枕书">
<div class="character-name">谢枕书</div>
</div>
</div>
<p class="gallery-caption">~点击头像听听他的“忠告”~</p>
<div class="scenario-list">
<!– 特殊的、不可点击的选项 –>
<div class="scenario-option special-option">
<div class="special-option-content">
<span class="credit-line">感谢 <strong class="credit-name">404老师</strong>的精修开场白，请翻到第2页！</span>
<p class="scenario-text">你在酒吧从一群混混手中救下被下药的谢枕书，获救后神志不清的他却反过来抓着你，要求你带他去开房。</p>
</div>
</div><!– 原有的、可点击的选项 –>
<div class="scenario-option" onclick="sendOpening(this, 1)">
<p class="scenario-text">谢枕书和其他少爷在包厢喝酒，你进去送酒，一个喝醉的纨绔故意缠着你不放。</p>
<div class="confirmation-icon">✓</div>
</div>
<div class="scenario-option" onclick="sendOpening(this, 2)">
<p class="scenario-text">在一场混乱的派对后，你第二天醒来发现自己竟然睡在谢枕书的床上，而身边就是还在熟睡的他。</p>
<div class="confirmation-icon">✓</div>
</div>
<div class="scenario-option" onclick="sendOpening(this, 3)">
<p class="scenario-text">你被迫代替朋友去参加一场商业联姻的相亲，结果发现对方正是脾气极坏的谢氏太子爷谢枕书。</p>
<div class="confirmation-icon">✓</div>
</div>
<div class="scenario-option" onclick="sendOpening(this, 4)">
<p class="scenario-text">在人流混杂的玖瑶区，一身高档定制的谢枕书似乎迷路了，他那副烦躁不安又强装镇定的样子，正好被路过的你看到。</p>
<div class="confirmation-icon">✓</div>
</div>
<div class="scenario-option" onclick="sendOpening(this, 5)">
<p class="scenario-text">（你的父亲是谢远山的朋友）你来谢家公司参观时，却被谢枕书当成了端茶倒水的实习生，并被他随意使唤。</p>
<div class="confirmation-icon">✓</div>
</div>
</div><div class="panel world-panel" style="animation-delay: .3s;">
<h3>了解故事背景</h3>
<button class="worldview-btn" onclick="showWorldviewModal()">点击了解天璟市世界观</button>
</div><div class="panel instructions-panel" style="animation-delay: .4s;">
<h3>小Tip</h3>
<ul>
<li>如果要触发<strong style="color: var(–c-light-accent);">匿名论坛</strong>的八卦帖子，对话中需要包含关键词: <code>论坛</code><code>八卦</code><code>帖子</code><code>听说</code><code>拍到</code></li>
</ul>
</div>
</div><div class="modal-overlay" id="characterModal" onclick="closeCharacterModal()">
<div class="modal-content" onclick="event.stopPropagation()">
<button class="modal-close-btn" onclick="closeCharacterModal()">×</button>
<p class="modal-description">
啧，还在磨蹭什么？<br><br>
快点选，我没那么多耐心等你。<br><br>
…无论你选哪个，结局都一样——你都是我的人。
</p>
<div class="modal-actions">
<button class="modal-action-btn" onclick="closeCharacterModal()">知道了</button>
</div>
</div>
</div><div class="modal-overlay" id="worldviewModal" onclick="closeWorldviewModal()">
<div class="modal-content" onclick="event.stopPropagation()">
<button class="modal-close-btn" onclick="closeWorldviewModal()">×</button>
<div class="modal-description">
<h4>天璟市概览</h4>
这是一座财富与权力交织的超一线城市，阶级壁垒森严。云端之上的奢靡生活与底层城市的真实生活形成了极致的割裂感。
<h4>三大核心区域</h4>
<strong>晖金区 (旧钱与权力):</strong> 谢枕书生活的区域，城市的绝对核心，遍布顶级会所与森严的门禁社区。<br>
<strong>沧澜新区 (新贵与资本):</strong> 科技与金融新贵的角逐场，充满了“赢家通吃”的残酷氛围，也是周逸的地盘。<br>
<strong>玖瑶区 (烟火与生活):</strong> 融合了大学城、商业街与老式居民楼的多元化区域，充满了真实的生活气息。
<h4>你的挑战</h4>
无论你来自何方，你与谢枕书的故事，都将是两种截然不同的价值观与生活方式的碰撞。
</div>
<div class="modal-actions">
<button class="modal-action-btn" onclick="closeWorldviewModal()">了解了</button>
</div>
</div>
</div><script>
function sendOpening(element, choiceIndex) {
const listContainer = document.querySelector('.scenario-list');
if (listContainer.classList.contains('submitted')) return;
listContainer.classList.add('submitted');
element.classList.add('selected');const openings = [
"谢枕书和其他少爷在包厢喝酒，你进去送酒，一个喝醉的纨绔故意缠着你不放。",
"在一场混乱的派对后，你第二天醒来发现自己竟然睡在谢枕书的床上，而身边就是还在熟睡的他。",
"你被迫代替朋友去参加一场商业联姻的相亲，结果发现对方正是脾气极坏的谢氏太子爷谢枕书。",
"在人流混杂的玖瑶区，一身高档定制、与周围格格不入的谢枕书似乎迷路了，他那副烦躁不安又强装镇定的样子，正好被路过的你看到。",
"（你的父亲是谢远山的朋友）你来谢家公司参观时，却被谢枕书当成了端茶倒水的实习生，并被他随意使唤。"
];const selectedOpening = openings[choiceIndex – 1];
if (selectedOpening) {
try {
if (typeof triggerSlash === 'function') {
triggerSlash(`/send ${selectedOpening}`);
} else {
console.error("triggerSlash function is not available.");
alert('发送失败，请手动复制:n' + selectedOpening);
}
} catch (e) {
console.error("Error sending message:", e);
alert('发送出错，请手动复制:n' + selectedOpening);
}
}
setTimeout(() => {
element.classList.remove('selected');
listContainer.classList.remove('submitted');
}, 1200);
}const characterModal = document.getElementById('characterModal');
function showCharacterModal() { characterModal.classList.add('visible'); }
function closeCharacterModal() { characterModal.classList.remove('visible'); }const worldviewModal = document.getElementById('worldviewModal');
function showWorldviewModal() { worldviewModal.classList.add('visible'); }
function closeWorldviewModal() { worldviewModal.classList.remove('visible'); }
</script>
</body>
</html>
“`