54 lines
2.2 KiB
HTML
54 lines
2.2 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<style>
|
||
|
|
body { width: 300px; padding: 12px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13px; background: #0d1224; color: #e0e8f0; }
|
||
|
|
h1 { font-size: 15px; margin: 0 0 8px; color: #e7c66b; }
|
||
|
|
.section { margin-bottom: 12px; padding: 8px; background: #1b2240; border-radius: 6px; }
|
||
|
|
.section h2 { font-size: 12px; margin: 0 0 4px; color: #8fb8ff; text-transform: uppercase; letter-spacing: .5px; }
|
||
|
|
.status { display: flex; justify-content: space-between; align-items: center; }
|
||
|
|
.badge { padding: 2px 6px; border-radius: 4px; font-size: 11px; }
|
||
|
|
.badge-ok { background: #1a5a2a; color: #6fcf97; }
|
||
|
|
.badge-warn { background: #5a4a1a; color: #e7c66b; }
|
||
|
|
.btn { background: #2a6c3b; color: #fff; border: none; border-radius: 4px; padding: 6px 12px; cursor: pointer; font-size: 12px; margin-top: 4px; }
|
||
|
|
.btn:hover { background: #1e7e34; }
|
||
|
|
.text-dim { color: #6b7a99; font-size: 11px; }
|
||
|
|
a { color: #8fb8ff; text-decoration: none; }
|
||
|
|
.row { padding: 4px 0; border-bottom: 1px solid #242b50; }
|
||
|
|
.server-status { margin-top: 8px; }
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>📥 Investor RPG 擷取器</h1>
|
||
|
|
|
||
|
|
<div class="section" id="current-page">
|
||
|
|
<h2>目前頁面</h2>
|
||
|
|
<div id="page-info" class="text-dim">請在 YouTube 或 HyRead 頁面上使用</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>快速操作</h2>
|
||
|
|
<button class="btn" id="btn-capture" style="display:none">擷取此頁面</button>
|
||
|
|
<div id="capture-result" class="text-dim" style="margin-top:4px"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="section">
|
||
|
|
<h2>伺服器連線</h2>
|
||
|
|
<div class="status">
|
||
|
|
<span id="server-status" class="text-dim">檢查中...</span>
|
||
|
|
<span id="server-badge" class="badge badge-warn">??</span>
|
||
|
|
</div>
|
||
|
|
<div style="margin-top:4px">
|
||
|
|
<input type="text" id="api-host" value="http://localhost:3000" style="width:100%;padding:4px;background:#0d1224;border:1px solid #242b50;color:#e0e8f0;border-radius:4px;font-size:11px;box-sizing:border-box" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="text-dim" style="font-size:10px;text-align:center;margin-top:8px">
|
||
|
|
Investor RPG v1.0.0
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script src="popup.js"></script>
|
||
|
|
</body>
|
||
|
|
</html>
|