feat: FunConnect v1.0.0 - Minecraft联机平台完整版
- server: Node.js TCP中继服务器，支持多节点集群 - web: React管理面板（仪表盘、房间管理、节点管理） - client: Electron桌面客户端（连接、创建/加入房间、本地代理） - deploy: Ubuntu一键部署脚本
This commit is contained in:
FunMC
234
client/renderer/index.html
Normal file
234
client/renderer/index.html
Normal file
@@ -0,0 +1,234 @@
|
||||
<!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>
|
||||
<li class="nav-item" data-page="about">
|
||||
<span class="nav-icon">ℹ️</span> 关于
|
||||
</li>
|
||||
</ul>
|
||||
<div class="sidebar-footer">v1.0.0</div>
|
||||
</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">
|
||||
</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>
|
||||
<input type="text" id="join-host" class="input" placeholder="relay.funmc.cn" value="localhost">
|
||||
</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>
|
||||
|
||||
<!-- 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>
|
||||
<h3>FunConnect v1.0.0</h3>
|
||||
<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">
|
||||
<h4>技术信息</h4>
|
||||
<p>基于 Electron + Node.js TCP 中继技术</p>
|
||||
<p>支持 Java版 和 基岩版 Minecraft</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user