dashboard-ui-glass

What this skill does

# Dashboard UI — Liquid Glass Conference Dashboard

Produce a premium **Conference Dashboard** with a **liquid glassmorphism** aesthetic. A complete, rendered reference implementation ships beside this skill at `example.html` — **start from it**. Copy `example.html`, then adjust copy and data; do not rewrite the CSS or invent a new visual language. The seed already encodes the exact tokens, glass treatment, card grid, voice-wave animation, and responsive behavior described below.

This is the authoritative build brief. Follow it exactly — the named colors, radii, video URLs, avatar sources, and animations are locked.

**Avatars (critical):** `example.html` already ships every avatar as an **inlined `data:image/svg+xml;base64,…` URI** — keep those exactly as they are. Do **not** replace them with `i.pravatar.cc`, `api.dicebear.com`, or any other remote avatar URL: external avatar hosts rate-limit or 403 inside the sandbox and render as broken images. When you copy the seed, the avatars come with it; only swap an avatar if the user supplies a real image, and prefer a data URI over a remote URL. Screen-share thumbnails may keep `https://picsum.photos/seed/screen1..4/300/200`.

## Stack

- Default output: a single self-contained HTML file (the `example.html` seed). It already includes everything inline.
- If the user explicitly asks for a React + TypeScript + Vite + Tailwind project, port the seed faithfully: same tokens, same markup structure, `lucide-react` for icons, Inter (weights 300–700) from Google Fonts. Do not change the design while porting.

## Background

Two looping fullscreen background videos (`autoplay muted loop playsInline`, `object-fit: cover`, `position: fixed; inset: 0; z-index: -1`) — swap based on dark/light theme. **No overlays.**

- Light mode video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260514_103318_2aa26b55-df1a-43a6-903d-941e718c9366.mp4`
- Dark mode video: `https://d8j0ntlcm91z4.cloudfront.net/user_38xzZboKViGWJOttwIXH07lWA1P/hf_20260514_102933_4e8f73b5-775a-4179-b2fb-472f59063dcd.mp4`

## CSS Variables (`:root`) — locked

```
--glass-bg: rgba(255, 255, 255, 0.55);
--glass-border: rgba(255, 255, 255, 0.6);
--glass-blur: 8px;
--text-main: #1a1a1a;
--text-muted: #6b7280;
--accent: #000000;
--card-radius: 40px;
--transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
```

In `.dark-mode`: `--glass-bg: rgba(0,0,0,0.45)`; `--glass-border: rgba(255,255,255,0.08)`; `--text-main:#fff`; `--text-muted:#b0b0b0`; `--accent:#fff`.

Body: Inter font, `height:100vh`, `padding:32px 40px`, `display:flex; flex-direction:column; overflow:hidden`, black fallback bg.

## Top Navigation (grid: `auto auto 1fr auto auto`, gap 16px, mb 40px)

1. **Profile button** — 48×48 circular avatar (reuse the inlined `seed=current_user` `data:` avatar from `example.html`; never fetch a remote avatar URL).
2. **Toggle container** — pill containing:
   - **Mode switch** (88×48, white pill, inner blue track 76×40 `#3b82f6`, white 32×32 handle on right; in dark mode handle slides left via `transform: translateX(-36px)`; small icon `☾`/`☀` slides via `translateX(42px)`).
   - **Settings nav-btn** — pill, 10px 24px, `rgba(0,0,0,0.04)` bg with blur, white text.
3. **Meeting alert** (justify-self center) — white pill, `padding 6px 6px 6px 16px`, gap 12, shadow `0 4px 20px rgba(0,0,0,0.08)`. Contains: 32px host avatar (reuse the inlined `seed=meeting_host` `data:` avatar from `example.html`; never fetch a remote avatar URL), label "Meeting is about to start", grey time-tag pill "-5:23" (`#f0f0f0`, 4px 10px), and a 32×32 close button with an SVG progress ring (gray track + black arc, `stroke-dasharray=88 stroke-dashoffset=25 rotate(-90)`) and a centered Lucide `X` (12px). Hidden on mobile.
4. **View switcher** — pill, `rgba(0,0,0,0.04)` bg, 4px padding, two buttons "Dashboard" and "Rooms"; active = white bg, black text, shadow `0 4px 12px rgba(0,0,0,0.1)`. Default active = "Rooms".
5. **Search button** — 48×48 circular, Lucide `Search`.

## Dashboard Grid (4 cols × 2 rows, 24px gap, max-width 1400px, fills available height)

Card base: `padding:28px 20px`, flex column, `border-radius:40px`, hover `translateY(-3px) scale(1.01)`.

