🎭 角色简介
Physical_Manifestation:
parameters:
birth: "10.22"
constellation: "天秤座"
blood type: "A型"
height: "180cm"
build: "修长匀称"
…
💬 开场白
“`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>
:root {
/* 色彩系统 */
–color-primary: #FFC107; /* 向日葵黄 */
–color-primary-dark: #FFA000;
–color-secondary: #4CAF50; /* 绿叶色 */
–color-background: #FFF8E1; /* 温暖米白 */
–color-surface: #FFFFFF;
–color-text: #5D4037; /* 深棕色 */
–color-text-light: #795548;
–color-border: #FFECB3;
–color-shadow: rgba(188, 145, 25, 0.15);
–color-warning-bg: #FFF3E0;
–color-warning-text: #E65100;/* 字体系统 */
–font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
–font-size-title: 1.5rem;
–font-size-subtitle: 1.1rem;
–font-size-body: 1rem;
–font-size-small: 0.875rem;/* 空间韵律 */
–spacing-unit: 8px;
–spacing-xs: calc(var(–spacing-unit) * 0.5); /* 4px */
–spacing-sm: var(–spacing-unit); /* 8px */
–spacing-md: calc(var(–spacing-unit) * 2); /* 16px */
–spacing-lg: calc(var(–spacing-unit) * 3); /* 24px */
–spacing-xl: calc(var(–spacing-unit) * 4); /* 32px *//* 样式规范 */
–border-radius: 12px;
–box-shadow: 0 4px 12px var(–color-shadow);
–transition-duration: 0.3s;
}/* 全局设定 */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}body {
font-family: var(–font-family);
background-color: var(–color-background);
color: var(–color-text);
display: flex;
justify-content: center;
align-items: flex-start;
min-height: 100vh;
padding: var(–spacing-lg);
line-height: 1.6;
}/* 主容器 */
.character-card-container {
width: 100%;
max-width: 500px;
background-color: var(–color-surface);
border-radius: var(–border-radius);
box-shadow: var(–box-shadow);
overflow: hidden;
border: 1px solid var(–color-border);
}/* 折叠部分 (Accordion) */
.accordion-item {
border-bottom: 1px solid var(–color-border);
}
.accordion-item:last-child {
border-bottom: none;
}.accordion-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(–spacing-md) var(–spacing-lg);
cursor: pointer;
background-color: var(–color-surface);
transition: background-color var(–transition-duration) ease;
}.accordion-header:hover {
background-color: var(–color-background);
}.accordion-title {
font-size: var(–font-size-subtitle);
font-weight: 600;
display: flex;
align-items: center;
gap: var(–spacing-sm);
}.accordion-icon {
font-size: 1.2rem;
}.accordion-arrow {
width: 24px;
height: 24px;
transition: transform var(–transition-duration) cubic-bezier(0.68, -0.55, 0.27, 1.55);
}.accordion-item[data-state="expanded"] .accordion-arrow {
transform: rotate(180deg);
}.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height var(–transition-duration) ease-in-out, padding var(–transition-duration) ease-in-out;
background-color: #fff;
}.accordion-content-inner {
padding: 0 var(–spacing-lg) var(–spacing-md);
opacity: 0;
transition: opacity var(–transition-duration) ease-in-out;
}.accordion-item[data-state="expanded"] .accordion-content {
max-height: 1000px; /* A large enough value */
}.accordion-item[data-state="expanded"] .accordion-content-inner {
opacity: 1;
}/* 内容样式 */
.content-prose {
font-size: var(–font-size-body);
color: var(–color-text-light);
}
.content-prose p {
margin-bottom: var(–spacing-md);
}
.content-prose p:last-child {
margin-bottom: 0;
}.preset-list{
list-style: none;
padding-left: 0;
margin-top: var(–spacing-sm);
}
.preset-list li {
position: relative;
padding-left: calc(var(–spacing-md) + var(–spacing-xs));
margin-bottom: var(–spacing-sm);
}
.preset-list li::before {
content: '🌻';
position: absolute;
left: 0;
top: 2px;
color: var(–color-primary);
}/* 预警模块 */
.warning-box {
background-color: var(–color-warning-bg);
color: var(–color-warning-text);
border-left: 4px solid var(–color-primary-dark);
padding: var(–spacing-md);
margin-top: var(–spacing-md);
border-radius: 0 var(–spacing-sm) var(–spacing-sm) 0;
}
.warning-box p {
margin-bottom: 0;
font-size: var(–font-size-small);
font-weight: 500;
}
</style>
</head>
<body><div class="character-card-container" id="characterCard">
<!– Data will be rendered here by JavaScript –>
</div><script>
document.addEventListener('DOMContentLoaded', () => {
// 数据驱动模型：定义所有界面数据的"唯一真实之源"
const cardData = {
// 每个条目的 'state' 可以是 'collapsed' 或 'expanded'
items: [
{
id: 'intro',
icon: '👤',
title: '角色简介：加贺见 葵 (Kagami Aoi)',
content: `<div class="content-prose"><p>因雨天意外失去恋人记忆的摄影师。表面开朗幽默且擅长撩拨人心，实则始终与他人保持微妙距离感，这种矛盾构成其核心特质。</p><p>你将在谎言的开端扮演其恋人，通过逐步的互动与揭示，探寻他遗忘的记忆与尘封的真心。</p></div>`,
state: 'expanded' // 默认展开简介
},
{
id: 'mutter',
icon: '💬',
title: '碎碎念',
content: `<div class="content-prose"><p>再次见面！这次是葵～</p><ul class="preset-list"><li>推荐预设：兔缺乌沉，恶灵（短信版）</li><li>制卡预设：女娲</li></ul></div>`,
state: 'collapsed'
},
{
id: 'warning',
icon: '⚠️',
title: '预警与说明',
content: `<div class="warning-box"><p>本角色卡免费发布于dc和qq群，请不要付费获取～禁止二传，可以进行不ooc的二改，仅可使用女性user进行游玩哦！</p></div>`,
state: 'collapsed'
}
]
};const container = document.getElementById('characterCard');
// 渲染函数：读取数据源并更新DOM
const renderCard = () => {
let html = '';
cardData.items.forEach(item => {
html += `
<div class="accordion-item" data-id="${item.id}" data-state="${item.state}">
<div class="accordion-header">
<h3 class="accordion-title">
<span class="accordion-icon">${item.icon}</span>
${item.title}
</h3>
<svg class="accordion-arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="24" height="24">
<path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/>
</svg>
</div>
<div class="accordion-content">
<div class="accordion-content-inner">
${item.content}
</div>
</div>
</div>
`;
});
container.innerHTML = html;
};// 交互逻辑：绑定事件监听器
const attachEventListeners = () => {
container.addEventListener('click', (e) => {
const header = e.target.closest('.accordion-header');
if (!header) return;const itemElement = header.parentElement;
const itemId = itemElement.dataset.id;// 数据变动：先修改数据源中的状态
const currentItem = cardData.items.find(item => item.id === itemId);
const isExpanded = currentItem.state === 'expanded';// 关闭所有其他项，实现手风琴效果
cardData.items.forEach(item => {
if (item.id !== itemId) {
item.state = 'collapsed';
}
});// 切换当前项的状态
currentItem.state = isExpanded ? 'collapsed' : 'expanded';// 界面重绘：根据更新后的数据重新渲染整个组件
// 在一个更复杂的应用中，我们会只更新变化的DOM部分，但对于这个小组件，完全重绘是简单且高效的。
// 为了平滑过渡，我们不完全重绘，而是直接修改DOM元素的状态
updateDOMState();
});
};// DOM更新函数：根据数据状态直接修改DOM，以保留CSS过渡
const updateDOMState = () => {
const itemElements = container.querySelectorAll('.accordion-item');
itemElements.forEach(el => {
const id = el.dataset.id;
const itemData = cardData.items.find(i => i.id === id);
el.dataset.state = itemData.state;
});
};// 初始化
renderCard();
attachEventListeners();
});
</script>
</body>
</html>
“`