mirror of
https://github.com/luxfi/scan.git
synced 2026-10-30 15:17:37 +00:00
- 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
797 lines
26 KiB
HTML
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>
|