392 lines
14 KiB
HTML
392 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Recharge Page</title>
|
|
<link href="/css/modules.fdcec670.css" rel="stylesheet"/>
|
|
<style>
|
|
body {
|
|
font-family: 'Roboto', sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f4f7fa;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.container {
|
|
background: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
max-width: 500px;
|
|
padding: 20px 30px;
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.container {
|
|
padding: 20px 15px;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
color: #333;
|
|
}
|
|
|
|
.tips {
|
|
background-color: #eef3ff;
|
|
border-left: 4px solid #5b8def;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
border-radius: 4px;
|
|
font-size: 14px;
|
|
color: #333;
|
|
}
|
|
|
|
.special-notice {
|
|
background-color: #d6e4ff;
|
|
padding: 1vh;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.form-group label {
|
|
display: block;
|
|
font-weight: 500;
|
|
margin-bottom: 5px;
|
|
color: #555;
|
|
}
|
|
|
|
.form-group input[type="text"],
|
|
.form-group input[type="email"],
|
|
.form-group input[type="number"] {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.form-group input:focus {
|
|
border-color: #5b8def;
|
|
outline: none;
|
|
box-shadow: 0 0 5px rgba(91, 141, 239, 0.2);
|
|
}
|
|
|
|
.form-group input[type="radio"] {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.payment-container {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.payment-label {
|
|
font-weight: 500;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.payment-option {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid #ccc;
|
|
border-radius: 5px;
|
|
padding: 8px 15px;
|
|
cursor: pointer;
|
|
transition: border-color 0.3s, background-color 0.3s;
|
|
}
|
|
|
|
.payment-option.selected {
|
|
border: 2px solid #5b8def;
|
|
background-color: rgba(91, 141, 239, 0.1);
|
|
}
|
|
|
|
.payment-option input[type="radio"] {
|
|
display: none;
|
|
}
|
|
|
|
.payment-option span {
|
|
margin-left: 5px;
|
|
color: #333;
|
|
}
|
|
|
|
.payment-option img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.payment-option.selected .dot {
|
|
background-color: #007bff;
|
|
}
|
|
|
|
button {
|
|
width: 100%;
|
|
padding: 12px;
|
|
background-color: #5b8def;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #487acc;
|
|
}
|
|
|
|
.el-icon {
|
|
--color: inherit;
|
|
height: 1em;
|
|
width: 1em;
|
|
line-height: 1em;
|
|
display: inline-flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
fill: currentColor;
|
|
color: var(--color);
|
|
font-size: inherit;
|
|
}
|
|
|
|
.modal {
|
|
display: none; /* 初始隐藏 */
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.modal-content {
|
|
background: white;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
width: 90%;
|
|
max-width: 50vh;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
position: relative;
|
|
}
|
|
|
|
.close-btn {
|
|
color: #aaa;
|
|
float: right;
|
|
font-size: 28px;
|
|
font-weight: bold;
|
|
position: absolute;
|
|
top: 10px;
|
|
right: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.close-btn:hover,
|
|
.close-btn:focus {
|
|
color: black;
|
|
}
|
|
|
|
.modal-header h2 {
|
|
display: flex;
|
|
justify-content: center; /* 标题居中 */
|
|
align-items: center;
|
|
position: relative;
|
|
}
|
|
|
|
.modal-body {
|
|
max-height: 50vh;
|
|
overflow-y: auto;
|
|
display: flex; /* 添加 Flexbox */
|
|
flex-direction: column; /* 垂直排列子元素 */
|
|
align-items: center; /* 水平居中 */
|
|
justify-content: center; /* 垂直居中 */
|
|
text-align: center;
|
|
}
|
|
|
|
.modal-footer {
|
|
margin-top: 15px;
|
|
text-align: center;
|
|
}
|
|
|
|
.qr-code {
|
|
margin-top: 15px;
|
|
max-width: 100%;
|
|
height: auto;
|
|
max-height: 200px;
|
|
display: block;
|
|
}
|
|
|
|
.payment-address {
|
|
margin-top: 10px;
|
|
font-size: 14px;
|
|
word-break: break-all;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
<link rel="stylesheet" href="/css/customAlert.css"/>
|
|
<link rel="preload" href="/js/index.js" as="script">
|
|
<script src="/js/index.js"></script>
|
|
<script src="/js/customAlert.js"></script>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Recharge</h1>
|
|
<div class="tips">
|
|
<p>Kind Reminder:</p>
|
|
<ol>
|
|
<li>Currently, only USDT deposits are supported, and balances can be withdrawn. Other deposit methods are
|
|
under development. Please stay tuned for announcements regarding their release.
|
|
</li>
|
|
<li>The deposit amount will be credited within 1 minute after payment. If it does not arrive within 5
|
|
minutes, please contact customer support and provide your U address, deposit screenshot, transaction ID,
|
|
and account name.
|
|
</li>
|
|
<li>The actual amount credited for USDT deposits must match the amount displayed on the USDT deposit payment
|
|
page; otherwise, the deposit will not be credited. Please be informed.
|
|
</li>
|
|
</ol>
|
|
<div class="special-notice">
|
|
<strong>Special Notice:</strong> Please ensure the recipient address is correct when making a transfer!
|
|
</div>
|
|
</div>
|
|
<form>
|
|
<div class="form-group">
|
|
<label>Payment method:</label>
|
|
<div class="el-form-item el-form-item--default" data-v-0f66bda2="">
|
|
<div class="el-form-item__content">
|
|
<i class="el-icon"
|
|
data-v-0f66bda2=""
|
|
style="font-size: 30px">
|
|
<svg
|
|
t="1693061019040"
|
|
class="icon"
|
|
viewBox="0 0 1024 1024"
|
|
version="1.1"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
p-id="4072"
|
|
width="200"
|
|
height="200"
|
|
data-v-0f66bda2="">
|
|
<path
|
|
d="M1023.082985 511.821692c0 281.370746-228.08199 509.452736-509.452736 509.452736-281.360557 0-509.452736-228.08199-509.452737-509.452736 0-281.365652 228.092179-509.452736 509.452737-509.452737 281.370746 0 509.452736 228.087085 509.452736 509.452737"
|
|
fill="#1BA27A"
|
|
p-id="4073"></path>
|
|
<path
|
|
d="M752.731701 259.265592h-482.400796v116.460896h182.969951v171.176119h116.460895v-171.176119h182.96995z"
|
|
fill="#FFFFFF"
|
|
p-id="4074"></path>
|
|
<path
|
|
d="M512.636816 565.13592c-151.358408 0-274.070289-23.954468-274.070289-53.50782 0-29.548259 122.706786-53.507821 274.070289-53.507821 151.358408 0 274.065194 23.959562 274.065194 53.507821 0 29.553353-122.706786 53.507821-274.065194 53.50782m307.734925-44.587303c0-38.107065-137.776398-68.995184-307.734925-68.995184-169.953433 0-307.74002 30.888119-307.74002 68.995184 0 33.557652 106.837333 61.516418 248.409154 67.711363v245.729433h116.450707v-245.632637c142.66205-6.001353 250.615085-34.077294 250.615084-67.808159"
|
|
fill="#FFFFFF"
|
|
p-id="4075"></path>
|
|
</svg>
|
|
</i>
|
|
<div data-v-0f66bda2="" style="margin-left: 20px">
|
|
<div class="el-radio-group" role="radiogroup" aria-labelledby="el-id-7163-5" data-v-0f66bda2=""
|
|
id="el-id-7163-12">
|
|
<label class="el-radio is-bordered is-checked el-radio--default" data-v-0f66bda2="">
|
|
<span class="el-radio__input is-checked">
|
|
<input class="el-radio__original" name="el-id-7163-6" type="radio"
|
|
value="30"/>
|
|
<span class="el-radio__inner"></span>
|
|
</span>
|
|
<span class="el-radio__label">30USDT</span>
|
|
</label>
|
|
<label class="el-radio is-bordered el-radio--default" data-v-0f66bda2="">
|
|
<span class="el-radio__input">
|
|
<input class="el-radio__original" name="el-id-7163-6" type="radio"
|
|
value="90"/>
|
|
<span class="el-radio__inner"></span>
|
|
</span>
|
|
<span class="el-radio__label">90USDT</span>
|
|
</label>
|
|
<label class="el-radio is-bordered el-radio--default" data-v-0f66bda2="">
|
|
<span class="el-radio__input">
|
|
<input class="el-radio__original" name="el-id-7163-6" type="radio"
|
|
value="150"/>
|
|
<span class="el-radio__inner"></span>
|
|
</span>
|
|
<span class="el-radio__label">150USDT</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="amount">Amount:</label>
|
|
<input type="number" id="amount" value="30" min="30" step="any" tabindex="0" autocomplete="off"
|
|
style="width: 18%;"> (USDT)
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="nickname">Nickname (Use your game name)<span style="color: red;">*</span>:</label>
|
|
<input type="text" id="nickname" placeholder="Please make sure your entered name matches the one used in the game." required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="phone">Phone<span style="color: red;">*</span>:</label>
|
|
<input type="text" id="phone" placeholder="Please enter your phone number." required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="email">Email<span style="color: red;">*</span>:</label>
|
|
<input type="email" id="email" placeholder="Please enter your email." required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="wallet">Wallet address<span style="color: red;">*</span>:</label>
|
|
<input type="text" id="wallet" placeholder="Enter your wallet address." required>
|
|
</div>
|
|
<button type="button" onclick="handleSubmit()" id="createOrder" style="background-color: orange;">Gain Points Now!!!</button>
|
|
<button type="button" onclick="handleQuery()" style="margin-top: 1vh;">Query My Order</button>
|
|
</form>
|
|
</div>
|
|
|
|
<div id="addressModal" class="modal" style="display: none;">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h2>Select a wallet address</h2>
|
|
</div>
|
|
<div class="modal-body" id="addressList"></div>
|
|
<div class="modal-footer">
|
|
<button id="closeAddress">Enter a new wallet address.</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="paymentModal" class="modal" style="display: none;">
|
|
<div class="modal-content">
|
|
<span id="closePayment" class="close-btn">×</span>
|
|
<div class="modal-body">
|
|
<h2>Payment Information</h2>
|
|
<div id="orderInfo"></div>
|
|
<img src="/img/wallet_QRCode_detail.png" alt="付款二维码" class="qr-code">
|
|
<div class="payment-address">Wallet address: TNrzRLi2ArZhiMx51zusBEHHh1qyB9Ldq2
|
|
<button onclick="copyText('TNrzRLi2ArZhiMx51zusBEHHh1qyB9Ldq2')" id="copyAddress"
|
|
style="all: unset; cursor: pointer; margin-left: 10px; background-color: #00bfff; color: #fff; border: none; padding: 5px 10px;border-radius: 3px;">
|
|
copy
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer">
|
|
<button id="completeBtn" style="width: 11vh">Paid</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="customAlert" class="custom-alert"></div>
|
|
<script>
|
|
function copyText(text) {
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
document.getElementById('copyAddress').textContent = 'Copied';
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|