Okay, let's enhance the previous example to be a bit closer to the structure and appearance of a site like `tokenbaz.com`. We'll add placeholders for logos and refine the card layout. This version still uses static data from `data.json` but includes image placeholders and slightly improved styling. Token Listing Platform

Token Listings

Discover new crypto tokens, presales, and airdrops.

body { font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; margin: 0; background-color: #f8f9fa; color: #333; } header { background-color: #ffffff; padding: 1.5rem 1rem; text-align: center; border-bottom: 1px solid #e0e0e0; margin-bottom: 2rem; } header h1 { margin: 0 0 0.5rem 0; color: #212529; } header p { margin: 0; color: #6c757d; } main { padding: 0 1rem 2rem 1rem; max-width: 1200px; margin: 0 auto; /* Center the main content */ } .token-container { display: grid; /* Adjust minmax for potentially wider cards */ grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; /* Increased gap */ } .token-card { background-color: #fff; border: 1px solid #e0e0e0; border-radius: 8px; /* Slightly more rounded corners */ padding: 1.5rem; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .token-card:hover { transform: translateY(-5px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); } .token-card-header { display: flex; align-items: center; margin-bottom: 1rem; gap: 1rem; /* Space between logo and text */ } .token-logo { width: 50px; height: 50px; border-radius: 50%; /* Circular logos */ object-fit: cover; /* Prevents image distortion */ border: 1px solid #eee; flex-shrink: 0; /* Prevent logo from shrinking */ } .token-name-symbol h2 { margin: 0; font-size: 1.25rem; /* Slightly larger name */ color: #212529; } .token-name-symbol span { font-size: 0.9rem; color: #6c757d; text-transform: uppercase; } .token-card .description { flex-grow: 1; margin-bottom: 1rem; /* Space before status/links */ color: #495057; font-size: 0.95rem; line-height: 1.5; } .token-card .status { display: inline-block; /* Make it behave like a badge */ padding: 0.3rem 0.6rem; border-radius: 4px; font-weight: bold; margin-bottom: 1rem; /* Space before link */ font-size: 0.8rem; text-transform: uppercase; color: #fff; /* White text for badges */ } /* Status-specific background colors */ .token-card .status.presale { background-color: #fd7e14; } /* Orange */ .token-card .status.airdrop { background-color: #0d6efd; } /* Blue */ .token-card .status.listed { background-color: #198754; } /* Green */ .token-card .status.upcoming { background-color: #6c757d; } /* Gray */ .token-card .link-button { display: block; /* Make link take full width */ margin-top: auto; /* Push button to the bottom */ padding: 0.75rem 1rem; background-color: #0d6efd; /* Primary blue */ color: #fff; text-decoration: none; border-radius: 5px; text-align: center; font-weight: 500; transition: background-color 0.3s ease; } .token-card .link-button:hover { background-color: #0b5ed7; /* Darker blue on hover */ } /* Placeholder style if logo fails to load */ .token-logo-placeholder { width: 50px; height: 50px; border-radius: 50%; background-color: #e9ecef; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: bold; color: #adb5bd; flex-shrink: 0; border: 1px solid #dee2e6; } [ { "name": "Alpha Token", "symbol": "ALP", "logoUrl": "https://via.placeholder.com/50/FF5733/FFFFFF?text=A", "description": "Alpha Token is launching its presale phase. Join early to get bonuses.", "status": "presale", "statusText": "Presale", "link": "#", "linkText": "Join Presale" }, { "name": "Beta Drop", "symbol": "BET", "logoUrl": "https://via.placeholder.com/50/337AFF/FFFFFF?text=B", "description": "Claim your free Beta Drop tokens in our exclusive airdrop event.", "status": "airdrop", "statusText": "Airdrop", "link": "#", "linkText": "Claim Airdrop" }, { "name": "Gamma Coin", "symbol": "GAM", "logoUrl": "https://via.placeholder.com/50/28A745/FFFFFF?text=G", "description": "Gamma Coin is now officially listed on major exchanges. Start trading today.", "status": "listed", "statusText": "Listed", "link": "#", "linkText": "Trade Now" }, { "name": "Delta Project", "symbol": "DEL", "logoUrl": "https://via.placeholder.com/50/6F42C1/FFFFFF?text=D", "description": "The Delta Project is an upcoming innovation in DeFi. Presale starting soon.", "status": "upcoming", "statusText": "Upcoming", "link": "#", "linkText": "Learn More" }, { "name": "Epsilon Finance", "symbol": "EPS", "logoUrl": "invalid-url", // Example of a potentially missing/invalid logo "description": "Epsilon Finance aims to revolutionize yield farming. Join the presale.", "status": "presale", "statusText": "Presale", "link": "#", "linkText": "Join Presale" } ] document.addEventListener('DOMContentLoaded', () => { const tokenListContainer = document.getElementById('token-list'); fetch('data.json') .then(response => { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); }) .then(tokens => { if (!tokens || tokens.length === 0) { tokenListContainer.innerHTML = '

No tokens available at the moment.

'; return; } tokens.forEach(token => { const card = document.createElement('div'); card.classList.add('token-card'); // --- Card Header (Logo + Name/Symbol) --- const cardHeader = document.createElement('div'); cardHeader.classList.add('token-card-header'); // Logo or Placeholder const logo = document.createElement('img'); logo.src = token.logoUrl || ''; // Set src, handle potential null/undefined logo.alt = `${token.name} Logo`; logo.classList.add('token-logo'); const placeholder = document.createElement('div'); placeholder.classList.add('token-logo-placeholder'); placeholder.textContent = token.symbol ? token.symbol.charAt(0).toUpperCase() : '?'; // Use first letter of symbol // Handle image loading errors - show placeholder if image fails logo.onerror = () => { if (cardHeader.contains(logo)) { cardHeader.replaceChild(placeholder, logo); } }; // Handle cases where logoUrl is empty/invalid from the start if (!token.logoUrl || token.logoUrl === 'invalid-url') { // Added check for explicit invalid marker cardHeader.appendChild(placeholder); } else { cardHeader.appendChild(logo); } // Name and Symbol Text const nameSymbolDiv = document.createElement('div'); nameSymbolDiv.classList.add('token-name-symbol'); const title = document.createElement('h2'); title.textContent = token.name; const symbolSpan = document.createElement('span'); symbolSpan.textContent = token.symbol; nameSymbolDiv.appendChild(title); nameSymbolDiv.appendChild(symbolSpan); cardHeader.appendChild(nameSymbolDiv); // Add name/symbol div to header // --- Card Body --- const description = document.createElement('p'); description.classList.add('description'); description.textContent = token.description; const status = document.createElement('span'); // Use span for inline-block badge status.classList.add('status', token.status); // Add base and specific status class status.textContent = token.statusText; const link = document.createElement('a'); link.href = token.link; link.textContent = token.linkText || 'View Details'; // Use specific link text or default link.classList.add('link-button'); link.target = '_blank'; // Open link in new tab link.rel = 'noopener noreferrer'; // Security best practice // --- Assemble Card --- card.appendChild(cardHeader); card.appendChild(description); card.appendChild(status); card.appendChild(link); // Link button at the bottom tokenListContainer.appendChild(card); }); }) .catch(error => { console.error('Error fetching or processing token data:', error); tokenListContainer.innerHTML = '

Error loading token data. Please try again later.

'; }); }); This setup provides a more visually structured layout with logos (using placeholders from `via.placeholder.com` or a fallback initial if the URL is invalid/missing) and distinct status badges, bringing it closer to the feel of the reference site. You can replace the placeholder URLs in `data.json` with actual logo URLs.