Crypto Heat Map

Metaverseplanet November 2, 2024

0 9 minutes read

Crypto Heatmap

This tool is produced by Metaverseplanet.net

You can add the crypto heatmap that I have carefully prepared over a long period to your site for free. All you have to do is copy the code and add it as HTML code anywhere on your site—it’s that simple!

Copy Button Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Crypto Heatmap</title>
    <style>
        /* Container Style Settings */
        .crypto-heatmap {
            max-width: 1200px;
            width: 100%;
            height: auto;
            overflow-y: visible;
            margin: 0 auto;
            padding: 20px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
            color: #ffffff;
            position: relative;
            font-family: Arial, sans-serif;
        }

/* Filter Buttons */
        .filter-buttons {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            margin-bottom: 20px;
            gap: 10px;
        }

.filter-button {
            padding: 10px 15px;
            font-size: 1em;
            color: #ffffff;
            background-color: #444;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.2s;
        }

.filter-button:hover {
            background-color: #666;
        }

/* Grid Container */
        .heatmap {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
            gap: 10px;
            width: 100%;
            max-width: 1000px;
            margin: 0 auto;
        }

.coin-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 12px;
            border-radius: 8px;
            text-align: center;
            font-size: 1em;
            color: #ffffff;
            transition: transform 0.2s ease, background-color 0.2s ease;
            background-color: rgba(255, 255, 255, 0.2);
            cursor: pointer;
            position: relative;
        }

.coin-box:hover {
            transform: scale(1.05);
        }

.coin-logo {
            width: 30px;
            height: 30px;
            margin-bottom: 5px;
        }

.coin-name {
            font-weight: bold;
            font-size: 1.2em;
            margin-bottom: 5px;
        }

.coin-price, .coin-change {
            font-size: 1.1em;
            font-weight: bold;
        }

/* Up and Down Arrows */
        .up-arrow {
            color: #00ff00;
            font-size: 1.2em;
            animation: moveUp 1s infinite;
        }

.down-arrow {
            color: #ff0000;
            font-size: 1.2em;
            animation: moveDown 1s infinite;
        }

/* Keyframes for animation */
        @keyframes moveUp {
            0% { transform: translateY(0); }
            50% { transform: translateY(-5px); }
            100% { transform: translateY(0); }
        }

@keyframes moveDown {
            0% { transform: translateY(0); }
            50% { transform: translateY(5px); }
            100% { transform: translateY(0); }
        }

/* Blinking Animation for Top Gainer and Loser with Border */
        .blink-up {
            animation: blinkUp 1s infinite alternate;
            border: 3px solid #00ff00; /* Green border for top gainer */
        }

.blink-down {
            animation: blinkDown 1s infinite alternate;
            border: 3px solid #ff0000; /* Red border for top loser */
        }

@keyframes blinkUp {
            from { background-color: rgba(0, 255, 0, 0.5); }
            to { background-color: rgba(0, 128, 0, 0.7); }
        }

@keyframes blinkDown {
            from { background-color: rgba(255, 0, 0, 0.5); }
            to { background-color: rgba(128, 0, 0, 0.7); }
        }

/* Modal Styles */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }

.modal-content {
            background-color: #1e1e1e;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            color: #ffffff;
            width: 90%;
            max-width: 500px;
        }

