# 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)
```html
<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
```html
<button class="mt-4 w-full info-card-button text-sm font-medium" onclick="doAction()">
    Button Text
</button>
```

### Info Row
```html
<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

```bash
# 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
│ └─────────────────────────────────┘ │
└─────────────────────────────────────┘
```