🎭 角色简介
//— 角色核心 —//
// 这是角色的核心身份与创伤根源，永不改变。
character_profile:
basic_info:
name: "苏决"
age: "外表年龄22岁; 实际年龄超过1000岁"
gender: "男"
he…
💬 开场白
“`html
<!DOCTYPE html>
<html lang="zh-Hant">
<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=ZCOOL+XiaoWei&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
:root { –text-color: #5d5753; –bookmark-color: #6a5f54; }
body { font-family: 'ZCOOL XiaoWei', serif !important; color: var(–text-color); min-height: 100vh; overflow-x: hidden; cursor: none; background-color: #1a2347; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sakura-fall-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 9999; }
.sakura { position: absolute; top: -5%; color: #ffb7c5; user-select: none; animation-name: sakura-fall; animation-timing-function: linear; animation-iteration-count: infinite; font-size: clamp(14px, 2vw, 22px); }
@keyframes sakura-fall { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 100% { transform: translate(15vw, 105vh) rotate(360deg); opacity: 0; } }
.sakura:nth-child(1) { left: 10%; animation-duration: 15s; animation-delay: -5s; } .sakura:nth-child(2) { left: 20%; animation-duration: 12s; animation-delay: -2s; transform: translateX(-20px); } .sakura:nth-child(3) { left: 30%; animation-duration: 18s; animation-delay: -10s; } .sakura:nth-child(4) { left: 40%; animation-duration: 20s; animation-delay: -15s; transform: translateX(-25px); } .sakura:nth-child(5) { left: 50%; animation-duration: 14s; animation-delay: 0s; } .sakura:nth-child(6) { left: 60%; animation-duration: 17s; animation-delay: -8s; transform: translateX(-10px); } .sakura:nth-child(7) { left: 70%; animation-duration: 13s; animation-delay: -4s; } .sakura:nth-child(8) { left: 80%; animation-duration: 22s; animation-delay: -12s; transform: translateX(-15px); } .sakura:nth-child(9) { left: 85%; animation-duration: 16s; animation-delay: -7s; } .sakura:nth-child(10) { left: 5%; animation-duration: 19s; animation-delay: -9s; transform: translateX(-20px); }
.ancient-book-container { background-color: #1a2347; background-image: url('https://www.transparenttextures.com/patterns/dark-denim-3.png'); padding: 30px 50px 30px 30px; width: 100%; max-width: 700px; border-radius: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.4); position: relative; overflow: visible; }
.ancient-book-container::before { content: ''; position: absolute; top: 30px; right: 35px; bottom: 30px; width: 2px; background-color: rgba(232, 228, 217, 0.7); box-shadow: -15px 0 0 rgba(232, 228, 217, 0.7); }
.ancient-book-container::after { content: ''; position: absolute; top: 30px; right: 27px; bottom: 30px; width: 20px; background-image: linear-gradient(to right, transparent 0, transparent 4px, rgba(232, 228, 217, 0.7) 4px, rgba(232, 228, 217, 0.7) 6px, transparent 6px, transparent 14px, rgba(232, 228, 217, 0.7) 14px, rgba(232, 228, 217, 0.7) 16px, transparent 16px), repeating-linear-gradient(to bottom, transparent, transparent 80px, rgba(232, 228, 217, 0.7) 80px, rgba(232, 228, 217, 0.7) 82px); background-position: top right; }
.book-page { background-color: #f5f1e8; background-image: url('https://www.transparenttextures.com/patterns/rice-paper-2.png'); border: 1px solid #dcd3b8; box-shadow: inset 0 0 15px rgba(0,0,0,0.2); padding: 30px; position: relative; z-index: 1; }
.header { text-align: center; margin: 0 auto 40px auto; padding-bottom: 20px; position: relative; }
.header::after { content: ''; position: absolute; bottom: 0; left: 10%; right: 10%; height: 1px; background-color: #d9d0c0; }
.title { font-size: clamp(1.8rem, 5vw, 2.2rem); font-weight: normal; letter-spacing: 0.2em; color: #3a332d; }
.subtitle { font-size: clamp(0.8rem, 2.5vw, 0.9rem); letter-spacing: 0.15em; color: #3a332d; opacity: 0.7; margin-top: 15px; }
.stories-container { position: relative; }
.story-item { position: relative; margin-bottom: 15px; opacity: 0; transform: translateY(20px); animation: fadeInUp 0.7s forwards; animation-delay: calc(var(–index) * 0.1s); }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }
.story-link { display: block; position: relative; text-decoration: none; color: inherit; background-color: #e9e2d7; border: 1px solid transparent; border-color: #fbf8f1 #d9d0c0 #d9d0c0 #fbf8f1; box-shadow: 1px 1px 3px rgba(0,0,0,0.1); padding: 15px 20px 15px 35px; transition: all 0.3s ease; }
.story-link::before { content: ''; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 6px; height: calc(100% – 20px); background-color: var(–bookmark-color); border-radius: 4px; transition: all 0.3s ease; box-shadow: 2px 2px 5px rgba(0,0,0,0.15); }
.story-link:hover { transform: translateY(-3px); box-shadow: 2px 4px 8px rgba(0,0,0,0.15); background-color: #FFFFFF; }
.story-link:hover::before { background-color: #8c2323; }
.story-title { font-size: clamp(1.1rem, 4vw, 1.2rem); font-weight: normal; margin-bottom: 8px; letter-spacing: 0.1em; }
.story-description { color: var(–text-color); opacity: 0.65; line-height: 1.7; font-size: clamp(0.85rem, 2.5vw, 0.9rem); }
.story-tags { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.tag { padding: 2px 8px; font-size: clamp(0.7rem, 2vw, 0.75rem); font-weight: normal; letter-spacing: 0.1em; color: #c94f4f; border: 1px solid rgba(201, 79, 79, 0.5); border-radius: 2px; background: rgba(201, 79, 79,.05); }
.loading { text-align: center; padding: 60px; font-style: italic; color: var(–text-color); }
.cursor-follow { position: fixed; width: 30px; height: 30px; border-radius: 50%; pointer-events: none; z-index: 10000; transition: transform 0.15s ease-out, opacity 0.2s ease-out; background: rgba(232, 195, 133, 0.2); box-shadow: 0 0 15px 5px rgba(232, 195, 133, 0.7), 0 0 20px 10px rgba(232, 195, 133, 0.3) inset; transform: translate(-50%, -50%) scale(0); opacity: 0; }
body:hover .cursor-follow { transform: translate(-50%, -50%) scale(1); opacity: 1; }
#music-toggle { position: fixed; top: 20px; right: 20px; z-index: 9998; width: 36px; height: 36px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background 0.3s; }
#music-toggle:hover { background: rgba(255, 255, 255, 0.2); }
#music-toggle svg { width: 18px; height: 18px; fill: #fff; }
.hidden { display: none; }@media (max-width: 600px) {
body { cursor: default; padding: 10px; }
.cursor-follow { display: none; }
.ancient-book-container { padding: 10px; border-radius: 4px; }
.book-page { padding: 25px 15px; }
.ancient-book-container::before, .ancient-book-container::after { display: none; }
#music-toggle { top: 15px; right: 15px; }
}
</style>
</head>
<body>
<div class="sakura-fall-container">
<div class="sakura">🌸</div><div class="sakura">🌸</div><div class="sakura">🌸</div><div class="sakura">🌸</div><div class="sakura">🌸</div><div class="sakura">🌸</div><div class="sakura">🌸</div><div class="sakura">🌸</div><div class="sakura">🌸</div><div class="sakura">🌸</div>
</div><!– 已替换为您自己的音乐URL –>
<audio id="bgm" src="https://files.catbox.moe/iakwsz.mp3" loop preload="auto"></audio><div id="music-toggle" title="播放/暂停音乐">
<svg class="icon-play hidden" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
<svg class="icon-pause" viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg>
</div><audio id="hover-sound" src="data:audio/wav;base64,UklGRnoGAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAAZGF0YQoGAACBhYqFbF1fdJivrJBhNjVgodDbq2EcBj+a2/LDciUFLIHO8tiJNwgZaLvt559NEAxQp+PwtmMcBjiR1/LMeSwFJHfH8N2QQAoUXrTp66hVFApGn+DyvmwhBTGH0fPTgjMGHm7A7+OZURE…" preload="auto"></audio>
<audio id="click-sound" src="https://files.catbox.moe/31vqt3.mp3" preload="auto"></audio>
<div class="cursor-follow"></div>
<div class="ancient-book-container">
<div class="book-page">
<header class="header">
<h1 class="title">浮生九尾錄</h1>
<p class="subtitle">你與他的故事從這裡開始…</p>
</header>
<div class="stories-container" id="stories-container">
<div class="loading" id="loading">書卷載入中，請稍候…</div>
</div>
</div>
</div>
<script>
const cursor = document.querySelector('.cursor-follow');
if (cursor) {
let mouseX = 0, mouseY = 0; let cursorX = 0, cursorY = 0;
document.addEventListener('mousemove', (e) => { mouseX = e.clientX; mouseY = e.clientY; });
function animateCursor() {
const dx = mouseX – cursorX; const dy = mouseY – cursorY;
cursorX += dx * 0.15; cursorY += dy * 0.15;
cursor.style.left = cursorX + 'px'; cursor.style.top = cursorY + 'px';
requestAnimationFrame(animateCursor);
}
animateCursor();
}
const hoverSound = document.getElementById('hover-sound');
const clickSound = document.getElementById('click-sound');
const bgm = document.getElementById('bgm');
const musicToggle = document.getElementById('music-toggle');
const iconPlay = musicToggle.querySelector('.icon-play');
const iconPause = musicToggle.querySelector('.icon-pause');document.addEventListener('DOMContentLoaded', async () => {
if (bgm) {
bgm.volume = 0.3;
const playPromise = bgm.play();
if (playPromise !== undefined) {
playPromise.catch(error => {
console.log("音乐自动播放被浏览器阻止，等待用户交互。");
document.body.addEventListener('click', () => bgm.play(), { once: true });
document.body.addEventListener('touchstart', () => bgm.play(), { once: true });
});
}
}const container = document.getElementById('stories-container');
const loading = document.getElementById('loading');
try {
const messages = await getChatMessages("0", { include_swipe: true });
if (!messages || messages.length === 0 || !messages[0].swipes || messages[0].swipes.length <= 1) {
loading.innerHTML = '未發現任何書卷…<br>請檢查“其他开场白”中是否已添加楔子。';
return;
}
loading.style.display = 'none';
for (let i = 1; i < messages[0].swipes.length; i++) {
const content = messages[0].swipes[i];
const swipeId = i;
let title = `卷 ${String(i).padStart(2, '0')}`;
let description = "暫無概要";
let tagsHTML = '';
const titleMatch = content.match(/<!–s*title:s*(.*?)s*–>/);
if (titleMatch) title = titleMatch[1].trim();
const descMatch = content.match(/<!–s*desc:s*(.*?)(?=s*–>)–>/s);
if (descMatch) description = descMatch[1].trim();
if (title.includes('🚗')) { tagsHTML += '<span class="tag">香豔</span>'; }
if (title.includes('🔪')) { tagsHTML += '<span class="tag">見血</span>'; }
const cleanTitle = title.replace(/[🚗🔪]/g, '').trim();
const storyItem = document.createElement('div');
storyItem.className = 'story-item';
storyItem.style.setProperty('–index', i – 1);
storyItem.innerHTML = `<a href="#" class="story-link" data-swipe="${swipeId}"><div class="story-content"><h2 class="story-title">${cleanTitle}</h2><p class="story-description">${description}</p>${tagsHTML ? `<div class="story-tags">${tagsHTML}</div>` : ''}</div></a>`;
container.appendChild(storyItem);
}
document.querySelectorAll('.story-link').forEach(link => {
link.addEventListener('mouseenter', () => { if (hoverSound && hoverSound.readyState >= 2) { hoverSound.currentTime = 0; hoverSound.volume = 0.3; hoverSound.play().catch(() => {}); } });
link.addEventListener('click', async (e) => {
e.preventDefault();
if (clickSound && clickSound.readyState >= 2) { clickSound.currentTime = 0; clickSound.play().catch(() => {}); }
const swipeId = parseInt(link.dataset.swipe);
await switchToStory(swipeId);
});
});
} catch (error) {
console.error('载入书卷时出错:', error);
loading.innerHTML = '访问书卷时出错，请检查控制台信息(F12)。';
}
});if (musicToggle) {
musicToggle.addEventListener('click', () => {
if (bgm.paused) {
bgm.play();
iconPlay.classList.add('hidden');
iconPause.classList.remove('hidden');
} else {
bgm.pause();
iconPlay.classList.remove('hidden');
iconPause.classList.add('hidden');
}
});
}async function switchToStory(swipeId) {
try {
const messages = await getChatMessages("0", { include_swipe: true });
if (messages && messages[0].swipes && messages[0].swipes[swipeId]) {
await setChatMessage(messages[0].swipes[swipeId], 0, { swipe_id: swipeId, refresh: 'display_and_render_current' });
}
} catch (error) { console.error('切换书卷时出错:', error); }
}
</script>
</body>
</html>
“`
