a9f9003ad1
- Replace absolute aitbc.bubuit.net URLs with relative paths in documentation pages - Update markdown documentation links from /main/ to /master/ branch - Add system flow diagram references to component documentation pages - Remove redundant "Also available in Markdown" notices from HTML docs - Update Font Awesome CDN link in index.html - Simplify quick links section and remove unused tutorial/video guide plac
423 lines
12 KiB
HTML
423 lines
12 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Explorer Web - AITBC Documentation</title>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||
<style>
|
||
:root {
|
||
--primary-color: #2563eb;
|
||
--secondary-color: #1e40af;
|
||
--success-color: #10b981;
|
||
--text-dark: #1f2937;
|
||
--text-light: #6b7280;
|
||
--bg-light: #f9fafb;
|
||
--bg-white: #ffffff;
|
||
--border-color: #e5e7eb;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
||
line-height: 1.6;
|
||
color: var(--text-dark);
|
||
background: var(--bg-white);
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.container {
|
||
max-width: 1200px;
|
||
margin: 0 auto;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
header {
|
||
background: var(--text-dark);
|
||
color: white;
|
||
padding: 1rem 0;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
nav {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.logo {
|
||
font-size: 1.5rem;
|
||
font-weight: bold;
|
||
color: white;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.nav-links {
|
||
display: flex;
|
||
gap: 2rem;
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.nav-links a {
|
||
color: white;
|
||
text-decoration: none;
|
||
transition: color 0.3s;
|
||
}
|
||
|
||
.nav-links a:hover {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.breadcrumb {
|
||
padding: 1rem 0;
|
||
color: var(--text-light);
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.breadcrumb a {
|
||
color: var(--text-light);
|
||
text-decoration: none;
|
||
}
|
||
|
||
.breadcrumb a:hover {
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
.doc-header {
|
||
padding: 3rem 0;
|
||
background: var(--bg-light);
|
||
margin-bottom: 2rem;
|
||
}
|
||
|
||
.doc-header h1 {
|
||
font-size: 2.5rem;
|
||
margin-bottom: 1rem;
|
||
color: var(--text-dark);
|
||
}
|
||
|
||
.doc-header p {
|
||
font-size: 1.2rem;
|
||
color: var(--text-light);
|
||
max-width: 800px;
|
||
}
|
||
|
||
.status-badge {
|
||
display: inline-block;
|
||
padding: 0.25rem 0.75rem;
|
||
background: #10b98120;
|
||
color: var(--success-color);
|
||
border-radius: 20px;
|
||
font-size: 0.875rem;
|
||
font-weight: 600;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
.content-section {
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
.content-section h2 {
|
||
font-size: 1.8rem;
|
||
margin-bottom: 1.5rem;
|
||
color: var(--text-dark);
|
||
border-bottom: 2px solid var(--border-color);
|
||
padding-bottom: 0.5rem;
|
||
}
|
||
|
||
.content-section h3 {
|
||
font-size: 1.4rem;
|
||
margin: 2rem 0 1rem;
|
||
color: var(--text-dark);
|
||
}
|
||
|
||
.content-section p {
|
||
margin-bottom: 1rem;
|
||
color: var(--text-dark);
|
||
}
|
||
|
||
.content-section ul {
|
||
margin-bottom: 1rem;
|
||
padding-left: 2rem;
|
||
}
|
||
|
||
.content-section li {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.feature-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||
gap: 1.5rem;
|
||
margin: 2rem 0;
|
||
}
|
||
|
||
.feature-card {
|
||
background: var(--bg-white);
|
||
padding: 1.5rem;
|
||
border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
.feature-card h4 {
|
||
margin-top: 0;
|
||
color: var(--primary-color);
|
||
}
|
||
|
||
pre {
|
||
background: #1f2937;
|
||
color: #f9fafb;
|
||
padding: 1.5rem;
|
||
border-radius: 8px;
|
||
overflow-x: auto;
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
code {
|
||
font-family: 'Courier New', Courier, monospace;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
pre code {
|
||
background: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.back-button {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: 0.5rem;
|
||
color: var(--primary-color);
|
||
text-decoration: none;
|
||
margin-bottom: 2rem;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.back-button:hover {
|
||
color: var(--secondary-color);
|
||
}
|
||
|
||
footer {
|
||
background: var(--text-dark);
|
||
color: white;
|
||
padding: 2rem 0;
|
||
text-align: center;
|
||
margin-top: 4rem;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.nav-links {
|
||
display: none;
|
||
}
|
||
|
||
.doc-header h1 {
|
||
font-size: 2rem;
|
||
}
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<header>
|
||
<nav class="container">
|
||
<a href="../index.html" class="logo">AITBC</a>
|
||
<ul class="nav-links">
|
||
<li><a href="../index.html">Home</a></li>
|
||
<li><a href="index.html">Documentation</a></li>
|
||
<li><a href="mailto:aitbc@bubuit.net">Contact</a></li>
|
||
</ul>
|
||
</nav>
|
||
</header>
|
||
|
||
<main>
|
||
<div class="container">
|
||
<!-- Breadcrumb -->
|
||
<div class="breadcrumb">
|
||
<a href="index.html">Documentation</a>
|
||
<span>›</span>
|
||
<a href="#">Components</a>
|
||
<span>›</span>
|
||
<span>Explorer Web</span>
|
||
</div>
|
||
|
||
<!-- Back Button -->
|
||
<a href="components.html" class="back-button">
|
||
<i class="fas fa-arrow-left"></i>
|
||
Back to Components
|
||
</a>
|
||
|
||
<!-- Header -->
|
||
<div class="doc-header">
|
||
<h1><i class="fas fa-search"></i> Explorer Web</h1>
|
||
<p>Full-featured blockchain explorer with blocks, transactions, addresses, and receipts tracking. Responsive design with live data.</p>
|
||
<span class="status-badge">● Live</span>
|
||
</div>
|
||
|
||
<!-- Overview -->
|
||
<section class="content-section">
|
||
<h2>Overview</h2>
|
||
<p>The AITBC Explorer Web provides a comprehensive view of the blockchain, allowing users to track blocks, transactions, addresses, and AI computation receipts in real-time.</p>
|
||
|
||
<h3>Key Features</h3>
|
||
<ul>
|
||
<li>Real-time block and transaction tracking</li>
|
||
<li>Address balance and transaction history</li>
|
||
<li>AI computation receipt verification</li>
|
||
<li>Search functionality for blocks, transactions, and addresses</li>
|
||
<li>Responsive design for all devices</li>
|
||
<li>Live data updates via WebSocket</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- Architecture -->
|
||
<section class="content-section">
|
||
<h2>Architecture</h2>
|
||
<p>The explorer is built as a modern single-page application:</p>
|
||
|
||
<div class="feature-grid">
|
||
<div class="feature-card">
|
||
<h4><i class="fas fa-paint-brush"></i> Frontend</h4>
|
||
<p>React with TypeScript for type safety</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4><i class="fas fa-plug"></i> API Integration</h4>
|
||
<p>Direct blockchain RPC API connection</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<h4><i class="fas fa-sync"></i> Real-time Updates</h4>
|
||
<p>WebSocket for live block updates</p>
|
||
</div>
|
||
<div class="feature-card">
|
||
<i class="fas fa-mobile-alt"></i> Responsive</h4>
|
||
<p>Mobile-first responsive design</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Features -->
|
||
<section class="content-section">
|
||
<h2>Features</h2>
|
||
|
||
<h3>Block Explorer</h3>
|
||
<ul>
|
||
<li>Latest blocks list with timestamps</li>
|
||
<li>Detailed block view with transactions</li>
|
||
<li>Block validation status</li>
|
||
<li>Block size and gas metrics</li>
|
||
</ul>
|
||
|
||
<h3>Transaction Tracker</h3>
|
||
<ul>
|
||
<li>Transaction details and status</li>
|
||
<li>Input/output addresses</li>
|
||
<li>Gas fees and confirmations</li>
|
||
<li>Transaction mempool status</li>
|
||
</ul>
|
||
|
||
<h3>Address Viewer</h3>
|
||
<ul>
|
||
<li>Address balance and history</li>
|
||
<li>Transaction list per address</li>
|
||
<li>QR code generation</li>
|
||
<li>Address labeling</li>
|
||
</ul>
|
||
|
||
<h3>AI Receipt Explorer</h3>
|
||
<ul>
|
||
<li>Computation receipt details</li>
|
||
<li>ZK-proof verification</li>
|
||
<li>Job metadata and results</li>
|
||
<li>Miner rewards tracking</li>
|
||
</ul>
|
||
</section>
|
||
|
||
<!-- API Integration -->
|
||
<section class="content-section">
|
||
<h2>API Integration</h2>
|
||
<p>The explorer connects directly to the blockchain node RPC API:</p>
|
||
|
||
<pre><code>// Get latest blocks
|
||
GET /rpc/get_latest_blocks?limit=50
|
||
|
||
// Get block by height
|
||
GET /rpc/get_block/{height}
|
||
|
||
// Get transaction by hash
|
||
GET /rpc/get_transaction/{hash}
|
||
|
||
// Get address info
|
||
GET /rpc/get_address/{address}
|
||
|
||
// WebSocket subscription
|
||
ws://localhost:9081/ws
|
||
{
|
||
"method": "subscribe",
|
||
"params": ["new_blocks", "new_transactions"]
|
||
}</code></pre>
|
||
</section>
|
||
|
||
<!-- Deployment -->
|
||
<section class="content-section">
|
||
<h2>Deployment</h2>
|
||
|
||
<h3>Docker Deployment</h3>
|
||
<pre><code># Build explorer image
|
||
docker build -t aitbc/explorer-web .
|
||
|
||
# Run with nginx
|
||
docker run -d \
|
||
-p 80:80 \
|
||
-e API_URL=http://blockchain-node:9080 \
|
||
-e WS_URL=ws://blockchain-node:9081 \
|
||
aitbc/explorer-web</code></pre>
|
||
|
||
<h3>Configuration</h3>
|
||
<pre><code># Environment variables
|
||
API_URL=http://localhost:9080
|
||
WS_URL=ws://localhost:9081
|
||
NETWORK_NAME=mainnet
|
||
CACHE_TTL=300</code></pre>
|
||
</section>
|
||
|
||
<!-- Development -->
|
||
<section class="content-section">
|
||
<h2>Development</h2>
|
||
|
||
<h3>Local Development</h3>
|
||
<pre><code># Install dependencies
|
||
npm install
|
||
|
||
# Start development server
|
||
npm run dev
|
||
|
||
# Build for production
|
||
npm run build
|
||
|
||
# Run tests
|
||
npm test</code></pre>
|
||
|
||
<h3>Project Structure</h3>
|
||
<pre><code>explorer-web/
|
||
├── src/
|
||
│ ├── components/ # React components
|
||
│ ├── pages/ # Page components
|
||
│ ├── hooks/ # Custom hooks
|
||
│ ├── services/ # API services
|
||
│ └── utils/ # Utilities
|
||
├── public/
|
||
├── package.json
|
||
└── Dockerfile</code></pre>
|
||
</section>
|
||
</div>
|
||
</main>
|
||
|
||
<footer>
|
||
<div class="container">
|
||
<p>© 2025 AITBC. All rights reserved.</p>
|
||
</div>
|
||
</footer>
|
||
</body>
|
||
</html>
|