Monday爱豆生活 · 互动模拟
by ThunderPenguin58529 lines17.4 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=yes">
<title>Monday爱豆生活 · 互动模拟</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
body {
background: #0b0b0e;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
padding: 16px 10px 30px;
color: #eaeef2;
}
.app-container {
max-width: 480px;
width: 100%;
background: #121216;
border-radius: 36px 36px 28px 28px;
padding: 18px 14px 24px;
box-shadow: 0 12px 40px rgba(0,0,0,0.7);
border: 1px solid #2a2a30;
position: relative;
}
/* 顶部状态 */
.status-bar {
display: flex;
justify-content: space-between;
font-size: 13px;
color: #8e8e9a;
padding: 0 4px 12px;
letter-spacing: 0.2px;
border-bottom: 1px solid #26262e;
}
.nav-tabs {
display: flex;
gap: 18px;
margin: 14px 0 12px;
font-weight: 500;
font-size: 16px;
padding: 0 6px;
color: #8e8e9a;
border-bottom: 1px solid #1f1f26;
padding-bottom: 10px;
}
.nav-tabs span.active {
color: #f0eef7;
border-bottom: 2px solid #b7a2ff;
padding-bottom: 10px;
margin-bottom: -11px;
}
.nav-tabs span {
cursor: default;
}
/* 内容卡片 */
.card {
background: #18181f;
border-radius: 24px;
padding: 16px 14px;
margin: 12px 0;
border: 1px solid #282830;
}
.chat-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 10px 0;
border-bottom: 1px solid #23232b;
}
.chat-item:last-child {
border-bottom: none;
}
.avatar {
width: 40px;
height: 40px;
border-radius: 40px;
background: #2d2d38;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 600;
color: #bdbdcc;
}
.chat-bubble {
background: #23232b;
padding: 10px 14px;
border-radius: 18px 18px 18px 4px;
flex: 1;
font-size: 14px;
line-height: 1.5;
color: #d6d8e5;
}
.chat-bubble.self {
background: #3b2f5a;
border-radius: 18px 18px 4px 18px;
color: #eceaff;
}
.chat-meta {
font-size: 11px;
color: #6f6f80;
margin-top: 4px;
display: flex;
gap: 10px;
}
.divider {
border: none;
border-top: 1px solid #2a2a33;
margin: 14px 0;
}
.weibo-card {
padding: 12px 0;
border-bottom: 1px solid #26262e;
}
.weibo-header {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 6px;
}
.weibo-name {
font-weight: 600;
font-size: 15px;
}
.weibo-badge {
font-size: 12px;
background: #2d4a7a;
padding: 0 8px;
border-radius: 40px;
color: #b6d0ff;
}
.weibo-time {
color: #6a6a7c;
font-size: 12px;
}
.weibo-text {
font-size: 14px;
line-height: 1.5;
margin: 6px 0 8px;
}
.weibo-media {
background: #20202a;
border-radius: 16px;
padding: 10px 12px;
margin: 8px 0;
font-size: 13px;
color: #b5b5cc;
border: 1px solid #2f2f3a;
}
.weibo-stats {
display: flex;
gap: 18px;
font-size: 13px;
color: #7b7b8e;
margin-top: 8px;
}
.hot-tag {
background: #2f1f3a;
color: #e3b3ff;
padding: 2px 12px;
border-radius: 40px;
font-size: 12px;
}
.search-bar {
background: #1f1f28;
border-radius: 40px;
padding: 8px 16px;
color: #8a8a9e;
font-size: 14px;
margin: 8px 0 12px;
border: 1px solid #2f2f3a;
display: flex;
gap: 6px;
}
.flex-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.text-muted {
color: #7a7a8d;
font-size: 13px;
}
.badge-red {
background: #b13a4a;
color: white;
border-radius: 40px;
padding: 0 10px;
font-size: 11px;
}
.gap-2 { gap: 8px; }
.mt-2 { margin-top: 12px; }
.grid-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
margin: 8px 0;
}
.grid-item {
background: #1f1f2a;
border-radius: 12px;
padding: 12px 4px;
text-align: center;
font-size: 13px;
color: #bdbdd0;
border: 1px solid #2b2b36;
}
.btn-like {
background: transparent;
border: none;
color: #a8a8c0;
font-size: 14px;
padding: 2px 10px;
border-radius: 30px;
background: #1f1f2a;
}
/* 模拟热搜榜 */
.hot-list {
margin: 6px 0;
}
.hot-item {
display: flex;
padding: 10px 0;
border-bottom: 1px solid #1f1f28;
gap: 12px;
font-size: 14px;
}
.hot-rank {
font-weight: 600;
color: #8d8daa;
width: 26px;
}
.hot-rank.top {
color: #f7b731;
}
.hot-tag-icon {
font-size: 12px;
background: #2a2a3a;
padding: 0 8px;
border-radius: 40px;
color: #b7b7d0;
}
.comment-thread {
margin-top: 8px;
padding-left: 12px;
border-left: 2px solid #2a2a36;
}
.sub-comment {
font-size: 13px;
color: #a5a5bb;
padding: 4px 0;
}
/* 底部 */
.bottom-tip {
margin-top: 24px;
color: #5a5a6e;
font-size: 12px;
text-align: center;
border-top: 1px solid #22222b;
padding-top: 16px;
letter-spacing: 0.3px;
}
.label-tag {
background: #2d2d3b;
padding: 2px 12px;
border-radius: 30px;
font-size: 11px;
color: #b3b3cc;
}
.flex {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
</style>
</head>
<body>
<div class="app-container">
<!-- 状态栏 -->
<div class="status-bar">
<span>📶 5G · 岳城</span>
<span>🗓️ 2026.08.09 周一</span>
<span>🔋 87%</span>
</div>
<!-- 导航 -->
<div class="nav-tabs">
<span class="active">💬 聊天</span>
<span>🔥 热搜</span>
<span>📱 微博</span>
<span>👥 社群</span>
</div>
<!-- ======= 聊天区域 ======= -->
<div class="card" style="margin-top: 0;">
<div class="flex-row">
<span style="font-weight: 600;">💬 群聊 · 周四</span>
<span class="label-tag">3条未读</span>
</div>
<!-- 群聊消息 -->
<div class="chat-item">
<div class="avatar" style="background: #2d3f5a;">🌞</div>
<div>
<div class="chat-bubble" style="border-radius: 18px 18px 18px 4px;">
<strong>季灿</strong> 谁能帮我带瓶冰可乐？我在录音室走不开。
</div>
<div class="chat-meta">14:23 · 录音室</div>
</div>
</div>
<div class="chat-item">
<div class="avatar" style="background: #3d3a4a;">🐏</div>
<div>
<div class="chat-bubble" style="border-radius: 18px 18px 18px 4px;">
<strong>余升</strong> 胃不好还喝冰的，我帮你带热奶茶。
</div>
<div class="chat-meta">14:26 · 练习室</div>
</div>
</div>
<div class="chat-item">
<div class="avatar" style="background: #4a3d3d;">🐻</div>
<div>
<div class="chat-bubble" style="border-radius: 18px 18px 18px 4px;">
<strong>纪澜沅</strong> 哈哈老1又嘴硬，我买了热美式给你放桌上了 @季灿
</div>
<div class="chat-meta">14:31 · 保姆车</div>
</div>
</div>
<div class="chat-item">
<div class="avatar" style="background: #2c3e3e;">🦊</div>
<div>
<div class="chat-bubble" style="border-radius: 18px 18px 18px 4px;">
<strong>祝舟</strong> 啧，你们真黏糊。我晚点回宿舍。
</div>
<div class="chat-meta">14:35 · 岳城机场</div>
</div>
</div>
<hr class="divider">
<!-- 私聊 -->
<div class="flex-row" style="margin-bottom: 6px;">
<span style="font-weight: 600;">💌 私聊 · 季灿</span>
<span class="text-muted">❤️ 2条新消息</span>
</div>
<div class="chat-item" style="border-bottom: none; padding-top: 4px;">
<div class="avatar" style="background: #3f2d4a;">🌞</div>
<div>
<div class="chat-bubble self" style="border-radius: 18px 18px 4px 18px;">
你： 晚上一起去便利店？我请你吃冰淇淋。
</div>
<div class="chat-meta" style="justify-content: flex-end;">14:40 · 已读</div>
</div>
</div>
<div class="chat-item" style="border-bottom: none; padding-top: 2px;">
<div class="avatar" style="background: #2d3f5a;">🌞</div>
<div>
<div class="chat-bubble" style="border-radius: 18px 18px 18px 4px;">
<strong>季灿</strong> 嗯。别买太甜的。
</div>
<div class="chat-meta">14:42 · 录音室</div>
</div>
</div>
<!-- 额外私聊示例：余升&祝舟 -->
<hr class="divider">
<div class="flex-row" style="margin-bottom: 6px;">
<span style="font-weight: 600;">💌 私聊 · 余升</span>
<span class="text-muted">🔇 免打扰</span>
</div>
<div class="chat-item" style="border-bottom: none; padding-top: 4px;">
<div class="avatar" style="background: #3d3a4a;">🐏</div>
<div>
<div class="chat-bubble" style="border-radius: 18px 18px 18px 4px;">
<strong>余升</strong> 祝舟机场路透又被拍了，你提醒他戴好口罩。
</div>
<div class="chat-meta">13:10 · 经纪人群</div>
</div>
</div>
</div>
<!-- ======= 热搜板块 ======= -->
<div class="card" style="margin-top: 8px; background: #14141c;">
<div class="flex-row">
<span style="font-weight: 600;">🔥 实时热搜 · 岳城</span>
<span class="text-muted">更新于 14:48</span>
</div>
<div class="hot-list">
<div class="hot-item"><span class="hot-rank top">🥇</span> #Monday偶遇# <span class="hot-tag-icon">🔴 爆</span> <span style="margin-left: auto; color: #8a8aa0;">287万</span></div>
<div class="hot-item"><span class="hot-rank top">🥈</span> #季灿 唇环# <span class="hot-tag-icon">🟤 沸</span> <span style="margin-left: auto; color: #8a8aa0;">143万</span></div>
<div class="hot-item"><span class="hot-rank">3</span> #纪澜沅 机场# <span class="hot-tag-icon">🟠 热</span> <span style="margin-left: auto; color: #8a8aa0;">98万</span></div>
<div class="hot-item"><span class="hot-rank">4</span> #Monday 练习室# <span class="hot-tag-icon">🆕 新</span> <span style="margin-left: auto; color: #8a8aa0;">62万</span></div>
<div class="hot-item"><span class="hot-rank">5</span> #余升 照顾成员# <span class="hot-tag-icon">🟠 热</span> <span style="margin-left: auto; color: #8a8aa0;">47万</span></div>
</div>
<div class="search-bar">🔍 大家都在搜： Monday 路透 · 灿澜 · 升舟</div>
</div>
<!-- ======= 微博模拟 ======= -->
<div class="card" style="margin-top: 8px;">
<div style="display: flex; gap: 12px; font-size: 14px; color: #8e8ea6; margin-bottom: 8px;">
<span style="color: #eaeef2; font-weight: 500;">👑 关注</span> <span>推荐</span> <span>视频</span>
</div>
<!-- 微博1 -->
<div class="weibo-card">
<div class="weibo-header">
<span class="weibo-name">纪澜沅 🐻</span>
<span class="weibo-badge">🔶 黄V</span>
<span class="weibo-time">14:20 · 岳城</span>
</div>
<div class="weibo-text">
和灿哥深夜便利店，落地镜里好像拍到了某个🐏？<br>
#Monday日常# #疏桐街小卖部#
</div>
<div class="weibo-media">
🖼️ 𝐈𝐌𝐀𝐆𝐄 · 昏黄灯光，便利店落地镜，模糊人影轮廓，白金发少年侧身拿冰淇淋，镜中映出戴黑色棒球帽的高个身影。
</div>
<div class="weibo-stats">
<span>↗ 2.3万</span> <span>🗨 1.2万</span> <span>👍 28.7万</span>
</div>
<div class="comment-thread" style="margin-top: 10px;">
<div><strong>船长·祝舟守护</strong> 镜子里是余升吧？？？我cp雷达响了</div>
<div class="sub-comment"> ↳ <strong>Mod·小鱼干</strong> 24批又磕到了，这是13的糖好吗</div>
<div><strong>种菜婆别蹭</strong> 季灿超雄离沅沅远点👊</div>
<div class="sub-comment"> ↳ <strong>灿澜是真的</strong> 关你什么事，13美帝姐没说话呢</div>
</div>
</div>
<!-- 微博2 -->
<div class="weibo-card" style="border-bottom: none;">
<div class="weibo-header">
<span class="weibo-name">季灿 Dawn 🌞</span>
<span class="weibo-badge">👑 金V</span>
<span class="weibo-time">13:05 · 录音室</span>
</div>
<div class="weibo-text">
今天录音很顺。感谢某人送的美式。<br>
#Monday# #录音室日常#
</div>
<div class="weibo-media">
📁现场图集(2) <br>
▣ 图1：录音室调音台，一杯热美式，杯身手写“Dawn” <br>
▣ 图2：落地窗外岳城灰蓝色天空，玻璃反射出模糊人影。
</div>
<div class="weibo-stats">
<span>↗ 5.6万</span> <span>🗨 3.2万</span> <span>👍 86.3万</span>
</div>
<div class="comment-thread">
<div><strong>元宝小太阳</strong> 某人是谁？是沅沅吗？啊啊啊啊</div>
<div><strong>雨季永存</strong> 21党狂喜，余升也在录音室！</div>
<div><strong>渔夫别蹭</strong> 余升男妈妈又来了，离灿灿远点</div>
</div>
</div>
</div>
<!-- 额外：粉丝/舆论 小卡片 -->
<div class="card" style="background: #17171f; margin-top: 8px;">
<div class="flex-row">
<span style="font-weight: 500;">📊 舆论速览</span>
<span class="text-muted">14:50 更新</span>
</div>
<div class="grid-3">
<div class="grid-item">👍 好评+12%</div>
<div class="grid-item">🔥 CP热度 87</div>
<div class="grid-item">⚫ 黑粉值 34</div>
</div>
<div style="font-size: 13px; color: #ababc0; margin-top: 6px;">
⚠️ 系统提示：资源咖争议上升，压力+8
</div>
<div style="font-size: 13px; margin-top: 8px; background: #20202b; border-radius: 40px; padding: 6px 14px; color: #cdcde0;">
🗣️ 热帖：「又是皇族资源咖」 · 评论 670+
</div>
</div>
<!-- 底部 -->
<div class="bottom-tip">
Monday爱豆生活 · 周回制 ｜ 玩家: 纪澜沅 ｜ 亲密度: 78
</div>
</div>
</body>
</html>Game Source: Monday爱豆生活 · 互动模拟
Creator: ThunderPenguin58
Libraries: none
Complexity: complex (529 lines, 17.4 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-mskw8prg" to link back to the original. Then publish at arcadelab.ai/publish.