mirror of
https://github.com/PR0M3TH3AN/VoxVera.git
synced 2026-10-27 09:40:40 +00:00
thePR0M3TH3ANandClaude Opus 4.8
98086a0ad4
A small screen-only link below the flyer preview (outside the printable sheet, hidden in print) opens board.html: a spreadsheet-style list of the most recent VoxVera flyers found on the default relays. - Columns: title, link (the poster URL shown as "link"), posting npub, language, and posted date; every column is sortable (default date descending). Replaceable events are de-duplicated per author+d identifier, keeping the latest. - board.js is independent of nostr-client.js (which exports nothing): its UI strings live in BOARD_UI for all 14 languages, and it reuses the vendored nostr-tools and locales.js (language names + RTL direction). - The board has its own language selector that reads/writes the same voxvera_nostr_lang localStorage key as the main client, so the choice carries across pages; switching it re-localizes the chrome, headers, language labels, and date formatting and flips RTL. - Untrusted relay content is escaped, and link URLs are rejected unless http(s) so javascript:/data: never render as a link. Docs updated (README, spec, AGENTS). Playwright: add tests for the out-of-sheet print-hidden link, the localized sortable columns, and the board language selector (incl. RTL + persistence). 72 tests pass across Chromium, Firefox, WebKit, and Android/iOS mobile emulations. Co-Authored-By: Claude Opus 4.8 <[email protected]>
180 lines
8.1 KiB
HTML
180 lines
8.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>VoxVera Nostr Client</title>
|
|
<link rel="stylesheet" href="nostr-client.css">
|
|
</head>
|
|
<body>
|
|
<header class="topbar">
|
|
<div>
|
|
<h1 id="client-title">VoxVera Nostr Client</h1>
|
|
<p id="client-description">Static editor and viewer for decentralized flyer source events.</p>
|
|
</div>
|
|
<div class="topbar-controls">
|
|
<nav class="mode-tabs" aria-label="Client mode">
|
|
<button id="editor-tab" class="tab active" type="button" data-mode="editor">Editor</button>
|
|
<button id="viewer-tab" class="tab" type="button" data-mode="viewer">Viewer</button>
|
|
</nav>
|
|
<select id="topbar-lang" aria-label="Language"></select>
|
|
<select id="topbar-paper" aria-label="Paper size"></select>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="viewer-floating" aria-label="Viewer controls">
|
|
<button type="button" id="open-viewer-controls">Load Event</button>
|
|
<button type="button" id="viewer-print">Print</button>
|
|
<button type="button" id="viewer-editor">Editor</button>
|
|
<select id="viewer-lang" aria-label="Language"></select>
|
|
<select id="viewer-paper" aria-label="Paper size"></select>
|
|
</div>
|
|
|
|
<main>
|
|
<section id="editor-panel" class="panel active" aria-labelledby="editor-heading">
|
|
<div class="workspace">
|
|
<form id="editor-form" class="editor-form">
|
|
<div class="section-title">
|
|
<h2 id="editor-heading">Editor</h2>
|
|
<span id="signer-state" class="state-pill">Checking signer</span>
|
|
</div>
|
|
|
|
<label>
|
|
<span id="label-relays">Relays</span>
|
|
<textarea id="editor-relays" rows="3" spellcheck="false"></textarea>
|
|
</label>
|
|
<div class="identity-row">
|
|
<span id="identity-state" class="state-pill">Checking identity</span>
|
|
<button type="button" id="generate-anon-identity" class="secondary-button">Generate anonymous npub</button>
|
|
</div>
|
|
|
|
<div class="field-grid">
|
|
<label>
|
|
<span id="label-flyer-name">Flyer Name</span>
|
|
<input id="field-folder-name" name="folder_name" maxlength="64" value="voxvera">
|
|
</label>
|
|
<label>
|
|
<span id="label-language">Language</span>
|
|
<select id="field-lang" name="lang">
|
|
<option value="en">en</option>
|
|
<option value="es">es</option>
|
|
<option value="de">de</option>
|
|
<option value="fr">fr</option>
|
|
<option value="ru">ru</option>
|
|
<option value="he">he</option>
|
|
<option value="ar">ar</option>
|
|
<option value="ja">ja</option>
|
|
<option value="hi">hi</option>
|
|
<option value="sw">sw</option>
|
|
<option value="pt">pt</option>
|
|
<option value="tr">tr</option>
|
|
<option value="zh">zh</option>
|
|
<option value="fa">fa</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<label>
|
|
<span id="label-page-title">Page title</span>
|
|
<input id="field-name" name="name" maxlength="120" value="Vox Vera Printable Flyers">
|
|
</label>
|
|
<label>
|
|
<span id="label-title">Title</span>
|
|
<input id="field-title" name="title" maxlength="80" value="TOP SECRET">
|
|
</label>
|
|
<label>
|
|
<span id="label-subtitle">Subtitle</span>
|
|
<input id="field-subtitle" name="subtitle" maxlength="120" value="DO ~~NOT~~ DISTRIBUTE">
|
|
</label>
|
|
<label>
|
|
<span id="label-headline">Headline</span>
|
|
<input id="field-headline" name="headline" maxlength="160" value="OPERATION VOX VERA">
|
|
</label>
|
|
<label>
|
|
<span id="label-content">Content</span>
|
|
<textarea id="field-content" name="content" rows="9" maxlength="10000"></textarea>
|
|
</label>
|
|
<label>
|
|
<span id="label-url-message">URL message</span>
|
|
<input id="field-url-message" name="url_message" maxlength="240" value="Follow this link to learn more.">
|
|
</label>
|
|
<label>
|
|
<span id="label-poster-url">Content URL</span>
|
|
<input id="field-url" name="url" maxlength="2048" value="https://voxvera.org/">
|
|
</label>
|
|
<label>
|
|
<span id="label-footer-message">Footer message</span>
|
|
<input id="field-footer-message" name="footer_message" maxlength="240" value="0110010 0101011 0110010 0111101 0110100">
|
|
</label>
|
|
<div class="actions">
|
|
<button type="button" id="preview-editor">Preview</button>
|
|
<button type="button" id="export-event">Export event JSON</button>
|
|
<button type="submit" id="publish-event">Sign and publish</button>
|
|
</div>
|
|
</form>
|
|
|
|
<aside class="result-panel">
|
|
<h2 id="published-event-heading">Published Event</h2>
|
|
<dl class="result-list">
|
|
<dt id="result-event-id-label">Event ID</dt>
|
|
<dd class="copy-value"><code id="event-id-output">Not published</code><button type="button" class="copy-button" data-copy-target="event-id-output">Copy</button></dd>
|
|
<dt id="result-author-npub-label">Author npub</dt>
|
|
<dd class="copy-value"><code id="author-npub-output">Not generated</code><button type="button" class="copy-button" data-copy-target="author-npub-output">Copy</button></dd>
|
|
<dt id="result-naddr-label">Nostr address</dt>
|
|
<dd class="copy-value"><code id="naddr-output">Not generated</code><button type="button" class="copy-button" data-copy-target="naddr-output">Copy</button></dd>
|
|
<dt id="result-poster-url-label">Poster URL</dt>
|
|
<dd class="copy-value"><code id="poster-url-output">Not generated</code><button type="button" class="copy-button" data-copy-target="poster-url-output">Copy</button></dd>
|
|
<dt id="result-status-label">Status</dt>
|
|
<dd id="publish-status">Idle</dd>
|
|
</dl>
|
|
<textarea id="event-json-output" rows="14" spellcheck="false" readonly></textarea>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="viewer-panel" class="panel viewer-drawer" aria-labelledby="viewer-heading">
|
|
<div class="workspace">
|
|
<form id="viewer-form" class="editor-form">
|
|
<div class="section-title">
|
|
<h2 id="viewer-heading">Viewer</h2>
|
|
<button type="button" id="close-viewer-controls" class="secondary-button">Close</button>
|
|
</div>
|
|
<label>
|
|
<span id="label-event-id">Event ID</span>
|
|
<input id="viewer-event-id" spellcheck="false" placeholder="naddr, event id, note1, nevent1, or nostr: URL">
|
|
</label>
|
|
<label>
|
|
<span id="label-viewer-relays">Relays</span>
|
|
<textarea id="viewer-relays" rows="3" spellcheck="false"></textarea>
|
|
</label>
|
|
<div class="actions">
|
|
<button id="viewer-fetch-render" type="submit">Fetch and render</button>
|
|
<button type="button" id="copy-viewer-config">Copy config JSON</button>
|
|
</div>
|
|
<p id="viewer-status" class="status-line">Idle</p>
|
|
</form>
|
|
|
|
<aside class="result-panel">
|
|
<h2 id="normalized-config-heading">Normalized Config</h2>
|
|
<textarea id="viewer-config-output" rows="16" spellcheck="false" readonly></textarea>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="preview-band" aria-label="Flyer preview">
|
|
<div class="preview-toolbar">
|
|
<h2 id="preview-heading">Preview</h2>
|
|
<button type="button" id="print-preview">Print preview</button>
|
|
</div>
|
|
<div id="flyer-preview" class="flyer-preview"></div>
|
|
<p class="board-link"><a href="board.html" data-i18n-key="bulletin_board">Bulletin board</a></p>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="locales.js"></script>
|
|
<script src="vendor/qrcode-generator/qrcode.js"></script>
|
|
<script src="vendor/nostr-tools/nostr.bundle.js"></script>
|
|
<script src="nostr-client.js"></script>
|
|
</body>
|
|
</html>
|