128 lines
6.6 KiB
HTML
128 lines
6.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>HTTP Messages - BILLBOARD</title>
|
|
<link rel="stylesheet" href="./styles.css">
|
|
<script defer src="./client.bundle.js"></script>
|
|
<!-- Additional chunks will be loaded automatically -->
|
|
</head>
|
|
<body>
|
|
<!-- Navigation bar container - content will be injected by navbar.ts -->
|
|
<div id="navbarContainer" class="top-nav">
|
|
<!-- Navbar content will be injected here -->
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<div class="content">
|
|
<div class="info-box">
|
|
<p>This page displays server registration events (kind 31120) that advertise HTTP-over-Nostr servers. These events help clients discover available servers and establish connections.</p>
|
|
</div>
|
|
|
|
<h2>Server Registrations</h2>
|
|
<div class="billboard-section">
|
|
<div class="relay-connection">
|
|
<!-- Relay Connection Controls -->
|
|
<div class="relay-input-container">
|
|
<label for="billboardRelayUrl">Relay URL:</label>
|
|
<input type="text" id="billboardRelayUrl" value="wss://relay.degmods.com" placeholder="wss://relay.example.com">
|
|
<button id="billboardConnectBtn" class="relay-connect-button">Connect</button>
|
|
</div>
|
|
<div class="filter-options">
|
|
<label class="filter-checkbox">
|
|
<input type="checkbox" id="showAllServerEvents">
|
|
Show all kind 31120 events
|
|
</label>
|
|
</div>
|
|
<div id="billboardRelayStatus" class="relay-status">Not connected</div>
|
|
</div>
|
|
<div class="billboard-actions">
|
|
<div class="login-container">
|
|
<div id="login-status">Not logged in.</div>
|
|
<button id="login-button" class="auth-button">Login with Nostr</button>
|
|
<button id="logout-button" class="auth-button" style="display: none;">Logout</button>
|
|
</div>
|
|
<button id="createBillboardBtn" class="primary-button">+ Add New Billboard</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="billboard-container">
|
|
<div id="billboardContent" class="billboard-content">
|
|
<div class="empty-state">
|
|
No 31120 events found yet. Connect to a relay to view server registrations.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal for creating/editing billboards -->
|
|
<div id="billboardModal" class="modal">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h3 id="modalTitle">Create New Billboard</h3>
|
|
<span class="close-modal">×</span>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p class="form-hint">
|
|
A billboard is a server registration event that allows clients to discover your HTTP-over-Nostr server.
|
|
</p>
|
|
|
|
<form id="billboardForm">
|
|
<input type="hidden" id="editEventId" value="">
|
|
|
|
<div class="modal-columns">
|
|
<div class="modal-column">
|
|
<div class="form-group">
|
|
<label for="billboardDescription">Description:</label>
|
|
<input type="text" id="billboardDescription" placeholder="HTTP-over-Nostr server">
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="billboardRelays">Relays:</label>
|
|
<textarea id="billboardRelays" rows="2" placeholder="wss://relay.example.com"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-column">
|
|
<div class="form-group">
|
|
<label>Server Key:</label>
|
|
<div class="pubkey-options">
|
|
<div class="radio-option">
|
|
<input type="radio" id="generatePubkey" name="pubkeyOption" checked>
|
|
<label for="generatePubkey">Generate new key</label>
|
|
</div>
|
|
<div class="radio-option">
|
|
<input type="radio" id="providePubkey" name="pubkeyOption">
|
|
<label for="providePubkey">Use existing key</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="pubkeyInputContainer" class="hidden">
|
|
<input type="text" id="serverPubkey" placeholder="npub or hex pubkey">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="billboardExpiry">Expiry:</label>
|
|
<div class="expiry-input-container">
|
|
<input type="number" id="billboardExpiry" value="24" min="1" max="720">
|
|
<span class="expiry-unit">hours</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" id="cancelBillboard" class="secondary-button">Cancel</button>
|
|
<button type="submit" id="saveBillboard" class="primary-button">Sign & Publish</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts are now loaded as chunks by webpack -->
|
|
</body>
|
|
</html> |