@aladas-org/cryptocalc
Version:
Cryptocurrency wallet generator
443 lines (386 loc) • 11.5 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cryptocalc — Playwright E2E Test Protocols</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@300;400;600;700&display=swap');
:root {
--bg: #0d1117;
--surface: #161b22;
--surface2: #1c2330;
--border: #30363d;
--accent: #58a6ff;
--accent2: #3fb950;
--accent3: #f78166;
--accent4: #d2a8ff;
--accent5: #ffa657;
--text: #e6edf3;
--text-muted: #8b949e;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background: var(--bg);
color: var(--text);
font-family: 'IBM Plex Sans', sans-serif;
font-size: 14px;
line-height: 1.6;
padding: 48px 24px;
min-height: 100vh;
}
.container { max-width: 800px; margin: 0 auto; }
/* Home button */
.home-btn {
position: fixed;
top: 20px;
left: 20px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 30px;
padding: 8px 16px;
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: var(--text-muted);
font-family: 'IBM Plex Mono', monospace;
font-size: 12px;
transition: all .2s;
z-index: 100;
backdrop-filter: blur(5px);
}
.home-btn:hover {
border-color: var(--accent);
color: var(--accent);
transform: translateY(-2px);
}
.home-btn svg {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
header {
margin-bottom: 48px;
border-bottom: 1px solid var(--border);
padding-bottom: 28px;
}
.top-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
padding: 3px 10px;
border-radius: 20px;
background: #1f3a5f;
color: var(--accent);
border: 1px solid #1f4080;
letter-spacing: .05em;
margin-bottom: 14px;
}
h1 {
font-size: 32px;
font-weight: 700;
color: var(--text);
margin-bottom: 8px;
letter-spacing: -.02em;
}
h1 span { color: var(--accent); }
.subtitle {
color: var(--text-muted);
font-size: 15px;
margin-bottom: 20px;
}
.global-stats {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.gstat {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 18px;
text-align: center;
min-width: 90px;
}
.gstat .n {
font-size: 22px;
font-weight: 700;
font-family: 'IBM Plex Mono', monospace;
}
.gstat .l {
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: .06em;
}
.n.blue { color: var(--accent); }
.n.green { color: var(--accent2); }
.n.purple { color: var(--accent4); }
/* Run instructions */
.run-box {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 28px 32px;
margin-bottom: 40px;
}
.run-box h2 {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
color: var(--text);
font-family: 'IBM Plex Mono', monospace;
display: flex;
align-items: center;
gap: 10px;
}
.run-box h2::before {
content: '▶';
color: var(--accent2);
font-size: 18px;
}
.cmd-block {
background: #0a0c10;
border: 1px solid var(--border);
border-radius: 6px;
padding: 16px 20px;
margin: 16px 0;
font-family: 'IBM Plex Mono', monospace;
font-size: 13px;
color: var(--accent2);
display: flex;
align-items: center;
justify-content: space-between;
}
.cmd-block code {
color: var(--accent2);
font-family: 'IBM Plex Mono', monospace;
word-break: break-all;
}
.copy-btn {
background: transparent;
border: 1px solid var(--border);
color: var(--text-muted);
padding: 4px 10px;
border-radius: 4px;
font-size: 11px;
cursor: pointer;
transition: all .15s;
flex-shrink: 0;
margin-left: 10px;
}
.copy-btn:hover {
border-color: var(--accent2);
color: var(--accent2);
}
.note {
color: var(--text-muted);
font-size: 13px;
margin-top: 16px;
padding-left: 20px;
border-left: 2px solid var(--border);
}
.note code {
color: var(--accent);
background: #1a1f2a;
padding: 2px 5px;
border-radius: 3px;
}
/* Cards grid - simple 2-column */
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 30px;
}
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
padding: 24px 22px;
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
gap: 12px;
transition: border-color .15s, transform .15s, background .15s;
cursor: pointer;
height: 100%;
}
.card:hover {
border-color: var(--accent);
background: #1a2233;
transform: translateY(-3px);
}
.card-icon {
font-size: 32px;
margin-bottom: 5px;
}
.card-title {
font-family: 'IBM Plex Mono', monospace;
font-size: 16px;
font-weight: 600;
color: var(--text);
line-height: 1.3;
word-break: break-word;
}
.card-desc {
font-size: 13px;
color: var(--text-muted);
line-height: 1.5;
flex: 1;
margin: 8px 0;
}
.card-meta {
display: flex;
align-items: center;
gap: 12px;
margin-top: 8px;
font-family: 'IBM Plex Mono', monospace;
font-size: 11px;
}
.card-tag {
background: #1f3a5f;
color: var(--accent);
border: 1px solid #1f4080;
padding: 3px 10px;
border-radius: 20px;
}
.card-scenarios {
color: var(--accent2);
}
.card-arrow {
color: var(--accent);
font-size: 16px;
text-align: right;
margin-top: 10px;
}
.card:hover .card-arrow { transform: translateX(5px); }
.local-note {
background: #1a1f2a;
border: 1px solid var(--border);
border-radius: 6px;
padding: 12px 16px;
margin: 20px 0 10px;
color: var(--text-muted);
font-size: 12px;
font-family: 'IBM Plex Mono', monospace;
}
.local-note strong {
color: var(--accent);
}
footer {
margin-top: 60px;
padding-top: 20px;
border-top: 1px solid var(--border);
font-size: 12px;
color: var(--text-muted);
font-family: 'IBM Plex Mono', monospace;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px;
}
</style>
</head>
<body>
<!-- HOME BUTTON -->
<a href="../../_doc/index.html" class="home-btn">
<svg viewBox="0 0 24 24">
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
<polyline points="9 22 9 12 15 12 15 22"/>
</svg>
HOME
</a>
<div class="container">
<header>
<div class="top-badge">⬡ CRYPTOCALC</div>
<h1>Playwright E2E <span>Test Protocols</span></h1>
<p class="subtitle">End-to-end test documentation — Electron application</p>
<div class="global-stats">
<div class="gstat"><div class="n blue">2</div><div class="l">Test Files</div></div>
<div class="gstat"><div class="n blue">6</div><div class="l">Scenarios</div></div>
<div class="gstat"><div class="n green">6</div><div class="l">Passing</div></div>
<div class="gstat"><div class="n purple">0</div><div class="l">Failed</div></div>
</div>
</header>
<!-- RUN INSTRUCTIONS -->
<div class="run-box">
<h2>Running the E2E Tests</h2>
<p style="margin-bottom:12px;">All Playwright E2E tests can be executed using the batch script at the project root:</p>
<div class="cmd-block">
<code>_run_Tests.bat</code>
<button class="copy-btn" onclick="copyCommand('_run_Tests.bat')">📋 Copy</button>
</div>
<p style="margin:16px 0 8px;">To run a specific test file:</p>
<div class="cmd-block">
<code>npx playwright test tests/playwright/e2e/<filename> --config=tests/playwright/playwright.config.js</code>
<button class="copy-btn" onclick="copyCommand('npx playwright test tests/playwright/e2e/ --config=tests/playwright/playwright.config.js')">📋 Copy</button>
</div>
<div class="note">
<strong>📌 Note:</strong> Tests require the Electron application to be built or available in development mode.
The <code>_run_Tests.bat</code> script automatically handles the environment setup.
</div>
<div style="margin-top:20px;">
<p style="color:var(--text-muted); margin-bottom:8px;"><strong>Test reports</strong></p>
<div class="cmd-block" style="margin-top:8px;">
<code>npx playwright show-report tests/playwright/playwright-report</code>
<button class="copy-btn" onclick="copyCommand('npx playwright show-report tests/playwright/playwright-report')">📋 Copy</button>
</div>
<p style="color:var(--text-muted); font-size:12px; margin-top:8px;">View HTML report of the last test run</p>
</div>
</div>
<div class="local-note">
<strong>📍 Local directory:</strong> The protocol files are in the same folder as this index.
</div>
<!-- TEST CARDS -->
<div class="grid">
<!-- DOGECOIN HD WALLET -->
<a class="card" href="dogecoin_hd_wallet_test_protocol.html">
<div class="card-icon">🐕</div>
<div class="card-title">dogecoin_hd_wallet_test_protocol.html</div>
<div class="card-desc">Complete workflow: generate, save, open, edit and save a Dogecoin HD wallet with account/index modification. Validates address format, file persistence and reload.</div>
<div class="card-meta">
<span class="card-tag">HD Wallet</span>
<span class="card-scenarios">1 scenario</span>
</div>
<div class="card-arrow">→</div>
</a>
<!-- BITCOIN HD WALLET (validation suite) -->
<a class="card" href="hd_wallet_usecase_test_protocols.html">
<div class="card-icon">₿</div>
<div class="card-title">hd_wallet_usecase_test_protocols.html</div>
<div class="card-desc">Bitcoin HD wallet validation suite: address format validation, passphrase effect, account level, address index level, and determinism (5 test scenarios).</div>
<div class="card-meta">
<span class="card-tag">HD Wallet</span>
<span class="card-scenarios">5 scenarios</span>
</div>
<div class="card-arrow">→</div>
</a>
</div>
<footer>
<span>Cryptocalc — Echopraxium with the collaboration of Claude AI</span>
<span>Generated 2026-03-11</span>
</footer>
</div>
<script>
function copyCommand(cmd) {
navigator.clipboard.writeText(cmd).then(() => {
const btn = event.target;
const originalText = btn.textContent;
btn.textContent = '✓ Copied!';
setTimeout(() => {
btn.textContent = originalText;
}, 1500);
});
}
</script>
</body>
</html>