Files
zeekay 041ab75e0a feat: redesign to modern Vercel-style explorer
- Pure black #000 background
- Inter font for UI, JetBrains Mono for data
- Clean search bar with white border focus state
- Minimal stats cards with large monospace numbers
- Clean table rows with subtle #111 separators
- Hover highlights on blocks/transactions
- Responsive grid layout
- Streamlined footer with social links
2026-01-26 20:54:38 -08:00

797 lines
26 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LuxScan - Lux Network Block Explorer</title>
<meta name="description" content="Explore blocks, transactions, and addresses on the Lux Network.">
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23ffffff'/%3E%3Cpath d='M10 20l6-12 6 12' stroke='%23000000' stroke-width='2' fill='none'/%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
background: #000;
color: #fff;
line-height: 1.5;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
.mono {
font-family: 'JetBrains Mono', 'SF Mono', Monaco, monospace;
}
a {
color: inherit;
text-decoration: none;
}
/* Header */
header {
border-bottom: 1px solid #222;
position: sticky;
top: 0;
z-index: 100;
background: #000;
}
.header-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo {
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
font-weight: 600;
letter-spacing: -0.02em;
}
.logo svg {
width: 28px;
height: 28px;
}
nav {
display: flex;
align-items: center;
gap: 32px;
}
nav a {
color: #888;
font-size: 14px;
font-weight: 500;
transition: color 0.15s;
}
nav a:hover {
color: #fff;
}
.network-toggle {
display: flex;
background: #111;
border: 1px solid #222;
border-radius: 6px;
padding: 2px;
}
.network-btn {
padding: 6px 12px;
border-radius: 4px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
border: none;
background: transparent;
color: #666;
transition: all 0.15s;
}
.network-btn.active {
background: #fff;
color: #000;
}
.network-btn:hover:not(.active) {
color: #999;
}
/* Search Section */
.search-section {
padding: 80px 24px;
text-align: center;
border-bottom: 1px solid #222;
}
.search-section h1 {
font-size: 48px;
font-weight: 700;
letter-spacing: -0.03em;
margin-bottom: 12px;
}
.search-section p {
color: #666;
font-size: 18px;
margin-bottom: 40px;
}
.search-container {
max-width: 640px;
margin: 0 auto;
}
.search-bar {
display: flex;
border: 1px solid #333;
border-radius: 8px;
overflow: hidden;
transition: border-color 0.15s;
}
.search-bar:focus-within {
border-color: #fff;
}
.search-input {
flex: 1;
background: transparent;
border: none;
padding: 16px 20px;
color: #fff;
font-size: 15px;
font-family: 'JetBrains Mono', monospace;
outline: none;
}
.search-input::placeholder {
color: #444;
}
.search-btn {
background: #fff;
border: none;
padding: 16px 24px;
color: #000;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: opacity 0.15s;
}
.search-btn:hover {
opacity: 0.9;
}
/* Stats Row */
.stats-row {
display: flex;
justify-content: center;
gap: 64px;
padding: 48px 24px;
border-bottom: 1px solid #222;
}
.stat {
text-align: center;
}
.stat-label {
font-size: 12px;
color: #666;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 8px;
}
.stat-value {
font-family: 'JetBrains Mono', monospace;
font-size: 32px;
font-weight: 500;
letter-spacing: -0.02em;
}
.stat-sub {
font-size: 13px;
color: #444;
margin-top: 4px;
}
/* Main Content */
main {
max-width: 1200px;
margin: 0 auto;
padding: 48px 24px;
}
/* Stats Cards */
.cards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 48px;
}
.card {
background: #000;
border: 1px solid #222;
border-radius: 8px;
padding: 24px;
transition: border-color 0.15s;
}
.card:hover {
border-color: #333;
}
.card-label {
font-size: 13px;
color: #666;
margin-bottom: 12px;
}
.card-value {
font-family: 'JetBrains Mono', monospace;
font-size: 28px;
font-weight: 500;
margin-bottom: 4px;
}
.card-sub {
font-size: 13px;
color: #444;
}
/* Tables */
.tables-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.table-card {
background: #000;
border: 1px solid #222;
border-radius: 8px;
overflow: hidden;
}
.table-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid #222;
}
.table-title {
font-size: 14px;
font-weight: 600;
}
.view-all {
font-size: 13px;
color: #666;
transition: color 0.15s;
}
.view-all:hover {
color: #fff;
}
.table-row {
display: flex;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #111;
transition: background 0.15s;
}
.table-row:last-child {
border-bottom: none;
}
.table-row:hover {
background: #0a0a0a;
}
.row-icon {
width: 36px;
height: 36px;
border-radius: 6px;
background: #111;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
color: #666;
}
.row-main {
flex: 1;
min-width: 0;
}
.row-primary {
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
color: #fff;
margin-bottom: 2px;
}
.row-secondary {
font-size: 12px;
color: #444;
}
.row-right {
text-align: right;
}
.row-amount {
font-family: 'JetBrains Mono', monospace;
font-size: 14px;
color: #fff;
margin-bottom: 2px;
}
.row-time {
font-size: 12px;
color: #444;
}
.badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 500;
}
.badge-success {
background: #0a2612;
color: #22c55e;
}
.badge-pending {
background: #1a1a00;
color: #eab308;
}
/* Footer */
footer {
border-top: 1px solid #222;
padding: 48px 24px;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.footer-brand p {
color: #444;
font-size: 14px;
max-width: 300px;
margin-top: 16px;
line-height: 1.6;
}
.footer-links {
display: flex;
gap: 64px;
}
.footer-column h4 {
font-size: 13px;
font-weight: 600;
color: #fff;
margin-bottom: 16px;
}
.footer-column ul {
list-style: none;
}
.footer-column li {
margin-bottom: 10px;
}
.footer-column a {
font-size: 14px;
color: #666;
transition: color 0.15s;
}
.footer-column a:hover {
color: #fff;
}
.footer-bottom {
max-width: 1200px;
margin: 48px auto 0;
padding-top: 24px;
border-top: 1px solid #222;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 13px;
color: #444;
}
.footer-socials {
display: flex;
gap: 16px;
}
.footer-socials a {
color: #444;
transition: color 0.15s;
}
.footer-socials a:hover {
color: #fff;
}
/* Responsive */
@media (max-width: 1024px) {
.cards-grid {
grid-template-columns: repeat(2, 1fr);
}
.tables-grid {
grid-template-columns: 1fr;
}
.stats-row {
gap: 32px;
flex-wrap: wrap;
}
}
@media (max-width: 768px) {
nav {
display: none;
}
.search-section h1 {
font-size: 32px;
}
.stat-value {
font-size: 24px;
}
.footer-content {
flex-direction: column;
gap: 48px;
}
.footer-links {
gap: 32px;
flex-wrap: wrap;
}
}
@media (max-width: 640px) {
.cards-grid {
grid-template-columns: 1fr;
}
.stats-row {
gap: 24px;
}
}
</style>
</head>
<body>
<header>
<div class="header-content">
<a href="/" class="logo">
<svg viewBox="0 0 32 32" fill="none">
<circle cx="16" cy="16" r="14" fill="#fff"/>
<path d="M10 20L16 8L22 20" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>LuxScan</span>
</a>
<nav>
<a href="#">Blocks</a>
<a href="#">Transactions</a>
<a href="#">Validators</a>
<a href="#">Tokens</a>
<a href="#">API</a>
</nav>
<div class="network-toggle">
<button class="network-btn active">Mainnet</button>
<button class="network-btn">Testnet</button>
</div>
</div>
</header>
<section class="search-section">
<h1>Lux Network Explorer</h1>
<p>Search blocks, transactions, addresses, and tokens</p>
<div class="search-container">
<div class="search-bar">
<input type="text" class="search-input" placeholder="Search by address, txn hash, block, or token...">
<button class="search-btn">Search</button>
</div>
</div>
</section>
<div class="stats-row">
<div class="stat">
<div class="stat-label">Latest Block</div>
<div class="stat-value mono" id="latest-block">18,472,651</div>
</div>
<div class="stat">
<div class="stat-label">Transactions</div>
<div class="stat-value mono">2.4B</div>
<div class="stat-sub">+12.4% (24h)</div>
</div>
<div class="stat">
<div class="stat-label">Gas Price</div>
<div class="stat-value mono">0.025</div>
<div class="stat-sub">LUX</div>
</div>
<div class="stat">
<div class="stat-label">Validators</div>
<div class="stat-value mono">1,847</div>
</div>
</div>
<main>
<div class="cards-grid">
<div class="card">
<div class="card-label">Total Blocks</div>
<div class="card-value">18,472,651</div>
<div class="card-sub">~0.4s block time</div>
</div>
<div class="card">
<div class="card-label">Total Transactions</div>
<div class="card-value">2.41B</div>
<div class="card-sub">4,521 TPS peak</div>
</div>
<div class="card">
<div class="card-label">Market Cap</div>
<div class="card-value">$847.2M</div>
<div class="card-sub">LUX $4.28 (+2.4%)</div>
</div>
<div class="card">
<div class="card-label">Total Staked</div>
<div class="card-value">142.8M</div>
<div class="card-sub">72.4% of supply</div>
</div>
</div>
<div class="tables-grid">
<div class="table-card">
<div class="table-header">
<div class="table-title">Latest Blocks</div>
<a href="#" class="view-all">View All</a>
</div>
<div class="table-row">
<div class="row-icon">Bk</div>
<div class="row-main">
<div class="row-primary">18472651</div>
<div class="row-secondary">142 txns</div>
</div>
<div class="row-right">
<div class="row-amount">0.0847 LUX</div>
<div class="row-time">2s ago</div>
</div>
</div>
<div class="table-row">
<div class="row-icon">Bk</div>
<div class="row-main">
<div class="row-primary">18472650</div>
<div class="row-secondary">98 txns</div>
</div>
<div class="row-right">
<div class="row-amount">0.0621 LUX</div>
<div class="row-time">4s ago</div>
</div>
</div>
<div class="table-row">
<div class="row-icon">Bk</div>
<div class="row-main">
<div class="row-primary">18472649</div>
<div class="row-secondary">256 txns</div>
</div>
<div class="row-right">
<div class="row-amount">0.1284 LUX</div>
<div class="row-time">6s ago</div>
</div>
</div>
<div class="table-row">
<div class="row-icon">Bk</div>
<div class="row-main">
<div class="row-primary">18472648</div>
<div class="row-secondary">184 txns</div>
</div>
<div class="row-right">
<div class="row-amount">0.0923 LUX</div>
<div class="row-time">8s ago</div>
</div>
</div>
<div class="table-row">
<div class="row-icon">Bk</div>
<div class="row-main">
<div class="row-primary">18472647</div>
<div class="row-secondary">67 txns</div>
</div>
<div class="row-right">
<div class="row-amount">0.0412 LUX</div>
<div class="row-time">10s ago</div>
</div>
</div>
</div>
<div class="table-card">
<div class="table-header">
<div class="table-title">Latest Transactions</div>
<a href="#" class="view-all">View All</a>
</div>
<div class="table-row">
<div class="row-icon">Tx</div>
<div class="row-main">
<div class="row-primary">0x8f4e...3a21</div>
<div class="row-secondary">0x7c2d...8f12 -> 0x9e4a...2b67</div>
</div>
<div class="row-right">
<div class="row-amount">14.28 LUX</div>
<div class="row-time"><span class="badge badge-success">Success</span></div>
</div>
</div>
<div class="table-row">
<div class="row-icon">Tx</div>
<div class="row-main">
<div class="row-primary">0x2b91...7c4f</div>
<div class="row-secondary">0x1a8e...4d29 -> 0x5f3c...1e84</div>
</div>
<div class="row-right">
<div class="row-amount">847.5 LUX</div>
<div class="row-time"><span class="badge badge-success">Success</span></div>
</div>
</div>
<div class="table-row">
<div class="row-icon">Tx</div>
<div class="row-main">
<div class="row-primary">0x6d3a...9e28</div>
<div class="row-secondary">0x4b7f...2c91 -> 0x8a1d...6f43</div>
</div>
<div class="row-right">
<div class="row-amount">2.14 LUX</div>
<div class="row-time"><span class="badge badge-pending">Pending</span></div>
</div>
</div>
<div class="table-row">
<div class="row-icon">Tx</div>
<div class="row-main">
<div class="row-primary">0x1c7e...4a83</div>
<div class="row-secondary">0x3e9b...7d56 -> 0x2f8a...9c12</div>
</div>
<div class="row-right">
<div class="row-amount">56.78 LUX</div>
<div class="row-time"><span class="badge badge-success">Success</span></div>
</div>
</div>
<div class="table-row">
<div class="row-icon">Tx</div>
<div class="row-main">
<div class="row-primary">0x9f2d...1b47</div>
<div class="row-secondary">0x6c4a...8e23 -> 0x7d1f...3a98</div>
</div>
<div class="row-right">
<div class="row-amount">128.9 LUX</div>
<div class="row-time"><span class="badge badge-success">Success</span></div>
</div>
</div>
</div>
</div>
</main>
<footer>
<div class="footer-content">
<div class="footer-brand">
<div class="logo">
<svg viewBox="0 0 32 32" fill="none" width="28" height="28">
<circle cx="16" cy="16" r="14" fill="#fff"/>
<path d="M10 20L16 8L22 20" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>LuxScan</span>
</div>
<p>The official block explorer for the Lux Network. Track transactions, explore blocks, and monitor network activity.</p>
</div>
<div class="footer-links">
<div class="footer-column">
<h4>Explore</h4>
<ul>
<li><a href="#">Blocks</a></li>
<li><a href="#">Transactions</a></li>
<li><a href="#">Validators</a></li>
<li><a href="#">Tokens</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Resources</h4>
<ul>
<li><a href="#">API Docs</a></li>
<li><a href="#">Developer Tools</a></li>
<li><a href="#">Network Status</a></li>
</ul>
</div>
<div class="footer-column">
<h4>Network</h4>
<ul>
<li><a href="#">Mainnet</a></li>
<li><a href="#">Testnet</a></li>
<li><a href="https://lux.network">Lux.Network</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-bottom">
<span>2026 LuxScan</span>
<div class="footer-socials">
<a href="https://x.com/luxfi" aria-label="X">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
<path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
</svg>
</a>
<a href="https://discord.gg/luxfi" aria-label="Discord">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
<path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/>
</svg>
</a>
<a href="https://github.com/luxfi" aria-label="GitHub">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
</svg>
</a>
</div>
</div>
</footer>
<script>
let blockNumber = 18472651;
const blockElement = document.getElementById('latest-block');
setInterval(() => {
blockNumber++;
blockElement.textContent = blockNumber.toLocaleString();
}, 2000);
document.querySelectorAll('.network-btn').forEach(btn => {
btn.addEventListener('click', function() {
document.querySelectorAll('.network-btn').forEach(b => b.classList.remove('active'));
this.classList.add('active');
});
});
</script>
</body>
</html>