Skip to content

Commit 3a5933b

Browse files
vveerrggclaude
vveerrgg
and
claude
committed
chore: move test page to two-column layout with controls on right
Buttons now sit on the right side near where the extension popup appears, results on the left. Better for App Store screenshot captures. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1 parent 5563dc0 commit 3a5933b

2 files changed

Lines changed: 107 additions & 92 deletions

File tree

‎docs/test.html‎

Lines changed: 106 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -22,15 +22,28 @@
2222
}
2323

2424
.container {
25-
max-width: 720px;
26-
margin: 0 auto;
25+
display: flex;
26+
gap: 24px;
2727
padding: 40px 20px 60px;
28+
max-width: 1200px;
29+
margin: 0 auto;
30+
}
31+
32+
/* Left column — results */
33+
.col-left {
34+
flex: 1;
35+
min-width: 0;
36+
}
37+
38+
/* Right column — controls */
39+
.col-right {
40+
width: 280px;
41+
flex-shrink: 0;
2842
}
2943

3044
/* Header */
3145
.header {
32-
text-align: center;
33-
margin-bottom: 32px;
46+
margin-bottom: 24px;
3447
}
3548

3649
.header a {
@@ -46,37 +59,35 @@
4659
.logo {
4760
display: flex;
4861
align-items: center;
49-
justify-content: center;
5062
gap: 12px;
51-
margin: 16px 0 8px;
63+
margin: 12px 0 4px;
5264
}
5365

5466
.logo svg {
55-
width: 40px;
56-
height: 40px;
67+
width: 32px;
68+
height: 32px;
5769
}
5870

5971
.logo h1 {
60-
font-size: 28px;
72+
font-size: 24px;
6173
font-weight: 700;
6274
color: #2d2d2d;
6375
}
6476

6577
.subtitle {
66-
font-size: 16px;
78+
font-size: 14px;
6779
color: #75715e;
6880
}
6981

7082
/* Status */
7183
.status {
7284
display: flex;
7385
align-items: center;
74-
justify-content: center;
7586
gap: 8px;
76-
margin: 24px 0;
77-
padding: 12px 20px;
87+
margin-bottom: 20px;
88+
padding: 10px 16px;
7889
border-radius: 8px;
79-
font-size: 15px;
90+
font-size: 14px;
8091
font-weight: 500;
8192
}
8293

@@ -107,21 +118,21 @@
107118

108119
/* Sections */
109120
.section {
110-
margin-bottom: 24px;
121+
margin-bottom: 16px;
111122
}
112123

113124
.section-title {
114-
font-size: 13px;
125+
font-size: 11px;
115126
font-weight: 600;
116127
text-transform: uppercase;
117128
letter-spacing: 0.5px;
118129
color: #75715e;
119-
margin-bottom: 10px;
130+
margin-bottom: 8px;
120131
}
121132

122133
.button-row {
123134
display: flex;
124-
gap: 10px;
135+
gap: 8px;
125136
flex-wrap: wrap;
126137
}
127138

@@ -130,11 +141,11 @@
130141
display: inline-flex;
131142
align-items: center;
132143
gap: 6px;
133-
padding: 10px 18px;
144+
padding: 8px 14px;
134145
border: none;
135146
border-radius: 6px;
136147
font-family: inherit;
137-
font-size: 14px;
148+
font-size: 13px;
138149
font-weight: 600;
139150
cursor: pointer;
140151
transition: opacity 0.15s, transform 0.1s;
@@ -157,16 +168,18 @@
157168
.btn-method {
158169
background: #3e3d32;
159170
color: #a6e22e;
171+
width: 100%;
172+
justify-content: center;
160173
}
161174

162175
.btn-fire-all {
163176
background: #a6e22e;
164177
color: #272822;
165-
font-size: 16px;
166-
padding: 14px 28px;
178+
font-size: 14px;
179+
padding: 12px 20px;
167180
width: 100%;
168181
justify-content: center;
169-
margin-top: 8px;
182+
margin-top: 4px;
170183
}
171184

172185
.btn-fire-all:hover {
@@ -178,15 +191,14 @@
178191
color: #75715e;
179192
border: 1px solid #d5d5d0;
180193
font-weight: 500;
181-
padding: 8px 16px;
194+
padding: 6px 12px;
182195
}
183196

184197
/* Results */
185198
.results-header {
186199
display: flex;
187200
align-items: center;
188201
justify-content: space-between;
189-
margin-top: 36px;
190202
margin-bottom: 12px;
191203
}
192204

@@ -274,102 +286,104 @@
274286
}
275287

