Spaces:

mexicanamerican
/

crypto

Running

App Files Files Community

mexicanamerican commited on Mar 31

Commit

05c4a6d

verified ·

1 Parent(s): 43ceb5f

Add 1 files

Browse files

Files changed (1) hide show

index.html +309 -4

index.html CHANGED Viewed

@@ -3,9 +3,10 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Crypto Price Tracker</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
         @keyframes pulse {
             0% { transform: scale(1); }
@@ -36,13 +37,30 @@
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
     </style>
 </head>
 <body class="min-h-screen gradient-bg text-white">
     <div class="container mx-auto px-4 py-12">
         <header class="text-center mb-12">
             <h1 class="text-4xl md:text-5xl font-bold mb-4">Crypto Price Tracker</h1>
-            <p class="text-xl opacity-90">Real-time cryptocurrency prices and market data</p>
             <div class="mt-6 flex justify-center">
                 <div class="relative w-full max-w-md">
                     <input
@@ -92,6 +110,73 @@
         </div>
     </div>
     <script>
         // Configuration
         const config = {
@@ -109,6 +194,15 @@
         const searchBtn = document.getElementById('searchBtn');
         const autoRefreshToggle = document.getElementById('autoRefresh');
         const lastUpdatedElement = document.getElementById('lastUpdated');
         // State
         let refreshInterval;
@@ -129,6 +223,15 @@
                 if (e.key === 'Enter') filterCoins();
             });
             autoRefreshToggle.addEventListener('change', setupAutoRefresh);
         }
         // Auto Refresh
@@ -175,7 +278,8 @@
                 const priceChangeIcon = priceChange24h >= 0 ? 'fa-arrow-up' : 'fa-arrow-down';
                 const card = document.createElement('div');
-                card.className = 'bg-white/5 rounded-xl p-6 border border-white/10 transition-all duration-300 card-hover';
                 card.innerHTML = `
                     <div class="flex justify-between items-start mb-4">
                         <div class="flex items-center">
@@ -224,6 +328,9 @@
                     </div>
                 `;
                 cryptoContainer.appendChild(card);
                 // Render sparkline after the card is added to DOM
@@ -262,6 +369,204 @@
             ctx.stroke();
         }
         // Filter Coins
         function filterCoins() {
             const searchTerm = searchInput.value.toLowerCase();
@@ -317,5 +622,5 @@
             lastUpdatedElement.textContent = now.toLocaleTimeString();
         }
     </script>
