💬 开场白
“`html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>深境C网 – 联动系统</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}body {
color: #e0e0ff;
min-height: 100vh;
padding: 20px;
overflow: hidden;}
.cyber-container {
max-width: none;
width: 100%;
margin: 0;
padding: 0; /* 移除内边距 */
}
/* 弹窗样式 */
.cyber-modal {
background: rgba(20, 10, 25, 0.9);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 105, 180, 0.3);
border-radius: 12px;
box-shadow:
0 0 30px rgba(255, 105, 180, 0.2),
inset 0 0 20px rgba(255, 105, 180, 0.1);
padding: 30px;
max-width: none; /* 移除最大宽度 */
width: 100vw; /* 使用视口宽度 */
margin-left: -20px; /* 抵消body的padding */
margin-right: -20px;
border-radius: 0; /* 移除圆角 */
border-left: none; /* 移除左右边框 */
border-right: none;
margin-bottom: 40px;
position: relative;
overflow: hidden;
animation: modalAppear 0.8s ease-out;
}.cyber-modal::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #ff69b4, transparent);
animation: scanline 3s linear infinite;
}.cyber-title {
font-size: 28px;
font-weight: 700;
background: linear-gradient(90deg, #ff69b4, #ff1493);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-align: left;
margin-bottom: 10px;
text-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
padding-bottom: 8px;
border-bottom: 3px solid rgba(255, 105, 180, 0.5);
display: inline-block;
width: 100%;
}.cyber-subtitle {
font-size: 16px;
text-align: center;
color: #ff91c1;
margin-bottom: 20px;
}.cyber-income {
background: rgba(255, 105, 180, 0.1);
border: 1px solid rgba(255, 105, 180, 0.3);
border-radius: 8px;
padding: 12px 20px;
text-align: center;
margin: 20px 0;
font-size: 18px;
font-weight: 600;
color: #ff69b4;
box-shadow: 0 0 15px rgba(255, 105, 180, 0.2);
}.cyber-btn {
background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
color: white;
border: none;
padding: 12px 30px;
border-radius: 30px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
display: block;
margin: 0 auto;
position: relative;
overflow: hidden;
}.cyber-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(255, 105, 180, 0.6);
}.cyber-btn:active {
transform: translateY(1px);
}.cyber-btn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: 0.5s;
}.cyber-btn:hover::after {
left: 100%;
}/* 进度条样式 */
#progressContainer {
display: none;
}.progress-bar {
height: 8px;
background: rgba(255, 105, 180, 0.2);
border-radius: 4px;
margin: 20px 0;
overflow: hidden;
position: relative;
}
.progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #ff69b4, #ff1493);
border-radius: 4px;
transition: width 1.5s ease;
position: relative;
}.progress-fill::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
animation: shimmer 2s infinite;
}/* 选项卡样式 */
.tab-container {
display: flex;
margin-bottom: 20px;
border-bottom: 1px solid rgba(255, 105, 180, 0.3);
}.tab-button {
background: transparent;
border: none;
color: #ff91c1;
padding: 12px 12px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}.tab-button.active {
color: #ff69b4;
}.tab-button.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, #ff69b4, #ff1493);
border-radius: 3px 3px 0 0;
}.tab-button:hover {
color: #ff69b4;
}.tab-content {
display: none;
}.tab-content.active {
display: block;
}/* 角色卡片样式 */
.character-scroll-container {
overflow-x: auto;
margin: 0 -20px; /* 负边距扩展到边缘 */
padding: 20px;
scrollbar-width: thin;
scrollbar-color: #ff69b4 #0c0c1d;
}.character-scroll-container::-webkit-scrollbar {
height: 8px;
}.character-scroll-container::-webkit-scrollbar-track {
background: #0c0c1d;
border-radius: 4px;
}.character-scroll-container::-webkit-scrollbar-thumb {
background: linear-gradient(90deg, #ff69b4, #ff1493);
border-radius: 4px;
}.character-scroll {
display: flex;
gap: 25px;
padding: 0 15px;
min-width: max-content;
}.character-card {
width: 160px;
flex-shrink: 0;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
}.character-card:hover {
transform: translateY(-5px);
}.card-container {
background: rgba(30, 15, 35, 0.7);
border: 1px solid rgba(255, 105, 180, 0.3);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
transition: all 0.3s ease;
height: 360px;
position: relative;
}
.character-card:hover .card-container {
box-shadow: 0 8px 25px rgba(255, 105, 180, 0.4);
border-color: rgba(255, 105, 180, 0.6);
}.card-content {
height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
}.character-specialty {
font-size: 14px;
font-weight: 600;
color: #ff69b4;
text-align: center;
padding: 8px 5px;
background: rgba(255, 105, 180, 0.1);
text-shadow: 0 0 5px rgba(255, 105, 180, 0.5);
flex-shrink: 0;
z-index: 2;
position: relative;
}.character-img {
width: 100%;
height: 100%;
flex-grow: 1;
background-size: cover;
background-position: center;
border: none;
box-shadow: none;
transition: all 0.3s ease;
}.character-card:hover .character-img {
box-shadow: 0 4px 15px rgba(255, 105, 180, 0.3);
}/* 关于网站内容样式 – 可折叠 */
.about-content {
padding: 20px 0;
}.worldview-section {
margin-bottom: 15px;
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(255, 105, 180, 0.2);
transition: all 0.3s ease;
}.worldview-section.active {
border-color: rgba(255, 105, 180, 0.5);
box-shadow: 0 0 15px rgba(255, 105, 180, 0.2);
}.section-header {
background: rgba(255, 105, 180, 0.1);
padding: 15px 20px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}.section-header:hover {
background: rgba(255, 105, 180, 0.15);
}.section-title {
font-size: 18px;
color: #ff69b4;
font-weight: 600;
text-shadow: 0 0 5px rgba(255, 105, 180, 0.5);
}.section-toggle {
color: #ff69b4;
font-size: 18px;
transition: transform 0.3s ease;
}.worldview-section.active .section-toggle {
transform: rotate(180deg);
}.section-content {
color: #e0e0ff;
line-height: 1.6;
font-size: 15px;
padding: 0 20px;
max-height: 0;
overflow: hidden;
transition: all 0.4s ease;
}.worldview-section.active .section-content {
padding: 20px;
max-height: 500px;
}.highlight {
color: #ff91c1;
font-weight: 600;
}/* 主播权限内容样式 – 紧凑版本 */
.permissions-content {
padding: 5px 0;
}.permission-section {
margin-bottom: 8px;
border-radius: 8px;
overflow: hidden;
border: 1px solid rgba(255, 105, 180, 0.2);
}.permission-header {
background: rgba(255, 105, 180, 0.08);
padding: 8px 12px;
}.permission-title {
font-size: 14px;
color: #ff69b4;
font-weight: 600;
text-shadow: 0 0 5px rgba(255, 105, 180, 0.5);
}.permission-desc {
color: #e0e0ff;
line-height: 1.4;
font-size: 14px;
padding: 10px 15px;
background: rgba(30, 15, 35, 0.4);
}/* 详情面板样式 – 修复阴影问题 */
.detail-panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.8);
width: 320px;
max-height: 80vh;
background: rgba(20, 10, 25, 0.95);
border: 1px solid rgba(255, 105, 180, 0.3);
border-radius: 12px;
transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
z-index: 1000;
overflow-y: auto;
padding: 20px;
opacity: 0;
pointer-events: none;
/* 移除原来的box-shadow */
}.detail-panel::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 12px;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
z-index: -1;
pointer-events: none;
}.detail-panel.active {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
pointer-events: all;
}/* 响应式设计 – 针对小屏幕优化 */
@media (max-width: 768px) {
.detail-panel {
width: 90%; /* 在小屏幕上使用百分比宽度 */
max-width: 320px; /* 但不超过原宽度 */
padding: 15px; /* 减少内边距 */
}
}@media (max-width: 480px) {
.detail-panel {
width: 95%; /* 在更小的屏幕上使用更大的百分比 */
max-width: 300px; /* 稍微减小最大宽度 */
padding: 12px; /* 进一步减少内边距 */
}
}.detail-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); /* 减小透明度，从0.7改为0.5 */
z-index: 999;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.detail-overlay.active {
opacity: 1;
pointer-events: all;
}.detail-close {
position: absolute;
top: 15px;
right: 15px;
width: 28px;
height: 28px;
background: rgba(255, 105, 180, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 16px;
color: #ff69b4;
transition: all 0.3s ease;
z-index: 10;
}.detail-close:hover {
background: rgba(255, 105, 180, 0.4);
transform: rotate(90deg);
}.character-info {
margin-top: 10px;
}.character-nickname {
font-size: 22px;
color: #ff69b4;
font-weight: 700;
margin-bottom: 5px;
text-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
text-align: center;
}.character-specialty-detail {
font-size: 14px;
color: #ff91c1;
margin-bottom: 15px;
text-align: center;
background: rgba(255, 105, 180, 0.05);
padding: 5px;
border-radius: 4px;
}.stats-container {
background: rgba(255, 105, 180, 0.1);
border: 1px solid rgba(255, 105, 180, 0.3);
border-radius: 8px;
padding: 15px;
margin-top: 15px;
}.stat-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 12px;
}.stat-row:last-child {
margin-bottom: 0;
}.stat-label {
font-size: 14px;
color: #ff91c1;
font-weight: 600;
}.stars {
display: flex;
gap: 3px;
}.star {
color: #ff69b4;
font-size: 16px;
text-shadow: 0 0 5px rgba(255, 105, 180, 0.7);
}.star.empty {
color: rgba(255, 105, 180, 0.3);
}.character-title {
font-size: 16px;
color: #ff1493;
font-style: italic;
text-align: center;
margin-top: 15px;
text-shadow: 0 0 5px rgba(255, 20, 147, 0.5);
}/* 动画效果 */
@keyframes modalAppear {
0% {
opacity: 0;
transform: translateY(-20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}@keyframes scanline {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}@keyframes shimmer {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(100%);
}
}/* 响应式设计 */
@media (max-width: 768px) {
.character-card {
width: 140px;
}.card-container {
height: 320px;
}.detail-panel {
width: 90%;
}
}@media (max-width: 480px) {
.character-card {
width: 120px;
}.card-container {
height: 280px;
}.cyber-modal {
padding: 20px;
}
}
/* 加载动画样式 */
#loadingScreen {
position: relative;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
cursor: pointer;
}#loadingScreen .loader {
position: relative;
width: 250px;
height: 250px;
display: flex;
justify-content: center;
align-items: center;
filter: drop-shadow(0 0 20px rgba(255, 105, 180, 0.6));
}#loadingScreen .loader span {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 2px solid #ff69b4;
pointer-events: none;
animation: rotateAnimation 5s linear infinite;
/* 柔光效果 */
filter: blur(0.5px);
box-shadow:
0 0 15px rgba(255, 105, 180, 0.8),
inset 0 0 15px rgba(255, 105, 180, 0.4);
/* 确保边框圆角不被覆盖 */
border-radius: 50% !important;
}#loadingScreen .loader span:nth-child(1) {
border-radius: 38% 62% 64% 36% / 43% 35% 65% 57% !important;
border-color: #ff69b4;
animation: rotateAnimation 5s linear infinite;
box-shadow:
0 0 20px rgba(255, 105, 180, 1),
inset 0 0 20px rgba(255, 105, 180, 0.5);
}#loadingScreen .loader span:nth-child(2) {
border-radius: 41% 59% 40% 60% / 65% 66% 34% 35% !important;
animation: rotateAnimationReverse 5s linear infinite;
border-color: #ff1493;
box-shadow:
0 0 18px rgba(255, 20, 147, 0.9),
inset 0 0 18px rgba(255, 20, 147, 0.4);
}#loadingScreen .loader span:nth-child(3) {
border-radius: 73% 27% 56% 44% / 57% 74% 26% 43% !important;
animation: rotateAnimationFast 3s linear infinite;
border-color: #ff91c1;
box-shadow:
0 0 12px rgba(255, 145, 193, 0.8),
inset 0 0 12px rgba(255, 145, 193, 0.4);
}/* 其他加载动画相关的样式也要加上#loadingScreen */
#loadingScreen .particles-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}#loadingScreen .particle {
position: absolute;
width: 3px;
height: 3px;
background: #ff69b4;
border-radius: 50%;
pointer-events: none;
animation: floatParticle 3s ease-in-out infinite;
box-shadow: 0 0 8px #ff69b4;
}#loadingScreen .loader h2 {
color: #ff69b4;
font-family: Arial, sans-serif;
font-weight: 700;
text-align: center;
font-size: 18px;
line-height: 1.4;
text-shadow:
0 0 10px rgba(255, 105, 180, 0.3),
0 0 20px rgba(255, 105, 180, 0.1);
filter: drop-shadow(0 0 15px rgba(255, 105, 180, 0.7));
position: relative;
z-index: 10;
}#loadingScreen .pulse-glow {
position: absolute;
width: 250px;
height: 250px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255,105,180,0.3) 0%, transparent 70%);
animation: pulse 4s ease-in-out infinite;
pointer-events: none;
}
#loadingScreen .loader h2 {
color: #ff69b4;
font-family: Arial, sans-serif;
font-weight: 700;
text-align: center;
font-size: 18px;
line-height: 1.4;
text-shadow:
0 0 10px rgba(255, 105, 180, 0.3),
0 0 20px rgba(255, 105, 180, 0.1);
filter: drop-shadow(0 0 15px rgba(255, 105, 180, 0.7));
position: relative;
z-index: 10;
}/* 动画关键帧 */
@keyframes rotateAnimation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}@keyframes rotateAnimationReverse {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}@keyframes rotateAnimationFast {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}@keyframes floatParticle {
0% {
transform: translate(0, 0) scale(0);
opacity: 0;
}
20% {
opacity: 1;
transform: translate(var(–tx1), var(–ty1)) scale(1);
}
80% {
opacity: 0.5;
transform: translate(var(–tx2), var(–ty2)) scale(0.8);
}
100% {
transform: translate(var(–tx3), var(–ty3)) scale(0);
opacity: 0;
}
}@keyframes pulse {
0%, 100% {
transform: scale(0.8);
opacity: 0.3;
}
50% {
transform: scale(1.2);
opacity: 0.6;
}
}/* 箭头容器 */
.arrow-indicator {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
cursor: pointer;
}/* 箭头样式 */
.arrow {
font-size: 24px;
color: rgba(255, 105, 180, 0.8);
text-shadow: 0 0 10px rgba(255, 105, 180, 0.5);
animation: floatArrow 2s ease-in-out infinite;
display: block;
text-align: center;
transition: all 0.3s ease;
}/* 添加光晕效果 */
.arrow::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 105, 180, 0.3) 0%, transparent 70%);
z-index: -1;
opacity: 0.7;
}/* 悬停效果 */
.arrow:hover {
color: rgba(255, 105, 180, 1);
text-shadow: 0 0 15px rgba(255, 105, 180, 0.8);
transform: scale(1.2);
}
.cyber-btn {
background: linear-gradient(135deg, #ff69b4 0%, #ff1493 100%);
color: white;
border: none;
padding: 12px 30px;
border-radius: 30px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
display: block;
margin: 0 auto;
position: relative;
overflow: hidden;
/* 快速连续心跳动画 */
animation: fastHeartbeat 1.2s ease-in-out infinite;
}
/* 快速连续心跳动画关键帧 */
@keyframes fastHeartbeat {
0% {
transform: scale(1);
box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
}
15% {
transform: scale(1.08);
box-shadow: 0 8px 25px rgba(255, 105, 180, 0.7);
}
30% {
transform: scale(1);
box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
}
45% {
transform: scale(1.06);
box-shadow: 0 7px 22px rgba(255, 105, 180, 0.6);
}
60% {
transform: scale(1);
box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
}
100% {
transform: scale(1);
box-shadow: 0 5px 15px rgba(255, 105, 180, 0.4);
}
}/* 悬停时暂停心跳动画，使用悬停效果 */
.cyber-btn:hover {
animation-play-state: paused;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 10px 30px rgba(255, 105, 180, 0.8);
}.cyber-btn:active {
transform: translateY(1px) scale(0.98);
}.cyber-btn::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: 0.5s;
}
.cyber-btn:hover::after {
left: 100%;
}
/* 上下浮动动画 */
@keyframes floatArrow {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}/* 脉冲效果 */
@keyframes pulseArrow {
0%, 100% {
opacity: 0.7;
}
50% {
opacity: 1;
}
}
</style>
</head>
<body>
<div id="loadingScreen">
<div class="loader">
<!– 脉冲背景光效 –>
<div class="pulse-glow"></div><!– 旋转边框 –>
<span></span>
<span></span>
<span></span><!– 粒子容器 –>
<div class="particles-container" id="particlesContainer"></div><!– 文字 –>
<h2>欢迎来到<br>深境C网<br>(点击)</h2>
<div class="arrow-indicator" onclick="handleArrowClick()">
<div class="arrow pulse">▼</div>
</div>
</div>
</div>
<div class="cyber-container"><!– 弹窗部分 –>
<div class="cyber-modal">
<div class="cyber-title">深境C网AI审核</div>
<div class="cyber-subtitle">亲爱的主播，恭喜您的联动申请通过了</div>
<div class="cyber-income">请查看联动主播信息</div><div style="text-align:center; margin:20px 0;">
<button class="cyber-btn" onclick="showProgress()">查看联动主播</button>
</div>
</div><!– 进度条部分 –>
<div id="progressContainer" class="cyber-modal">
<div class="cyber-subtitle">正在加载主播信息…</div>
<div class="progress-bar">
<div id="progressBar" class="progress-fill"></div>
</div>
</div><!– 角色卡片部分 –>
<div id="characterCards" class="cyber-modal" style="display:none;">
<div class="cyber-title">深境C网联动系统</div><div class="tab-container">
<button class="tab-button active" onclick="switchTab('characters')">联动主播</button>
<button class="tab-button" onclick="switchTab('about')">关于网站</button>
<button class="tab-button" onclick="switchTab('permissions')">主播权限</button>
</div><div id="characters-tab" class="tab-content active">
<div class="character-scroll-container">
<div class="character-scroll">
<!– 鹿言 –>
<div class="character-card" onclick="showDetails(0)">
<div class="card-container">
<div class="card-content">
<div class="character-specialty">绳艺</div>
<div class="character-img" style="background-image:url('https://origin.picgo.net/2025/10/13/b25b19ef16d50804e1a2cb77804a4a0027c3053f49b3b631.png')"></div>
</div>
</div>
</div><!– 影S –>
<div class="character-card" onclick="showDetails(1)">
<div class="card-container">
<div class="card-content">
<div class="character-specialty">机械</div>
<div class="character-img" style="background-image:url('https://origin.picgo.net/2025/10/13/Sbc89c8b2f516fbf1.png')"></div>
</div>
</div>
</div><!– 夜火 –>
<div class="character-card" onclick="showDetails(2)">
<div class="card-container">
<div class="card-content">
<div class="character-specialty">露出</div>
<div class="character-img" style="background-image:url('https://origin.picgo.net/2025/10/13/24b174f044310db6f2bb0feb1bb93dfe03993a29fdbe42f9.png')"></div>
</div>
</div>
</div><!– 戒律 –>
<div class="character-card" onclick="showDetails(3)">
<div class="card-container">
<div class="card-content">
<div class="character-specialty">sp</div>
<div class="character-img" style="background-image:url('https://origin.picgo.net/2025/10/13/1c1c557e20dbc0d8dc8287f9b14c6b481411bac06bba1ef7.png')"></div>
</div>
</div>
</div><!– 驯光师 –>
<div class="character-card" onclick="showDetails(4)">
<div class="card-container">
<div class="card-content">
<div class="character-specialty">训犬</div>
<div class="character-img" style="background-image:url('https://origin.picgo.net/2025/10/13/2b7f2b8bdd9cd0e1c89fbb93c341fac16a74f79ad98eb5f4.png')"></div>
</div>
</div>
</div><!– 斩刃 –>
<div class="character-card" onclick="showDetails(5)">
<div class="card-container">
<div class="card-content">
<div class="character-specialty">粗暴</div>
<div class="character-img" style="background-image:url('https://origin.picgo.net/2025/10/13/54f1890b1be14a0a1fda07d6cd69b7368e3e0ffe576531eb.png')"></div>
</div>
</div>
</div><!– 眠音 –>
<div class="character-card" onclick="showDetails(6)">
<div class="card-container">
<div class="card-content">
<div class="character-specialty">ASMR</div>
<div class="character-img" style="background-image:url('https://origin.picgo.net/2025/10/13/a36ce71aae48c9b1ac36acd851ae6f01a1a3174f91181ace.png')"></div>
</div>
</div>
</div><!– 戏谑 –>
<div class="character-card" onclick="showDetails(7)">
<div class="card-container">
<div class="card-content">
<div class="character-specialty">角色扮演</div>
<div class="character-img" style="background-image:url('https://origin.picgo.net/2025/10/13/343afb31b7704a89442db1e2f8d72234f9debc11c86f62c6.png')"></div>
</div>
</div>
</div><!– 惑医 –>
<div class="character-card" onclick="showDetails(8)">
<div class="card-container">
<div class="card-content">
<div class="character-specialty">药师</div>
<div class="character-img" style="background-image:url('https://origin.picgo.net/2025/10/13/85251760216d7904451e11d744299c9c7ab3ba8a27bda51d.png')"></div>
</div>
</div>
</div><!– 赫弥亚 –>
<div class="character-card" onclick="showDetails(9)">
<div class="card-container">
<div class="card-content">
<div class="character-specialty">异形</div>
<div class="character-img" style="background-image:url('https://origin.picgo.net/2025/10/13/b9db908dc9cda7ab544fbbfa7f83b6f526098361adfc43a1.png')"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="about-tab" class="tab-content">
<div class="about-content">
<!– 关于深境C网 –>
<div class="worldview-section" id="section-about">
<div class="section-header" onclick="toggleSection('about')">
<div class="section-title">关于深境C网</div>
<div class="section-toggle">▼</div>
</div>
<div class="section-content">
<p><span class="highlight">深境C网</span>，简称C网，是一个新兴的直播平台，提供各种种类的直播。平台竞争激烈，观看人数一再超过上限。头部主播收入不菲，但同时垄断流量，导致底层主播的流量和收入非常少。</p>
<p>最近推出的<span class="highlight">联动功能</span>，允许主播之间申请联动，平台审核后帮助流量共享。然而，顶级主播要求极高，很少与人联动。</p>
</div>
</div><!– 感官经济 –>
<div class="worldview-section" id="section-economy">
<div class="section-header" onclick="toggleSection('economy')">
<div class="section-title">感官经济</div>
<div class="section-toggle">▼</div>
</div>
<div class="section-content">
<p>在技术浪潮推动下，基于VR、生物反馈与神经科学的<span class="highlight">体验经济</span>已成为核心增长引擎。深境C网是其中的支配性平台，掌控着感官内容分发与用户数据的庞大帝国。在这里，流量即权力。</p>
</div>
</div><!– 政治与监管 –>
<div class="worldview-section" id="section-regulation">
<div class="section-header" onclick="toggleSection('regulation')">
<div class="section-title">政治与监管</div>
<div class="section-toggle">▼</div>
</div>
<div class="section-content">
<p>社会对直播内容态度开放，但<span class="highlight">《直播内容创作与传播责任法案》</span>划出了不可逾越的红线：</p>
<p>严禁任何违反法律法规和公序良俗的内容。所有内容必须通过AI与人工的双重审核，确保是主播基于共识的演出。</p>
</div>
</div><!– 粉丝经济与社区文化 –>
<div class="worldview-section" id="section-fans">
<div class="section-header" onclick="toggleSection('fans')">
<div class="section-title">粉丝经济与社区文化</div>
<div class="section-toggle">▼</div>
</div>
<div class="section-content">
<p>C网催生了极度狂热的粉丝文化。头部主播的粉丝团组织严密，消费力惊人，但也充满攻击性。</p>
</div>
</div>
</div>
</div><div id="permissions-tab" class="tab-content">
<div class="permissions-content">
<!– 联动权限 –>
<div class="permission-section">
<div class="permission-header">
<div class="permission-title">联动</div>
</div>
<div class="permission-desc">
10位主播都可以进行联动，联动后关系升级：陌生-初识-熟悉-？
</div>
</div><!– 邀约权限 –>
<div class="permission-section">
<div class="permission-header">
<div class="permission-title">邀约</div>
</div>
<div class="permission-desc">
关系为非陌生的主播可以在非直播状态进行约会，约会后关系升级
</div>
</div><!– 多人联动权限 –>
<div class="permission-section">
<div class="permission-header">
<div class="permission-title">多人联动</div>
</div>
<div class="permission-desc">
当关系为非陌生的主播有两位及以上时，可以进行多人联动（仅限两人）
</div>
</div>
</div>
</div>
</div>
</div><!– 详情面板 –>
<div class="detail-overlay" id="detailOverlay" onclick="hideDetails()"></div>
<div class="detail-panel" id="detailPanel">
<div class="detail-content">
<div class="detail-close" onclick="hideDetails()">×</div>
<div id="detailInfo"></div>
</div>
</div>
<script>
// 角色数据
const characterData = [
{
nickname: "主播 – 鹿言",
specialty: "温柔言语与绳缚美学结合，精通各类绳索材质与技法，通过绳索、道具与全程沟通，在疼痛与快乐中掌控节奏",
title: "阳光下的掌控者",
stats: {
pain: 4,
sox: 3.5,
shame: 3
}
},
{
nickname: "主播 – 影S",
specialty: "用机械掌控感官，追求绝对理性的掌控与束缚，用冰冷的机械剥夺全部反抗直至臣服",
title: "绝对理性的审美家",
stats: {
pain: 4,
sox: 4,
shame: 3.5
}
},
{
nickname: "主播 – 夜火",
specialty: "引导半公开空间暴露，利用环境与远程操控，在危险边缘挑战心理防线",
title: "刺激的共谋 ",
stats: {
pain: 1,
sox: 3,
shame: 5
}
},
{
nickname: "主播 – 戒律",
specialty: "以疼痛塑造秩序，擅长工具惩戒，在挑战极限中留下深刻记忆",
title: "秩序的铸造者",
stats: {
pain: 5,
sox: 3,
shame: 4
}
},
{
nickname: "主播 – 驯光师",
specialty: "犬化训练，通过指令与姿势训练，将羞耻感转化为条件反射的服从",
title: "微笑的驯兽师",
stats: {
pain: 3,
sox: 3,
shame: 5
}
},
{
nickname: "主播 – 斩刃",
specialty: "追求纯粹力量征服，用强大贯穿体验，用污言与力量突破心理防线",
title: "本能的野兽 ",
stats: {
pain: 3,
sox: 5,
shame: 3
}
},
{
nickname: "主播 – 眠音",
specialty: "操控听觉感官，通过静默规则与声音刺激结合，用技术制造感官牢笼",
title: "静默的暴政",
stats: {
pain: 1,
sox: 4,
shame: 4
}
},
{
nickname: "主播 – 戏谑",
specialty: "沉浸式剧情体验，构建权力不对等场景，以规则惩罚戏弄人格，玩弄心理于股掌",
title: "剧场的上帝",
stats: {
pain: 1,
sox: 4,
shame: 4
}
},
{
nickname: "主播 – 惑医",
specialty: "通过定制香氛，利用化学与物理手段放大感官，在迷离中探索感知边界",
title: "优雅的感官巫师",
stats: {
pain: 2,
sox: 5,
shame: 3
}
},
{
nickname: "主播 – 赫弥亚",
specialty: "异形道具美学创造者，以触手等异形突破认知边界，在诡异美感中重塑感官",
title: "深渊的造物主",
stats: {
pain: 3,
sox: 4,
shame: 4
}
}
];
// 显示进度条
function showProgress() {
document.querySelector('.cyber-modal').style.display = 'none';
document.getElementById('progressContainer').style.display = 'block';setTimeout(() => {
document.getElementById('progressBar').style.width = '100%';
}, 100);setTimeout(() => {
document.getElementById('progressContainer').style.display = 'none';
document.getElementById('characterCards').style.display = 'block';
}, 1600);
}// 切换选项卡
function switchTab(tabName) {
// 隐藏所有选项卡内容
document.querySelectorAll('.tab-content').forEach(tab => {
tab.classList.remove('active');
});// 移除所有选项卡按钮的激活状态
document.querySelectorAll('.tab-button').forEach(button => {
button.classList.remove('active');
});// 显示选中的选项卡内容
document.getElementById(`${tabName}-tab`).classList.add('active');// 激活选中的选项卡按钮
event.target.classList.add('active');
}// 切换章节展开/折叠
function toggleSection(sectionId) {
const section = document.getElementById(`section-${sectionId}`);
section.classList.toggle('active');
}// 显示角色详情
function showDetails(index) {
const data = characterData[index];// 创建星星HTML
function createStars(count) {
let starsHTML = '';
for (let i = 1; i <= 5; i++) {
if (i <= count) {
starsHTML += '<span class="star">★</span>';
} else {
starsHTML += '<span class="star empty">★</span>';
}
}
return starsHTML;
}document.getElementById('detailInfo').innerHTML = `
<div class="character-info">
<div class="character-nickname">${data.nickname}</div>
<div class="character-specialty-detail">${data.specialty}</div><div class="stats-container">
<div class="stat-row">
<div class="stat-label">疼痛</div>
<div class="stars">${createStars(data.stats.pain)}</div>
</div>
<div class="stat-row">
<div class="stat-label">♥</div>
<div class="stars">${createStars(data.stats.sox)}</div>
</div>
<div class="stat-row">
<div class="stat-label">羞耻</div>
<div class="stars">${createStars(data.stats.shame)}</div>
</div>
</div><div class="character-title">${data.title}</div>
</div>
`;// 显示详情面板
document.getElementById('detailPanel').classList.add('active');
document.getElementById('detailOverlay').classList.add('active');
}// 隐藏详情面板
function hideDetails() {
document.getElementById('detailPanel').classList.remove('active');
document.getElementById('detailOverlay').classList.remove('active');
}// 页面加载完成后显示加载动画
document.addEventListener('DOMContentLoaded', function() {
// 点击加载动画后显示主体内容
document.getElementById('loadingScreen').addEventListener('click', function() {
this.style.display = 'none';
document.querySelector('.cyber-container').style.display = 'block';
});// 初始隐藏主体内容
document.querySelector('.cyber-container').style.display = 'none';
});
// 创建粒子
function createParticles() {
const container = document.getElementById('particlesContainer');
const particleCount = 30; // 粒子数量for (let i = 0; i < particleCount; i++) {
setTimeout(() => {
const particle = document.createElement('div');
particle.className = 'particle';// 随机起始位置在边框附近
const angle = Math.random() * Math.PI * 2;
const radius = 90 + Math.random() * 20; // 边框附近
const startX = 100 + Math.cos(angle) * radius;
const startY = 100 + Math.sin(angle) * radius;// 随机飘散方向
const driftAngle = angle + (Math.random() – 0.5) * Math.PI;
const driftDistance = 50 + Math.random() * 100;particle.style.left = startX + 'px';
particle.style.top = startY + 'px';// 随机颜色
const colors = ['#ff69b4', '#ff1493', '#ff91c1', '#ffb6c1'];
const color = colors[Math.floor(Math.random() * colors.length)];
particle.style.background = color;
particle.style.boxShadow = `0 0 8px ${color}`;// 随机动画参数
const tx1 = Math.cos(driftAngle) * driftDistance * 0.3;
const ty1 = Math.sin(driftAngle) * driftDistance * 0.3;
const tx2 = Math.cos(driftAngle) * driftDistance * 0.7;
const ty2 = Math.sin(driftAngle) * driftDistance * 0.7;
const tx3 = Math.cos(driftAngle) * driftDistance;
const ty3 = Math.sin(driftAngle) * driftDistance;particle.style.setProperty('–tx1', tx1 + 'px');
particle.style.setProperty('–ty1', ty1 + 'px');
particle.style.setProperty('–tx2', tx2 + 'px');
particle.style.setProperty('–ty2', ty2 + 'px');
particle.style.setProperty('–tx3', tx3 + 'px');
particle.style.setProperty('–ty3', ty3 + 'px');// 随机动画延迟和持续时间
const delay = Math.random() * 2;
const duration = 2 + Math.random() * 2;
particle.style.animationDelay = delay + 's';
particle.style.animationDuration = duration + 's';container.appendChild(particle);
// 粒子动画结束后移除
setTimeout(() => {
if (particle.parentNode) {
particle.parentNode.removeChild(particle);
}
}, (delay + duration) * 1000);}, i * 100); // 错开创建时间
}
}// 持续创建粒子
function startParticleSystem() {
createParticles();
setInterval(createParticles, 2000); // 每2秒创建一批新粒子
}
// 页面加载后启动粒子系统
document.addEventListener('DOMContentLoaded', function() {
startParticleSystem();// 点击加载动画后隐藏（保持你原有的功能）
document.getElementById('loadingScreen').addEventListener('click', function() {
this.style.display = 'none';
// 这里可以添加显示主体内容的代码
});
});
</script>
</body>
</html>
“`
