47a56e2212
- 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.
99 lines
3.5 KiB
Markdown
99 lines
3.5 KiB
Markdown
# 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
|
||
│ └─────────────────────────────────┘ │
|
||
└─────────────────────────────────────┘
|
||
```
|