mm层群 - 后室民间分站沙盒

mm层群

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MM层群民间分站 - 认知与情绪战场</title>
<style>
/* 后室风格CSS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: 'Consolas', 'Monaco', monospace;
background-color: #0a0a12;
color: #e0e0ff;
line-height: 1.6;
background-image:
radial-gradient(circle at 10% 20%, rgba(100, 80, 255, 0.1) 0%, transparent 20%),
radial-gradient(circle at 90% 80%, rgba(255, 100, 100, 0.08) 0%, transparent 20%);
min-height: 100vh;
position: relative;
overflow-x: hidden;
}

/* 闪烁的警告效果 */
@keyframes warning-pulse {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}

@keyframes glitch {
0% { transform: translate(0); }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(-2px, -2px); }
60% { transform: translate(2px, 2px); }
80% { transform: translate(2px, -2px); }
100% { transform: translate(0); }
}

/* 头部警告栏 */
.warning-banner {
background: linear-gradient(90deg, #8b0000 0%, #5a0000 100%);
padding: 12px 20px;
text-align: center;
border-bottom: 3px solid #ff4444;
animation: warning-pulse 2s infinite;
position: relative;
overflow: hidden;
}

.warning-banner::before {
content: "⚠️";
position: absolute;
left: 30px;
animation: glitch 0.5s infinite;
}

.warning-banner::after {
content: "⚠️";
position: absolute;
right: 30px;
animation: glitch 0.7s infinite;
}

.warning-text {
font-weight: bold;
font-size: 1.1em;
color: #ffffff;
text-shadow: 0 0 10px rgba(255, 100, 100, 0.8);
}

/* 导航栏 */
.navbar {
background: rgba(20, 20, 40, 0.95);
backdrop-filter: blur(10px);
padding: 15px 0;
border-bottom: 1px solid rgba(100, 100, 255, 0.3);
position: sticky;
top: 0;
z-index: 1000;
}

.nav-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}

.logo {
display: flex;
align-items: center;
gap: 10px;
}

.logo-icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 18px;
color: white;
}

.logo-text {
font-size: 1.5em;
font-weight: bold;
background: linear-gradient(45deg, #667eea, #ff6b6b);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
}

.nav-links {
display: flex;
gap: 30px;
}

.nav-link {
color: #b0b0ff;
text-decoration: none;
padding: 8px 16px;
border-radius: 4px;
transition: all 0.3s ease;
position: relative;
}

.nav-link:hover {
background: rgba(100, 100, 255, 0.2);
color: #ffffff;
transform: translateY(-2px);
}

.nav-link.active {
background: rgba(100, 100, 255, 0.3);
color: #ffffff;
border-left: 3px solid #667eea;
}

/* 主要内容区 */
.main-container {
max-width: 1200px;
margin: 30px auto;
padding: 0 20px;
display: grid;
grid-template-columns: 1fr;
gap: 30px;
}

/* 信息卡片 */
.info-card {
background: rgba(15, 15, 30, 0.8);
border: 1px solid rgba(100, 100, 255, 0.2);
border-radius: 8px;
padding: 25px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(100, 100, 255, 0.2);
border-color: rgba(100, 100, 255, 0.4);
}

.card-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid rgba(100, 100, 255, 0.3);
}

.card-icon {
width: 50px;
height: 50px;
background: rgba(100, 100, 255, 0.2);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}

.card-title {
font-size: 1.5em;
color: #ffffff;
text-shadow: 0 0 10px rgba(100, 100, 255, 0.5);
}

.card-subtitle {
color: #8888cc;
font-size: 0.9em;
margin-top: 5px;
}

/* 状态指示器 */
.status-indicator {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 0.8em;
font-weight: bold;
margin-left: 10px;
animation: status-pulse 2s infinite;
}

.status-high-risk {
background: rgba(255, 50, 50, 0.3);
color: #ff6666;
border: 1px solid #ff6666;
}

.status-dynamic {
background: rgba(255, 200, 50, 0.3);
color: #ffcc33;
border: 1px solid #ffcc33;
}

/* 实体标签 */
.entity-tag {
display: inline-block;
padding: 4px 12px;
margin: 5px;
background: rgba(255, 100, 100, 0.2);
border: 1px solid rgba(255, 100, 100, 0.5);
border-radius: 4px;
font-size: 0.9em;
color: #ff9999;
}

.entity-tag.rede {
background: rgba(139, 0, 139, 0.3);
border-color: #8b008b;
color: #dda0dd;
}

/* 层级列表 */
.level-list {
list-style: none;
padding: 0;
}

