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