您是一名专业的前端工程师，请帮我用纯前端实现以下产品结构。如果用到icon图标，用国内的CDN引用对应资源。整体布局以手机端为主，用flex布局。如果有更好的细节和美观优化思路，可以直接放心实现。请写在一个HTML文件中返回 页面结构如下： #整体布局 手机版页面，顶部搜索栏，中间是鸟类介绍界面，底部固定的Tab按钮区域 #顶部区域 ##搜索条 整体是椭圆角，左侧可以下拉选择城市 右侧为输入区域，占位提示：一拍即识，守护羽翼精灵 ##精选照片推荐区域 整体是椭圆角，使用用户发布的鸟类照片，左下角显示图片作者 实现左右滑动至少5个轮换 #内容区域 ##按钮组（金刚区） 一行五列的按钮组 每个按钮上面是图标，下面是名称，从左到右分别是 -查鸟 -鸟音 -附近 -推荐 -精选 ##公告区域 左边为公告标识，右侧显示公告标题 ##发帖推荐区域 ###推荐tag区域 由一排横排小卡片显示 每个小卡片使用椭圆边框，用灰色填充，从左到右为 -世界地球日 -霞光鸟影 -慢门拍摄 ##帖子列表区域 多条帖子卡片构成。 每个帖子卡片中，分为上中下结构 ###上 左侧为发帖人头像，头像右边上下分别为： -发帖人昵称 -发帖人身份 右侧为关注图标，内容： -+关注（绿色） -已关注（灰色） ###中 帖子中的鸟类图片 ###下 一排三列的按钮组 左侧为小图标，右侧为名称，从左到右分别是： -点赞 -评论 -分享 #底部区域 一排五列的tag 上面是图标，下面是名称，从左到右分别是： -首页 -发帖 -识别（该图标放大，使用绿色圆形为背景） -消息 -个人 个人主页页面设计 您是一名专业的前端工程师，请帮我用纯前端实现以下产品结构。如果用到icon图标，用国内的CDN引用对应资源。整体布局以手机端为主，用flex布局。如果有更好的细节和美观优化思路，可以直接放心实现。请写在一个HTML文件中返回 页面结构如下： #整体布局 手机版页面，顶部自我介绍栏，中间是个人日志，底部固定的Tab按钮区域 #上半部分区域 ##个人背景 中间左侧为头像，具有白色边框，头像旁边从上至下 -昵称 -身份 下方一行小字是个人签名 ##粉丝数量 一个白色椭圆角小卡片，内容分一排三列 上面是绿色的数据，下面黑色小字是名称，从左至右是： -关注 -粉丝 -日志数量 #中间 ##上面一排五列小标题，从左至右是： -日志 -点亮物种 -相册 -足迹 -收藏 ##下面为日志卡片 ###上 帖子中的鸟类图片 ###下 一排三列的按钮组 左侧为小图标，右侧为名称，从左到右分别是： -点赞 -评论 -分享 鸟类分类主页页面设计 您是一名专业的前端工程师，请帮我用纯前端实现以下产品结构。如果用到icon图标，用国内的CDN引用对应资源。整体布局以手机端为主，用flex布局。如果有更好的细节和美观优化思路，可以直接放心实现。请写在一个HTML文件中返回 页面结构如下： #整体布局 手机版页面，顶部返回键，中间是鸟类卡片，底部固定的Tab按钮区域 #顶部区域 使用绿色，左侧为返回键，中间为标题“鸟类图鉴” #展示区域 使用生物学科中的纲目科属种来分鸟的类型 一个白色椭圆角小卡片，内容分为一列 每个卡片分为上下两个部分 ##上面为该所属目的鸟类照片 ##下面是该所属目鸟的名字 观鸟路线推荐页面设计 您是一名专业的前端工程师，请帮我用纯前端实现以下产品结构。如果用到icon图标，用国内的CDN引用对应资源。整体布局以手机端为主，用flex布局。如果有更好的细节和美观优化思路，可以直接放心实现。请写在一个HTML文件中返回 页面结构如下： #整体布局 手机版页面，顶部返回键，中间是路线推荐 #顶部区域 使用绿色，左侧为返回键，中间为标题“路线推荐” #路线推荐 使用长方形椭圆边角卡片，可以实现左右滑动卡片的效果 ##顶部区域 该路线标题 ##中间区域 路线展示，并使用气泡样式，在路线的沿途展示该路线中所能观赏到的鸟类 #底部区域 分为一排两列，从左至右为： -路线选择 -路线上传 AI咨询页面设计 您是一名专业的前端工程师，请帮我用纯前端实现以下产品结构。如果用到icon图标，用国内的CDN引用对应资源。整体布局以手机端为主，用flex布局。如果有更好的细节和美观优化思路，可以直接放心实现。请写在一个HTML文件中返回 页面结构如下： #整体布局 手机版页面，顶部介绍栏，中间为角色卡片 #顶部区域 绿色作为底色，中间文字标题为“AI辨鸟咨询” #中间区域 卡片布局 ##卡片布局 分为上中下结构 ###上 中间为圆形专家头像，头像地址为：/assets/avatars/people.jpeg ###中间 人物信息 第一行从左到右信息为专家姓名：xxx 专家身份：xxx 第二行信息为研究方向：xxxx ###下 一个蓝色按钮，白字写咨询 附近推荐鸟类页面设计 您是一名专业的前端工程师，请帮我用纯前端实现以下产品结构。如果用到icon图标，用国内的CDN引用对应资源。整体布局以手机端为主，用flex布局。如果有更好的细节和美观优化思路，可以直接放心实现。请写在一个HTML文件中返回 页面结构如下： #整体布局 手机版页面，顶部介绍栏，中间是搜索栏，下面是附近鸟类卡片 #顶部区域 使用绿色，左侧为返回上级页面按钮，中间为标题“附近鸟类” #搜索区域 从左至右分为三个部分 ##左边灰色椭圆角按钮，可以下拉选择地区 ##中间搜索栏输入区域，占位提示：一拍即识，守护羽翼精灵 ##右侧为“导入数据”按钮 #卡片区域 卡片分为上下两个部分 ##上面分为左右两个部分 ###左边为该鸟类头像，使用椭圆形 ###右边为该鸟类信息，包括他的名称，所属纲目科目著类，稀有星级， ##下面为该鸟的一句话简介，以及距离的数据 消息页面设计 您是一名专业的前端工程师，请帮我用纯前端实现以下产品结构。如果用到icon图标，用国内的CDN引用对应资源。整体布局以手机端为主，用flex布局。如果有更好的细节和美观优化思路，可以直接放心实现。请写在一个HTML文件中返回 页面结构如下： 手机版页面，顶部标题，中间按钮功能区，下面为消息卡片 #顶部区域