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
@@ -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
217
website/assets/css/site-header.css
Normal 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
2
website/assets/js/axios.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
118
website/assets/js/global-header.js
Normal file
118
website/assets/js/global-header.js
Normal 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
18843
website/assets/js/lucide.js
Normal file
File diff suppressed because it is too large
Load Diff
139
website/assets/js/skeleton.js
Normal file
139
website/assets/js/skeleton.js
Normal 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);
|
||||
});
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user