276288
/* Responsive */
277-
@media (max-width: 480px) {
289+
@media (max-width: 640px) {
278290
.container {
291+
flex-direction: column-reverse;
279292
padding: 24px 16px 40px;
280293
}
281294

282-
.logo h1 {
283-
font-size: 24px;
295+
.col-right {
296+
width: 100%;
284297
}
285298

286299
.button-row {
287-
flex-direction: column;
300+
flex-direction: row;
288301
}
289302

290303
.btn-method {
291-
width: 100%;
292-
justify-content: center;
293-
}
294-
295-
.btn-fire-all {
296-
font-size: 15px;
297-
padding: 12px 20px;
298-
}
299-
300-
.result-body {
301-
font-size: 11px;
304+
width: auto;
305+
flex: 1;
302306
}
303307
}
304308
</style>
305309
</head>
306310
<body>
307311
<div class="container">
308-
<!-- Header -->
309-
<div class="header">
310-
<a href="index.html">&larr; nostrkey.com</a>
311-
<div class="logo">
312-
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
313-
<circle cx="50" cy="50" r="45" stroke="#a6e22e" stroke-width="4" fill="#3e3d32"/>
314-
<path d="M35 50L45 60L65 40" stroke="#a6e22e" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
315-
</svg>
316-
<h1>NostrKey</h1>
312+
<!-- Left column — results -->
313+
<div class="col-left">
314+
<div class="results-header">
315+
<h2>Results</h2>
316+
<button class="btn btn-clear" id="btn-clear">Clear</button>
317+
</div>
318+
<div id="results">
319+
<div class="empty-state">Click a button to test a window.nostr method</div>
317320
</div>
318-
<p class="subtitle">Extension Test</p>
319-
</div>
320-
321-
<!-- Status -->
322-
<div id="status" class="status not-detected">
323-
<span class="status-dot"></span>
324-
<span>Checking for extension…</span>
325321
</div>
326322

327-
<!-- Test Buttons -->
328-
<div class="section">
329-
<div class="section-title">Identity</div>
330-
<div class="button-row">
331-
<button class="btn btn-method" id="btn-getPublicKey">Get Public Key</button>
332-
<button class="btn btn-method" id="btn-getRelays">Get Relays</button>
323+
<!-- Right column — controls (near extension popup) -->
324+
<div class="col-right">
325+
<!-- Header -->
326+
<div class="header">
327+
<a href="index.html">&larr; nostrkey.com</a>
328+
<div class="logo">
329+
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
330+
<circle cx="50" cy="50" r="45" stroke="#a6e22e" stroke-width="4" fill="#3e3d32"/>
331+
<path d="M35 50L45 60L65 40" stroke="#a6e22e" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
332+
</svg>
333+
<h1>NostrKey</h1>
334+
</div>
335+
<p class="subtitle">Extension Test</p>
333336
</div>
334-
</div>
335337

336-
<div class="section">
337-
<div class="section-title">Signing</div>
338-
<div class="button-row">
339-
<button class="btn btn-method" id="btn-signEvent">Sign Test Event</button>
338+
<!-- Status -->
339+
<div id="status" class="status not-detected">
340+
<span class="status-dot"></span>
341+
<span>Checking for extension…</span>
340342
</div>
341-
</div>
342343

343-
<div class="section">
344-
<div class="section-title">Encryption — NIP-44</div>
345-
<div class="button-row">
346-
<button class="btn btn-method" id="btn-nip44Encrypt">Encrypt</button>
347-
<button class="btn btn-method" id="btn-nip44Decrypt">Decrypt</button>
344+
<!-- Test Buttons -->
345+
<div class="section">
346+
<div class="section-title">Identity</div>
347+
<div class="button-row">
348+
<button class="btn btn-method" id="btn-getPublicKey">Get Public Key</button>
349+
</div>
350+
<div class="button-row" style="margin-top:8px">
351+
<button class="btn btn-method" id="btn-getRelays">Get Relays</button>
352+
</div>
348353
</div>
349-
</div>
350354

351-
<div class="section">
352-
<div class="section-title">Encryption — NIP-04 (deprecated)</div>
353-
<div class="button-row">
354-
<button class="btn btn-method" id="btn-nip04Encrypt">Encrypt</button>
355-
<button class="btn btn-method" id="btn-nip04Decrypt">Decrypt</button>
355+
<div class="section">
356+
<div class="section-title">Signing</div>
357+
<div class="button-row">
358+
<button class="btn btn-method" id="btn-signEvent">Sign Test Event</button>
359+
</div>
356360
</div>
357-
</div>
358361

359-
<div class="section">
360-
<button class="btn btn-fire-all" id="btn-fire-all">
361-
&#9889; Fire All — Test Every Method
362-
</button>
363-
</div>
362+
<div class="section">
363+
<div class="section-title">NIP-44</div>
364+
<div class="button-row">
365+
<button class="btn btn-method" id="btn-nip44Encrypt">Encrypt</button>
366+
</div>
367+
<div class="button-row" style="margin-top:8px">
368+
<button class="btn btn-method" id="btn-nip44Decrypt">Decrypt</button>
369+
</div>
370+
</div>
364371

365-
<!-- Results -->
366-
<div class="results-header">
367-
<h2>Results</h2>
368-
<button class="btn btn-clear" id="btn-clear">Clear</button>
369-
</div>
372+
<div class="section">
373+
<div class="section-title">NIP-04 (deprecated)</div>
374+
<div class="button-row">
375+
<button class="btn btn-method" id="btn-nip04Encrypt">Encrypt</button>
376+
</div>
377+
<div class="button-row" style="margin-top:8px">
378+
<button class="btn btn-method" id="btn-nip04Decrypt">Decrypt</button>
379+
</div>
380+
</div>
370381

371-
<div id="results">
372-
<div class="empty-state">Click a button above to test a window.nostr method</div>
382+
<div class="section">
383+
<button class="btn btn-fire-all" id="btn-fire-all">
384+
&#9889; Fire All
385+
</button>
386+
</div>
373387
</div>
374388
</div>
375389

‎docs/test.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -241,3 +241,4 @@ document.getElementById('btn-nip04Encrypt').addEventListener('click', function()
241241
document.getElementById('btn-nip04Decrypt').addEventListener('click', function() { runTest('nip04Decrypt'); });
242242
document.getElementById('btn-fire-all').addEventListener('click', fireAll);
243243
document.getElementById('btn-clear').addEventListener('click', clearResults);
244+

0 commit comments

Comments
 (0)