Scribd
Upload
16 views12 pages

!doctype HTML

The document is an HTML template for a dating simulation game titled '网恋模拟器：0 到 1 的攻略战'. It features a character panel, chat area, and control panel, allowing players to interact with various characters and manage their relationships. The design includes responsive elements and a visually appealing layout with a focus on user interaction and game mechanics.

Uploaded by

m15993002279
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
16 views12 pages

!doctype HTML

The document is an HTML template for a dating simulation game titled '网恋模拟器：0 到 1 的攻略战'. It features a character panel, chat area, and control panel, allowing players to interact with various characters and manage their relationships. The design includes responsive elements and a visually appealing layout with a focus on user interaction and game mechanics.

Uploaded by

m15993002279
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网恋模拟器：0 到 1 的攻略战</title>
<style>
*{
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Microsoft YaHei', sans-serif;
}

body {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
color: #e6e6e6;
min-height: 100vh;
padding: 20px;
}

.container {
max-width: 1400px;
margin: 0 auto;
}

.header {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: rgba(0, 0, 0, 0.3);
border-radius: 15px;
border: 1px solid #4cc9f0;
}

.header h1 {
color: #4cc9f0;
margin-bottom: 10px;
text-shadow: 0 0 10px rgba(76, 201, 240, 0.5);
}

.header .subtitle {
color: #f72585;
font-size: 1.2em;
}

.game-area {
display: flex;
gap: 20px;
height: 75vh;
}

/* 角色面板 */
.character-panel {
width: 25%;
background: rgba(30, 30, 46, 0.8);
border-radius: 12px;
padding: 15px;
border: 1px solid #4361ee;
overflow-y: auto;
}

.character-tab {
background: rgba(67, 97, 238, 0.2);
border: 1px solid #4361ee;
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
cursor: pointer;
transition: all 0.3s;
position: relative;
}

.[Link] {
background: rgba(67, 97, 238, 0.4);
border-color: #f72585;
}

.character-tab:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.character-name {
color: #4cc9f0;
font-size: 1.3em;
margin-bottom: 5px;
display: flex;
justify-content: space-between;
align-items: center;
}

.unread-badge {
background: #f72585;
color: white;
border-radius: 50%;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8em;
}

.character-desc {
color: #b8b8d1;
font-size: 0.9em;
margin-bottom: 10px;
}

.status-bar {
height: 6px;
background: rgba(255, 255, 255, 0.1);
border-radius: 3px;
margin: 8px 0;
overflow: hidden;
}

.status-fill {
height: 100%;
border-radius: 3px;
transition: width 0.5s;
}