.level-item {
padding: 15px;
margin: 10px 0;
background: rgba(30, 30, 60, 0.5);
border-left: 4px solid #667eea;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}

.level-item:hover {
background: rgba(40, 40, 80, 0.7);
transform: translateX(5px);
}

.level-danger {
border-left-color: #ff4444;
}

.level-safe {
border-left-color: #44ff44;
}

/* 表单样式 */
.form-group {
margin-bottom: 20px;
}

.form-label {
display: block;
margin-bottom: 8px;
color: #b0b0ff;
font-weight: bold;
}

.form-input, .form-textarea, .form-select {
width: 100%;
padding: 12px;
background: rgba(20, 20, 40, 0.8);
border: 1px solid rgba(100, 100, 255, 0.3);
border-radius: 4px;
color: #e0e0ff;
font-family: inherit;
transition: all 0.3s ease;
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}

.form-textarea {
min-height: 120px;
resize: vertical;
}

/* 按钮样式 */
.btn {
padding: 12px 30px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-weight: bold;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}

.btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}

.btn-warning {
background: linear-gradient(135deg, #ff6b6b 0%, #c44569 100%);
}

/* 页脚 */
.footer {
margin-top: 50px;
padding: 30px 20px;
background: rgba(10, 10, 20, 0.95);
border-top: 1px solid rgba(100, 100, 255, 0.3);
text-align: center;
}

.footer-text {
color: #8888aa;
font-size: 0.9em;
margin-bottom: 10px;
}

/* 响应式设计 */
@media (max-width: 768px) {
.nav-links {
flex-direction: column;
gap: 10px;
}

.nav-container {
flex-direction: column;
gap: 15px;
}

.main-container {
padding: 0 15px;
}

.level-item {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
</style>
</head>
<body>
<!— 警告横幅 —>
<div class="warning-banner">
<div class="warning-text">
⚠️ 警告：MM层群进入动态平衡期·高风险状态。所有探索行为必须基于最新情报 ⚠️
</div>
</div>

<!— 导航栏 —>
<nav class="navbar">
<div class="nav-container">
<div class="logo">
<div class="logo-icon">MM</div>
<div class="logo-text">认知与情绪层群分站</div>
</div>
<div class="nav-links">
<a href="#overview" class="nav-link active">层群概览</a>
<a href="#threats" class="nav-link">威胁情报</a>
<a href="#levels" class="nav-link">层级信息</a>
<a href="#report" class="nav-link">情报提交</a>
<a href="#contact" class="nav-link">紧急联系</a>
</div>
</div>
</nav>

<!— 主要内容 >
<main class="main-container">
<! 层群概览 —>
<section id="overview" class="info-card">
<div class="card-header">
<div class="card-icon">📍</div>
<div>
<h2 class="card-title">MM层群现状</h2>
<div class="card-subtitle">
认知与情绪层群 · 后壁垒时代
<span class="status-indicator status-high-risk">高风险</span>
<span class="status-indicator status-dynamic">动态平衡</span>
</div>
</div>
</div>
<p>MM层群正处于前所未有的"后壁垒时代"。Level-mm-80("打破壁垒")的发现，标志着层群从"封闭的监狱/实验场"转变为"半开放的前沿地带"。</p>
<br>
<p><strong>机遇：</strong>打破了孤立状态，获得了向更广阔后室探索的可能性，并催生了适应新环境的新思想与组织。</p>
<br>
<p><strong>威胁：</strong>面临着来自高层级的降维打击式威胁，生存环境整体恶化，多个区域已实质性沦陷。</p>
<br>
<p>当前的"认知与情绪战场"不仅是人类对抗实体与污染的前线，更是不同生存哲学、文明形态与超自然概念之间碰撞的宏大舞台。</p>
</section>

<!— 主要势力 —>
<section class="info-card">
<div class="card-header">
<div class="card-icon">⚔️</div>
<div>
<h2 class="card-title">主要势力</h2>
<div class="card-subtitle">当前层群主导组织与联盟</div>
</div>
</div>
<div class="level-list">
<div class="level-item">
<div>
<strong>人类抵抗联盟（M.E.G.主导）</strong>
<p style="color: #8888cc; font-size: 0.9em;">战略重心：巩固、防御、理解</p>
</div>
<div style="color: #44ff44;">合作中</div>
</div>
<div class="level-item">
<div>
<strong>情绪道门</strong>
<p style="color: #8888cc; font-size: 0.9em;">驾驭认知污染寻求超脱</p>
</div>
<div style="color: #ffcc33;">谨慎接触</div>
</div>
<div class="level-item">
<div>
<strong>柯维拉帝国</strong>
<p style="color: #8888cc; font-size: 0.9em;">Level-mm-31的文明孤岛</p>
</div>
<div style="color: #44ff44;">有限合作</div>
</div>
</div>
</section>

<!— 威胁情报 —>
<section id="threats" class="info-card">
<div class="card-header">
<div class="card-icon">⚠️</div>
<div>
<h2 class="card-title">主要威胁</h2>
<div class="card-subtitle">实体与污染势力情报</div>
</div>
</div>
<h3>高优先级威胁：</h3>
<br>
<p><strong>Rede级实体：</strong>
<span class="entity-tag rede">智天尸</span>
<span class="entity-tag rede">三首天尸</span>
<span class="entity-tag rede">无限</span>
<br>来自高层级的超形上存在，拥有改写现实能力，是当前最紧迫的威胁。
</p>
<br>
<p><strong>"末日"与"深渊阴影"：</strong>持续侵蚀特定区域，需重点防范。</p>
<br>
<p><strong>"造罐者"与梦魇教派：</strong>在后方层级进行渗透与破坏活动。</p>
<br>
<p><strong>旧忆者：</strong>动机不明的神秘观察者，其警告需要谨慎对待。</p>
</section>

<!— 关键层级 —>
<section id="levels" class="info-card">
<div class="card-header">
<div class="card-icon">🗺️</div>
<div>
<h2 class="card-title">关键层级信息</h2>
<div class="card-subtitle">当前状况与安全等级</div>
</div>
</div>
<div class="level-list">
<div class="level-item level-danger">
<div>
<strong>Level-mm-10 - 已沦陷</strong>
<p style="color: #ff9999;">Incident mm-10-3 "蚀日吞天" / Incident mm-10-4 "家山远望"</p>
</div>
<div style="color: #ff4444;">极度危险</div>
</div>
<div class="level-item level-safe">
<div>
<strong>Level-mm-49 - 心绪信号塔</strong>
<p style="color: #99ff99;">mmNet网络核心枢纽，相对安全</p>
</div>
<div style="color: #44ff44;">受保护</div>
</div>
<div class="level-item">
<div>
<strong>Level-mm-80 - 打破壁垒</strong>
<p style="color: #ffff99;">通往高层级及外部后室的通道</p>
</div>
<div style="color: #ffcc33;">探索中</div>
</div>
<div class="level-item level-danger">
<div>
<strong>Level-mm-68 - 绝对封锁</strong>
<p style="color: #ff9999;">效应已被证实并非绝对</p>
</div>
<div style="color: #ff4444;">高危险</div>
</div>
</div>
</section>

<!— 情报提交 —>
<section id="report" class="info-card">
<div class="card-header">
<div class="card-icon">📝</div>
<div>
<h2 class="card-title">情报提交</h2>
<div class="card-subtitle">向MM层群分站报告新发现</div>
</div>
</div>
<form id="reportForm">
<div class="form-group">
<label class="form-label">发现者代号/ID</label>
<input type="text" class="form-input" placeholder="请输入您的流浪者代号" required>
</div>
<div class="form-group">
<label class="form-label">发现层级</label>
<input type="text" class="form-input" placeholder="例: Level-mm-XX" required>
</div>
<div class="form-group">
<label class="form-label">情报类型</label>
<select class="form-select" required>
<option value="">请选择情报类型</option>
<option value="entity">实体发现</option>
<option value="level-change">层级变化</option>
<option value="resource">资源情报</option>
<option value="threat">威胁警告</option>
<option value="other">其他情报</option>
</select>
</div>
<div class="form-group">
<label class="form-label">详细描述</label>
<textarea class="form-textarea" placeholder="请详细描述您的发现，包括时间、地点、现象等信息…" required></textarea>
</div>
<div class="form-group">
<label class="form-label">威胁等级评估</label>
<select class="form-select" required>
<option value="">请选择威胁等级</option>
<option value="safe">安全</option>
<option value="caution">需谨慎</option>
<option value="danger">危险</option>
<option value="extreme">极度危险</option>
</select>
</div>
<button type="submit" class="btn">提交情报</button>
</form>
</section>

<!— 紧急联系 —>
<section id="contact" class="info-card">
<div class="card-header">
<div class="card-icon">📞</div>
<div>
<h2 class="card-title">紧急联系与网络</h2>
<div class="card-subtitle">MM层群通信渠道</div>
</div>
</div>
<p><strong>mmNet接入点：</strong>Level-mm-49 ("心绪信号塔") 提供主要网络支持</p>
<br>
<p><strong>紧急频率：</strong>MM-EMG-449 (24小时监控)</p>
<br>
<p><strong>安全据点：</strong>
<br>- M.E.G. "前哨"基地 (Level-mm-1, mm-7, mm-49)
<br>- B.N.T.G. 贸易前哨 (多个主要层级)
<br>- 机器人科技公司维修站
</p>
<br>
<p><strong>警告：</strong>请勿在未知安全性的网络信道中透露位置信息，谨防Entity-mm-13 ("超级病毒")攻击。</p>
<br>
<button class="btn btn-warning">发送紧急求救信号</button>
</section>
</main>

<!— 页脚 —>
<footer class="footer">
<p class="footer-text">© 2025 MM层群民间分站 · 认知与情绪战场</p>
<p class="footer-text">最后更新：2025年11月25日 · 信息由层群战略指挥部提供</p>
<p class="footer-text">警告：此站点信息具有时效性，探索前务必确认最新情报</p>
<p class="footer-text" style="margin-top: 20px; font-size: 0.8em; color: #666699;">
记住：生存依赖于信息、智慧与坚韧的意志
</p>
</footer>

// 表单提交处理
const reportForm = document.getElementById('reportForm');
if (reportForm) {
reportForm.addEventListener('submit', function(e) {
e.preventDefault();
alert('情报已提交至mmNet网络。请保持信道畅通等待确认回复。注意安全！');
reportForm.reset();
});
}

// 紧急求救按钮
const emergencyBtn = document.querySelector('.btn-warning');
if (emergencyBtn && emergencyBtn.textContent.includes('求救信号')) {
emergencyBtn.addEventListener('click', function() {
if (confirm('⚠️ 确认发送紧急求救信号？\n\n这将广播您的位置至所有友好势力信道。\n仅在生命危险时使用！')) {
alert('紧急求救信号已发送！保持隐蔽，救援队将在可能的情况下前往。');
// 这里可以添加实际的求救逻辑
}
});
}

// 平滑滚动到锚点
navLinks.forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetSection = document.querySelector(targetId);

if (targetSection) {
window.scrollTo({
top: targetSection.offsetTop - 80,
behavior: 'smooth'
});

// 更新活动状态
navLinks.forEach(l => l.classList.remove('active'));
this.classList.add('active');
}
});
});

