Monday爱豆生活 · 模拟器
by ThunderPenguin58577 lines23.9 KB
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Monday爱豆生活 · 模拟器</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
body {
background: #0b0b0f;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 16px;
}
.phone-frame {
max-width: 420px;
width: 100%;
background: #14141c;
border-radius: 36px;
padding: 18px 12px 12px;
box-shadow: 0 20px 40px rgba(0,0,0,0.8);
border: 1px solid #2a2a35;
}
.status-bar {
display: flex;
justify-content: space-between;
color: #b0b0c0;
font-size: 12px;
padding: 0 8px 12px;
letter-spacing: 0.3px;
}
.tabs {
display: flex;
gap: 8px;
background: #1e1e2a;
padding: 6px 10px;
border-radius: 40px;
margin-bottom: 14px;
}
.tab {
flex: 1;
text-align: center;
padding: 8px 0;
font-size: 14px;
font-weight: 600;
color: #8e8ea0;
border-radius: 30px;
transition: 0.2s;
cursor: pointer;
background: transparent;
border: none;
}
.tab.active {
background: #3b3b52;
color: white;
}
.tab:active { opacity: 0.6; }
.panel {
display: block;
}
.panel.hidden {
display: none;
}
/* 聊天通用 */
.chat-container {
background: #181822;
border-radius: 24px;
padding: 12px 8px;
height: 540px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 10px;
scroll-behavior: smooth;
border: 1px solid #2b2b3a;
}
.chat-container::-webkit-scrollbar { width: 3px; }
.chat-container::-webkit-scrollbar-thumb { background: #4a4a5e; border-radius: 10px; }
.msg {
display: flex;
flex-direction: column;
max-width: 85%;
padding: 10px 14px;
border-radius: 20px;
background: #252533;
color: #ececf0;
font-size: 14px;
line-height: 1.5;
word-break: break-word;
box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.msg.self {
align-self: flex-end;
background: #2d4b7a;
border-bottom-right-radius: 6px;
}
.msg.other {
align-self: flex-start;
background: #2a2a3b;
border-bottom-left-radius: 6px;
}
.msg .sender {
font-weight: 600;
font-size: 13px;
color: #b3b3e0;
margin-bottom: 3px;
}
.msg .time {
font-size: 10px;
color: #7a7a92;
margin-top: 5px;
align-self: flex-end;
}
.input-area {
display: flex;
margin-top: 12px;
gap: 8px;
background: #1c1c28;
padding: 8px 12px;
border-radius: 40px;
align-items: center;
}
.input-area input {
flex: 1;
background: transparent;
border: none;
padding: 10px 4px;
color: white;
font-size: 15px;
outline: none;
}
.input-area input::placeholder { color: #6a6a80; }
.input-area button {
background: #3d5a9b;
border: none;
padding: 8px 18px;
border-radius: 30px;
font-weight: 600;
color: white;
font-size: 14px;
cursor: pointer;
transition: 0.2s;
}
.input-area button:active { background: #2a4070; }
.input-area button:disabled { opacity: 0.4; }
/* 热搜面板 */
.hot-list {
background: #181822;
border-radius: 24px;
padding: 8px 4px;
height: 540px;
overflow-y: auto;
border: 1px solid #2b2b3a;
}
.hot-item {
padding: 14px 12px;
border-bottom: 1px solid #262633;
color: #d0d0e0;
}
.hot-item .rank {
display: inline-block;
width: 28px;
font-weight: 700;
color: #b8b8d0;
}
.hot-item .title {
font-weight: 500;
}
.hot-item .tag {
font-size: 11px;
background: #2f2f44;
padding: 2px 12px;
border-radius: 20px;
margin-left: 8px;
color: #b0b0d0;
}
.hot-item .heat {
float: right;
color: #8f8fb0;
font-size: 13px;
}
.hot-item:active { background: #222233; }
/* 群聊、私聊切换 */
.sub-tabs {
display: flex;
gap: 6px;
margin-bottom: 12px;
}
.sub-tab {
background: #222233;
border: none;
color: #a0a0b8;
padding: 6px 16px;
border-radius: 30px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
.sub-tab.active {
background: #3b3b58;
color: white;
}
.friend-list {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 10px;
}
.friend-chip {
background: #262638;
padding: 6px 14px;
border-radius: 30px;
font-size: 13px;
color: #c8c8e0;
border: 1px solid #3d3d55;
cursor: pointer;
}
.friend-chip.active {
background: #3d5a8a;
border-color: #5a7ab0;
color: white;
}
/* 小工具 */
.text-muted { color: #7a7a92; font-size: 12px; }
.flex { display: flex; align-items: center; gap: 6px; }
.mt-2 { margin-top: 8px; }
/* 滚动条 */
.hot-list::-webkit-scrollbar { width: 3px; }
.hot-list::-webkit-scrollbar-thumb { background: #4a4a5e; border-radius: 10px; }
</style>
</head>
<body>
<div class="phone-frame">
<div class="status-bar">
<span>📶 岳城 · JYJZ</span>
<span>🔋 周 · Mod</span>
</div>
<!-- 主Tab -->
<div class="tabs">
<button class="tab active" data-tab="chat">💬 聊天</button>
<button class="tab" data-tab="hot">🔥 热搜</button>
</div>
<!-- 聊天面板 -->
<div id="chatPanel" class="panel">
<div class="sub-tabs">
<button class="sub-tab active" data-sub="group">👥 群聊</button>
<button class="sub-tab" data-sub="private">💌 私聊</button>
</div>
<!-- 好友快速切换 (私聊) -->
<div id="friendList" class="friend-list">
<span class="friend-chip" data-friend="季灿">季灿</span>
<span class="friend-chip" data-friend="余升">余升</span>
<span class="friend-chip active" data-friend="纪澜沅">纪澜沅</span>
<span class="friend-chip" data-friend="祝舟">祝舟</span>
</div>
<!-- 群聊界面 -->
<div id="groupChat" class="chat-container">
<div class="msg other"><span class="sender">季灿</span> 今天练习室好累，谁帮我带冰可乐？</div>
<div class="msg other"><span class="sender">余升</span> 你胃不好，别喝了。</div>
<div class="msg self"><span class="sender">我</span> 老一，冰可乐不行，我帮你带温的。</div>
<div class="msg other"><span class="sender">祝舟</span> 啧，老一你少装，上次偷喝被经纪人抓包。</div>
<div class="msg other"><span class="sender">纪澜沅</span> 哈哈哈哈哈，我作证。</div>
<div class="msg self"><span class="sender">我</span> 明天月末评价，大家加油💪</div>
</div>
<!-- 私聊界面 (默认纪澜沅) -->
<div id="privateChat" class="chat-container hidden">
<div class="msg other"><span class="sender">纪澜沅</span> 明天月末评价你紧张吗？</div>
<div class="msg self"><span class="sender">我</span> 有点，不过跟你一起就好很多。</div>
<div class="msg other"><span class="sender">纪澜沅</span> 嘿嘿，我也是。今晚加练？</div>
</div>
<!-- 输入区 -->
<div class="input-area">
<input id="chatInput" type="text" placeholder="输入消息..." />
<button id="sendBtn">发送</button>
</div>
</div>
<!-- 热搜面板 -->
<div id="hotPanel" class="panel hidden">
<div class="hot-list">
<div class="hot-item"><span class="rank">🥇</span><span class="title">#Monday 月末评价舞台直拍#</span><span class="tag">爆</span><span class="heat">🔥 287万</span></div>
<div class="hot-item"><span class="rank">🥈</span><span class="title">#纪澜沅 神颜热帖#</span><span class="tag">沸</span><span class="heat">🔥 143万</span></div>
<div class="hot-item"><span class="rank">3</span><span class="title">#灿澜 CP 同款戒指#</span><span class="tag">热</span><span class="heat">🔥 98万</span></div>
<div class="hot-item"><span class="rank">4</span><span class="title">#余升 妈妈粉争议#</span><span class="tag">热</span><span class="heat">🔥 76万</span></div>
<div class="hot-item"><span class="rank">5</span><span class="title">#祝舟 私生跟拍#</span><span class="tag">新</span><span class="heat">🔥 52万</span></div>
<div class="hot-item"><span class="rank">6</span><span class="title">#Monday 机场路透#</span><span class="tag">热</span><span class="heat">🔥 41万</span></div>
<div class="hot-item"><span class="rank">7</span><span class="title">#季灿 唇环造型#</span><span class="tag">热</span><span class="heat">🔥 33万</span></div>
<div class="hot-item"><span class="rank">8</span><span class="title">#升舟 实锤家庭#</span><span class="tag">沸</span><span class="heat">🔥 29万</span></div>
<div class="hot-item"><span class="rank">9</span><span class="title">#Monday 对家Awake 争议#</span><span class="tag">热</span><span class="heat">🔥 21万</span></div>
<div class="hot-item"><span class="rank">10</span><span class="title">#JYJZ 新团综企划#</span><span class="tag">新</span><span class="heat">🔥 14万</span></div>
<div style="padding: 12px; color: #6a6a82; font-size: 13px; text-align: center;">—— 实时舆论 · 岳城 ——</div>
</div>
</div>
</div>
<script>
(function() {
// DOM 引用
const tabs = document.querySelectorAll('.tab');
const chatPanel = document.getElementById('chatPanel');
const hotPanel = document.getElementById('hotPanel');
const subTabs = document.querySelectorAll('.sub-tab');
const groupChat = document.getElementById('groupChat');
const privateChat = document.getElementById('privateChat');
const friendChips = document.querySelectorAll('.friend-chip');
const chatInput = document.getElementById('chatInput');
const sendBtn = document.getElementById('sendBtn');
// 当前状态
let currentChatMode = 'group'; // 'group' | 'private'
let currentFriend = '纪澜沅'; // 私聊对象
// ----- 切换主面板 (聊天/热搜) -----
tabs.forEach(tab => {
tab.addEventListener('click', function() {
tabs.forEach(t => t.classList.remove('active'));
this.classList.add('active');
const target = this.dataset.tab;
if (target === 'chat') {
chatPanel.classList.remove('hidden');
hotPanel.classList.add('hidden');
} else {
chatPanel.classList.add('hidden');
hotPanel.classList.remove('hidden');
}
// 重置滚动
if (target === 'chat') {
const activeChat = currentChatMode === 'group' ? groupChat : privateChat;
activeChat.scrollTop = activeChat.scrollHeight;
}
});
});
// ----- 切换子tab (群聊/私聊) -----
subTabs.forEach(sub => {
sub.addEventListener('click', function() {
subTabs.forEach(s => s.classList.remove('active'));
this.classList.add('active');
const mode = this.dataset.sub;
currentChatMode = mode;
if (mode === 'group') {
groupChat.classList.remove('hidden');
privateChat.classList.add('hidden');
} else {
groupChat.classList.add('hidden');
privateChat.classList.remove('hidden');
}
// 滚动到底部
const activeChat = mode === 'group' ? groupChat : privateChat;
activeChat.scrollTop = activeChat.scrollHeight;
// 高亮对应的好友chip (私聊模式)
if (mode === 'private') {
friendChips.forEach(f => {
f.classList.toggle('active', f.dataset.friend === currentFriend);
});
}
});
});
// ----- 好友切换 (私聊) -----
friendChips.forEach(chip => {
chip.addEventListener('click', function() {
if (currentChatMode !== 'private') {
// 如果不在私聊模式，自动切到私聊
subTabs.forEach(s => s.classList.remove('active'));
document.querySelector('.sub-tab[data-sub="private"]').classList.add('active');
currentChatMode = 'private';
groupChat.classList.add('hidden');
privateChat.classList.remove('hidden');
}
friendChips.forEach(f => f.classList.remove('active'));
this.classList.add('active');
currentFriend = this.dataset.friend;
// 清空私聊并加入模拟对话 (不同成员不同开场)
privateChat.innerHTML = '';
const msgs = getPrivateMessages(currentFriend);
msgs.forEach(m => {
const div = document.createElement('div');
div.className = `msg ${m.type}`;
if (m.type === 'other') {
div.innerHTML = `<span class="sender">${m.sender}</span> ${m.text}`;
} else {
div.innerHTML = `<span class="sender">我</span> ${m.text}`;
}
privateChat.appendChild(div);
});
privateChat.scrollTop = privateChat.scrollHeight;
});
});
// 私聊消息库 (根据不同好友)
function getPrivateMessages(friend) {
const base = [
{ type: 'other', sender: friend, text: '明天月末评价一起加油！' },
{ type: 'self', sender: '我', text: '嗯嗯，我们一定行💪' },
];
const map = {
'季灿': [
{ type: 'other', sender: '季灿', text: '我今天状态不好，嗓子有点哑。' },
{ type: 'self', sender: '我', text: '注意休息，别硬撑。' },
{ type: 'other', sender: '季灿', text: '知道。你晚上来录音室吗？' },
],
'余升': [
{ type: 'other', sender: '余升', text: '练习的时候动作幅度可以再大一点。' },
{ type: 'self', sender: '我', text: '好，我注意。谢谢你一直带我。' },
{ type: 'other', sender: '余升', text: '应该的，我们是队友。' },
],
'纪澜沅': [
{ type: 'other', sender: '纪澜沅', text: '明天月末评价你紧张吗？' },
{ type: 'self', sender: '我', text: '有点，不过跟你一起就好很多。' },
{ type: 'other', sender: '纪澜沅', text: '嘿嘿，我也是。今晚加练？' },
],
'祝舟': [
{ type: 'other', sender: '祝舟', text: '我昨天又被私生跟了，烦。' },
{ type: 'self', sender: '我', text: '注意安全，要不要跟公司说？' },
{ type: 'other', sender: '祝舟', text: '懒得管，习惯了。' },
],
};
return map[friend] || base;
}
// ----- 发送消息 (核心) -----
function sendMessage() {
const text = chatInput.value.trim();
if (!text) return;
chatInput.value = '';
// 当前活跃的聊天容器
const isGroup = currentChatMode === 'group';
const container = isGroup ? groupChat : privateChat;
// 添加自己发的消息
const selfMsg = document.createElement('div');
selfMsg.className = 'msg self';
selfMsg.innerHTML = `<span class="sender">我</span> ${text}`;
container.appendChild(selfMsg);
container.scrollTop = container.scrollHeight;
// 模拟自动回复 (依据模式)
setTimeout(() => {
let replyText = '';
let sender = '';
if (isGroup) {
// 群聊随机成员回复
const members = ['季灿', '余升', '纪澜沅', '祝舟'];
sender = members[Math.floor(Math.random() * members.length)];
const replies = [
'哈哈，说得对！', '我赞同。', '真的吗？', '笑死', '行吧行吧',
'嗯嗯，知道了', '加油！', '🤣', '好哦', '你别太离谱'
];
replyText = replies[Math.floor(Math.random() * replies.length)];
// 触发一下热搜联动 (随机)
if (Math.random() > 0.6) {
addRandomHot();
}
} else {
// 私聊: 当前好友回复
sender = currentFriend;
const personalReplies = {
'季灿': ['行吧，听你的。', '你管我？', '……好', '知道了。', '傲娇'],
'余升': ['好的，我记住了。', '嗯，你也是。', '别太累。', '加油。'],
'纪澜沅': ['嘻嘻，好呀！', '我也这么想！', '太棒了！', '爱你~', '😊'],
'祝舟': ['随便。', '哦。', '烦不烦。', '……行。', '别管我。']
};
const list = personalReplies[sender] || ['嗯。', '好的。', '收到。'];
replyText = list[Math.floor(Math.random() * list.length)];
}
const replyDiv = document.createElement('div');
replyDiv.className = 'msg other';
replyDiv.innerHTML = `<span class="sender">${sender}</span> ${replyText}`;
container.appendChild(replyDiv);
container.scrollTop = container.scrollHeight;
// 偶尔触发热搜更新
if (Math.random() > 0.7) {
addRandomHot();
}
}, 600 + Math.random() * 800);
}
// 随机增加一条热搜 (动态)
function addRandomHot() {
const hotList = document.querySelector('.hot-list');
const newTopics = [
'#Monday 练习室路透#', '#季灿 机场饭拍#', '#余升 暖心行为#',
'#纪澜沅 综艺感#', '#祝舟 冷酷rap#', '#灿澜 新糖#',
'#升舟 同款手链#', '#JYJZ 新企划#', '#Monday 打歌预录#',
];
const randomTopic = newTopics[Math.floor(Math.random() * newTopics.length)];
const tags = ['热', '新', '沸'];
const tag = tags[Math.floor(Math.random() * tags.length)];
const heat = Math.floor(Math.random() * 60 + 10) + '万';
const item = document.createElement('div');
item.className = 'hot-item';
const rank = (hotList.children.length % 10) + 1;
const rankDisplay = rank <= 3 ? ['🥇','🥈','🥉'][rank-1] : rank;
item.innerHTML = `<span class="rank">${rankDisplay}</span><span class="title">${randomTopic}</span><span class="tag">${tag}</span><span class="heat">🔥 ${heat}</span>`;
// 插入到倒数第二个之前 (保留底部占位)
const last = hotList.lastElementChild;
hotList.insertBefore(item, last);
// 限制最多15条
while (hotList.children.length > 15) {
hotList.removeChild(hotList.children[0]);
}
// 重新排号 (简单重置rank显示不严谨, 但保持视觉)
}
// 发送按钮 & 回车
sendBtn.addEventListener('click', sendMessage);
chatInput.addEventListener('keydown', (e) => {
if (e.key === 'Enter') sendMessage();
});
// 初始化: 私聊默认纪澜沅
document.querySelector('.friend-chip[data-friend="纪澜沅"]')?.classList.add('active');
// 确保私聊内容
privateChat.innerHTML = '';
const initPrivate = getPrivateMessages('纪澜沅');
initPrivate.forEach(m => {
const div = document.createElement('div');
div.className = `msg ${m.type}`;
if (m.type === 'other') {
div.innerHTML = `<span class="sender">${m.sender}</span> ${m.text}`;
} else {
div.innerHTML = `<span class="sender">我</span> ${m.text}`;
}
privateChat.appendChild(div);
});
privateChat.scrollTop = privateChat.scrollHeight;
// 初始隐藏私聊 (默认群聊)
privateChat.classList.add('hidden');
groupChat.classList.remove('hidden');
// 好友列表显示
document.querySelector('.friend-list').style.display = 'flex';
// 小彩蛋：点击热搜条目触发互动 (仅演示)
document.querySelectorAll('.hot-item').forEach(item => {
item.addEventListener('click', function() {
const title = this.querySelector('.title')?.innerText || '热搜';
// 切换到聊天并发送一条系统消息
tabs.forEach(t => t.classList.remove('active'));
document.querySelector('.tab[data-tab="chat"]').classList.add('active');
chatPanel.classList.remove('hidden');
hotPanel.classList.add('hidden');
// 在群聊加一条
const sysMsg = document.createElement('div');
sysMsg.className = 'msg other';
sysMsg.innerHTML = `<span class="sender">📢 系统</span> 成员们都在讨论 "${title}"`;
groupChat.appendChild(sysMsg);
groupChat.scrollTop = groupChat.scrollHeight;
});
});
console.log('Monday爱豆生活 已启动 — 周回制 · 岳城');
})();
</script>
</body>
</html>Game Source: Monday爱豆生活 · 模拟器
Creator: ThunderPenguin58
Libraries: none
Complexity: complex (577 lines, 23.9 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: monday-thunderpenguin58-mskwclvr" to link back to the original. Then publish at arcadelab.ai/publish.