2026-02-22 23:33:00 +08:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; script-src 'self'">
|
|
|
|
|
|
<title>FunConnect</title>
|
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
|
|
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<!-- Title Bar -->
|
|
|
|
|
|
<div class="titlebar" id="titlebar">
|
|
|
|
|
|
<div class="titlebar-drag">
|
|
|
|
|
|
<span class="titlebar-icon">⛏</span>
|
|
|
|
|
|
<span class="titlebar-title">FunConnect</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="titlebar-controls">
|
|
|
|
|
|
<button class="tb-btn" id="btn-min">─</button>
|
|
|
|
|
|
<button class="tb-btn" id="btn-max">□</button>
|
|
|
|
|
|
<button class="tb-btn tb-close" id="btn-close">✕</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Main Container -->
|
|
|
|
|
|
<div class="app">
|
|
|
|
|
|
<!-- Sidebar -->
|
|
|
|
|
|
<nav class="sidebar">
|
|
|
|
|
|
<div class="sidebar-logo">
|
|
|
|
|
|
<div class="logo-icon">F</div>
|
|
|
|
|
|
<div class="logo-text">
|
|
|
|
|
|
<span class="logo-name">FunConnect</span>
|
|
|
|
|
|
<span class="logo-sub">MC联机客户端</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="sidebar-status" id="server-status">
|
|
|
|
|
|
<span class="status-dot offline"></span>
|
|
|
|
|
|
<span class="status-text">未连接</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<ul class="sidebar-nav">
|
|
|
|
|
|
<li class="nav-item active" data-page="connect">
|
|
|
|
|
|
<span class="nav-icon">🔗</span> 连接服务器
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="nav-item" data-page="rooms">
|
|
|
|
|
|
<span class="nav-icon">🎮</span> 房间列表
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="nav-item" data-page="host">
|
|
|
|
|
|
<span class="nav-icon">🏠</span> 创建房间
|
|
|
|
|
|
</li>
|
|
|
|
|
|
<li class="nav-item" data-page="join">
|
|
|
|
|
|
<span class="nav-icon">🚀</span> 加入房间
|
|
|
|
|
|
</li>
|
2026-02-22 23:38:41 +08:00
|
|
|
|
<li class="nav-item" data-page="settings">
|
|
|
|
|
|
<span class="nav-icon">⚙️</span> 设置
|
|
|
|
|
|
</li>
|
2026-02-22 23:33:00 +08:00
|
|
|
|
<li class="nav-item" data-page="about">
|
|
|
|
|
|
<span class="nav-icon">ℹ️</span> 关于
|
|
|
|
|
|
</li>
|
|
|
|
|
|
</ul>
|
2026-02-23 08:21:09 +08:00
|
|
|
|
<div class="sidebar-footer">v1.2.0</div>
|
2026-02-22 23:33:00 +08:00
|
|
|
|
</nav>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Content -->
|
|
|
|
|
|
<main class="content">
|
|
|
|
|
|
<!-- Connect Page -->
|
|
|
|
|
|
<div class="page active" id="page-connect">
|
|
|
|
|
|
<h2 class="page-title">连接服务器</h2>
|
|
|
|
|
|
<p class="page-desc">输入FunMC中继服务器地址来开始联机</p>
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>服务器地址</label>
|
|
|
|
|
|
<input type="text" id="server-url" class="input" placeholder="http://your-server:3000" value="http://localhost:3000">
|
2026-02-22 23:38:41 +08:00
|
|
|
|
<div id="recent-servers" class="recent-servers hidden"></div>
|
2026-02-22 23:33:00 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<button class="btn btn-primary" id="btn-connect">连接服务器</button>
|
|
|
|
|
|
<div class="msg" id="connect-msg"></div>
|
|
|
|
|
|
<div class="server-info hidden" id="server-info">
|
|
|
|
|
|
<h3>服务器信息</h3>
|
|
|
|
|
|
<div class="info-grid" id="server-info-grid"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Rooms Page -->
|
|
|
|
|
|
<div class="page" id="page-rooms">
|
|
|
|
|
|
<div class="page-header">
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<h2 class="page-title">房间列表</h2>
|
|
|
|
|
|
<p class="page-desc">当前在线的联机房间</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<button class="btn btn-secondary" id="btn-refresh-rooms">刷新</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="rooms-list" class="rooms-grid">
|
|
|
|
|
|
<div class="empty-state">
|
|
|
|
|
|
<span class="empty-icon">🎮</span>
|
|
|
|
|
|
<p>请先连接服务器</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Host Page -->
|
|
|
|
|
|
<div class="page" id="page-host">
|
|
|
|
|
|
<h2 class="page-title">创建房间</h2>
|
|
|
|
|
|
<p class="page-desc">将你的本地Minecraft服务器共享给好友</p>
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>房间名称</label>
|
|
|
|
|
|
<input type="text" id="host-name" class="input" placeholder="我的联机房间">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>本地MC端口</label>
|
|
|
|
|
|
<input type="number" id="host-port" class="input" value="25565">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>游戏版本</label>
|
|
|
|
|
|
<input type="text" id="host-version" class="input" value="1.20.4">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>版本类型</label>
|
|
|
|
|
|
<select id="host-edition" class="input">
|
|
|
|
|
|
<option value="java">Java版</option>
|
|
|
|
|
|
<option value="bedrock">基岩版</option>
|
|
|
|
|
|
</select>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>最大人数</label>
|
|
|
|
|
|
<input type="number" id="host-maxplayers" class="input" value="10" min="2" max="100">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>房间密码（可选）</label>
|
|
|
|
|
|
<input type="password" id="host-password" class="input" placeholder="留空则不设密码">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<button class="btn btn-primary" id="btn-host">创建房间</button>
|
|
|
|
|
|
<div class="msg" id="host-msg"></div>
|
|
|
|
|
|
<div class="room-result hidden" id="host-result">
|
|
|
|
|
|
<div class="result-title">房间创建成功！</div>
|
|
|
|
|
|
<div class="result-room-id" id="host-room-id"></div>
|
|
|
|
|
|
<p class="result-hint">将此房间号发给好友，他们可以通过「加入房间」连接</p>
|
|
|
|
|
|
<button class="btn btn-secondary" id="btn-copy-room">复制房间号</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- Join Page -->
|
|
|
|
|
|
<div class="page" id="page-join">
|
|
|
|
|
|
<h2 class="page-title">加入房间</h2>
|
|
|
|
|
|
<p class="page-desc">输入房间号加入好友的联机房间</p>
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>房间号</label>
|
|
|
|
|
|
<input type="text" id="join-room-id" class="input" placeholder="输入房间号">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>中继服务器地址</label>
|
2026-02-25 20:52:13 +08:00
|
|
|
|
<input type="text" id="join-host" class="input" placeholder="fc.funmc.cn" value="localhost">
|
2026-02-22 23:33:00 +08:00
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>中继端口</label>
|
|
|
|
|
|
<input type="number" id="join-port" class="input" value="25565">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>本地监听端口</label>
|
|
|
|
|
|
<input type="number" id="join-local-port" class="input" value="25566">
|
|
|
|
|
|
<span class="form-hint">在Minecraft中添加服务器地址 127.0.0.1:25566 即可连接</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<button class="btn btn-primary" id="btn-join">加入房间</button>
|
|
|
|
|
|
<button class="btn btn-danger hidden" id="btn-leave">断开连接</button>
|
|
|
|
|
|
<div class="msg" id="join-msg"></div>
|
|
|
|
|
|
<div class="join-status hidden" id="join-status">
|
|
|
|
|
|
<div class="status-card connected">
|
|
|
|
|
|
<span class="status-emoji">✅</span>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<div class="status-title">已连接</div>
|
|
|
|
|
|
<div class="status-detail">在Minecraft中添加服务器: <strong>127.0.0.1:<span id="join-active-port">25566</span></strong></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-02-22 23:38:41 +08:00
|
|
|
|
<!-- Settings Page -->
|
|
|
|
|
|
<div class="page" id="page-settings">
|
|
|
|
|
|
<h2 class="page-title">设置</h2>
|
|
|
|
|
|
<p class="page-desc">客户端偏好设置</p>
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>玩家名称</label>
|
|
|
|
|
|
<input type="text" id="settings-name" class="input" placeholder="你的游戏名">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>默认本地端口</label>
|
|
|
|
|
|
<input type="number" id="settings-port" class="input" value="25566">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-row">
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label class="toggle-label">
|
|
|
|
|
|
<input type="checkbox" id="settings-autoreconnect" checked>
|
|
|
|
|
|
<span>自动重连</span>
|
|
|
|
|
|
</label>
|
|
|
|
|
|
<span class="form-hint">连接断开后自动尝试重新连接</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label class="toggle-label">
|
|
|
|
|
|
<input type="checkbox" id="settings-tray" checked>
|
|
|
|
|
|
<span>最小化到托盘</span>
|
|
|
|
|
|
</label>
|
|
|
|
|
|
<span class="form-hint">关闭窗口时最小化到系统托盘</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label>最近连接的服务器</label>
|
|
|
|
|
|
<div id="settings-recent-list" class="recent-list"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<button class="btn btn-primary" id="btn-save-settings">保存设置</button>
|
|
|
|
|
|
<div class="msg" id="settings-msg"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-02-22 23:33:00 +08:00
|
|
|
|
<!-- About Page -->
|
|
|
|
|
|
<div class="page" id="page-about">
|
|
|
|
|
|
<h2 class="page-title">关于 FunConnect</h2>
|
|
|
|
|
|
<div class="card">
|
|
|
|
|
|
<div class="about-header">
|
|
|
|
|
|
<div class="about-logo">F</div>
|
|
|
|
|
|
<div>
|
2026-02-23 08:21:09 +08:00
|
|
|
|
<h3>FunConnect v1.2.0</h3>
|
2026-02-22 23:33:00 +08:00
|
|
|
|
<p>Minecraft 联机客户端</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="about-section">
|
|
|
|
|
|
<h4>使用说明</h4>
|
|
|
|
|
|
<div class="steps">
|
|
|
|
|
|
<div class="step">
|
|
|
|
|
|
<span class="step-num">1</span>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<strong>连接服务器</strong>
|
|
|
|
|
|
<p>输入FunMC中继服务器地址并连接</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="step">
|
|
|
|
|
|
<span class="step-num">2</span>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<strong>创建或加入房间</strong>
|
|
|
|
|
|
<p>房主创建房间后分享房间号，玩家输入房间号加入</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="step">
|
|
|
|
|
|
<span class="step-num">3</span>
|
|
|
|
|
|
<div>
|
|
|
|
|
|
<strong>开始游戏</strong>
|
|
|
|
|
|
<p>在Minecraft中添加服务器地址 127.0.0.1:端口 即可联机</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="about-section">
|
|
|
|
|
|
<p>支持 Java版 和 基岩版 Minecraft</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</main>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-02-23 08:21:09 +08:00
|
|
|
|
<!-- Room Detail Modal -->
|
|
|
|
|
|
<div class="modal-overlay hidden" id="modal-overlay">
|
|
|
|
|
|
<div class="modal" id="room-detail-modal">
|
|
|
|
|
|
<div class="modal-header">
|
|
|
|
|
|
<h3 id="modal-room-name">房间详情</h3>
|
|
|
|
|
|
<button class="modal-close" id="modal-close">×</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="modal-body">
|
|
|
|
|
|
<div class="modal-info" id="modal-room-info"></div>
|
|
|
|
|
|
<div class="modal-section">
|
|
|
|
|
|
<h4>在线玩家 <span id="modal-player-count"></span></h4>
|
|
|
|
|
|
<div id="modal-player-list" class="player-list"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="modal-section">
|
|
|
|
|
|
<h4>房间聊天</h4>
|
|
|
|
|
|
<div id="modal-chat-messages" class="chat-messages"></div>
|
|
|
|
|
|
<div class="chat-input-row">
|
|
|
|
|
|
<input type="text" id="modal-chat-input" class="input" placeholder="输入消息...">
|
|
|
|
|
|
<button class="btn btn-primary btn-sm" id="modal-chat-send">发送</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="modal-footer">
|
|
|
|
|
|
<button class="btn btn-secondary" id="modal-join-btn">加入此房间</button>
|
|
|
|
|
|
<button class="btn btn-danger" id="modal-delete-btn">删除房间</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
2026-02-22 23:33:00 +08:00
|
|
|
|
<script src="app.js"></script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
