一个电商网站生成提示词：直接给你一个能跑的完整 HTML

扮演一个资深全栈 Web 开发者和 UI/UX 设计师。

我要你从零开始做一个现代、专业、完全响应式的电商网站。

## 目标

做一个干净、有吸引力的在线购物网站，适合真实业务。在手机、平板、桌面都要流畅。

## 技术

用：
- HTML5
- CSS3
- JavaScript
- 用单个 HTML 文件，CSS 和 JavaScript 都内嵌
- 除非绝对必要，不要用后端
- 代码要干净、有条理、对初学者友好

## 网站功能

1. 页头/导航
   - 专业的 Logo/店名
   - 首页、商店、分类、关于、联系
   - 搜索图标/栏
   - 购物车图标带商品数
   - 登录/注册按钮

2. Hero 区
   - 大促销横幅
   - 有吸引力的标题
   - 简短描述
   - "Shop Now" 按钮
   - 现代电商设计

3. 分类
   做有吸引力的分类卡片，比如：
   - 电子产品、时尚、鞋、配饰、美妆、家居

4. 产品区
   显示多个产品卡片，包含：
   - 产品图、产品名、评分、原价、折后价、折扣百分比
   - "加入购物车"按钮、"立即购买"按钮、收藏/心形按钮

5. 产品搜索和筛选
   用 JavaScript 实现：
   - 产品搜索、分类筛选、价格排序、评分排序

6. 购物车
   做一个能用的购物车，用户可以：
   - 加产品、删产品、增减数量、看小计、看总价、清空购物车

7. 结账
   做一个专业的结账页/区，包含：
   - 客户姓名、邮箱、电话、地址、城市、州、邮编
   - 支付方式、订单摘要、"下单"按钮

8. 特别区
   加：
   - 限时特卖、热销、新品、客户评价、订阅

9. 页脚
   包含：
   - 关于商店、快速链接、客服、隐私政策、条款、社交媒体图标、版权

## 设计要求

- 高级、现代的 UI
- 清晰的排版
- 有吸引力的产品卡片
- 平滑的 hover 动画
- 响应式布局
- 移动端友好的汉堡菜单
- 好的间距和对齐
- 专业的配色方案
- 平滑滚动
- 无障碍的按钮和表单
- 加细微动画，但不要让网站变慢

## JavaScript 要求

让这些功能真正能用：
- 搜索、分类筛选、排序
- 加入购物车、从购物车删除、数量控制、购物车总价计算
- 收藏按钮、移动导航、结账表单验证、订单确认消息

用示例产品和可公开访问的图片 URL。

## 重要

不要只给我解释。**构建完整的可运行网站代码。**

把完整代码放在一个 HTML 文件里，我能保存成 index.html 直接在浏览器打开。

让最终结果看起来像专业的真实电商网站，而不是基础 demo。