309 lines
15 KiB
HTML
309 lines
15 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>BSC批量转账工具 | 区块链龙哥 出品</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-paper-plane"></i> BSC批量转账</h1>
|
|
<p class="subtitle">简单、快速、安全的批量转账工具</p>
|
|
<div style="margin-top: 12px; display: flex; gap: 8px;">
|
|
<a href="developer.html" class="btn btn-secondary" style="font-size: 13px; padding: 6px 12px; text-decoration: none;">
|
|
<i class="fas fa-user-circle"></i> 联系开发者
|
|
</a>
|
|
<a href="history.html" class="btn btn-secondary" style="font-size: 13px; padding: 6px 12px; text-decoration: none;">
|
|
<i class="fas fa-history"></i> 转账历史
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="wallet-section">
|
|
<button id="connectWallet" class="btn btn-primary">
|
|
<i class="fas fa-wallet"></i> 连接钱包
|
|
</button>
|
|
<div id="connectedInfo" class="wallet-connected" style="display: none;">
|
|
<div class="wallet-details">
|
|
<span class="wallet-address" id="accountAddress"></span>
|
|
<span class="wallet-balance"><i class="fas fa-coins"></i> <span id="walletBalance">0</span> BNB</span>
|
|
</div>
|
|
<button id="disconnectWallet" class="btn-icon" title="断开连接">
|
|
<i class="fas fa-sign-out-alt"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 主内容 - 步骤式布局 -->
|
|
<main class="main-content">
|
|
<!-- 步骤1: 选择转账类型 -->
|
|
<div class="step-card">
|
|
<div class="step-header">
|
|
<span class="step-number">1</span>
|
|
<h2>选择转账类型</h2>
|
|
</div>
|
|
<div class="step-content">
|
|
<div class="transfer-type-selector">
|
|
<label class="type-option" data-type="bnb">
|
|
<input type="radio" name="transferType" value="bnb" checked>
|
|
<div class="type-card">
|
|
<i class="fas fa-coins"></i>
|
|
<h3>BNB</h3>
|
|
<p>原生代币转账</p>
|
|
</div>
|
|
</label>
|
|
<label class="type-option" data-type="token">
|
|
<input type="radio" name="transferType" value="token">
|
|
<div class="type-card">
|
|
<i class="fas fa-certificate"></i>
|
|
<h3>BEP-20 Token</h3>
|
|
<p>代币合约转账</p>
|
|
</div>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- Token配置区域 -->
|
|
<div id="tokenConfig" class="token-config" style="display: none;">
|
|
<div class="input-group">
|
|
<label>Token合约地址</label>
|
|
<div class="input-with-button">
|
|
<input type="text" id="tokenAddress" class="form-control" placeholder="0x...">
|
|
<button id="loadTokenInfo" class="btn btn-secondary">
|
|
<i class="fas fa-sync"></i> 加载
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="tokenInfo" class="token-info" style="display: none;">
|
|
<div class="info-grid">
|
|
<div class="info-item">
|
|
<span class="label">名称</span>
|
|
<span class="value" id="tokenName">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">符号</span>
|
|
<span class="value" id="tokenSymbol">-</span>
|
|
</div>
|
|
<div class="info-item">
|
|
<span class="label">余额</span>
|
|
<span class="value" id="tokenBalance">-</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 步骤2: 输入转账数据 -->
|
|
<div class="step-card">
|
|
<div class="step-header">
|
|
<span class="step-number">2</span>
|
|
<h2>输入转账数据</h2>
|
|
</div>
|
|
<div class="step-content">
|
|
<div class="input-group">
|
|
<label>
|
|
转账列表
|
|
<span class="format-hint-inline">格式：地址,金额,备注（每行一条）</span>
|
|
</label>
|
|
<textarea
|
|
id="transferInput"
|
|
class="transfer-textarea"
|
|
placeholder="0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb,0.001,测试地址1 0x5B38Da6a701c568545dCfcB03FcB875f56beddC4,0.002,测试地址2 0xAb8483F64d9C6d1EcF9b849Ae677dD3315835cb2,0.003,测试地址3"
|
|
rows="8"
|
|
></textarea>
|
|
<div class="input-actions">
|
|
<button id="parseData" class="btn btn-primary">
|
|
<i class="fas fa-check"></i> 解析数据
|
|
</button>
|
|
<button id="clearInput" class="btn btn-secondary">
|
|
<i class="fas fa-eraser"></i> 清空
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据预览 -->
|
|
<div id="dataPreview" class="data-preview" style="display: none;">
|
|
<div class="preview-header">
|
|
<h3>数据预览 <span id="dataCount" class="count-badge">0</span></h3>
|
|
<button id="clearData" class="btn-text">
|
|
<i class="fas fa-times"></i> 清空
|
|
</button>
|
|
</div>
|
|
<div class="preview-table">
|
|
<table id="dataTable">
|
|
<thead>
|
|
<tr>
|
|
<th>序号</th>
|
|
<th>收款地址</th>
|
|
<th>金额</th>
|
|
<th>备注</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody></tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 步骤3: 确认并转账 -->
|
|
<div class="step-card">
|
|
<div class="step-header">
|
|
<span class="step-number">3</span>
|
|
<h2>确认并开始转账</h2>
|
|
</div>
|
|
<div class="step-content">
|
|
<!-- 转账汇总 -->
|
|
<div class="transfer-summary">
|
|
<div class="summary-row">
|
|
<span>转账数量</span>
|
|
<strong><span id="totalCount">0</span> 笔</strong>
|
|
</div>
|
|
<div class="summary-row">
|
|
<span>转账总额</span>
|
|
<strong><span id="totalAmount">0</span> <span id="amountUnit">BNB</span></strong>
|
|
</div>
|
|
<div class="summary-row">
|
|
<span>预计Gas费</span>
|
|
<strong><span id="estimatedGas">0</span> BNB</strong>
|
|
</div>
|
|
<div class="summary-row total">
|
|
<span>总计费用</span>
|
|
<strong><span id="totalCost">0</span> BNB</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 高级设置 -->
|
|
<details class="advanced-settings">
|
|
<summary>
|
|
<i class="fas fa-cog"></i> 高级设置
|
|
</summary>
|
|
<div class="settings-grid">
|
|
<div class="setting-item">
|
|
<label>发送间隔 (毫秒)</label>
|
|
<input type="number" id="delayTime" class="form-control" value="1000" min="500" max="5000">
|
|
</div>
|
|
<div class="setting-item">
|
|
<label>Gas Limit</label>
|
|
<input type="number" id="gasLimit" class="form-control" value="21000" min="21000" max="100000">
|
|
</div>
|
|
<div class="setting-item">
|
|
<label>Gas Price</label>
|
|
<div class="input-with-unit">
|
|
<input type="text" id="gasPrice" class="form-control" readonly value="0">
|
|
<span>Gwei</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</details>
|
|
|
|
<!-- 操作按钮 -->
|
|
<div class="action-buttons">
|
|
<button id="startTransfer" class="btn btn-primary btn-large" disabled>
|
|
<i class="fas fa-rocket"></i> 开始批量转账
|
|
</button>
|
|
<button id="stopTransfer" class="btn btn-danger btn-large" style="display: none;">
|
|
<i class="fas fa-stop"></i> 停止转账
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 转账进度 (只在转账时显示) -->
|
|
<div id="progressSection" class="progress-section" style="display: none;">
|
|
<div class="progress-card">
|
|
<h3><i class="fas fa-tasks"></i> 转账进度</h3>
|
|
<div class="progress-bar-container">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progressFill"></div>
|
|
</div>
|
|
<div class="progress-text">
|
|
<span id="progressInfo">0/0</span>
|
|
<span id="progressPercent">0%</span>
|
|
</div>
|
|
</div>
|
|
<div class="progress-stats">
|
|
<div class="stat success">
|
|
<i class="fas fa-check-circle"></i>
|
|
<span>成功 <strong id="successCount">0</strong></span>
|
|
</div>
|
|
<div class="stat failed">
|
|
<i class="fas fa-times-circle"></i>
|
|
<span>失败 <strong id="failedCount">0</strong></span>
|
|
</div>
|
|
<div class="stat pending">
|
|
<i class="fas fa-clock"></i>
|
|
<span>等待 <strong id="pendingCount">0</strong></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 实时日志 -->
|
|
<div class="log-card">
|
|
<div class="log-header">
|
|
<h3><i class="fas fa-list"></i> 转账日志</h3>
|
|
<div class="log-actions">
|
|
<button id="clearLog" class="btn-text">
|
|
<i class="fas fa-trash"></i> 清空
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="log-content" id="transferLog">
|
|
<div class="log-empty">
|
|
<i class="fas fa-info-circle"></i>
|
|
<p>暂无日志</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 底部信息 -->
|
|
<footer class="footer">
|
|
<p style="color: var(--text-tertiary); font-size: 13px;">© 2026 区块链龙哥 · All Rights Reserved</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<!-- 确认模态框 -->
|
|
<div id="confirmModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3><i class="fas fa-exclamation-triangle"></i> 确认转账</h3>
|
|
<button class="modal-close">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p>请仔细核对以下信息：</p>
|
|
<div class="confirm-details">
|
|
<p><span>转账数量</span><strong id="confirmCount">0</strong> 笔</p>
|
|
<p><span>转账金额</span><strong id="confirmAmount">0</strong></p>
|
|
<p><span>Gas费用</span><strong id="confirmGas">0</strong> BNB</p>
|
|
<p><span>账户余额</span><strong id="confirmBalance">0</strong> BNB</p>
|
|
</div>
|
|
<div class="warning">
|
|
<i class="fas fa-exclamation-circle"></i>
|
|
转账一旦开始将无法撤销，请确保信息正确！
|
|
</div>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="confirmCheck">
|
|
<span>我已核对所有信息并确认转账</span>
|
|
</label>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="cancelTransfer" class="btn btn-secondary">取消</button>
|
|
<button id="executeTransfer" class="btn btn-primary" disabled>确认转账</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="utils.js"></script>
|
|
<script src="batchTransfer.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|