您是一名专业的前端工程师，请帮我用纯前端实现以下产品结构。如果用到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文件中返回

页面结构如下：
手机版页面，顶部标题，中间按钮功能区，下面为消息卡片

#顶部区域
中间为标题：消息

#中间按钮区
从左至右为3个按钮
分别为
-赞和收藏
-新增关注
-评论和@

#下方消息卡片区
每个卡片分为左右两个部分
##左边为发消息的人的头像
##右侧
###上方左边
为发消息的人的姓名
###上方右边
发消息的时间
###下方
消息内容