stuff/1120-messages
6
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

styliung

Browse Source
This commit is contained in:
n 2025-04-08 14:42:21 +01:00
parent c52891136c
commit 78a0a8bd18
6 changed files with 273 additions and 130 deletions

27
client/help.html

@ -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">

31
client/index.html

@ -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) -->

29
client/profile.html

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

31
client/receive.html

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

147
client/src/styles.css

@ -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;
}
}

138
client/styles.css

@ -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);