diff --git a/css/style.css b/css/style.css index e39889d..aac9d1b 100644 --- a/css/style.css +++ b/css/style.css @@ -329,7 +329,62 @@ a:hover { color: #fff; text-shadow: none; } } -/* === NAV WALLET BUTTON === */ +/* === NAV SOL PRICE TICKER === */ +.nav-sol-price { + display: flex; + align-items: center; + gap: 0.35rem; + padding: 0.35rem 0.75rem; + font-family: var(--font-mono); + font-size: 0.7rem; + font-weight: 600; + letter-spacing: 1px; + color: #9945FF; + background: rgba(153, 69, 255, 0.08); + border: 1px solid rgba(153, 69, 255, 0.25); + border-radius: 4px; + margin-right: 0.4rem; + white-space: nowrap; + cursor: default; + transition: all 0.3s ease; +} + +.nav-sol-price:hover { + background: rgba(153, 69, 255, 0.15); + border-color: rgba(153, 69, 255, 0.4); +} + +.sol-price-icon { + font-size: 0.75rem; + color: #9945FF; +} + +.sol-price-label { + color: rgba(255, 255, 255, 0.5); + font-size: 0.6rem; + letter-spacing: 2px; +} + +.sol-price-value { + color: #e0e0e0; + font-weight: 700; +} + +.sol-price-change { + font-size: 0.6rem; + font-weight: 600; + letter-spacing: 0.5px; +} + +.sol-price-change.up { + color: #14F195; +} + +.sol-price-change.down { + color: #ff4444; +} + + .nav-wallet-wrap { position: relative; display: flex; @@ -1888,6 +1943,17 @@ a:hover { color: #fff; text-shadow: none; } opacity: 1; } + /* SOL price ticker mobile */ + .nav-sol-price { + width: calc(100% - 4rem); + justify-content: center; + padding: 0.5rem 1rem; + margin: 0 2rem; + border-bottom: 1px solid var(--border); + border-radius: 0; + margin-bottom: 0; + } + /* Wallet button mobile */ .nav-wallet-wrap { position: static; diff --git a/js/nav.js b/js/nav.js index 62a9e11..a402ab4 100644 --- a/js/nav.js +++ b/js/nav.js @@ -86,7 +86,8 @@ // Bind mobile dropdown toggles after rendering initMobileDropdowns(); - // Inject wallet button after nav loads + // Inject SOL price ticker and wallet button after nav loads + injectSolPrice(); injectWalletButton(); } catch (err) { console.warn('Nav load failed, keeping existing:', err); @@ -150,6 +151,59 @@ } } + // ─── SOL Price Ticker ────────────────────────────────────── + function injectSolPrice() { + const navContainer = document.querySelector('.nav-container'); + if (!navContainer || document.getElementById('navSolPrice')) return; + + const wrap = document.createElement('div'); + wrap.id = 'navSolPrice'; + wrap.className = 'nav-sol-price'; + wrap.innerHTML = ` + + SOL + -- + + `; + + // Insert before wallet wrap or nav-status + const walletWrap = document.getElementById('navWalletWrap'); + const navStatus = document.querySelector('.nav-status'); + const insertBefore = walletWrap || navStatus; + if (insertBefore) { + navContainer.insertBefore(wrap, insertBefore); + } else { + navContainer.appendChild(wrap); + } + + fetchSolPrice(); + setInterval(fetchSolPrice, 30000); + } + + async function fetchSolPrice() { + const priceEl = document.getElementById('solPriceValue'); + const changeEl = document.getElementById('solPriceChange'); + if (!priceEl || !changeEl) return; + + try { + const res = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=solana&vs_currencies=usd&include_24hr_change=true'); + if (!res.ok) throw new Error(res.status); + const data = await res.json(); + const price = data.solana.usd; + const change = data.solana.usd_24h_change; + + priceEl.textContent = '$' + price.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); + + const sign = change >= 0 ? '+' : ''; + const arrow = change >= 0 ? '▲' : '▼'; + changeEl.textContent = `${arrow} ${sign}${change.toFixed(1)}%`; + changeEl.className = 'sol-price-change ' + (change >= 0 ? 'up' : 'down'); + } catch (e) { + console.warn('SOL price fetch failed:', e); + } + } + + // ─── Wallet Button Injection ──────────────────────────────── function injectWalletButton() { const navContainer = document.querySelector('.nav-container');