127 lines
4.2 KiB
PHP
127 lines
4.2 KiB
PHP
<?php
|
|
include 'includes/header.php';
|
|
|
|
$currencies = [
|
|
['code' => 'USD', 'name' => 'US Dollar', 'symbol' => '$'],
|
|
['code' => 'EUR', 'name' => 'Euro', 'symbol' => '€'],
|
|
['code' => 'CNY', 'name' => 'Chinese Yuan', 'symbol' => '¥'],
|
|
];
|
|
|
|
$cryptos = [
|
|
['symbol' => 'BTC', 'name' => 'Bitcoin'],
|
|
['symbol' => 'ETH', 'name' => 'Ethereum'],
|
|
['symbol' => 'USDT', 'name' => 'Tether'],
|
|
];
|
|
?>
|
|
|
|
<style>
|
|
.buy-card {
|
|
background-color: var(--card-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 20px;
|
|
padding: 40px;
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
}
|
|
.buy-tabs .nav-link {
|
|
color: #848e9c;
|
|
border: none;
|
|
font-weight: 600;
|
|
font-size: 1.2rem;
|
|
padding: 0 20px 10px 20px;
|
|
}
|
|
.buy-tabs .nav-link.active {
|
|
color: var(--okx-blue);
|
|
background: transparent;
|
|
border-bottom: 3px solid var(--okx-blue);
|
|
}
|
|
.input-box {
|
|
background-color: #0b0e11;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 12px;
|
|
padding: 15px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.input-box label {
|
|
color: #848e9c;
|
|
font-size: 0.9rem;
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
}
|
|
.input-box input {
|
|
background: transparent;
|
|
border: none;
|
|
color: white;
|
|
font-size: 1.5rem;
|
|
font-weight: 600;
|
|
width: 100%;
|
|
outline: none;
|
|
}
|
|
.currency-select {
|
|
background-color: var(--border-color);
|
|
border-radius: 20px;
|
|
padding: 5px 15px;
|
|
font-weight: 600;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
|
|
<main class="container py-5" style="min-height: 70vh;">
|
|
<div class="text-center mb-5">
|
|
<h1 class="display-5 fw-bold"><?php echo mt('Buy_Crypto'); ?></h1>
|
|
<p class="text-muted">Buy crypto with credit card, bank transfer, or P2P.</p>
|
|
</div>
|
|
|
|
<div class="buy-card">
|
|
<ul class="nav nav-tabs buy-tabs border-0 mb-4 justify-content-center">
|
|
<li class="nav-item"><a class="nav-link active" data-bs-toggle="tab" href="#buy">Buy</a></li>
|
|
<li class="nav-item"><a class="nav-link" data-bs-toggle="tab" href="#sell">Sell</a></li>
|
|
</ul>
|
|
|
|
<div class="tab-content">
|
|
<div class="tab-pane fade show active" id="buy">
|
|
<div class="input-box">
|
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
<label>Pay</label>
|
|
</div>
|
|
<div class="d-flex align-items-center">
|
|
<input type="number" placeholder="100 - 20,000" value="1000">
|
|
<div class="currency-select">
|
|
<i class="fas fa-dollar-sign"></i> USD <i class="fas fa-caret-down"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center mb-3">
|
|
<i class="fas fa-exchange-alt fa-rotate-90 text-muted"></i>
|
|
</div>
|
|
|
|
<div class="input-box">
|
|
<div class="d-flex justify-content-between align-items-center mb-1">
|
|
<label>Receive</label>
|
|
</div>
|
|
<div class="d-flex align-items-center">
|
|
<input type="number" placeholder="0.00" value="0.023" readonly>
|
|
<div class="currency-select">
|
|
<img src="https://static.okx.com/cdn/oksupport/asset/currency/icon/btc.png" width="20"> BTC <i class="fas fa-caret-down"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-flex justify-content-between small text-muted mb-4">
|
|
<span>Reference Price</span>
|
|
<span>1 BTC ≈ 43,250.50 USD</span>
|
|
</div>
|
|
|
|
<button class="btn btn-primary w-100 py-3 fw-bold rounded-pill mb-3">Buy BTC</button>
|
|
<p class="text-center small text-muted">Supported payment methods: Visa, Mastercard, Apple Pay, Google Pay.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<?php include 'includes/footer.php'; ?>
|