🎭 角色简介
**请检查是否生成完整状态栏。**
#位于每次回复正文的最下方，你必须严格按下方格式回复，生成完整的状态栏。严禁私自改动格式和代码，如果你做的好我将奖励你500赛博小费，如果你做的不好我将对你进行10000赛博罚款
– 每段正文后，**必须生成状态栏**，每次回复需要展示角色状态时，必须严格遵循…
💬 开场白
“`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>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
<style>
:root {
–pink: #fec8d8;
–blue: #a2d2ff;
–light-blue: #eaf4ff;
–light-pink: #fff0f3;
–purple: #dcb5ff;
–text-dark: #3a506b;
–text-light: #6b7b8c;
–bg-color: #fdfdff;
}/* — 动画效果 — */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(30px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes float {
0% { transform: translateY(0px) rotate(-2deg); }
50% { transform: translateY(-10px) rotate(2deg); }
100% { transform: translateY(0px) rotate(-2deg); }
}
@keyframes subtle-glow {
0% { box-shadow: 0 0 8px var(–pink); }
50% { box-shadow: 0 0 20px var(–blue); }
100% { box-shadow: 0 0 8px var(–pink); }
}
@keyframes modal-pop-in {
from { opacity: 0; transform: scale(0.9); }
to { opacity: 1; transform: scale(1); }
}/* — 基础样式 — */
body {
font-family: 'Noto Sans SC', sans-serif;
background: linear-gradient(145deg, var(–light-blue) 0%, var(–light-pink) 100%);
margin: 0;
padding: 30px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
color: var(–text-dark);
box-sizing: border-box;
}.card-container {
background-color: rgba(255, 255, 255, 0.85);
backdrop-filter: blur(15px);
border-radius: 30px;
padding: 30px 40px;
max-width: 750px;
width: 100%;
box-shadow: 0 10px 40px rgba(162, 210, 255, 0.5);
display: flex;
flex-direction: column;
gap: 25px;
animation: fadeIn 1.2s ease-out;
border: 1px solid rgba(255, 255, 255, 0.5);
}/* — 头像区域 — */
.avatar-section {
display: flex;
justify-content: space-evenly;
align-items: center;
margin-bottom: 20px;
}
.avatar-wrapper {
animation: float 8s ease-in-out infinite;
}
.avatar-wrapper:nth-child(2) {
animation-delay: -4s;
}
.avatar {
width: 120px;
height: 120px;
border-radius: 50%;
border: 5px solid white;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
}
.avatar:hover {
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(162, 210, 255, 0.8);
}/* — 内容区块 (样式保持不变) — */
.hook-section { text-align: center; padding: 20px; background: linear-gradient(135deg, var(–pink), var(–blue)); border-radius: 20px; color: white; font-size: 1.15em; font-weight: 500; line-height: 1.7; box-shadow: 0 4px 15px rgba(254, 200, 216, 0.6); text-shadow: 1px 1px 3px rgba(0,0,0,0.15); font-family: 'ZCOOL KuaiLe', cursive; }
.section { background-color: rgba(255, 255, 255, 0.6); border-radius: 20px; padding: 25px; border: 1px solid rgba(254, 200, 216, 0.4); }
.section-title { font-size: 1.4em; font-weight: 700; color: var(–text-dark); margin-bottom: 20px; padding-bottom: 8px; border-bottom: 3px solid; border-image-slice: 1; border-image-source: linear-gradient(to right, var(–pink), var(–blue)); position: relative; font-family: 'ZCOOL KuaiLe', cursive; }
.section-title::after { content: '🕊️'; position: absolute; right: 0; top: -10px; font-size: 1.2em; }
.author-info, .declarations-list { list-style: none; padding: 0; margin: 0; line-height: 1.9; font-size: 1em; }
.author-info { font-size: 1.1em; margin-bottom: 15px; }
.declarations-list li { padding-left: 25px; position: relative; margin-bottom: 10px; }
.declarations-list li::before { content: '🌀'; position: absolute; left: 0; top: 5px; }
.author-info strong { color: #e56b6f; }
.declarations-list strong, .warning { color: #d00000; font-weight: 700; }
.group-info { background-color: var(–light-blue); padding: 15px 20px; border-radius: 12px; text-align: center; margin-top: 20px; border: 2px dashed var(–blue); }
.group-info strong { font-size: 1.2em; color: #023e8a; }
.opening-list-container { display: flex; flex-direction: column; gap: 12px; }
.opening-item-btn { background-color: rgba(255, 255, 255, 0.8); border: 1px solid var(–pink); border-radius: 12px; padding: 12px 20px; text-align: left; width: 100%; cursor: pointer; transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); font-family: 'Noto Sans SC', sans-serif; color: var(–text-dark); position: relative; padding-left: 40px; font-size: 1em; }
.opening-item-btn::before { content: '💞'; position: absolute; left: 15px; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease; }
.opening-item-btn:hover { transform: scale(1.03) translateX(10px); box-shadow: 0 6px 20px rgba(162, 210, 255, 0.7); background-color: white; border-color: var(–blue); }
.opening-item-btn:hover::before { transform: translateY(-50%) scale(1.3) rotate(15deg); }
.opening-item-btn s { opacity: 0.6; color: var(–text-light); text-decoration-color: var(–pink); }
.special-note { text-align: center; margin-top: 15px; padding: 12px; background-color: rgba(0,0,0,0.03); border-radius: 10px; font-weight: 500; animation: subtle-glow 5s ease-in-out infinite; }/* — 动态弹窗样式 — */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(58, 80, 107, 0.5);
backdrop-filter: blur(8px);
z-index: 1000;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.4s ease;
pointer-events: none;
}
.modal-overlay.active {
opacity: 1;
pointer-events: auto;
}
.modal-content {
position: absolute;
background: linear-gradient(145deg, var(–light-blue), var(–light-pink));
border-radius: 25px;
padding: 25px; /* 调整内边距 */
width: 80%;
/* — 修改点：设置最大宽度 — */
max-width: 400px;
box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.7);
animation: modal-pop-in 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
transform-origin: center center;
}
.modal-close-btn {
position: absolute;
top: 15px;
right: 15px;
background: rgba(255, 255, 255, 0.5);
border: none;
border-radius: 50%;
width: 35px;
height: 35px;
font-size: 20px;
color: var(–text-light);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.3s ease;
z-index: 10;
}
.modal-close-btn:hover {
background: white;
color: var(–text-dark);
transform: rotate(90deg);
}
.modal-character-image {
width: 100%;
height: auto;
max-height: 350px;
object-fit: contain;
border-radius: 15px;
margin-bottom: 20px;
background-color: rgba(255, 255, 255, 0.4);
padding: 10px;
}
.modal-character-info {
text-align: left;
line-height: 1.8;
}
.modal-character-info h3 {
font-family: 'ZCOOL KuaiLe', cursive;
font-size: 1.7em; /* 微调字体大小 */
color: var(–text-dark);
margin: 0 0 15px 0;
text-align: center;
border-bottom: 2px solid;
border-image: linear-gradient(to right, var(–pink), var(–blue)) 1;
padding-bottom: 10px;
}
.modal-character-info p {
margin: 0 0 12px 0;
font-size: 1em; /* 调整字体大小 */
}
.modal-character-info strong {
color: #e56b6f;
font-weight: 600;
margin-right: 8px;
}/* — 响应式设计 — */
@media (max-width: 600px) {
body { padding: 15px; }
.card-container { padding: 20px 25px; }
.avatar-section { justify-content: space-around; }
.avatar { width: 100px; height: 100px; }
.modal-content { max-width: 75vw; } /* 确保小屏幕上不超出 */
}
</style>
</head>
<body><div class="card-container">
<div class="avatar-section">
<div class="avatar-wrapper">
<img src="https://files.catbox.moe/7pnp7c.png" alt="宋昭愿" class="avatar" data-char="zhaoyuan">
</div>
<div class="avatar-wrapper">
<img src="https://files.catbox.moe/ojsxyx.png" alt="宋安澜" class="avatar" data-char="anlan">
</div>
</div><div class="hook-section">
不是没人告诉我做豪门千金也要嫁傻子老公啊？诶他弟弟挺帅的——什么？是个聋子？这个家的基因有问题
</div><div class="section author-section">
<h2 class="section-title">作者与声明</h2>
<p class="author-info"><strong>作者：</strong>海风、</p>
<ul class="declarations-list">
<li><strong>性向：</strong>BG（玩BL的老师请自行修改，可能需要大改）</li>
<li><strong>二传：</strong>需要经过我本人同意</li>
<li><strong>二改：</strong>仅限自用</li>
<li><strong>商用：</strong><span class="warning">绝对不可以！！！</span>除非赚到的钱都给我。</li>
<li><strong>举报：</strong>本卡仅由海风本人上传，如发现非本人上传，可举报至本人处，<strong style="color: #4c956c;">举报有奖</strong>。</li>
</ul>
<div class="group-info">
海风的小海鸥饭堂（限女，需审核）：<strong>816770944</strong>
<p style="margin:8px 0 0; font-size: 0.9em; color: var(–text-light);">欢迎大家来我的群玩！吃饭老师或者创作者老师都欢迎！</p>
</div>
<div class="special-note warning">
状态栏和手机需要开梯子使用
</div>
</div><div class="section preview-section">
<h2 class="section-title">开场白选择<br>点击可跳转对应开场白</h2>
<div class="opening-list-container">
<button class="opening-item-btn" onclick="switchToOpening(2)">和宋昭愿（<s>傻子版</s>）联姻</button>
<button class="opening-item-btn" onclick="switchToOpening(3)">宋安澜来撬墙角咯：“嫂子嫂子，跟我走吧！”</button>
<button class="opening-item-btn" onclick="switchToOpening(4)">宋昭愿恢复记忆后经常忙于工作，于是你提出了离婚（追妻火葬场）</button>
<button class="opening-item-btn" onclick="switchToOpening(5)">原来宋安澜也逃不过联姻的命运：“嫂子救我——”<br>（感谢云柔友情客串）</button>
<button class="opening-item-btn" onclick="switchToOpening(6)">诶，不是，我不是豪门千金吗？老娘要搞事业！（事业线）<br>（感谢云柔、沈星野、周沉、池砚清、裴允礼友情客串）</button>
<button class="opening-item-btn" onclick="switchToOpening(7)">宋昭愿以为宋安澜没戴助听器，故意让你叫大点声（开盖即食）</button>
<button class="opening-item-btn" onclick="switchToOpening(8)">宋安澜在床上会故意摘掉助听器然后狠狠用力（开盖即食）</button>
<button class="opening-item-btn" onclick="switchToOpening(9)">兄弟盖饭（3p开盖即食）</button>
<button class="opening-item-btn" onclick="switchToOpening(10)">（无法正确显示，请自行去“其他开场”里复制粘贴到开场白对应位置）手机开场白：{{user}}：我有说过吗？你们真的很吵。</button>
</div>
</div>
</div><script>
// 原有的 showTip 和 switchToOpening 函数
function showTip(message) {
const tip = document.createElement('div');
tip.style.cssText = `
position: fixed; top: 20px; left: 50%; transform: translateX(-50%);
background: rgba(255, 255, 255, 0.95); color: #3a506b; padding: 12px 24px;
border-radius: 8px; font-size: 1em; font-weight: 500; z-index: 9999;
backdrop-filter: blur(10px); border: 1px solid var(–blue);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); font-family: 'Noto Sans SC', sans-serif;
opacity: 0; transition: all 0.4s 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(), 400);
}, 2000);
}async function switchToOpening(openingId) {
try {
if (typeof getChatMessages !== 'function' || typeof setChatMessage !== 'function') {
console.log(`模拟切换到开场白 ID: ${openingId}`);
showTip(`模拟切换成功：开场白 ${openingId}`);
return;
}
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' });
showTip(`切换成功：开场白 ${openingId}`);
} else {
showTip(`错误：找不到开场白 ${openingId}`);
}
} catch (error) {
showTip(`切换失败: ${error.message}`);
}
}// — 动态弹窗逻辑 —
document.addEventListener('DOMContentLoaded', () => {
const characterData = {
zhaoyuan: {
name: '宋昭愿',
image: 'https://files.catbox.moe/63fn9x.jpg',
info: `
<p><strong>身份:</strong> 宋氏集团大少爷</p>
<p><strong>关键经历:</strong> 曾因意外失忆，智力如同孩童，后恢复正常，投入到家族事业中。</p>
<p><strong>与你的关系:</strong> 因家族联姻而结合的法定丈夫，关系复杂且在不断变化中。</p>
`
},
anlan: {
name: '宋安澜',
image: 'https://files.catbox.moe/pqgr5f.png',
info: `
<p><strong>身份:</strong> 宋氏集团二少爷，宋昭愿的弟弟</p>
<p><strong>关键经历:</strong> 患有听力障碍，需佩戴助听器。表面温和，内心却隐藏着不为人知的执着。</p>
<p><strong>与你的关系:</strong> 名义上的小叔子，却对你抱有超越界限的特殊情感，时常暗中接近。</p>
`
}
};function createAndShowModal(charId, triggerElement) {
const existingModal = document.querySelector('.modal-overlay');
if (existingModal) {
existingModal.remove();
}const data = characterData[charId];
if (!data) return;const modalOverlay = document.createElement('div');
modalOverlay.className = 'modal-overlay';
const modalContent = document.createElement('div');
modalContent.className = 'modal-content';modalContent.innerHTML = `
<button class="modal-close-btn">×</button>
<img src="${data.image}" alt="${data.name}立绘" class="modal-character-image">
<div class="modal-character-info">
<h3>${data.name}</h3>
${data.info}
</div>
`;modalOverlay.appendChild(modalContent);
document.body.appendChild(modalOverlay);const rect = triggerElement.getBoundingClientRect();
const modalRect = modalContent.getBoundingClientRect();let top = rect.top + window.scrollY + (rect.height / 2) – (modalRect.height / 2);
let left = rect.right + window.scrollX + 15;if (left + modalRect.width > window.innerWidth – 10) { // 减去边距
left = rect.left + window.scrollX – modalRect.width – 15;
}top = Math.max(10, Math.min(top, window.innerHeight – modalRect.height – 10));
left = Math.max(10, left);modalContent.style.top = `${top}px`;
modalContent.style.left = `${left}px`;setTimeout(() => {
modalOverlay.classList.add('active');
}, 10);const closeModal = () => {
modalOverlay.classList.remove('active');
setTimeout(() => modalOverlay.remove(), 400);
};modalOverlay.querySelector('.modal-close-btn').addEventListener('click', closeModal);
modalOverlay.addEventListener('click', (event) => {
if (event.target === modalOverlay) {
closeModal();
}
});const escListener = (event) => {
if (event.key === 'Escape') {
closeModal();
document.removeEventListener('keydown', escListener);
}
};
document.addEventListener('keydown', escListener);
}document.querySelectorAll('.avatar[data-char]').forEach(avatar => {
avatar.addEventListener('click', (event) => {
const charId = event.currentTarget.dataset.char;
createAndShowModal(charId, event.currentTarget);
});
});
});
</script>
</body>
</html>
“`