@decent-stuff/dc-client
Version:
High-performance WebAssembly client for browser-based querying of Decent Cloud ledger data
103 lines (94 loc) • 2.52 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Decent Cloud WASM Demo</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.demo-section {
flex: 1;
min-width: 500px;
border: 1px solid #ccc;
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
}
h1, h2 {
color: #333;
}
pre {
background-color: #f5f5f5;
padding: 10px;
border-radius: 5px;
overflow: auto;
max-height: 400px;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 2px;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #45a049;
}
.status {
margin: 10px 0;
padding: 10px;
border-radius: 5px;
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>Decent Cloud WASM Demo</h1>
<p>This demo demonstrates the functionality of the Decent Cloud WASM library.</p>
<div class="container">
<!-- Simple Demo -->
<div class="demo-section">
<h3>Block Header</h3>
<pre id="wasmBlockHeader">Loading...</pre>
<h3>Block Contents</h3>
<pre id="wasmBlockContents">Loading...</pre>
</div>
<div class="demo-section">
<p>This demo demonstrates how to use the DecentCloudClient package.</p>
<div>
<button id="fetchButton">Fetch Blocks</button>
<button id="clearButton">Clear Storage</button>
</div>
<div class="status" style="background-color: #ffeeee; border: 1px solid #ffcccc; display: none;">
<strong>Database Error:</strong> <span id="dbErrorStatus"></span>
</div>
<div class="status">
<strong>Initialization Status:</strong> <span id="initStatus">Initializing...</span>
</div>
<div class="status">
<strong>Fetch Status:</strong> <span id="fetchStatus">Waiting...</span>
</div>
<div class="status">
<strong>Clear Status:</strong> <span id="clearStatus">Waiting...</span>
</div>
</div>
</div>
<script type="module" src="./main.js"></script>
</body>
</html>