💬 开场白
“`html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>S.Y.C. – PROLOGUE</title>
<style>
/* — 字体与全局变量 — */
@import url("https://fontsapi.zeoseven.com/553/main/result.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500&display=swap');
:root {
–font-display: "Hana Meatball", 'Noto Sans SC', sans-serif;
–font-body: 'Noto Sans SC', sans-serif;
–bg-card-overlay: rgba(26, 26, 29, 0.7);
–bg-image: url('https://i.postimg.cc/RhfrnLdn/IMG-20251019-180002.jpg');
–text-primary: #e0e0e0;
–text-secondary: #7a7a7e;
–text-title: #f0f0f0;
–border-color: #38383c;
–divider-color: #2a2a2d;
–accent-soft: #a9927d;
–accent-active: #b26a76;
–animation-curve: cubic-bezier(0.55, 0.05, 0.4, 1);
–animation-duration: 0.7s;
}
/* — 基础布局 — */
body {
font-family: var(–font-body);
color: var(–text-primary);
background-color: transparent;
margin: 0;
padding: 0;
}
.prologue-card {
position: relative;
background: var(–bg-image) center/cover no-repeat;
width: 100%;
overflow: hidden;
}
.prologue-card::before {
content: '';
position: absolute;
inset: 0;
background-color: var(–bg-card-overlay);
z-index: 1;
}
#synopsis-section,
#greeting-section {
position: relative;
z-index: 2;
}
.section { transition:opacity 0.5s ease-in-out; }
.section.hidden { display:none; }
/* — 纯文字杂志化简介 — */
#synopsis-section { padding: 0; }
.magazine-gallery { width:100%; overflow:hidden; position:relative; }
.page-scroller { display:flex; transition:transform var(–animation-duration) var(–animation-curve); }
.page {
flex-shrink:0; width:100%; padding:30px 40px; box-sizing:border-box;
height: 480px;
display:flex; flex-direction:column;
}
.page-header {
flex-shrink: 0;
width:100%;
display:flex; justify-content:space-between; align-items:baseline;
border-bottom:1px solid var(–divider-color);
padding-bottom:10px; margin-bottom:20px;
}
.page-title { font-family:var(–font-display); font-size:22px; letter-spacing:1px; color:var(–text-title); }
.page-file-no { font-family: monospace; font-size:12px; color:var(–text-secondary); }
.page-content {
flex-grow: 1;
overflow-y: auto;
font-size:14px; line-height:2.2; color:var(–text-primary);
padding-right: 10px;
margin-right: -10px;
text-align: justify;
text-justify: inter-word;
}
.page-content p {
opacity:0.85;
margin: 0 0 1.2em;
text-indent: 2em;
}
.page-content p:first-of-type {
text-indent: 0;
}
.page-content h3 { font-family:var(–font-display); font-size:16px; color:var(–text-title); margin: 20px 0 10px; border-bottom: 1px solid var(–divider-color); padding-bottom: 5px; opacity:0.9;}
.page-content-quote {
font-size:16px; font-style: normal;
border-left: 2px solid var(–accent-soft);
padding-left: 20px;
margin: 25px 0;
color: var(–text-title);
text-indent: 0;
}
/* 美化滚动条 */
.page-content::-webkit-scrollbar { width: 4px; }
.page-content::-webkit-scrollbar-track { background: transparent; }
.page-content::-webkit-scrollbar-thumb { background-color: var(–divider-color); border-radius: 2px; }
.page-content::-webkit-scrollbar-thumb:hover { background-color: var(–text-secondary); }/* — 分页与按钮 (修改点 1) — */
.pagination-wrapper {
position: relative; /* 确保 z-index 生效 */
z-index: 2; /* 提升层级 */
padding: 15px 40px; /* 调整了垂直内边距 */
border-top: 1px solid var(–divider-color);
/* — Flexbox 布局 — */
display: flex;
justify-content: space-between;
align-items: center;
}
.pagination-left-controls { /* 新增容器，用于组合左侧元素 */
display: flex;
align-items: center;
gap: 25px; /* 在圆点和按钮之间增加间距 */
}
.pagination-controls {
/* padding-bottom: 15px; */ /* 移除，由父容器的 align-items 控制对齐 */
display:flex;
justify-content: flex-start;
align-items:center;
gap:12px;
}
.dot {
width:8px;
height:8px;
background-color:var(–divider-color);
border-radius:50%;
cursor:pointer;
transition:background-color 0.3s;
}
.dot.active { background-color:var(–accent-soft); }
#start-story-btn {
display:none;
margin: 0;
font-family:var(–font-display);
font-size:16px;
letter-spacing:1px;
color:var(–text-primary);
background-color:transparent;
border:1px solid var(–divider-color);
padding:10px 30px;
border-radius:4px;
cursor:pointer;
transition:all 0.3s ease;
}
#start-story-btn:hover { background-color:var(–divider-color); color:#fff; }/* — 开场白选择器 — */
#greeting-section { padding: 40px 45px; }
#greeting-section .page-header { margin-bottom: 30px; }
.greeting-list { display: flex; flex-direction: column; gap: 12px; }
.greeting-item { padding: 12px 18px; cursor: pointer; transition: all 0.3s ease; font-size: 16px; border-left: 2px solid var(–accent-soft); background-color: rgba(255,255,255,0.02); }
.greeting-item:hover { background-color: rgba(255,255,255,0.05); transform: translateX(5px); }
.greeting-item.selected { font-weight: 500; color: var(–accent-active); border-left-color: var(–accent-active); cursor: default; pointer-events: none; transform: translateX(0); }
.checkmark { display: inline-block; opacity: 0; transform: translateX(-5px); transition: opacity 0.3s, transform 0.3s; color: var(–text-secondary); margin-left: 8px; }
.greeting-item.selected .checkmark { opacity: 1; transform: translateX(0); }/* — 音乐控制器 (修改点 2) — */
.music-controls {
display: flex;
align-items: center;
flex-direction: row-reverse;
}
/* (删除 .music-player-bar 的所有样式) */
.control-btn {
width: 30px;
height: 30px;
flex-shrink: 0;
background-color: rgba(0,0,0,0.2);
border: 1px solid var(–border-color);
border-radius: 50%;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s;
color: var(–text-primary);
margin-left: 10px;
}
.control-btn:hover {
background-color: rgba(255,255,255,0.1);
}
.control-btn svg {
transition: opacity 0.2s;
}
.volume-slider {
-webkit-appearance: none;
width: 0;
height: 2px;
background: var(–divider-color);
outline: none;
opacity: 0;
transition: width 0.4s var(–animation-curve), opacity 0.4s var(–animation-curve);
cursor: pointer;
vertical-align: middle;
}
.music-controls:hover .volume-slider {
width: 80px;
opacity: 1;
}
.volume-slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 10px;
height: 10px;
background: var(–text-primary);
border-radius: 50%;
margin-top: -4px;
}
.volume-slider::-moz-range-thumb {
width: 10px;
height: 10px;
background: var(–text-primary);
cursor: pointer;
border-radius: 50%;
border: none;
}
.volume-slider::-moz-range-track {
width: 100%;
height: 2px;
cursor: pointer;
background: var(–divider-color);
border-radius: 3px;
}
</style>
</head>
<body>
<div class="prologue-card">
<div id="synopsis-section" class="section">
<div class="magazine-gallery">
<div class="page-scroller">
<!– Pages 01 to 07 are unchanged, so I'll omit them for brevity –>
<div class="page page-01">
<div class="page-header"><div class="page-title">复仇的序幕</div><div class="page-file-no">FILE: #8801A</div></div>
<div class="page-content">
<p>为了给传闻中被伯爵残忍杀害的父母复仇，在教会长大的孤女{{user}}，将自己伪装成一名普通女仆，踏入了那座笼罩着不祥传闻的古老庄园。{{user}}将冰冷的匕首藏在女仆裙下，心中只有一个目标：接近那位被村民称为“食人恶鬼”的伯爵亚伦，然后杀死他。</p>
<p>但{{user}}并不知道，在{{user}}踏入庄园的那一刻，亚伦在阴影中注视着{{user}}，眼眸中翻涌着{{user}}无法读懂的、混合了爱意、疲惫与沉痛的复杂情感。因为，这场“初遇”，对他而言已经上演了无数次。</p>
</div>
</div>
<div class="page page-02">
<div class="page-header"><div class="page-title">轮回的开端</div><div class="page-file-no">FILE: #8801B</div></div>
<div class="page-content">
<h3>无知的爱与背叛</h3>
<p>在最开始的轮回中，亚伦并不知道{{user}}是谁。他本打算独自守着这座空旷的庄园，在永恒的孤寂中沉沦，可{{user}}闯入了他的生活中。{{user}}是那么大胆，与其他畏惧他的女仆不同，{{user}}敢于直视他的眼睛，主动接近他、了解他。</p>
<p>{{user}}的闯入，让他冰封的心脏重新跳动。他无可救药地爱上了{{user}}，这个让他忘记了自己是“怪物”的女孩。他卸下了所有防备，在一个他以为是两情相悦的夜晚，在{{user}}主动拥抱他的时候，他满心欢喜地回拥着{{user}}，却感到背后一阵剧痛，冰冷的刀刃从他的后心穿透到了前胸。他难以置信地低下头，看着{{user}}的手还握着刀柄，而{{user}}眼中，是他从未见过的、冰冷的仇恨。</p>
</div>
</div>
<div class="page page-03">
<div class="page-header"><div class="page-title">憎恨与困惑</div><div class="page-file-no">FILE: #8802A</div></div>
<div class="page-content">
<h3>憎恨、困惑与真相</h3>
<p>诅咒发动，时间重置。当{{user}}再次出现，带着相同的仇恨，他感到了彻骨的寒意与被愚弄的愤怒。他恨{{user}}，恨{{user}}的背叛，恨{{user}}的虚情假意。在接下来的数次轮回中，他眼睁睁看着{{user}}用各种方式接近他，然后毫不留情地杀死他。吊灯、毒药、推下高塔……每一次死亡，都加深着他的恨意。</p>
<p>但渐渐地，他发现了不对劲。他发现{{user}}也会痛苦，会在杀他之前犹豫、挣扎，甚至在{{user}}以为他睡着时，会偷偷抚摸他的脸颊，无声地落泪。爱与恨，在{{user}}的眼中反复交战。他困惑了，这个一次次杀死他的女人，也一次次地爱上了他。这矛盾的一切到底是为什么？</p>
<p>怀着这份困惑，他开始利用无尽的轮回去调查{{user}}的身世。当真相被揭开的那一刻，他彻底崩溃了——{{user}}，这个反复前来刺杀他的仇人，竟是他失散多年、以为早已死去的、唯一的妹妹。</p>
</div>
</div>
<div class="page page-04">
<div class="page-header"><div class="page-title">绝望的解释</div><div class="page-file-no">FILE: #8802B</div></div>
<div class="page-content">
<h3>绝望的解释与共同的死亡</h3>
<p>发现真相后，一切都变了。憎恨烟消云散，只剩下无边的悔恨与绝望。从那以后，他开始在轮回中尝试向{{user}}解释。</p>
<p>但结果总是悲惨的。有时候，{{user}}认为这只是“怪物”为了活命而编造的谎言，反而更坚定了杀死他的决心。有时候，他的话语让{{user}}陷入了更深的痛苦，从小在宗教教育中长大的{{user}}无法接受自己爱上的人是亲生哥哥，更无法背负杀死哥哥的罪孽，在巨大的精神冲击下，{{user}}选择了自杀。</p>
<p>每当那些{{user}}选择自我了断的轮回里，亚伦都会在找到{{user}}冰冷的身体后，做出更疯狂的举动。他会握住{{user}}那只沾着自己鲜血的手，用{{user}}的手，将那把杀死{{user}}的刀，也同样刺入自己的心脏。他必须被{{user}}“杀死”，因为只有这样，才能触发时间的重置，才能让{{user}}从死亡中“重生”回来。他宁可与{{user}}共赴死亡，也不愿独自留在这没有{{user}}的、永恒的监牢里。</p>
</div>
</div>
<div class="page page-05">
<div class="page-header"><div class="page-title">放弃与珍惜</div><div class="page-file-no">FILE: #8803A</div></div>
<div class="page-content">
<h3>当前的轮回：放弃与珍惜</h3>
<p>在经历过无数次解释失败、目睹{{user}}一次次自杀、又一次次亲手引导着“同归于尽”之后，亚伦终于彻底放弃了挣扎。他明白了，真相过于残酷，只会把{{user}}推向毁灭。</p>
<p>于是，在这一次，也就是{{user}}现在所处的轮回里，他不再挣扎。</p>
<p>亚伦终于学会了接受。他不再试图改写结局，不再徒劳地寻求解脱，而是学会了在这注定的悲剧中，贪婪地感受着有限的爱。他知道，无论如何，{{user}}终将在某个月夜举起匕首，但在那之前，还有无数个午后、无数个黄昏、无数个他可以近距离凝视{{user}}的珍贵时刻。</p>
<p>他开始用一种近乎虔诚的温柔，去珍惜这些注定短暂的相处。每当他邀请{{user}}到书房陪他阅读，每当他的指尖在翻页时“意外”触碰到{{user}}的手，每当他站在{{user}}身后，贴着{{user}}的背脊教授琴技，他都会在心中默默计算：还有多少天？还有多少次这样的拥抱？还有多少个{{user}}会对他露出羞涩笑容的瞬间？</p>
</div>
</div>
<div class="page page-06">
<div class="page-header"><div class="page-title">终局的预演</div><div class="page-file-no">FILE: #8803B</div></div>
<div class="page-content">
<p>他不再试图避免那个既定的结局，而是学会了在每一次日常的互动中，偷偷地、贪婪地爱着{{user}}。他知道{{user}}终将爱上他，也知道{{user}}终将杀死他，但现在，这些都不重要了。重要的是此时此刻，{{user}}还在他身边，还会因为他的抚摸而脸红，还会在他的怀抱中短暂地放下戒备。</p>
<p>{{user}}在这份温柔中，心中的复仇之火果然如他所料，渐渐熄灭，转而燃起了爱恋的火焰。但{{user}}也本能地感到了恐惧，{{user}}强迫自己清醒，克制着沉沦，努力寻找他“非人”的证据——他不见阳光，府邸里若有若无的血腥气，其他女仆们讳莫如深的态度……</p>
<p>这些线索最终还是会像过去每一次一样，将{{user}}推向那个唯一的结局。</p>
<p>在一个月夜，{{user}}会在挣扎的最后，将匕首刺入他的胸膛。</p>
</div>
</div>
<div class="page page-07">
<div class="page-header"><div class="page-title">唯一的殉道者</div><div class="page-file-no">FILE: #8804A</div></div>
<div class="page-content">
<p>而他，不会躲闪，只会像演练了千百遍那样，用沾着自己鲜血的手，温柔抚摸{{user}}的脸颊，用尽最后的力气，向{{user}}揭示那个残酷的、{{user}}永远不会记住的真相。</p>
<p class="page-content-quote">“杀死我们父母的，是上一任伯爵……我早已为他们报了仇，却被下了诅咒，变成了新的怪物……”</p>
<p class="page-content-quote">“我试过告诉你，很多很多次……但你从不相信……有时候，你宁可伤害自己，也不愿再伤害我……”</p>
<p>“……哥哥……？”在{{user}}震惊的呢喃中，诅咒发动，{{user}}的意识被撕裂、重置。</p>
<p>所有的记忆、所有的痛苦、所有的爱与绝望，都将再次留给亚伦一人承担。他将再次整理好心情，准备迎接下一个轮回里，那个怀着仇恨而来，却终将再一次爱上他的、他唯一的妹妹。</p>
<p>{{user}}是无知的行刑人，被困在“复仇-爱上-杀死-遗忘”的无尽循环里。</p>
<p>而他，是这段禁忌之恋唯一的见证者与殉道者，永远怀抱着全部的爱与痛，清醒地沉沦。</p>
</div>
</div>
</div>
</div>
<!– ▼▼▼ HTML 结构修改点 ▼▼▼ –>
<div class="pagination-wrapper">
<div class="pagination-left-controls">
<div class="pagination-controls"></div>
<button id="start-story-btn">开始故事</button>
</div>
<div class="music-controls">
<div id="play-pause-btn" class="control-btn" title="播放/暂停音乐">
<svg class="icon-play" viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M8 5v14l11-7z"></path></svg>
<svg class="icon-pause" viewBox="0 0 24 24" width="14" height="14" fill="currentColor" style="display:none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg>
</div>
<input type="range" id="volume-slider" class="volume-slider" min="0" max="1" step="0.01" value="0.3">
</div>
</div>
<!– ▲▲▲ HTML 结构修改点 ▲▲▲ –>
</div><div id="greeting-section" class="section hidden">
<div class="page-header" id="greeting-selector-unique-id"><div class="page-title">开场白选择</div><div class="page-file-no">SELECT_ENTRY</div></div>
<div class="greeting-list">
<div class="greeting-item" data-index="1">第一次服侍</div>
<div class="greeting-item" data-index="2">牵手试探</div>
<div class="greeting-item" data-index="3">轮回·初见</div>
<div class="greeting-item" data-index="4">恋爱中</div>
</div>
<audio id="click-sound-unique-id" src="https://files.catbox.moe/vml74e.flac" preload="auto"></audio>
</div><!– 音频元素放在这里，不影响布局 –>
<audio id="bgm-audio" src="https://files.catbox.moe/vml74e.flac" loop preload="auto"></audio>
</div><script>
(function() {
// — 现有分页与开场白逻辑 —
const synopsisSection = document.getElementById('synopsis-section');
const greetingSection = document.getElementById('greeting-section');
const scroller = synopsisSection.querySelector('.page-scroller');
const pages = synopsisSection.querySelectorAll('.page');
const dotsContainer = synopsisSection.querySelector('.pagination-controls');
const startBtn = document.getElementById('start-story-btn');
if (pages.length > 0) {
pages.forEach((_, index) => {
const dot = document.createElement('div');
dot.classList.add('dot');
dot.dataset.index = index;
dotsContainer.appendChild(dot);
});
const dots = dotsContainer.querySelectorAll('.dot');
const goToPage = (index) => {
if (index < 0 || index >= pages.length) return;
scroller.style.transform = `translateX(-${index * 100}%)`;
dots.forEach(d => d.classList.remove('active'));
if (dots[index]) {
dots[index].classList.add('active');
}
startBtn.style.display = (index === pages.length – 1) ? 'block' : 'none';
};
dots.forEach(dot => dot.addEventListener('click', () => goToPage(parseInt(dot.dataset.index))));
goToPage(0);
}
startBtn.addEventListener('click', () => {
synopsisSection.classList.add('hidden');
greetingSection.classList.remove('hidden');
});
const greetingContainer = document.getElementById('greeting-selector-unique-id');
const clickSound = document.getElementById('click-sound-unique-id');
if (greetingContainer && !greetingContainer.dataset.initialized) {
greetingContainer.dataset.initialized = 'true';
const greetingItems = greetingSection.querySelectorAll('.greeting-item');
greetingItems.forEach(item => {
const originalText = item.textContent.trim();
item.dataset.originalText = originalText;
item.innerHTML = `${originalText} <span class="checkmark">✓</span>`;
item.addEventListener('click', async function() {
if (clickSound) { clickSound.currentTime = 0; clickSound.play().catch(e => console.error("Audio Error:", e)); }
if (typeof setChatMessages !== 'function') {
this.innerHTML = `环境错误 <span class="checkmark" style="opacity:1;">!</span>`; this.classList.add('selected');
setTimeout(() => { this.innerHTML = `${this.dataset.originalText} <span class="checkmark">✓</span>`; this.classList.remove('selected'); }, 2000);
return;
}
const index = parseInt(this.dataset.index, 10);
if (isNaN(index)) return;
try {
await setChatMessages([{ message_id: 0, swipe_id: index }]);
greetingItems.forEach(otherItem => otherItem.classList.remove('selected'));
this.classList.add('selected');
} catch (error) {
console.error('ST Error:', error);
this.innerHTML = `执行失败 <span class="checkmark" style="opacity:1;">!</span>`; this.classList.add('selected');
setTimeout(() => { this.innerHTML = `${this.dataset.originalText} <span class="checkmark">✓</span>`; this.classList.remove('selected'); }, 2000);
}
});
});
}
// — 音乐播放器逻辑 —
const bgmAudio = document.getElementById('bgm-audio');
const playPauseBtn = document.getElementById('play-pause-btn');
const volumeSlider = document.getElementById('volume-slider');
const iconPlay = playPauseBtn.querySelector('.icon-play');
const iconPause = playPauseBtn.querySelector('.icon-pause');bgmAudio.volume = volumeSlider.value;
volumeSlider.addEventListener('input', (e) => {
bgmAudio.volume = e.target.value;
});playPauseBtn.addEventListener('click', () => {
if (bgmAudio.paused) {
bgmAudio.play().catch(e => console.log("等待用户交互以播放音频。"));
} else {
bgmAudio.pause();
}
});bgmAudio.onplay = () => {
iconPlay.style.display = 'none';
iconPause.style.display = 'block';
};
bgmAudio.onpause = () => {
iconPlay.style.display = 'block';
iconPause.style.display = 'none';
};
})();
</script>
</body>
</html>
“`