<!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>