跳到主要内容
返回画廊
PAID · 已付费

Dashboard UI

SaaSdashboardpage_type: landing2026-04-25

Build a premium Conference Dashboard in React + TypeScript + Vite + Tailwind with a liquid glassmorphism aesthetic. Use lucide-react for icons. Use the Inter font family (weights 300, 400, 500, 600, 700) loaded from Google Fonts.

Background

Use two looping fullscreen background videos (autoplay, muted, loop, playsInline, object-fit: cover, fixed inset, z-index -1) — swap them 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)

--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 https://i.pravatar.cc/100?u=current_user.
  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 https://i.pravatar.cc/100?u=meeting_host, 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 (pravatar u=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. Contains 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> (use key to force reload).
  • View switcher toggles active button.
  • Mic/video buttons toggle muted/off class swapping icons via lucide-react.
  • 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.

Persistence

A Supabase database is available; no specific data persistence is required for this purely visual dashboard, but if needed wire it via @supabase/supabase-js using VITE_SUPABASE_URL / VITE_SUPABASE_ANON_KEY from .env.

Color Rules

Avoid purple/indigo. Palette: blue accent #3b82f6, neutral whites/blacks/greys, alert red #ff4545, orange tag #e05e36. All text contrast-safe in both themes.

回到全部 177 条