SuperAPI AI 工具集

dashboard-ui-glass

设计与创作

查看项目

更新于 10-16 06:51

技能介绍

用途:生成高级液态玻璃拟态(liquid glassmorphism)的会议/会议仪表盘。随技能附带完整参考实现 example.html,应以其为起点:复制后调整文案与数据,不要重写 CSS 或另创视觉语言。

主要能力:双全屏循环背景视频(按主题切换,autoplay muted loop playsInline,object-fit: cover,position: fixed,z-index: -1,无遮罩);4 列 × 2 行卡片网格(含创建房间、订阅增长、每周洞察柱状图、产品策略、用户引导、市场研究、核心产品、屏幕共享等卡片);顶栏含头像、明暗切换、设置、会议提醒、视图切换与搜索;底部玻璃药丸栏含活跃发言人/参与者与语音波动画;左下组件按钮、右下浮动视频/麦克风开关;含噪声滤镜、卡片悬停、主题切换手柄、响应式断点(≤1200px 两列、≤768px 单列)等。

使用方式:默认输出单个自包含 HTML 文件(example.html 种子,全部内联)。若用户明确要求 React + TypeScript + Vite + Tailwind 项目,可忠实移植:保持相同令牌与标记结构,图标用 lucide-react,Inter 字重 300–700 来自 Google Fonts,移植时不改变设计。

限制与注意:头像必须保留 example.html 内联的 data:image/svg+xml;base64 URI,不得替换为 i.pravatar.cc、api.dicebear.com 等远程头像,外部头像在沙盒中会限流或 403 显示为破图;仅当用户提供真实图片时替换,且优先 data URI。屏幕共享缩略图可保留 picsum.photos。颜色、圆角、视频 URL、头像来源与动画均锁定。严格避免紫色/靛蓝,蓝色 #3b82f6 为锁定强调色。未提供内容不得编造。