完全
This commit is contained in:
Flatlogic Bot
parent
0db2211f6a
commit
e49cf6b0d5
@ -623,6 +623,34 @@ $translations = [
|
|||||||
'recharge_request_submitted_text' => '您的充值申请已成功提交，请耐心等待审核。',
|
'recharge_request_submitted_text' => '您的充值申请已成功提交，请耐心等待审核。',
|
||||||
'matched_desc_short' => '系统已为您分配专属收款账户，请等待详情显示。',
|
'matched_desc_short' => '系统已为您分配专属收款账户，请等待详情显示。',
|
||||||
'fees_content' => 'BYRO采用透明的费率结构，旨在为用户提供最具竞争力的交易成本。',
|
'fees_content' => 'BYRO采用透明的费率结构，旨在为用户提供最具竞争力的交易成本。',
|
||||||
|
'demo_title' => '最专业的数字资产交易所',
|
||||||
|
'demo_subtitle' => '更低的手续费、更快的交易速度和更强大的 API，BYRO 助您触达每笔交易的极限',
|
||||||
|
'margin_trading' => '杠杆交易',
|
||||||
|
'perpetual_contract' => '永续合约',
|
||||||
|
'option_trading' => '期权交易',
|
||||||
|
'order_book' => '订单簿',
|
||||||
|
'buy_btc' => '买入 BTC',
|
||||||
|
'network_status_normal' => '网络状态正常',
|
||||||
|
'latency' => '延迟',
|
||||||
|
'api_connected' => 'API: 已连接',
|
||||||
|
'buy_btn' => '买入',
|
||||||
|
'sell_btn' => '卖出',
|
||||||
|
'futures_trading' => '合约交易',
|
||||||
|
'binary_trading' => '秒合约',
|
||||||
|
'leverage' => '杠杆',
|
||||||
|
'cycle' => '周期',
|
||||||
|
'quantity' => '数量',
|
||||||
|
'seconds' => '秒',
|
||||||
|
'profit' => '收益',
|
||||||
|
'buy_long' => '看涨',
|
||||||
|
'sell_short' => '看跌',
|
||||||
|
'long' => '做多',
|
||||||
|
'short' => '做空',
|
||||||
|
'network_status_normal' => '网络状态正常',
|
||||||
|
'latency' => '延迟',
|
||||||
|
'api_connected' => 'API: 已连接',
|
||||||
|
'app_experience_now' => '立即体验',
|
||||||
|
'trade_history' => '成交历史',
|
||||||
],
|
],
|
||||||
'en' => [
|
'en' => [
|
||||||
'home' => 'Home',
|
'home' => 'Home',
|
||||||
@ -1053,200 +1081,30 @@ $translations = [
|
|||||||
'app_install_auth' => 'Authorize',
|
'app_install_auth' => 'Authorize',
|
||||||
'app_experience_now' => 'Experience Now',
|
'app_experience_now' => 'Experience Now',
|
||||||
'support_anywhere' => 'Support Anywhere',
|
'support_anywhere' => 'Support Anywhere',
|
||||||
'app_mockup_desc' => 'Take control of your digital assets in BYRO mobile app. Trade anywhere.',
|
'demo_title' => 'Professional Trading Terminal',
|
||||||
'scan_qr_to_download' => 'Scan QR to Download',
|
'demo_subtitle' => 'Lower fees, faster transactions, and more powerful APIs. BYRO helps you reach the limits of every trade.',
|
||||||
'vol_unit' => 'M',
|
|
||||||
'from' => 'From',
|
|
||||||
'to' => 'To',
|
|
||||||
'rate' => 'Rate',
|
|
||||||
'price_impact' => 'Price Impact',
|
|
||||||
'slippage' => 'Slippage',
|
|
||||||
'swap_now' => 'Swap Now',
|
|
||||||
'start_mining' => 'Start Mining',
|
|
||||||
'time_fs' => 'Time',
|
|
||||||
'time_1m' => '1m',
|
|
||||||
'time_5m' => '5m',
|
|
||||||
'time_15m' => '15m',
|
|
||||||
'time_30m' => '30m',
|
|
||||||
'time_1h' => '1h',
|
|
||||||
'time_4h' => '4h',
|
|
||||||
'time_1d' => '1d',
|
|
||||||
'time_1w' => '1w',
|
|
||||||
'indicators' => 'Indicators',
|
|
||||||
'chart' => 'Chart',
|
|
||||||
'depth' => 'Depth',
|
|
||||||
'price' => 'Price',
|
|
||||||
'quantity' => 'Quantity',
|
|
||||||
'open_orders' => 'Open Orders',
|
|
||||||
'settlement_history' => 'Settlement History',
|
|
||||||
'details' => 'Details',
|
|
||||||
'confirm_close_pos' => 'Confirm to close position?',
|
|
||||||
'pos_closed' => 'Position closed',
|
|
||||||
'order_in_progress' => 'Order in Progress',
|
|
||||||
'current_price' => 'Current Price',
|
|
||||||
'opening_price' => 'Opening Price',
|
|
||||||
'final_price_settlement' => 'Final price settlement',
|
|
||||||
'error_msg_placeholder' => 'Error message',
|
|
||||||
'unauthorized' => 'Unauthorized',
|
|
||||||
'invalid_amount' => 'Invalid amount',
|
|
||||||
'account_frozen' => 'Account frozen',
|
|
||||||
'invalid_action' => 'Invalid action',
|
|
||||||
'request_failed' => 'Request failed',
|
|
||||||
'vip_level' => 'VIP Level',
|
|
||||||
'level' => 'Level',
|
|
||||||
'recharge_to_upgrade' => 'Recharge %amount% USDT more to reach VIP %level%',
|
|
||||||
'highest_level' => 'Highest Level Reached',
|
|
||||||
'USDT' => 'USDT',
|
|
||||||
'BTC' => 'BTC',
|
|
||||||
'ETH' => 'ETH',
|
|
||||||
'BNB' => 'BNB',
|
|
||||||
'SOL' => 'SOL',
|
|
||||||
'XRP' => 'XRP',
|
|
||||||
'ADA' => 'ADA',
|
|
||||||
'DOGE' => 'DOGE',
|
|
||||||
'DOT' => 'DOT',
|
|
||||||
'MATIC' => 'MATIC',
|
|
||||||
'LINK' => 'LINK',
|
|
||||||
'SHIB' => 'SHIB',
|
|
||||||
'TRX' => 'TRX',
|
|
||||||
'BCH' => 'BCH',
|
|
||||||
'LTC' => 'LTC',
|
|
||||||
'UNI' => 'UNI',
|
|
||||||
'security_level' => 'Security Level',
|
|
||||||
'login_password' => 'Login Password',
|
|
||||||
'old_password' => 'Old Password',
|
|
||||||
'new_password' => 'New Password',
|
|
||||||
'confirm_new_password' => 'Confirm New Password',
|
|
||||||
'set_password' => 'Set Password',
|
|
||||||
'binding_phone' => 'Binding Phone',
|
|
||||||
'google_verification' => 'Google Verification',
|
|
||||||
'binding_mailbox' => 'Binding Mailbox',
|
|
||||||
'update' => 'Update',
|
|
||||||
'low' => 'Low',
|
|
||||||
'medium' => 'Medium',
|
|
||||||
'high' => 'High',
|
|
||||||
'bound' => 'Bound',
|
|
||||||
'not_bound' => 'Not Bound',
|
|
||||||
'copy' => 'Copy',
|
|
||||||
'old_pwd_incorrect' => 'Old password is incorrect',
|
|
||||||
'pwd_changed_success' => 'Password changed successfully',
|
|
||||||
'trade_pwd_updated' => 'Trade password updated',
|
|
||||||
'security_step1' => 'For your asset security, please bind your phone and email, and enable Google Verification.',
|
|
||||||
'security_step2' => 'Please keep your login and trade passwords safe and never disclose them to others.',
|
|
||||||
'trade_password' => 'Trade Password',
|
|
||||||
'matched_successfully' => 'Matched Successfully',
|
|
||||||
'account_received' => 'Payment Account Received',
|
|
||||||
'getting_account_details' => 'Getting Account Details',
|
|
||||||
'receiving_bank' => 'Receiving Bank',
|
|
||||||
'receiving_account' => 'Receiving Account',
|
|
||||||
'receiving_name' => 'Receiving Name',
|
|
||||||
'recharge_final_notice' => "Matched successfully. Please strictly follow the account information displayed on the page for transfer.\nThe transfer amount must be consistent with the order amount.\nDo not split transfers or modify amounts.",
|
|
||||||
'remaining_time' => 'Remaining Time',
|
|
||||||
'secure_pay' => 'Secure Pay',
|
|
||||||
'encrypted_channel' => 'Encrypted Channel',
|
|
||||||
'complete_transfer' => 'Complete Transfer',
|
|
||||||
'waiting_allocation' => 'Allocating',
|
|
||||||
'waiting_countdown' => 'Waiting Countdown',
|
|
||||||
'secure_channel' => 'Secure Channel',
|
|
||||||
'waiting_system_allocation' => 'Waiting for System Allocation',
|
|
||||||
'recharge_request_submitted' => 'Recharge Submitted',
|
|
||||||
'recharge_request_submitted_text' => 'Your recharge request has been submitted successfully, please wait for review.',
|
|
||||||
'matched_desc_short' => 'The system has allocated an exclusive receiving account for you. Please wait for the details.',
|
|
||||||
'aud_name' => 'AUD',
|
|
||||||
'cad_name' => 'CAD',
|
|
||||||
'chf_name' => 'CHF',
|
|
||||||
'brl_name' => 'BRL',
|
|
||||||
'rub_name' => 'RUB',
|
|
||||||
'inr_name' => 'INR',
|
|
||||||
'zar_name' => 'ZAR',
|
|
||||||
'try_name' => 'TRY',
|
|
||||||
'aed_name' => 'AED',
|
|
||||||
'sar_name' => 'SAR',
|
|
||||||
'mxn_name' => 'MXN',
|
|
||||||
'php_name' => 'PHP',
|
|
||||||
'idr_name' => 'IDR',
|
|
||||||
'processing' => 'Processing...',
|
|
||||||
'swap_processing_desc' => 'Please wait while we complete your exchange',
|
|
||||||
'swap_success_desc' => 'Your exchange has been completed successfully!',
|
|
||||||
'unknown_error' => 'Unknown error occurred',
|
|
||||||
'rate_fetch_failed' => 'Failed to fetch exchange rate (Provider issue)',
|
|
||||||
'matching_account' => 'Matching Account',
|
|
||||||
'matching_desc' => 'System is matching the most suitable recharge account for you, please wait...',
|
|
||||||
'security_instructions' => 'Security Instructions',
|
|
||||||
'security_tip_1' => 'Please complete the recharge before the countdown ends',
|
|
||||||
'security_tip_2' => 'Be sure to note your User ID when transferring',
|
|
||||||
'security_tip_3' => 'Contact customer service if you have any questions',
|
|
||||||
'safe_payment' => 'Safe Payment',
|
|
||||||
'instant_confirmation' => 'Instant Confirmation',
|
|
||||||
'remaining_time' => 'Remaining Time',
|
|
||||||
'account_matched' => 'Account Matched Successfully',
|
|
||||||
'account_matched_desc' => 'Please complete the transfer according to the following info.',
|
|
||||||
'bank_name' => 'Bank Name',
|
|
||||||
'payee_name' => 'Payee Name',
|
|
||||||
'account_number' => 'Account Number',
|
|
||||||
'transfer_note' => 'Transfer Note',
|
|
||||||
'copy_info' => 'Copy',
|
|
||||||
'transfer_steps_title' => 'Transfer Steps',
|
|
||||||
'step_1' => 'Open your banking app or wallet',
|
|
||||||
'step_2' => 'Transfer exact amount to the matched account',
|
|
||||||
'step_3' => 'Keep your transfer receipt for verification',
|
|
||||||
'step_4' => 'Click "I have paid" in chat or wait for system sync',
|
|
||||||
'recharge_success_title' => 'Request Submitted',
|
|
||||||
'recharge_success_text' => 'Your recharge request has been received. Please wait for approval.',
|
|
||||||
'recharge_instruction_1' => 'System is allocating an exclusive account for you, please wait patiently.',
|
|
||||||
'recharge_instruction_2' => 'Do not refresh the page or resubmit the order during matching.',
|
|
||||||
'recharge_instruction_3' => 'If matching fails after the countdown, please contact support.',
|
|
||||||
'recharge_instruction_4' => 'After receiving the account, submit the transfer voucher to support.',
|
|
||||||
'recharge_instruction_5' => 'Support will confirm your deposit after verifying the funds.',
|
|
||||||
'finished_transfer' => 'Finished Transfer',
|
|
||||||
'matching_instructions' => 'Matching Instructions',
|
|
||||||
'matching_system_active' => 'MATCHING SYSTEM ACTIVE',
|
|
||||||
'high_encryption' => 'HIGH ENCRYPTION',
|
|
||||||
'online' => 'ONLINE',
|
|
||||||
'ip' => 'IP:',
|
|
||||||
'news_title_1' => 'BYRO Officially Launches New Binary Trading System',
|
|
||||||
'news_title_2' => 'Announcement on New Payment Methods',
|
|
||||||
'news_title_3' => 'BYRO Obtains Digital Currency Operation License',
|
|
||||||
'news_title_4' => 'Enhance Account Security: Enable Google Authenticator',
|
|
||||||
'news_title_5' => '2026 Market Research: The Future of Crypto',
|
|
||||||
'news_desc_1' => 'We are excited to announce that BYRO\'s new binary system is live, offering faster settlement.',
|
|
||||||
'news_desc_2' => 'To facilitate global users, we have added multiple fiat deposit methods including local bank transfers.',
|
|
||||||
'news_desc_3' => 'BYRO is committed to compliant operations and has successfully obtained key licenses.',
|
|
||||||
'news_desc_4' => 'Your security is our priority. We recommend all users enable Google 2FA.',
|
|
||||||
'news_desc_5' => 'Deep dive into the 2026 crypto market trends and potential opportunities.',
|
|
||||||
'news_meta' => 'Published on Feb 21, 2026 • Announcement',
|
|
||||||
'help_subtitle' => 'Find answers to all your questions about using BYRO',
|
|
||||||
'help_search_placeholder' => 'Search for issues, features or tutorials...',
|
|
||||||
'getting_started' => 'Getting Started',
|
|
||||||
'getting_started_desc' => 'Learn how to register and start your first trade.',
|
|
||||||
'dep_with_title' => 'Deposit & Withdraw',
|
|
||||||
'dep_with_desc' => 'Detailed guides on how to fund and withdraw from your account.',
|
|
||||||
'trading_tutorials' => 'Trading Tutorials',
|
|
||||||
'trading_tutorials_desc' => 'Master spot, contract, and binary trading skills.',
|
|
||||||
'sec_acc_title' => 'Account Security',
|
|
||||||
'sec_acc_desc' => 'Protect your account from unauthorized access.',
|
|
||||||
'api_doc_title' => 'API Documentation',
|
|
||||||
'api_doc_desc' => 'Complete API integration documentation for developers.',
|
|
||||||
'contact_sup_title' => 'Contact Support',
|
|
||||||
'contact_sup_desc' => 'Our team is available 24/7 if you encounter any issues.',
|
|
||||||
'fees_content' => 'BYRO uses a transparent fee structure designed to provide competitive trading costs.',
|
|
||||||
'platform_home' => 'Platform Home',
|
|
||||||
'admin_panel' => 'Admin Panel',
|
|
||||||
'agent_panel' => 'Agent Panel',
|
|
||||||
'users' => 'Users',
|
|
||||||
'agents' => 'Agents',
|
|
||||||
'real_name' => 'KYC',
|
|
||||||
'finance_management' => 'Finance',
|
|
||||||
'finance_details' => 'Finance Details',
|
|
||||||
'sec_contract_management' => 'Binary Management',
|
|
||||||
'spot_trading' => 'Spot Trading',
|
'spot_trading' => 'Spot Trading',
|
||||||
'contract_trading' => 'Contract Trading',
|
'futures_trading' => 'Futures',
|
||||||
'exchange_management' => 'Exchange Management',
|
'binary_trading' => 'Binary Options',
|
||||||
'mining_management' => 'Mining Management',
|
'order_book' => 'Order Book',
|
||||||
'ai_control' => 'AI Control',
|
'buy_btn' => 'Buy',
|
||||||
'online_support' => 'Customer Service',
|
'sell_btn' => 'Sell',
|
||||||
'backend_settings' => 'System Settings',
|
'buy_up' => 'Buy Up',
|
||||||
'personal_settings' => 'Profile Settings',
|
'buy_down' => 'Buy Down',
|
||||||
|
'leverage' => 'Leverage',
|
||||||
|
'cycle' => 'Cycle',
|
||||||
|
'quantity' => 'Quantity',
|
||||||
|
'seconds' => 's',
|
||||||
|
'profit' => 'Profit',
|
||||||
|
'buy_long' => 'Buy Long',
|
||||||
|
'sell_short' => 'Sell Short',
|
||||||
|
'long' => 'Long',
|
||||||
|
'short' => 'Short',
|
||||||
|
'network_status_normal' => 'Network Normal',
|
||||||
|
'latency' => 'Latency',
|
||||||
|
'api_connected' => 'API Connected',
|
||||||
|
'market_list' => 'Markets',
|
||||||
|
'trade_history' => 'Trade History',
|
||||||
],
|
],
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
567
index.php
567
index.php
@ -247,6 +247,214 @@ require_once __DIR__ . '/includes/header.php';
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
<!-- Platform Demo Section (Terminal Style) -->
|
||||||
|
<section class="platform-demo mb-5 py-5">
|
||||||
|
<div class="text-center mb-5">
|
||||||
|
<h2 class="fw-bold display-5 mb-4 px-3"><?php echo __('demo_title'); ?></h2>
|
||||||
|
<p class="lead text-muted mx-auto px-4" style="max-width: 800px;">
|
||||||
|
<?php echo __('demo_subtitle'); ?>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Desktop Terminal Wrapper -->
|
||||||
|
<div class="demo-wrapper mx-auto d-none d-md-block" style="width: 100%; padding: 0;">
|
||||||
|
<div class="terminal-mockup shadow-2xl animate__animated animate__fadeInUp" style="border-radius: 12px; overflow: hidden; background: #0b0e11; border: 1px solid #2b3139; display: flex; flex-direction: column; height: 700px;">
|
||||||
|
|
||||||
|
<!-- Terminal Navbar -->
|
||||||
|
<div class="terminal-nav d-flex align-items-center border-bottom border-secondary border-opacity-25" style="background: #161a1e; height: 48px;">
|
||||||
|
<div class="d-flex px-3 gap-2 me-4 border-end border-secondary border-opacity-25 h-100 align-items-center">
|
||||||
|
<span class="rounded-circle" style="width: 10px; height: 10px; background: #ff5f56;"></span>
|
||||||
|
<span class="rounded-circle" style="width: 10px; height: 10px; background: #ffbd2e;"></span>
|
||||||
|
<span class="rounded-circle" style="width: 10px; height: 10px; background: #27c93f;"></span>
|
||||||
|
</div>
|
||||||
|
<div class="terminal-modes d-flex h-100">
|
||||||
|
<div class="mode-tab active" data-mode="spot" onclick="switchDemoMode('spot')">
|
||||||
|
<?php echo __('spot_trading'); ?>
|
||||||
|
</div>
|
||||||
|
<div class="mode-tab" data-mode="futures" onclick="switchDemoMode('futures')">
|
||||||
|
<?php echo __('futures_trading'); ?>
|
||||||
|
</div>
|
||||||
|
<div class="mode-tab" data-mode="binary" onclick="switchDemoMode('binary')">
|
||||||
|
<?php echo __('binary_trading'); ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ms-auto px-3 d-flex gap-3 small text-muted">
|
||||||
|
<span>BTC/USDT <span class="text-success demo-price">68,234.12</span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Main Terminal Body -->
|
||||||
|
<div class="terminal-body d-flex flex-grow-1 overflow-hidden">
|
||||||
|
|
||||||
|
<!-- Left Sidebar: Markets -->
|
||||||
|
<div class="terminal-sidebar border-end border-secondary border-opacity-25" style="width: 260px; background: #0b0e11;">
|
||||||
|
<div class="p-2 border-bottom border-secondary border-opacity-25">
|
||||||
|
<input type="text" class="form-control form-control-sm bg-dark border-secondary text-light opacity-50" placeholder="<?php echo __('search'); ?>..." style="font-size: 12px;">
|
||||||
|
</div>
|
||||||
|
<div class="market-list py-2 overflow-hidden" id="demo-market-list">
|
||||||
|
<!-- Injected by JS -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Center: Chart -->
|
||||||
|
<div class="terminal-center flex-grow-1 d-flex flex-column border-end border-secondary border-opacity-25">
|
||||||
|
<div class="chart-header p-2 d-flex justify-content-between align-items-center border-bottom border-secondary border-opacity-25" style="background: #161a1e;">
|
||||||
|
<div class="d-flex gap-3 small">
|
||||||
|
<span class="fw-bold text-light">BTC/USDT</span>
|
||||||
|
<span class="text-success fw-bold demo-price">68,234.12</span>
|
||||||
|
<span class="text-success demo-change">+2.45%</span>
|
||||||
|
</div>
|
||||||
|
<div class="btn-group btn-group-sm">
|
||||||
|
<button class="btn btn-outline-secondary active py-0 px-2" style="font-size: 10px;"><?php echo __('time_15m'); ?></button>
|
||||||
|
<button class="btn btn-outline-secondary py-0 px-2" style="font-size: 10px;"><?php echo __('time_1h'); ?></button>
|
||||||
|
<button class="btn btn-outline-secondary py-0 px-2" style="font-size: 10px;"><?php echo __('time_1d'); ?></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chart-area flex-grow-1 position-relative" style="background: #0b0e11; overflow: hidden;">
|
||||||
|
<canvas id="demo-main-chart" style="width: 100%; height: 100%;"></canvas>
|
||||||
|
<!-- Interactive overlay -->
|
||||||
|
<div class="chart-cursor-line" style="position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,0.1); display: none;"></div>
|
||||||
|
</div>
|
||||||
|
<div class="order-tabs border-top border-secondary border-opacity-25" style="background: #161a1e; height: 180px; flex-shrink: 0; overflow-y: auto;">
|
||||||
|
<div class="d-flex gap-4 p-2 border-bottom border-secondary border-opacity-25 small text-muted fw-bold">
|
||||||
|
<span class="text-primary border-bottom border-primary pb-1"><?php echo __('open_orders'); ?>(0)</span>
|
||||||
|
<span><?php echo __('trade_history'); ?></span>
|
||||||
|
</div>
|
||||||
|
<div id="demo-history-list">
|
||||||
|
<div class="p-3 text-center text-muted opacity-25 small">
|
||||||
|
<i class="bi bi-file-earmark-text fs-1 d-block mb-2"></i>
|
||||||
|
<?php echo __('no_records_found'); ?>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right Sidebar: Order Panel & Book -->
|
||||||
|
<div class="terminal-right d-flex flex-column" style="width: 300px; background: #161a1e;">
|
||||||
|
|
||||||
|
<!-- Order Book -->
|
||||||
|
<div class="order-book-section h-50 border-bottom border-secondary border-opacity-25 overflow-hidden p-2">
|
||||||
|
<div class="d-flex justify-content-between small text-muted mb-2 px-1">
|
||||||
|
<span><?php echo __('price'); ?>(USDT)</span>
|
||||||
|
<span><?php echo __('amount'); ?>(BTC)</span>
|
||||||
|
</div>
|
||||||
|
<div class="order-book-list small" id="demo-order-book">
|
||||||
|
<!-- Injected by JS -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Trade Panel -->
|
||||||
|
<div class="trade-panel-section flex-grow-1 p-3 d-flex flex-column" id="demo-trade-panel">
|
||||||
|
<!-- Dynamic based on mode -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Terminal Footer -->
|
||||||
|
<div class="terminal-footer d-flex align-items-center px-3 py-1 border-top border-secondary border-opacity-25 text-muted" style="background: #161a1e; font-size: 10px; height: 28px;">
|
||||||
|
<div class="d-flex align-items-center gap-4">
|
||||||
|
<span class="text-success"><i class="bi bi-circle-fill me-1" style="font-size: 6px;"></i> <?php echo __('network_status_normal'); ?></span>
|
||||||
|
<span><?php echo __('latency'); ?>: 18ms</span>
|
||||||
|
<span><?php echo __('api_connected'); ?></span>
|
||||||
|
</div>
|
||||||
|
<div class="ms-auto">
|
||||||
|
BYRO TRADING ENGINE v4.2.0
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Mobile Fallback -->
|
||||||
|
<div class="d-md-none text-center px-3">
|
||||||
|
<div class="mobile-terminal-preview rounded-4 shadow overflow-hidden border border-secondary border-opacity-25" style="background: #0b0e11;">
|
||||||
|
<div class="p-3 border-bottom border-secondary border-opacity-25 d-flex justify-content-between align-items-center">
|
||||||
|
<span class="fw-bold text-light">BTC/USDT</span>
|
||||||
|
<span class="text-success fw-bold">68,234.12</span>
|
||||||
|
</div>
|
||||||
|
<div style="height: 200px;">
|
||||||
|
<canvas id="demo-mobile-chart" style="width: 100%; height: 100%;"></canvas>
|
||||||
|
</div>
|
||||||
|
<div class="p-3 bg-dark bg-opacity-50">
|
||||||
|
<a href="/trade.php" class="btn btn-primary w-100 py-2 rounded-pill fw-bold"><?php echo __('app_experience_now'); ?></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.terminal-mockup { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
|
||||||
|
.mode-tab {
|
||||||
|
padding: 0 24px;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: #848e9c;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
border-right: 1px solid rgba(255,255,255,0.05);
|
||||||
|
}
|
||||||
|
.mode-tab:hover { background: rgba(255,255,255,0.02); color: #fff; }
|
||||||
|
.mode-tab.active { background: #0b0e11; color: #fff; border-top: 2px solid #f0b90b; }
|
||||||
|
|
||||||
|
.market-row {
|
||||||
|
padding: 8px 12px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.1s;
|
||||||
|
}
|
||||||
|
.market-row:hover { background: rgba(255,255,255,0.03); }
|
||||||
|
.market-row.active { background: rgba(255,255,255,0.05); }
|
||||||
|
|
||||||
|
.ob-row { display: flex; justify-content: space-between; position: relative; padding: 2px 4px; z-index: 1; }
|
||||||
|
.ob-bg { position: absolute; top: 0; right: 0; bottom: 0; z-index: -1; transition: width 0.3s; }
|
||||||
|
|
||||||
|
.trade-input-group {
|
||||||
|
background: #2b3139;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 4px 8px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
transition: border-color 0.2s;
|
||||||
|
}
|
||||||
|
.trade-input-group:focus-within { border-color: #f0b90b; }
|
||||||
|
.trade-input-group input {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
color: #fff;
|
||||||
|
width: 70%;
|
||||||
|
outline: none;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.trade-input-group .label { font-size: 11px; color: #848e9c; width: 30%; }
|
||||||
|
.trade-input-group .unit { font-size: 11px; color: #848e9c; }
|
||||||
|
|
||||||
|
.btn-buy { background: #0ecb81; color: #fff; border: none; font-weight: 700; }
|
||||||
|
.btn-buy:hover { background: #0dbb76; }
|
||||||
|
.btn-sell { background: #f6465d; color: #fff; border: none; font-weight: 700; }
|
||||||
|
.btn-sell:hover { background: #e03f53; }
|
||||||
|
|
||||||
|
.leverage-badge {
|
||||||
|
background: #2b3139;
|
||||||
|
color: #f0b90b;
|
||||||
|
font-size: 10px;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 2px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
<!-- Partners (15 icons, 5 per row) -->
|
<!-- Partners (15 icons, 5 per row) -->
|
||||||
<section class="partners mb-5 py-5 border-top border-secondary">
|
<section class="partners mb-5 py-5 border-top border-secondary">
|
||||||
<h2 class="text-center mb-5 fw-bold"><?php echo __('partners'); ?></h2>
|
<h2 class="text-center mb-5 fw-bold"><?php echo __('partners'); ?></h2>
|
||||||
@ -287,17 +495,50 @@ require_once __DIR__ . '/includes/header.php';
|
|||||||
const symbols = ['BTCUSDT', 'ETHUSDT', 'BNBUSDT', 'SOLUSDT', 'XRPUSDT', 'ADAUSDT', 'DOGEUSDT', 'DOTUSDT', 'MATICUSDT', 'LINKUSDT', 'SHIBUSDT'];
|
const symbols = ['BTCUSDT', 'ETHUSDT', 'BNBUSDT', 'SOLUSDT', 'XRPUSDT', 'ADAUSDT', 'DOGEUSDT', 'DOTUSDT', 'MATICUSDT', 'LINKUSDT', 'SHIBUSDT'];
|
||||||
const coinData = {};
|
const coinData = {};
|
||||||
|
|
||||||
|
// Platform Demo Global State
|
||||||
|
let demoMode = 'spot';
|
||||||
|
let currentDemoPrice = 68234.12;
|
||||||
|
const demoCoins = [
|
||||||
|
{ symbol: 'BTC', name: 'Bitcoin', price: 68234.12, change: '+2.45%' },
|
||||||
|
{ symbol: 'ETH', name: 'Ethereum', price: 3456.20, change: '+1.12%' },
|
||||||
|
{ symbol: 'BNB', name: 'Binance', price: 598.40, change: '-0.56%' },
|
||||||
|
{ symbol: 'SOL', name: 'Solana', price: 145.20, change: '+5.67%' },
|
||||||
|
{ symbol: 'XRP', name: 'Ripple', price: 0.62, change: '-1.23%' }
|
||||||
|
];
|
||||||
|
|
||||||
async function fetchPrices() {
|
async function fetchPrices() {
|
||||||
try {
|
try {
|
||||||
const response = await fetch('https://api.binance.com/api/v3/ticker/24hr');
|
const response = await fetch('https://api.binance.com/api/v3/ticker/24hr');
|
||||||
const data = await response.json();
|
const data = await response.json();
|
||||||
const relevant = data.filter(t => symbols.includes(t.symbol));
|
|
||||||
|
|
||||||
|
// Existing UI update
|
||||||
|
const relevant = data.filter(t => symbols.includes(t.symbol));
|
||||||
relevant.forEach(t => {
|
relevant.forEach(t => {
|
||||||
const symbol = t.symbol.replace('USDT', '');
|
const symbol = t.symbol.replace('USDT', '');
|
||||||
updateUI(symbol, parseFloat(t.lastPrice), parseFloat(t.priceChangePercent));
|
updateUI(symbol, parseFloat(t.lastPrice), parseFloat(t.priceChangePercent));
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Sync Demo Module with Real BTC Price
|
||||||
|
const btcTicker = data.find(t => t.symbol === 'BTCUSDT');
|
||||||
|
if (btcTicker) {
|
||||||
|
const realPrice = parseFloat(btcTicker.lastPrice);
|
||||||
|
// If demo price is too far from real price, sync it
|
||||||
|
if (Math.abs(currentDemoPrice - realPrice) > 500) {
|
||||||
|
currentDemoPrice = realPrice;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sync demo market list
|
||||||
|
demoCoins.forEach(dc => {
|
||||||
|
const ticker = data.find(t => t.symbol === dc.symbol + 'USDT');
|
||||||
|
if (ticker) {
|
||||||
|
dc.price = parseFloat(ticker.lastPrice);
|
||||||
|
dc.change = (ticker.priceChangePercent >= 0 ? '+' : '') + ticker.priceChangePercent + '%';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (typeof updateDemoMarkets === 'function') updateDemoMarkets();
|
||||||
|
}
|
||||||
|
|
||||||
// Handle USDT specially
|
// Handle USDT specially
|
||||||
updateUI('USDT', 1.000, 0.01);
|
updateUI('USDT', 1.000, 0.01);
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
@ -310,6 +551,329 @@ function initPriceUpdate() {
|
|||||||
setInterval(fetchPrices, 5000);
|
setInterval(fetchPrices, 5000);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Platform Demo Logic
|
||||||
|
function switchDemoMode(mode) {
|
||||||
|
demoMode = mode;
|
||||||
|
document.querySelectorAll('.mode-tab').forEach(t => {
|
||||||
|
t.classList.toggle('active', t.dataset.mode === mode);
|
||||||
|
});
|
||||||
|
renderTradePanel();
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTradePanel() {
|
||||||
|
const panel = document.getElementById('demo-trade-panel');
|
||||||
|
if (!panel) return;
|
||||||
|
|
||||||
|
let html = '';
|
||||||
|
const buyLabel = demoMode === 'futures' ? "<?php echo __('buy_long'); ?>" : "<?php echo __('buy_btn'); ?>";
|
||||||
|
const sellLabel = demoMode === 'futures' ? "<?php echo __('sell_short'); ?>" : "<?php echo __('sell_btn'); ?>";
|
||||||
|
|
||||||
|
if (demoMode === 'spot' || demoMode === 'futures') {
|
||||||
|
html = `
|
||||||
|
<div class="d-flex gap-3 mb-3">
|
||||||
|
<button class="btn btn-sm flex-fill fw-bold py-1 ${demoMode === 'futures' ? 'btn-outline-primary active' : 'text-success border-bottom border-success'}" style="font-size: 12px;">${buyLabel}</button>
|
||||||
|
<button class="btn btn-sm flex-fill fw-bold py-1 text-muted" style="font-size: 12px;">${sellLabel}</button>
|
||||||
|
</div>
|
||||||
|
${demoMode === 'futures' ? `
|
||||||
|
<div class="mb-3 d-flex justify-content-between align-items-center">
|
||||||
|
<span class="small text-muted"><?php echo __('leverage'); ?></span>
|
||||||
|
<span class="leverage-badge">100x</span>
|
||||||
|
</div>
|
||||||
|
` : ''}
|
||||||
|
<div class="trade-input-group">
|
||||||
|
<span class="label"><?php echo __('price'); ?></span>
|
||||||
|
<input type="text" class="demo-price-input" value="68,234.12" readonly>
|
||||||
|
<span class="unit">USDT</span>
|
||||||
|
</div>
|
||||||
|
<div class="trade-input-group">
|
||||||
|
<span class="label"><?php echo __('quantity'); ?></span>
|
||||||
|
<input type="text" placeholder="0.00">
|
||||||
|
<span class="unit">BTC</span>
|
||||||
|
</div>
|
||||||
|
<div class="mt-auto">
|
||||||
|
<div class="d-flex justify-content-between small text-muted mb-2">
|
||||||
|
<span><?php echo __('balance'); ?></span>
|
||||||
|
<span class="text-light">12,450.00 USDT</span>
|
||||||
|
</div>
|
||||||
|
<button class="btn ${demoMode === 'futures' ? 'btn-buy' : 'btn-buy'} w-100 py-2 rounded mb-2">
|
||||||
|
${demoMode === 'futures' ? "<?php echo __('long'); ?>" : "<?php echo __('buy_btn'); ?>"} BTC
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-sell w-100 py-2 rounded">
|
||||||
|
${demoMode === 'futures' ? "<?php echo __('short'); ?>" : "<?php echo __('sell_btn'); ?>"} BTC
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
} else if (demoMode === 'binary') {
|
||||||
|
html = `
|
||||||
|
<div class="section-title small text-muted mb-2 fw-bold"><?php echo __('cycle_settlement'); ?></div>
|
||||||
|
<div class="d-grid gap-2 mb-3" style="grid-template-columns: 1fr 1fr;">
|
||||||
|
<button class="btn btn-dark btn-sm active" style="font-size: 11px; background: #2b3139;">60<?php echo __('seconds'); ?> (8%)</button>
|
||||||
|
<button class="btn btn-dark btn-sm" style="font-size: 11px; background: #2b3139;">120<?php echo __('seconds'); ?> (15%)</button>
|
||||||
|
</div>
|
||||||
|
<div class="trade-input-group">
|
||||||
|
<span class="label"><?php echo __('amount'); ?></span>
|
||||||
|
<input type="text" value="100">
|
||||||
|
<span class="unit">USDT</span>
|
||||||
|
</div>
|
||||||
|
<div class="mt-auto">
|
||||||
|
<div class="bg-black bg-opacity-25 p-2 rounded mb-3 border border-secondary border-opacity-25">
|
||||||
|
<div class="d-flex justify-content-between small text-muted">
|
||||||
|
<span><?php echo __('expected_profit'); ?></span>
|
||||||
|
<span class="text-success fw-bold">8.00 USDT</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="btn btn-buy w-100 py-3 rounded mb-2 d-flex flex-column align-items-center">
|
||||||
|
<span class="fw-bold"><?php echo __('buy_up'); ?></span>
|
||||||
|
<span style="font-size: 10px; opacity: 0.8;"><?php echo __('profit'); ?> 8%</span>
|
||||||
|
</button>
|
||||||
|
<button class="btn btn-sell w-100 py-3 rounded d-flex flex-column align-items-center">
|
||||||
|
<span class="fw-bold"><?php echo __('buy_down'); ?></span>
|
||||||
|
<span style="font-size: 10px; opacity: 0.8;"><?php echo __('profit'); ?> 8%</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
panel.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
function initDemoModule() {
|
||||||
|
const canvas = document.getElementById('demo-main-chart');
|
||||||
|
const mobileCanvas = document.getElementById('demo-mobile-chart');
|
||||||
|
if (!canvas) return;
|
||||||
|
|
||||||
|
const ctx = canvas.getContext('2d');
|
||||||
|
const mCtx = mobileCanvas ? mobileCanvas.getContext('2d') : null;
|
||||||
|
|
||||||
|
const marketList = document.getElementById('demo-market-list');
|
||||||
|
const orderBook = document.getElementById('demo-order-book');
|
||||||
|
const priceDisplays = document.querySelectorAll('.demo-price');
|
||||||
|
const changeDisplays = document.querySelectorAll('.demo-change');
|
||||||
|
|
||||||
|
let candles = [];
|
||||||
|
const maxCandles = 50;
|
||||||
|
|
||||||
|
// Initialize OHLC candles
|
||||||
|
function generateInitialData() {
|
||||||
|
let lastClose = currentDemoPrice;
|
||||||
|
for(let i=0; i<maxCandles; i++) {
|
||||||
|
const open = lastClose + (Math.random() - 0.5) * 100;
|
||||||
|
const close = open + (Math.random() - 0.5) * 200;
|
||||||
|
const high = Math.max(open, close) + Math.random() * 50;
|
||||||
|
const low = Math.min(open, close) - Math.random() * 50;
|
||||||
|
const vol = Math.random() * 100 + 20;
|
||||||
|
candles.push({o: open, h: high, l: low, c: close, v: vol});
|
||||||
|
lastClose = close;
|
||||||
|
}
|
||||||
|
currentDemoPrice = lastClose;
|
||||||
|
}
|
||||||
|
generateInitialData();
|
||||||
|
|
||||||
|
function drawChart(context, cvs) {
|
||||||
|
if (!context || !cvs) return;
|
||||||
|
cvs.width = cvs.offsetWidth * window.devicePixelRatio;
|
||||||
|
cvs.height = cvs.offsetHeight * window.devicePixelRatio;
|
||||||
|
context.scale(window.devicePixelRatio, window.devicePixelRatio);
|
||||||
|
|
||||||
|
const w = cvs.offsetWidth;
|
||||||
|
const h = cvs.offsetHeight;
|
||||||
|
const paddingRight = 60;
|
||||||
|
const paddingTop = 20;
|
||||||
|
const paddingBottom = 40;
|
||||||
|
const chartW = w - paddingRight;
|
||||||
|
const chartH = h - paddingTop - paddingBottom;
|
||||||
|
|
||||||
|
const minPrice = Math.min(...candles.map(c => c.l)) * 0.999;
|
||||||
|
const maxPrice = Math.max(...candles.map(c => c.h)) * 1.001;
|
||||||
|
const range = maxPrice - minPrice;
|
||||||
|
|
||||||
|
context.clearRect(0, 0, w, h);
|
||||||
|
|
||||||
|
// Grid Lines & Price Axis
|
||||||
|
context.strokeStyle = 'rgba(255,255,255,0.05)';
|
||||||
|
context.setLineDash([5, 5]);
|
||||||
|
context.font = '10px Arial';
|
||||||
|
context.fillStyle = '#848e9c';
|
||||||
|
for(let i=0; i<6; i++) {
|
||||||
|
const y = paddingTop + (chartH / 5) * i;
|
||||||
|
const price = maxPrice - (range / 5) * i;
|
||||||
|
context.beginPath(); context.moveTo(0, y); context.lineTo(chartW, y); context.stroke();
|
||||||
|
context.fillText(price.toFixed(2), chartW + 5, y + 4);
|
||||||
|
}
|
||||||
|
context.setLineDash([]);
|
||||||
|
|
||||||
|
const candleW = (chartW / maxCandles) * 0.8;
|
||||||
|
const candleSpacing = (chartW / maxCandles);
|
||||||
|
|
||||||
|
candles.forEach((c, i) => {
|
||||||
|
const x = candleSpacing * i + (candleSpacing - candleW) / 2;
|
||||||
|
const color = c.c >= c.o ? '#0ecb81' : '#f6465d';
|
||||||
|
|
||||||
|
// High/Low line
|
||||||
|
const hY = paddingTop + (1 - (c.h - minPrice) / range) * chartH;
|
||||||
|
const lY = paddingTop + (1 - (c.l - minPrice) / range) * chartH;
|
||||||
|
context.strokeStyle = color;
|
||||||
|
context.lineWidth = 1;
|
||||||
|
context.beginPath();
|
||||||
|
context.moveTo(x + candleW / 2, hY);
|
||||||
|
context.lineTo(x + candleW / 2, lY);
|
||||||
|
context.stroke();
|
||||||
|
|
||||||
|
// Body
|
||||||
|
const oY = paddingTop + (1 - (c.o - minPrice) / range) * chartH;
|
||||||
|
const cY = paddingTop + (1 - (c.c - minPrice) / range) * chartH;
|
||||||
|
context.fillStyle = color;
|
||||||
|
context.fillRect(x, Math.min(oY, cY), candleW, Math.abs(oY - cY) || 1);
|
||||||
|
|
||||||
|
// Volume bar
|
||||||
|
const volH = (c.v / 150) * 40;
|
||||||
|
context.globalAlpha = 0.2;
|
||||||
|
context.fillRect(x, h - 5, candleW, -volH);
|
||||||
|
context.globalAlpha = 1.0;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Current Price Line
|
||||||
|
const lastCandle = candles[candles.length - 1];
|
||||||
|
const lastY = paddingTop + (1 - (lastCandle.c - minPrice) / range) * chartH;
|
||||||
|
context.strokeStyle = '#f0b90b';
|
||||||
|
context.setLineDash([2, 2]);
|
||||||
|
context.beginPath();
|
||||||
|
context.moveTo(0, lastY);
|
||||||
|
context.lineTo(chartW, lastY);
|
||||||
|
context.stroke();
|
||||||
|
context.setLineDash([]);
|
||||||
|
|
||||||
|
// Price Label on axis
|
||||||
|
context.fillStyle = '#f0b90b';
|
||||||
|
context.fillRect(chartW, lastY - 8, paddingRight, 16);
|
||||||
|
context.fillStyle = '#000';
|
||||||
|
context.fillText(lastCandle.c.toFixed(2), chartW + 5, lastY + 4);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.updateDemoMarkets = function() {
|
||||||
|
if (!marketList) return;
|
||||||
|
marketList.innerHTML = demoCoins.map(c => `
|
||||||
|
<div class="market-row ${c.symbol === 'BTC' ? 'active' : ''}">
|
||||||
|
<div class="d-flex align-items-center gap-2">
|
||||||
|
<span class="fw-bold text-light" style="font-size: 13px;">${c.symbol}</span>
|
||||||
|
<span class="text-muted" style="font-size: 10px;">/USDT</span>
|
||||||
|
</div>
|
||||||
|
<div class="text-end">
|
||||||
|
<div class="text-light fw-bold" style="font-size: 12px;">${c.price.toLocaleString()}</div>
|
||||||
|
<div class="${c.change.includes('+') ? 'text-success' : 'text-danger'}" style="font-size: 10px;">${c.change}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`).join('');
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateOrderBook() {
|
||||||
|
if (!orderBook) return;
|
||||||
|
let html = '';
|
||||||
|
const lastC = candles[candles.length - 1].c;
|
||||||
|
// Sells
|
||||||
|
for(let i=0; i<8; i++) {
|
||||||
|
const p = (lastC + (8 - i) * 1.2).toFixed(2);
|
||||||
|
const q = (Math.random() * 1.5).toFixed(4);
|
||||||
|
const depth = Math.random() * 80;
|
||||||
|
html += `<div class="ob-row text-danger" style="height: 20px; line-height: 20px;">
|
||||||
|
<div class="ob-bg" style="width: ${depth}%; background: rgba(246, 70, 93, 0.1);"></div>
|
||||||
|
<span>${p}</span><span>${q}</span>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
// Mid Price
|
||||||
|
html += `<div class="text-center py-2 fw-bold text-success fs-5" style="background: rgba(0,0,0,0.2);">${lastC.toFixed(2)}</div>`;
|
||||||
|
// Buys
|
||||||
|
for(let i=0; i<8; i++) {
|
||||||
|
const p = (lastC - (i + 1) * 1.2).toFixed(2);
|
||||||
|
const q = (Math.random() * 1.5).toFixed(4);
|
||||||
|
const depth = Math.random() * 80;
|
||||||
|
html += `<div class="ob-row text-success" style="height: 20px; line-height: 20px;">
|
||||||
|
<div class="ob-bg" style="width: ${depth}%; background: rgba(14, 203, 129, 0.1);"></div>
|
||||||
|
<span>${p}</span><span>${q}</span>
|
||||||
|
</div>`;
|
||||||
|
}
|
||||||
|
orderBook.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
let tickCount = 0;
|
||||||
|
function tick() {
|
||||||
|
const last = candles[candles.length - 1];
|
||||||
|
const volatility = demoMode === 'binary' ? 20 : 10;
|
||||||
|
const change = (Math.random() - 0.5) * volatility;
|
||||||
|
|
||||||
|
// Update current candle
|
||||||
|
last.c += change;
|
||||||
|
last.h = Math.max(last.h, last.c);
|
||||||
|
last.l = Math.min(last.l, last.c);
|
||||||
|
last.v += Math.random() * 5;
|
||||||
|
|
||||||
|
tickCount++;
|
||||||
|
// Create new candle every 5 ticks
|
||||||
|
if(tickCount >= 5) {
|
||||||
|
tickCount = 0;
|
||||||
|
candles.shift();
|
||||||
|
const newOpen = last.c;
|
||||||
|
candles.push({o: newOpen, h: newOpen, l: newOpen, c: newOpen, v: Math.random() * 50 + 10});
|
||||||
|
}
|
||||||
|
|
||||||
|
const formatted = last.c.toLocaleString(undefined, {minimumFractionDigits: 2, maximumFractionDigits: 2});
|
||||||
|
currentDemoPrice = last.c; // Update global state
|
||||||
|
priceDisplays.forEach(el => el.innerText = formatted);
|
||||||
|
|
||||||
|
const priceInput = document.querySelector('.demo-price-input');
|
||||||
|
if (priceInput) priceInput.value = formatted;
|
||||||
|
|
||||||
|
updateOrderBook();
|
||||||
|
drawChart(ctx, canvas);
|
||||||
|
if (mCtx) drawChart(mCtx, mobileCanvas);
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateHistory() {
|
||||||
|
const historyList = document.getElementById('demo-history-list');
|
||||||
|
if (!historyList) return;
|
||||||
|
|
||||||
|
const now = new Date();
|
||||||
|
const mockHistory = [
|
||||||
|
{ pair: 'BTC/USDT', type: 'buy', price: (currentDemoPrice - 5).toFixed(2), amount: '0.0450', time: now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds() },
|
||||||
|
{ pair: 'BTC/USDT', type: 'sell', price: (currentDemoPrice + 12).toFixed(2), amount: '0.1200', time: now.getHours() + ':' + (now.getMinutes()-1) + ':24' }
|
||||||
|
];
|
||||||
|
|
||||||
|
historyList.innerHTML = `
|
||||||
|
<div class="table-responsive">
|
||||||
|
<table class="table table-dark table-borderless mb-0" style="font-size: 11px;">
|
||||||
|
<thead>
|
||||||
|
<tr class="text-muted border-bottom border-secondary border-opacity-25">
|
||||||
|
<th class="py-1"><?php echo __('time'); ?></th>
|
||||||
|
<th class="py-1"><?php echo __('type'); ?></th>
|
||||||
|
<th class="py-1"><?php echo __('price'); ?></th>
|
||||||
|
<th class="py-1"><?php echo __('amount'); ?></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
${mockHistory.map(h => `
|
||||||
|
<tr>
|
||||||
|
<td class="py-1 text-muted">${h.time}</td>
|
||||||
|
<td class="py-1 ${h.type === 'buy' ? 'text-success' : 'text-danger'}">${h.type === 'buy' ? '<?php echo __('buy'); ?>' : '<?php echo __('sell'); ?>'}</td>
|
||||||
|
<td class="py-1">${h.price}</td>
|
||||||
|
<td class="py-1">${h.amount}</td>
|
||||||
|
</tr>
|
||||||
|
`).join('')}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
switchDemoMode('spot');
|
||||||
|
updateHistory();
|
||||||
|
window.updateDemoMarkets();
|
||||||
|
setInterval(tick, 500); // Faster update for better dynamic feel
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
drawChart(ctx, canvas);
|
||||||
|
if (mCtx) drawChart(mCtx, mobileCanvas);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
function updateUI(symbol, price, change) {
|
function updateUI(symbol, price, change) {
|
||||||
const card = document.querySelector(`.coin-card[data-symbol="${symbol}"]`);
|
const card = document.querySelector(`.coin-card[data-symbol="${symbol}"]`);
|
||||||
if (!card) return;
|
if (!card) return;
|
||||||
@ -393,6 +957,7 @@ async function initSparklines() {
|
|||||||
|
|
||||||
initSparklines();
|
initSparklines();
|
||||||
initPriceUpdate();
|
initPriceUpdate();
|
||||||
|
initDemoModule();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<?php require_once __DIR__ . '/includes/footer.php'; ?>
|
<?php require_once __DIR__ . '/includes/footer.php'; ?>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user