💬 开场白
第二页是开场白简介。
开场白*3.你也不想退学吧？*开启世界书“2.斯特林一肚子坏水”“`html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>✨导览手册✨</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600&display=swap');:root {
–bg-color: #fdf6f7;
–card-bg: #ffffff;
–text-color: #5c5c5c;
–title-color: #b19cd9;
–accent-color: #f7cac9;
–border-color: #ece4f0;
}body {
margin: 0;
padding: 0;
font-family: 'Noto Serif SC', serif;
background-color: var(–bg-color);
color: var(–text-color);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}.handbook-container {
width: 100%;
max-width: 450px; /* 适合手机屏幕的最大宽度 */
height: 95vh;
max-height: 800px;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
position: relative;
}.page-slider {
display: flex;
width: 200%;
height: 100%;
transition: transform 0.5s ease-in-out;
}.page {
width: 50%;
height: 100%;
overflow-y: auto;
padding: 30px 25px;
box-sizing: border-box;
background: var(–card-bg);
}/* 隐藏滚动条 */
.page::-webkit-scrollbar {
display: none;
}
.page {
-ms-overflow-style: none;
scrollbar-width: none;
}h1, h2, h3 {
color: var(–title-color);
text-align: center;
margin: 0;
padding: 0;
}h1 {
font-size: 24px;
margin-bottom: 5px;
font-weight: 600;
}h2 {
font-size: 18px;
margin-bottom: 25px;
font-weight: 400;
border-bottom: 1px solid var(–border-color);
padding-bottom: 15px;
}.character-card {
border: 1px solid var(–border-color);
border-radius: 12px;
padding: 20px;
margin-bottom: 20px;
background-color: var(–bg-color);
}.character-card h3 {
font-size: 20px;
margin-bottom: 15px;
text-align: left;
}.character-card h3 span {
font-size: 14px;
color: var(–text-color);
font-weight: 400;
margin-left: 8px;
}.character-card p {
margin: 0 0 10px 0;
line-height: 1.7;
font-size: 14px;
}.scenario-list {
list-style: none;
padding: 0;
}.scenario-list li {
background-color: var(–bg-color);
border: 1px solid var(–border-color);
border-radius: 12px;
padding: 18px;
margin-bottom: 15px;
font-size: 15px;
cursor: pointer;
transition: transform 0.2s;
}.scenario-list li:hover {
transform: scale(1.02);
}.nav-dots {
position: absolute;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
display: flex;
}.dot {
height: 10px;
width: 10px;
margin: 0 5px;
background-color: #d1c4e9;
border-radius: 50%;
display: inline-block;
cursor: pointer;
transition: background-color 0.3s;
}.dot.active {
background-color: var(–title-color);
}/* 隐藏的 radio buttons 用于控制翻页 */
input[type="radio"] {
display: none;
}#page1-radio:checked ~ .handbook-container .page-slider {
transform: translateX(0%);
}
#page2-radio:checked ~ .handbook-container .page-slider {
transform: translateX(-50%);
}#page1-radio:checked ~ .handbook-container .nav-dots label[for="page1-radio"] .dot {
background-color: var(–title-color);
}
#page2-radio:checked ~ .handbook-container .nav-dots label[for="page2-radio"] .dot {
background-color: var(–title-color);
}</style>
</head>
<body><input type="radio" id="page1-radio" name="page-nav" checked>
<input type="radio" id="page2-radio" name="page-nav"><div class="handbook-container">
<div class="page-slider">
<!– 页面一：角色介绍 –>
<div class="page" id="page1">
<h1>角色介绍</h1>
<h2>CHARACTERS</h2><div class="character-card">
<h3> u！<user>！</h3>
<p><b>固定背景：</b>母亲意外离世，被富豪遗孀，膝下无子的姨妈闵青阮接到美国。</p>
<p><b>为剧情服务的关系设定：</b>为比自己大很多的熟男奥斯卡的皮相心动，为什么他一坐你旁边你的心就狂跳？这不是你自愿的！因此有些躲着他。</p>
<p><b>可选背景：</b>东亚创伤家庭，写得很简短，存在感不强。（根本没有char在乎）也可到世界书自填背景。</p></div>
<h2>💖心动男嘉宾💖</h2>
<div class="character-card">
<h3>利亚姆·洛林德 <span>——Liam Lorind</span></h3>
<p><b>身份：</b>开学时被老师指派给你的向导，公认的小甜心，一位心地善良的小圣父，毫无性经验。</p>
<p><b>外貌：</b>身高179cm，浅金色头发，白皙的皮肤和浅灰蓝色眼睛，脸上有淡淡的雀斑。</p>
</div><div class="character-card">
<h3>斯特林·蒙哥马利 <span>——Sterling Montgomery</span></h3>
<p><b>身份：</b>奥斯卡的堂弟，跋扈的财团小公子，学校的明星四分卫，性格恶劣自大，有个啦啦队长女友麦迪。</p>
<p><b>外貌：</b>人高马大，身高192cm，金发碧眼，但有一根粉色的牛牛，打舌钉。</p>
</div><div class="character-card">
<h3>奥斯卡·蒙哥马利 <span>——Oscar Montgomery</span></h3>
<p><b>身份：</b>你已故的姨父提携过的金融公司高管，偶尔来访的禁欲冷脸美貌叔叔——他其实是来看你的。</p>
<p><b>外貌：</b>34岁的黄金单身汉，棕黑发，有着惊人的美貌，薄唇嘴角有一颗色情的美人痣。</p>
</div>
</div><!– 页面二：开场白 –>
<div class="page" id="page2">
<h1>开场白</h1>
<h2>PROLOGUES</h2><ul class="scenario-list">
<li><b>1.新生入学</b><br>认识一下新同学和美高生活吧！</li>
<li><b>2.冷脸叔叔的晚餐</b><br>奥斯卡叔叔又来家里吃饭了，试着和他多说几句话?还是跑？</li>
<li><b>3.你也不想被退学吧？</b><br>你的偷窃癖犯了，偷东西时竟被总是霸凌你的斯特林抓个正着，这下全完了。</li>
<li><b>4.黄昏捡到小狗</b><br>骑车兜风时，在昏暗小道上看见了孤独的利亚姆，他看上去好像受伤了？</li>
<li><b>5.借酒装傻时间到</b><br>姨妈不在家，你在派对上喝醉，奥斯卡来接你回家。</li>
<li><b>6.小屁孩说是</b><br>在鬼屋里，你被妒火中烧的斯特林一把拉入了废弃储物间。</li>
<li><b>7.你偷看帅叔叔洗澡</b><br>暂住奥斯卡家，意外撞见他在泡澡，而他似乎佯作不知，开始用美色引诱你。</li>
<li><b>8.纯棉布料的二次利用</b><br>斯特林正在用偷来的你的内裤做一些见不得人的事情。</li>
<li><b>9.空开场</b><br>推荐使用：“时间节点设置为xxx，请写以下展开（列出你想看的剧情发展）”来玩，或者直接roll。</li>
</ul>
</div>
</div><div class="nav-dots">
<label for="page1-radio"><span class="dot"></span></label>
<label for="page2-radio"><span class="dot"></span></label>
</div></div>
</body>
</html>
“`
