Quick Reference: Archipelago App UI Classes
Core CSS Classes
Containers
| Class |
Use Case |
Features |
.glass-card |
Main sections, modals, headers |
Gradient border, strong blur (24px), inset highlights |
.info-card |
Status badges, metric displays |
Gradient border, no hover effects |
bg-white/5 |
Simple info rows |
Plain dark background, no borders |
Buttons
| Class |
Use Case |
Features |
.info-card-button |
Primary actions (Copy Info, View Logs) |
Looks like .info-card, lifts and brightens on hover |
.glass-button |
Secondary actions (Settings, Close ×) |
Simple glass effect, subtle hover |
HTML Snippets
Info Card (Display Only)
<div class="info-card flex items-center gap-3">
<svg class="w-5 h-5 text-white/60"><!-- icon --></svg>
<div>
<p class="text-xs text-white/60">Label</p>
<p class="text-sm font-medium text-white">Value</p>
</div>
</div>
Action Button
<button class="mt-4 w-full info-card-button text-sm font-medium" onclick="doAction()">
Button Text
</button>
Info Row
<div class="flex items-center justify-between p-3 bg-white/5 rounded-lg">
<div class="flex items-center gap-3">
<svg class="w-5 h-5 text-white/60"><!-- icon --></svg>
<span class="text-white/80 text-sm">Label</span>
</div>
<span class="text-white/60 text-sm">Value</span>
</div>
Service UI Ports
| Service |
Port |
Status |
| Bitcoin Knots |
8334 |
✅ Live |
| LND |
8081 |
✅ Live |
| Core Lightning |
8082 |
🚧 Planned |
| Mempool |
8083 |
🚧 Planned |
Quick Deploy
# From docker/{service}-ui/ directory
sshpass -p "archipelago" rsync -avz --delete ./ archipelago@192.168.1.228:/tmp/{service}-ui-build/
sshpass -p "archipelago" ssh archipelago@192.168.1.228 \
"cd /tmp/{service}-ui-build && \
sudo podman build -t {service}-ui:latest . && \
sudo podman stop {service}-ui 2>/dev/null || true && \
sudo podman rm {service}-ui 2>/dev/null || true && \
sudo podman run -d --name {service}-ui --restart unless-stopped \
--network=host --label 'com.archipelago.parent-app={service-id}' \
{service}-ui:latest"
Visual Hierarchy
┌─────────────────────────────────────┐
│ .glass-card (Main Container) │ ← Strongest visual weight
│ ┌─────────────────────────────────┐ │
│ │ .info-card (Status Badge) │ │ ← Medium weight, no hover
│ └─────────────────────────────────┘ │
│ ┌─────────────────────────────────┐ │
│ │ bg-white/5 (Info Row) │ │ ← Lightest weight
│ └─────────────────────────────────┘ │
│ ┌─────────────────────────────────┐ │
│ │ .info-card-button (Action) │ │ ← Interactive, lifts on hover
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘
47a56e2212