Untitled

{"project":{"id":"dmQFkOO","userId":"davidyarham@gmail.com","username":null,"userPicture":null,"name":"Crypto trading platform","visible":true,"contributors":"","githubRepo":"davidyarham/blnq-crypto-trading-platform","forkedFrom":null,"isTemplate":false,"tags":"","files":{"folder":"","files":[{"name":"index.html","content":"\n\n\n \n \n Untitled\n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n

\n\t\n\tAddress copied to clipboard!\n

\n\t\n\n\t

\n\t\t\n\n\t\t

\n\t\t\t

\n\t\t\t\tPortfolio Value\n\t\t\t\t$124,582.34\n\t\t\t\t+12.4%\n\t\t\t

\n\t\t\t

\n\t\t\t\t24h P&L\n\t\t\t\t+$3,241.50\n\t\t\t\t+2.67%\n\t\t\t

\n\t\t\t

\n\t\t\t\tOpen Positions\n\t\t\t\t7\n\t\t\t\t3 Long, 4 Short\n\t\t\t

\n\t\t

\n\n\t\t

\n\t\t\t\n\t\t\t

\n\t\t\t\t\n\t\t\t\t

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\n\t\t\t

\n\t\t\t\n\t\t

\n\n\t\t

\n\t\t\t

\n\t\t\t\t\n\t\t\t\t\n\t\t\t

\n\t\t\t

\n\t\t\t\t

\n\t\t\t\t\tPrice (USDT)\n\t\t\t\t\t\n\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\tAmount (BTC)\n\t\t\t\t\t\n\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t25%\n\t\t\t\t\t50%\n\t\t\t\t\t75%\n\t\t\t\t\t100%\n\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\tTotal (USDT)\n\t\t\t\t\t\n\t\t\t\t

\n\t\t\t\t\n\t\t\t

\n\t\t

\n\t

\n\n\t\n

\n \n\n"},{"name":"main.js","content":"// Initialize Lucide icons\nlucide.createIcons();\n\n// Market data\nconst markets = [{\n\t\tsymbol: 'BTC',\n\t\tname: 'Bitcoin',\n\t\tprice: 67432.50,\n\t\tchange: 2.34\n\t},\n\t{\n\t\tsymbol: 'ETH',\n\t\tname: 'Ethereum',\n\t\tprice: 3521.80,\n\t\tchange: 1.87\n\t},\n\t{\n\t\tsymbol: 'SOL',\n\t\tname: 'Solana',\n\t\tprice: 142.65,\n\t\tchange: -0.92\n\t},\n\t{\n\t\tsymbol: 'XRP',\n\t\tname: 'Ripple',\n\t\tprice: 0.5234,\n\t\tchange: 3.21\n\t},\n\t{\n\t\tsymbol: 'ADA',\n\t\tname: 'Cardano',\n\t\tprice: 0.4521,\n\t\tchange: -1.45\n\t},\n\t{\n\t\tsymbol: 'AVAX',\n\t\tname: 'Avalanche',\n\t\tprice: 35.82,\n\t\tchange: 4.12\n\t},\n\t{\n\t\tsymbol: 'DOT',\n\t\tname: 'Polkadot',\n\t\tprice: 7.23,\n\t\tchange: 0.56\n\t},\n\t{\n\t\tsymbol: 'LINK',\n\t\tname: 'Chainlink',\n\t\tprice: 14.87,\n\t\tchange: -2.31\n\t},\n\t{\n\t\tsymbol: 'MATIC',\n\t\tname: 'Polygon',\n\t\tprice: 0.7845,\n\t\tchange: 1.23\n\t},\n\t{\n\t\tsymbol: 'UNI',\n\t\tname: 'Uniswap',\n\t\tprice: 9.42,\n\t\tchange: -0.78\n\t},\n\t{\n\t\tsymbol: 'ATOM',\n\t\tname: 'Cosmos',\n\t\tprice: 8.91,\n\t\tchange: 2.67\n\t},\n\t{\n\t\tsymbol: 'LTC',\n\t\tname: 'Litecoin',\n\t\tprice: 84.32,\n\t\tchange: 0.34\n\t},\n\t{\n\t\tsymbol: 'BCH',\n\t\tname: 'Bitcoin Cash',\n\t\tprice: 456.20,\n\t\tchange: -1.12\n\t},\n\t{\n\t\tsymbol: 'APT',\n\t\tname: 'Aptos',\n\t\tprice: 9.87,\n\t\tchange: 5.43\n\t},\n\t{\n\t\tsymbol: 'ARB',\n\t\tname: 'Arbitrum',\n\t\tprice: 1.23,\n\t\tchange: -0.45\n\t}\n];\n\nfunction formatPrice(price) {\n\tif (price >= 1000) return price.toLocaleString('en-US', {\n\t\tminimumFractionDigits: 2,\n\t\tmaximumFractionDigits: 2\n\t});\n\tif (price >= 1) return price.toFixed(2);\n\treturn price.toFixed(4);\n}\n\n// Current selected symbol\nlet currentSymbol = 'BTC';\nlet currentInterval = '60';\n\n// Render ticker list\nfunction renderTicker() {\n\tconst tickerList = document.getElementById('tickerList');\n\tif (!tickerList) return;\n\n\ttickerList.innerHTML = markets.map(coin => `\n\t\t

\n\t\t\t

\n\t\t\t\t

${coin.symbol.slice(0, 2)}

\n\t\t\t\t

\n\t\t\t\t\t

${coin.name}

\n\t\t\t\t\t

${coin.symbol}/USDT

\n\t\t\t\t

\n\t\t\t

$${formatPrice(coin.price)}

\n\t\t\t

= 0 ? 'ticker__change--up' : 'ticker__change--down'}\" id=\"change-${coin.symbol}\">\n\t\t\t\t${coin.change >= 0 ? '+' : ''}${coin.change.toFixed(2)}%\n\t\t\t

\n\t\t

\n\t`).join('');\n\n\t// Add click handlers to ticker items\n\tdocument.querySelectorAll('.ticker__item').forEach(item => {\n\t\titem.addEventListener('click', () => {\n\t\t\tconst symbol = item.getAttribute('data-symbol');\n\t\t\tselectCoin(symbol);\n\t\t});\n\t});\n}\n\n// Select a coin and update the chart\nfunction selectCoin(symbol) {\n\tcurrentSymbol = symbol;\n\tconst coin = markets.find(m => m.symbol === symbol);\n\n\t// Update header display\n\tconst symbolEl = document.querySelector('.trading-view__symbol');\n\tconst priceEl = document.getElementById('btcPrice');\n\tconst changeEl = document.querySelector('.trading-view__change');\n\tconst orderBtn = document.querySelector('.order-btn');\n\n\tif (symbolEl) symbolEl.textContent = `${symbol}/USDT`;\n\tif (priceEl && coin) priceEl.textContent = `$${formatPrice(coin.price)}`;\n\tif (changeEl && coin) {\n\t\tchangeEl.textContent = `${coin.change >= 0 ? '+' : ''}${coin.change.toFixed(2)}%`;\n\t\tchangeEl.className = `trading-view__change trading-view__change--${coin.change >= 0 ? 'up' : 'down'}`;\n\t}\n\tif (orderBtn) {\n\t\tconst isBuy = orderBtn.classList.contains('order-btn--buy');\n\t\torderBtn.textContent = isBuy ? `Buy ${symbol}` : `Sell ${symbol}`;\n\t}\n\n\t// Update active state in ticker list\n\tdocument.querySelectorAll('.ticker__item').forEach(item => {\n\t\titem.classList.toggle('ticker__item--active', item.getAttribute('data-symbol') === symbol);\n\t});\n\n\t// Reinitialize TradingView with new symbol\n\tinitTradingView(currentInterval, symbol);\n\n\tshowToast(`Switched to ${coin ? coin.name : symbol}`);\n}\n\n// Live price updates\nfunction updatePrices() {\n\tmarkets.forEach(coin => {\n\t\tconst movement = (Math.random() - 0.5) * 0.002;\n\t\tconst oldPrice = coin.price;\n\t\tcoin.price = coin.price * (1 + movement);\n\t\tcoin.change += (Math.random() - 0.5) * 0.1;\n\n\t\tconst priceEl = document.getElementById(`price-${coin.symbol}`);\n\t\tconst changeEl = document.getElementById(`change-${coin.symbol}`);\n\n\t\tif (priceEl) {\n\t\t\tpriceEl.textContent = `$${formatPrice(coin.price)}`;\n\t\t\tconst flashClass = coin.price > oldPrice ? 'ticker__price--flash-up' : 'ticker__price--flash-down';\n\t\t\tpriceEl.classList.add(flashClass);\n\t\t\tsetTimeout(() => priceEl.classList.remove(flashClass), 150);\n\t\t}\n\n\t\tif (changeEl) {\n\t\t\tchangeEl.textContent = `${coin.change >= 0 ? '+' : ''}${coin.change.toFixed(2)}%`;\n\t\t\tchangeEl.className = `ticker__change ${coin.change >= 0 ? 'ticker__change--up' : 'ticker__change--down'}`;\n\t\t}\n\t});\n\n\tconst btcData = markets.find(m => m.symbol === 'BTC');\n\tconst btcPriceEl = document.getElementById('btcPrice');\n\tif (btcPriceEl && btcData) {\n\t\tbtcPriceEl.textContent = `$${formatPrice(btcData.price)}`;\n\t}\n}\n\n// TradingView Chart Configuration\nlet tvWidget = null;\nconst timeframeMap = {\n\t'1m': '1',\n\t'5m': '5',\n\t'15m': '15',\n\t'1H': '60',\n\t'4H': '240',\n\t'1D': 'D'\n};\n\nfunction initTradingView(interval = '60', symbol = 'BTC') {\n\tif (typeof TradingView === 'undefined') {\n\t\tsetTimeout(() => initTradingView(interval, symbol), 100);\n\t\treturn;\n\t}\n\n\tcurrentInterval = interval;\n\n\t// Clear existing widget\n\tconst container = document.getElementById('tradingview_chart');\n\tif (container) {\n\t\tcontainer.innerHTML = '';\n\t}\n\n\ttvWidget = new TradingView.widget({\n\t\tautosize: true,\n\t\tsymbol: `BINANCE:${symbol}USDT`,\n\t\tinterval: interval,\n\t\ttimezone: \"Etc/UTC\",\n\t\ttheme: \"dark\",\n\t\tstyle: \"1\",\n\t\tlocale: \"en\",\n\t\ttoolbar_bg: \"#18181b\",\n\t\tenable_publishing: false,\n\t\thide_top_toolbar: true,\n\t\thide_legend: false,\n\t\tsave_image: false,\n\t\tcontainer_id: \"tradingview_chart\",\n\t\thide_volume: false,\n\t\tbackgroundColor: \"#18181b\",\n\t\tgridColor: \"#27272a\",\n\t\tallow_symbol_change: true,\n\t\tdetails: false,\n\t\thotlist: false,\n\t\tcalendar: false,\n\t\tstudies: [\"Volume@tv-basicstudies\"]\n\t});\n}\n\nfunction changeTimeframe(timeframeText) {\n\tconst interval = timeframeMap[timeframeText];\n\tif (interval) {\n\t\tinitTradingView(interval, currentSymbol);\n\t}\n}\n\n// Mobile menu functionality\nfunction initMobileMenu() {\n\tconst menuToggle = document.getElementById('menuToggle');\n\tconst tickerToggle = document.getElementById('tickerToggle');\n\tconst sidebar = document.getElementById('sidebar');\n\tconst ticker = document.getElementById('ticker');\n\tconst overlay = document.getElementById('sidebarOverlay');\n\n\tif (menuToggle && sidebar) {\n\t\tmenuToggle.addEventListener('click', () => {\n\t\t\tsidebar.classList.toggle('open');\n\t\t\toverlay.classList.toggle('open');\n\t\t\tticker.classList.remove('open');\n\t\t});\n\t}\n\n\tif (tickerToggle && ticker) {\n\t\ttickerToggle.addEventListener('click', () => {\n\t\t\tticker.classList.toggle('open');\n\t\t\toverlay.classList.toggle('open');\n\t\t\tsidebar.classList.remove('open');\n\t\t});\n\t}\n\n\tif (overlay) {\n\t\toverlay.addEventListener('click', () => {\n\t\t\tsidebar.classList.remove('open');\n\t\t\tticker.classList.remove('open');\n\t\t\toverlay.classList.remove('open');\n\t\t});\n\t}\n}\n\n// Modal functionality\nfunction openModal(modalId) {\n\tconst modal = document.getElementById(modalId);\n\tif (modal) {\n\t\tmodal.classList.add('open');\n\t\tdocument.body.style.overflow = 'hidden';\n\t}\n}\n\nfunction closeModal(modalId) {\n\tconst modal = document.getElementById(modalId);\n\tif (modal) {\n\t\tmodal.classList.remove('open');\n\t\tdocument.body.style.overflow = '';\n\t}\n}\n\nfunction showToast(message) {\n\tconst toast = document.getElementById('toast');\n\tconst toastMessage = document.getElementById('toastMessage');\n\tif (toast && toastMessage) {\n\t\ttoastMessage.textContent = message;\n\t\ttoast.classList.add('show');\n\t\tsetTimeout(() => toast.classList.remove('show'), 3000);\n\t}\n}\n\nfunction initModals() {\n\t// Close modal buttons\n\tdocument.querySelectorAll('[data-close]').forEach(btn => {\n\t\tbtn.addEventListener('click', () => {\n\t\t\tconst modalId = btn.getAttribute('data-close');\n\t\t\tcloseModal(modalId);\n\t\t});\n\t});\n\n\t// Close modal on backdrop click\n\tdocument.querySelectorAll('.modal').forEach(modal => {\n\t\tmodal.addEventListener('click', (e) => {\n\t\t\tif (e.target === modal) {\n\t\t\t\tmodal.classList.remove('open');\n\t\t\t\tdocument.body.style.overflow = '';\n\t\t\t}\n\t\t});\n\t});\n\n\t// Deposit button\n\tconst depositBtn = document.querySelector('.header__btn--primary');\n\tif (depositBtn) {\n\t\tdepositBtn.addEventListener('click', () => {\n\t\t\topenModal('depositModal');\n\t\t\tlucide.createIcons();\n\t\t});\n\t}\n\n\t// Copy address button\n\tconst copyBtn = document.getElementById('copyAddress');\n\tif (copyBtn) {\n\t\tcopyBtn.addEventListener('click', () => {\n\t\t\tshowToast('Address copied to clipboard!');\n\t\t});\n\t}\n\n\t// Order tabs\n\tconst orderTabs = document.querySelectorAll('.order-tab');\n\torderTabs.forEach(tab => {\n\t\ttab.addEventListener('click', () => {\n\t\t\torderTabs.forEach(t => t.classList.remove('order-tab--active'));\n\t\t\ttab.classList.add('order-tab--active');\n\n\t\t\tconst orderBtn = document.querySelector('.order-btn');\n\t\t\tif (tab.classList.contains('order-tab--buy')) {\n\t\t\t\torderBtn.className = 'order-btn order-btn--buy';\n\t\t\t\torderBtn.textContent = 'Buy BTC';\n\t\t\t} else {\n\t\t\t\torderBtn.className = 'order-btn order-btn--sell';\n\t\t\t\torderBtn.textContent = 'Sell BTC';\n\t\t\t}\n\t\t});\n\t});\n\n\t// Buy/Sell button\n\tconst orderBtn = document.querySelector('.order-btn');\n\tif (orderBtn) {\n\t\torderBtn.addEventListener('click', () => {\n\t\t\tconst isBuy = orderBtn.classList.contains('order-btn--buy');\n\t\t\tconst orderType = document.getElementById('orderType');\n\t\t\tconst orderModalTitle = document.getElementById('orderModalTitle');\n\t\t\tconst confirmBtn = document.getElementById('confirmOrder');\n\n\t\t\tif (orderType) {\n\t\t\t\torderType.textContent = isBuy ? 'Buy' : 'Sell';\n\t\t\t\torderType.className = `order-summary__value order-summary__value--${isBuy ? 'buy' : 'sell'}`;\n\t\t\t}\n\t\t\tif (orderModalTitle) {\n\t\t\t\torderModalTitle.textContent = isBuy ? 'Confirm Buy Order' : 'Confirm Sell Order';\n\t\t\t}\n\t\t\tif (confirmBtn) {\n\t\t\t\tconfirmBtn.className = `modal__btn modal__btn--confirm${isBuy ? '' : ' modal__btn--sell'}`;\n\t\t\t\tconfirmBtn.style.background = isBuy ? 'var(--green)' : 'var(--red)';\n\t\t\t}\n\n\t\t\topenModal('orderModal');\n\t\t\tlucide.createIcons();\n\t\t});\n\t}\n\n\t// Confirm order button\n\tconst confirmOrderBtn = document.getElementById('confirmOrder');\n\tif (confirmOrderBtn) {\n\t\tconfirmOrderBtn.addEventListener('click', () => {\n\t\t\tcloseModal('orderModal');\n\t\t\tsetTimeout(() => {\n\t\t\t\topenModal('successModal');\n\t\t\t\tlucide.createIcons();\n\t\t\t}, 300);\n\t\t});\n\t}\n\n\t// Order slider percentages\n\tconst sliderBtns = document.querySelectorAll('.order-slider span');\n\tsliderBtns.forEach(btn => {\n\t\tbtn.addEventListener('click', () => {\n\t\t\tsliderBtns.forEach(b => b.style.background = '');\n\t\t\tbtn.style.background = 'var(--accent)';\n\t\t\tbtn.style.color = 'var(--bg-primary)';\n\t\t\tshowToast(`Set to ${btn.textContent} of available balance`);\n\t\t});\n\t});\n\n\t// Notification bell\n\tconst bellBtn = document.querySelector('.header__btn:not(.header__btn--primary):not(.mobile-toggle)');\n\tif (bellBtn) {\n\t\tbellBtn.addEventListener('click', () => {\n\t\t\tshowToast('No new notifications');\n\t\t});\n\t}\n\n\t// Timeframe buttons\n\tconst timeframeBtns = document.querySelectorAll('.timeframe');\n\ttimeframeBtns.forEach(btn => {\n\t\tbtn.addEventListener('click', () => {\n\t\t\ttimeframeBtns.forEach(b => b.classList.remove('timeframe--active'));\n\t\t\tbtn.classList.add('timeframe--active');\n\t\t\tconst timeframeText = btn.textContent.trim();\n\t\t\tchangeTimeframe(timeframeText);\n\t\t\tshowToast(`Switched to ${timeframeText} timeframe`);\n\t\t});\n\t});\n}\n\n// Initialize everything when DOM is ready\nfunction init() {\n\trenderTicker();\n\tinitTradingView('60', currentSymbol);\n\tinitMobileMenu();\n\tinitModals();\n\tsetInterval(updatePrices, 500);\n}\n\n// Wait for DOM to load\nif (document.readyState === 'loading') {\n\tdocument.addEventListener('DOMContentLoaded', init);\n} else {\n\tinit();\n}"},{"name":"style.css","content":"/* Updated for accessible contrast on negative ticker values */\n:root {\n\tcolor-scheme: dark;\n\t--bg-primary: #09090b;\n\t--bg-secondary: #18181b;\n\t--bg-tertiary: #27272a;\n\t--accent: #00d4aa;\n\t--accent-hover: #00f5c4;\n\t--red: #ff6b6b;\n\t--green: #0ecb81;\n\t--text-primary: #fafafa;\n\t--text-secondary: #a1a1aa;\n\t--border: #27272a;\n\tfont-family: 'Inter', system-ui, sans-serif;\n\t--radius: 2px;\n}\n\n* {\n\tbox-sizing: border-box;\n\tmargin: 0;\n\tpadding: 0;\n}\n\nhtml, body {\n\theight: 100%;\n\toverflow: hidden;\n}\n\n.sr-only {\n\tposition: absolute;\n\twidth: 1px;\n\theight: 1px;\n\tpadding: 0;\n\tmargin: -1px;\n\toverflow: hidden;\n\tclip: rect(0, 0, 0, 0);\n\twhite-space: nowrap;\n\tborder: 0;\n}\n\nbody {\n\tbackground: var(--bg-primary);\n\tcolor: var(--text-primary);\n}\n\n.dashboard {\n\tdisplay: grid;\n\tgrid-template-columns: 240px 1fr 320px;\n\theight: 100vh;\n\toverflow: hidden;\n}\n\n/* Sidebar */\n.sidebar {\n\tbackground: var(--bg-secondary);\n\tborder-right: 1px solid var(--border);\n\tpadding: 1.5rem;\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow-y: auto;\n}\n\n.sidebar__logo {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.75rem;\n\tfont-size: 1.5rem;\n\tfont-weight: 700;\n\tmargin-bottom: 2rem;\n\tcolor: var(--accent);\n}\n\n.sidebar__logo i {\n\twidth: 28px;\n\theight: 28px;\n}\n\n.sidebar__nav {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 0.5rem;\n\tflex: 1;\n}\n\n.sidebar__link {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.75rem;\n\tpadding: 0.875rem 1rem;\n\tborder-radius: 2px;\n\tcolor: var(--text-secondary);\n\ttext-decoration: none;\n\ttransition: all 0.2s;\n}\n\n.sidebar__link:hover {\n\tbackground: var(--bg-tertiary);\n\tcolor: var(--text-primary);\n}\n\n.sidebar__link--active {\n\tbackground: var(--accent);\n\tcolor: var(--bg-primary);\n\tfont-weight: 600;\n}\n\n.sidebar__link i {\n\twidth: 20px;\n\theight: 20px;\n}\n\n.sidebar__link span {\n\twhite-space: nowrap;\n}\n\n.sidebar__user {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.75rem;\n\tpadding: 1rem;\n\tbackground: var(--bg-tertiary);\n\tborder-radius: 3px;\n}\n\n.sidebar__user img {\n\twidth: 36px;\n\theight: 36px;\n\tborder-radius: 2px;\n\tobject-fit: cover;\n\tflex-shrink: 0;\n}\n\n.sidebar__username {\n\tdisplay: block;\n\tfont-weight: 600;\n\tfont-size: 0.875rem;\n}\n\n.sidebar__status {\n\tfont-size: 0.75rem;\n\tcolor: var(--accent);\n}\n\n/* Main */\n.main {\n\tpadding: 1.5rem;\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 1rem;\n\toverflow: hidden;\n}\n\n/* Header */\n.header {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\talign-items: center;\n\tflex-shrink: 0;\n\tgap: 1rem;\n\tflex-wrap: wrap;\n}\n\n.header__search {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.75rem;\n\tbackground: var(--bg-secondary);\n\tborder: 1px solid var(--border);\n\tborder-radius: 12px;\n\tpadding: 0.75rem 1rem;\n\twidth: 320px;\n\tmax-width: 100%;\n\tflex: 1;\n\tmin-width: 200px;\n}\n\n.header__search i {\n\twidth: 18px;\n\theight: 18px;\n\tcolor: var(--text-secondary);\n\tflex-shrink: 0;\n}\n\n.header__search input {\n\tbackground: none;\n\tborder: none;\n\toutline: none;\n\tcolor: var(--text-primary);\n\tfont-size: 0.875rem;\n\twidth: 100%;\n}\n\n.header__actions {\n\tdisplay: flex;\n\tgap: 0.75rem;\n\tflex-shrink: 0;\n}\n\n.header__btn {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.5rem;\n\tbackground: var(--bg-secondary);\n\tborder: 1px solid var(--border);\n\tborder-radius: 12px;\n\tpadding: 0.75rem 1rem;\n\tcolor: var(--text-primary);\n\tcursor: pointer;\n\ttransition: all 0.2s;\n\twhite-space: nowrap;\n}\n\n.header__btn:hover {\n\tbackground: var(--bg-tertiary);\n}\n\n.header__btn--primary {\n\tbackground: var(--accent);\n\tborder-color: var(--accent);\n\tcolor: var(--bg-primary);\n\tfont-weight: 500;\n\tletter-spacing: -0.01em;\n}\n\n.header__btn--primary:hover {\n\tbackground: var(--accent-hover);\n}\n\n.header__btn i {\n\twidth: 18px;\n\theight: 18px;\n}\n\n/* Stats */\n.stats {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(3, 1fr);\n\tgap: 1rem;\n\tflex-shrink: 0;\n}\n\n.stat-card {\n\tbackground: var(--bg-secondary);\n\tborder: 1px solid var(--border);\n\tborder-radius: 3px;\n\tpadding: 1rem;\n}\n\n.stat-card__label {\n\tdisplay: block;\n\tcolor: var(--text-secondary);\n\tfont-size: 0.8rem;\n\tmargin-bottom: 0.375rem;\n}\n\n.stat-card__value {\n\tdisplay: block;\n\tfont-size: 1.375rem;\n\tfont-weight: 600;\n\tmargin-bottom: 0.25rem;\n\tletter-spacing: -0.025em;\n}\n\n.stat-card__change {\n\tfont-size: 0.8rem;\n\tcolor: var(--text-secondary);\n}\n\n.stat-card__change--up {\n\tcolor: var(--green);\n}\n\n.stat-card__change--down {\n\tcolor: var(--red);\n}\n\n/* Trading View */\n.trading-view {\n\tbackground: var(--bg-secondary);\n\tborder: 1px solid var(--border);\n\tborder-radius: 3px;\n\tdisplay: flex;\n\tflex-direction: column;\n\tflex: 1;\n\tmin-height: 0;\n}\n\n.trading-view__header {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 1rem 1.25rem;\n\tborder-bottom: 1px solid var(--border);\n\tflex-shrink: 0;\n\tgap: 1rem;\n\tflex-wrap: wrap;\n}\n\n.trading-view__pair {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 1rem;\n\tflex-wrap: wrap;\n}\n\n.trading-view__symbol {\n\tfont-size: 1rem;\n\tfont-weight: 600;\n\tletter-spacing: -0.01em;\n}\n\n.trading-view__price {\n\tfont-size: 1.125rem;\n\tfont-weight: 600;\n}\n\n.trading-view__change {\n\tpadding: 0.25rem 0.5rem;\n\tborder-radius: 4px;\n\tfont-size: 0.75rem;\n\tfont-weight: 600;\n}\n\n.trading-view__change--up {\n\tbackground: rgba(14, 203, 129, 0.15);\n\tcolor: var(--green);\n}\n\n.trading-view__change--down {\n\tbackground: rgba(255, 107, 107, 0.15);\n\tcolor: var(--red);\n}\n\n.trading-view__timeframes {\n\tdisplay: flex;\n\tgap: 0.25rem;\n\tflex-wrap: wrap;\n}\n\n.timeframe {\n\tbackground: none;\n\tborder: none;\n\tpadding: 0.5rem 0.75rem;\n\tborder-radius: 4px;\n\tcolor: var(--text-secondary);\n\tcursor: pointer;\n\tfont-size: 0.8125rem;\n\ttransition: all 0.2s;\n}\n\n.timeframe:hover {\n\tbackground: var(--bg-tertiary);\n\tcolor: var(--text-primary);\n}\n\n.timeframe--active {\n\tbackground: var(--accent);\n\tcolor: var(--bg-primary);\n}\n\n.trading-view__tools {\n\tdisplay: flex;\n\tgap: 0.5rem;\n}\n\n.trading-view__tools button {\n\tbackground: none;\n\tborder: none;\n\tpadding: 0.5rem;\n\tborder-radius: 8px;\n\tcolor: var(--text-secondary);\n\tcursor: pointer;\n\ttransition: all 0.2s;\n}\n\n.trading-view__tools button:hover {\n\tbackground: var(--bg-tertiary);\n\tcolor: var(--text-primary);\n}\n\n.trading-view__tools i {\n\twidth: 18px;\n\theight: 18px;\n}\n\n.chart {\n\tflex: 1;\n\tposition: relative;\n\toverflow: hidden;\n\tbackground: #1e2329;\n\tmin-height: 250px;\n}\n\n.chart iframe {\n\tborder: none !important;\n}\n\n.trading-view__footer {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tpadding: 0.75rem 1.25rem;\n\tborder-top: 1px solid var(--border);\n\tfont-size: 0.8125rem;\n\tcolor: var(--text-secondary);\n\tflex-shrink: 0;\n\tflex-wrap: wrap;\n\tgap: 0.5rem;\n}\n\n.ohlc {\n\tdisplay: flex;\n\tgap: 1.5rem;\n\tflex-wrap: wrap;\n}\n\n.ohlc strong {\n\tcolor: var(--text-primary);\n}\n\n/* Order Panel */\n.order-panel {\n\tbackground: var(--bg-secondary);\n\tborder: 1px solid var(--border);\n\tborder-radius: 16px;\n\tpadding: 1rem;\n\tflex-shrink: 0;\n}\n\n.order-panel__tabs {\n\tdisplay: flex;\n\tgap: 0.5rem;\n\tmargin-bottom: 1rem;\n}\n\n.order-tab {\n\tflex: 1;\n\tpadding: 0.75rem;\n\tborder: none;\n\tborder-radius: 6px;\n\tfont-weight: 600;\n\tcursor: pointer;\n\tbackground: var(--bg-tertiary);\n\tcolor: var(--text-secondary);\n\ttransition: all 0.2s;\n}\n\n.order-tab--active.order-tab--buy {\n\tbackground: var(--green);\n\tcolor: var(--bg-primary);\n}\n\n.order-tab--active.order-tab--sell {\n\tbackground: var(--red);\n\tcolor: white;\n}\n\n.order-panel__form {\n\tdisplay: flex;\n\tgap: 0.75rem;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.order-input {\n\tflex: 1;\n\tmin-width: 120px;\n}\n\n.order-input label {\n\tdisplay: block;\n\tfont-size: 0.75rem;\n\tcolor: var(--text-secondary);\n\tmargin-bottom: 0.375rem;\n}\n\n.order-input input {\n\twidth: 100%;\n\tbackground: var(--bg-tertiary);\n\tborder: 1px solid var(--border);\n\tborder-radius: 8px;\n\tpadding: 0.625rem 0.75rem;\n\tcolor: var(--text-primary);\n\tfont-size: 0.875rem;\n}\n\n.order-input input:focus {\n\toutline: none;\n\tborder-color: var(--accent);\n}\n\n.order-slider {\n\tdisplay: flex;\n\tgap: 0.5rem;\n\tfont-size: 0.75rem;\n\tcolor: var(--text-secondary);\n}\n\n.order-slider span {\n\tpadding: 0.375rem 0.625rem;\n\tbackground: var(--bg-tertiary);\n\tborder-radius: 6px;\n\tcursor: pointer;\n\ttransition: all 0.2s;\n}\n\n.order-slider span:hover {\n\tbackground: var(--accent);\n\tcolor: var(--bg-primary);\n}\n\n.order-btn {\n\tpadding: 0.75rem 2rem;\n\tborder: none;\n\tborder-radius: 2px;\n\tfont-weight: 600;\n\tcursor: pointer;\n\ttransition: all 0.2s;\n\twhite-space: nowrap;\n}\n\n.order-btn--buy {\n\tbackground: var(--green);\n\tcolor: var(--bg-primary);\n}\n\n.order-btn--buy:hover {\n\tfilter: brightness(1.1);\n}\n\n.order-btn--sell {\n\tbackground: var(--red);\n\tcolor: white;\n}\n\n.order-btn--sell:hover {\n\tfilter: brightness(1.1);\n}\n\n/* Ticker */\n.ticker {\n\tbackground: var(--bg-secondary);\n\tborder-left: 1px solid var(--border);\n\tpadding: 1.5rem;\n\toverflow-y: auto;\n}\n\n.ticker__title {\n\tfont-size: 1rem;\n\tfont-weight: 600;\n\tmargin-bottom: 1rem;\n\tcolor: var(--text-secondary);\n}\n\n.ticker__list {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 0.25rem;\n}\n\n.ticker__item {\n\tdisplay: grid;\n\tgrid-template-columns: 1fr auto auto;\n\tgap: 0.75rem;\n\tpadding: 0.75rem;\n\tborder-radius: 10px;\n\ttransition: background 0.2s;\n\tcursor: pointer;\n}\n\n.ticker__item:hover {\n\tbackground: var(--bg-tertiary);\n}\n\n.ticker__item--active {\n\tbackground: rgba(0, 212, 170, 0.1);\n\tborder-left: 2px solid var(--accent);\n}\n\n.ticker__coin {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.625rem;\n\tmin-width: 0;\n}\n\n.ticker__icon {\n\twidth: 32px;\n\theight: 32px;\n\tborder-radius: 4px;\n\tbackground: var(--bg-tertiary);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tfont-weight: 600;\n\tfont-size: 0.6875rem;\n\tflex-shrink: 0;\n\tletter-spacing: 0.025em;\n}\n\n.ticker__name {\n\tfont-weight: 600;\n\tfont-size: 0.875rem;\n\twhite-space: nowrap;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n}\n\n.ticker__symbol {\n\tfont-size: 0.75rem;\n\tcolor: var(--text-secondary);\n}\n\n.ticker__price {\n\ttext-align: right;\n\tfont-weight: 600;\n\tfont-size: 0.875rem;\n\ttransition: color 0.15s;\n\twhite-space: nowrap;\n}\n\n.ticker__price--flash-up {\n\tcolor: var(--green);\n}\n\n.ticker__price--flash-down {\n\tcolor: var(--red);\n}\n\n.ticker__change {\n\ttext-align: right;\n\tfont-size: 0.8125rem;\n\tfont-weight: 500;\n\tmin-width: 60px;\n\twhite-space: nowrap;\n}\n\n.ticker__change--up {\n\tcolor: var(--green);\n}\n\n.ticker__change--down {\n\tcolor: var(--red);\n}\n\n/* Mobile menu toggle */\n.mobile-toggle {\n\tdisplay: none;\n\tbackground: var(--bg-secondary);\n\tborder: 1px solid var(--border);\n\tborder-radius: 10px;\n\tpadding: 0.75rem;\n\tcolor: var(--text-primary);\n\tcursor: pointer;\n}\n\n.mobile-toggle i {\n\twidth: 24px;\n\theight: 24px;\n}\n\n/* Responsive Styles */\n@media (max-width: 1200px) {\n\t.dashboard {\n\t\tgrid-template-columns: 200px 1fr 280px;\n\t}\n\n\t.sidebar__link span {\n\t\tfont-size: 0.875rem;\n\t}\n\n\t.ticker__item {\n\t\tgrid-template-columns: 1fr auto;\n\t}\n\n\t.ticker__change {\n\t\tdisplay: none;\n\t}\n}\n\n@media (max-width: 1024px) {\n\t.dashboard {\n\t\tgrid-template-columns: 1fr;\n\t\tgrid-template-rows: auto 1fr;\n\t}\n\n\t.sidebar {\n\t\tposition: fixed;\n\t\tleft: -280px;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: 280px;\n\t\tz-index: 1000;\n\t\ttransition: left 0.3s ease;\n\t}\n\n\t.sidebar.open {\n\t\tleft: 0;\n\t}\n\n\t.sidebar-overlay {\n\t\tposition: fixed;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\tright: 0;\n\t\tbottom: 0;\n\t\tbackground: rgba(0, 0, 0, 0.5);\n\t\tz-index: 999;\n\t\tdisplay: none;\n\t}\n\n\t.sidebar-overlay.open {\n\t\tdisplay: block;\n\t}\n\n\t.ticker {\n\t\tposition: fixed;\n\t\tright: -320px;\n\t\ttop: 0;\n\t\tbottom: 0;\n\t\twidth: 320px;\n\t\tz-index: 1000;\n\t\ttransition: right 0.3s ease;\n\t}\n\n\t.ticker.open {\n\t\tright: 0;\n\t}\n\n\t.mobile-toggle {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\t}\n\n\t.header {\n\t\torder: -1;\n\t}\n\n\t.main {\n\t\tpadding: 1rem;\n\t\toverflow-y: auto;\n\t}\n\n\thtml, body {\n\t\toverflow: auto;\n\t}\n\n\t.trading-view {\n\t\tmin-height: 400px;\n\t}\n}\n\n@media (max-width: 768px) {\n\t.stats {\n\t\tgrid-template-columns: 1fr;\n\t}\n\n\t.stat-card {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tjustify-content: space-between;\n\t\tpadding: 0.875rem 1rem;\n\t}\n\n\t.stat-card__value {\n\t\tfont-size: 1.25rem;\n\t\tmargin-bottom: 0;\n\t}\n\n\t.stat-card__label {\n\t\tmargin-bottom: 0;\n\t}\n\n\t.stat-card__change {\n\t\tmargin-left: auto;\n\t\tpadding-left: 1rem;\n\t}\n\n\t.header__search {\n\t\twidth: 100%;\n\t\torder: 1;\n\t}\n\n\t.header__actions {\n\t\twidth: 100%;\n\t\tjustify-content: space-between;\n\t}\n\n\t.trading-view__header {\n\t\tpadding: 0.75rem 1rem;\n\t}\n\n\t.trading-view__tools {\n\t\tdisplay: none;\n\t}\n\n\t.order-panel__form {\n\t\tflex-direction: column;\n\t}\n\n\t.order-input {\n\t\twidth: 100%;\n\t}\n\n\t.order-slider {\n\t\twidth: 100%;\n\t\tjustify-content: space-between;\n\t}\n\n\t.order-btn {\n\t\twidth: 100%;\n\t}\n\n\t.ohlc {\n\t\tgap: 0.75rem;\n\t}\n\n\t.ohlc span {\n\t\tfont-size: 0.75rem;\n\t}\n}\n\n@media (max-width: 480px) {\n\t.main {\n\t\tpadding: 0.75rem;\n\t\tgap: 0.75rem;\n\t}\n\n\t.header__btn span {\n\t\tdisplay: none;\n\t}\n\n\t.trading-view__pair {\n\t\tgap: 0.5rem;\n\t}\n\n\t.trading-view__symbol {\n\t\tfont-size: 1rem;\n\t}\n\n\t.trading-view__price {\n\t\tfont-size: 1rem;\n\t}\n\n\t.timeframe {\n\t\tpadding: 0.375rem 0.5rem;\n\t\tfont-size: 0.75rem;\n\t}\n\n\t.trading-view__footer {\n\t\tpadding: 0.5rem 0.75rem;\n\t}\n\n\t.volume {\n\t\tdisplay: none;\n\t}\n}\n\n/* Modal Styles */\n.modal {\n\tposition: fixed;\n\ttop: 0;\n\tleft: 0;\n\tright: 0;\n\tbottom: 0;\n\tbackground: rgba(0, 0, 0, 0.7);\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tz-index: 2000;\n\topacity: 0;\n\tvisibility: hidden;\n\ttransition: all 0.3s ease;\n\tpadding: 1rem;\n}\n\n.modal.open {\n\topacity: 1;\n\tvisibility: visible;\n}\n\n.modal__content {\n\tbackground: var(--bg-secondary);\n\tborder: 1px solid var(--border);\n\tborder-radius: 16px;\n\twidth: 100%;\n\tmax-width: 420px;\n\tmax-height: 90vh;\n\toverflow-y: auto;\n\ttransform: scale(0.9) translateY(20px);\n\ttransition: transform 0.3s ease;\n}\n\n.modal.open .modal__content {\n\ttransform: scale(1) translateY(0);\n}\n\n.modal__content--small {\n\tmax-width: 340px;\n}\n\n.modal__header {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n\tpadding: 1.25rem 1.5rem;\n\tborder-bottom: 1px solid var(--border);\n}\n\n.modal__header h3 {\n\tfont-size: 1.125rem;\n\tfont-weight: 600;\n}\n\n.modal__close {\n\tbackground: none;\n\tborder: none;\n\tcolor: var(--text-secondary);\n\tcursor: pointer;\n\tpadding: 0.5rem;\n\tborder-radius: 8px;\n\ttransition: all 0.2s;\n}\n\n.modal__close:hover {\n\tbackground: var(--bg-tertiary);\n\tcolor: var(--text-primary);\n}\n\n.modal__close i {\n\twidth: 20px;\n\theight: 20px;\n}\n\n.modal__body {\n\tpadding: 1.5rem;\n}\n\n.modal__body--center {\n\ttext-align: center;\n}\n\n.modal__body--center h3 {\n\tmargin: 1rem 0 0.5rem;\n\tfont-size: 1.25rem;\n}\n\n.modal__body--center p {\n\tcolor: var(--text-secondary);\n\tmargin-bottom: 0.5rem;\n}\n\n.modal__field {\n\tmargin-bottom: 1.25rem;\n}\n\n.modal__field label {\n\tdisplay: block;\n\tfont-size: 0.875rem;\n\tcolor: var(--text-secondary);\n\tmargin-bottom: 0.5rem;\n}\n\n.modal__select,\n.modal__input {\n\twidth: 100%;\n\tbackground: var(--bg-tertiary);\n\tborder: 1px solid var(--border);\n\tborder-radius: 10px;\n\tpadding: 0.875rem 1rem;\n\tcolor: var(--text-primary);\n\tfont-size: 0.9375rem;\n\toutline: none;\n\ttransition: border-color 0.2s;\n}\n\n.modal__select:focus,\n.modal__input:focus {\n\tborder-color: var(--accent);\n}\n\n.modal__address {\n\tdisplay: flex;\n\tgap: 0.5rem;\n}\n\n.modal__address input {\n\tflex: 1;\n\tbackground: var(--bg-tertiary);\n\tborder: 1px solid var(--border);\n\tborder-radius: 10px;\n\tpadding: 0.875rem 1rem;\n\tcolor: var(--text-primary);\n\tfont-size: 0.875rem;\n\tfont-family: monospace;\n}\n\n.modal__copy {\n\tbackground: var(--accent);\n\tborder: none;\n\tborder-radius: 10px;\n\tpadding: 0 1rem;\n\tcolor: var(--bg-primary);\n\tcursor: pointer;\n\ttransition: all 0.2s;\n}\n\n.modal__copy:hover {\n\tbackground: var(--accent-hover);\n}\n\n.modal__copy i {\n\twidth: 18px;\n\theight: 18px;\n}\n\n.modal__qr {\n\tdisplay: flex;\n\tjustify-content: center;\n\tmargin: 1.5rem 0;\n}\n\n.modal__qr-placeholder {\n\twidth: 160px;\n\theight: 160px;\n\tbackground: white;\n\tborder-radius: 4px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tcolor: var(--bg-primary);\n\tfont-weight: 600;\n}\n\n.modal__warning {\n\tdisplay: flex;\n\talign-items: flex-start;\n\tgap: 0.75rem;\n\tbackground: rgba(255, 107, 107, 0.1);\n\tborder: 1px solid rgba(255, 107, 107, 0.3);\n\tborder-radius: 10px;\n\tpadding: 1rem;\n\tfont-size: 0.8125rem;\n\tcolor: var(--red);\n}\n\n.modal__warning i {\n\twidth: 18px;\n\theight: 18px;\n\tflex-shrink: 0;\n\tmargin-top: 2px;\n}\n\n.modal__actions {\n\tdisplay: flex;\n\tgap: 0.75rem;\n\tmargin-top: 1.5rem;\n}\n\n.modal__btn {\n\tflex: 1;\n\tpadding: 0.875rem 1.5rem;\n\tborder: none;\n\tborder-radius: 10px;\n\tfont-weight: 600;\n\tfont-size: 0.9375rem;\n\tcursor: pointer;\n\ttransition: all 0.2s;\n}\n\n.modal__btn--cancel {\n\tbackground: var(--bg-tertiary);\n\tcolor: var(--text-primary);\n}\n\n.modal__btn--cancel:hover {\n\tbackground: var(--border);\n}\n\n.modal__btn--confirm {\n\tbackground: var(--accent);\n\tcolor: var(--bg-primary);\n}\n\n.modal__btn--confirm:hover {\n\tbackground: var(--accent-hover);\n}\n\n/* Order Summary */\n.order-summary {\n\tbackground: var(--bg-tertiary);\n\tborder-radius: 12px;\n\tpadding: 1rem;\n}\n\n.order-summary__row {\n\tdisplay: flex;\n\tjustify-content: space-between;\n\tpadding: 0.625rem 0;\n\tborder-bottom: 1px solid var(--border);\n\tfont-size: 0.9375rem;\n}\n\n.order-summary__row:last-child {\n\tborder-bottom: none;\n}\n\n.order-summary__row--total {\n\tmargin-top: 0.5rem;\n\tpadding-top: 1rem;\n\tborder-top: 1px solid var(--border);\n\tfont-weight: 600;\n\tfont-size: 1rem;\n}\n\n.order-summary__value {\n\tfont-weight: 500;\n}\n\n.order-summary__value--buy {\n\tcolor: var(--green);\n}\n\n.order-summary__value--sell {\n\tcolor: var(--red);\n}\n\n/* Success Icon */\n.success-icon {\n\twidth: 72px;\n\theight: 72px;\n\tbackground: rgba(14, 203, 129, 0.15);\n\tborder-radius: 8px;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tmargin: 0 auto;\n}\n\n.success-icon i {\n\twidth: 40px;\n\theight: 40px;\n\tcolor: var(--green);\n}\n\n.success-order-id {\n\tfont-family: monospace;\n\tbackground: var(--bg-tertiary);\n\tpadding: 0.5rem 1rem;\n\tborder-radius: 8px;\n\tdisplay: inline-block;\n\tmargin: 1rem 0 1.5rem;\n}\n\n/* Toast Notification */\n.toast {\n\tposition: fixed;\n\tbottom: 2rem;\n\tleft: 50%;\n\ttransform: translateX(-50%) translateY(100px);\n\tbackground: var(--bg-secondary);\n\tborder: 1px solid var(--border);\n\tborder-radius: 12px;\n\tpadding: 1rem 1.5rem;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: 0.75rem;\n\tz-index: 3000;\n\topacity: 0;\n\ttransition: all 0.3s ease;\n}\n\n.toast.show {\n\topacity: 1;\n\ttransform: translateX(-50%) translateY(0);\n}\n\n.toast i {\n\twidth: 20px;\n\theight: 20px;\n\tcolor: var(--green);\n}"}],"folders":[]},"variants":null,"createdAt":"2026-02-03T23:13:12.969Z","updatedAt":"2026-03-11T10:45:53.062Z","hasThumbnail":true}}

Deposit Funds

Confirm Order

Order Placed Successfully!