纯 HTML/CSS/JavaScript 实现，无框架、无构建步骤，打开 index.html 即可浏览
HTML电商
colourbloom — HTML 电商模板
作者 eramfatima971
ColourBloom 是一个纯 HTML/CSS/JavaScript 构建的美妆电商静态站点模板，包含 8 个页面、21 个商品数据与基于 localStorage 的购物车、心愿单、订单和登录状态，无需后端即可运行。
看看你的网站会是什么样
浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。
全部页面与视图 3
截图用于了解视觉与布局，交互效果请以实际项目为准。
采集于 2026-10-13查看来源
值得关注的模板亮点
从已有项目资料中，快速了解它的特点。
包含首页、商品列表、详情、购物车、结算、登录注册、心愿单、仪表盘共 8 个页面
内置 21 个商品数据与 7 个分类，支持按分类、价格、品牌和星级筛选
购物车、心愿单、订单与登录状态通过 localStorage 持久化，无需后端
玻璃拟态界面配合深色/浅色主题切换，主题偏好保存在本地
移动优先响应式布局，在 1024px、768px、480px 设置断点并带汉堡导航
模板详细介绍
ColourBloom 是一个面向美妆与化妆品场景的静态电商网站模板，使用 HTML、CSS 和原生 JavaScript 编写，不依赖任何前端框架或构建工具。模板提供 8 个页面：首页、商品列表、商品详情、购物车、结算、登录注册、心愿单和用户仪表盘。商品数据集中存放在 js/data.js 中，包含 21 个商品，覆盖彩妆、护肤、护发、香氛、沐浴与身体、工具、男士护理 7 个分类，并带有分类、价格区间、品牌和星级等筛选条件。
交互状态由 js/store.js 统一管理，购物车、心愿单、订单记录和登录信息全部保存在浏览器 localStorage 中，因此数据仅存在于当前浏览器，清除站点数据或更换设备后不会保留，也不具备真实支付、库存校验或服务端账户能力。结算页提供收货表单和支付方式选择（Card、UPI、COD），属于前端模拟流程，不会实际扣款。
界面采用玻璃拟态风格，使用 backdrop-filter 模糊效果，并支持深色/浅色主题切换，主题偏好同样写入 localStorage。首页包含自动播放的轮播图、滚动进入动画和跑马灯横幅；布局为移动优先，在 1024px、768px 和 480px 设置断点，移动端使用汉堡菜单。模板附带 5 张首页轮播图和 21 张商品图，图片与字体等第三方素材的授权需要单独核对。
HTML电商
适合你的项目吗？
适用场景
- 作为美妆或化妆品类静态电商前端的学习与参考项目
- 在无后端条件下演示商品浏览、加购、心愿单和结算的前端交互流程
- 用于课程作业、个人作品集或前端练习的页面结构与样式参考
- 作为进一步接入真实后端 API 或支付服务的前端起点
适合人群
- 想学习原生 JavaScript 状态管理与 localStorage 用法的前端初学者
- 需要美妆电商静态页面原型的设计师或独立开发者
- 寻找无构建步骤、可直接部署到静态托管的电商模板的开发者
上手与定制指南
结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。
- 1
克隆仓库后直接双击 index.html 即可在浏览器中打开，无需 Node.js 或构建步骤
- 2
也可以使用 VS Code 的 Live Server 扩展打开 index.html 进行本地预览
- 3
商品数据位于 js/data.js，可按同样结构替换或增删商品条目
- 4
购物车、心愿单、订单和登录信息保存在浏览器 localStorage 中，清除站点数据会丢失
- 5
结算流程为前端模拟，不会真实扣款；图片、字体等第三方素材需按各自许可单独核对
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供；担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
- 购物车、心愿单、订单和登录状态全部保存在浏览器 localStorage 中，数据仅存在于当前浏览器，清除站点数据或更换设备后不会保留。
- 项目无后端，所有数据与交互均为前端实现，不具备真实支付、库存校验或服务端账户能力。
- 结算流程仅为前端模拟，提供收货表单与支付方式选择，但不会实际扣款或处理真实支付。
- 商品数据为内置的 21 条示例数据，位于 js/data.js，并非真实可售商品或实时库存。
- 页脚包含作者 Eram Fatima 的签名水印，使用模板时需注意保留或处理该署名元素。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
**100% localStorage** — Cart, wishlist, orders, and auth all persist client-side
README 原文
**No backend required** — Open `index.html` and it just works
README 原文
**Checkout Flow** — Shipping form + payment method selection (Card, UPI, COD)
README 原文
**Product Catalogue** — 21 real products across 7 categories (Makeup, Skincare, Haircare, Fragrance, Bath & Body, Tools, Men's)
README 原文
https://github.com/eramfatima971/colourbloom/blob/main/LICENSEhttps://github.com/eramfatima971/colourbloom/blob/main/README.md**Watermark** — Subtle *Eram Fatima* signature at 5% opacity in footer sections
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-13。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较完整 · 80 / 100
- 技术栈
- HTML
- 网站类型
- 电商
这个分数如何计算
本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2026-06-07
- 截图检查日期
- 2026-10-13
已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 HTML。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
审核声明: [email protected] · 2026-10-13
查看当时使用的来源资料
SHA-256: efc968bd9c981e7f82229ee7a1d6294ac10990c08aefb1a138c6e8ee8190a290
2026-10-13T09:03:37.688Z
来源文件 / 仓库<div align="center">
# 🌸 ColourBloom
### *A Premium Beauty & Cosmetics E-Commerce Experience*
[](https://developer.mozilla.org/docs/Web/HTML)
[](https://developer.mozilla.org/docs/Web/CSS)
[](https://developer.mozilla.org/docs/Web/JavaScript)
[](https://eramfatima971.github.io/colourbloom/)
[](LICENSE)
**[🔗 Live Demo →](https://eramfatima971.github.io/colourbloom/)**
*A fully-responsive, zero-dependency static beauty e-commerce website built with pure HTML, CSS, and vanilla JavaScript. Features glassmorphism UI, a dark/light theme toggle, shopping cart, wishlist, simulated checkout, and 21 real product images — all without a backend.*
</div>
---
## 📸 Preview
> ✨ Visit the **[live demo](https://eramfatima971.github.io/colourbloom/)** to explore all 8 pages!
---
## ✨ Features
### 🛍️ Shopping Experience
- **Product Catalogue** — 21 real products across 7 categories (Makeup, Skincare, Haircare, Fragrance, Bath & Body, Tools, Men's)
- **Advanced Filtering** — Filter by category, price range, brand, and star rating
- **Product Detail Page** — Image gallery, description, trust badges, and related products
- **Shopping Cart** — Add/remove items, update quantities, real-time price calculation
- **Wishlist** — Save favourites, move to cart with one click
- **Checkout Flow** — Shipping form + payment method selection (Card, UPI, COD)
- **Order Tracking** — Dashboard with order history and status badges
### 🎨 Design & UI
- **Glassmorphism** — Frosted glass cards, navbar, and forms with `backdrop-filter: blur()`
- **Dark / Light Theme** — Persistent toggle with zero flash on load (saved to `localStorage`)
- **Hero Slider** — Auto-playing carousel with clickable thumbnails (5 real photos)
- **Scroll Animations** — Intersection Observer–powered fade-in-up effects
- **Marquee Banner** — Infinite-scroll promotional ticker
- **Micro-animations** — Hover states, card lifts, button transforms throughout
- **Watermark** — Subtle *Eram Fatima* signature at 5% opacity in footer sections
### 🔐 Auth & Data
- **Register / Login** — Tabbed auth card with full form validation
- **User Dashboard** — Profile editing, stats (orders, wishlist, spent), order history
- **100% localStorage** — Cart, wishlist, orders, and auth all persist client-side
- **No backend required** — Open `index.html` and it just works
### 📱 Responsive
- Mobile-first layout with hamburger nav and slide-out menu
- CSS Grid breakpoints at 1024px, 768px, and 480px
- Touch-friendly tap targets and swipe-friendly hero
---
## 🎨 Design System
### Colour Palette
| Token | Hex | Role |
|-------|-----|------|
| Powder Blue | `#BFD7EA` | Accents, borders, badges |
| Butter Yellow | `#FCE38A` | Stars, highlights, gradients |
| Blush Pink | `#F8C8DC` | Primary brand colour |
| Deep Pink | `#d870a8` | Buttons, active states, prices |
| Dark Blue | `#7BAAC8` | Brand accent, labels |
### Typography
| Role | Font | Weight |
|------|------|--------|
| Headings | [Outfit](https://fonts.google.com/specimen/Outfit) | 800–900 |
| Body | [Quicksand](https://fonts.google.com/specimen/Quicksand) | 400–700 |
| Accent / Italic | [Playfair Display](https://fonts.google.com/specimen/Playfair+Display) | 700 italic |
---
## 📁 Project Structure
```
colourbloom/
│
├── index.html # Homepage — hero slider, marquee, categories, featured, reviews
├── products.html # Shop — filter sidebar, search bar, product grid
├── product.html # Product detail — gallery, description, reviews, add-to-cart
├── cart.html # Cart — items, qty controls, promo code, order summary
├── checkout.html # Checkout — shipping form, payment method, order confirm
├── login.html # Auth — tabbed register/login with validation
├── wishlist.html # Wishlist — saved items, add-to-cart, remove
├── dashboard.html # User — profile editor, stats, order history
│
├── css/
│ └── style.css # ~850 lines — full design system
│ # • CSS custom properties (light + dark themes)
│ # • Glassmorphism utilities
│ # • Component styles (cards, buttons, forms, navbar…)
│ # • Animations & keyframes
│ # • Responsive breakpoints
│
├── js/
│ ├── data.js # Product catalogue (21 products), categories, seed reviews
│ ├── store.js # localStorage state — cart, wishlist, orders, auth
│ └── main.js # Shared navbar/footer builder, theme toggle,
│ # hero slider, animations, helpers
│
└── images/
├── hero/ # 5 hero carousel photos
│ ├── hero1.jpg … hero5.jpg
└── products/ # 21 product photos
├── lipstick.jpg
├── highlighter-palette.jpg
├── foundation.jpg
├── serum-skincare.jpg
├── perfume.jpg
├── brush-set.jpg
├── kohl-kajal.jpg
├── mascara.jpg
├── contour-blush.jpg
├── moisturiser.jpg
├── vitamin-c-toner.jpg
├── night-cream.jpg
├── sunscreen.jpg
├── argan-hair-serum.jpg
├── keratin-shampoo.jpg
├── hair-mask.jpg
├── midnight-oud.jpg
├── lavender-lotion.jpg
├── rose-sugar-scrub.jpg
├── jade-roller.jpg
└── mens-facewash.jpg
```
---
## 🚀 Getting Started
### Option 1 — Open Directly *(fastest)*
```bash
git clone https://github.com/eramfatima971/colourbloom.git
# Then double-click index.html in File Explorer
```
### Option 2 — VS Code Live Server
```bash
git clone https://github.com/eramfatima971/colourbloom.git
code colourbloom
# Install "Live Server" extension → Right-click index.html → Open with Live Server
```
**Requirements:** Any modern browser (Chrome 88+, Firefox 87+, Edge 88+, Safari 14+)
No Node.js, no build step, no server — it's pure HTML/CSS/JS.
---
## 🛠️ Technical Highlights
| Aspect | Implementation |
|--------|----------------|
| **State Management** | `localStorage` with a `Store` singleton (`store.js`) |
| **Theming** | CSS custom properties + `[data-theme="dark"]` attribute on `<html>` |
| **No-FOUC Dark Mode** | IIFE at top of `main.js` applies theme before first paint |
| **Component System** | `buildNav()` / `buildFooter()` inject shared HTML from `main.js` |
| **Product Data** | Central `CB` object in `data.js` with helper methods |
| **Animations** | `IntersectionObserver` triggers `[data-animate]` elements |
| **Hero Slider** | Vanilla JS with crossfade transition and 4-second autoplay |
| **Glassmorphism** | `backdrop-filter: blur(20px)` + semi-transparent `rgba` backgrounds |
| **Responsive** | CSS Grid + Flexbox, 3 breakpoints (1024 / 768 / 480px) |
---
## 📦 Product Categories
| # | Category | Products |
|---|----------|----------|
| 1 | 💄 Makeup | Lipstick, Highlighter, Foundation, Kajal, Mascara, Contour & Blush |
| 2 | 🌿 Skincare | Face Serum, Moisturiser, Toner, Night Cream, Sunscreen |
| 3 | 💇 Haircare | Argan Oil Serum, Keratin Shampoo, Hair Mask |
| 4 | 🌸 Fragrance | Rose Petal EDP, Midnight Oud |
| 5 | 🛁 Bath & Body | Lavender Body Lotion, Rose Sugar Scrub |
| 6 | 🪄 Tools | Rose Gold Brush Set, Jade Roller & Gua Sha |
| 7 | 👨 Men's | Charcoal Face Wash |
---
## 📄 License
This project is licensed under the [MIT License](LICENSE) — feel free to use, modify, and share.
---
<div align="center">
**Made with 🌸 by [Eram Fatima](https://github.com/eramfatima971)**
*Beauty in Every Shade ✦*
⭐ If you like this project, please give it a star!
</div>
看看同类模板
对比同技术栈与用途的模板，找到更适合的视觉与内容结构。
uikit-ecommerce-template
E-commerce template built with UIKIt
HTML · 电商
Shop Homepage
Shop Homepage 是 Start Bootstrap 发布的一款基础 HTML 商店首页模板，核心结构围绕顶部导航、商品网格和页脚展开。
HTML · 电商
ludus-free-premium-ecommerce-template
🛒 Ludus - Multipurpose E-commerce Template - 40+ Pages, User Dashboard Module & Blog Module
HTML · 后台
shoe_store
This is a Shoe-Store eCommerce website template using HTML and CSS and JS.
HTML · 电商
LeatherHoard
A basic template for e-commerce website, designed with HTML, CSS and Bootstrap.
HTML · 电商
vex-bootstrap
Vex 是 Themefisher 推出的一款干净、多用途的电商 HTML 模板，目标用户是希望快速搭建在线商店的站长。
HTML · 电商