parent
c52891136c
commit
78a0a8bd18
@ -11,24 +11,23 @@
|
||||
<script defer src="./bundle.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Theme toggle button -->
|
||||
<div class="theme-toggle-container">
|
||||
<button id="themeToggleBtn" class="theme-toggle-btn">
|
||||
<span id="themeIcon">🌙</span>
|
||||
<span id="themeText">Dark Mode</span>
|
||||
</button>
|
||||
<!-- Top Navigation Bar -->
|
||||
<div class="top-nav">
|
||||
<div class="nav-left">
|
||||
<a href="./index.html" class="nav-link">CLIENT</a>
|
||||
<a href="./receive.html" class="nav-link">SERVER</a>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<a href="./help.html" class="nav-link nav-icon active" title="Documentation">❓</a>
|
||||
<a href="./profile.html" class="nav-link nav-icon" title="Profile">👤</a>
|
||||
<button id="themeToggleBtn" class="theme-toggle-btn" title="Toggle Dark Mode">
|
||||
<span id="themeIcon">🌙</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h1>HTTP Messages</h1>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div class="navigation">
|
||||
<a href="./index.html" class="nav-link">Send Events</a>
|
||||
<a href="./help.html" class="nav-link active">Documentation</a>
|
||||
<a href="./receive.html" class="nav-link">Receive Events</a>
|
||||
<a href="./profile.html" class="nav-link">Profile</a>
|
||||
</div>
|
||||
|
||||
<!-- Documentation Content -->
|
||||
<div class="content">
|
||||
<div class="info-box">
|
||||
|
@ -4,29 +4,26 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<!-- Implement strict Content Security Policy -->
|
||||
<title>HTTP Messages - Send Events</title>
|
||||
<title>HTTP Messages - CLIENT</title>
|
||||
<!-- Load our CSS file -->
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<!-- Include the Nostr extensions - these will be accessed via window.nostr -->
|
||||
<script defer src="./bundle.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Theme toggle button -->
|
||||
<div class="theme-toggle-container">
|
||||
<button id="themeToggleBtn" class="theme-toggle-btn">
|
||||
<span id="themeIcon">🌙</span>
|
||||
<span id="themeText">Dark Mode</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h1>HTTP Messages</h1>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div class="navigation">
|
||||
<a href="./index.html" class="nav-link active">Send Events</a>
|
||||
<a href="./help.html" class="nav-link">Documentation</a>
|
||||
<a href="./receive.html" class="nav-link">Receive Events</a>
|
||||
<a href="./profile.html" class="nav-link">Profile</a>
|
||||
<!-- Top Navigation Bar -->
|
||||
<div class="top-nav">
|
||||
<div class="nav-left">
|
||||
<a href="./index.html" class="nav-link active">CLIENT</a>
|
||||
<a href="./receive.html" class="nav-link">SERVER</a>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<a href="./help.html" class="nav-link nav-icon" title="Documentation">❓</a>
|
||||
<a href="./profile.html" class="nav-link nav-icon" title="Profile">👤</a>
|
||||
<button id="themeToggleBtn" class="theme-toggle-btn" title="Toggle Dark Mode">
|
||||
<span id="themeIcon">🌙</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content (HTTP Request Converter) -->
|
||||
|
@ -8,22 +8,19 @@
|
||||
<script defer src="./bundle.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Theme toggle button -->
|
||||
<div class="theme-toggle-container">
|
||||
<button id="themeToggleBtn" class="theme-toggle-btn">
|
||||
<span id="themeIcon">🌙</span>
|
||||
<span id="themeText">Dark Mode</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h1>HTTP Messages</h1>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div class="navigation">
|
||||
<a href="./index.html" class="nav-link">Send Events</a>
|
||||
<a href="./help.html" class="nav-link">Documentation</a>
|
||||
<a href="./receive.html" class="nav-link">Receive Events</a>
|
||||
<a href="./profile.html" class="nav-link active">Profile</a>
|
||||
<!-- Top Navigation Bar -->
|
||||
<div class="top-nav">
|
||||
<div class="nav-left">
|
||||
<a href="./index.html" class="nav-link">CLIENT</a>
|
||||
<a href="./receive.html" class="nav-link">SERVER</a>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<a href="./help.html" class="nav-link nav-icon" title="Documentation">❓</a>
|
||||
<a href="./profile.html" class="nav-link nav-icon active" title="Profile">👤</a>
|
||||
<button id="themeToggleBtn" class="theme-toggle-btn" title="Toggle Dark Mode">
|
||||
<span id="themeIcon">🌙</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
|
@ -3,27 +3,24 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>HTTP Messages - Receive Events</title>
|
||||
<title>HTTP Messages - SERVER</title>
|
||||
<link rel="stylesheet" href="./styles.css">
|
||||
<script defer src="./bundle.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Theme toggle button -->
|
||||
<div class="theme-toggle-container">
|
||||
<button id="themeToggleBtn" class="theme-toggle-btn">
|
||||
<span id="themeIcon">🌙</span>
|
||||
<span id="themeText">Dark Mode</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h1>HTTP Messages</h1>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div class="navigation">
|
||||
<a href="./index.html" class="nav-link">Send Events</a>
|
||||
<a href="./help.html" class="nav-link">Documentation</a>
|
||||
<a href="./receive.html" class="nav-link active">Receive Events</a>
|
||||
<a href="./profile.html" class="nav-link">Profile</a>
|
||||
<!-- Top Navigation Bar -->
|
||||
<div class="top-nav">
|
||||
<div class="nav-left">
|
||||
<a href="./index.html" class="nav-link">CLIENT</a>
|
||||
<a href="./receive.html" class="nav-link active">SERVER</a>
|
||||
</div>
|
||||
<div class="nav-right">
|
||||
<a href="./help.html" class="nav-link nav-icon" title="Documentation">❓</a>
|
||||
<a href="./profile.html" class="nav-link nav-icon" title="Profile">👤</a>
|
||||
<button id="themeToggleBtn" class="theme-toggle-btn" title="Toggle Dark Mode">
|
||||
<span id="themeIcon">🌙</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
|
@ -69,52 +69,108 @@ h2 {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* Theme toggle */
|
||||
.theme-toggle {
|
||||
/* Top Navigation Bar */
|
||||
.top-nav {
|
||||
background-color: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
height: 50px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 70px; /* Added padding to account for fixed navbar */
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 20px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--bg-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 30px;
|
||||
padding: 5px 10px;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.theme-toggle-icon {
|
||||
font-size: 18px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/* Newer button style toggle */
|
||||
.theme-toggle-container {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 100;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
/* Theme toggle button in the nav bar - aligned with icons */
|
||||
.theme-toggle-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--bg-secondary);
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 30px;
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.theme-toggle-btn:hover {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
/* Ensure icons are properly sized */
|
||||
#themeIcon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Navigation Links - Tab Style */
|
||||
.nav-link {
|
||||
text-decoration: none;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.nav-link.active {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.nav-link.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Icon navigation links */
|
||||
.nav-icon {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/* Legacy theme toggle styles for backward compatibility */
|
||||
.theme-toggle-container {
|
||||
display: none; /* Hide the old toggle container */
|
||||
}
|
||||
|
||||
.theme-toggle {
|
||||
display: none; /* Hide the old toggle */
|
||||
}
|
||||
|
||||
.theme-toggle-text {
|
||||
@ -384,4 +440,35 @@ pre {
|
||||
background-color: rgba(0, 136, 0, 0.1);
|
||||
border-radius: 4px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding-top: 60px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.top-nav {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
right: 5px;
|
||||
height: 45px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
@ -70,32 +70,75 @@ h3 {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Theme toggle */
|
||||
.theme-toggle-container {
|
||||
/* Top Navigation Bar */
|
||||
.top-nav {
|
||||
background-color: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
z-index: 100;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
|
||||
height: 50px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
padding-top: 70px; /* Added padding to account for fixed navbar */
|
||||
}
|
||||
|
||||
.nav-left {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 20px;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
/* Theme toggle button in the nav bar - aligned with icons */
|
||||
.theme-toggle-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--bg-secondary);
|
||||
justify-content: center;
|
||||
background-color: transparent;
|
||||
color: var(--text-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 30px;
|
||||
padding: 8px 12px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.theme-toggle-btn:hover {
|
||||
background-color: var(--accent-color);
|
||||
color: white;
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
/* Ensure icons are properly sized */
|
||||
#themeIcon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Icon styling */
|
||||
.nav-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
/* Info box */
|
||||
@ -220,41 +263,49 @@ footer {
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
padding: 15px;
|
||||
padding-top: 60px;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.navigation {
|
||||
flex-direction: column;
|
||||
.top-nav {
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.theme-toggle-container {
|
||||
position: static;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 20px;
|
||||
.nav-left {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.nav-right {
|
||||
right: 5px;
|
||||
height: 45px;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 10px 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Navigation */
|
||||
.navigation {
|
||||
display: flex;
|
||||
margin-bottom: 25px;
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
/* Navigation Links - Tab Style */
|
||||
.nav-link {
|
||||
padding: 10px 20px;
|
||||
margin-right: 10px;
|
||||
text-decoration: none;
|
||||
color: var(--text-secondary);
|
||||
font-weight: 500;
|
||||
border-bottom: 2px solid transparent;
|
||||
font-weight: 600;
|
||||
transition: all 0.3s ease;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 25px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-link:hover {
|
||||
@ -263,7 +314,21 @@ footer {
|
||||
|
||||
.nav-link.active {
|
||||
color: var(--accent-color);
|
||||
border-bottom: 2px solid var(--accent-color);
|
||||
}
|
||||
|
||||
.nav-link.active::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: var(--accent-color);
|
||||
}
|
||||
|
||||
/* Icon navigation links */
|
||||
.nav-icon {
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
/* Tab Navigation (legacy) */
|
||||
@ -897,6 +962,8 @@ footer {
|
||||
|
||||
.copy-button:hover {
|
||||
background-color: var(--button-hover);
|
||||
}
|
||||
|
||||
/* Enhanced Event Details Styling */
|
||||
.event-detail-header {
|
||||
display: flex;
|
||||
@ -1043,7 +1110,6 @@ footer {
|
||||
background-color: var(--accent-color);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-button:active {
|
||||
background-color: var(--accent-color);
|
||||
|
Loading…
x
Reference in New Issue
Block a user