// 滚动时更新导航栏状态
window.addEventListener('scroll', function() {
let current = '';
sections.forEach(section => {
const sectionTop = section.offsetTop;
const sectionHeight = section.clientHeight;
if (scrollY >= (sectionTop - 100)) {
current = section.getAttribute('id');
}
});

navLinks.forEach(link => {
link.classList.remove('active');
if (link.getAttribute('href') === ‘#${current}`) {
link.classList.add(’active');
}
});
});

// 添加一些动态效果到实体标签
const entityTags = document.querySelectorAll('.entity-tag');
entityTags.forEach(tag => {
tag.addEventListener('mouseenter', function() {
this.style.transform = 'scale(1.1)';
this.style.transition = 'transform 0.2s ease';
});

tag.addEventListener('mouseleave', function() {
this.style.transform = 'scale(1)';
});
});

// 控制台欢迎信息（后室风格）
console.log('%c🚪 欢迎来到MM层群民间分站', 'color: #667eea; font-size: 16px; font-weight: bold;');
console.log('%c⚠️ 当前威胁等级: HIGH', 'color: #ff4444; font-weight: bold;');
console.log('%c📡 mmNet连接状态: 稳定', 'color: #44ff44;');
console.log('%c保持警惕，生存第一。', 'color: #8888cc;');
});

