I want to redesign the frontend so the 3 categories for market cap section should be horiztional like with black categories with blue around the edges with modern looking like year 2050, , modernize the design to look like 2050 with a grid in the background thats black, Blue nice elements, modern text, the token cards will be in each section (Market Cap ≤ $1M
, $1M < Market Cap ≤ $5M
$5M < Market Cap ≤ $20M
 Where you can scroll with a blue scroll bar on the side of each panel token cards should show the same in each just modernized. Use sites like  Jupiter Exchange as a example for modern styling or sites that are modern SAAS.  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quant Tools</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    <style>
        :root {
            --primary-color: #1e3a8a;
            --secondary-color: #34c759;
            --danger-color: #ef4444;
            --background-color: #f4f4f9;
            --surface-color: #ffffff;
            --text-color: #1a202c;
            --border-color: #d1d5db;
            --hover-color: #e2e8f0;
            --font-family-primary: 'Roboto', sans-serif;
            --font-family-secondary: 'DM Sans', sans-serif;
            --link-color-dark: #93c5fd;
            --hover-dark-mode: #2b2b2b;
            --background-dark-mode: #121212;
            --surface-dark-mode: #1e1e1e;
            --text-dark-mode: #e5e7eb;
            --border-dark-mode: #333;
        }

        body[data-theme='dark'] {
            --background-color: var(--background-dark-mode);
            --surface-color: var(--surface-dark-mode);
            --text-color: var(--text-dark-mode);
            --border-color: var(--border-dark-mode);
            --hover-color: var(--hover-dark-mode);
            --primary-color: #2a5eab;
        }

        body {
            font-family: var(--font-family-primary);
            margin: 0;
            padding: 0;
            background-color: var(--background-color);
            color: var(--text-color);
            line-height: 1.6;
            transition: background-color 0.3s, color 0.3s;
        }

        .container {
            max-width: 1400px;
            margin: 30px auto;
            padding: 20px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            border-radius: 15px;
            background: linear-gradient(to right, #f5f7fa, #c3cfe2);
        }

        body[data-theme='dark'] .container {
            background: linear-gradient(to right, var(--surface-dark-mode), var(--hover-dark-mode));
        }

        h1 {
            text-align: center;
            color: var(--primary-color);
            margin-bottom: 30px;
            font-size: 2.5rem;
            font-weight: 700;
        }

        h2 {
            color: var(--primary-color);
            margin-top: 30px;
            font-size: 2rem;
            font-weight: 600;
        }

        h2 span {
            font-weight: bold;
        }

        .controls {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            gap: 10px;
        }

        #refreshButton {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 12px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 500;
            transition: background-color 0.3s, box-shadow 0.3s;
            outline: none;
            box-shadow: 0 4px 6px rgba(48, 56, 69, 0.12);
        }

        #refreshButton:hover {
            background-color: #162B67;
            box-shadow: 0 6px 12px rgba(30, 58, 138, 0.2);
        }

        .theme-toggle {
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            padding: 10px;
            background-color: var(--surface-color);
            border: 1px solid var(--border-color);
            border-radius: 12px;
            transition: background-color 0.3s, box-shadow 0.3s, transform 0.2s;
        }

        .theme-toggle:hover {
            background-color: var(--hover-color);
            transform: translateY(-2px);
        }

        .theme-toggle i {
            font-size: 1.5rem;
            transition: opacity 0.3s;
        }

        .theme-toggle .fa-sun {
            opacity: 1;
        }

        .theme-toggle .fa-moon {
            opacity: 0;
        }

        body[data-theme='dark'] .theme-toggle .fa-sun {
            opacity: 0;
        }

        body[data-theme='dark'] .theme-toggle .fa-moon {
            opacity: 1;
        }

        .table-container {
            overflow-x: auto;
            background-color: var(--surface-color);
            border-radius: 12px;
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
            width: 100%;
        }

        table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        th, td {
            padding: 12px 8px;
            text-align: center;
            border-bottom: 1px solid var(--border-color);
            font-size: 0.9rem;
            transition: background-color 0.3s;
        }

        th {
            background-color: var(--primary-color);
            color: #fff;
            font-weight: 600;
            position: sticky;
            top: 0;
            z-index: 10;
            cursor: pointer;
        }

        th:hover {
            background-color: #162B67;
        }

        tr:last-child td {
            border-bottom: none;
        }

        tr:hover td {
            background-color: var(--hover-color);
        }

        .progress-bar {
            position: relative;
            background-color: var(--border-color);
            border-radius: 5px;
            height: 10px;
            width: 80%;
            margin: 0 auto;
            overflow: hidden;
        }

        .progress {
            background-color: var(--primary-color);
            height: 100%;
            transition: width 0.3s ease;
        }

        .symbol {
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            font-weight: 700;
        }

        .symbol img {
            margin-right: 8px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
        }

        .links {
            display: flex;
            justify-content: center;
            gap: 4px;
            margin-top: 5px;
        }

        .link-button, .social-icon {
            color: var(--primary-color);
            cursor: pointer;
            font-size: 0.75rem;
            transition: color 0.3s;
            text-decoration: none;
            white-space: nowrap;
        }

        .link-button:hover, .social-icon:hover {
            color: #162B67;
        }

        .social-icon {
            background-color: var(--surface-color);
            border-radius: 50%;
            width: 34px;
            height: 34px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .buy-button-container {
            text-align: center;
            position: relative;
        }

        .buy-button {
            background: linear-gradient(to right, #34c759, #28a745);
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 20px;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 700;
            transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
            outline: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            text-decoration: none;
        }

        .buy-button:hover {
            background: linear-gradient(to right, #28a745, #218838);
            transform: translateY(-2px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }

        .small-text {
            font-size: 0.75rem;
            color: var(--text-color);
        }

        #lastUpdate {
            text-align: center;
            margin-top: 20px;
            font-size: 0.875rem;
            color: var(--text-color);
        }

        .slider-container, .toggle-container {
            display: flex;
            align-items: center;
            margin-right: 10px;
        }

        .slider-container label, .toggle-container label {
            margin-right: 10px;
        }

        #pumpScore {
            width: 200px;
        }

        .hide-token {
            position: absolute;
            top: 5px;
            right: 5px;
            cursor: pointer;
            opacity: 0.3;
            transition: opacity 0.3s;
        }

        .hide-token:hover {
            opacity: 1;
        }

        .liquidity-status {
            font-size: 1rem;
            margin-right: 5px;
        }

        .token-details {
            font-size: 0.8rem;
            margin-top: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-bottom: 10px;  /* Add margin to create space between rows */
        }

        .address-box {
            background-color: var(--surface-color);
            border: 1px solid var(--border-color);
            border-radius: 5px;
            padding: 5px 10px;
            font-family: monospace;
        }

        .copy-button {
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0.8rem;
            transition: background-color 0.3s;
        }

        .copy-button:hover {
            background-color: #162B67;
        }

        .copy-button i {
            display: none;
        }

        @media (max-width: 768px) {
            .controls {
                flex-direction: column;
            }
            #refreshButton, .theme-toggle {
                width: 100%;
            }
        }

        .market-cap-gain {
            color: var(--secondary-color);
            cursor: pointer;
            font-weight: bold;
        }

        .market-cap-tooltip, .time-tooltip {
            position: absolute;
            display: none;
            background-color: rgba(0, 0, 0, 0.8);
            color: #fff;
            padding: 8px;
            border-radius: 8px;
            font-size: 0.8rem;
            max-width: 300px;
            text-align: center;
            z-index: 10;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        }

        .market-cap-tooltip::after, .time-tooltip::after {
            content: "";
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            border-width: 6px;
            border-style: solid;
            border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
        }

        .time-ago:hover {
            text-decoration: underline;
        }

        .positive {
            color: var(--secondary-color);
        }

        .negative {
            color: var(--danger-color);
        }
    </style>
</head>
<body data-theme="light">
    <div class="container">
        <h1>Super Secret Pump Bot</h1>
        <div class="controls">
            <div class="slider-container">
                <label for="pumpScore">Pump Score: <span id="pumpScoreValue">5.0</span></label>
                <input type="range" id="pumpScore" min="1" max="10" value="5" step="0.1">
            </div>
            <div class="toggle-container">
                <label for="showLockedLiquidity">Show Locked Liquidity</label>
                <input type="checkbox" id="showLockedLiquidity" checked>
            </div>
            <button id="refreshButton">Refresh Data</button>
            <div class="theme-toggle" onclick="toggleTheme()">
                <i class="fas fa-sun"></i>
                <i class="fas fa-moon"></i>
            </div>
        </div>

        <div class="table-section">
            <h2>Market Cap ≤ <span>$1M</span></h2>
            <div class="table-container">
                <table id="tokenTable1m">
                    <thead>
                        <tr>
                            <th data-sort="symbol">Token</th>
                            <th data-sort="market_cap">Market Cap</th>
                            <th data-sort="lowest_market_cap">Lowest Market Cap</th>
                            <th data-sort="pump_score">Pump Score</th>
                            <th data-sort="volume">Volume (5m)</th>
                            <th data-sort="price_change_percent5m">Price Change (5m)</th>
                            <th data-sort="age">Age</th>
                            <th>Quick Buy</th>
                        </tr>
                    </thead>
                    <tbody id="tokenBody1m"></tbody>
                </table>
            </div>
        </div>

        <div class="table-section">
            <h2><span>$1M</span> &lt; Market Cap ≤ <span>$5M</span></h2>
            <div class="table-container">
                <table id="tokenTable5m">
                    <thead>
                        <tr>
                            <th data-sort="symbol">Token</th>
                            <th data-sort="market_cap">Market Cap</th>
                            <th data-sort="lowest_market_cap">Lowest Market Cap</th>
                            <th data-sort="pump_score">Pump Score</th>
                            <th data-sort="volume">Volume (5m)</th>
                            <th data-sort="price_change_percent5m">Price Change (5m)</th>
                            <th data-sort="age">Age</th>
                            <th>Quick Buy</th>
                        </tr>
                    </thead>
                    <tbody id="tokenBody5m"></tbody>
                </table>
            </div>
        </div>

        <div class="table-section">
            <h2><span>$5M</span> &lt; Market Cap ≤ <span>$20M</span></h2>
            <div class="table-container">
                <table id="tokenTable20m">
                    <thead>
                        <tr>
                            <th data-sort="symbol">Token</th>
                            <th data-sort="market_cap">Market Cap</th>
                            <th data-sort="lowest_market_cap">Lowest Market Cap</th>
                            <th data-sort="pump_score">Pump Score</th>
                            <th data-sort="volume">Volume (5m)</th>
                            <th data-sort="price_change_percent5m">Price Change (5m)</th>
                            <th data-sort="age">Age</th>
                            <th>Quick Buy</th>
                        </tr>
                    </thead>
                    <tbody id="tokenBody20m"></tbody>
                </table>
            </div>
        </div>

        <div id="lastUpdate"></div>
    </div>

    <script>
        let currentSort = { column: 'pump_score', direction: 'desc' };
        let tokens = [];
        let lowestMarketCapData = {};
        let currentPumpScore = 5;
        let showLockedLiquidity = true;

        const logoCache = new Map();

        function toggleTheme() {
            const body = document.body;
            const currentTheme = body.getAttribute('data-theme');
            const newTheme = currentTheme === 'light' ? 'dark' : 'light';
            body.setAttribute('data-theme', newTheme);

            const sunIcon = document.querySelector('.theme-toggle .fa-sun');
            const moonIcon = document.querySelector('.theme-toggle .fa-moon');

            if (newTheme === 'light') {
                sunIcon.style.display = 'block';
                moonIcon.style.display = 'none';
            } else {
                sunIcon.style.display = 'none';
                moonIcon.style.display = 'block';
            }
        }

        document.addEventListener('DOMContentLoaded', () => {
            const currentTheme = document.body.getAttribute('data-theme');
            const sunIcon = document.querySelector('.theme-toggle .fa-sun');
            const moonIcon = document.querySelector('.theme-toggle .fa-moon');
            if (currentTheme === 'light') {
                sunIcon.style.display = 'block';
                moonIcon.style.display = 'none';
            } else {
                sunIcon.style.display = 'none';
                moonIcon.style.display = 'block';
            }

            const pumpScoreSlider = document.getElementById('pumpScore');
            const pumpScoreValue = document.getElementById('pumpScoreValue');
            const lockedLiquidityToggle = document.getElementById('showLockedLiquidity');

            pumpScoreSlider.addEventListener('input', (event) => {
                currentPumpScore = parseFloat(event.target.value);
                pumpScoreValue.textContent = currentPumpScore.toFixed(1);
                updateTable();
            });
            lockedLiquidityToggle.addEventListener('change', (event) => {
                showLockedLiquidity = event.target.checked;
                updateTable();
            });

            updateTable();
        });

        async function fetchDexscreenerData(tokenAddress) {
            if (logoCache.has(tokenAddress)) {
                return logoCache.get(tokenAddress);
            }

            const url = `https://api.dexscreener.com/latest/dex/tokens/${tokenAddress}`;
            let attempts = 3;
            let delay = 500;
            while (attempts > 0) {
                try {
                    const response = await fetch(url);
                    if (response.status === 429) {
                        console.warn('Rate limited by Dexscreener. Retrying...');
                        await new Promise(resolve => setTimeout(resolve, delay));
                        attempts--;
                        delay *= 2;
                        continue;
                    }
                    const data = await response.json();

                    if ('pairs' in data && data.pairs.length > 0) {
                        const pair = data.pairs[0];
                        const logo = pair.info?.imageUrl || null;
                        logoCache.set(tokenAddress, logo);
                        return logo;
                    }
                    logoCache.set(tokenAddress, null);
                    return null;
                } catch (error) {
                    console.error(`Error fetching Dexscreener data for ${tokenAddress}:`, error);
                    logoCache.set(tokenAddress, null);
                    return null;
                }
            }
        }

        async function updateTable() {
            const url = `/get_tokens?pumpScore=${currentPumpScore}`;
            fetch(url)
                .then(response => response.json())
                .then(async data => {
                    tokens = data.tokens;
                    await updateLowestMarketCapData(tokens);
                    renderSections();
                    document.getElementById('lastUpdate').textContent = `Last updated: ${new Date().toLocaleString()}`;
                })
                .catch(error => {
                    console.error('Error:', error);
                    document.getElementById('lastUpdate').textContent = `Error updating: ${error.message}`;
                });
        }

        async function updateLowestMarketCapData(tokens) {
            for (const token of tokens) {
                const address = token.address;
                const currentMarketCap = parseFloat(token.market_cap) || 0;
                if (!lowestMarketCapData[address] || currentMarketCap < lowestMarketCapData[address].lowest_market_cap) {
                    lowestMarketCapData[address] = {
                        lowest_market_cap: currentMarketCap,
                        lowest_market_cap_time: Date.now() / 1000
                    };
                }

                if (!token.logo) {
                    token.logo = await fetchDexscreenerData(address);
                }
            }
        }

        function renderSections() {
            const tokenBody1m = document.getElementById('tokenBody1m');
            const tokenBody5m = document.getElementById('tokenBody5m');
            const tokenBody20m = document.getElementById('tokenBody20m');

            tokenBody1m.innerHTML = '';
            tokenBody5m.innerHTML = '';
            tokenBody20m.innerHTML = '';

            tokens.sort((a, b) => {
                const aValue = parseFloat(a[currentSort.column]) || 0;
                const bValue = parseFloat(b[currentSort.column]) || 0;
                return currentSort.direction === 'asc' ? aValue - bValue : bValue - aValue;
            });

            let hiddenTokens = JSON.parse(localStorage.getItem('hiddenTokens') || '[]');

            tokens.forEach(token => {
                if (token.pump_score >= currentPumpScore && !hiddenTokens.includes(token.address)) {
                    const age = Math.round((Date.now() / 1000 - (token.pool_creation_timestamp || 0)) / 60);
                    const days = Math.floor(age / (24 * 60));
                    const hours = Math.floor((age % (24 * 60)) / 60);
                    const minutes = age % 60;
                    const ageString = days > 0 ? `${days}d ${hours}h ${minutes}m` : hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;

                    const currentTime = new Date();
                    const address = token.address;
                    const lowestMarketCap = lowestMarketCapData[address]?.lowest_market_cap || 0;
                    const lowestMarketCapTime = lowestMarketCapData[address]?.lowest_market_cap_time ? new Date(lowestMarketCapData[address].lowest_market_cap_time * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : 'N/A';
                    const timeAgo = lowestMarketCapData[address]?.lowest_market_cap_time ? formatTimeAgo(currentTime - new Date(lowestMarketCapData[address].lowest_market_cap_time * 1000)) : '';

                    const currentMarketCap = parseFloat(token.market_cap) || 0;
                    const gain = ((currentMarketCap - lowestMarketCap) / lowestMarketCap * 100).toFixed(2);
                    const xMultiplier = (gain / 100) + 1; // Adjust xMultiplier calculation here
                    const gainText = gain > 0 ? `<span class="market-cap-gain" onmouseover="showTooltip(event, '${token.symbol}', ${gain}, ${lowestMarketCap}, '${timeAgo}', ${xMultiplier.toFixed(1)})" onmouseout="hideTooltip()">${gain}%</span>` : '';

                    const socialLinks = [];
                    if (token.website) {
                        socialLinks.push(`<a class="social-icon" href="${token.website}" target="_blank"><i class="fas fa-globe"></i></a>`);
                    }
                    if (token.twitter_username) {
                        socialLinks.push(`<a class="social-icon" href="https://twitter.com/${token.twitter_username}" target="_blank"><i class="fab fa-twitter"></i></a>`);
                    }
                    if (token.telegram) {
                        socialLinks.push(`<a class="social-icon" href="${token.telegram}" target="_blank"><i class="fab fa-telegram-plane"></i></a>`);
                    }

                    const chartLinks = [];
                    chartLinks.push(`<a class="link-button" href="https://www.dextools.io/app/en/ether/pair-explorer/${token.address}" target="_blank">DexTools</a>`);
                    chartLinks.push(`<a class="link-button" href="https://dexspy.io/eth/token/${token.address}" target="_blank">DexSpy</a>`);
                    chartLinks.push(`<a class="link-button" href="https://dexscreener.com/ethereum/${token.address}" target="_blank">DexScreener</a>`);

                    const marketCap = parseFloat(token.market_cap) || 0;
                    const formattedMarketCap = marketCap.toLocaleString('en-US', {style: 'currency', currency: 'USD', maximumFractionDigits: 0});
                    const photonLink = `https://photon.tinyastro.io/en/lp/${token.address}?handle=91980711311691152556`;

                    const liquidityStatusDisplay = token.liquidity_status === '🔥' ? '<span class="liquidity-status">🔥</span>' : token.liquidity_status === '🔒' ? '<span class="liquidity-status">🔒</span>' : '';

                    const shortenedAddress = `${token.address.slice(0, 6)}...${token.address.slice(-4)}`;
                    const symbol = token.symbol ? `$${token.symbol.toUpperCase()}` : 'N/A';
                    const logo = token.logo ? `<img src="${token.logo}" alt="${token.symbol} logo" style="width: 40px; height: 40px; border-radius: 50%; margin-right: 8px;">` : '';
                    const tokenDisplay = `<div class="symbol">${logo}${symbol}</div>`;

                    const row = `
                        <tr data-address="${token.address}">
                            <td>
                                ${tokenDisplay}
                                <div class="token-details">
                                    ${liquidityStatusDisplay}
                                    <span class="address-box">${shortenedAddress}</span>
                                    <button class="copy-button" onclick="copyToClipboard('${token.address}', this)">
                                        <span>Copy</span>
                                        <i class="fas fa-check"></i>
                                    </button>
                                </div>
                                <div class="links">
                                    ${socialLinks.join(' ')}
                                </div>
                                <div class="links">
                                    ${chartLinks.join(' ')}
                                </div>
                            </td>
                            <td>
                                ${formattedMarketCap} ${gainText}
                                <div class="market-cap-tooltip" id="tooltip-${token.symbol}"></div>
                            </td>
                            <td>
                                ${lowestMarketCap.toLocaleString('en-US', {style: 'currency', currency: 'USD', maximumFractionDigits: 0})}
                                <div class="small-text">
                                    <span class="time-ago" onmouseover="showTimeTooltip(event, '${lowestMarketCapTime}')" onmouseout="hideTimeTooltip()">${timeAgo}</span>
                                    <div class="time-tooltip" id="tooltip-time-${token.symbol}"></div>
                                </td>
                            </td>
                            <td>
                                <div class="progress-bar">
                                    <div class="progress" style="width: ${(token.pump_score || 0) * 10}%;"></div>
                                </div>
                                ${(token.pump_score || 0).toFixed(1)}/10
                            </td>
                            <td>$${(token.volume || 0).toLocaleString('en-US', {maximumFractionDigits: 2})}</td>
                            <td class="${(token.price_change_percent5m || 0) >= 0 ? 'positive' : 'negative'}">
                                ${(token.price_change_percent5m || 0).toFixed(2)}%
                            </td>
                            <td>${ageString}</td>
                            <td class="buy-button-container">
                                <a class="buy-button" href="${photonLink}" target="_blank">Quick Buy</a>
                                <span class="hide-token" onclick="hideToken('${token.address}')">❌</span>
                            </td>
                        </tr>
                    `;

                    if (marketCap <= 1000000) {
                        tokenBody1m.innerHTML += row;
                    } else if (marketCap <= 5000000) {
                        tokenBody5m.innerHTML += row;
                    } else if (marketCap <= 20000000) {
                        tokenBody20m.innerHTML += row;
                    }
                }
            });
        }

        function formatTimeAgo(milliseconds) {
            const totalSeconds = Math.floor(milliseconds / 1000);
            const minutes = Math.floor(totalSeconds / 60);
            const seconds = totalSeconds % 60;
            if (minutes < 1) {
                return `${seconds}s ago`;
            }
            const hours = Math.floor(minutes / 60);
            const remainingMinutes = minutes % 60;
            if (hours < 1) {
                return `${remainingMinutes}m ${seconds}s ago`;
            }
            const days = Math.floor(hours / 24);
            const remainingHours = hours % 24;
            if (days < 1) {
                return `${remainingHours}h ${remainingMinutes}m ago`;
            }
            return `${days}d ${remainingHours}h ago`;
        }

        function sortTable(column) {
            if (currentSort.column === column) {
                currentSort.direction = currentSort.direction === "asc" ? "desc" : "asc";
            } else {
                currentSort.column = column;
                currentSort.direction = "desc";
            }
            renderSections();
        }

        function hideToken(address) {
            document.querySelector(`tr[data-address="${address}"]`).remove();
            let hiddenTokens = JSON.parse(localStorage.getItem('hiddenTokens') || '[]');
            hiddenTokens.push(address);
            localStorage.setItem('hiddenTokens', JSON.stringify(hiddenTokens));
        }

        function copyToClipboard(text, button) {
            navigator.clipboard.writeText(text).then(() => {
                const span = button.querySelector('span');
                const icon = button.querySelector('i');
                span.style.display = 'none';
                icon.style.display = 'inline-block';
                setTimeout(() => {
                    span.style.display = 'inline-block';
                    icon.style.display = 'none';
                }, 2000);
            }).catch(err => {
                console.error('Failed to copy: ', err);
            });
        }

        function showTimeTooltip(event, time) {
            const tooltip = document.createElement('div');
            tooltip.className = 'time-tooltip';
            tooltip.id = 'hover-tooltip';
            tooltip.innerHTML = `Alerted at ${time}`;
            document.body.appendChild(tooltip);
            const rect = event.target.getBoundingClientRect();
            tooltip.style.top = `${window.scrollY + rect.bottom}px`;
            tooltip.style.left = `${window.scrollX + rect.left}px`;
        }

        function hideTimeTooltip() {
            const tooltip = document.getElementById('hover-tooltip');
            if (tooltip) {
                tooltip.remove();
            }
        }

        function showTooltip(event, ticker, gain, lowestMarketCap, timeAgo, xMultiplier) {
            const tooltip = document.getElementById(`tooltip-${ticker}`);
            tooltip.innerHTML = `
                <div><strong>${ticker} has increased by ${gain}%</strong></div>
                <div>since it was alerted at <strong>${lowestMarketCap.toLocaleString('en-US', {style: 'currency', currency: 'USD', maximumFractionDigits: 0})}</strong> ${timeAgo}!</div>
                <br><span style="font-size: 1rem; font-weight: bold;">${xMultiplier.toFixed(1)}X</span>
            `;
            tooltip.style.display = 'block';
            const rect = event.target.getBoundingClientRect();
            tooltip.style.top = `${window.scrollY + rect.top - tooltip.offsetHeight}px`;
            tooltip.style.left = `${window.scrollX + rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`;
        }

        function hideTooltip() {
            const tooltips = document.querySelectorAll('.market-cap-tooltip');
            tooltips.forEach(tooltip => {
                tooltip.style.display = 'none';
            });
        }

        document.querySelectorAll("th[data-sort]").forEach(th => {
            th.addEventListener("click", () => sortTable(th.dataset.sort));
        });

        document.getElementById("refreshButton").addEventListener("click", updateTable);

        setInterval(updateTable, 1000); // Update every second
        </script>
        </body>
        </html>a