203 lines
8.9 KiB
HTML
203 lines
8.9 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>转账历史 | 区块链龙哥 出品</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="stylesheet" href="style.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/ethers@5.7.2/dist/ethers.umd.min.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<!-- 头部 -->
|
|
<header class="header">
|
|
<div class="header-content">
|
|
<h1><i class="fas fa-history"></i> 转账历史</h1>
|
|
<p class="subtitle">查看所有批量转账记录</p>
|
|
</div>
|
|
<div class="wallet-section">
|
|
<a href="index.html" class="btn btn-secondary">
|
|
<i class="fas fa-arrow-left"></i> 返回主页
|
|
</a>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 主内容 -->
|
|
<main class="main-content">
|
|
<!-- 筛选和操作栏 -->
|
|
<div class="step-card">
|
|
<div class="history-toolbar">
|
|
<div class="filter-group">
|
|
<div class="filter-item">
|
|
<label>状态筛选</label>
|
|
<select id="statusFilter" class="form-control">
|
|
<option value="all">全部</option>
|
|
<option value="success">成功</option>
|
|
<option value="failed">失败</option>
|
|
<option value="pending">待确认</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-item">
|
|
<label>类型筛选</label>
|
|
<select id="typeFilter" class="form-control">
|
|
<option value="all">全部</option>
|
|
<option value="bnb">BNB</option>
|
|
<option value="token">Token</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-item">
|
|
<label>搜索</label>
|
|
<input type="text" id="searchInput" class="form-control" placeholder="搜索地址或交易哈希...">
|
|
</div>
|
|
</div>
|
|
<div class="action-group">
|
|
<button id="exportHistory" class="btn btn-secondary">
|
|
<i class="fas fa-download"></i> 导出CSV
|
|
</button>
|
|
<button id="clearHistory" class="btn btn-danger">
|
|
<i class="fas fa-trash"></i> 清空历史
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 统计卡片 -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-icon success">
|
|
<i class="fas fa-check-circle"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<span class="stat-label">成功转账</span>
|
|
<span class="stat-value" id="totalSuccess">0</span>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon failed">
|
|
<i class="fas fa-times-circle"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<span class="stat-label">失败转账</span>
|
|
<span class="stat-value" id="totalFailed">0</span>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon pending">
|
|
<i class="fas fa-clock"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<span class="stat-label">待确认</span>
|
|
<span class="stat-value" id="totalPending">0</span>
|
|
</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-icon total">
|
|
<i class="fas fa-list"></i>
|
|
</div>
|
|
<div class="stat-info">
|
|
<span class="stat-label">总转账数</span>
|
|
<span class="stat-value" id="totalTransfers">0</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 历史记录表格 -->
|
|
<div class="step-card">
|
|
<div class="history-header">
|
|
<h3><i class="fas fa-list"></i> 转账记录</h3>
|
|
<span class="record-count">共 <strong id="recordCount">0</strong> 条记录</span>
|
|
</div>
|
|
<div class="history-table-container">
|
|
<table class="history-table" id="historyTable">
|
|
<thead>
|
|
<tr>
|
|
<th>时间</th>
|
|
<th>类型</th>
|
|
<th>收款地址</th>
|
|
<th>金额</th>
|
|
<th>状态</th>
|
|
<th>交易哈希</th>
|
|
<th>备注</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="historyTableBody">
|
|
<tr class="empty-state">
|
|
<td colspan="8">
|
|
<div class="empty-content">
|
|
<i class="fas fa-inbox"></i>
|
|
<p>暂无转账记录</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 底部信息 -->
|
|
<footer class="footer">
|
|
<p><i class="fas fa-info-circle"></i> 历史记录保存在浏览器本地存储中</p>
|
|
<p style="margin-top: 12px;"><a href="developer.html" style="color: var(--primary-color); text-decoration: none;"><i class="fas fa-user-circle"></i> 关于开发者</a></p>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- 详情模态框 -->
|
|
<div id="detailModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3><i class="fas fa-info-circle"></i> 转账详情</h3>
|
|
<button class="modal-close">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="detail-grid">
|
|
<div class="detail-item">
|
|
<span class="label">时间</span>
|
|
<span class="value" id="detailTime">-</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="label">类型</span>
|
|
<span class="value" id="detailType">-</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="label">收款地址</span>
|
|
<span class="value" id="detailAddress">-</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="label">金额</span>
|
|
<span class="value" id="detailAmount">-</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="label">状态</span>
|
|
<span class="value" id="detailStatus">-</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="label">交易哈希</span>
|
|
<span class="value" id="detailTxHash">-</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="label">备注</span>
|
|
<span class="value" id="detailNote">-</span>
|
|
</div>
|
|
<div class="detail-item">
|
|
<span class="label">Gas费用</span>
|
|
<span class="value" id="detailGas">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="closeDetail" class="btn btn-secondary">关闭</button>
|
|
<a id="viewOnBscscan" href="#" target="_blank" class="btn btn-primary">
|
|
<i class="fas fa-external-link-alt"></i> 在BSCScan查看
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="utils.js"></script>
|
|
<script src="history.js"></script>
|
|
</body>
|
|
</html>
|