-<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Crypto Price Tracker with Charts</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <style>
         @keyframes pulse {
             0% { transform: scale(1); }
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
+        .modal {
+            transition: opacity 0.3s ease, transform 0.3s ease;
+        }
+        .modal-active {
+            opacity: 1;
+            visibility: visible;
+            transform: translate(-50%, -50%) scale(1);
+        }
+        .modal-inactive {
+            opacity: 0;
+            visibility: hidden;
+            transform: translate(-50%, -50%) scale(0.9);
+        }
+        .chart-tab.active {
+            background-color: rgba(255, 255, 255, 0.2);
+            font-weight: 600;
+        }
     </style>
 </head>
 <body class="min-h-screen gradient-bg text-white">
     <div class="container mx-auto px-4 py-12">
         <header class="text-center mb-12">
             <h1 class="text-4xl md:text-5xl font-bold mb-4">Crypto Price Tracker</h1>
+            <p class="text-xl opacity-90">Real-time cryptocurrency prices with interactive charts</p>
             <div class="mt-6 flex justify-center">
                 <div class="relative w-full max-w-md">
                     <input
         </div>
     </div>
+    <!-- Modal -->
+    <div id="coinModal" class="modal modal-inactive fixed inset-0 z-50">
+        <div class="absolute inset-0 bg-black/70 backdrop-blur-sm" id="modalBackdrop"></div>
+        <div class="absolute top-1/2 left-1/2 w-11/12 max-w-4xl -translate-x-1/2 -translate-y-1/2">
+            <div class="bg-gray-900 rounded-xl border border-white/10 overflow-hidden shadow-2xl">
+                <div class="flex justify-between items-center p-4 border-b border-white/10">
+                    <div class="flex items-center">
+                        <img id="modalCoinImage" src="" alt="" class="w-8 h-8 mr-3">
+                        <h3 id="modalCoinName" class="text-xl font-bold"></h3>
+                        <span id="modalCoinSymbol" class="ml-2 text-sm opacity-80"></span>
+                    </div>
+                    <button id="closeModal" class="text-white/50 hover:text-white">
+                        <i class="fas fa-times text-xl"></i>
+                    </button>
+                </div>
+                <div class="p-6">
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                        <div class="bg-white/5 p-4 rounded-lg border border-white/10">
+                            <div class="text-sm opacity-80 mb-1">Current Price</div>
+                            <div id="modalCurrentPrice" class="text-2xl font-bold"></div>
+                        </div>
+                        <div class="bg-white/5 p-4 rounded-lg border border-white/10">
+                            <div class="text-sm opacity-80 mb-1">Market Cap</div>
+                            <div id="modalMarketCap" class="text-2xl font-bold"></div>
+                        </div>
+                        <div class="bg-white/5 p-4 rounded-lg border border-white/10">
+                            <div class="text-sm opacity-80 mb-1">24h Change</div>
+                            <div id="modal24hChange" class="text-2xl font-bold"></div>
+                        </div>
+                    </div>
+                    <div class="mb-4">
+                        <div class="flex border-b border-white/10">
+                            <button class="chart-tab px-4 py-2 active" data-period="24h">24 Hours</button>
+                            <button class="chart-tab px-4 py-2" data-period="7d">7 Days</button>
+                            <button class="chart-tab px-4 py-2" data-period="30d">30 Days</button>
+                        </div>
+                    </div>
+                    <div class="h-80 mb-6">
+                        <canvas id="detailedChart"></canvas>
+                    </div>
+                    <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm">
+                        <div class="bg-white/5 p-3 rounded border border-white/10">
+                            <div class="opacity-70">24h High</div>
+                            <div id="24hHigh" class="text-lg mt-1"></div>
+                        </div>
+                        <div class="bg-white/5 p-3 rounded border border-white/10">
+                            <div class="opacity-70">24h Low</div>
+                            <div id="24hLow" class="text-lg mt-1"></div>
+                        </div>
+                        <div class="bg-white/5 p-3 rounded border border-white/10">
+                            <div class="opacity-70">24h Volume</div>
+                            <div id="24hVolume" class="text-lg mt-1"></div>
+                        </div>
+                        <div class="bg-white/5 p-3 rounded border border-white/10">
+                            <div class="opacity-70">Circ. Supply</div>
+                            <div id="circSupply" class="text-lg mt-1"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
     <script>
         // Configuration
         const config = {
         const searchBtn = document.getElementById('searchBtn');
         const autoRefreshToggle = document.getElementById('autoRefresh');
         const lastUpdatedElement = document.getElementById('lastUpdated');
+        const coinModal = document.getElementById('coinModal');
+        const modalBackdrop = document.getElementById('modalBackdrop');
+        const closeModal = document.getElementById('closeModal');
+        const detailedChart = document.getElementById('detailedChart');
+        const chartTabs = document.querySelectorAll('.chart-tab');
+        // Chart instance
+        let chartInstance = null;
+        let currentCoinId = null;
         // State
         let refreshInterval;
                 if (e.key === 'Enter') filterCoins();
             });
             autoRefreshToggle.addEventListener('change', setupAutoRefresh);
