157 lines
7.2 KiB
HTML
157 lines
7.2 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 - SERVER</title>
|
|
<link rel="stylesheet" href="./styles.css">
|
|
<link rel="stylesheet" href="./styles/event-list.css">
|
|
<link rel="stylesheet" href="./styles/http-messages-table.css">
|
|
<script defer src="./server.bundle.js"></script>
|
|
<!-- Additional chunks will be loaded automatically -->
|
|
</head>
|
|
<body class="server-page">
|
|
<!-- 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 tool allows you to receive and view HTTP events (kind 21120) from Nostr relays, QR codes, or raw text input. Choose your preferred method using the tabs below.</p>
|
|
</div>
|
|
|
|
<!-- Server Info Section - Now placed above the tabs -->
|
|
<h2>Server Information</h2>
|
|
<div class="server-section">
|
|
<div class="server-info-container">
|
|
<div class="server-npub-container">
|
|
<label>Server Key:</label>
|
|
<input type="text" id="serverNpub" readonly class="server-npub-input">
|
|
<button id="toggleFormatBtn" class="toggle-format-btn" title="Toggle format">
|
|
<span id="formatBtnText">HEX</span>
|
|
</button>
|
|
<button id="copyServerNpubBtn" class="copy-btn" title="Copy Key">
|
|
<span id="copyBtnText">Copy</span>
|
|
</button>
|
|
</div>
|
|
<div class="format-indicator">
|
|
<small id="formatIndicator">Currently showing: NPUB format</small>
|
|
</div>
|
|
</div>
|
|
<div id="relayStatus" class="relay-status">Not connected</div>
|
|
</div>
|
|
|
|
<!-- Tab Navigation - Updated data-tab attributes to match section IDs -->
|
|
<div class="tabs">
|
|
<button class="tab-button active" data-tab="relay-connection-section">From Relay</button>
|
|
<button class="tab-button" data-tab="qr-code-scanner-section">From QR Scanner</button>
|
|
<button class="tab-button" data-tab="raw-event-input-section">From Raw Text</button>
|
|
</div>
|
|
|
|
<!-- Tab Content - Each section gets a distinct ID -->
|
|
<!-- Relay Tab Content -->
|
|
<div id="relay-connection-section" class="active">
|
|
<h2>Relay Connection</h2>
|
|
<div class="relay-connection">
|
|
|
|
<div class="relay-input-container">
|
|
<label for="relayUrl">Relay URL:</label>
|
|
<input type="text" id="relayUrl" value="wss://relay.degmods.com" placeholder="wss://relay.example.com">
|
|
<button id="connectRelayBtn" class="relay-connect-button">Connect</button>
|
|
</div>
|
|
<div class="filter-options">
|
|
<label class="filter-checkbox">
|
|
<input type="checkbox" id="showAllEvents">
|
|
Show all kind 21120 events
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- QR Scanner Tab Content -->
|
|
<div id="qr-code-scanner-section">
|
|
<h2>QR Code Scanner</h2>
|
|
<div class="qr-scanner-container">
|
|
<div class="qr-viewport">
|
|
<video id="qrVideo"></video>
|
|
<canvas id="qrCanvas" style="display: none;"></canvas>
|
|
</div>
|
|
<div class="qr-controls">
|
|
<button id="startScanBtn" class="action-button">Start Camera</button>
|
|
<button id="stopScanBtn" class="action-button" disabled>Stop Camera</button>
|
|
</div>
|
|
<div id="qrStatus" class="status-message">Camera inactive. Click Start Camera to begin scanning.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Raw Text Tab Content -->
|
|
<div id="raw-event-input-section">
|
|
<h2>Raw Event Input</h2>
|
|
<div class="raw-input-container">
|
|
<p>Paste a raw Nostr event JSON below:</p>
|
|
<textarea id="rawEventInput" placeholder='{"id": "...", "pubkey": "...", "created_at": 1234567890, "kind": 21120, "tags": [], "content": "..."}' rows="10"></textarea>
|
|
<button id="parseRawEventBtn" class="action-button">Parse Event</button>
|
|
<div id="rawInputStatus" class="status-message"></div>
|
|
</div>
|
|
</div>
|
|
<h2>HTTP Messages</h2>
|
|
<div class="received-events">
|
|
<!-- Table-based view for HTTP messages with expandable rows -->
|
|
<div id="httpMessagesTableContainer"></div>
|
|
|
|
<!-- Keep the event details and responses sections for compatibility with existing code -->
|
|
<div style="display: none;">
|
|
<div id="eventDetails" class="event-details">
|
|
<div class="empty-state">
|
|
Select a request to view details
|
|
</div>
|
|
</div>
|
|
|
|
<div id="relatedResponses" class="related-responses-section">
|
|
<h3>Responses</h3>
|
|
<div id="responsesList" class="responses-list">
|
|
<div class="empty-state">
|
|
No responses available
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Move the 21121 Response JSON container to be completely hidden -->
|
|
<div id="response21121Json" class="response-json-container" style="display: none; position: absolute; visibility: hidden; z-index: -9999;">
|
|
<pre class="json-content">
|
|
<!-- 21121 response JSON content will be stored here but displayed in the modal -->
|
|
</pre>
|
|
</div>
|
|
|
|
<!-- HTTP Response Modal -->
|
|
<div id="httpResponseModal" class="http-response-modal" style="display: none;">
|
|
<div class="http-response-container">
|
|
<div class="http-response-header">
|
|
<h3>HTTP Response</h3>
|
|
<button class="close-modal-btn">×</button>
|
|
</div>
|
|
<div class="http-response-tabs">
|
|
<button class="tab-btn active" data-tab="formatted-response">Formatted</button>
|
|
<button class="tab-btn" data-tab="raw-response">Raw</button>
|
|
</div>
|
|
<div class="http-response-content">
|
|
<div class="tab-content active" id="formatted-response">
|
|
<div class="http-formatted-container">
|
|
<!-- Formatted HTTP response will be shown here -->
|
|
</div>
|
|
</div>
|
|
<div class="tab-content" id="raw-response">
|
|
<pre><!-- Raw HTTP response will be shown here --></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scripts are now loaded as chunks by webpack -->
|
|
</body>
|
|
</html> |