109 lines
5.0 KiB
HTML
109 lines
5.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Motr Enclave</title>
|
|
<style>
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body { font-family: system-ui, sans-serif; background: #0a0a0a; color: #e5e5e5; padding: 2rem; }
|
|
h1 { font-size: 1.5rem; margin-bottom: 1rem; color: #fff; }
|
|
.container { max-width: 800px; margin: 0 auto; }
|
|
.card { background: #171717; border-radius: 8px; padding: 1rem; margin-bottom: 1rem; }
|
|
.card h2 { font-size: 0.875rem; color: #a3a3a3; margin-bottom: 0.5rem; font-weight: 500; }
|
|
.status { display: inline-block; padding: 0.25rem 0.5rem; border-radius: 4px; font-size: 0.75rem; }
|
|
.status.ok { background: #14532d; color: #4ade80; }
|
|
.status.err { background: #7f1d1d; color: #f87171; }
|
|
.status.wait { background: #422006; color: #fbbf24; }
|
|
button { background: #2563eb; color: #fff; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; font-size: 0.875rem; margin-right: 0.5rem; margin-bottom: 0.5rem; }
|
|
button:hover { background: #1d4ed8; }
|
|
button:disabled { background: #374151; cursor: not-allowed; }
|
|
input { width: 100%; background: #262626; border: 1px solid #404040; color: #fff; padding: 0.5rem; border-radius: 4px; font-family: monospace; font-size: 0.875rem; margin-bottom: 0.5rem; }
|
|
.log { background: #0a0a0a; border: 1px solid #262626; border-radius: 4px; padding: 0.5rem; font-family: monospace; font-size: 0.7rem; max-height: 150px; overflow-y: auto; white-space: pre-wrap; margin-top: 0.5rem; display: none; }
|
|
.log.has-content { display: block; }
|
|
.log-entry { padding: 0.125rem 0; border-bottom: 1px solid #1a1a1a; }
|
|
.log-entry:last-child { border-bottom: none; }
|
|
.log-time { color: #525252; }
|
|
.log-info { color: #60a5fa; }
|
|
.log-ok { color: #4ade80; }
|
|
.log-err { color: #f87171; }
|
|
.log-data { color: #a78bfa; display: block; margin-left: 1rem; }
|
|
.actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
|
|
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
|
|
.clear-btn { background: #374151; padding: 0.25rem 0.5rem; font-size: 0.7rem; margin: 0; }
|
|
.clear-btn:hover { background: #4b5563; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>Motr Enclave</h1>
|
|
|
|
<div class="card">
|
|
<h2>Status</h2>
|
|
<span id="status" class="status wait">Loading...</span>
|
|
<button onclick="runAllTests()" style="margin-left: 1rem;">Run All Tests</button>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2>ping(message)</h2>
|
|
<button class="clear-btn" onclick="clearCardLog('ping')">Clear</button>
|
|
</div>
|
|
<input type="text" id="ping-msg" value="hello from browser" placeholder="Message to echo">
|
|
<button onclick="testPing()">Run</button>
|
|
<div id="log-ping" class="log"></div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2>generate(credential)</h2>
|
|
<button class="clear-btn" onclick="clearCardLog('generate')">Clear</button>
|
|
</div>
|
|
<div class="actions">
|
|
<button onclick="testGenerate()">Create with WebAuthn</button>
|
|
<button onclick="testGenerateMock()">Create with Mock</button>
|
|
</div>
|
|
<div id="log-generate" class="log"></div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2>load(database)</h2>
|
|
<button class="clear-btn" onclick="clearCardLog('load')">Clear</button>
|
|
</div>
|
|
<input type="text" id="database" placeholder="Base64 database (auto-filled after generate)">
|
|
<button onclick="testLoad()">Run</button>
|
|
<div id="log-load" class="log"></div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2>exec(filter)</h2>
|
|
<button class="clear-btn" onclick="clearCardLog('exec')">Clear</button>
|
|
</div>
|
|
<input type="text" id="filter" value="resource:accounts action:list" placeholder="resource:X action:Y">
|
|
<div class="actions">
|
|
<button onclick="testExec()">Run</button>
|
|
<button onclick="setFilter('resource:accounts action:list')">Accounts</button>
|
|
<button onclick="setFilter('resource:accounts action:balances subject:sonr1example')">Balances</button>
|
|
<button onclick="setFilter('resource:credentials action:list')">Credentials</button>
|
|
<button onclick="setFilter('resource:sessions action:list')">Sessions</button>
|
|
</div>
|
|
<div id="log-exec" class="log"></div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h2>query(did)</h2>
|
|
<button class="clear-btn" onclick="clearCardLog('query')">Clear</button>
|
|
</div>
|
|
<input type="text" id="did" placeholder="did:sonr:... (empty = current)">
|
|
<button onclick="testQuery()">Run</button>
|
|
<div id="log-query" class="log"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script type="module" src="./main.js"></script>
|
|
</body>
|
|
</html>
|