Trovatrading - v0 by Vercel

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Trading Dashboard · Realistic UI/UX</title>  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> <style> /* ---------- GLOBAL ---------- */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; } body { background: #0b0e14; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; } /* ---------- DASHBOARD CARD (main container) ---------- */ .dashboard { max-width: 1440px; width: 100%; background: #13171f; border-radius: 32px; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.02); padding: 24px 28px 28px 28px; backdrop-filter: blur(2px); transition: all 0.2s ease; } /* ---------- TYPOGRAPHY & COLORS ---------- */ :root { --bg-dark: #0b0e14; --panel: #1a1f2b; --panel-light: #232a38; --border: #2c3444; --text-primary: #eef2f6; --text-secondary: #8b95a9; --text-muted: #5d677b; --green: #0ecb81; --green-bg: rgba(14, 203, 129, 0.1); --red: #f6465d; --red-bg: rgba(246, 70, 93, 0.1); --accent: #f0b90b; --accent-bg: rgba(240, 185, 11, 0.08); --blue: #3b7cff; } /* ---------- HEADER ---------- */ .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; } .logo-area { display: flex; align-items: center; gap: 14px; } .logo-icon { background: linear-gradient(135deg, #f0b90b, #e6a800); width: 42px; height: 42px; border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #0b0e14; font-size: 24px; font-weight: 700; box-shadow: 0 8px 20px rgba(240, 185, 11, 0.25); } .logo-text { font-size: 22px; font-weight: 700; letter-spacing: -0.5px; color: var(--text-primary); } .logo-text span { color: var(--accent); } .header-actions { display: flex; align-items: center; gap: 18px; } .balance-badge { background: var(--panel); padding: 8px 20px; border-radius: 40px; border: 1px solid var(--border); display: flex; align-items: center; gap: 12px; font-weight: 500; } .balance-label { color: var(--text-secondary); font-size: 14px; } .balance-amount { color: var(--text-primary); font-weight: 600; font-size: 16px; letter-spacing: 0.2px; } .balance-amount i { color: var(--green); font-size: 12px; margin-left: 6px; } .avatar { width: 44px; height: 44px; background: linear-gradient(145deg, #2a3345, #1e2533); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--accent); font-weight: 600; font-size: 18px; border: 1px solid var(--border); cursor: pointer; transition: 0.2s; } .avatar:hover { border-color: var(--accent); color: #fff; background: var(--accent-bg); } /* ---------- MAIN GRID ---------- */ .main-grid { display: grid; grid-template-columns: 1.4fr 0.9fr 1fr; gap: 22px; margin-bottom: 24px; } /* ---------- CARDS (common) ---------- */ .card { background: var(--panel); border-radius: 24px; padding: 20px 20px 18px 20px; border: 1px solid var(--border); box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.5); transition: 0.2s; } .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .card-header h3 { font-size: 16px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.3px; text-transform: uppercase; } .card-header i { color: var(--text-muted); font-size: 18px; cursor: pointer; transition: 0.2s; } .card-header i:hover { color: var(--text-primary); } /* ---------- CHART PLACEHOLDER (candlestick style) ---------- */ .chart-container { position: relative; height: 180px; width: 100%; margin: 10px 0 16px 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; } .candle { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; position: relative; cursor: pointer; transition: 0.2s; } .candle .body { width: 100%; max-width: 14px; border-radius: 4px; background: var(--green); transition: 0.2s; } .candle .body.red { background: var(--red); } .candle .wick { width: 2px; height: 12px; background: var(--text-muted); border-radius: 2px; opacity: 0.6; } .candle:hover .body { filter: brightness(1.3); transform: scaleX(1.1); } .chart-labels { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 12px; font-weight: 500; letter-spacing: 0.3px; padding: 0 4px; } .price-tag { background: var(--panel-light); padding: 4px 12px; border-radius: 30px; color: var(--text-primary); font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; } .price-tag i { color: var(--green); font-size: 12px; } /* ---------- ORDER BOOK / WATCHLIST ---------- */ .watchlist-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .watchlist-item:last-child { border-bottom: none; } .pair-info { display: flex; flex-direction: column; gap: 4px; } .pair-name { font-weight: 600; color: var(--text-primary); font-size: 15px; } .pair-volume { font-size: 12px; color: var(--text-secondary); } .price-info { text-align: right; } .pair-price { font-weight: 600; color: var(--text-primary); font-size: 15px; margin-bottom: 4px; } .pair-change { font-size: 13px; font-weight: 500; padding: 2px 8px; border-radius: 20px; background: var(--green-bg); color: var(--green); display: inline-block; } .pair-change.negative { background: var(--red-bg); color: var(--red); } /* ---------- ORDER PANEL (buy/sell) ---------- */ .order-tabs { display: flex; gap: 8px; background: #0f131b; padding: 6px; border-radius: 40px; margin-bottom: 22px; } .order-tab { flex: 1; padding: 10px 0; border-radius: 30px; text-align: center; font-weight: 600; font-size: 15px; color: var(--text-secondary); cursor: pointer; transition: 0.2s; border: none; background: transparent; } .order-tab.active { background: var(--panel-light); color: var(--text-primary); box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); } .order-tab.buy.active { background: var(--green-bg); color: var(--green); } .order-tab.sell.active { background: var(--red-bg); color: var(--red); } .input-group { margin-bottom: 18px; } .input-label { display: flex; justify-content: space-between; color: var(--text-secondary); font-size: 13px; font-weight: 500; margin-bottom: 8px; } .input-field { width: 100%; background: #0f131b; border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; color: var(--text-primary); font-size: 15px; font-weight: 500; outline: none; transition: 0.2s; } .input-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(240, 185, 11, 0.1); } .input-field::placeholder { color: var(--text-muted); font-weight: 400; } .input-hint { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 12px; margin-top: 8px; } .btn-primary { width: 100%; background: var(--accent); border: none; border-radius: 16px; padding: 16px; font-size: 16px; font-weight: 700; color: #0b0e14; cursor: pointer; transition: 0.2s; box-shadow: 0 10px 20px -6px rgba(240, 185, 11, 0.3); margin-top: 8px; letter-spacing: 0.3px; } .btn-primary:hover { background: #ffca1a; transform: scale(1.01); } .btn-primary:active { transform: scale(0.98); } /* ---------- BOTTOM SECTION (positions + news) ---------- */ .bottom-grid { display: grid; grid-template-columns: 1.6fr 0.9fr; gap: 22px; margin-top: 6px; } .positions-table { width: 100%; border-collapse: collapse; } .positions-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; padding-bottom: 14px; } .positions-table td { padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); font-size: 14px; font-weight: 500; color: var(--text-primary); } .positions-table tr:last-child td { border-bottom: none; } .symbol-cell { display: flex; align-items: center; gap: 10px; } .symbol-icon { width: 32px; height: 32px; border-radius: 10px; background: #1f2633; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent); font-size: 14px; border: 1px solid var(--border); } .pnl-positive { color: var(--green); font-weight: 600; } .pnl-negative { color: var(--red); font-weight: 600; } .news-item { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.04); } .news-item:last-child { border-bottom: none; } .news-time { color: var(--text-muted); font-size: 12px; font-weight: 500; min-width: 52px; } .news-text { color: var(--text-secondary); font-size: 13px; line-height: 1.4; font-weight: 400; } .news-text strong { color: var(--text-primary); font-weight: 600; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 1100px) { .main-grid { grid-template-columns: 1fr 1fr; } .bottom-grid { grid-template-columns: 1fr; } } @media (max-width: 700px) { .dashboard { padding: 16px; } .main-grid { grid-template-columns: 1fr; gap: 16px; } .header { flex-direction: column; align-items: flex-start; gap: 16px; } .header-actions { width: 100%; justify-content: space-between; } .balance-badge { padding: 6px 14px; } .logo-text { font-size: 18px; } } /* micro-interactions */ .clickable { cursor: pointer; transition: all 0.2s ease; } .clickable:hover { opacity: 0.85; } .badge { background: var(--panel-light); border-radius: 20px; padding: 2px 10px; font-size: 12px; color: var(--text-secondary); } .text-green { color: var(--green); } .text-red { color: var(--red); } </style> </head> <body> <div class="dashboard">  <div class="header"> <div class="logo-area"> <div class="logo-icon">T</div> <div class="logo-text">Trade<span>Flow</span></div> </div> <div class="header-actions"> <div class="balance-badge"> <span class="balance-label">Portfolio</span> <span class="balance-amount">$24,873.42 <i class="fas fa-chevron-up"></i></span> </div> <div class="avatar">JD</div> </div> </div>  <div class="main-grid">  <div class="card"> <div class="card-header"> <h3>BTC / USDT · 1H</h3> <i class="fas fa-ellipsis-h"></i> </div> <div class="price-tag" style="margin-bottom: 10px;"> $63,842.10 <i class="fas fa-caret-up"></i> <span style="color: var(--green); font-size: 13px; margin-left: 6px;">+2.4%</span> </div>  <div class="chart-container" id="candleChart">  </div> <div class="chart-labels"> <span>09:00</span> <span>12:00</span> <span>15:00</span> <span>18:00</span> <span>21:00</span> </div> </div>  <div class="card"> <div class="card-header"> <h3>Watchlist</h3> <i class="fas fa-plus clickable"></i> </div> <div class="watchlist-item"> <div class="pair-info"> <span class="pair-name">ETH / USDT</span> <span class="pair-volume">Vol 1.2B</span> </div> <div class="price-info"> <div class="pair-price">$3,420.55</div> <span class="pair-change">+1.8%</span> </div> </div> <div class="watchlist-item"> <div class="pair-info"> <span class="pair-name">SOL / USDT</span> <span class="pair-volume">Vol 432M</span> </div> <div class="price-info"> <div class="pair-price">$148.22</div> <span class="pair-change negative">-0.6%</span> </div> </div> <div class="watchlist-item"> <div class="pair-info"> <span class="pair-name">BNB / USDT</span> <span class="pair-volume">Vol 289M</span> </div> <div class="price-info"> <div class="pair-price">$586.30</div> <span class="pair-change">+0.9%</span> </div> </div> <div class="watchlist-item"> <div class="pair-info"> <span class="pair-name">XRP / USDT</span> <span class="pair-volume">Vol 198M</span> </div> <div class="price-info"> <div class="pair-price">$0.624</div> <span class="pair-change negative">-1.2%</span> </div> </div> </div>  <div class="card"> <div class="order-tabs"> <button class="order-tab buy active" id="buyTab">Buy</button> <button class="order-tab sell" id="sellTab">Sell</button> </div> <div class="input-group"> <div class="input-label"> <span>Price</span> <span class="badge">Market</span> </div> <input type="text" class="input-field" value="63,842.10" placeholder="0.00" id="priceInput"> </div> <div class="input-group"> <div class="input-label"> <span>Amount</span> <span>BTC</span> </div> <input type="text" class="input-field" placeholder="0.00" id="amountInput" value="0.05"> <div class="input-hint"> <span>≈ $3,192.10</span> <span>Max 2.45 BTC</span> </div> </div> <button class="btn-primary" id="orderBtn">Buy BTC</button> <div class="input-hint" style="margin-top: 14px; justify-content: center; gap: 20px;"> <span><i class="fas fa-wallet"></i> Available 2.45 BTC</span> <span><i class="fas fa-percent"></i> Fee 0.1%</span> </div> </div> </div>  <div class="bottom-grid">  <div class="card"> <div class="card-header"> <h3>Open Positions</h3> <i class="fas fa-sliders-h clickable"></i> </div> <table class="positions-table"> <thead> <tr> <th>Symbol</th> <th>Size</th> <th>Entry</th> <th>Mark</th> <th>PNL</th> </tr> </thead> <tbody> <tr> <td> <div class="symbol-cell"> <div class="symbol-icon">B</div> <span>BTC/USDT</span> </div> </td> <td>0.15</td> <td>$62,100</td> <td>$63,842</td> <td class="pnl-positive">+$261.30</td> </tr> <tr> <td> <div class="symbol-cell"> <div class="symbol-icon">E</div> <span>ETH/USDT</span> </div> </td> <td>2.40</td> <td>$3,520</td> <td>$3,420</td> <td class="pnl-negative">-$240.00</td> </tr> <tr> <td> <div class="symbol-cell"> <div class="symbol-icon">S</div> <span>SOL/USDT</span> </div> </td> <td>18.0</td> <td>$152.20</td> <td>$148.22</td> <td class="pnl-negative">-$71.64</td> </tr> </tbody> </table> </div>  <div class="card"> <div class="card-header"> <h3>Market Insights</h3> <i class="fas fa-newspaper clickable"></i> </div> <div class="news-item"> <div class="news-time">09:42</div> <div class="news-text"><strong>BTC</strong> breaks above $63.8k as ETF inflows surge</div> </div> <div class="news-item"> <div class="news-time">08:15</div> <div class="news-text"><strong>ETH</strong> volatility expected ahead of upgrade</div> </div> <div class="news-item"> <div class="news-time">07:30</div> <div class="news-text">Fed rate decision: <strong>crypto markets</strong> brace for impact</div> </div> <div class="news-item"> <div class="news-time">06:55</div> <div class="news-text"><strong>Solana</strong> network activity hits 30-day high</div> </div> </div> </div> </div>  <script> (function() { // ---- Generate realistic candlestick chart (random-ish but fixed seed style) ---- const chartContainer = document.getElementById('candleChart'); if (chartContainer) { const candleCount = 32; // number of candles const basePrice = 63800; // around current price let candles = []; // create simulated price movement (random walk) let lastClose = basePrice; for (let i = 0; i < candleCount; i++) { const volatility = 160 + Math.random() * 180; // price range per candle const open = lastClose + (Math.random() - 0.5) * volatility * 0.6; const close = open + (Math.random() - 0.5) * volatility * 1.2; const high = Math.max(open, close) + Math.random() * 70; const low = Math.min(open, close) - Math.random() * 70; const isGreen = close >= open; candles.push({ open, high, low, close, isGreen }); lastClose = close; } // find min/max for scaling const allHighs = candles.map(c => c.high); const allLows = candles.map(c => c.low); const maxPrice = Math.max(...allHighs); const minPrice = Math.min(...allLows); const range = maxPrice - minPrice || 1; // clear container chartContainer.innerHTML = ''; // build each candle candles.forEach((candle) => { const candleEl = document.createElement('div'); candleEl.className = 'candle'; // height of body as percentage of chart height (max 100%) const bodyHigh = Math.max(candle.open, candle.close); const bodyLow = Math.min(candle.open, candle.close); const bodyHeightPercent = ((bodyHigh - bodyLow) / range) * 100; const bodyBottomPercent = ((bodyLow - minPrice) / range) * 100; // wick height (full high-low range) const wickHeightPercent = ((candle.high - candle.low) / range) * 100; const wickBottomPercent = ((candle.low - minPrice) / range) * 100; // wick element (thin line) const wick = document.createElement('div'); wick.className = 'wick'; wick.style.height = `${Math.max(wickHeightPercent, 4)}%`; wick.style.position = 'absolute'; wick.style.bottom = `${wickBottomPercent}%`; wick.style.left = '50%'; wick.style.transform = 'translateX(-50%)'; wick.style.width = '2px'; wick.style.background = candle.isGreen ? '#0ecb81' : '#f6465d'; wick.style.opacity = '0.5'; wick.style.borderRadius = '2px'; // body element const body = document.createElement('div'); body.className = 'body'; body.style.height = `${Math.max(bodyHeightPercent, 6)}%`; body.style.width = '100%'; body.style.maxWidth = '14px'; body.style.borderRadius = '4px'; body.style.background = candle.isGreen ? '#0ecb81' : '#f6465d'; body.style.position = 'absolute'; body.style.bottom = `${bodyBottomPercent}%`; body.style.left = '0'; body.style.right = '0'; body.style.margin = '0 auto'; body.style.transition = '0.2s'; body.style.boxShadow = candle.isGreen ? '0 0 8px rgba(14, 203, 129, 0.4)' : '0 0 8px rgba(246, 70, 93, 0.4)'; candleEl.style.position = 'relative'; candleEl.style.height = '100%'; candleEl.style.flex = '1'; candleEl.style.margin = '0 2px'; candleEl.appendChild(wick); candleEl.appendChild(body); chartContainer.appendChild(candleEl); }); } // ---- Buy / Sell tab switching ---- const buyTab = document.getElementById('buyTab'); const sellTab = document.getElementById('sellTab'); const orderBtn = document.getElementById('orderBtn'); const amountInput = document.getElementById('amountInput'); if (buyTab && sellTab && orderBtn) { buyTab.addEventListener('click', function() { buyTab.classList.add('active'); sellTab.classList.remove('active'); orderBtn.textContent = 'Buy BTC'; orderBtn.style.background = 'var(--accent)'; orderBtn.style.color = '#0b0e14'; orderBtn.style.boxShadow = '0 10px 20px -6px rgba(240, 185, 11, 0.3)'; }); sellTab.addEventListener('click', function() { sellTab.classList.add('active'); buyTab.classList.remove('active'); orderBtn.textContent = 'Sell BTC'; orderBtn.style.background = '#f6465d'; orderBtn.style.color = '#fff'; orderBtn.style.boxShadow = '0 10px 20px -6px rgba(246, 70, 93, 0.4)'; }); } // ---- interactive amount change hint ---- if (amountInput) { amountInput.addEventListener('input', function(e) { const val = parseFloat(e.target.value) || 0; const price = 63842.10; // simulated current price const approx = val * price; const hintSpan = document.querySelector('.input-hint span:first-child'); if (hintSpan) { hintSpan.textContent = `≈ $${approx.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`; } }); } // ---- order button click (demo) ---- if (orderBtn) { orderBtn.addEventListener('click', function() { const isBuy = orderBtn.textContent.includes('Buy'); const amount = amountInput ? amountInput.value : '0.05'; alert(`${isBuy ? 'Buy' : 'Sell'} order placed for ${amount} BTC at market price.\n(Demo — no real transaction)`); }); } // ---- small micro interaction on watchlist / news ---- document.querySelectorAll('.watchlist-item, .news-item').forEach(el => { el.classList.add('clickable'); }); })(); </script> </body> </html>