dashboard-ui-glass

# 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 bottom-left, 32px from edges) 44×44 rounded-rect (radius 14, `rgba(0,0,0,0.04)` blur), 2×2 grid of 4 small avatars `u=c1..c4`. ## Floating Controls (fixed bottom-right, 32px) Pill `rgba(0,0,0,0.04)`, padding 10px 14px, gap 12. Two 44×44 round buttons: - Video toggle: Lucide `Video` ↔ `VideoOff`. When off, bg `#ff4545`, white icon. - Mic toggle: Lucide `Mic` ↔ `MicOff`. When muted, bg `#ff4545`. Hover: `scale(1.08)`. ## Glass Utility ``` .glass { background: var(--glass-bg); backdrop-filter: blur(8px) saturate(1.8); border-radius: 40px; box-shadow: 0 4px 24px rgba(0,0,0,0.06), 0 1px 4px rgba(0,0,0,0.04), inset 0 1px 0 rgba(255,255,255,0.5); } .glass::after { content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; filter:url(#noise-filter); opacity:0.06; mix-blend-mode:overlay; } ``` Inline an SVG `<filter id="noise-filter">` using `feTurbulence baseFrequency=0.65 numOctaves=3 stitchTiles=stitch` + `feComposite operator=in in2=SourceGraphic` for the grain texture. ## Solid Card `background:#fff; box-shadow:0 4px 20px rgba(0,0,0,0.03), 0 1px 3px rgba(0,0,0,0.01)`. In dark: `rgba(26,26,26,0.98)` with white text. ## Animations / Transitions - All interactive elements: `transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1)`. - Card hover: `translateY(-3px) scale(1.01)` + larger shadow. - Theme-switch handle: `transform 0.4s cubic-bezier(0.4, 0, 0.2, 1)`. - Voice waves: `voice-wave` keyframes (height 4px → 10px → 4px), 3 staggered bars. - Pulse-red keyframe available for emergencies (red ring expand-fade). ## State / Interactions - `isDark` toggles `body.dark-mode` and swaps the background `<video>` (force reload on swap). - View switcher toggles active button. - Mic/video buttons toggle `muted`/`off` class, swapping icons. - Screen-share strip supports mouse drag-to-scroll (mousedown/move/up/leave). ## Responsive - ≤1200px: grid → 2 columns, rows 280px, body becomes scrollable. - ≤768px: grid → 1 column, padding 16px, hide meeting alert, view-switcher full-width on second row, bottom bar near full width, floating controls + components button move up to bottom 80px. ## Color Rules — hard Avoid purple/indigo entirely. Palette: blue accent `#3b82f6`, neutral whites/blacks/greys, alert red `#ff4545`, orange tag `#e05e36`. All text contrast-safe in both themes. **Do not substitute a different accent hue (no teal/green/indigo); the blue `#3b82f6` is locked.**