134 lines
7.7 KiB
HTML
134 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>DreamLife - EasyTier公共节点</title>
|
|
<link rel="icon" href="dl.png" type="image/png">
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header class="header">
|
|
<div class="logo-container">
|
|
<img src="dl.png" alt="DreamLife Logo" class="icon-logo">
|
|
<img src="dreamlife.png" alt="DreamLife Text" class="text-logo">
|
|
</div>
|
|
<p class="subtitle">EasyTier 公共节点服务</p>
|
|
</header>
|
|
|
|
<main class="main-content">
|
|
<section class="connection-section">
|
|
<h2>连接信息</h2>
|
|
<div class="connection-card">
|
|
<p class="connection-tip">使用 EasyTier 客户端初始节点配置：</p>
|
|
<div class="connection-details">
|
|
<div class="detail-item">
|
|
<span class="detail-label">节点地址:</span>
|
|
</div>
|
|
<div class="address-center">
|
|
<div class="protocol-selector" id="protocol-selector">
|
|
<button class="protocol-toggle" id="protocol-toggle" onclick="toggleProtocolMenu()">
|
|
<span id="current-protocol">TCP</span>
|
|
<svg class="chevron" id="chevron" viewBox="0 0 16 16" width="14" height="14">
|
|
<path d="M4.427 5.427a.75.75 0 0 1 1.06 0L8 8.023l2.513-2.596a.75.75 0 1 1 1.003 1.087l-3 3.099a.75.75 0 0 1-1.003 0l-3-3.099a.75.75 0 0 1 0-1.087Z"/>
|
|
</svg>
|
|
</button>
|
|
<div class="protocol-menu" id="protocol-menu">
|
|
<div class="protocol-option active" data-protocol="tcp" onclick="selectProtocol('tcp')">TCP</div>
|
|
<div class="protocol-option" data-protocol="udp" onclick="selectProtocol('udp')">UDP</div>
|
|
<div class="protocol-option" data-protocol="wg" onclick="selectProtocol('wg')">WG</div>
|
|
<div class="protocol-option" data-protocol="ws" onclick="selectProtocol('ws')">WS</div>
|
|
<div class="protocol-option" data-protocol="wss" onclick="selectProtocol('wss')">WSS</div>
|
|
<div class="protocol-option" data-protocol="quic" onclick="selectProtocol('quic')">QUIC</div>
|
|
<div class="protocol-option" data-protocol="faketcp" onclick="selectProtocol('faketcp')">FakeTCP</div>
|
|
<div class="protocol-option" data-protocol="http" onclick="selectProtocol('http')">HTTP</div>
|
|
<div class="protocol-option" data-protocol="https" onclick="selectProtocol('https')">HTTPS</div>
|
|
<div class="protocol-option" data-protocol="txt" onclick="selectProtocol('txt')">TXT</div>
|
|
<div class="protocol-option" data-protocol="srv" onclick="selectProtocol('srv')">SRV</div>
|
|
</div>
|
|
</div>
|
|
<code class="detail-value" id="node-address">tcp://dreamlife.indevs.in:11010
|
|
<button class="copy-button" id="copy-button" onclick="copyAddress()" aria-label="复制代码">
|
|
<svg class="copy-icon" id="copy-icon" viewBox="0 0 16 16" width="14" height="14">
|
|
<path d="M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"/>
|
|
<path d="M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5a.75.75 0 0 1 0-1.5h1.5a.25.25 0 0 0 .25-.25v-7.5Z"/>
|
|
</svg>
|
|
<svg class="check-icon" id="check-icon" viewBox="0 0 16 16" width="14" height="14" style="display: none;">
|
|
<path d="M13.78 4.22a.75.75 0 0 1 0 1.06l-7.25 7.25a.75.75 0 0 1-1.06 0L2.22 9.28a.75.75 0 0 1 1.06-1.06L6 10.94l6.72-6.72a.75.75 0 0 1 1.06 0Z"/>
|
|
</svg>
|
|
</button>
|
|
</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="status-section">
|
|
<h2>公共服务器状态</h2>
|
|
<div class="metrics-grid">
|
|
<div class="metric-card">
|
|
<div class="metric-header">
|
|
<span class="metric-label">CPU 占用率</span>
|
|
<span class="metric-value" id="cpu-value">0%</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="cpu-bar" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<div class="metric-header">
|
|
<span class="metric-label">内存占用率</span>
|
|
<span class="metric-value" id="memory-value">0%</span>
|
|
</div>
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="memory-bar" style="width: 0%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<div class="metric-header">
|
|
<span class="metric-label">网络延迟</span>
|
|
<span class="metric-value" id="latency-value">
|
|
<span class="latency-text">--</span>
|
|
<button class="latency-test-btn" id="latency-test-btn" onclick="testLatency()">测试</button>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="metric-card">
|
|
<div class="metric-header">
|
|
<span class="metric-label">服务器位置</span>
|
|
</div>
|
|
<div class="location-box">
|
|
<svg class="location-icon" viewBox="0 0 16 16" width="16" height="16">
|
|
<path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10Zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6Z"/>
|
|
</svg>
|
|
<span class="location-text">华东-上海</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="server-info">
|
|
<div class="info-row">
|
|
<span class="info-label">节点状态:</span>
|
|
<span class="info-value status-online" id="server-status">在线</span>
|
|
</div>
|
|
<div class="info-row">
|
|
<span class="info-label">最后更新:</span>
|
|
<span class="info-value" id="last-update">--</span>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="footer">
|
|
<p>© 2026 由 DreamLife 提供公益支持</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|