<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Matches</title>
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="./css/base.css">
<link rel="icon" href="./imgs/logo.png">
</head>
<body>
<div class="container">
<!-- 侧边栏 -->
<nav class="sidebar" aria-label="侧边栏">
<div class="sidebar-logo">
<img src="./imgs/logo.png" alt="logo" />
</div>
<div class="sidebar-menu">
<ul>
<li class="active" tabindex="0" aria-label="矿机状态">
<a href="#">Miner Status</a>
<ul class="sidebar-submenu">
<li class="active" tabindex="0" aria-label="总览"> <a href="#">Overview </a></li>
<li tabindex="0" aria-label="模块" style="opacity:0.4;cursor:not-allowed;"> <a href="#">Modules</a></li>
</ul>
</li>
<li tabindex="0" aria-label="矿机配置"> <a href="#">Miner Configuration</a></li>
<li tabindex="0" aria-label="网络"> <a href="#">Network</a></li>
<li tabindex="0" aria-label="系统"> <a href="#">System</a></li>
</ul>
</div>
</nav>
<!-- 主内容 -->
<div class="main">
<!-- 顶部栏 -->
<div class="header">
<div class="header-user">
<span class="icon" aria-label="用户">👥</span>
Cgminer
</div>
<button class="restart-btn"
tabindex="0"
aria-label="重启"
onclick="handleRestart()"
onkeydown="if(event.key==='Enter'){handleRestart();}">
<span role="img" aria-label="重启">🔄</span> Restart
</button>
</div>
<!-- Summary -->
<div class="summary-row">
<div class="summary-card" aria-label="Elapsed">
<div class="label">Elapsed</div>
<div class="value" id="elapsed">96427.17</div>
<div class="unit">GH/S</div>
</div>
<div class="summary-card" aria-label="RT">
<div class="label">RT</div>
<div class="value" id="rt">95706.09</div>
<div class="unit">GH/S</div>
</div>
<div class="summary-card" aria-label="Average">
<div class="label">Average</div>
<div class="value" id="average">95706.09</div>
<div class="unit">GH/S</div>
</div>
</div>
<!-- Fan -->
<div class="fan-row">
<div class="fan-card" aria-label="Fan1">
<div class="label">Fan1</div>
<div class="circle">
<svg width="60" height="60">
<circle cx="30" cy="30" r="26" stroke="#e0e6ed" stroke-width="6" fill="none"/>
<circle cx="30" cy="30" r="26" stroke="#1976d2" stroke-width="6" fill="none"
stroke-dasharray="163.36" stroke-dashoffset="32.67" stroke-linecap="round"
transform="rotate(-90 30 30)"/>
</svg>
</div>
<div class="value" id="fan1">3000</div>
<div class="unit">Speed (r/min)</div>
</div>
<div class="fan-card" aria-label="Fan2">
<div class="label">Fan2</div>
<div class="circle">
<svg width="60" height="60">
<circle cx="30" cy="30" r="26" stroke="#e0e6ed" stroke-width="6" fill="none"/>
<circle cx="30" cy="30" r="26" stroke="#1976d2" stroke-width="6" fill="none"
stroke-dasharray="163.36" stroke-dashoffset="32.67" stroke-linecap="round"
transform="rotate(-90 30 30)"/>
</svg>
</div>
<div class="value" id="fan2">3000</div>
<div class="unit">Speed (r/min)</div>
</div>
</div>
<!-- Pools -->
<div class="section" aria-label="矿池信息">
<div class="section-title">Pools</div>
<div style="overflow-x:auto;">
<table class="pools-table">
<thead>
<tr>
<th>Pool</th>
<th>URL</th>
<th>User</th>
<th>Status</th>
<th>Diff</th>
<th>GetWorks</th>
<th>Accepted</th>
<th>Rejected</th>
</tr>
</thead>
<tbody id="pools-tbody">
<!-- JS渲染 -->
</tbody>
</table>
</div>
</div>
<!-- Diagnostic -->
<div class="section" aria-label="诊断日志">
<div class="section-title">Diagnostic</div>
<div class="diagnostic-log" id="diagnostic-log">
<!-- JS渲染 -->
</div>
</div>
</div>
</div>
<script src="./js/index.js"></script>
</body>
</html>