<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Implement strict Content Security Policy -->
<title>HTTP Messages - CLIENT</title>
<!-- Load our CSS files -->
<link rel="stylesheet" href="./styles.css">
<link rel="stylesheet" href="./styles/event-list.css">
<link rel="stylesheet" href="./styles/client-events-table.css">
</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 (HTTP Request Converter) -->
<div class="content">
<div class="info-box">
<p>This tool converts HTTP requests into a single Nostr event of kind 21120. The HTTP request is encrypted using NIP-44 in the content field with appropriate tags following the specification.</p>
</div>
<h2>Client Information:</h2>
<div class="client-info" style="margin-bottom: 15px;">
<div style="display: flex; align-items: center; margin-bottom: 10px;">
<div style="font-weight: bold; margin-right: 10px;">Your Pubkey:</div>
<div id="clientPubkey" style="font-family: monospace; word-break: break-all;">Not logged in</div>
<button id="toggleClientKeyFormatBtn" class="server-format-button" title="Toggle format" style="margin-left: 10px;">HEX</button>
</div>
<div class="format-indicator">
<small id="clientKeyFormatIndicator">Currently showing: NPUB format</small>
</div>
</div>
<h2>Server Information:</h2>
<div style="margin-bottom: 15px;">
<div style="margin-bottom: 10px;">
<label for="relay">Relay to search for servers:</label><br>
<div class="server-input-container">
<input type="text" id="relay" value="wss://relay.degmods.com" class="server-input" style="border-radius: 4px 0 0 4px;">
<button id="searchRelayBtn" class="server-search-button">Search Relay</button>
<button id="refreshRelayBtn" class="server-refresh-button" title="Clear cache and fetch fresh data">🔄</button>
</div>
</div>
<div style="margin-bottom: 10px;">
<label for="serverSelection">Choose a server:</label><br>
<div class="server-input-container">
<input type="text" id="serverPubkey" placeholder="Selected server pubkey (d-tag) or enter manually" class="server-input">
<button id="toggleKeyFormatBtn" class="server-format-button" title="Toggle format">HEX</button>
<button id="selectServerBtn" class="server-select-button">Select Server</button>
</div>
<div class="format-indicator">
<small id="keyFormatIndicator">Currently showing: NPUB format</small>
</div>
<div id="serverSelectionContainer" class="server-selection-container" style="display: none;">
<div class="selection-header">
<input type="text" id="serverSearchInput" placeholder="Search by operator name/pubkey" class="server-search-input">
<button id="closeSelectionBtn" class="close-selection-btn">×</button>
</div>
<div id="serverList" class="server-list">
<!-- Server list will be populated here -->
<div class="server-list-loading">Loading servers...</div>
</div>
</div>
</div>
<div>
<label for="relay">Response Relay (optional):</label><br>
<input type="text" id="relay" value="wss://relay.degmods.com" style="width: 100%; padding: 8px;">
</div>
</div>
<h2>Enter HTTP Request:</h2>
<textarea id="httpRequest" placeholder="GET /index.html HTTP/1.1
Host: example.com
User-Agent: Browser/1.0
"></textarea>
<button id="convertButton">Convert to Event</button>
<div id="output" hidden>
<h2>Converted Event:</h2>
<div class="event-output-container">
<pre id="eventOutput"></pre>
<button id="copyEventButton" class="copy-button" title="Copy to clipboard">
<span>Copy</span>
</button>
</div>
<div class="publish-container">
<h2>Publish to Relay:</h2>
<div class="publish-input-container">
<input type="text" id="publishRelay" value="wss://relay.degmods.com" placeholder="wss://relay.example.com" class="publish-input">
<button id="publishButton" class="publish-button">Publish Event</button>
</div>
<div id="publishResult" class="publish-result" style="display: none;">
<!-- Publish results will be shown here -->
</div>
</div>
<div class="qr-container">
<h2>QR Code:</h2>
<div id="qrCode"></div>
<p><small>Scan this QR code to share the Nostr event</small></p>
</div>
</div>
</div>
<!-- Client Events Table -->
<div class="client-events-section">
<h2>Outgoing Requests History</h2>
<div class="info-box">
<p>Below is a history of your outgoing KIND 21120 requests and their responses (KIND 21121). Click on a request to see details.</p>
</div>
<div id="clientEventsTableContainer"></div>
</div>
<!-- Include the webpack bundled JavaScript file with forced loading -->
<script src="./client.bundle.js" onload="console.log('Client bundle loaded successfully')"></script>
</body>
</html>