Glass Morphism Dashboard

Here is the full breakdown of what you have now — the fixed, smooth, monochrome glass dashboard.

Core concept

It's a single-page Inventory Management System built as pure HTML/CSS/JS, no frameworks. Everything is transparent glass with a needle-thin white glow, no colors, sitting on a fixed dark bokeh background. The goal was 60fps performance with proper layout alignment.

Design system

• Glass: rgba(255,255,255,0.05) background, 12px blur, 1px border at 14% white, 22px radius for cards, 14px for buttons
• Glow: default 0 0 6px rgba(255,255,255,0.22), hover/active 0 0 12px rgba(255,255,255,0.42). It looks like a hairline edge, not a neon tube
• Typography: Inter, 300-500 weight, white at 88% opacity. Labels are uppercase 11px with wide tracking
• No color policy: status pills, charts, icons are all white/gray transparency. Even the donut uses grayscale conic gradients

Layout structure

1. Sidebar (240px)

Fixed left, dark glass. Logo top, then 8 nav buttons with Lucide-style SVG icons. Active state shows a 2px white bar on the left edge with glow, plus slight translateX. Collapses to 72px icons on mobile.

2. Topbar

Glass bar with dynamic page title, centered search input with icon, notification bell with dot, and avatar circle. Search has focus glow.

3. Content area

Independent scroll, fade-in transitions (160ms opacity + translateY). All pages swap via data-page attributes, no reload.

All 8 pages described

1. Dashboard — the fixed arrangement

This was the broken part. Now it's a proper 2-section layout.

KPI Row (4 columns)

Each card is 118px tall, equal width:

• Total Stock: 12,483 — +3.2% this week, with upward sparkline
• Low Stock: 37 — 5 critical, flat sparkline
• Pending Orders: 128 — 12 today
• Suppliers: 24 — 98% on-time

All have label on top, large value, footer with delta left and mini SVG sparkline right.

Main Grid (2fr / 1fr)

Left card: Recent Inventory

• Header with "Live" pill
• Table: Product, SKU, Location, Qty, Status
• 6 rows, hover highlights with rgba(255,255,255,0.04), sticky header
• Max height keeps it aligned with right card

Right card: Stock Distribution

• Centered 150px donut made with CSS conic-gradient (38% electronics, 24% peripherals, 19% audio, 19% storage)
• Center shows "64%"
• Legend in 2 columns below, each dot at different opacity to match the chart
• Card uses flex column to stay same height as table

2. Products

Toolbar with Add Product, Import, Filter buttons. 3-column grid of product cards. Each card: image placeholder with subtle radial glow, SKU, name, price right-aligned, stock pill. Click opens a glass modal quick-view.

3. Inventory

Filter chips on top: All, Low Stock, Out of Stock, Overstock. Full-width table with 15 rows. Columns: SKU, Product, Location, Qty, Reorder Level, Status. Qty has live +/- steppers that update instantly in DOM without reflow. Status is text only.

4. Orders

Two-column layout. Left: orders table with Order ID, Customer, Date, Items, Total, Status. Right: sticky preview panel. Click a row and the preview fills with customer info, item list, and total. Active row gets glass background.

5. Suppliers

3-column grid of supplier cards. Each shows logo circle with initials, name, contact email, then two stats: On-time % and Active Orders. Bottom border separates header from stats.

6. Analytics

Top: two canvas charts drawn in white strokes only, no libraries.

• Left: monthly stock movement line chart
• Right: category breakdown bar chart
• Bottom: 3 metric cards — Turnover Rate 4.2x, Carrying Cost $12.4k, Stock Accuracy 99.1%

7. Reports

Report builder card with date range inputs, checkboxes for report types (Inventory Summary, Low Stock, Order History, Supplier Performance), and Generate button. Below: recent reports list with name, meta, and download icon button.

8. Settings

2-column grid of settings cards: Profile (name, email inputs), Preferences (language, timezone selects), Notifications (three toggles), Appearance (compact mode, animations, high contrast toggles). All toggles are glass switches with white knob and glow when on.

Interactions and performance

• Page switch: instant fade, no layout shift
• Hover: translateY(-1px) plus glow intensify, GPU-accelerated
• Scroll: content area only, sidebar and topbar stay fixed
• Smoothness tricks: will-change: transform, contain: paint on cards, reduced blur, no box-shadow spread, transforms instead of top/left changes

Responsive behavior

1200px: full 4 KPI, 2-column dashboard

• 900-1200px: dashboard stacks, KPIs become 2×2
• <640px: KPIs single column, sidebar hides labels, product grid becomes 1 column, form rows stack