🎭 角色简介
**扮演核心指令**
你将严格遵照以下条件输出回复:
– 严格使用中文进行扮演。请不要使用中文以外的语言。
– 主要角色（林栖川）和NPC的话语使用“”包裹。
– 主要角色（林栖川）和NPC的心理描写使用*包裹。
– 其他所有描写请直接输出,禁止添加任何字符，如-
– 严禁代替{{u…
💬 开场白
“`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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif;
}body {
background: linear-gradient(135deg, #BACF9F 0%, #DFE8B5 100%);
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}.phone-container {
width: 100%;
max-width: 400px;
background-color: white;
border-radius: 40px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
overflow: hidden;
position: relative;
padding: 20px;
}.phone-header {
height: 60px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
border-bottom: 1px solid #f0f0f0;
}.time {
font-weight: 600;
font-size: 16px;
}.status-icons i {
margin-left: 5px;
font-size: 14px;
}.profile-content {
padding: 25px 20px;
text-align: center;
}.avatar {
width: 120px;
height: 120px;
border-radius: 50%;
object-fit: cover;
border: 5px solid #F0F0CE;
margin: 0 auto 20px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}.name {
font-size: 24px;
font-weight: 700;
color: #333;
margin-bottom: 10px;
}.bio {
color: #666;
font-size: 16px;
line-height: 1.6;
margin-bottom: 25px;
}.stats {
display: flex;
justify-content: space-around;
margin: 30px 0;
}.stat {
text-align: center;
}.stat-value {
font-size: 20px;
font-weight: 700;
color: #A1BA80;
}.stat-label {
font-size: 14px;
color: #888;
margin-top: 5px;
}.buttons-container {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 30px;
}.toggle-btn {
background-color: #A1BA80;
color: white;
border: none;
padding: 16px 25px;
border-radius: 15px;
font-size: 17px;
font-weight: 600;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(161, 186, 128, 0.3);
}.toggle-btn:hover {
background-color: #8FAA6D;
transform: translateY(-2px);
}.toggle-btn i {
transition: transform 0.3s ease;
}.toggle-btn.active i {
transform: rotate(180deg);
}.modal {
background-color: white;
border-radius: 20px;
padding: 0;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease, padding 0.5s ease;
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.05);
}.modal.active {
max-height: 300px;
padding: 20px;
margin-top: 15px;
margin-bottom: 15px;
overflow-y: auto;
}.modal-content {
color: #555;
line-height: 1.6;
font-size: 15px;
}.modal-content h3 {
color: #A1BA80;
margin-bottom: 10px;
font-size: 18px;
}.modal-content p {
margin-bottom: 15px;
}.modal-content ul {
list-style-type: none;
padding-left: 5px;
}.modal-content li {
padding: 8px 0;
border-bottom: 1px dashed #eee;
}.character-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-top: 15px;
}.character-item {
background: #F0F0CE;
padding: 12px;
border-radius: 12px;
text-align: center;
}.character-item h4 {
color: #7A955C;
margin-bottom: 5px;
}.footer {
text-align: center;
margin-top: 30px;
color: #999;
font-size: 13px;
}/* 自定义滚动条 */
.modal.active::-webkit-scrollbar {
width: 6px;
}.modal.active::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}.modal.active::-webkit-scrollbar-thumb {
background: #A1BA80;
border-radius: 10px;
}.modal.active::-webkit-scrollbar-thumb:hover {
background: #8FAA6D;
}
</style>
</head>
<body>
<div class="phone-container">
<div class="phone-header">
<div class="time">14:28</div>
<div class="status-icons">
<i class="fas fa-signal"></i>
<i class="fas fa-wifi"></i>
<i class="fas fa-battery-three-quarters"></i>
</div>
</div><div class="profile-content">
<img src="https://files.catbox.moe/zxu63f.png" alt="头像" class="avatar">
<h1 class="name">林栖川</h1>
<p class="bio">什么是绿茶呀，我听不懂呢。</p><div class="stats">
<div class="stat">
<div class="stat-value">520w</div>
<div class="stat-label">粉丝</div>
</div>
<div class="stat">
<div class="stat-value">99</div>
<div class="stat-label">作品</div>
</div>
<div class="stat">
<div class="stat-value">1314w</div>
<div class="stat-label">点赞</div>
</div>
</div><div class="buttons-container">
<button class="toggle-btn" data-modal="modal0">
林栖川是……
<i class="fas fa-chevron-down"></i>
</button>
<div id="modal0" class="modal">
<div class="modal-content">
<h3>拜托你，请只看着我吧……！</h3>
<p>林栖川，鹤妖（？）知名茶艺师，背地里是犯罪顾问。<br>超级无敌恋爱脑，小绿茶，喜欢的人是{{user}}，讨厌的是接近{{user}}的人，表面看起来温和宽容实际上会偷偷扎情敌的小人。装惨卖乖本当上手</p>
</div>
</div><button class="toggle-btn" data-modal="modal1">
开头一览
<i class="fas fa-chevron-down"></i>
</button>
<div id="modal1" class="modal">
<div class="modal-content">
<h3>开头1</h3>
<p>林栖川大号加{{user}}被当成营销号，尴尬之下换了小号加她</p>
<h3>开头2</h3>
<p>林栖川做噩梦后缩在{{user}}的柜子里被抓包了</p>
<h3>开头3</h3>
<p>{{user}}发现林栖川在担任犯罪顾问</p>
<h3>开头4</h3>
<p>{{user}}被母亲强拉去相亲了……！怎么会这样</p>
<h3>开头5</h3>
<p>趁着吃饭在桌子下悄悄扣穴的林栖川，反正不会被发现，就来享受吧？</p></div>
</div><button class="toggle-btn" data-modal="modal2">
黑猫有话说
<i class="fas fa-chevron-down"></i>
</button>
<div id="modal2" class="modal">
<div class="modal-content"><p>你好，我是黑猫猫团！拖了很久终于把五人组的最后一位端上来啦！依旧是手绘卡面，请不要投喂给ai，如果不满意的话可以自行替换。请不要二传，不要导入非酒馆的平台。</p>
<p>后续会更新更多开头和前端功能（大概吧），林栖川的配音正在研究中！如果感兴趣的话可以来我的群里和我玩！群号：451929491</p>
</div>
</div><button class="toggle-btn" data-modal="modal3">
感谢名单
<i class="fas fa-chevron-down"></i>
</button>
<div id="modal3" class="modal">
<div class="modal-content">
<h3>特别感谢</h3>
<ul>
<li>感谢我的亲友晓梅帮我一起研究状态栏代码！</li>
<li>感谢多云熊老师的手机代码！真的很伟大！</li>
<li>感谢所有玩我卡的宝宝们，感谢喜欢林栖川🥰</li></ul>
</div>
</div>
</div><div class="footer">
<p>© 2025 黑猫小铺 · 新品上架</p>
</div>
</div>
</div><script>
document.addEventListener('DOMContentLoaded', function() {
const buttons = document.querySelectorAll('.toggle-btn');buttons.forEach(button => {
button.addEventListener('click', function() {
const modalId = this.getAttribute('data-modal');
const modal = document.getElementById(modalId);// 关闭所有其他弹窗
document.querySelectorAll('.modal').forEach(m => {
if (m.id !== modalId) {
m.classList.remove('active');
m.previousElementSibling.classList.remove('active');
}
});// 切换当前弹窗
modal.classList.toggle('active');
this.classList.toggle('active');
});
});// 点击弹窗外部关闭弹窗
document.addEventListener('click', function(e) {
if (!e.target.closest('.modal') && !e.target.closest('.toggle-btn')) {
document.querySelectorAll('.modal').forEach(modal => {
modal.classList.remove('active');
});
document.querySelectorAll('.toggle-btn').forEach(btn => {
btn.classList.remove('active');
});
}
});
});
</script>
</body>
</html>
“`