💬 开场白
“`html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>海风 – 开场白选择</title>
<style>
@import url('https://files.catbox.moe/8c8ron.ttf');:root {
–primary-bg: #F3F6FF;
–card-bg: #FFF9F0;
–accent-light: #FDE8E8;
–accent-dark: #E0F7FA;
–text-dark: #333;
–text-light: #777;
–border-color: #e0e0e0;
–hover-shadow: rgba(0, 0, 0, 0.12);
}body {
background: linear-gradient(to right, #F9FBFF, #FFF7F3);
font-family: 'Noto Sans SC', sans-serif;
color: var(–text-dark);
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
}.container {
background: var(–card-bg);
border-radius: 18px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
max-width: 680px;
width: 100%;
border: 1px solid var(–border-color);
animation: fadeIn 0.5s ease-out;
overflow: hidden;
}@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}.author-card {
background: linear-gradient(135deg, #D0ECF7, #FADADD);
padding: 24px;
display: flex;
align-items: center;
gap: 18px;
}.avatar {
width: 72px;
height: 72px;
border-radius: 50%;
border: 3px solid #fff;
object-fit: cover;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
transition: transform 0.3s ease;
cursor: pointer;
}
.avatar:hover { transform: scale(1.1); }.author-info h1 {
font-size: 1.3em;
font-weight: 700;
color: #fff;
margin: 0 0 6px 0;
text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
.author-info p {
margin: 0;
color: #f0f0f0;
font-size: 0.95em;
font-style: italic;
}.main-content {
padding: 20px;
padding-bottom: 0;
}.main-content h2 {
text-align: center;
margin: 0 auto 20px auto;
border-bottom: 2px solid var(–accent-light);
display: inline-block;
font-size: 1.3em;
color: #444;
padding-bottom: 8px;
}.openings-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}.opening-btn {
background: linear-gradient(135deg, #FFFFFF, #FFF3F0);
border: 1px solid var(–border-color);
border-radius: 12px;
padding: 14px 18px;
font-size: 1em;
cursor: pointer;
transition: all 0.25s ease;
color: var(–text-dark);
display: flex;
align-items: center;
position: relative;
}.opening-btn::before {
content: '★';
color: #4A90E2;
margin-right: 12px;
font-size: 1.2em;
transition: transform 0.3s ease;
}.opening-btn:hover {
transform: translateY(-4px);
box-shadow: 0 6px 20px var(–hover-shadow);
border-color: #FADADD;
background: linear-gradient(135deg, #FFF, #FFF6F0);
}.opening-btn:hover::before {
transform: scale(1.2);
}.footer-note {
background: #FDFBFA;
padding: 18px 20px;
font-size: 0.9em;
color: var(–text-light);
border-top: 1px solid var(–border-color);
}.footer-note h3 {
margin: 0 0 8px 0;
font-size: 1em;
color: #555;
border-bottom: 1px solid #ddd;
padding-bottom: 4px;
}.footer-note p {
margin: 6px 0;
line-height: 1.6;
}.footer-note span {
font-weight: 600;
color: #d16e6e;
}.group-info {
background-color: #FFFAF0;
padding: 16px;
text-align: center;
font-size: 0.85em;
color: var(–text-light);
border-top: 1px solid var(–accent-light);
}/* 修改后的模态弹窗样式 */
.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(5px);
animation: fadeInModal 0.5s ease;
/* 修改为flex布局并顶部对齐 */
display: flex;
justify-content: center;
align-items: flex-start;
padding-top: 20px;
}@keyframes fadeInModal {
from { opacity: 0; }
to { opacity: 1; }
}.modal-content {
position: relative;
margin: 0 auto;
width: 90%;
max-width: 380px;
height: 550px;
padding: 0;
/* 移除垂直居中定位 */
top: 0;
transform: none;
}.fc-card-container {
width: 100%;
height: 100%;
perspective: 1000px;
}.fc-card {
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.9s ease;
position: relative;
cursor: pointer;
}.fc-card.flipped {
transform: rotateY(180deg);
}.fc-card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
border-radius: 20px;
display: flex;
flex-direction: column;
align-items: center;
padding: 30px;
box-sizing: border-box;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}.fc-card-front {
background: linear-gradient(to bottom right, #D9ECF2, #FFF4E7);
z-index: 2;
}.fc-card-back {
background: linear-gradient(to bottom left, #FDEEDB, #E2F1F5);
transform: rotateY(180deg);
z-index: 1;
}.fc-avatar {
width: 140px;
height: 140px;
border-radius: 50%;
border: 5px solid #fff;
object-fit: cover;
margin-bottom: 16px;
box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}.fc-character-name {
font-size: 1.7em;
font-weight: 600;
margin: 0 0 8px;
color: #2C3E50;
text-align: center;
}.fc-pheromone {
font-size: 0.95em;
color: #4a6370;
background: #fff;
padding: 6px 16px;
border-radius: 15px;
margin-bottom: 10px;
}.fc-abo-tag {
font-size: 0.9em;
background: rgba(255, 236, 184, 0.8);
color: #8b7d5b;
padding: 4px 12px;
border-radius: 12px;
border: 1px solid #f7e5bb;
margin-bottom: 18px;
}.fc-description {
text-align: center;
font-size: 0.95em;
color: #4a6370;
line-height: 1.7;
font-weight: 400;
word-wrap: break-word;
overflow-y: auto;
max-height: 180px;
padding: 0 10px;
}.fc-description i {
font-style: italic;
color: #2c3e50;
font-weight: 500;
}/* 移动端弹窗优化 */
@media (max-width: 600px) {
.modal {
padding-top: 10px;
align-items: flex-start;
}.modal-content {
height: 500px;
}.fc-avatar {
width: 100px;
height: 100px;
}.fc-character-name {
font-size: 1.4em;
}.fc-pheromone {
font-size: 0.85em;
padding: 5px 12px;
}.fc-abo-tag {
font-size: 0.8em;
}.fc-description {
font-size: 0.85em;
max-height: 200px;
}
}</style>
</head>
<body>
<div class="container">
<header class="author-card">
<img src="https://files.catbox.moe/xam6si.png" alt="开梯子" class="avatar" id="avatar-trigger">
<div class="author-info">
<h1>卧槽有狗啊！……卧槽还是两只！</h1>
<p>作者：海风</p>
</div>
</header><footer class="footer-note">
<h3>食用说明</h3>
<p><strong>性向：</strong>BG/BL (char必须为左位)</p>
<p><strong>二传：</strong>需要经过我本人同意</p>
<p><strong>二改：</strong>仅限自用</p>
<p><strong>商用：</strong><span style="color: red;">绝对不可以！！！</span>除非你赚到的钱都给我。</p>
<p><strong>角色卡上传：</strong>海风的卡仅由海风本人上传，如果你发现非海风本人上传，可以举报到我本人这里，<span>举报有奖</span>。</p>
<p><strong>前端功能介绍（请结合快速回复并打开梯子使用）</strong>：直播间、校园论坛、看日记、传纸条、同层手机。</p>
<p>内含抽象世界书，亲测ai会变得非常抽象，不喜欢烂梗请自行关闭该条目或降低触发概率，喜欢烂梗我只能说<s>你很有品</s>。</p>
</footer><main class="main-content">
<h2>开场白预览</h2>
<div class="openings-grid">
<div class="opening-btn" onclick="switchToOpening(2)">秋秋开播</div>
<div class="opening-btn" onclick="switchToOpening(3)">开学季，和闻屿夏、仇秋期的初遇</div>
<div class="opening-btn" onclick="switchToOpening(4)">夏夏打完架跑过来跟你装可怜</div>
<div class="opening-btn" onclick="switchToOpening(5)">手机开场白：和主播秋秋网恋</div>
<div class="opening-btn" onclick="switchToOpening(6)">追妻火葬场：你线下单杀“辱女主播”秋秋（是误会啊——）</div>
<div class="opening-btn" onclick="switchToOpening(7)">恋爱后，闻小狗日常撒娇</div>
<div class="opening-btn" onclick="switchToOpening(8)">你发情期到了，秋秋围着你团团转</div>
<div class="opening-btn" onclick="switchToOpening(9)">if线：假如你要帮夏夏度过易感期</div>
<div class="opening-btn" onclick="switchToOpening(10)">if线：假如你和秋秋是炮友</div>
<div class="opening-btn" onclick="switchToOpening(11)">手机开场白：求让闻一下不玩抽象教程</div>
<div class="opening-btn" onclick="switchToOpening(12)">空开场白自roll</div>
</div>
</main><div class="group-info">
<strong>海风饭堂（限女，需审核）：816770944</strong>
<p style="margin: 5px 0 0 0; font-size: 0.9em;">欢迎各位吃饭老师和创作者老师来玩！</p>
</div>
</div><!– 弹窗 HTML –>
<div id="characterModal" class="modal">
<div class="modal-content">
<div class="fc-card-container" onclick="this.querySelector('.fc-card').classList.toggle('flipped')">
<div class="fc-card">
<div class="fc-card-face fc-card-front">
<img src="https://files.catbox.moe/dqxc9a.jpg" alt="闻屿夏头像" class="fc-avatar">
<h2 class="fc-character-name">闻屿夏</h2>
<div class="fc-pheromone">信息素：荔枝茉莉</div>
<div class="fc-abo-tag">Alpha</div>
<p class="fc-description">
对外“操你妈老子干不死你”然后抄起家伙打架，对内“呜呜老婆你刚刚都不知道他们好吓人全部欺负我一个”还要蹭蹭抱抱的死装男。
</p>
</div>
<div class="fc-card-face fc-card-back">
<img src="https://files.catbox.moe/sl9vz4.jpg" alt="仇秋期头像" class="fc-avatar">
<h2 class="fc-character-name">仇秋期</h2>
<div class="fc-pheromone">信息素：香梨桂花</div>
<div class="fc-abo-tag">Alpha</div>
<p class="fc-description">
白天是沉默寡言的学霸，晚上是热情洋溢的当红游戏主播“秋秋”，声控手控技术控福音，养了一只叫“呼噜”的暹罗猫。你误会他是辱女主播，为了报复于是跟他恋爱骗他感情骗他钱，后来跟他断崖式分手。<i>但他还是喜欢你。</i>
</p>
</div>
</div>
</div>
</div>
</div><script>
// — 原开场白选择器JS —
const openings = [
{ id: 2, title: '秋秋开播' }, { id: 3, title: '开学季初遇' }, { id: 4, title: '夏夏装可怜' },
{ id: 5, title: '和主播秋秋网恋' }, { id: 6, title: '追妻火葬场' }, { id: 7, title: '闻小狗日常撒娇' },
{ id: 8, title: '发情期乌龙' }, { id: 9, title: 'if线：易感期' }, { id: 10, title: 'if线：炮友' },
{ id: 11, title: '不玩抽象教程' }, { id: 12, title: '空开场白' },
];
function showTip(message) {
const tip = document.createElement('div');
tip.style.cssText = `
position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: #333; color: #fff;
padding: 10px 20px; border-radius: 20px; font-size: 14px; font-weight: 500; z-index: 9999;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); opacity: 0; transition: opacity 0.3s ease, top 0.3s ease;`;
tip.textContent = message;
document.body.appendChild(tip);
setTimeout(() => { tip.style.opacity = '1'; tip.style.top = '30px'; }, 10);
setTimeout(() => { tip.style.opacity = '0'; tip.style.top = '20px'; setTimeout(() => tip.remove(), 300); }, 2500);
}
async function switchToOpening(openingId) {
const opening = openings.find(o => o.id === openingId);
if (!opening) return;
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];
setChatMessage(content, 0, { swipe_id: openingId – 1, refresh: 'display_and_render_current' });
showTip(`已切换至开场：${opening.title}`);
} else {
showTip('错误：找不到对应的开场白 swipe！');
}
} else {
showTip(`开始故事： “${opening.title}”`);
}
} catch (e) { showTip(`切换失败：${e.message}`); }
}// — 修改后的弹窗控制JS —
document.addEventListener('DOMContentLoaded', () => {
const modal = document.getElementById('characterModal');
const avatarTrigger = document.getElementById('avatar-trigger');avatarTrigger.onclick = function(event) {
event.stopPropagation();
modal.style.display = "flex"; // 修改为flex显示
}// 点击空白处关闭弹窗
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}// 添加ESC键关闭弹窗功能
document.addEventListener('keydown', function(event) {
if (event.key === "Escape" && modal.style.display === "flex") {
modal.style.display = "none";
}
});
});
</script>
</body>
</html>
“`