lfg2025/archy
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 33 Wiki Activity

Enhance UI styling and components for Archipelago

Browse Source 
- Updated the glass-card and glass-button styles for improved aesthetics and functionality, including gradient borders and hover effects.
- Introduced new info-card and info-card-button components with enhanced styling and interactive features.
- Refactored existing HTML structure to utilize new card components, improving consistency across the UI.
- Enhanced button interactions for better user experience during settings and logs access.
This commit is contained in:
Dorian
2026-02-03 21:49:30 +00:00
parent 337ebee510
commit 47a56e2212
7 changed files with 859 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
docker/lnd-ui/Dockerfile Normal file
View File

@@ -0,0 +1,19 @@
FROM docker.io/library/nginx:alpine
# Copy the HTML file
COPY index.html /usr/share/nginx/html/
# Create directories for assets
RUN mkdir -p /usr/share/nginx/html/assets/img/app-icons && \
mkdir -p /usr/share/nginx/html/assets/img
# Copy assets
COPY lnd.svg /usr/share/nginx/html/assets/img/app-icons/
COPY bg-web5.jpg /usr/share/nginx/html/assets/img/
# Copy nginx config
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

BIN
docker/lnd-ui/bg-web5.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 570 KiB

138
docker/lnd-ui/index.html
View File

@@ -49,17 +49,43 @@
pointer-events: none;
}
/* Glass card - Archipelago standard with gradient border */
.glass-card {
background-color: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
position: relative;
background: rgba(0, 0, 0, 0.60);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
border-radius: 1rem;
overflow-x: hidden;
overflow-y: visible;
border: none;
}
.glass-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), transparent);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
z-index: 1;
}
.glass-card > * {
position: relative;
z-index: 2;
}
/* Glass button - Archipelago standard (secondary actions) */
.glass-button {
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(18px);
@@ -71,6 +97,86 @@
.glass-button:hover {
color: white;
background-color: rgba(0, 0, 0, 0.7);
}
/* Info card - Archipelago standard (display only, no hover) */
.info-card {
position: relative;
background: rgba(0, 0, 0, 0.60);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
border-radius: 16px;
padding: 12px;
border: none;
}
.info-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), transparent);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
/* Interactive button - Same as info-card but with hover effects */
.info-card-button {
position: relative;
background: rgba(0, 0, 0, 0.60);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.22);
border-radius: 16px;
padding: 12px;
transition: all 0.3s ease;
border: none;
cursor: pointer;
color: rgba(255, 255, 255, 0.9);
}
.info-card-button::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
padding: 2px;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), transparent);
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
transition: all 0.3s ease;
}
.info-card-button:hover {
transform: translateY(-2px);
background: rgba(0, 0, 0, 0.35);
box-shadow:
0 12px 32px rgba(0, 0, 0, 0.6),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
color: rgba(255, 255, 255, 1);
}
.info-card-button:hover::before {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
}
.info-card-button:active {
transform: translateY(1px);
}
.container {
@@ -154,7 +260,7 @@
<div class="glass-card p-6 mb-6">
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="flex items-center justify-between p-4 bg-white/5 rounded-lg">
<div class="info-card flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="relative">
<div class="w-3 h-3 rounded-full bg-green-400"></div>
@@ -167,7 +273,7 @@
</div>
</div>
<div class="flex items-center justify-between p-4 bg-white/5 rounded-lg">
<div class="info-card flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="relative">
<span class="text-2xl text-orange-500 font-bold">⚡</span>
@@ -179,7 +285,7 @@
</div>
</div>
<div class="flex items-center justify-between p-4 bg-white/5 rounded-lg">
<div class="info-card flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="relative">
<div class="w-3 h-3 rounded-full bg-green-400"></div>
@@ -192,13 +298,13 @@
</div>
<button
onclick="openSettings()"
class="px-3 py-1.5 glass-button rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
class="px-3 py-1.5 glass-button rounded text-xs font-medium"
>
Settings
</button>
</div>
<div class="flex items-center justify-between p-4 bg-white/5 rounded-lg">
<div class="info-card flex items-center justify-between">
<div class="flex items-center gap-3">
<div class="relative">
<div class="w-3 h-3 rounded-full bg-green-400"></div>
@@ -211,7 +317,7 @@
</div>
<button
onclick="openLogs()"
class="px-3 py-1.5 glass-button rounded text-xs font-medium text-white/90 hover:text-white transition-colors"
class="px-3 py-1.5 glass-button rounded text-xs font-medium"
>
Logs
</button>
@@ -265,7 +371,7 @@
</div>
</div>
<button class="mt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors" onclick="openSettings()">
<button class="mt-4 w-full info-card-button text-sm font-medium" onclick="openSettings()">
Node Settings
</button>
</div>
@@ -315,7 +421,7 @@
</div>
</div>
<button class="mt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors" onclick="copyRESTInfo()">
<button class="mt-4 w-full info-card-button text-sm font-medium" onclick="copyRESTInfo()">
Copy REST Info
</button>
</div>
@@ -365,7 +471,7 @@
</div>
</div>
<button class="mt-4 w-full px-4 py-2 glass-button rounded-lg text-sm font-medium text-white/90 hover:text-white transition-colors" onclick="openLogs()">
<button class="mt-4 w-full info-card-button text-sm font-medium" onclick="openLogs()">
View Logs
</button>
</div>
@@ -376,7 +482,7 @@
<div class="glass-card p-6 max-w-2xl w-full max-h-[80vh] overflow-y-auto">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold text-white">Node Settings</h2>
<button onclick="closeSettings()" class="w-10 h-10 rounded-lg bg-white/10 border border-white/18 text-white text-xl flex items-center justify-center hover:bg-white/20 transition-colors">×</button>
<button onclick="closeSettings()" class="glass-button px-3 py-2 rounded-lg text-xl font-medium">×</button>
</div>
<div class="space-y-3">
<div class="p-3 bg-white/5 rounded-lg">
@@ -403,7 +509,7 @@
<div class="glass-card p-6 max-w-4xl w-full max-h-[80vh] overflow-y-auto">
<div class="flex justify-between items-center mb-4">
<h2 class="text-2xl font-bold text-white">Node Logs</h2>
<button onclick="closeLogs()" class="w-10 h-10 rounded-lg bg-white/10 border border-white/18 text-white text-xl flex items-center justify-center hover:bg-white/20 transition-colors">×</button>
<button onclick="closeLogs()" class="glass-button px-3 py-2 rounded-lg text-xl font-medium">×</button>
</div>
<div class="bg-black/40 rounded-lg p-4 font-mono text-xs text-white/80 whitespace-pre-wrap break-all" id="logsContent">
Loading logs...

21
docker/lnd-ui/lnd.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 179 KiB

11
docker/lnd-ui/nginx.conf Normal file
View File

@@ -0,0 +1,11 @@
server {
listen 8081;
server_name _;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}