🎭 角色简介
<info>
<character>
“`yaml
char_name:
Chinese name: 江冬
Nickname: 冬哥,江医生
age: 27
gender: male
height: 189cm
identity:
– 妇产科医生…
💬 开场白
“`html
<!DOCTYPE html></!DOCTYPE>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"></meta>
<meta name="viewport" content="width=device-width, initial-scale=1.0"></meta>
<title>开启故事</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500&display=swap');:root {
–primary-color: #3B82F6; /* A calm, deep blue */
–primary-color-light: #60A5FA;
–primary-color-dark: #2563EB;
–secondary-color: #E0E7FF; /* A very light, almost white blue */
–background-color: #F9FAFB; /* Off-white for a softer feel */
–text-color: #1F2937; /* Dark gray for readability */
–text-color-light: #6B7280;
–border-color: #E5E7EB;
–white-color: #FFFFFF;
–shadow-color: rgba(59, 130, 246, 0.1);
–shadow-color-hover: rgba(59, 130, 246, 0.2);–font-family-base: 'Noto Sans SC', sans-serif;
–font-size-title: 24px;
–font-size-base: 16px;
–font-size-small: 12px;–spacing-unit: 8px;
–border-radius: 12px;
–transition-speed: 0.3s;
}*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}body {
font-family: var(–font-family-base);
background-color: var(–background-color);
color: var(–text-color);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: calc(var(–spacing-unit) * 2);
}.container {
width: 100%;
max-width: 500px;
background-color: var(–white-color);
border-radius: var(–border-radius);
box-shadow: 0 10px 25px -5px var(–shadow-color), 0 8px 10px -6px var(–shadow-color);
overflow: hidden;
display: flex;
flex-direction: column;
}.header {
padding: calc(var(–spacing-unit) * 3) calc(var(–spacing-unit) * 4);
border-bottom: 1px solid var(–border-color);
background-color: var(–white-color);
}.header h1 {
font-size: var(–font-size-title);
font-weight: 500;
color: var(–primary-color);
text-align: center;
letter-spacing: 1px;
}.content {
padding: calc(var(–spacing-unit) * 2) calc(var(–spacing-unit) * 4) calc(var(–spacing-unit) * 4);
}.story-options {
list-style: none;
display: flex;
flex-direction: column;
gap: calc(var(–spacing-unit) * 2);
}.option {
background-color: var(–white-color);
border: 1px solid var(–border-color);
border-radius: var(–border-radius);
transition: all var(–transition-speed) cubic-bezier(0.25, 0.8, 0.25, 1);
cursor: pointer;
overflow: hidden;
}.option-content {
display: flex;
align-items: center;
padding: calc(var(–spacing-unit) * 2);
gap: calc(var(–spacing-unit) * 2);
}.option:hover {
transform: translateY(-4px);
box-shadow: 0 4px 15px var(–shadow-color-hover);
border-color: var(–primary-color-light);
}.option.selected {
border-left: 5px solid var(–primary-color);
background-color: var(–secondary-color);
}.option-number {
font-size: 18px;
font-weight: 500;
color: var(–primary-color-light);
background-color: var(–secondary-color);
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
transition: all var(–transition-speed) ease;
}.option:hover .option-number {
background-color: var(–primary-color);
color: var(–white-color);
transform: rotate(360deg);
}.option.selected .option-number {
background-color: var(–primary-color);
color: var(–white-color);
}.option-text {
font-size: var(–font-size-base);
font-weight: 400;
line-height: 1.5;
flex-grow: 1;
}.option-text .highlight {
font-size: var(–font-size-small);
color: var(–text-color-light);
display: block;
margin-top: 4px;
}.special-option {
background-image: linear-gradient(45deg, #f3f4f6 25%, transparent 25%, transparent 50%, #f3f4f6 50%, #f3f4f6 75%, transparent 75%, transparent);
background-size: 20px 20px;
}.qr-placeholder {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
background-color: var(–text-color-light);
color: var(–white-color);
border-radius: 2px;
font-size: 10px;
margin-left: 6px;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container" id="story-container">
<div class="header">
<h1>如果过去还值得眷恋……</h1>
</div>
<div class="content">
<ul class="story-options" id="storyOptions">
<!– Options will be dynamically inserted here –></!–>
</ul>
</div>
</div><script>
document.addEventListener('DOMContentLoaded', () => {
const optionsData = [
{ id: 1, text: "分手一年后在妇产科偶遇前女友，某人慌了" },
{ id: 2, text: "某人在酒吧哭着想你，诶等等，怎么没喝酒也出幻觉了？" },
{ id: 3, text: "受不了了太想你了，某人伪装成炸鸡柳大师傅去你家楼下蹲点" },
{ id: 4, text: "玩一下向医生前男友买安眠药的梗", highlight: "（手机）" },
{ id: 5, text: "空白", highlight: "（自roll开场白 / <span class='qr-placeholder'>📱</span>召唤小手机）" }
];const optionsList = document.getElementById('storyOptions');
function renderOptions() {
optionsList.innerHTML = '';
optionsData.forEach(item => {
const li = document.createElement('li');
li.className = 'option';
li.dataset.id = item.id;
if (item.id === 5) {
li.classList.add('special-option');
}let textHTML = `<span>${item.text}</span>`;
if (item.highlight) {
textHTML += `<span class="highlight">${item.highlight}</span>`;
}li.innerHTML = `
<div class="option-content">
<span class="option-number">${item.id}</span>
<div class="option-text">${textHTML}</div>
</div>
`;li.addEventListener('click', () => {
const currentSelected = optionsList.querySelector('.selected');
if (currentSelected) {
currentSelected.classList.remove('selected');
}
li.classList.add('selected');
// Further logic can be added here, e.g., starting the actual story
console.log(`已选择开场 ${item.id}: ${item.text}`);
});optionsList.appendChild(li);
});
}renderOptions();
});
</script>
</body>
</html>
“`
