docs: update documentation links to use relative paths and add system flow references
- 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
This commit is contained in:
oib
422
website/docs/explorer-web.html
Normal file
422
website/docs/explorer-web.html
Normal file
@@ -0,0 +1,422 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user