## Agent
这是一个仿 YouTube 的纯前端页面, 不需要与后端进行任何交互. 但需要尽量做到完整的仿照前端页面
### 项目需求
 - 页面顶栏从左到右分别为 菜单(按钮), YouTube 图标(图片), 搜索框(编辑控件, 居中), 搜索按钮(按钮, 附着在编辑框最右侧), 语音识别(按钮, 紧靠在编辑框右侧), 创建(按钮, 居于右侧, 文字左侧还附有 "+" 图标), 通知(按钮, 图标为铃铛样式), 用户头像(按钮, 图标为用户头像)
 - 搜索框要求可点击, 且点击时有渐变动画.
 - 搜索框要求可在本地数据库中搜索数据. 要求可以进行关键词搜索, 且搜索出的内容要求展示在基于搜索框展开的列表中, 关键词着重标记. 本地数据来源请你自己生成一份视频列表存储在 `/src/media.list` 中.
 - 左边侧边栏从上到下分别为 首页(按钮, 左侧图标为房子样式), Shorts(按钮), 订阅(板块, 字的右边附有 ">" 图标, 可点击), 我(板块, 内容从上到下分别为 历史记录, 播放列表, 稍后再看, 赞过的视频, 我的视频, 注意: 每个按钮的左侧均附有图标. 如不知道应该放什么图标, 则直接填写 `/img` 目录的内容, 虽然现在该目录不存在, 但稍后会往目录中放置图片),  探索(板块, 内容从上到下分别为 音乐, 电影, 直播, 如不知道应该放什么图标, 则直接填写 `/img` 目录的内容), 更多 YouTube 产品与功能(板块, 内容分别为 `YouTube Premium`, `YouTube 工作室`, `YouTube Music`, `YouTube Kids`, 如不知道应该放什么图标, 则直接填写 `/img` 目录的内容), 设置(按钮), 举报记录(按钮), 帮助(按钮), 发送反馈(按钮).
 - 侧边栏的订阅板块中要求展示订阅的 YouTuber 头像和 ID, 具体可以自行生成.
 - 侧边栏底部要求展示页面及版权信息. 例如: `<C> 2026 Google LLC`
 - 主页内容要求展示普通横屏视频和短视频(即 `Shorts`), 普通横屏视频的卡片在 `3840x2560` 的分辨率下一行展示的数量为 3 条, 可根据窗口大小进行自适应. Shorts 内容紧接在横屏视频卡片下方, 在同等分辨率下展示的数量为一行 5 条.
 - 每个横屏视频卡片中要求展示发布者头像, 视频标题, 发布者 ID, 播放次数, 上传时间. 在卡片的右下角要求附有 "···" 样式的可展开的菜单栏, 内容为 添加到待播列表, 保存到"稍后再看", 保存到播放列表, 下载, 分享, 不感兴趣, 不推荐此频道, 举报. 这些按钮的左侧均有图标.
 - Shorts 卡片展示的内容和横屏视频卡片展示的内容差不多, 但不展示发布者头像.
 - 主页请放置尽量多的视频卡片, 可以做到整体页面上下滑动.
 - 在主页第一行视频的上方还有一些小按钮, 可以跳转到相应的板块浏览对应板块的视频. 分别为 全部, 音乐, 游戏, 直播, 合辑, 动画, 手工艺品, 最近上传, 已观看, 发现新视频. 这些按钮均要求可以点击, 并作出相应视频过滤功能.

### 总要求
 - 项目中所有要求与后端进行交互的按钮均不用做具体功能, 只需要做出一个按钮即可.
 - 过滤视频, 搜索等只需要获取视频数据的功能均需要在自行生成的视频数据库中进行操作, 不需要与后端对接.
 - 将所有生成的视频等数据放置在 `/src` 目录中.
 - 可以随意使用 `TailWindCSS`, `Vue` 等前端框架, 但**绝对不是必须使用**, 你可以使用其他前端框架, 如 `React`, `Angular` 等.
 - 代码完成后请进行自我审查, 确保运行时能够达到所有想要的效果后再停止思考.