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

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

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>

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>

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>

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>

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>

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>

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;

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>