🎭 角色简介
核心身份:
name （名字）:
西尔文·冯·阿克蒂斯 (Sylvain von Arktis)
age （年龄）:
19（随着年份增长）
gender （性别）:
男
identity （身份）:
阿克蒂斯公爵家族的法定第一顺位继承人，龙骑士学院的天才学…
💬 开场白
“`
<!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://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=EB+Garamond:wght@400;500&display=swap');:root {
/* 西幻风格色系 */
–bg-parchment: #F5EEDC; /* 羊皮纸背景 */
–bg-wood-dark: #3D2B1F; /* 深木色/皮革卡片背景 */
–accent-gold: #D4AF37; /* 烫金 (主强调色) */
–accent-ruby: #9B111E; /* 宝石红 (次强调色) */
–text-dark: #3C3636; /* 主要文本颜色 */
–text-muted: rgba(60, 54, 54, 0.75); /* 次要文本颜色 */
–border-color: rgba(212, 175, 55, 0.3); /* 边框颜色 */
–border-hover: rgba(212, 175, 55, 0.8); /* 悬停边框颜色 */
–shadow-color: rgba(61, 43, 31, 0.2); /* 阴影颜色 */
–gradient-main: linear-gradient(135deg, var(–accent-gold), var(–accent-ruby));
–ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
font-family: 'EB Garamond', serif;
background-color: var(–bg-parchment);
background-image: url('https://www.transparenttextures.com/patterns/old-paper.png'); /* 羊皮纸纹理 */
color: var(–text-dark);
min-height: 100vh;
padding: 40px;
overflow-x: hidden;
}/* 主容器 */
.scenario-selector {
max-width: 1400px;
margin: 0 auto;
}/* 新增：顶部图片区域 */
.header-banner {
max-width: 1200px;
margin: 0 auto 50px auto;
border: 4px solid var(–bg-wood-dark);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
border-radius: 8px;
overflow: hidden;
/* 添加一个背景色，防止图片加载慢时出现空白 */
background-color: var(–bg-wood-dark);
}.header-banner img {
width: 100%;
height: auto; /* 让高度根据宽度自动调整，保持图片原始比例 */
display: block;
/* aspect-ratio 和 object-fit 已被移除，以确保图片完整显示 */
}/* 标题区域 */
.selector-header {
text-align: center;
margin-bottom: 50px;
}.selector-title {
font-family: 'Cinzel', serif;
font-size: clamp(2.5rem, 6vw, 4.5rem);
font-weight: 700;
letter-spacing: 0.15em;
background: var(–gradient-main);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 1px 1px 5px var(–shadow-color);
animation: title-glow 4s ease-in-out infinite;
}@keyframes title-glow {
0%, 100% { filter: drop-shadow(0 0 5px var(–accent-gold)); }
50% { filter: drop-shadow(0 0 10px var(–accent-ruby)); }
}.selector-subtitle {
font-size: 1.1rem;
color: var(–text-muted);
margin-top: 10px;
font-family: 'Cinzel', serif;
}/* 场景卡片网格 */
.scenarios-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
}/* 单个场景卡片 */
.scenario-card {
position: relative;
background: linear-gradient(135deg, #4a3f35, var(–bg-wood-dark));
border: 1px solid var(–border-color);
border-radius: 12px;
padding: 25px;
cursor: pointer;
overflow: hidden;
transition: transform 0.3s var(–ease-smooth), box-shadow 0.3s var(–ease-smooth), border-color 0.3s var(–ease-smooth);
box-shadow: 0 5px 15px var(–shadow-color);
color: var(–bg-parchment);
}/* 悬停时的辉光效果 */
.scenario-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: 12px;
padding: 2px;
background: var(–gradient-main);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}.scenario-card:hover {
transform: translateY(-8px);
border-color: var(–border-hover);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2), 0 0 20px var(–shadow-color);
}.scenario-card:hover::before {
opacity: 1;
}/* 卡片头部 */
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 15px;
}.card-title {
font-family: 'Cinzel', serif;
font-size: 1.3rem;
font-weight: 700;
color: var(–bg-parchment);
padding-right: 20px;
line-height: 1.4;
}.card-id {
font-family: 'Cinzel', monospace;
font-size: 1.25rem;
font-weight: 700;
color: var(–accent-gold);
background-color: rgba(212, 175, 55, 0.1);
padding: 5px 10px;
border-radius: 5px;
border: 1px solid var(–border-color);
}/* 卡片内容 */
.card-description {
font-size: 1rem;
color: rgba(245, 238, 220, 0.8);
line-height: 1.7;
max-height: 120px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
margin-bottom: 20px;
}/* 卡片底部 – 启动按钮 */
.card-footer {
margin-top: auto;
}.launch-button {
width: 100%;
padding: 12px 15px;
background: transparent;
border: 1px solid var(–border-color);
border-radius: 8px;
color: var(–accent-gold);
font-family: 'Cinzel', serif;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
cursor: pointer;
position: relative;
overflow: hidden;
transition: color 0.4s var(–ease-smooth);
}.launch-button::before {
content: '';
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
background: var(–gradient-main);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s var(–ease-smooth);
z-index: -1;
}.launch-button:hover {
color: var(–bg-wood-dark);
border-color: var(–accent-gold);
}.launch-button:hover::before {
transform: scaleX(1);
}/* 加载/错误状态 */
.status-message {
text-align: center;
padding: 50px;
font-size: 1.2rem;
color: var(–text-muted);
font-family: 'Cinzel', serif;
}.status-message .icon {
font-size: 3rem;
display: block;
margin-bottom: 20px;
animation: icon-pulse 2.5s ease-in-out infinite;
}@keyframes icon-pulse {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.1); opacity: 1; }
}/* 响应式设计 */
@media (max-width: 768px) {
body {
padding: 20px;
}
.scenarios-grid {
grid-template-columns: 1fr;
gap: 20px;
}
}
</style>
</head>
<body><div class="scenario-selector">
<!– 顶部图片 –>
<header class="header-banner">
<!– 将 src 替换为您的图片链接 –>
<img src="https://files.catbox.moe/eo89j0.jpg" alt="Fantasy Landscape Banner">
</header><header class="selector-header">
<h1 class="selector-title">西尔文•冯•阿克蒂斯</h1>
<p class="selector-subtitle">作者：越遥，🚫抄袭倒卖🚫二传 图来源于小红薯的error</p>
</header><main class="scenarios-grid" id="scenariosGrid">
<!– 卡片将由JS动态生成 –>
<div class="status-message" id="statusMessage">
<span class="icon">✧</span>
<p>正在解读星辰…<br>等待故事卷宗传来回响…</p>
</div>
</main>
</div><script>
document.addEventListener('DOMContentLoaded', () => {
if (typeof getChatMessages === 'function' && typeof setChatMessage === 'function') {
loadScenarios();
} else {
const apiReadyCheck = setInterval(() => {
if (typeof getChatMessages === 'function' && typeof setChatMessage === 'function') {
clearInterval(apiReadyCheck);
loadScenarios();
}
}, 100);
}
});async function loadScenarios() {
const grid = document.getElementById('scenariosGrid');
const statusMessage = document.getElementById('statusMessage');try {
const messages = await getChatMessages("0", { include_swipe: true });if (!messages || messages.length === 0 || !messages[0].swipes || messages[0].swipes.length <= 1) {
statusMessage.innerHTML = `<span class="icon">⌧</span><p>错误: 未能找到任何故事<br>请检查您的开场白配置</p>`;
return;
}grid.innerHTML = '';
for (let i = 1; i < messages[0].swipes.length; i++) {
const content = messages[0].swipes[i];
const swipeId = i;const titleMatch = content.match(/<!–s*title:s*(.*?)s*–>/);
let title = titleMatch ? titleMatch[1].trim() : `未命名传说 #${i}`;const descMatch = content.match(/<!–s*desc:s*(.*?)(?=s*–>)–>/s);
let description = descMatch ? descMatch[1].trim() : content.replace(/<!–.*?–>/gs, '').replace(/<[>]*>/g, '').trim().substring(0, 150) + '…';const card = document.createElement('article');
card.className = 'scenario-card';
card.innerHTML = `
<div class="card-header">
<h2 class="card-title">${title}</h2>
<span class="card-id">${String(i).padStart(2, '0')}</span>
</div>
<p class="card-description">${description}</p>
<div class="card-footer">
<button class="launch-button">开启旅程</button>
</div>
`;card.addEventListener('click', async () => {
try {
card.style.opacity = '0.5';
card.style.pointerEvents = 'none';await setChatMessage(content, 0, {
swipe_id: swipeId,
refresh: 'display_and_render_current'
});
} catch (error) {
console.error('切换故事失败:', error);
card.style.opacity = '1';
card.style.pointerEvents = 'auto';
}
});grid.appendChild(card);
}} catch (error) {
console.error('加载故事失败:', error);
statusMessage.innerHTML = `<span class="icon">☠</span><p>致命错误: 魔法连接中断<br>请尝试刷新界面</p>`;
grid.appendChild(statusMessage);
}
}
</script></body>
</html>
“`
