oib/aitbc
1
0
Fork 0
Code Issues Pull Requests Actions 7 Packages Projects Releases Wiki Activity

feat: add skeleton loaders to marketplace and integrate global header across docs

Browse Source 
Marketplace:
- Add skeleton loading states for stats grid and GPU offer cards
- Show animated skeleton placeholders during data fetch
- Add skeleton CSS with shimmer animation and dark mode support
- Wrap stats section in #stats-grid container for skeleton injection

Trade Exchange:
- Replace inline header with data-global-header component
- Switch GPU offers to production API (/api/miners/list)
- Add fallback to demo
This commit is contained in:
oib
2026-02-15 20:44:04 +01:00
parent 7062b2cc78
commit fdc3012780
29 changed files with 19780 additions and 388 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
apps/marketplace-web/src/main.ts
View File

@@ -63,6 +63,7 @@ app.innerHTML = `
<span>Open bids awaiting match</span>
</article>
</section>
<section id="stats-grid">
<section class="panels">
<article class="panel" id="offers-panel">
@@ -104,6 +105,7 @@ const selectors = {
openCapacity: document.querySelector<HTMLSpanElement>('#stat-open-capacity')!,
averagePrice: document.querySelector<HTMLSpanElement>('#stat-average-price')!,
activeBids: document.querySelector<HTMLSpanElement>('#stat-active-bids')!,
statsWrapper: document.querySelector<HTMLDivElement>('#stats-grid')!,
offersWrapper: document.querySelector<HTMLDivElement>('#offers-table-wrapper')!,
bidForm: document.querySelector<HTMLFormElement>('#bid-form')!,
toast: document.querySelector<HTMLDivElement>('#toast')!,
@@ -201,6 +203,9 @@ function showToast(message: string, duration = 2500): void {
}
async function loadDashboard(): Promise<void> {
// Show skeleton loading states
showSkeletons();
try {
const [stats, offers] = await Promise.all([
fetchMarketplaceStats(),
@@ -219,6 +224,31 @@ async function loadDashboard(): Promise<void> {
}
}
function showSkeletons() {
const statsWrapper = selectors.statsWrapper;
const offersWrapper = selectors.offersWrapper;
if (statsWrapper) {
statsWrapper.innerHTML = `
<div class="skeleton-grid">
${Array(4).fill('').map(() => `
<div class="skeleton skeleton-card"></div>
`).join('')}
</div>
`;
}
if (offersWrapper) {
offersWrapper.innerHTML = `
<div class="skeleton-list">
${Array(6).fill('').map(() => `
<div class="skeleton skeleton-card"></div>
`).join('')}
</div>
`;
}
}
selectors.bidForm?.addEventListener('submit', async (event) => {
event.preventDefault();

36
apps/marketplace-web/src/style.css
View File

@@ -8,6 +8,42 @@
-moz-osx-font-smoothing: grayscale;
}
/* Skeleton loading styles */
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 4px;
}
@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton-card {
height: 120px;
margin-bottom: 1rem;
}
.skeleton-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.skeleton-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.dark .skeleton {
background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
background-size: 200% 100;
}
/* Dark mode variables */
.dark {
--bg-primary: #1f2937;

131
apps/trade-exchange/index.html
View File

@@ -8,8 +8,9 @@
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<link rel="stylesheet" href="/assets/css/aitbc.css?v=20241229-1305">
<script src="/assets/js/axios.min.js?v=20241229-1305"></script>
<script src="/assets/js/lucide.js?v=20241229-1305"></script>
<link rel="stylesheet" href="/assets/css/site-header.css">
<script src="/assets/js/axios.min.js?v=20260215-2015"></script>
<script src="/assets/js/lucide.js?v=20260215-2015"></script>
<style>
.gradient-bg {
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
@@ -49,40 +50,7 @@
</style>
</head>
<body class="bg-gray-50 dark:bg-gray-900 transition-colors duration-300">
<!-- Header -->
<header class="gradient-bg text-white shadow-lg">
<div class="container mx-auto px-4 py-6">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<i data-lucide="trending-up" class="w-8 h-8"></i>
<h1 class="text-2xl font-bold">AITBC Trade Exchange</h1>
</div>
<nav class="flex items-center space-x-6">
<a href="https://aitbc.bubuit.net/" class="nav-button" title="Back to AITBC Home">
<i data-lucide="home" class="w-5 h-5"></i>
</a>
<button onclick="showSection('trade')" class="nav-button">Trade</button>
<button onclick="showSection('marketplace')" class="nav-button">Marketplace</button>
<button onclick="showSection('wallet')" class="nav-button">Wallet</button>
<button onclick="toggleDarkMode()" class="nav-button" title="Toggle dark mode">
<i data-lucide="moon" class="w-5 h-5" id="darkModeIcon"></i>
</button>
<button id="navConnectBtn" onclick="connectWallet()" class="bg-white text-orange-600 px-4 py-2 rounded-lg hover:bg-orange-100 transition">
<i data-lucide="wallet" class="w-4 h-4 inline mr-2"></i>Connect Wallet
</button>
<div id="navUserInfo" class="hidden flex items-center space-x-3">
<span class="text-sm text-white" id="navUsername">-</span>
<button onclick="showSection('wallet')" class="nav-button">
<i data-lucide="user" class="w-5 h-5"></i>
</button>
<button onclick="logout()" class="nav-button">
<i data-lucide="log-out" class="w-5 h-5"></i>
</button>
</div>
</nav>
</div>
</div>
</header>
<div data-global-header></div>
<!-- Price Ticker -->
<section class="bg-white dark:bg-gray-800 border-b dark:border-gray-700">
@@ -423,6 +391,8 @@
</div>
<script>
console.log('Exchange script loaded and executing globally.');
console.log('Script execution initiated.');
// API Configuration
const API_BASE = window.location.origin + '/api';
const BLOCKCHAIN_API = window.location.origin + '/rpc';
@@ -435,6 +405,7 @@
// Initialize
document.addEventListener('DOMContentLoaded', () => {
console.log('DOMContentLoaded event fired, starting script execution.');
lucide.createIcons();
updatePrices();
loadGPUOffers();
@@ -480,20 +451,6 @@
}
}
function updateThemeButton(theme) {
const icon = document.getElementById('darkModeIcon');
if (icon) {
if (theme === 'dark') {
icon.setAttribute('data-lucide', 'sun');
} else {
icon.setAttribute('data-lucide', 'moon');
}
if (window.lucide) {
lucide.createIcons();
}
}
}
function getPreferredTheme() {
// 1. Check localStorage first (user preference for exchange)
const saved = localStorage.getItem('exchangeTheme');
@@ -1084,23 +1041,26 @@
// Load GPU Offers
async function loadGPUOffers() {
console.log('Switch to real GPU offers initiated from:', API_BASE + '/miners/list');
try {
const response = await axios.get(`${API_BASE}/marketplace/offers`);
displayGPUOffers(response.data);
const response = await fetch(API_BASE + '/miners/list');
console.log('API response status:', response.status, 'OK:', response.ok);
console.log('Response headers:', response.headers);
const responseText = await response.text();
console.log('Raw response text:', responseText);
if (!response.ok) throw new Error(`HTTP error: status ${response.status}, message: ${response.statusText}`);
const data = JSON.parse(responseText);
console.log('Parsed API data:', data);
if (data.gpus && data.gpus.length > 0) {
displayRealGPUOffers(data.gpus);
} else {
console.log('No GPU data from API, falling back to demo offers temporarily.');
displayDemoOffers();
}
} catch (error) {
// Display demo offers
displayGPUOffers([{
id: '1',
provider: '${MINER_API_KEY}',
capacity: 1,
price: 50,
attributes: {
gpu_model: 'NVIDIA RTX 4060 Ti',
gpu_memory_gb: 16,
cuda_version: '12.4',
supported_models: ['stable-diffusion', 'llama2-7b']
}
}]);
console.log('API error details:', error.message, 'Stack:', error.stack);
console.log('Falling back to demo offers as a temporary measure.');
displayDemoOffers();
}
}
@@ -1221,18 +1181,48 @@
<script>
// GPU Integration
function displayDemoOffers() {
console.log('Exchange script loaded, displayDemoOffers defined.');
const container = document.getElementById('gpuList');
if (!container) return;
container.innerHTML = `
<div class="bg-white rounded-lg shadow-lg p-6 card-hover">
<div class="flex justify-between items-start mb-4">
<h3 class="text-lg font-semibold">Demo RTX 4090</h3>
<span class="bg-blue-100 text-blue-800 px-2 py-1 rounded text-sm">Demo</span>
</div>
<div class="space-y-2 text-sm text-gray-600 mb-4">
<p><i data-lucide="monitor" class="w-4 h-4 inline mr-1"></i>Memory: 24 GB</p>
<p><i data-lucide="zap" class="w-4 h-4 inline mr-1"></i>CUDA: 12.4</p>
<p><i data-lucide="cpu" class="w-4 h-4 inline mr-1"></i>Concurrency: 4 jobs</p>
<p><i data-lucide="map-pin" class="w-4 h-4 inline mr-1"></i>Region: EU-West</p>
</div>
<div class="flex justify-between items-center">
<span class="text-2xl font-bold text-purple-600">42 AITBC/hr</span>
<button onclick="purchaseGPU('demo-rtx4090')" class="bg-purple-600 text-white px-4 py-2 rounded hover:bg-purple-700 transition">Purchase</button>
</div>
</div>
`;
if (window.lucide) {
window.lucide.createIcons();
}
}
async function loadRealGPUOffers() {
console.log('Switching to production: loadRealGPUOffers called with API_BASE:', API_BASE + '/miners/list');
try {
const response = await fetch('http://localhost:8091/miners/list');
const response = await fetch(API_BASE + '/miners/list');
console.log('Production API response status:', response.status);
if (!response.ok) throw new Error(`HTTP error: status ${response.status}`);
const data = await response.json();
console.log('Production API data:', data);
if (data.gpus && data.gpus.length > 0) {
displayRealGPUOffers(data.gpus);
} else {
displayDemoOffers();
throw new Error('No GPU data from production API');
}
} catch (error) {
console.log('Using demo GPU offers');
console.log('Production API error:', error.message, 'Using demo offers as fallback.');
displayDemoOffers();
}
}
@@ -1272,5 +1262,8 @@
const originalLoadGPUOffers = loadGPUOffers;
loadGPUOffers = loadRealGPUOffers;
</script>
<script>
console.log('Exchange script loaded, displayDemoOffers defined.');
</script>
</body>
</html>

217
assets/css/site-header.css Normal file
View File

@@ -0,0 +1,217 @@
:root {
--global-header-bg: rgba(255, 255, 255, 0.95);
--global-header-border: rgba(15, 23, 42, 0.08);
--global-header-text: #111827;
--global-header-muted: #6b7280;
--global-header-pill: rgba(37, 99, 235, 0.07);
--global-header-pill-hover: rgba(37, 99, 235, 0.15);
--global-header-accent: #2563eb;
--global-header-cta-text: #fff;
}
[data-theme='dark'],
body.dark {
--global-header-bg: rgba(15, 23, 42, 0.92);
--global-header-border: rgba(148, 163, 184, 0.2);
--global-header-text: #f3f4f6;
--global-header-muted: #94a3b8;
--global-header-pill: rgba(59, 130, 246, 0.15);
--global-header-pill-hover: rgba(59, 130, 246, 0.25);
--global-header-accent: #60a5fa;
--global-header-cta-text: #0f172a;
}
body.light {
--global-header-bg: rgba(255, 255, 255, 0.97);
--global-header-border: rgba(15, 23, 42, 0.08);
--global-header-text: #111827;
--global-header-muted: #6b7280;
--global-header-pill: rgba(37, 99, 235, 0.07);
--global-header-pill-hover: rgba(37, 99, 235, 0.15);
--global-header-accent: #2563eb;
--global-header-cta-text: #fff;
}
.global-header {
position: sticky;
top: 0;
width: 100%;
background: var(--global-header-bg);
border-bottom: 1px solid var(--global-header-border);
backdrop-filter: blur(12px);
z-index: 50;
}
.global-header__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0.85rem 1.25rem;
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
justify-content: space-between;
}
.global-brand {
display: flex;
align-items: center;
gap: 0.85rem;
text-decoration: none;
}
.global-brand__icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, #2563eb, #7c3aed);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.2rem;
box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
}
.global-brand__text {
display: flex;
flex-direction: column;
color: var(--global-header-text);
font-weight: 600;
line-height: 1.2;
}
.global-brand__text small {
font-weight: 400;
font-size: 0.8rem;
color: var(--global-header-muted);
}
.global-nav {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.global-nav__link {
text-decoration: none;
color: var(--global-header-text);
font-size: 0.92rem;
font-weight: 500;
padding: 0.35rem 0.9rem;
border-radius: 999px;
background: transparent;
transition: all 0.2s ease;
}
.global-nav__link:hover,
.global-nav__link:focus-visible,
.global-nav__link.active {
background: var(--global-header-pill);
color: var(--global-header-accent);
}
.global-nav__cta {
text-decoration: none;
background: linear-gradient(135deg, #2563eb, #7c3aed);
color: var(--global-header-cta-text);
font-weight: 600;
padding: 0.45rem 1.4rem;
border-radius: 999px;
box-shadow: 0 10px 25px rgba(37, 99, 235, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.global-nav__cta:hover {
transform: translateY(-1px);
box-shadow: 0 15px 30px rgba(37, 99, 235, 0.3);
}
.global-header__actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.global-dark-toggle {
border: 1px solid var(--global-header-border);
background: transparent;
color: var(--global-header-text);
padding: 0.35rem 0.9rem;
border-radius: 999px;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: 0.35rem;
cursor: pointer;
transition: all 0.2s ease;
}
.global-dark-toggle:hover {
border-color: var(--global-header-accent);
color: var(--global-header-accent);
}
.global-subnav {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.25rem 0.75rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.global-subnav button,
.global-subnav a {
border: 1px solid var(--global-header-border);
background: var(--global-header-pill);
color: var(--global-header-text);
padding: 0.4rem 0.95rem;
border-radius: 999px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: all 0.2s ease;
}
.global-subnav button:hover,
.global-subnav a:hover,
.global-subnav button.active,
.global-subnav a.active {
background: var(--global-header-pill-hover);
color: var(--global-header-accent);
}
@media (max-width: 960px) {
.global-header__inner {
flex-direction: column;
align-items: flex-start;
}
.global-header__actions {
width: 100%;
justify-content: flex-start;
}
.global-nav {
width: 100%;
}
}
@media (max-width: 640px) {
.global-brand__text span {
font-size: 1rem;
}
.global-nav__cta {
width: 100%;
text-align: center;
}
.global-header__actions {
flex-direction: column;
align-items: stretch;
}
}

14
website/assets/css/main.css
View File

@@ -6,8 +6,8 @@
:root {
--primary-color: #2563eb;
--secondary-color: #1e40af;
--accent-color: #3b82f6;
--secondary-color: #7c3aed;
--accent-color: #0ea5e9;
--success-color: #10b981;
--warning-color: #f59e0b;
--danger-color: #ef4444;
@@ -15,18 +15,18 @@
--text-light: #6b7280;
--bg-light: #f9fafb;
--bg-white: #ffffff;
--gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
}
[data-theme="dark"] {
--primary-color: #3b82f6;
--secondary-color: #2563eb;
--accent-color: #60a5fa;
--primary-color: #60a5fa;
--secondary-color: #a855f7;
--accent-color: #38bdf8;
--text-dark: #f9fafb;
--text-light: #d1d5db;
--bg-light: #111827;
--bg-white: #1f2937;
--gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--gradient: linear-gradient(135deg, #1d4ed8 0%, #7c3aed 100%);
}
body {

217
website/assets/css/site-header.css Normal file
View File

@@ -0,0 +1,217 @@
:root {
--global-header-bg: rgba(255, 255, 255, 0.95);
--global-header-border: rgba(15, 23, 42, 0.08);
--global-header-text: #111827;
--global-header-muted: #6b7280;
--global-header-pill: rgba(37, 99, 235, 0.07);
--global-header-pill-hover: rgba(37, 99, 235, 0.15);
--global-header-accent: #2563eb;
--global-header-cta-text: #fff;
}
[data-theme='dark'],
body.dark {
--global-header-bg: rgba(15, 23, 42, 0.92);
--global-header-border: rgba(148, 163, 184, 0.2);
--global-header-text: #f3f4f6;
--global-header-muted: #94a3b8;
--global-header-pill: rgba(59, 130, 246, 0.15);
--global-header-pill-hover: rgba(59, 130, 246, 0.25);
--global-header-accent: #60a5fa;
--global-header-cta-text: #0f172a;
}
body.light {
--global-header-bg: rgba(255, 255, 255, 0.97);
--global-header-border: rgba(15, 23, 42, 0.08);
--global-header-text: #111827;
--global-header-muted: #6b7280;
--global-header-pill: rgba(37, 99, 235, 0.07);
--global-header-pill-hover: rgba(37, 99, 235, 0.15);
--global-header-accent: #2563eb;
--global-header-cta-text: #fff;
}
.global-header {
position: sticky;
top: 0;
width: 100%;
background: var(--global-header-bg);
border-bottom: 1px solid var(--global-header-border);
backdrop-filter: blur(12px);
z-index: 50;
}
.global-header__inner {
max-width: 1200px;
margin: 0 auto;
padding: 0.85rem 1.25rem;
display: flex;
align-items: center;
gap: 1.25rem;
flex-wrap: wrap;
justify-content: space-between;
}
.global-brand {
display: flex;
align-items: center;
gap: 0.85rem;
text-decoration: none;
}
.global-brand__icon {
width: 44px;
height: 44px;
border-radius: 12px;
background: linear-gradient(135deg, #2563eb, #7c3aed);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.2rem;
box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
}
.global-brand__text {
display: flex;
flex-direction: column;
color: var(--global-header-text);
font-weight: 600;
line-height: 1.2;
}
.global-brand__text small {
font-weight: 400;
font-size: 0.8rem;
color: var(--global-header-muted);
}
.global-nav {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.global-nav__link {
text-decoration: none;
color: var(--global-header-text);
font-size: 0.92rem;
font-weight: 500;
padding: 0.35rem 0.9rem;
border-radius: 999px;
background: transparent;
transition: all 0.2s ease;
}
.global-nav__link:hover,
.global-nav__link:focus-visible,
.global-nav__link.active {
background: var(--global-header-pill);
color: var(--global-header-accent);
}
.global-nav__cta {
text-decoration: none;
background: linear-gradient(135deg, #2563eb, #7c3aed);
color: var(--global-header-cta-text);
font-weight: 600;
padding: 0.45rem 1.4rem;
border-radius: 999px;
box-shadow: 0 10px 25px rgba(37, 99, 235, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.global-nav__cta:hover {
transform: translateY(-1px);
box-shadow: 0 15px 30px rgba(37, 99, 235, 0.3);
}
.global-header__actions {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.global-dark-toggle {
border: 1px solid var(--global-header-border);
background: transparent;
color: var(--global-header-text);
padding: 0.35rem 0.9rem;
border-radius: 999px;
font-size: 0.9rem;
display: inline-flex;
align-items: center;
gap: 0.35rem;
cursor: pointer;
transition: all 0.2s ease;
}
.global-dark-toggle:hover {
border-color: var(--global-header-accent);
color: var(--global-header-accent);
}
.global-subnav {
max-width: 1200px;
margin: 0 auto;
padding: 0 1.25rem 0.75rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.global-subnav button,
.global-subnav a {
border: 1px solid var(--global-header-border);
background: var(--global-header-pill);
color: var(--global-header-text);
padding: 0.4rem 0.95rem;
border-radius: 999px;
font-weight: 500;
cursor: pointer;
text-decoration: none;
transition: all 0.2s ease;
}
.global-subnav button:hover,
.global-subnav a:hover,
.global-subnav button.active,
.global-subnav a.active {
background: var(--global-header-pill-hover);
color: var(--global-header-accent);
}
@media (max-width: 960px) {
.global-header__inner {
flex-direction: column;
align-items: flex-start;
}
.global-header__actions {
width: 100%;
justify-content: flex-start;
}
.global-nav {
width: 100%;
}
}
@media (max-width: 640px) {
.global-brand__text span {
font-size: 1rem;
}
.global-nav__cta {
width: 100%;
text-align: center;
}
.global-header__actions {
flex-direction: column;
align-items: stretch;
}
}

2
website/assets/js/axios.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

118
website/assets/js/global-header.js Normal file
View File

@@ -0,0 +1,118 @@
(function () {
const NAV_ITEMS = [
{ key: 'home', label: 'Home', href: '/' },
{ key: 'explorer', label: 'Explorer', href: '/explorer/' },
{ key: 'marketplace', label: 'Marketplace', href: '/marketplace/' },
{ key: 'exchange', label: 'Exchange', href: '/Exchange/' },
{ key: 'docs', label: 'Docs', href: '/docs/index.html' },
];
const CTA = { label: 'Launch Marketplace', href: '/marketplace/' };
function determineActiveKey(pathname) {
if (pathname.startsWith('/explorer')) return 'explorer';
if (pathname.startsWith('/marketplace')) return 'marketplace';
if (pathname.toLowerCase().startsWith('/exchange')) return 'exchange';
if (pathname.startsWith('/docs')) return 'docs';
return 'home';
}
function buildHeader(activeKey) {
const navLinks = NAV_ITEMS.map((item) => {
const active = item.key === activeKey ? 'active' : '';
return `<a href="${item.href}" class="global-nav__link ${active}">${item.label}</a>`;
}).join('');
return `
<header class="global-header">
<div class="global-header__inner">
<a class="global-brand" href="/">
<div class="global-brand__icon">
<i class="fas fa-cube"></i>
</div>
<div class="global-brand__text">
<span>AITBC Platform</span>
<small>AI Blockchain Network</small>
</div>
</a>
<nav class="global-nav">${navLinks}</nav>
<div class="global-header__actions">
<button type="button" class="global-dark-toggle" data-role="global-theme-toggle">
<span class="global-dark-toggle__emoji">🌙</span>
<span class="global-dark-toggle__text">Dark</span>
</button>
<a href="${CTA.href}" class="global-nav__cta">${CTA.label}</a>
</div>
</div>
</header>
`;
}
function getCurrentTheme() {
if (document.documentElement.hasAttribute('data-theme')) {
return document.documentElement.getAttribute('data-theme');
}
if (document.documentElement.classList.contains('dark')) return 'dark';
if (document.body && document.body.classList.contains('light')) return 'light';
return 'light';
}
function updateToggleLabel(theme) {
const emojiEl = document.querySelector('.global-dark-toggle__emoji');
const textEl = document.querySelector('.global-dark-toggle__text');
if (!emojiEl || !textEl) return;
if (theme === 'dark') {
emojiEl.textContent = '🌙';
textEl.textContent = 'Dark';
} else {
emojiEl.textContent = '☀️';
textEl.textContent = 'Light';
}
}
function bindThemeToggle() {
const toggle = document.querySelector('[data-role="global-theme-toggle"]');
if (!toggle) return;
toggle.addEventListener('click', () => {
if (typeof window.toggleDarkMode === 'function') {
window.toggleDarkMode();
} else if (typeof window.toggleTheme === 'function') {
window.toggleTheme();
} else {
const isDark = document.documentElement.classList.toggle('dark');
if (isDark) {
document.documentElement.setAttribute('data-theme', 'dark');
} else {
document.documentElement.removeAttribute('data-theme');
}
}
setTimeout(() => updateToggleLabel(getCurrentTheme()), 0);
});
updateToggleLabel(getCurrentTheme());
}
function initHeader() {
const activeKey = determineActiveKey(window.location.pathname);
const headerHTML = buildHeader(activeKey);
const placeholder = document.querySelector('[data-global-header]');
const existing = placeholder || document.querySelector('.global-header');
if (existing) {
existing.outerHTML = headerHTML;
} else {
document.body.insertAdjacentHTML('afterbegin', headerHTML);
}
bindThemeToggle();
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initHeader);
} else {
initHeader();
}
})();

18843
website/assets/js/lucide.js Normal file
View File

File diff suppressed because it is too large Load Diff

139
website/assets/js/skeleton.js Normal file
View File

@@ -0,0 +1,139 @@
/**
* Skeleton Loading States for AITBC Website
* Provides loading placeholders while content is being fetched
*/
class SkeletonLoader {
constructor() {
this.skeletonStyles = `
.skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: skeleton-loading 1.5s infinite;
border-radius: 4px;
}
@keyframes skeleton-loading {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton-text {
height: 1rem;
margin-bottom: 0.5rem;
}
.skeleton-text.title {
height: 2rem;
width: 60%;
}
.skeleton-text.subtitle {
height: 1.2rem;
width: 40%;
}
.skeleton-card {
height: 120px;
margin-bottom: 1rem;
}
.skeleton-button {
height: 2.5rem;
width: 120px;
border-radius: 6px;
}
.dark .skeleton {
background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
background-size: 200% 100%;
}
`;
this.init();
}
init() {
// Inject skeleton styles
if (!document.getElementById('skeleton-styles')) {
const style = document.createElement('style');
style.id = 'skeleton-styles';
style.textContent = this.skeletonStyles;
document.head.appendChild(style);
}
}
// Create skeleton element
createSkeleton(type = 'text', customClass = '') {
const skeleton = document.createElement('div');
skeleton.className = `skeleton skeleton-${type} ${customClass}`;
return skeleton;
}
// Show skeleton for a container
showSkeleton(container, config = {}) {
const {
type = 'text',
count = 3,
customClass = ''
} = config;
// Store original content
const originalContent = container.innerHTML;
container.dataset.originalContent = originalContent;
// Clear and add skeletons
container.innerHTML = '';
for (let i = 0; i < count; i++) {
container.appendChild(this.createSkeleton(type, customClass));
}
}
// Hide skeleton and restore content
hideSkeleton(container, content = null) {
if (content) {
container.innerHTML = content;
} else if (container.dataset.originalContent) {
container.innerHTML = container.dataset.originalContent;
delete container.dataset.originalContent;
}
}
// Marketplace specific skeletons
showMarketplaceSkeletons() {
const statsContainer = document.querySelector('#stats-container');
const offersContainer = document.querySelector('#offers-container');
if (statsContainer) {
this.showSkeleton(statsContainer, {
type: 'card',
count: 4,
customClass: 'stats-skeleton'
});
}
if (offersContainer) {
this.showSkeleton(offersContainer, {
type: 'card',
count: 6,
customClass: 'offer-skeleton'
});
}
}
}
// Initialize skeleton loader
window.skeletonLoader = new SkeletonLoader();
// Auto-hide skeletons when content is loaded
document.addEventListener('DOMContentLoaded', () => {
// Hide skeletons after a timeout as fallback
setTimeout(() => {
document.querySelectorAll('.skeleton').forEach(skeleton => {
const container = skeleton.parentElement;
if (container && container.dataset.originalContent) {
window.skeletonLoader.hideSkeleton(container);
}
});
}, 5000);
});

32
website/assets/js/web-vitals.js
View File

@@ -5,12 +5,16 @@
'use strict';
function sendToAnalytics(metric) {
const safeEntries = Array.isArray(metric.entries) ? metric.entries : [];
const safeValue = Number.isFinite(metric.value) ? Math.round(metric.value) : 0;
const safeDelta = Number.isFinite(metric.delta) ? Math.round(metric.delta) : 0;
const data = {
name: metric.name,
value: Math.round(metric.value),
id: metric.id,
delta: Math.round(metric.delta),
entries: metric.entries.map(e => ({
value: safeValue,
id: metric.id || 'unknown',
delta: safeDelta,
entries: safeEntries.map(e => ({
name: e.name,
startTime: e.startTime,
duration: e.duration
@@ -19,9 +23,27 @@
timestamp: new Date().toISOString()
};
const payload = JSON.stringify(data);
// Send to analytics endpoint
if (navigator.sendBeacon) {
navigator.sendBeacon('/api/web-vitals', JSON.stringify(data));
const blob = new Blob([payload], { type: 'application/json' });
const ok = navigator.sendBeacon('/api/web-vitals', blob);
if (!ok) {
fetch('/api/web-vitals', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: payload,
keepalive: true
}).catch(() => {});
}
} else {
fetch('/api/web-vitals', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: payload,
keepalive: true
}).catch(() => {});
}
// Also log to console in development

22
website/docs/api.html
View File

@@ -8,26 +8,9 @@
<link rel="stylesheet" href="css/docs.css">
</head>
<body>
<!-- Header -->
<header class="site-header">
<div class="container">
<div class="header-inner">
<a href="/" class="brand">
<i class="fas fa-cube"></i>
<span>AITBC</span>
</a>
<nav class="header-nav">
<a href="/">Home</a>
<a href="/explorer/">Explorer</a>
<a href="/Exchange/">Exchange</a>
<a href="/docs/index.html" class="active">Docs</a>
<button id="theme-toggle" class="theme-toggle" title="Toggle theme"><i class="fas fa-sun"></i></button>
</nav>
</div>
</div>
</header>
<div data-global-header></div>
<main>
<main>
<div class="container">
<!-- Back Button -->
<a href="../docs/index.html" class="back-button">
@@ -215,5 +198,6 @@
</div>
</footer>
<script src="js/theme.js"></script>
<script src="../assets/js/global-header.js"></script>
</body>
</html>

22
website/docs/blockchain-node.html
View File

@@ -8,26 +8,9 @@
<link rel="stylesheet" href="css/docs.css">
</head>
<body>
<!-- Header -->
<header class="site-header">
<div class="container">
<div class="header-inner">
<a href="/" class="brand">
<i class="fas fa-cube"></i>
<span>AITBC</span>
</a>
<nav class="header-nav">
<a href="/">Home</a>
<a href="/explorer/">Explorer</a>
<a href="/Exchange/">Exchange</a>
<a href="/docs/index.html" class="active">Docs</a>
<button id="theme-toggle" class="theme-toggle" title="Toggle theme"><i class="fas fa-sun"></i></button>
</nav>
</div>
</div>
</header>
<div data-global-header></div>
<!-- Main Content -->
<!-- Main Content -->
<main>
<div class="container">
<!-- Breadcrumb -->
@@ -205,5 +188,6 @@ python -m aitbc_chain.node</code></pre>
// Add any interactive functionality here
</script>
<script src="js/theme.js"></script>
<script src="../assets/js/global-header.js"></script>
</body>
</html>

2
website/docs/browser-wallet.html
View File

@@ -7,6 +7,8 @@
<link rel="stylesheet" href="css/docs.css">
</head>
<body>
<div data-global-header></div>
<p>Redirecting to <a href="/wallet/">AITBC Browser Wallet</a></p>
<script src="../assets/js/global-header.js"></script>
</body>
</html>

22
website/docs/clients.html
View File

@@ -8,26 +8,9 @@
<link rel="stylesheet" href="css/docs.css">
</head>
<body>
<!-- Header -->
<header class="site-header">
<div class="container">
<div class="header-inner">
<a href="/" class="brand">
<i class="fas fa-cube"></i>
<span>AITBC</span>
</a>
<nav class="header-nav">
<a href="/">Home</a>
<a href="/explorer/">Explorer</a>
<a href="/Exchange/">Exchange</a>
<a href="/docs/index.html" class="active">Docs</a>
<button id="theme-toggle" class="theme-toggle" title="Toggle theme"><i class="fas fa-sun"></i></button>
</nav>
</div>
</div>
</header>
<div data-global-header></div>
<!-- Main Content -->
<!-- Main Content -->
<main>
<div class="container">
<div class="doc-header">
@@ -455,5 +438,6 @@ curl -X GET https://aitbc.bubuit.net/api/v1/jobs/JOB_ID \
<p>&copy; 2026 AITBC. All rights reserved.</p>
</div>
</footer> <script src="js/theme.js"></script>
<script src="../assets/js/global-header.js"></script>
</body>
</html>

22
website/docs/components.html
View File

@@ -8,26 +8,9 @@
<link rel="stylesheet" href="css/docs.css">
</head>
<body>
<!-- Header -->
<header class="site-header">
<div class="container">
<div class="header-inner">
<a href="/" class="brand">
<i class="fas fa-cube"></i>
<span>AITBC</span>
</a>
<nav class="header-nav">
<a href="/">Home</a>
<a href="/explorer/">Explorer</a>
<a href="/Exchange/">Exchange</a>
<a href="/docs/index.html" class="active">Docs</a>
<button id="theme-toggle" class="theme-toggle" title="Toggle theme"><i class="fas fa-sun"></i></button>
</nav>
</div>
</div>
</header>
<div data-global-header></div>
<!-- Main Content -->
<!-- Main Content -->
<main>
<div class="container">
<!-- Breadcrumb -->
@@ -211,5 +194,6 @@
// Add any interactive functionality here
</script>
<script src="js/theme.js"></script>
<script src="../assets/js/global-header.js"></script>
</body>
</html>

22
website/docs/coordinator-api.html
View File

@@ -8,26 +8,9 @@
<link rel="stylesheet" href="css/docs.css">
</head>
<body>
<!-- Header -->
<header class="site-header">
<div class="container">
<div class="header-inner">
<a href="/" class="brand">
<i class="fas fa-cube"></i>
<span>AITBC</span>
</a>
<nav class="header-nav">
<a href="/">Home</a>
<a href="/explorer/">Explorer</a>
<a href="/Exchange/">Exchange</a>
<a href="/docs/index.html" class="active">Docs</a>
<button id="theme-toggle" class="theme-toggle" title="Toggle theme"><i class="fas fa-sun"></i></button>
</nav>
</div>
</div>
</header>
<div data-global-header></div>
<!-- Main Content -->
<!-- Main Content -->
<main>
<div class="container">
<!-- Breadcrumb -->
@@ -257,5 +240,6 @@ sudo journalctl -u aitbc-coordinator -f</code></pre>
// Add any interactive functionality here
</script>
<script src="js/theme.js"></script>
<script src="../assets/js/global-header.js"></script>
</body>
</html>

10
website/docs/css/docs.css
View File

@@ -15,9 +15,9 @@
/* Dark mode (default) */
:root {
--primary-color: #3b82f6;
--secondary-color: #2563eb;
--accent-color: #60a5fa;
--primary-color: #2563eb;
--secondary-color: #7c3aed;
--accent-color: #0ea5e9;
--success-color: #10b981;
--warning-color: #f59e0b;
--danger-color: #ef4444;
@@ -33,8 +33,8 @@
/* Light mode */
body.light {
--primary-color: #2563eb;
--secondary-color: #1e40af;
--accent-color: #3b82f6;
--secondary-color: #7c3aed;
--accent-color: #0ea5e9;
--success-color: #10b981;
--warning-color: #f59e0b;
--danger-color: #ef4444;

22
website/docs/developers.html
View File

@@ -8,26 +8,9 @@
<link rel="stylesheet" href="css/docs.css">
</head>
<body>
<!-- Header -->
<header class="site-header">
<div class="container">
<div class="header-inner">
<a href="/" class="brand">
<i class="fas fa-cube"></i>
<span>AITBC</span>
</a>
<nav class="header-nav">
<a href="/">Home</a>
<a href="/explorer/">Explorer</a>
<a href="/Exchange/">Exchange</a>
<a href="/docs/index.html" class="active">Docs</a>
<button id="theme-toggle" class="theme-toggle" title="Toggle theme"><i class="fas fa-sun"></i></button>
</nav>
</div>
</div>
</header>
<div data-global-header></div>
<!-- Main Content -->
<!-- Main Content -->
<main>
<div class="container">
<div class="doc-header">
@@ -517,5 +500,6 @@ def test_create_feature_invalid():
<p>&copy; 2026 AITBC. All rights reserved.</p>
</div>
</footer> <script src="js/theme.js"></script>
<script src="../assets/js/global-header.js"></script>
</body>
</html>

22
website/docs/explorer-web.html
View File

@@ -8,26 +8,9 @@
<link rel="stylesheet" href="css/docs.css">
</head>
<body>
<!-- Header -->
<header class="site-header">
<div class="container">
<div class="header-inner">
<a href="/" class="brand">
<i class="fas fa-cube"></i>
<span>AITBC</span>
</a>
<nav class="header-nav">
<a href="/">Home</a>
<a href="/explorer/">Explorer</a>
<a href="/Exchange/">Exchange</a>
<a href="/docs/index.html" class="active">Docs</a>
<button id="theme-toggle" class="theme-toggle" title="Toggle theme"><i class="fas fa-sun"></i></button>
</nav>
</div>
</div>
</header>
<div data-global-header></div>
<main>
<main>
<div class="container">
<!-- Breadcrumb -->
<div class="breadcrumb">
@@ -215,5 +198,6 @@ npm test</code></pre>
</div>
</footer>
<script src="js/theme.js"></script>
<script src="../assets/js/global-header.js"></script>
</body>
</html>

22
website/docs/flowchart.html
View File

@@ -8,26 +8,9 @@
<link rel="stylesheet" href="css/docs.css">
</head>
<body>
<!-- Header -->
<header class="site-header">
<div class="container">
<div class="header-inner">
<a href="/" class="brand">
<i class="fas fa-cube"></i>
<span>AITBC</span>
</a>
<nav class="header-nav">
<a href="/">Home</a>
<a href="/explorer/">Explorer</a>
<a href="/Exchange/">Exchange</a>
<a href="/docs/index.html" class="active">Docs</a>
<button id="theme-toggle" class="theme-toggle" title="Toggle theme"><i class="fas fa-sun"></i></button>
</nav>
</div>
</div>
</header>
<div data-global-header></div>
<main>
<main>
<div class="container">
<!-- Breadcrumb -->
<div class="breadcrumb">
@@ -498,5 +481,6 @@ Cost: 0.25 AITBC</code></pre>
</div>
</footer>
<script src="js/theme.js"></script>
<script src="../assets/js/global-header.js"></script>
</body>
</html>

22
website/docs/full-documentation.html
View File

@@ -8,26 +8,9 @@
<link rel="stylesheet" href="css/docs.css">
</head>
<body>
<!-- Header -->
<header class="site-header">
<div class="container">
<div class="header-inner">
<a href="/" class="brand">
<i class="fas fa-cube"></i>
<span>AITBC</span>
</a>
<nav class="header-nav">
<a href="/">Home</a>
<a href="/explorer/">Explorer</a>
<a href="/Exchange/">Exchange</a>
<a href="/docs/index.html" class="active">Docs</a>
<button id="theme-toggle" class="theme-toggle" title="Toggle theme"><i class="fas fa-sun"></i></button>
</nav>
</div>
</div>
</header>
<div data-global-header></div>
<!-- Main Content -->
<!-- Main Content -->
<main>
<div class="container">
<div class="doc-header">
@@ -660,5 +643,6 @@ gosec ./...</code></pre>
<script src="/js/mermaid-init.js"></script>
<script src="js/theme.js"></script>
<script src="../assets/js/global-header.js"></script>
</body>
</html>

23
website/docs/index.html
View File

@@ -4,6 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../assets/css/docs.css">
<link rel="stylesheet" href="../assets/css/site-header.css">
<link rel="preload" href="../assets/css/font-awesome.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="../assets/css/font-awesome.min.css"></noscript>
<!-- Font Awesome CDN fallback -->
@@ -11,26 +12,9 @@
<title>Documentation - AITBC</title>
</head>
<body>
<!-- Header -->
<header class="site-header">
<div class="container">
<div class="header-inner">
<a href="/" class="brand">
<i class="fas fa-cube"></i>
<span>AITBC</span>
</a>
<nav class="header-nav">
<a href="/">Home</a>
<a href="/explorer/">Explorer</a>
<a href="/Exchange/">Exchange</a>
<a href="/docs/index.html" class="active">Docs</a>
<button id="theme-toggle" class="theme-toggle" title="Toggle theme"><i class="fas fa-sun"></i></button>
</nav>
</div>
</div>
</header>
<div data-global-header></div>
<!-- Main Content -->
<!-- Main Content -->
<main>
<div class="container">
<div class="doc-header">
@@ -243,5 +227,6 @@
});
</script>
<script src="js/theme.js"></script>
<script src="../assets/js/global-header.js"></script>
</body>
</html>

22
website/docs/marketplace-web.html
View File

@@ -8,26 +8,9 @@
<link rel="stylesheet" href="css/docs.css">
</head>
<body>
<!-- Header -->
<header class="site-header">
<div class="container">
<div class="header-inner">
<a href="/" class="brand">
<i class="fas fa-cube"></i>
<span>AITBC</span>
</a>
<nav class="header-nav">
<a href="/">Home</a>
<a href="/explorer/">Explorer</a>
<a href="/Exchange/">Exchange</a>
<a href="/docs/index.html" class="active">Docs</a>
<button id="theme-toggle" class="theme-toggle" title="Toggle theme"><i class="fas fa-sun"></i></button>
</nav>
</div>
</div>
</header>
<div data-global-header></div>
<main>
<main>
<div class="container">
<!-- Breadcrumb -->
<div class="breadcrumb">
@@ -272,5 +255,6 @@ docker run -d \
</div>
</footer>
<script src="js/theme.js"></script>
<script src="../assets/js/global-header.js"></script>
</body>
</html>

22
website/docs/miners.html
View File

@@ -8,26 +8,9 @@
<link rel="stylesheet" href="css/docs.css">
</head>
<body>
<!-- Header -->
<header class="site-header">
<div class="container">
<div class="header-inner">
<a href="/" class="brand">
<i class="fas fa-cube"></i>
<span>AITBC</span>
</a>
<nav class="header-nav">
<a href="/">Home</a>
<a href="/explorer/">Explorer</a>
<a href="/Exchange/">Exchange</a>
<a href="/docs/index.html" class="active">Docs</a>
<button id="theme-toggle" class="theme-toggle" title="Toggle theme"><i class="fas fa-sun"></i></button>
</nav>
</div>
</div>
</header>
<div data-global-header></div>
<!-- Main Content -->
<!-- Main Content -->
<main>
<div class="container">
<div class="doc-header">
@@ -387,5 +370,6 @@ nano ~/.aitbc/miner.toml</div>
// Initialize calculator
calculateProfit();
</script> <script src="js/theme.js"></script>
<script src="../assets/js/global-header.js"></script>
</body>
</html>

22
website/docs/pool-hub.html
View File

@@ -8,26 +8,9 @@
<link rel="stylesheet" href="css/docs.css">
</head>
<body>
<!-- Header -->
<header class="site-header">
<div class="container">
<div class="header-inner">
<a href="/" class="brand">
<i class="fas fa-cube"></i>
<span>AITBC</span>
</a>
<nav class="header-nav">
<a href="/">Home</a>
<a href="/explorer/">Explorer</a>
<a href="/Exchange/">Exchange</a>
<a href="/docs/index.html" class="active">Docs</a>
<button id="theme-toggle" class="theme-toggle" title="Toggle theme"><i class="fas fa-sun"></i></button>
</nav>
</div>
</div>
</header>
<div data-global-header></div>
<main>
<main>
<div class="container">
<!-- Breadcrumb -->
<div class="breadcrumb">
@@ -271,5 +254,6 @@ GET /metrics</code></pre>
</div>
</footer>
<script src="js/theme.js"></script>
<script src="../assets/js/global-header.js"></script>
</body>
</html>

22
website/docs/trade-exchange.html
View File

@@ -8,26 +8,9 @@
<link rel="stylesheet" href="css/docs.css">
</head>
<body>
<!-- Header -->
<header class="site-header">
<div class="container">
<div class="header-inner">
<a href="/" class="brand">
<i class="fas fa-cube"></i>
<span>AITBC</span>
</a>
<nav class="header-nav">
<a href="/">Home</a>
<a href="/explorer/">Explorer</a>
<a href="/Exchange/">Exchange</a>
<a href="/docs/index.html" class="active">Docs</a>
<button id="theme-toggle" class="theme-toggle" title="Toggle theme"><i class="fas fa-sun"></i></button>
</nav>
</div>
</div>
</header>
<div data-global-header></div>
<!-- Main Content -->
<!-- Main Content -->
<main>
<div class="container">
<!-- Breadcrumb -->
@@ -271,5 +254,6 @@ BITCOIN_RPC_PASS=password</code></pre>
// Add any interactive functionality here
</script>
<script src="js/theme.js"></script>
<script src="../assets/js/global-header.js"></script>
</body>
</html>

22
website/docs/wallet-daemon.html
View File

@@ -8,26 +8,9 @@
<link rel="stylesheet" href="css/docs.css">
</head>
<body>
<!-- Header -->
<header class="site-header">
<div class="container">
<div class="header-inner">
<a href="/" class="brand">
<i class="fas fa-cube"></i>
<span>AITBC</span>
</a>
<nav class="header-nav">
<a href="/">Home</a>
<a href="/explorer/">Explorer</a>
<a href="/Exchange/">Exchange</a>
<a href="/docs/index.html" class="active">Docs</a>
<button id="theme-toggle" class="theme-toggle" title="Toggle theme"><i class="fas fa-sun"></i></button>
</nav>
</div>
</div>
</header>
<div data-global-header></div>
<main>
<main>
<div class="container">
<!-- Breadcrumb -->
<div class="breadcrumb">
@@ -221,5 +204,6 @@ console.log('Balance:', balance);</code></pre>
</div>
</footer>
<script src="js/theme.js"></script>
<script src="../assets/js/global-header.js"></script>
</body>
</html>

46
website/index.html
View File

@@ -16,35 +16,47 @@
<meta property="og:type" content="website">
<meta property="og:url" content="https://aitbc.bubuit.net">
<meta name="twitter:card" content="summary_large_image">
<!-- Performance optimization: resource hints -->
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
<link rel="dns-prefetch" href="//aitbc.bubuit.net">
<link rel="dns-prefetch" href="//github.com">
<style>
/* Critical CSS for above-the-fold content */
:root{--primary-color:#2563eb;--secondary-color:#1e40af;--accent-color:#3b82f6;--text-dark:#1f2937;--bg-white:#ffffff;--gradient:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}[data-theme="dark"]{--primary-color:#3b82f6;--secondary-color:#2563eb;--accent-color:#60a5fa;--text-dark:#f9fafb;--bg-white:#1f2937;--gradient:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:var(--text-dark);background-color:var(--bg-light);transition:background-color .3s ease,color .3s ease}.container{max-width:1200px;margin:0 auto;padding:0 20px}header{background:var(--bg-white);box-shadow:0 1px 3px rgba(0,0,0,.1);position:fixed;width:100%;top:0;z-index:1000}nav{display:flex;justify-content:space-between;align-items:center;padding:1rem 0}.logo{font-size:1.5rem;font-weight:700;color:var(--primary-color);text-decoration:none}.nav-button{background:transparent!important;color:var(--text-dark)!important;padding:.5rem .75rem;border-radius:.5rem;font-weight:500;transition:all .2s ease;text-decoration:none;display:inline-flex;align-items:center}.nav-button:hover{background:rgba(59,130,246,.1)!important;color:var(--primary-color)!important}.hero{background:var(--gradient);color:#fff;padding:100px 0 80px;text-align:center}.hero h1{font-size:3.5rem;margin-bottom:1rem;animation:fadeInUp .8s ease}.hero p{font-size:1.25rem;margin-bottom:2rem;opacity:.9;animation:fadeInUp .8s ease .2s both}.cta-button{display:inline-block;padding:12px 30px;background:var(--bg-white);color:var(--primary-color);text-decoration:none;border-radius:5px;font-weight:600;transition:transform .3s,box-shadow .3s;animation:fadeInUp .8s ease .4s both}.cta-button:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.1)}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.hero h1{font-size:2.5rem}}
:root{--primary-color:#2563eb;--secondary-color:#7c3aed;--accent-color:#0ea5e9;--text-dark:#1f2937;--bg-white:#ffffff;--gradient:linear-gradient(135deg,#2563eb 0%,#7c3aed 100%)}[data-theme="dark"]{--primary-color:#60a5fa;--secondary-color:#a855f7;--accent-color:#38bdf8;--text-dark:#f9fafb;--bg-white:#1f2937;--gradient:linear-gradient(135deg,#1d4ed8 0%,#7c3aed 100%)}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen,Ubuntu,Cantarell,sans-serif;line-height:1.6;color:var(--text-dark);background-color:var(--bg-light);transition:background-color .3s ease,color .3s ease}.container{max-width:1200px;margin:0 auto;padding:0 20px}.hero{background:var(--gradient);color:#fff;padding:100px 0 80px;text-align:center}.hero h1{font-size:3.5rem;margin-bottom:1rem;animation:fadeInUp .8s ease}.hero p{font-size:1.25rem;margin-bottom:2rem;opacity:.9;animation:fadeInUp .8s ease .2s both}.cta-button{display:inline-block;padding:12px 30px;background:var(--bg-white);color:var(--primary-color);text-decoration:none;border-radius:5px;font-weight:600;transition:transform .3s,box-shadow .3s;animation:fadeInUp .8s ease .4s both}.cta-button:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.1)}@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media (max-width:768px){.hero h1{font-size:2.5rem}}
</style>
<link rel="preload" href="/assets/css/font-awesome.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<link rel="preload" href="/assets/css/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="/assets/css/font-awesome.min.css"><link rel="stylesheet" href="/assets/css/main.css"></noscript>
<link rel="stylesheet" href="/assets/css/site-header.css">
<!-- Font Awesome CDN fallback -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" media="print" onload="this.media='all'; this.onload=null;">
</head>
<body>
<!-- Header -->
<header class="text-white shadow-lg" style="background: var(--bg-white);">
<div class="container mx-auto px-4 py-6">
<div class="flex items-center justify-between">
<div class="flex items-center space-x-3">
<i class="fas fa-cube" style="font-size: 2rem; color: var(--primary-color);"></i>
<h1 class="text-2xl font-bold" style="color: var(--text-dark);">AITBC</h1>
<header class="global-header">
<div class="global-header__inner">
<a class="global-brand" href="/">
<div class="global-brand__icon">
<i class="fas fa-cube"></i>
</div>
<nav class="flex items-center space-x-6">
<a href="/explorer/" class="nav-button" style="background: transparent !important; color: var(--text-dark) !important;">Explorer</a>
<a href="/marketplace/" class="nav-button" style="background: transparent !important; color: var(--text-dark) !important;">Marketplace</a>
<a href="/Exchange/" class="nav-button" style="background: transparent !important; color: var(--text-dark) !important;">Exchange</a>
<a href="docs/index.html" class="nav-button" style="background: transparent !important; color: var(--text-dark) !important;">Docs</a>
<button onclick="toggleDarkMode()" class="nav-button" title="Toggle dark mode" style="background: rgba(59, 130, 246, 0.1) !important; color: var(--primary-color) !important; border: 2px solid var(--primary-color); padding: 0.5rem 1rem;">
<span id="darkModeEmoji">🌙</span>
<span id="darkModeText" style="margin-left: 0.5rem;">Dark</span>
</button>
</nav>
<div class="global-brand__text">
<span>AITBC Platform</span>
<small>AI Blockchain Network</small>
</div>
</a>
<nav class="global-nav">
<a href="/" class="global-nav__link active">Home</a>
<a href="/explorer/" class="global-nav__link">Explorer</a>
<a href="/marketplace/" class="global-nav__link">Marketplace</a>
<a href="/Exchange/" class="global-nav__link">Exchange</a>
<a href="/docs/index.html" class="global-nav__link">Docs</a>
</nav>
<div class="global-header__actions">
<button onclick="toggleDarkMode()" class="global-dark-toggle" title="Toggle dark mode">
<span id="darkModeEmoji">🌙</span>
<span id="darkModeText">Dark</span>
</button>
<a href="/marketplace/" class="global-nav__cta">Launch Marketplace</a>
</div>
</div>
</header>