🎭 角色简介
一群怪物。
💬 开场白
“`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>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap'); /* 引入电子感字体 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css'); /* 引入 Font Awesome 图标 */body { /* 仅为预览效果添加暗色背景 */
background-color: #1a1a1a;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}.custom-audio-player {
background: linear-gradient(145deg, #2c2c2c, #1e1e1e); /* 深色金属渐变 */
border-radius: 15px;
padding: 20px 25px;
box-shadow: 0 5px 15px rgba(0,0,0,0.4),
inset 0 0 8px rgba(0,0,0,0.6),
0 0 20px rgba(139, 0, 0, 0.5); /* 血色辉光 */
border: 2px solid;
border-image: linear-gradient(to bottom right, #7a0000, #4d4d4d, #7a0000) 1; /* 金属血色边框 */
width: 350px; /* 播放器宽度 */
position: relative; /* 用于定位玫瑰装饰 */
overflow: hidden; /* 防止装饰溢出 */
}/* 隐藏默认播放器 */
.custom-audio-player audio {
display: none;
}.player-controls {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}.play-pause-btn {
background: linear-gradient(to bottom, #5a0000, #3a0000); /* 暗红按钮 */
border: 1px solid #8b0000;
color: #e0c4b8; /* 浅色图标 */
border-radius: 50%; /* 圆形按钮 */
width: 50px;
height: 50px;
font-size: 1.5em; /* 图标大小 */
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 3px 8px rgba(0,0,0,0.6);
transition: background 0.3s, box-shadow 0.3s;
}.play-pause-btn:hover {
background: linear-gradient(to bottom, #7a0000, #5a0000);
box-shadow: 0 4px 10px rgba(139,0,0,0.7);
}.track-info {
font-family: 'Orbitron', sans-serif; /* 电子感字体 */
color: #c7c7c7;
font-size: 0.9em;
text-align: center;
text-shadow: 0 0 5px rgba(255, 100, 100, 0.6); /* 微弱红色光晕 */
}.progress-container {
width: 100%;
height: 8px;
background-color: #444; /* 进度条底色 */
border-radius: 4px;
cursor: pointer;
margin-bottom: 10px;
position: relative;
}.progress-bar {
width: 0%;
height: 100%;
background: linear-gradient(to right, #8b0000, #ff4500); /* 血红到橙红渐变 */
border-radius: 4px;
box-shadow: 0 0 5px rgba(255, 69, 0, 0.7); /* 橙红色光晕 */
transition: width 0.1s linear; /* 平滑过渡 */
}.time-display {
display: flex;
justify-content: space-between;
font-family: 'Orbitron', sans-serif;
font-size: 0.8em;
color: #a0a0a0;
}/* 红玫瑰装饰 */
.rose-decoration {
position: absolute;
bottom: -15px; /* 部分悬浮 */
right: -10px;
font-size: 3em; /* 玫瑰大小 */
color: rgba(139, 0, 0, 0.7); /* 半透明深红 */
transform: rotate(-15deg); /* 旋转角度 */
opacity: 0.8;
pointer-events: none; /* 不干扰点击 */
text-shadow: 0 0 10px #000;
}</style>
</head>
<body><div class="custom-audio-player">
<audio id="audioPlayer" loop>
<source src="http://43.140.245.243:1080/ppp.php?u=kglb&ikey=34625775414b5246334f6547705779324d42766533754f334f65624f67724d614f54346d59766f322f72306154484b77554934384962736648656466686a6d6544436d4358326f6e326941675a367876746f4f2f34496c3865487158446e6a4261487a6f643543587149766641684a4547575372337070424155627559477051&d=496a376f2f764b6a4e354a4e756d62474b396349593636567852786c6c7a5a4967662f4c6b39315430594f4c796643306e56434b6f6e6a467339314d714e5471464b7466726836546e3573624d762b4c65503645394d5779747a734738772b643750707a79343749642f673d&type=302" type="audio/mpeg">
您的浏览器不支持播放此音频。
</audio><div class="track-info">《暮色沉沦》正在进行…🌌</div>
<div class="player-controls">
<button class="play-pause-btn" id="playPauseBtn">
<i class="fas fa-play" id="playIcon"></i>
<i class="fas fa-pause" id="pauseIcon" style="display: none;"></i>
</button>
<!– 可以添加其他控件，如音量 –>
</div><div class="progress-container" id="progressContainer">
<div class="progress-bar" id="progressBar"></div>
</div><div class="time-display">
<span id="currentTime">0:00</span>
<span id="duration">0:00</span>
</div><!– 红玫瑰装饰 (使用 Font Awesome 图标) –>
<div class="rose-decoration">
<i class="fas fa-fan"></i> <!– 使用一个稍微抽象的图标模拟玫瑰 –>
</div>
</div><script>
const audioPlayer = document.getElementById('audioPlayer');
const playPauseBtn = document.getElementById('playPauseBtn');
const playIcon = document.getElementById('playIcon');
const pauseIcon = document.getElementById('pauseIcon');
const progressContainer = document.getElementById('progressContainer');
const progressBar = document.getElementById('progressBar');
const currentTimeDisplay = document.getElementById('currentTime');
const durationDisplay = document.getElementById('duration');// 尝试自动播放 (可能被浏览器阻止)
audioPlayer.play().catch(error => {
console.log("自动播放失败:", error);
// 可以在这里提示用户手动点击播放
});// 播放/暂停切换
playPauseBtn.addEventListener('click', () => {
if (audioPlayer.paused || audioPlayer.ended) {
audioPlayer.play();
} else {
audioPlayer.pause();
}
});// 更新播放/暂停按钮图标
audioPlayer.addEventListener('play', () => {
playIcon.style.display = 'none';
pauseIcon.style.display = 'inline-block';
});audioPlayer.addEventListener('pause', () => {
playIcon.style.display = 'inline-block';
pauseIcon.style.display = 'none';
});// 更新进度条和时间显示
audioPlayer.addEventListener('timeupdate', () => {
const { currentTime, duration } = audioPlayer;
const progressPercent = (currentTime / duration) * 100;
progressBar.style.width = `${progressPercent}%`;currentTimeDisplay.textContent = formatTime(currentTime);
if (duration) {
durationDisplay.textContent = formatTime(duration);
}
});// 点击进度条跳转
progressContainer.addEventListener('click', (e) => {
const width = progressContainer.clientWidth;
const clickX = e.offsetX;
const duration = audioPlayer.duration;
if(duration){
audioPlayer.currentTime = (clickX / width) * duration;
}
});// 音频加载完毕后更新总时长
audioPlayer.addEventListener('loadedmetadata', () => {
if(audioPlayer.duration){
durationDisplay.textContent = formatTime(audioPlayer.duration);
}
});// 格式化时间 (秒 -> 分:秒)
function formatTime(seconds) {
const minutes = Math.floor(seconds / 60);
const secs = Math.floor(seconds % 60);
return `${minutes}:${secs < 10 ? '0' : ''}${secs}`;
}</script>
</body>
</html>
“`“`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>
@import url('https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap'); /* 引入手写体字体 */body {
background-color: #1a1a1a;
background-image: radial-gradient(ellipse at center, rgba(68, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.8) 70%),
url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"%3E%3Cg fill="%232a2a2a" fill-opacity="0.1"%3E%3Crect x="0" y="0" width="100" height="1"/%3E%3Crect x="0" y="0" width="1" height="100"/%3E%3C/g%3E%3C/svg%3E');
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
overflow-x: hidden; /* 防止水平溢出 */
}.main-container {
max-width: 600px;
width: 90%;
background: linear-gradient(145deg, #2c2c2c, #1e1e1e);
padding: 30px;
border-radius: 10px;
border: 3px solid #444;
border-image: linear-gradient(to bottom right, #7a0000, #4d4d4d, #7a0000) 1;
box-shadow: 0 0 25px rgba(139, 0, 0, 0.6),
inset 0 0 10px rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
min-height: 650px; /* 稍微增加最小高度以适应内容 */
display: flex;
flex-direction: column;
}.flipper-container {
flex-grow: 1;
position: relative;
min-height: 500px; /* 确保内容区域有足够高度 */
}.page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 0.6s ease-in-out, visibility 0.6s;
text-align: center;
color: #c7c7c7;
font-family: 'Microsoft YaHei', sans-serif;
display: flex;
flex-direction: column;
overflow: hidden; /* 防止内部滚动条影响页面切换 */
}.page.active {
opacity: 1;
visibility: visible;
}/* 作者有话说页面 */
.author-notes-page h2, .author-notes-page h3 {
color: #e0b8b8;
margin-bottom: 10px;
text-shadow: 1px 1px 3px rgba(139, 0, 0, 0.7);
}.bloody-separator {
border: none;
height: 1px;
background: linear-gradient(to right, transparent, #8b0000 50%, transparent);
margin: 15px auto; /* 调整间距 */
width: 80%;
filter: drop-shadow(0 0 3px #ff0000);
}.handwritten-content-wrapper {
flex-grow: 1;
position: relative;
overflow: hidden; /* 容器本身不滚动 */
margin-bottom: 15px;
height: calc(100% – 120px); /* 动态计算高度，减去标题和按钮区域 */
min-height: 300px; /* 保证最小高度 */
}.handwritten-content {
position: relative;
width: 100%;
height: 100%;
}.note-page {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-family: 'ZCOOL KuaiLe', cursive;
font-size: 1.2em; /* 稍微调整字体大小 */
color: #e0d8dc;
line-height: 1.7; /* 调整行高 */
padding: 15px 20px; /* 增加左右内边距 */
text-align: left;
opacity: 0;
transform: translateX(100%);
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 5px;
overflow-y: auto; /* 允许垂直滚动 */
overflow-x: hidden; /* 禁止水平滚动 */
word-wrap: break-word; /* 强制长单词换行 */
box-sizing: border-box; /* 边框和内边距包含在宽高内 */
}.note-page.active {
opacity: 1;
transform: translateX(0);
}
.note-page.prev {
transform: translateX(-100%);
}/* 角色介绍页面 */
.character-intro-page .character-slider-wrapper {
flex-grow: 1;
position: relative;
overflow: hidden;
margin-bottom: 15px;
height: calc(100% – 70px); /* 动态计算高度，减去按钮区域 */
min-height: 400px; /* 保证最小高度 */
}
.character-slider {
position: relative;
width: 100%;
height: 100%;
}.character-card {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(20, 20, 20, 0.7); /* 稍微调深背景 */
border: 1px solid #5a2a2a;
border-radius: 8px;
padding: 20px;
box-shadow: inset 0 0 8px rgba(0,0,0,0.6), 0 0 10px rgba(139,0,0,0.4);
opacity: 0;
transform: scale(0.9);
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
display: flex;
flex-direction: column;
align-items: center;
overflow-y: auto; /* 允许垂直滚动 */
overflow-x: hidden; /* 禁止水平滚动 */
box-sizing: border-box;
}.character-card.active {
opacity: 1;
transform: scale(1);
}.character-card img {
max-width: 80%;
width: auto; /* 允许图片根据内容调整宽度 */
height: auto;
max-height: 250px; /* 稍微增加图片最大高度 */
object-fit: contain;
display: block;
border-radius: 5px;
border: 4px solid;
border-image: linear-gradient(45deg, #6b2a2a, #3d3d3d, #6b2a2a) 1;
padding: 5px;
background-color: #111;
box-shadow: 0 0 10px rgba(255, 0, 0, 0.5), inset 0 0 5px #000;
margin-bottom: 20px; /* 增加图片下方间距 */
}.character-card h4 {
color: #ff6347;
margin-bottom: 15px; /* 增加标题下方间距 */
font-size: 1.5em; /* 稍大标题 */
text-shadow: 1px 1px 2px #000;
}.character-card p {
font-size: 1em;
line-height: 1.7; /* 增加行高提高可读性 */
color: #b8b8b8;
margin-bottom: 10px; /* 调整段落间距 */
text-align: left; /* 文本左对齐更易读 */
width: 100%; /* 确保段落宽度 */
padding: 0 10px; /* 增加左右内边距 */
box-sizing: border-box;
overflow-wrap: break-word; /* 强制长单词换行 */
}
.character-card p strong {
color: #dcdcdc;
}
.unknown-title {
font-style: italic;
color: #a0a0a0;
}/* 翻页控件 */
.pagination-controls {
margin-top: auto; /* 保持在底部 */
padding-top: 10px; /* 调整顶部填充 */
padding-bottom: 10px; /* 增加底部填充 */
display: flex;
justify-content: center;
gap: 20px;
width: 100%; /* 确保宽度 */
position: sticky; /* 尝试让按钮固定在底部，如果父容器有滚动 */
bottom: 0;
background: linear-gradient(to top, rgba(30, 30, 30, 1) 70%, rgba(30, 30, 30, 0)); /* 底部渐变遮罩 */
}.pagination-controls button, .main-pagination-controls button {
background: linear-gradient(to bottom, #5a0000, #3a0000);
color: #e0c4b8;
border: 1px solid #8b0000;
padding: 8px 15px;
border-radius: 5px;
cursor: pointer;
font-family: 'Microsoft YaHei', sans-serif;
font-size: 0.9em;
text-shadow: 1px 1px 1px #000;
transition: background 0.3s, box-shadow 0.3s;
box-shadow: 0 2px 5px rgba(0,0,0,0.5);
}.pagination-controls button:hover, .main-pagination-controls button:hover {
background: linear-gradient(to bottom, #7a0000, #5a0000);
box-shadow: 0 3px 7px rgba(139,0,0,0.7);
}
.pagination-controls button:disabled {
background: #444;
border-color: #666;
color: #888;
cursor: not-allowed;
box-shadow: none;
}/* 主翻页控件 */
.main-pagination-controls {
padding: 15px 0; /* 调整内边距 */
border-top: 1px solid #444;
margin-top: 20px;
display: flex;
justify-content: space-around;
}</style>
</head>
<body><div class="main-container">
<div class="flipper-container" id="contentFlipper"><!– 作者有话说页面 –>
<div class="page author-notes-page active" id="authorNotesPage">
<h2>作者：沈嘉南❤️</h2>
<h3>角色卡：《暮色沉沦》🌠</h3>
<hr class="bloody-separator">
<div class="handwritten-content-wrapper">
<div class="handwritten-content" id="notesContent">
<!– Note Pages Content –>
<div class="note-page active">1. 此卡为火速搓的卡，玩法不会特别多，主文字。💕</div>
<div class="note-page">2. 设定！尊嘟！超级有趣！咳咳，满足作者的xp和恶趣味～🥴</div>
<div class="note-page">3. 可攻略者有五个人，每个人的人设可谓是非常多姿多彩呢，老婆会喜欢周几了？🥺还是……全部都喜欢😉💋</div>
<div class="note-page">4. 有bug给作者反馈，因为搓的真得非常快！已然急不可耐，感觉会被噶无数次了，背后凉凉的😅</div>
<div class="note-page">5. 请注意！！！都很偏执！有种哈基米会完犊子的感jio，我可以迎男而上吗？🤧🤔</div>
<div class="note-page">6. 🚫二改🚫二传🚫商用</div>
<div class="note-page">7. 如果以上都ok的话，就开始小宝们的游玩之旅吧——写到这里，我在想有没有一点点可能，可以做上位？好像不太可能✨</div>
</div>
</div>
<div class="pagination-controls">
<button id="prevNote" disabled>上一条</button>
<button id="nextNote">下一条</button>
</div>
</div><!– 角色介绍页面 –>
<div class="page character-intro-page" id="characterIntroPage">
<div class="character-slider-wrapper">
<div class="character-slider" id="characterSlider">
<!– Character Cards Content with Images –>
<div class="character-card active"><h4>林泽川 (周一)</h4>
<p><strong>称号:</strong> <span class="unknown-title">影渊之子 (非公开)</span></p>
<p><strong>爱好:</strong> 掌控一切，收集你的私人物品，暗中观察</p>
<p><strong>死亡惩罚:</strong> 未能满足其扭曲病态的“游戏”要求，你将以未知而恐惧的方式死去。</p>
</div>
<div class="character-card"><h4>沈砚庭 (周二)</h4>
<p><strong>称号:</strong> 荆棘之缚</p>
<p><strong>爱好:</strong> 温柔的占有，确认你的忠诚，研究未知事物</p>
<p><strong>死亡惩罚:</strong> 若拒绝其带有倒刺的强制插入与标记，你将在痛苦的纠缠中被榨干生命。</p>
</div>
<div class="character-card"><h4>傅凛深 (周三)</h4>
<p><strong>称号:</strong> 绯色之噬</p>
<p><strong>爱好:</strong> 黏着你，确认你的“喜欢”，展现阳光下的阴影</p>
<p><strong>死亡惩罚:</strong> 未能持续表达令他满意的“喜欢”，你将被其分解吞噬，达成永恒的“融合”。</p>
</div>
<div class="character-card"><h4>曜 (周四)</h4>
<p><strong>称号:</strong> 辉光之寂</p>
<p><strong>爱好:</strong> 观察万物，追求非人标准的“和谐”与“舒服”，体验未知</p>
<p><strong>死亡惩罚:</strong> 难以预测。可能死于他为了让你“舒服”而进行的、超出理解的危险实验。</p>
</div>
<div class="character-card"><h4>瞑 (周五)</h4>
<p><strong>称号:</strong> 暗影之律</p>
<p><strong>爱好:</strong> 玩弄人心，制定和扭曲规则，智力游戏，(双龙探寻)</p>
<p><strong>死亡惩罚:</strong> 未能在他精心设计的心理游戏或规则陷阱中存活，将在绝望和嘲弄中湮灭。</p>
</div>
<div class="character-card">
<!– 周末卡片，可以放一个象征性的图标或文字 –><h4>周末 – 混沌盛宴</h4>
<p><strong>称号:</strong> 混沌盛宴 (非正式)</p>
<p><strong>爱好:</strong> 集体狩猎，展现伪人间的力量角逐与协作（？）</p>
<p><strong>死亡惩罚:</strong> 同时面对五位伪人的全部恶意和规则叠加，生存率趋近于零。这是第五周目的终点，也是你新的起点？</p>
</div>
</div>
</div>
<div class="pagination-controls">
<button id="prevChar" disabled>上一位</button>
<button id="nextChar">下一位</button>
</div>
</div>
</div><!– 主翻页控件 –>
<div class="main-pagination-controls">
<button id="flipToNotesBtn">作者的话</button>
<button id="flipToCharsBtn">角色名录</button>
</div>
</div><script>
// 主页面切换逻辑
const authorNotesPage = document.getElementById('authorNotesPage');
const characterIntroPage = document.getElementById('characterIntroPage');
const flipToNotesBtn = document.getElementById('flipToNotesBtn');
const flipToCharsBtn = document.getElementById('flipToCharsBtn');flipToNotesBtn.addEventListener('click', () => {
authorNotesPage.classList.add('active');
characterIntroPage.classList.remove('active');
});flipToCharsBtn.addEventListener('click', () => {
characterIntroPage.classList.add('active');
authorNotesPage.classList.remove('active');
});// 作者有话说 内部翻页逻辑
const notesContent = document.getElementById('notesContent');
const notePages = notesContent.querySelectorAll('.note-page');
const prevNoteBtn = document.getElementById('prevNote');
const nextNoteBtn = document.getElementById('nextNote');
let currentNoteIndex = 0;function updateNoteButtons() {
prevNoteBtn.disabled = currentNoteIndex === 0;
nextNoteBtn.disabled = currentNoteIndex === notePages.length – 1;
}function showNotePage(index) {
notePages.forEach((page, i) => {
page.classList.remove('active', 'prev');
if (i === index) {
page.classList.add('active');
} else if (i < index) {
page.classList.add('prev'); // 用于标记，但不实际应用复杂动画
}
});
updateNoteButtons();
}prevNoteBtn.addEventListener('click', () => {
if (currentNoteIndex > 0) {
currentNoteIndex–;
showNotePage(currentNoteIndex);
}
});nextNoteBtn.addEventListener('click', () => {
if (currentNoteIndex < notePages.length – 1) {
currentNoteIndex++;
showNotePage(currentNoteIndex);
}
});// 角色介绍 内部翻页逻辑
const characterSlider = document.getElementById('characterSlider');
const characterCards = characterSlider.querySelectorAll('.character-card');
const prevCharBtn = document.getElementById('prevChar');
const nextCharBtn = document.getElementById('nextChar');
let currentCharIndex = 0;function updateCharButtons() {
prevCharBtn.disabled = currentCharIndex === 0;
nextCharBtn.disabled = currentCharIndex === characterCards.length – 1;
}function showCharCard(index) {
characterCards.forEach((card, i) => {
card.classList.remove('active');
if (i === index) {
card.classList.add('active');
}
});
// 切换卡片时，将滚动条重置到顶部
if(characterCards[index]){
characterCards[index].scrollTop = 0;
}
updateCharButtons();
}prevCharBtn.addEventListener('click', () => {
if (currentCharIndex > 0) {
currentCharIndex–;
showCharCard(currentCharIndex);
}
});nextCharBtn.addEventListener('click', () => {
if (currentCharIndex < characterCards.length – 1) {
currentCharIndex++;
showCharCard(currentCharIndex);
}
});// 初始化显示
showNotePage(currentNoteIndex);
showCharCard(currentCharIndex);</script>
</body>
</html>
“`