🎭 角色简介
<info>
<character>
“`yaml
迟子喻:
name: 迟子喻
birthday: 2000.11.11,天蝎座
gender: male
life_experiences:
童年:
– 父母工作忙,被丢到乡下老家柳溪村由…
💬 开场白
“`html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>柑橘的5号卡</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}body {
font-family: 'Microsoft YaHei', Arial, sans-serif;
background: transparent;
font-size: 13px;
line-height: 1.6;
color: #333;
}.container {
max-width: 800px;
margin: 20px auto;
background: #f0f8ff;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(65, 105, 225, 0.3);
overflow: hidden;
}.header {
background: linear-gradient(135deg, #87ceeb, #4169e1);
color: white;
text-align: center;
padding: 20px;
font-size: 18px;
font-weight: bold;
}.music-player {
background: #b0c4de;
padding: 15px;
border-bottom: 2px solid #87ceeb;
}.player-controls {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}.play-btn {
background: #4169e1;
border: none;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
}.play-btn:hover {
background: #1e3cb8;
}.progress-container {
flex: 1;
min-width: 200px;
height: 6px;
background: #e0e6ff;
border-radius: 3px;
position: relative;
cursor: pointer;
}.progress-bar {
height: 100%;
background: #4169e1;
border-radius: 3px;
width: 0%;
transition: width 0.1s;
}.volume-container {
display: flex;
align-items: center;
gap: 8px;
}.volume-icon {
width: 20px;
height: 20px;
fill: #4169e1;
}.volume-slider {
width: 80px;
height: 4px;
background: #e0e6ff;
border-radius: 2px;
outline: none;
cursor: pointer;
}.content {
padding: 20px;
}.section {
margin-bottom: 25px;
background: white;
border-radius: 10px;
overflow: hidden;
border: 1px solid #b0c4de;
}.section-header {
background: #87ceeb;
color: white;
padding: 12px 20px;
cursor: pointer;
font-weight: bold;
display: flex;
justify-content: space-between;
align-items: center;
}.section-header:hover {
background: #6bb8e6;
}.dropdown-arrow {
transition: transform 0.3s ease;
}.section-header.active .dropdown-arrow {
transform: rotate(180deg);
}.section-content {
padding: 20px;
display: none;
border-top: 1px solid #e0e6ff;
}.section-content.active {
display: block;
}.opening-item {
margin-bottom: 8px;
padding: 5px 0;
}.user-template {
background: #f8fbff;
padding: 15px;
border-radius: 8px;
font-family: 'Courier New', monospace;
font-size: 12px;
white-space: pre-line;
border-left: 4px solid #4169e1;
}@media (max-width: 768px) {
.container {
margin: 10px;
border-radius: 10px;
}.content {
padding: 15px;
}.player-controls {
flex-direction: column;
align-items: stretch;
}.progress-container {
order: 1;
margin: 10px 0;
}.volume-container {
justify-content: center;
order: 2;
}
}.time-display {
font-size: 11px;
color: #666;
min-width: 80px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
柑橘的5号卡！<br>
<small style="font-size: 12px; font-weight: normal;">此卡免费 勿玩盗版，交流群：761720373</small>
</div><div class="music-player">
<div class="player-controls">
<button class="play-btn" id="playBtn">▶</button>
<div class="progress-container" id="progressContainer">
<div class="progress-bar" id="progressBar"></div>
</div>
<div class="time-display" id="timeDisplay">00:00 / 00:00</div>
<div class="volume-container">
<svg class="volume-icon" viewBox="0 0 24 24">
<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>
</svg>
<input type="range" class="volume-slider" id="volumeSlider" min="0" max="100" value="70">
</div>
</div>
<audio id="audioPlayer" preload="metadata">
<source src="http://music.163.com/song/media/outer/url?id=2919622.mp3" type="audio/mpeg">
您的浏览器不支持音频播放。
</audio>
</div><div class="content">
<div class="section">
<div class="section-header" onclick="toggleSection('section1')">
<span>玩前必看</span>
<span class="dropdown-arrow">▼</span>
</div>
<div class="section-content" id="section1">
<p>1、人设不用局限，内置设定只有user是他的前任、为了方便剧情两个人有同居一段时间和一起买了越野车</p>
<p>2、世界书自带了文风，可以就放在世界书里，也可以缝合进预设，当然也可以选个人喜欢的文风</p>
</div>
</div><div class="section">
<div class="section-header" onclick="toggleSection('section2')">
<span>开场白</span>
<span class="dropdown-arrow">▼</span>
</div>
<div class="section-content" id="section2">
<div class="opening-item">1、和前任分手，突然世界末日</div>
<div class="opening-item">2、他在逃命路上遇见你</div>
<div class="opening-item">3、前男友落难了，你要搭把手吗？</div>
<div class="opening-item">4、他是个会装死的丧尸（开世界书条目）</div>
<div class="opening-item">5、user是一只丧尸（选开世界书条目）</div>
<div class="opening-item">6、甜甜开局，乘着夕阳盛大逃亡</div>
<div class="opening-item">7、空白</div>
</div>
</div><div class="section">
<div class="section-header" onclick="toggleSection('section3')">
<span>user人设参考</span>
<span class="dropdown-arrow">▼</span>
</div>
<div class="section-content" id="section3">
<div class="user-template">- name：
– birthday：年月日
– species：人类/丧尸
– gender：
– identify：
– background：
– experience：
– appearance：
– personality：
– likes：
– dislike：
– NSFW_information：</div>
</div>
</div>
</div>
</div><script>
const audio = document.getElementById('audioPlayer');
const playBtn = document.getElementById('playBtn');
const progressContainer = document.getElementById('progressContainer');
const progressBar = document.getElementById('progressBar');
const volumeSlider = document.getElementById('volumeSlider');
const timeDisplay = document.getElementById('timeDisplay');let isPlaying = false;
// 播放/暂停控制
playBtn.addEventListener('click', () => {
if (isPlaying) {
audio.pause();
playBtn.textContent = '▶';
isPlaying = false;
} else {
audio.play().catch(e => console.log('播放失败:', e));
playBtn.textContent = '⏸';
isPlaying = true;
}
});// 音频加载完成
audio.addEventListener('loadedmetadata', () => {
updateTimeDisplay();
});// 更新进度条
audio.addEventListener('timeupdate', () => {
const progress = (audio.currentTime / audio.duration) * 100;
progressBar.style.width = progress + '%';
updateTimeDisplay();
});// 音频结束
audio.addEventListener('ended', () => {
playBtn.textContent = '▶';
isPlaying = false;
progressBar.style.width = '0%';
});// 点击进度条跳转
progressContainer.addEventListener('click', (e) => {
const rect = progressContainer.getBoundingClientRect();
const percent = (e.clientX – rect.left) / rect.width;
audio.currentTime = percent * audio.duration;
});// 音量控制
volumeSlider.addEventListener('input', (e) => {
audio.volume = e.target.value / 100;
});// 设置初始音量
audio.volume = 0.7;// 时间显示
function updateTimeDisplay() {
const current = formatTime(audio.currentTime);
const duration = formatTime(audio.duration);
timeDisplay.textContent = `${current} / ${duration}`;
}function formatTime(seconds) {
if (isNaN(seconds)) return '00:00';
const mins = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}// 下拉菜单控制
function toggleSection(sectionId) {
const content = document.getElementById(sectionId);
const header = content.previousElementSibling;if (content.classList.contains('active')) {
content.classList.remove('active');
header.classList.remove('active');
} else {
content.classList.add('active');
header.classList.add('active');
}
}// 页面加载时尝试加载音频
window.addEventListener('load', () => {
audio.load();
});
</script>
</body>
</html>
“`