38301-vm/deposit.php

<?php
require_once 'includes/header.php';

if (!$user) {
    header('Location: login.php');
    exit;
}
?>

<div class="container my-5 py-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card bg-dark border-secondary p-4 shadow-lg" style="border-radius: 24px;">
                <h2 class="fw-bold mb-4 text-white"><?php echo mt('Deposit'); ?> Assets</h2>
                
                <div class="row g-4">
                    <!-- Left: Selection -->
                    <div class="col-md-5">
                        <div class="mb-4">
                            <label class="small text-muted mb-2">Select Crypto</label>
                            <div class="dropdown w-100">
                                <button class="btn btn-dark border-secondary w-100 text-start d-flex justify-content-between align-items-center py-2 px-3" data-bs-toggle="dropdown">
                                    <div class="d-flex align-items-center">
                                        <img src="https://static.okx.com/cdn/oksupport/asset/currency/icon/usdt.png" width="24" class="me-2">
                                        <span class="fw-bold text-white">USDT</span>
                                    </div>
                                    <i class="fas fa-chevron-down small text-muted"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-dark w-100">
                                    <li><a class="dropdown-item d-flex align-items-center" href="#"><img src="https://static.okx.com/cdn/oksupport/asset/currency/icon/usdt.png" width="20" class="me-2"> USDT</a></li>
                                    <li><a class="dropdown-item d-flex align-items-center" href="#"><img src="https://static.okx.com/cdn/oksupport/asset/currency/icon/btc.png" width="20" class="me-2"> BTC</a></li>
                                    <li><a class="dropdown-item d-flex align-items-center" href="#"><img src="https://static.okx.com/cdn/oksupport/asset/currency/icon/eth.png" width="20" class="me-2"> ETH</a></li>
                                </ul>
                            </div>
                        </div>

                        <div class="mb-4">
                            <label class="small text-muted mb-2">Select Network</label>
                            <select class="form-select bg-dark text-white border-secondary py-2">
                                <option>USDT-TRC20 (Best value)</option>
                                <option>USDT-ERC20</option>
                                <option>USDT-Polygon</option>
                            </select>
                        </div>

                        <div class="p-3 bg-secondary bg-opacity-10 rounded-4">
                            <div class="small text-muted mb-2">Deposit Tips</div>
                            <ul class="small text-muted ps-3 mb-0">
                                <li>Minimum deposit: 1 USDT</li>
                                <li>Average arrival: 1-3 minutes</li>
                                <li>Depositing from other networks may result in loss of assets.</li>
                            </ul>
                        </div>
                    </div>

                    <!-- Right: Address -->
                    <div class="col-md-7 border-start border-secondary ps-md-4">
                        <div class="text-center py-3">
                            <div class="bg-white p-3 d-inline-block rounded-4 mb-3">
                                <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=TWr8mP9PjH5pX9pX9pX9pX9pX9pX9pX9pX" alt="Deposit QR" style="width: 150px;">
                            </div>
                            <div class="mb-4">
                                <label class="small text-muted mb-2 d-block">Deposit Address</label>
                                <div class="input-group">
                                    <input type="text" class="form-control bg-dark text-white border-secondary text-center" value="TWr8mP9PjH5pX9pX9pX9pX9pX9pX9pX9pX" readonly>
                                    <button class="btn btn-primary px-3" onclick="alert('Copied!')"><i class="fas fa-copy"></i></button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="d-flex justify-content-between p-3 border border-secondary rounded-4">
                            <div class="text-center flex-grow-1">
                                <div class="small text-muted">Arrival</div>
                                <div class="fw-bold text-white">1 Confirmations</div>
                            </div>
                            <div class="border-start border-secondary mx-3"></div>
                            <div class="text-center flex-grow-1">
                                <div class="small text-muted">Withdrawal</div>
                                <div class="fw-bold text-white">3 Confirmations</div>
                            </div>
                        </div>
                    </div>
                </div>

                <hr class="my-5 border-secondary">

                <h4 class="fw-bold mb-4 text-white">Fiat Deposit</h4>
                <div class="row g-3">
                    <div class="col-md-4">
                        <div class="p-4 border border-secondary rounded-4 text-center hover-border">
                            <i class="fas fa-university fa-2x mb-3 text-primary"></i>
                            <div class="fw-bold text-white">Bank Transfer</div>
                            <div class="small text-muted">0% Fees • 1-3 Hours</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="p-4 border border-secondary rounded-4 text-center hover-border">
                            <i class="fab fa-cc-visa fa-2x mb-3 text-info"></i>
                            <div class="fw-bold text-white">Credit / Debit Card</div>
                            <div class="small text-muted">Instant • Up to $5,000</div>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <div class="p-4 border border-secondary rounded-4 text-center hover-border">
                            <i class="fab fa-apple-pay fa-2x mb-3 text-light"></i>
                            <div class="fw-bold text-white">Digital Wallets</div>
                            <div class="small text-muted">Instant • Apple/Google Pay</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .hover-border:hover {
        border-color: var(--okx-blue) !important;
        background-color: rgba(0, 70, 255, 0.05);
        cursor: pointer;
    }
</style>

<?php require_once 'includes/footer.php'; ?>