### Card 1 — Empty / Create Room (glass)
- Translucent dark glass `rgba(0,0,0,0.18)` (light), `rgba(255,255,255,0.08)` (dark).
- Centered Lucide `Plus` (32px) + label "Create a room", white text.

### Card 2 — Subscription Growth Experiments (solid white)
- Title: "Subscription Growth Experiments" (1.35rem, weight 400, letter-spacing -0.03em).
- Subtitle: "Sprint Retrospective".
- Header icon: Lucide `Zap` (16px, opacity 0.5).
- Footer: 3 overlapping 32px avatars (`seed=1,2,3`, `margin-left:-12px`) + count badge "9" (38×38 circle, `rgba(0,0,0,0.08)`).

### Card 3 — Weekly Insights (solid white)
- Title only: "Weekly Insights".
- **Bar chart** (height 60px, `gap:2px`, `align-items:flex-end`):
  - First **24** bars are blue `#3b82f6` with heights: `35,45,30,55,40,65,50,75,60,85,70,80,65,55,45,70,60,75,55,65,50,75,60,55`.
  - Next **36** bars grey `#e5e7eb` with heights: `45,70,60,75,55,65,50,75,60,85,70,55,45,70,60,75,55,65,50,75,60,55,45,70,60,75,55,65,50,75,60,55,45,70,60,75`.
- **Chart markers row** (`justify-content:space-between; padding:0 20px; margin-bottom:24px`): single 18px avatar `u=m1`, then group of two `u=m2`(margin-right -8) + `u=m3`, then group `u=m4`(-8) + `u=m5`. All have 1.5px white border.
- Footer: two overlapping avatars `u=large1`, `u=large2`, plus 54×54 white play button (`rgba(245,245,245,0.85)`) with Lucide `Play` (20px, fill black).

### Card 4 — Product Strategy 2023 (glass, dark translucent)
- Title "Product Strategy 2023" + subtitle "No upcoming meetings".
- Header icon: Lucide `MoreHorizontal` (16px, opacity 0.5).
- Footer: single 32px avatar `u=6` + count badge "32".

### Card 5 — User Onboarding Team (solid white)
- Title "User Onboarding Team" + subtitle "Sprint Planning".
- Header icon: Lucide `BarChart2`.
- Footer: 3 overlap avatars `u=7,8,9` + badge "3".

### Card 6 — User & Market Research (glass)
- Title "User & Market Research" + subtitle "No upcoming meetings".
- Icon: `MoreHorizontal`. Footer: avatar `u=10` + badge "6".

### Card 7 — Core Product Team (solid white)
- Title and subtitle both "Core Product Team".
- Icon: Lucide `Video`. Footer: 2 overlap avatars `u=11,12` + badge "2".

### Card 8 — Screen Share (solid card-alt; gradient `linear-gradient(to bottom,#f4f4f4 0%, #ffffff 50%, #ffffff 100%)`)
- Header row of two pill chips (justify start, gap 8): "Screen Share" (blue text `#3b82f6`) and "0:30" (black text). Both white pills, `padding:6px 14px; font-size:0.75rem; box-shadow:0 2px 8px rgba(0,0,0,0.06)`.
- Horizontal scroll row (`overflow-x:auto; gap:12px; margin: 20px -20px 0; padding:0 20px 16px; hide scrollbar; cursor:grab; drag-to-scroll`):
  - 4 thumbnails 160×100, `border-radius:16px`, backgrounds `https://picsum.photos/seed/screen1..4/300/200`.
  - On thumbnail #2: bottom-right floating tag with 24px avatar `u=alice_av` + orange `#e05e36` pill labeled "Alice" (white text 0.65rem, 2px 8px, radius 100).
- Footer: 2 avatars `u=13,14` + badge "8" (background `#F3F3F3`).

## Indicators (under grid)

Three 12×12 dots, white, gap 16, `margin: 24px 0 120px`. First dot active (opacity 1); others opacity 0.3.

## Bottom Bar (fixed, centered, glass pill)

`bottom:32px; left:50%; translateX(-50%); padding:10px 16px; border-radius:100px`.
Active-participants row:
- **Active speaker** 44×44 circle `u=speaker` with **voice indicator** badge (top-right -2/-2): white 18×18 circle with shadow containing **3 wave bars** (2px wide, grey `#4b5563`, animated via `@keyframes voice-wave` between 4px and 10px height, 1s ease-in-out infinite, delays 0/0.2s/0.4s).
- 40×40 participant `u=p1` (opacity 0.7).
- 40×40 participant `u=p2` with another voice indicator.
- 40×40 participant `u=p3`.
- "+17" 40×40 round chip `rgba(255,255,255,0.25)`, white bold.

## Components button (fixed bo