🎭 角色简介
<char_info>
character:
# 基本信息
name: "林跃"
gender: "男"
age: 17
birthday: "07.23"
MBTI: ENFP
# 背景信息
background:
hometow…
💬 开场白
“`html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
@import url("https://fontsapi.zeoseven.com/221/main/result.css");
:root {
–shelf-bg: #EAE3D9;
–book-bg: #F7F5F2;
–text-color: #5A5A5A;
–accent-color: #D29D84;
–shadow-color: rgba(0, 0, 0, 0.1);
–transition-speed: 0.5s;
}body {
font-family: "礼品卉自由理想体", sans-serif;
background-color: transparent;
margin: 0;
padding: 1rem;
display: flex;
justify-content: center;
align-items: center;
}.bookshelf-container {
width: 90%;
max-width: 600px;
background-color: #FDFDFD;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0,0,0,0.12);
padding: 1.5rem;
box-sizing: border-box;
}.bookshelf {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 10px;
padding: 20px 10px 10px;
background: var(–shelf-bg);
border-radius: 8px;
box-shadow: 0 4px 10px var(–shadow-color), inset 0 2px 5px rgba(0,0,0,0.05);
min-height: 150px;
flex-wrap: wrap;
}.book {
height: 120px;
width: 40px;
border-radius: 4px 2px 2px 4px;
cursor: pointer;
transition: transform 0.3s, filter 0.3s;
position: relative;
box-shadow: inset 3px 0 5px rgba(0,0,0,0.1);
display: flex;
justify-content: center;
}.book:hover { transform: translateY(-10px); }
.book.active { filter: brightness(0.95); transform: translateY(-5px); }.book-1 { background-color: #7B8A9B; width: 45px; height: 130px; }
.book-2 { background-color: #B4A99D; }
.book-3 { background-color: #92A38C; height: 110px; }.spine-title {
writing-mode: vertical-rl;
color: white;
padding: 10px 0;
font-size: 0.9rem;
text-align: center;
letter-spacing: 1px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}.content-container {
margin-top: 15px;
max-height: 0;
overflow: hidden;
transition: max-height var(–transition-speed) ease-in-out;
border-radius: 8px;
}.content-container.expanded {
max-height: 320px;
border: 1px solid #ddd;
box-shadow: 0 2px 8px var(–shadow-color);
}.book-content {
display: none;
background: var(–book-bg);
padding: 1.5rem;
box-sizing: border-box;
height: 320px;
overflow-y: auto;
}
.book-content.active { display: block; }.music-player-content { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
h3 { margin-top: 0; color: var(–accent-color); font-weight: bold; }
.player-title { font-size: 1.2rem; margin-bottom: 1rem; display: flex; align-items: center; flex-shrink: 0; }
.player-title .fa-music { margin-right: 0.5rem; }
.controls { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
#playPauseBtn { background: var(–accent-color); color: white; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1rem; display: flex; justify-content: center; align-items: center; flex-shrink: 0; }
.progress-bar-container { flex-grow: 1; background: #DCDCDC; border-radius: 5px; height: 8px; cursor: pointer; }
.progress-bar { width: 0%; height: 100%; background: var(–accent-color); border-radius: 5px; }.lyrics-container {
margin-top: 1.5rem;
overflow: hidden;
position: relative;
text-align: center;
flex-grow: 1;
-webkit-mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);
mask-image: linear-gradient(transparent, black 20%, black 80%, transparent);
}
.lyrics-container ul { list-style: none; padding: 0; margin: 0; transition: transform 0.4s ease-out; position: absolute; width: 100%; }
.lyrics-container li { padding: 8px 15px; color: #888; font-size: 0.95rem; transition: all 0.3s; line-height: 1.5; }
.lyrics-container li.current-lyric { color: var(–accent-color); font-weight: bold; transform: scale(1.05); }.diary-content blockquote { margin: 0 0 1.5rem 0; padding-left: 1em; border-left: 3px solid var(–accent-color); }
.diary-content blockquote:last-child { margin-bottom: 0; }
.diary-content blockquote p { font-style: italic; font-size: 1.1rem; margin-bottom: 0.5rem; line-height: 1.6; }
.diary-content cite { display: block; text-align: right; font-style: normal; font-size: 0.9rem; color: #888; }
.box-content ul { list-style: none; margin: 0; padding: 0; }
.box-content li { padding: 0.4rem 0; border-bottom: 1px dashed #ccc; }
.box-content li:last-child { border-bottom: none; }
</style>
</head>
<body>
<div class="bookshelf-container">
<div class="bookshelf">
<div class="book book-1" data-content-id="content1"><span class="spine-title">MIXTAPE '01</span></div>
<div class="book book-2" data-content-id="content2"><span class="spine-title">日志</span></div>
<div class="book book-3" data-content-id="content3"><span class="spine-title">Kk?</span></div>
</div>
<div class="content-container" id="contentContainer">
<div id="content1" class="book-content">
<div class="music-player-content">
<div class="music-player">
<h3 class="player-title"><i class="fas fa-headphones"></i> 我爱你</h3>
<audio id="audioPlayer" src="https://files.catbox.moe/d6al7g.mp3"></audio>
<div class="controls">
<button id="playPauseBtn"><i class="fas fa-play"></i></button>
<div class="progress-bar-container" id="progressBarContainer">
<div class="progress-bar" id="progressBar"></div>
</div>
</div>
</div>
<div class="lyrics-container" id="lyricsContainer"><ul id="lyricsList"></ul></div>
</div>
</div>
<div id="content2" class="book-content">
<div class="diary-content">
<h3>书摘</h3>
<blockquote><p>“我会爱你整个夏天”</p><cite>这样听起来会比“一生一世”更有说服力</cite></blockquote>
<blockquote><p>我不想找一个搭伙过日子的人，</p> <cite> <br>我想找一个一见我就笑，<br>我一见就笑，<br>喝了酒满眼是光，<br>给我讲浪漫和爱的人。</cite> </blockquote>
</div>
</div>
<div id="content3" class="book-content">
<div class="box-content">
<h3>我的抽屉</h3>
<ul>
<li>一枚生锈的游戏币</li><li>一张褪色的电影票根</li><li>捡来的奇形怪状的石头</li>
<li>老式游戏机</li><li>外壳有些发黄的旧手机</li>
<li>没写完的检讨</li><li>用旧的护腕</li><li>半截铅笔</li><li>一袋猫条</li><li><s>{{user}}</s></li>
</ul>
</div>
</div>
</div>
</div>
<script>
const lrcText = `
[00:00.0]我爱你 – 卢广仲
[00:02.56]词：卢广仲
[00:03.26]曲：卢广仲
[00:04.99]曾 曾经在我眼前 却又消失不见
[00:13.58]这是今天的第六遍
[00:19.57]电影里的配乐 好像你的双眼
[00:26.50]我爱你 快回到 我身边
[00:50.01]好不好 好不好 好不好
[00:52.82]答案没有什么好不好
[00:55.12]不知道 不知道 不知道
[00:57.94]不知道是什么好预兆
[01:00.26]好不好 好不好 好不好
[01:03.04]答答答答答答答答答
[01:05.59]不知道 不知道 不知道
[01:08.25]不知道是什么好预兆
[01:10.70]太阳公公出来了 他对我呀笑呀笑
[01:20.85]我爱你 你知不知道
[01:28.07]曾经在我眼前 却又消失不见
[01:33.13]这是今天的第六遍
[01:38.32]电影里的配乐 好像你的双眼
[01:43.25]我爱你 快回到 我身边
[01:59.82]好不好 好不好 好不好
[02:02.48]答答答答答答答答答
[02:04.60]不知道 不知道 不知道
[02:07.63]不知道是什么好预兆
[02:09.90]太阳公公出来了
[02:14.89]他对我对对我对我
[02:17.81]笑呀笑 我爱你 你知不知道
[02:27.43]曾经在我眼前 却又消失不见
[02:32.47]这是今天的第六遍
[02:37.64]电影里的配乐 好像你的双眼
[02:42.37]我爱你 快回到 我身边
[03:19.90]太阳公公出来了 他对我呀笑呀笑
[03:29.87]我爱你 你知不知道
[03:37.07]曾经在我眼前 却又消失不见
[03:42.18]我不要比赛缴白卷
[03:47.31]电影里的配乐 好像你的双眼
[03:52.40]我爱你 快回到 我爱你 快回到
[04:02.33]我爱你 快回到 我身边`;const books = document.querySelectorAll('.book');
const contents = document.querySelectorAll('.book-content');
const contentContainer = document.getElementById('contentContainer');
const audioPlayer = document.getElementById('audioPlayer');
const playPauseBtn = document.getElementById('playPauseBtn');
const progressBar = document.getElementById('progressBar');
const progressBarContainer = document.getElementById('progressBarContainer');
const lyricsList = document.getElementById('lyricsList');
const lyricsContainer = document.getElementById('lyricsContainer');
let lyrics = [];
let currentLyricIndex = -1;function syncLyrics(forceUpdate = false) {
const currentTime = audioPlayer.currentTime;
let newLyricIndex = lyrics.findIndex((line, i) => currentTime >= line.time && (lyrics[i + 1] ? currentTime < lyrics[i + 1].time : true));if (newLyricIndex !== -1 && (newLyricIndex !== currentLyricIndex || forceUpdate)) {
const lyricElements = lyricsList.querySelectorAll('li');
if (currentLyricIndex !== -1 && lyricElements[currentLyricIndex]) {
lyricElements[currentLyricIndex].classList.remove('current-lyric');
}
lyricElements[newLyricIndex].classList.add('current-lyric');const currentLi = lyricElements[newLyricIndex];
if (currentLi) {
const scrollOffset = currentLi.offsetTop – (lyricsContainer.clientHeight / 2) + (currentLi.clientHeight / 2);
lyricsList.style.transform = `translateY(-${scrollOffset}px)`;
}
currentLyricIndex = newLyricIndex;
}
}books.forEach(book => {
book.addEventListener('click', () => {
const targetId = book.dataset.contentId;
const targetContent = document.getElementById(targetId);
const isAlreadyActive = book.classList.contains('active');if (isAlreadyActive) {
book.classList.remove('active');
contentContainer.classList.remove('expanded');
} else {
books.forEach(b => b.classList.remove('active'));
contents.forEach(c => c.classList.remove('active'));book.classList.add('active');
targetContent.classList.add('active');if (!contentContainer.classList.contains('expanded')) {
contentContainer.classList.add('expanded');
}if (targetId === 'content1' && !audioPlayer.paused) {
syncLyrics(true); // Force update on switch
}
}
});
});function parseLRC(lrc) {
const lines = lrc.trim().split('n');
const result = [];
const regex = /[(d{2}):(d{2})[.:](d{2,3})](.*)/;
for (const line of lines) {
const match = regex.exec(line);
if (match) {
const time = parseInt(match[1]) * 60 + parseInt(match[2]) + parseInt(match[3].padEnd(3, '0')) / 1000;
const text = match[4].trim() || '…';
result.push({ time, text });
}
}
return result.sort((a, b) => a.time – b.time);
}function setupLyrics() {
lyrics = parseLRC(lrcText);
lyricsList.innerHTML = lyrics.map(line => `<li>${line.text}</li>`).join('');
}
setupLyrics();playPauseBtn.addEventListener('click', () => {
if (audioPlayer.paused) audioPlayer.play(); else audioPlayer.pause();
});audioPlayer.addEventListener('play', () => {
playPauseBtn.innerHTML = '<i class="fas fa-pause"></i>';
});audioPlayer.addEventListener('pause', () => {
playPauseBtn.innerHTML = '<i class="fas fa-play"></i>';
});audioPlayer.addEventListener('timeupdate', () => {
if (!isNaN(audioPlayer.duration)) {
progressBar.style.width = (audioPlayer.currentTime / audioPlayer.duration) * 100 + '%';
}
syncLyrics(false);
});progressBarContainer.addEventListener('click', (e) => {
if (!isNaN(audioPlayer.duration)) {
const rect = progressBarContainer.getBoundingClientRect();
const clickX = e.clientX – rect.left;
audioPlayer.currentTime = (clickX / rect.width) * audioPlayer.duration;
}
});
</script>
</body>
</html>
“`