caravan-x
Version:
A terminal-based utility for managing Caravan multisig wallets in regtest mode. This tool simplifies development and testing with Caravan by providing an easy-to-use interface
344 lines (332 loc) • 15.3 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Caravan-X Blockchain Explorer</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis-network/9.1.6/standalone/umd/vis-network.min.js"></script>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
/>
<link
href="https://fonts.googleapis.com/css2?family=VT323&family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<div class="theme-toggle" id="themeToggle" title="Toggle theme">
<i class="fas fa-moon"></i>
</div>
<div class="view-options">
<button class="view-button" id="pixelViewBtn">
<i class="fas fa-cubes"></i> Pixel View
</button>
<button class="view-button" id="minecraftViewBtn">
<i class="fas fa-cube"></i> Minecraft View
</button>
</div>
<header class="main-header">
<div class="logo">
<div class="logo-container">
<svg
width="32"
height="32"
viewBox="0 0 32 32"
class="logo-icon"
>
<!-- Simplified caravan icon based on the image -->
<rect
x="8"
y="14"
width="16"
height="10"
fill="#0074D9"
/>
<rect
x="6"
y="12"
width="20"
height="2"
fill="#FFD700"
/>
<circle cx="10" cy="24" r="4" fill="#FFD700" />
<circle cx="22" cy="24" r="4" fill="#FFD700" />
<rect
x="14"
y="18"
width="6"
height="4"
fill="#001F3F"
/>
<rect
x="15"
y="19"
width="1"
height="1"
fill="#FFD700"
/>
<rect
x="17"
y="19"
width="2"
height="1"
fill="#FFD700"
/>
</svg>
<h1 class="logo-text">
Caravan-<span class="x-highlight">X</span>
</h1>
</div>
<p class="subtitle">Regtest Blockchain Explorer</p>
</div>
<div class="header-actions">
<div id="connectionStatus" class="connection-status">
<span class="status-indicator connected"></span>
<span class="status-text">Connected</span>
</div>
<button id="refreshBtn" class="action-button">
<i class="fas fa-sync-alt"></i> Refresh
</button>
</div>
</header>
<div class="dashboard">
<section class="dashboard-section stats-section">
<div class="section-header">
<h2>Network Stats</h2>
<div class="network-dropdown">
<select id="networkSelector">
<option value="regtest" selected>Regtest</option>
<option value="testnet">Testnet</option>
<option value="mainnet" disabled>Mainnet</option>
</select>
</div>
</div>
<div class="stats-container">
<div class="stat-card">
<div class="stat-icon">
<i class="fas fa-cubes"></i>
</div>
<div class="stat-value" id="blockCount">0</div>
<div class="stat-label">Blocks</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="fas fa-exchange-alt"></i>
</div>
<div class="stat-value" id="txCount">0</div>
<div class="stat-label">Transactions</div>
</div>
<div class="stat-card bitcoin-price-card">
<div class="stat-icon">
<i class="fas fa-microchip"></i>
</div>
<div class="stat-value" id="difficulty">0</div>
<div class="stat-label">Difficulty</div>
</div>
<div class="stat-card">
<div class="stat-icon">
<i class="fas fa-memory"></i>
</div>
<div class="stat-value" id="mempoolSize">0</div>
<div class="stat-label">Mempool</div>
</div>
</div>
</section>
<div class="main-content">
<section class="dashboard-section blocks-section">
<div class="card">
<div class="card-header">
<h2 class="card-title">
<i class="fas fa-cube"></i> Latest Blocks
</h2>
<div class="card-actions">
<button id="mineBlockBtn" class="action-button">
<i class="fas fa-hammer"></i> Mine Block
</button>
<button
id="miningInfoBtn"
class="action-button secondary"
>
<i class="fas fa-info-circle"></i>
</button>
</div>
</div>
<div class="card-content">
<div
class="visualization-container"
id="blockchainVisualization"
></div>
<div class="blocks-container" id="blocksContainer">
<div class="loading">
<div class="spinner"></div>
<span>Loading blocks...</span>
</div>
</div>
</div>
</div>
</section>
<section class="dashboard-section mempool-section">
<div class="card">
<div class="card-header">
<h2 class="card-title">
<i class="fas fa-stream"></i> Mempool
</h2>
<div class="card-actions">
<button id="createTxBtn" class="action-button">
<i class="fas fa-plus-circle"></i> Create
Transaction
</button>
<select
id="mempoolSortSelect"
class="select-dropdown"
>
<option value="time">Newest</option>
<option value="feeRate">Fee Rate</option>
<option value="size">Size</option>
</select>
</div>
</div>
<div class="card-content">
<div
class="visualization-container"
id="mempoolVisualization"
></div>
<div
class="mempool-container"
id="mempoolContainer"
>
<div class="loading">
<div class="spinner"></div>
<span>Loading transactions...</span>
</div>
</div>
</div>
</div>
</section>
</div>
<section class="dashboard-section network-section">
<div class="card">
<div class="card-header">
<h2 class="card-title">
<i class="fas fa-project-diagram"></i> Transaction
Network
</h2>
<div class="card-actions">
<select
id="networkViewType"
class="select-dropdown"
>
<option value="default">Default View</option>
<option value="force">Force Layout</option>
<option value="hierarchical">
Hierarchical
</option>
</select>
</div>
</div>
<div class="card-content">
<div class="network-container" id="transactionNetwork">
<div class="loading">
<div class="spinner"></div>
<span>Building network visualization...</span>
</div>
</div>
<div class="network-controls">
<button id="zoomInBtn" class="network-btn">
<i class="fas fa-search-plus"></i>
</button>
<button id="zoomOutBtn" class="network-btn">
<i class="fas fa-search-minus"></i>
</button>
<button id="resetViewBtn" class="network-btn">
<i class="fas fa-compress-arrows-alt"></i>
</button>
</div>
<div class="network-legend">
<div class="legend-item">
<span
class="legend-color"
style="background-color: #f97316"
></span>
<span>Blocks</span>
</div>
<div class="legend-item">
<span
class="legend-color"
style="background-color: #38bdf8"
></span>
<span>Confirmed Transactions</span>
</div>
<div class="legend-item">
<span
class="legend-color"
style="background-color: #a855f7"
></span>
<span>Mempool Transactions</span>
</div>
</div>
</div>
</div>
</section>
<section class="dashboard-section details-section">
<div class="card">
<div class="card-header">
<h2 class="card-title">
<i class="fas fa-info-circle"></i> Details
</h2>
<div class="card-actions">
<button
id="closeDetailsBtn"
class="action-button secondary"
style="display: none"
>
<i class="fas fa-times"></i> Close
</button>
</div>
</div>
<div class="card-content">
<div id="transactionDetails">
<p class="empty-details">
<i class="fas fa-hand-pointer"></i>
Select a transaction or block to view details
</p>
</div>
</div>
</div>
</section>
</div>
<div class="mining-activity" id="miningActivity" style="display: none">
<div class="mining-activity-header">
<h3><i class="fas fa-terminal"></i> Mining Activity</h3>
<button id="closeMiningBtn" class="close-btn">
<i class="fas fa-times"></i>
</button>
</div>
<div class="mining-activity-content">
<div id="miningLogs" class="mining-logs"></div>
</div>
</div>
<div class="tooltip" id="tooltip"></div>
<footer class="main-footer">
<div class="footer-info">
<p>Caravan-X Blockchain Explorer - Regtest Mode</p>
</div>
<div class="footer-links">
<a href="#" class="footer-link">Documentation</a>
<a
href="https://github.com/Legend101Zz/CaravanX"
class="footer-link"
>GitHub</a
>
<a href="#" class="footer-link">About</a>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>