.close-btn {
            background-color: #c1205b;
            color: #fff;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            margin-top: 15px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="crypto-heatmap">
        
        <div class="filter-buttons">
            <button class="filter-button" onclick="filterCoins('all')">Show All</button>
            <button class="filter-button" onclick="filterCoins('top-gainer')">Top Gainer</button>
            <button class="filter-button" onclick="filterCoins('top-loser')">Top Loser</button>
            <button class="filter-button" onclick="filterCoins('top-10-gainers')">Top 10 Gainers</button>
            <button class="filter-button" onclick="filterCoins('top-10-losers')">Top 10 Losers</button>
        </div>

<div class="heatmap" id="heatmap"></div>
        
        <div class="modal" id="modal">
            <div class="modal-content" id="modal-content">
                <h3 id="coinName"></h3>
                <p><strong>Current Price:</strong> $<span id="coinPrice"></span></p>
                <p><strong>24h Change:</strong> <span id="coinChange"></span>%</p>
                <p><strong>Market Cap:</strong> $<span id="coinMarketCap"></span></p>
                <p><strong>24h Volume:</strong> $<span id="coinVolume"></span></p>
                <p><strong>Total Supply:</strong> <span id="coinSupply"></span></p>
                <button class="close-btn" onclick="closeModal()">Close</button>
            </div>
        </div>

<div class="footer-text">
            This tool is produced by <a href="https://metaverseplanet.net/" style="color: #c1205b; text-decoration: underline;" rel="dofollow">Metaverseplanet.net</a>
        </div>
    </div>

async function fetchCryptoData() {
            const response = await fetch("https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=198&page=1&sparkline=false");
            coinsData = await response.json();
            displayHeatmap(coinsData);
        }

function displayHeatmap(coins) {
            const heatmap = document.getElementById("heatmap");
            heatmap.innerHTML = ''; // Clear previous content

const topGainer = coins.reduce((max, coin) => coin.price_change_percentage_24h > max.price_change_percentage_24h ? coin : max);
            const topLoser = coins.reduce((min, coin) => coin.price_change_percentage_24h < min.price_change_percentage_24h ? coin : min);

coins.forEach(coin => {
                const coinBox = document.createElement("div");
                coinBox.className = "coin-box";

if (coin.id === topGainer.id) {
                    coinBox.classList.add("blink-up");
                } else if (coin.id === topLoser.id) {
                    coinBox.classList.add("blink-down");
                }

coinBox.onclick = () => {
                    if (coinUrls[coin.id]) {
                        window.open(coinUrls[coin.id], '_blank');
                    } else {
                        openModal(coin);
                    }
                };

const change = coin.price_change_percentage_24h;
                const alpha = 0.3 + Math.min(Math.abs(change) / 20, 0.7);
                const color = change > 0 
                    ? `rgba(0, 128, 0, ${alpha})`
                    : `rgba(255, 0, 0, ${alpha})`;
                
                coinBox.style.backgroundColor = color;

const arrow = change > 0 
                    ? '<span class="up-arrow">↑</span>'
                    : '<span class="down-arrow">↓</span>';

coinBox.innerHTML = `
                    <img decoding="async" src="${coin.image}" alt="${coin.name} logo" class="coin-logo">
                    <div class="coin-name">${coin.symbol.toUpperCase()} ${arrow}</div>
                    <div class="coin-price">$${coin.current_price.toFixed(2)}</div>
                    <div class="coin-change">${change.toFixed(2)}%</div>`;
                
                heatmap.appendChild(coinBox);
            });
        }

async function openModal(coin) {
            document.getElementById("coinName").innerText = coin.name;
            document.getElementById("coinPrice").innerText = coin.current_price.toFixed(2);
            document.getElementById("coinChange").innerText = coin.price_change_percentage_24h.toFixed(2);
            document.getElementById("coinMarketCap").innerText = coin.market_cap.toLocaleString();
            document.getElementById("coinVolume").innerText = coin.total_volume.toLocaleString();
            document.getElementById("coinSupply").innerText = coin.total_supply ? coin.total_supply.toLocaleString() : 'N/A';

document.getElementById("modal").style.display = "flex";
        }

function closeModal() {
            document.getElementById("modal").style.display = "none";
        }

fetchCryptoData();
    </script>
</body>
</html>

What Makes the Metaverseplanet.net Crypto Heatmap Unique?

The Metaverseplanet.net Crypto Heatmap is a cutting-edge visualization tool, uniquely designed to help users keep a pulse on the crypto market. This custom-built tool provides a color-coded, real-time display of cryptocurrency price changes, making it simple to spot trends and assess performance across various digital assets. Colors indicate the intensity of price movements—warmer tones suggest higher price increases, while cooler tones indicate declines. This unique design allows users to quickly gauge market conditions at a glance.

Whether you’re a trader, investor, or crypto enthusiast, the Metaverseplanet.net Crypto Heatmap offers an intuitive way to stay informed and make timely decisions, all while leveraging the latest technology.

How Does Today’s Total Crypto Market Cap Impact the Heatmap?

The total crypto market cap today is a fundamental indicator of the overall value and health of the cryptocurrency market. It represents the combined worth of all circulating cryptocurrencies and directly influences the Metaverseplanet.net Crypto Heatmap. When the total market cap increases, more cryptocurrencies generally see price gains, often reflected by warmer colors on the heatmap. Conversely, a decrease in total market cap may lead to cooler colors, indicating a market-wide price drop.

While total market cap is a critical factor, individual coin performance, investor sentiment, and broader economic conditions also play essential roles in shaping the heatmap’s appearance. Always consider multiple data sources for a comprehensive market understanding.

What Insights Can the Metaverseplanet.net Live Crypto Heatmap Provide?

The Metaverseplanet.net live crypto heatmap is designed to offer real-time insights, constantly updating to reflect the latest market shifts. This dynamic tool reveals live performance data, showing users which cryptocurrencies are seeing the most substantial changes at any given time.

For active traders, these insights can highlight profitable opportunities as prices fluctuate. Long-term investors can also use this tool to track the performance of their holdings, identifying trends that may warrant portfolio adjustments. Additionally, a predominantly warm heatmap suggests a bullish market trend, while a cooler heatmap may indicate bearish conditions. However, real-time market analysis should always be supported by further research and analysis.

How Do Market Visualization Tools Like the Metaverseplanet.net Heatmap Benefit Crypto Users?

Market visualization tools, such as the Metaverseplanet.net heatmap, offer invaluable benefits for both beginners and experienced investors in the crypto space. These tools present complex market data in an accessible, visual format, allowing users to make quick, informed decisions based on the latest trends.

The heatmap displays clear performance differences between cryptocurrencies, highlighting top gainers, underperformers, and assets with notable volatility. This visualization makes it easy to spot potential investment opportunities and possible risks within seconds. Additionally, users can track their portfolio’s performance visually, assessing the overall impact of market movements on their holdings.

Metaverseplanet.net is dedicated to helping users navigate the crypto market confidently and effectively, making our custom heatmap tool an essential addition to any crypto enthusiast’s toolkit.

Metaverseplanet November 2, 2024

0 9 minutes read

Crypto Heat Map

What Makes the Metaverseplanet.net Crypto Heatmap Unique?

How Does Today’s Total Crypto Market Cap Impact the Heatmap?

What Insights Can the Metaverseplanet.net Live Crypto Heatmap Provide?

How Do Market Visualization Tools Like the Metaverseplanet.net Heatmap Benefit Crypto Users?

Leave a Reply Cancel reply

Aavegotchi (GHST) Price, Charts, Market Capitalization

Pawtocol (UPI) Price, Charts, Market Capitalization

Atari (ATRI) Price, Charts, Market Capitalization

Gitcoin (GTC) Price Analysis, Charts & Market Capitalization

Ethereum (ETH) Price, Charts, Market Capitalization✅

What Makes the Metaverseplanet.net Crypto Heatmap Unique?

How Does Today’s Total Crypto Market Cap Impact the Heatmap?

What Insights Can the Metaverseplanet.net Live Crypto Heatmap Provide?

How Do Market Visualization Tools Like the Metaverseplanet.net Heatmap Benefit Crypto Users?

Leave a Reply Cancel reply

!!YOU MAY BE INTERESTED IN THESE CRYPTOCURRENCIES!!

Aavegotchi (GHST) Price, Charts, Market Capitalization

Pawtocol (UPI) Price, Charts, Market Capitalization

Atari (ATRI) Price, Charts, Market Capitalization

Gitcoin (GTC) Price Analysis, Charts & Market Capitalization

Ethereum (ETH) Price, Charts, Market Capitalization✅

Subscribe to our mailing list to get the new updates!