+            modalBackdrop.addEventListener('click', closeCoinModal);
+            closeModal.addEventListener('click', closeCoinModal);
+            // Add event listeners to chart tabs
+            chartTabs.forEach(tab => {
+                tab.addEventListener('click', () => {
+                    changeChartPeriod(tab.dataset.period);
+                });
+            });
         }
         // Auto Refresh
                 const priceChangeIcon = priceChange24h >= 0 ? 'fa-arrow-up' : 'fa-arrow-down';
                 const card = document.createElement('div');
+                card.className = 'bg-white/5 rounded-xl p-6 border border-white/10 transition-all duration-300 card-hover cursor-pointer';
+                card.dataset.coinId = coin.id;
                 card.innerHTML = `
                     <div class="flex justify-between items-start mb-4">
                         <div class="flex items-center">
                     </div>
                 `;
+                // Add click event to show modal with detailed info
+                card.addEventListener('click', () => showCoinModal(coin.id));
                 cryptoContainer.appendChild(card);
                 // Render sparkline after the card is added to DOM
             ctx.stroke();
         }
+        // Show Coin Modal
+        async function showCoinModal(coinId) {
+            try {
+                currentCoinId = coinId;
+                // Get the basic coin data from our existing data
+                const coinData = allCoinsData.find(c => c.id === coinId);
+                if (!coinData) return;
+                // Get more detailed data from API
+                const response = await fetch(`https://api.coingecko.com/api/v3/coins/${coinId}/market_chart?vs_currency=${config.vsCurrency}&days=30`);
+                if (!response.ok) throw new Error('Could not fetch detailed data');
+                const detailedData = await response.json();
+                // Update modal with basic info
+                document.getElementById('modalCoinImage').src = coinData.image;
+                document.getElementById('modalCoinName').textContent = coinData.name;
+                document.getElementById('modalCoinSymbol').textContent = coinData.symbol.toUpperCase();
+                document.getElementById('modalCurrentPrice').textContent = `$${coinData.current_price.toLocaleString()}`;
+                document.getElementById('modalMarketCap').textContent = `$${coinData.market_cap.toLocaleString()}`;
+                const priceChange24h = coinData.price_change_percentage_24h;
+                const priceChangeClass = priceChange24h >= 0 ? 'price-up' : 'price-down';
+                const priceChangeIcon = priceChange24h >= 0 ? 'fa-arrow-up' : 'fa-arrow-down';
+                document.getElementById('modal24hChange').innerHTML = `
+                    <span class="${priceChangeClass}">
+                        <i class="fas ${priceChangeIcon} mr-1"></i>${Math.abs(priceChange24h).toFixed(2)}%
+                    </span>
+                `;
+                // Update additional info
+                document.getElementById('24hHigh').textContent = `$${coinData.high_24h.toLocaleString()}`;
+                document.getElementById('24hLow').textContent = `$${coinData.low_24h.toLocaleString()}`;
+                document.getElementById('24hVolume').textContent = `$${coinData.total_volume.toLocaleString()}`;
+                document.getElementById('circSupply').textContent = `${coinData.circulating_supply.toLocaleString()} ${coinData.symbol.toUpperCase()}`;
+                // Create the initial chart (24h view)
+                createDetailedChart(detailedData.prices, '24h');
+                // Show the modal
+                coinModal.classList.remove('modal-inactive');
+                coinModal.classList.add('modal-active');
+                // Set the first tab as active
+                chartTabs.forEach(tab => tab.classList.remove('active'));
+                document.querySelector('[data-period="24h"]').classList.add('active');
+            } catch (error) {
+                console.error('Error showing coin modal:', error);
+                alert('Failed to load detailed coin data. Please try again.');
+            }
+        }
+        // Close Coin Modal
+        function closeCoinModal() {
+            coinModal.classList.remove('modal-active');
+            coinModal.classList.add('modal-inactive');
+            // Destroy the chart if it exists
+            if (chartInstance) {
+                chartInstance.destroy();
+                chartInstance = null;
+            }
+            currentCoinId = null;
+        }
+        // Create Detailed Chart
+        function createDetailedChart(prices, period) {
+            // Filter data based on period
+            let filteredPrices = [];
+            const now = new Date().getTime();
+            if (period === '24h') {
+                const twentyFourHoursAgo = now - 24 * 60 * 60 * 1000;
+                filteredPrices = prices.filter(price => price[0] >= twentyFourHoursAgo);
+            } else if (period === '7d') {
+                const sevenDaysAgo = now - 7 * 24 * 60 * 60 * 1000;
+                filteredPrices = prices.filter(price => price[0] >= sevenDaysAgo);
+            } else { // 30d
+                filteredPrices = prices;
+            }
+            // Prepare data for chart
+            const labels = filteredPrices.map(price => {
+                const date = new Date(price[0]);
+                if (period === '24h') {
+                    return date.toLocaleTimeString();
+                } else {
+                    return date.toLocaleDateString();
+                }
+            });
+            const data = filteredPrices.map(price => price[1]);
+            // Get color based on price trend
+            const firstPrice = filteredPrices[0][1];
+            const lastPrice = filteredPrices[filteredPrices.length - 1][1];
+            const isPositive = lastPrice >= firstPrice;
+            const lineColor = isPositive ? '#10b981' : '#ef4444';
+            const bgColor = isPositive ? 'rgba(16, 185, 129, 0.1)' : 'rgba(239, 68, 68, 0.1)';
+            // Destroy previous chart if it exists
+            if (chartInstance) {
+                chartInstance.destroy();
+            }
+            // Create new chart
+            const ctx = detailedChart.getContext('2d');
+            chartInstance = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: labels,
+                    datasets: [{
+                        label: 'Price',
+                        data: data,
+                        borderColor: lineColor,
+                        backgroundColor: bgColor,
+                        borderWidth: 2,
+                        fill: true,
+                        tension: 0.4,
+                        pointRadius: 0
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    plugins: {
+                        legend: {
+                            display: false
+                        },
+                        tooltip: {
+                            mode: 'index',
+                            intersect: false,
+                            callbacks: {
+                                label: function(context) {
+                                    return `${context.dataset.label}: $${context.parsed.y.toFixed(2)}`;
+                                }
+                            }
+                        }
+                    },
+                    scales: {
+                        x: {
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)',
+                                display: false
+                            },
+                            ticks: {
+                                color: 'rgba(255, 255, 255, 0.7)',
+                                maxRotation: 0,
+                                autoSkip: true,
+                                maxTicksLimit: 8
+                            }
+                        },
+                        y: {
+                            grid: {
+                                color: 'rgba(255, 255, 255, 0.1)'
+                            },
+                            ticks: {
+                                color: 'rgba(255, 255, 255, 0.7)',
+                                callback: function(value) {
+                                    return '$' + value.toLocaleString();
+                                }
+                            }
+                        }
+                    }
+                }
+            });
+        }
+        // Change Chart Period
+        async function changeChartPeriod(period) {
+            if (!currentCoinId) return;
+            try {
+                // Set active tab
+                chartTabs.forEach(tab => tab.classList.remove('active'));
+                document.querySelector(`[data-period="${period}"]`).classList.add('active');
+                // Get the updated data for the selected period
+                let days;
+                if (period === '24h') days = 1;
+                else if (period === '7d') days = 7;
+                else days = 30;
+                const response = await fetch(`https://api.coingecko.com/api/v3/coins/${currentCoinId}/market_chart?vs_currency=${config.vsCurrency}&days=${days}`);
+                if (!response.ok) throw new Error('Could not fetch chart data');
+                const detailedData = await response.json();
+                createDetailedChart(detailedData.prices, period);
+            } catch (error) {
+                console.error('Error changing chart period:', error);
+                alert('Failed to load chart data. Please try again.');
+            }
+        }
         // Filter Coins
         function filterCoins() {
             const searchTerm = searchInput.value.toLowerCase();
             lastUpdatedElement.textContent = now.toLocaleTimeString();
         }
     </script>
+</body>
 </html>