Skip to content
Fujitsu Zippin Docs

Components

Card

Section titled “Card”

The base container for all data. Hover to see the elevation effect.

SSH Main
Online
Zabbix Server
Datacenter — Beelink SER8
SSH Proxy
Offline
Zabbix Proxy
On-site Crolles — Rocky Linux

border-radius: var(--radius-lg) · box-shadow: var(--shadow) · hover: translateY(-2px) + var(--shadow-lg) · animation: glassIn 0.35s

Card (Stat / KPI)

Section titled “Card (Stat / KPI)”
12
Entries today
3
Denied
142ms
Avg latency

Badge (Status)

Section titled “Badge (Status)”

Always used for online/offline/error/warning/loading states. The dot pulses.

Online Offline Warning Checking

Usage: <span class="badge badge-green"><span class="badge-dot"></span> Online</span>

Source Badge (Monitoring)

Section titled “Source Badge (Monitoring)”
unifitugazabbixzippinjesserver

Callout

Section titled “Callout”

Alert / info boxes. 4 variants :

✓
No active alerts — all systems operational
ℹ
Info: next maintenance window scheduled for Sunday 02:00 UTC
⚠
Warning: RPi-002 tunnel latency above 500ms
✗
Critical: SSH Main tunnel offline — check cloudflared service

Toast Notifications

Section titled “Toast Notifications”

Toasts are created via the global showToast(message, type, duration) function defined in layout.js. They stack in the #toast-container (bottom-right).

// Basic usage:
showToast('Settings saved', 'success');
showToast('Connection lost', 'error', 5000);


// Click-to-navigate (used by AI response notifications):
showToast('New AI response ready', 'info', 4000, { href: '/pages/ai.html' });

showToast() now supports an optional href parameter (4th argument options object). When provided, clicking the toast navigates the user to the specified URL. This is used by AI response notifications to take the user directly to the AI chat page.

Table

Section titled “Table”

Data tables use .ref-table inside a .card. Hover rows to see highlight.

ServiceURLStatusLatency
SSH Mainssh-main.fjzippin.com Online45ms
Zabbixmonitoring.fjzippin.com Online320ms
RPi-002 (SAS)door2.fjzippin.com Offline—

Buttons

Section titled “Buttons”

border-radius: 6px · 0.78rem font · 500 weight · transition: all 0.2s ease · mobile: min-height 44px

Section Title

Section titled “Section Title”

Blue bar on the left via ::before. Used to group content.

Live Status
Store Occupancy
Active Alerts 3

Inline Row

Section titled “Inline Row”

Service link with icon, title, description, and action button.

Z
Zabbix
Server + Proxy architecture
Z
Zippin
Back Office — dashboard.getzippin.com

Select (Dropdown)

Section titled “Select (Dropdown)”
Section titled “Sidebar Icons”

Each page has a colored icon. Material Symbols Outlined (filled).

dashboardDashboard
monitoringOperations
hubMonitoring
apiAPI Health
dnsInfrastructure
buildTroubleshooting
errorError Codes

Quick Access (Sidebar Dots)

Section titled “Quick Access (Sidebar Dots)”

External service links with live status dots in the sidebar.

Online

Offline

Checking