请生成一个“黄果漫剧”品牌静态官网单页。使用纯 HTML5 + CSS3,输出单文件 index.html,CSS 内联,不要任何 JavaScript。整体采用暗色系:页面背景深灰黑,卡片深灰蓝或深灰棕,文字主色浅白,辅助文字灰白,品牌强调色黄果橙和暖黄色。页面宽度最大 1400px 居中,卡片圆角、轻阴影、留白充足。响应式:桌面端剧集卡片 5 列,平板 3 列,手机 2 列,竖版封面比例不变。页面中不要出现二维码,不要出现“扫码下载”“扫码观看”等字样和区域。所有剧集封面统一使用 3:4 竖版占位图,图片允许重复使用;横图只能用于顶部品牌横幅、下载区氛围背景和页脚品牌图,不能用来展示具体剧集封面。 一、顶部导航 1. 左侧品牌 Logo 文案“黄果漫剧”,加一个小方块 Logo 标记。 2. 导航项:首页、热门短剧、男频爽文、女频甜宠、双男主、AI魔改、排行榜、常见问题、下载APP。 3. 右侧放搜索框,占位文字“搜索短剧、漫剧、AI魔改”,不要求真实搜索功能。 4. 再右侧放“免费在线看”文字按钮和“下载APP”主按钮,主按钮使用品牌橙渐变。 5. 导航栏使用 position:sticky 吸顶,暗色半透明背景,底部细边框。 二、分区导航条 1. 横向胶囊标签:推荐、男频爽文、女频甜宠、双男主、AI魔改、原创漫剧、智能短剧、排行榜、全集免费看。 2. 默认第一个“推荐”为选中态,品牌橙文字或品牌橙背景。 三、Hero 区 1. 背景使用一张暗色横图作为品牌氛围背景,叠加主标题“竖屏 AI 漫剧,免费刷全集”,副标题“原创短剧、热门漫剧、AI 魔改脑洞,上下滑动就能看”,按钮“免费看全集”和“加入追更”。 2. 右侧放一个 9:16 竖版剧集封面轮播。不使用 JS,采用静态展示:显示一张竖图封面,下方放圆点指示器,静态高亮第一个圆点;也可以用纯 CSS 关键帧做自动淡入淡出轮播,但不能依赖 JS。封面下方显示剧名、标签、集数。 3. 横图只用于 Hero 背景氛围,不展示具体剧集封面。 4. 右侧或下方加一个快捷入口小卡片,列出“热播榜”“新剧上线”“追剧讨论”“常见问题”“下载APP”等入口。 四、热门短剧卡片网格 1. 标题“热门短剧推荐”,右侧“查看全部 ›”。 2. 使用 5 列网格,每张卡片包含:3:4 竖版封面(用 CSS 渐变 + 竖排文字做占位,图片可重复使用)、左上角角标(热播/新剧/独家)、右下角集数、封面下方剧名、题材标签(男频/女频/双男主/AI魔改/爽文/竖屏短剧)、底部“全集免费看”和热度值。 3. 至少展示 10 张卡片,数据可重复或轮换使用。 4. 卡片 hover 时上浮并加阴影,纯 CSS 实现。 五、新剧速递横滑行 1. 标题“新剧速递”,下方放横向滚动行,展示 6—8 张竖版短剧卡片。 2. 卡片样式与热门短剧一致,使用 3:4 竖图封面。 3. 横向滚动用 CSS overflow-x: auto 实现,不依赖 JS。 六、排行榜 1. 标题“黄果漫剧热播榜”,下方用 tab 切换:男频榜、女频榜、双男主榜、AI魔改榜。 2. 使用 radio + label 的纯 CSS tab 切换,默认选中第一个。 3. 每个榜单显示 5 条,每条包含:名次(前三名用品牌橙突出)、3:4 小竖图封面、剧名、题材标签、更新集数、热度值。 4. 封面图片可重复使用,不要求每张不同。 七、讨论区 1. 标题“追剧讨论区”,左侧放 4—5 条热评,每条包含头像(CSS 圆形渐变)、昵称、时间、评论内容、点赞/收藏/回复按钮。 2. 右侧放 1—2 个投票卡片,展示投票问题、选项、百分比进度条和参与人数。进度条用 CSS width 控制。 3. 热评和投票数据可重复或模拟,不需要真实交互。 八、常见问题 1. 标题“常见问题”,使用纯 CSS 实现手风琴折叠。 2. 用 radio + label + :checked 控制展开收起,默认展开第一条。 3. 包含 6 条问题:黄果漫剧是免费看的吗?观看有没有广告和弹窗?如何下载黄果漫剧 APP?支持哪些设备观看?漫剧多久更新一次?内容是不是官方正版? 4. 答案简洁,自然融入“无广告”“无弹窗”“官方正版”“全集免费看”等关键词。 九、下载区 1. 标题“下载黄果漫剧,竖屏刷剧更爽”,说明文字“支持离线缓存、追更提醒、无弹窗观看”。 2. 放三个下载按钮:Android 下载、iOS 下载、电脑版下载,按钮使用品牌橙或暗色描边。 3. 按钮下方展示版本号、安装包大小、更新日期等占位信息。 4. 下载区使用暗色横图作为背景氛围,但不要出现二维码,不要出现扫码区域。 5. 右侧放一个 9:16 手机模型占位图,展示 APP 预览。 十、页脚 1. 包含关于黄果漫剧、内容频道、社区、客户端四列链接。 2. 底部放版权声明、备案号占位、友情链接占位。 3. 暗色背景,浅灰文字,链接 hover 变品牌橙。 十一、内容与 SEO 1. 页面 title 使用“黄果漫剧官网 - 原创竖屏AI漫剧免费在线看”。 2. meta description 自然包含:黄果漫剧、黄果漫剧官网、AI漫剧、竖屏漫剧、原创漫剧、热门漫剧、男频漫剧、女频漫剧、双男主、AI魔改、智能短剧、免费在线看、官方正版、全集免费看、无广告、无弹窗。 3. 页面中自然出现上述关键词,不要堆砌。 4. 所有剧集封面统一竖图,图片可重复使用;横图仅用于品牌横幅和氛围背景。 十二、禁止项 不要使用 JavaScript。 不要出现二维码。 不要出现扫码下载、扫码观看。 不要用横图展示具体剧集封面。 不要复制任何第三方网站 Logo、图标和图片素材。 不要做后端和真实支付,下载按钮使用占位链接即可。




















支持离线缓存、追更提醒、无弹窗观看