SHiNE-server/shine-UI/server-ui/read-pda.html

92 lines
4.5 KiB
HTML

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Просмотр PDA — SHiNE Server Admin</title>
<link rel="stylesheet" href="styles.css" />
<style>
.field-row { display: grid; grid-template-columns: 180px 1fr; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--border); }
.field-row:last-child { border-bottom: 0; }
.field-label { color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.field-value { font-family: monospace; font-size: 12px; word-break: break-all; white-space: pre-wrap; }
.field-value.muted { color: var(--text-muted); }
.block-list { display: grid; gap: 12px; }
.block-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; background: #121212; }
.block-title { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 10px; }
.block-subtitle { font-size: 11px; color: var(--text-muted); margin-bottom: 10px; }
.mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.mini-item { min-width: 0; }
.mini-label { font-size: 11px; color: var(--text-muted); margin-bottom: 2px; text-transform: uppercase; letter-spacing: .04em; }
.mini-value { font-family: monospace; font-size: 12px; word-break: break-all; white-space: pre-wrap; }
.mono-box { font-family: monospace; font-size: 12px; white-space: pre-wrap; word-break: break-all; background: #0d0d0d; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; }
.summary-grid { display: grid; gap: 0; }
.badge-line { display: flex; gap: 8px; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 4px 10px; font-size: 11px; color: var(--text-muted); background: #0d0d0d; }
.badge.ok { color: #7dcc7d; border-color: #2a4a2a; background: #1a2e1a; }
.badge.warn { color: #ffd37a; border-color: #5f4b22; background: #2f2614; }
.badge.err { color: #f08080; border-color: #5a2a2a; background: #2e1a1a; }
.details-wrap { margin-top: 12px; }
.details-wrap details { border: 1px solid var(--border); border-radius: var(--radius); background: #121212; }
.details-wrap summary { cursor: pointer; padding: 12px 14px; color: var(--accent); font-weight: 600; }
.details-body { padding: 0 14px 14px; }
.tight { margin-bottom: 8px; }
@media (max-width: 720px) {
.field-row { grid-template-columns: 1fr; gap: 4px; }
.mini-grid { grid-template-columns: 1fr; }
}
</style>
</head>
<body>
<div class="container">
<div class="nav-links">
<a href="../server-ui.html">← Назад</a>
<a href="create-server-pda.html">Создать PDA</a>
<a href="update-server-pda.html">Обновить PDA</a>
</div>
<h1>Просмотр PDA</h1>
<p class="subtitle">Читает user_pda или server PDA по логину либо по адресу и показывает все поля</p>
<div class="card">
<h2>Параметры Solana</h2>
<div class="field">
<label>Solana Endpoint</label>
<input type="text" id="endpoint" value="https://api.devnet.solana.com" />
</div>
</div>
<div class="card">
<h2>Источник PDA</h2>
<div class="field">
<label>Логин или адрес PDA</label>
<input type="text" id="ref" placeholder="Логин сервера / пользователя или base58-адрес PDA" />
<div class="hint">Если введён base58-адрес длиной 32 байта, он читается напрямую. Иначе значение трактуется как логин.</div>
</div>
<div class="btn-row">
<button class="btn-primary" id="btnLoad">Загрузить PDA</button>
</div>
<div class="status" id="status"></div>
</div>
<div class="card" id="summaryCard" style="display:none">
<h2>Сводка</h2>
<div class="summary-grid" id="summaryRows"></div>
<div class="badge-line" style="margin-top:12px" id="badgeLine"></div>
</div>
<div class="card" id="blocksCard" style="display:none">
<h2>Блоки и поля</h2>
<div class="block-list" id="blocksList"></div>
</div>
<div class="card" id="rawCard" style="display:none">
<h2>Raw JSON</h2>
<pre class="mono-box" id="rawJson"></pre>
</div>
</div>
<script type="module" src="./js/read-pda-page.js"></script>
</body>
</html>