// 添加一些随机警告效果（模拟后室不稳定性）
function showRandomWarning() {
const warnings = [
"检测到层级规则扰动…",
"Rede级实体活动报告…",
"mmNet信号波动…",
"认知污染指数上升…",
"检测到异常实体迁徙…"
];

const randomWarning = warnings[Math.floor(Math.random() * warnings.length)];
const warningElement = document.createElement('div');
warningElement.style.cssText = `
position: fixed;
bottom: 20px;
right: 20px;
background: rgba(139, 0, 0, 0.9);
color: white;
padding: 10px 15px;
border-radius: 4px;
border-left: 4px solid #ff4444;
z-index: 10000;
font-size: 0.9em;
animation: fadeInOut 3s ease forwards;
max-width: 300px;
`;

warningElement.textContent = `⚠️ ${randomWarning}`;
document.body.appendChild(warningElement);

setTimeout(() => {
if (warningElement.parentNode) {
warningElement.parentNode.removeChild(warningElement);
}
}, 3000);
}

// 每30-60秒随机显示一次警告
setInterval(showRandomWarning, 30000 + Math.random() * 30000);

// 页面加载后显示一次警告
setTimeout(showRandomWarning, 5000);
</script>
</body>
</html>

页面版本: 0, 最后编辑于: 07 Dec 2025 06:09

编辑标签讨论历史记录附件打印网站工具 + 选项

后室民间分站沙盒

千里之行，始于足下。

👀

👀