.goodness { background: #4cc9f0; width: 45%; }


.trust { background: #7209b7; width: 30%; }
.pressure { background: #f72585; width: 60%; }

/* 聊天区域 */
.chat-area {
width: 50%;
background: rgba(20, 20, 35, 0.9);
border-radius: 12px;
display: flex;
flex-direction: column;
border: 1px solid #7209b7;
}

.chat-header {
padding: 15px;
border-bottom: 1px solid #7209b7;
background: rgba(114, 9, 183, 0.2);
border-radius: 12px 12px 0 0;
}

.chat-messages {
flex: 1;
padding: 20px;
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 15px;
}

.message {
max-width: 80%;
padding: 12px 18px;
border-radius: 18px;
line-height: 1.5;
animation: fadeIn 0.3s;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

.message-them {
background: rgba(67, 97, 238, 0.3);
border: 1px solid #4361ee;
align-self: flex-start;
border-bottom-left-radius: 5px;
}

.message-you {
background: rgba(76, 201, 240, 0.2);
border: 1px solid #4cc9f0;
align-self: flex-end;
border-bottom-right-radius: 5px;
}

.message-time {
font-size: 0.8em;
color: #888;
margin-top: 5px;
text-align: right;
}

.input-area {
padding: 15px;
border-top: 1px solid #7209b7;
background: rgba(30, 30, 46, 0.8);
border-radius: 0 0 12px 12px;
}

.input-row {
display: flex;
gap: 10px;
}

#messageInput {
flex: 1;
padding: 12px 15px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid #4cc9f0;
border-radius: 8px;
color: white;
font-size: 1em;
resize: none;
min-height: 60px;
}

#messageInput:focus {
outline: none;
border-color: #f72585;
box-shadow: 0 0 10px rgba(247, 37, 133, 0.3);
}

.send-btn {
background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
color: white;
border: none;
border-radius: 8px;
padding: 0 25px;
font-size: 1.1em;
cursor: pointer;
transition: all 0.3s;
}

.send-btn:hover {
background: linear-gradient(135deg, #f72585 0%, #b5179e 100%);
transform: translateY(-2px);
}

/* 控制面板 */
.control-panel {
width: 25%;
background: rgba(30, 30, 46, 0.8);
border-radius: 12px;
padding: 20px;
border: 1px solid #f72585;
display: flex;
flex-direction: column;
gap: 20px;
}

.panel-section {
background: rgba(0, 0, 0, 0.3);
padding: 15px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.1);
}

.panel-title {
color: #4cc9f0;
margin-bottom: 15px;
font-size: 1.2em;
display: flex;
align-items: center;
gap: 10px;
}

.panel-title i {
color: #f72585;
}

.stats-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}

.stat-item {
background: rgba(255, 255, 255, 0.05);
padding: 10px;
border-radius: 6px;
font-size: 0.9em;
}

.stat-label {
color: #b8b8d1;
margin-bottom: 5px;
}

.stat-value {
color: white;
font-weight: bold;
}

.button-group {
display: flex;
flex-direction: column;
gap: 10px;
}

.ctrl-btn {
padding: 12px;
background: rgba(67, 97, 238, 0.3);
border: 1px solid #4361ee;
color: white;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
text-align: center;
}

.ctrl-btn:hover {
background: rgba(247, 37, 133, 0.3);
border-color: #f72585;
}

.warning-alert {
background: rgba(247, 37, 133, 0.2);
border: 1px solid #f72585;
padding: 12px;
border-radius: 8px;
animation: pulse 2s infinite;
}

@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.time-display {
text-align: center;
font-size: 1.3em;
color: #4cc9f0;
padding: 10px;
background: rgba(0, 0, 0, 0.4);
border-radius: 8px;
border: 1px solid #4cc9f0;
}

@media (max-width: 1200px) {


.game-area {
flex-direction: column;
height: auto;
}
.character-panel, .chat-area, .control-panel {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>💖 网恋模拟器：0 到 1 的攻略战</h1>
<div class="subtitle">修罗场概率 87% • 时间管理难度：★★★★★</div>
</div>

<div class="game-area">
<!-- 左侧角色面板 -->
<div class="character-panel">
<div class="character-tab active" onclick="switchCharacter('白栩')">
<div class="character-name">
白栩（22 岁）
<span class="unread-badge">3</span>
</div>
<div class="character-desc">艺术院校大四 • 病娇绿茶 • 养鱼达人</div>
<div class="status-bar"><div class="status-fill goodness"></div></div>
<div class="status-bar"><div class="status-fill trust"></div></div>
<div class="status-bar"><div class="status-fill pressure"></div></div>
</div>

<div class="character-tab" onclick="switchCharacter('唐玥')">


<div class="character-name">
唐玥（23 岁）
<span class="unread-badge">1</span>
</div>
<div class="character-desc">电竞选手 • 奶狗嘴硬 • 怕孤独</div>
<div class="status-bar"><div class="status-fill goodness" style="width: 30%"></div></div>
<div class="status-bar"><div class="status-fill trust" style="width: 20%"></div></div>
<div class="status-bar"><div class="status-fill pressure" style="width: 40%"></div></div>
</div>

<div class="character-tab" onclick="switchCharacter('顾雪黎')">


<div class="character-name">顾雪黎（26 岁）</div>
<div class="character-desc">心理咨询师 • 温柔洞察 • 测谎大师</div>
<div class="status-bar"><div class="status-fill goodness" style="width: 15%"></div></div>
<div class="status-bar"><div class="status-fill trust" style="width: 10%"></div></div>
<div class="status-bar"><div class="status-fill pressure" style="width: 25%"></div></div>
</div>

<div class="character-tab" onclick="switchCharacter('周澈')">


<div class="character-name">
周澈（29 岁）
<span class="unread-badge">2</span>
</div>
<div class="character-desc">投资人 • 斯文败类 • 养成游戏爱好者</div>
<div class="status-bar"><div class="status-fill goodness" style="width: 25%"></div></div>
<div class="status-bar"><div class="status-fill trust" style="width: 35%"></div></div>
<div class="status-bar"><div class="status-fill pressure" style="width: 20%"></div></div>
</div>
</div>

<!-- 中间聊天区域 -->


<div class="chat-area">
<div class="chat-header">
<h2>💬 与 <span id="currentCharName">白栩</span> 的对话</h2>
<div>状态：<span id="charStatus">在线 • 正在输入中…</span></div>
</div>

<div class="chat-messages" id="chatMessages">


<div class="message message-them">
<div>学长怎么突然加我呀？🐱</div>
<div class="message-time">14:23</div>
</div>

<div class="message message-you">


<div>昨天在画展看到一幅画，突然想到你</div>
<div class="message-time">14:25</div>
</div>

<div class="message message-them">


<div>《》😉</div>
<div class="message-time">14:28</div>
</div>

<div class="message message-them">


<div>不过……学长真的去了吗？怎么没见到你呢</div>
<div class="message-time">14:28</div>
</div>

<div class="message message-you">


<div>其实是在画展官网看到的，但立刻想到你了</div>
<div class="message-time">14:30</div>
</div>

<div class="message message-them">


<div>哼，算你诚实～ 不过官网照片哪有现场好看，下周陪我去看真迹吧？😊</div>
<div class="message-time">14:30</div>
</div>
</div>

<div class="input-area">
<div class="input-row">
<textarea id="messageInput" placeholder="输入消息...（支持多线操作，可@角色名）"
autofocus></textarea>
<button class="send-btn" onclick="sendMessage()">发送</button>
</div>
<div style="margin-top: 10px; font-size: 0.9em; color: #888;">
💡 提示：输入“@唐玥 上分吗？”可同时与多人聊天
</div>
</div>
</div>

<!-- 右侧控制面板 -->


<div class="control-panel">
<div class="time-display">
🕐 游戏时间：第 2 天 14:35
</div>

<div class="panel-section">
<div class="panel-title">📊 当前数值</div>
<div class="stats-grid">
<div class="stat-item">
<div class="stat-label">好感度</div>
<div class="stat-value">45/100</div>
</div>
<div class="stat-item">
<div class="stat-label">信任值</div>
<div class="stat-value">30/100</div>
</div>
<div class="stat-item">
<div class="stat-label">压力值</div>
<div class="stat-value">60/100</div>
</div>
<div class="stat-item">
<div class="stat-label">占有欲</div>
<div class="stat-value">25/100</div>
</div>
<div class="stat-item">
<div class="stat-label">安全感</div>
<div class="stat-value">40/100</div>
</div>
<div class="stat-item">
<div class="stat-label">暧昧值</div>
<div class="stat-value">20/100</div>
</div>
</div>
</div>

<div class="panel-section warning-alert">


<div class="panel-title">⚠️修罗场预警</div>
<div>白栩与唐玥同在本地游戏群，对话矛盾风险：87%</div>
<div style="margin-top: 10px;">⏳ 待处理事件：4 个</div>
</div>

<div class="panel-section">
<div class="panel-title">🎮 游戏控制</div>
<div class="button-group">
<button class="ctrl-btn" onclick="saveGame()">💾 存档</button>
<button class="ctrl-btn" onclick="loadGame()">📂 读档</button>
<button class="ctrl-btn" onclick="multiMode()">🔄 多线操作模式</button>
<button class="ctrl-btn" onclick="checkEvents()">📅 查看日程表</button>
</div>
</div>
</div>
</div>
</div>

<script>
let currentCharacter = '白栩';

function switchCharacter(charName) {
currentCharacter = charName;
[Link]('currentCharName').textContent = charName;

// 更新标签状态
[Link]('.character-tab').forEach(tab => {
[Link]('active');
});
[Link]('active');

// 更新状态显示
const statusMap = {
'白栩': '在线 • 正在输入中…',
'唐玥': '游戏中 • 空闲',
'顾雪黎': '离线 • 2 小时后上线',
'周澈': '会议中 • 勿扰'
};
[Link]('charStatus').textContent = statusMap[charName];

// 清空未读标记
const badge = [Link]('.unread-badge');
if (badge) [Link] = 'none';

// 这里应加载该角色的聊天记录（示例中省略）
}

function sendMessage() {
const input = [Link]('messageInput');
const message = [Link]();

if (!message) return;

const chatMessages = [Link]('chatMessages');


// 添加玩家消息
const messageDiv = [Link]('div');
[Link] = 'message message-you';
[Link] = `
<div>${message}</div>
<div class="message-time">${getCurrentTime()}</div>
`;
[Link](messageDiv);

// 清空输入框
[Link] = '';

// 模拟角色回复（这里应接入 AI 回复系统）
setTimeout(() => {
const reply = generateReply(message);
const replyDiv = [Link]('div');
[Link] = 'message message-them';
[Link] = `
<div>${reply}</div>
<div class="message-time">${getCurrentTime()}</div>
`;
[Link](replyDiv);
[Link] = [Link];

// 触发未读标记
if ([Link]() > 0.5) {
const badge = [Link]('.[Link] .unread-badge');
if (badge) {
[Link] = 'flex';
[Link] = parseInt([Link] || 0) + 1;
}
}
}, 1000 + [Link]() * 2000);

[Link] = [Link];
}

function generateReply(message) {
const replies = {
'白栩': [
"学长今天嘴巴这么甜，是不是做了亏心事呀～",
"下周的画展，不许放我鸽子哦😊",
"（分享了一首歌）这首歌让我想到你",
"你刚才是不是也在和别的女生聊天？",
],
'唐玥': [
"上号，现在",
"？",
"你玩打野我就玩瑶",
"刚才那把不算，我网卡",
],
'顾雪黎': [
"你的睡眠问题需要系统性调整，明天可以详细聊聊",
"你刚才的回答有些回避，是有压力吗？",
"建议记录一周的睡眠日志",
],
'周澈': [
"并购案的分析报告我看了，及格",
"明天下午三点，别迟到",
"你比我想的聪明一点",
]
};

const charReplies = replies[currentCharacter] || ["（已读不回）"];


return charReplies[[Link]([Link]() * [Link])];
}

function getCurrentTime() {
const now = new Date();
return `${[Link]().toString().padStart(2, '0')}:${[Link]().toString().padStart(2,
'0')}`;
}

// 回车发送
[Link]('messageInput').addEventListener('keydown', function(e) {
if ([Link] === 'Enter' && ![Link]) {
[Link]();
sendMessage();
}
});

function saveGame() {
alert('游戏已存档（网页版为演示，实际需接入后端存储）');
}

function loadGame() {
alert('读档功能需完整后端支持');
}

function multiMode() {
alert('开启多线操作模式：\n 可在输入框使用@角色名指定发送对象\n 例：@唐玥 晚上打游戏吗？');
}

function checkEvents() {
alert('📅 待办日程：\n1. 白栩的画展约会（3 天后）\n2. 带唐玥上分（需 5 胜）\n3. 周澈的并购会议（明天 15:00）\n4. 顾雪黎的咨询预
约（未确认时间）');
}

// 初始化
[Link]('messageInput').focus();
</script>
</body>
</html>

You might also like