134 lines
3.3 KiB
HTML
134 lines
3.3 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Codex Monitor</title>
|
|
<link rel="stylesheet" href="../utils/css/sdpi.css">
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: #1a1a2e;
|
|
color: #e0e0e0;
|
|
padding: 16px;
|
|
margin: 0;
|
|
}
|
|
.section {
|
|
margin-bottom: 16px;
|
|
}
|
|
.section label {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: #888;
|
|
margin-bottom: 4px;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.section input[type="range"] {
|
|
width: 100%;
|
|
accent-color: #f59e0b;
|
|
}
|
|
.section input[type="number"] {
|
|
width: 100%;
|
|
padding: 6px 8px;
|
|
background: #16213e;
|
|
border: 1px solid #333;
|
|
border-radius: 6px;
|
|
color: #e0e0e0;
|
|
font-size: 13px;
|
|
}
|
|
.section .range-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
.section .range-row span {
|
|
font-size: 12px;
|
|
color: #f59e0b;
|
|
min-width: 50px;
|
|
text-align: right;
|
|
}
|
|
.toggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
}
|
|
.toggle input { display: none; }
|
|
.toggle .switch {
|
|
width: 40px; height: 22px;
|
|
background: #444;
|
|
border-radius: 11px;
|
|
position: relative;
|
|
transition: background 0.2s;
|
|
}
|
|
.toggle .switch::after {
|
|
content: '';
|
|
width: 18px; height: 18px;
|
|
background: #fff;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 2px; left: 2px;
|
|
transition: transform 0.2s;
|
|
}
|
|
.toggle input:checked + .switch {
|
|
background: #f59e0b;
|
|
}
|
|
.toggle input:checked + .switch::after {
|
|
transform: translateX(18px);
|
|
}
|
|
.status-preview {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 12px;
|
|
background: #16213e;
|
|
border-radius: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
.status-dot {
|
|
width: 12px; height: 12px;
|
|
border-radius: 50%;
|
|
background: #22c55e;
|
|
}
|
|
.status-dot.thinking { background: #f59e0b; }
|
|
.status-dot.working { background: #f59e0b; animation: pulse 0.8s infinite; }
|
|
.status-dot.error { background: #ef4444; }
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.3; }
|
|
}
|
|
.status-text {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="section">
|
|
<label data-localize="PollInterval">轮询间隔 (ms)</label>
|
|
<div class="range-row">
|
|
<input type="range" id="pollInterval" min="500" max="5000" step="100" value="1000">
|
|
<span id="pollVal">1000ms</span>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<label class="toggle">
|
|
<input type="checkbox" id="showHealth" checked>
|
|
<div class="switch"></div>
|
|
<span data-localize="ShowHealth">显示连接健康状态</span>
|
|
</label>
|
|
</div>
|
|
<div class="section">
|
|
<label>状态预览</label>
|
|
<div class="status-preview">
|
|
<div class="status-dot" id="statusDot"></div>
|
|
<div class="status-text" id="statusText">就绪</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="../utils/action.js"></script>
|
|
<script src="index.js"></script>
|
|
</body>
|
|
</html>
|