请严格按照以下指令要求生成完整的非物质文化遗产网站代码： 项目名称：非物质文化遗产保护与传承网站 技术栈：HTML5、CSS3、JavaScript（不使用任何后端技术） 页面数量：5个完整页面（不包括登录注册） 页面结构： 1. index.html - 网站首页（一级页面） 2. category.html - 栏目首页（二级页面，如"刺绣技艺"分类） 3. detail.html - 内容详情页（三级页面，具体非遗项目介绍） 4. profile.html - 个人设置页面（"我的"页面） 5. timeline.html - 时间轴页面（自选页面，展示非遗历史发展） 技术要求： 1. HTML元素必须使用15种以上：包括但不限于 header, nav, section, article, figure, footer, main, aside, form, input, button, ul, li, a, img, video, audio, table, canvas 等 2. CSS布局必须包含4种以上：Flexbox、Grid、定位布局、流式布局、多列布局 3. JavaScript功能：DOM操作、BOM对象使用、自定义函数、本地存储 4. 必须使用至少一个前端插件：Swiper轮播图插件 5. 响应式设计：适配桌面和移动端 具体功能要求： 首页(index.html)： - 使用Swiper实现轮播图展示 - 非遗分类导航区域 - 特色项目推荐 - 最新资讯区域 栏目首页(category.html)： - 分类筛选功能 - 项目卡片网格布局 - 搜索功能（前端模拟） 内容详情页(detail.html)： - 详细信息展示 - 图片画廊 - 相关推荐 - 收藏功能（使用localStorage） 个人设置(profile.html)： - 用户信息展示 - 收藏列表管理 - 主题设置切换 - 浏览历史 时间轴页面(timeline.html)： - 垂直时间轴布局 - 滚动触发动画 - 历史事件卡片 - 响应式时间轴（桌面端左右交替，移动端单列） 样式要求： - 主色调：中国传统色彩（如#8B4513、#D2691E等） - 字体：中文字体兼容性（优先使用系统字体） - 图片占位：使用placeholder图片或描述性alt文本 - 代码规范：语义化标签、合理注释、规范命名 文件结构： non-heritage-website/ ├── index.html ├── category.html ├── detail.html ├── profile.html ├── timeline.html ├── css/ │ ├── style.css（主样式） │ └── swiper-bundle.min.css ├── js/ │ ├── main.js（主逻辑） │ ├── swiper-bundle.min.js │ └── components.js（组件函数） ├── images/（图片资源） └── video/（视频资源） 请严格按照以上要求生成完整的、可直接运行的代码。每个文件都要包含完整的HTML结构，CSS要包含响应式媒体查询，JavaScript要包含错误处理。代码要满足我的所有要求，特别是要突出展示技术要点的实现。

Play and explore "请严格按照以下指令要求生成完整的非物质文化遗产网站代码： 项目名称：非物质文化遗产保护与传承网站 技术栈：HTML5、CSS3、JavaScript（不使用任何后端技术） 页面数量：5个完整页面（不包括登录注册） 页面结构： 1. index.html - 网站首页（一级页面） 2. category.html - 栏目首页（二级页面，如"刺绣技艺"分类） 3. detail.html - 内容详情页（三级页面，具体非遗项目介绍） 4. profile.html - 个人设置页面（"我的"页面） 5. timeline.html - 时间轴页面（自选页面，展示非遗历史发展） 技术要求： 1. HTML元素必须使用15种以上：包括但不限于 header, nav, section, article, figure, footer, main, aside, form, input, button, ul, li, a, img, video, audio, table, canvas 等 2. CSS布局必须包含4种以上：Flexbox、Grid、定位布局、流式布局、多列布局 3. JavaScript功能：DOM操作、BOM对象使用、自定义函数、本地存储 4. 必须使用至少一个前端插件：Swiper轮播图插件 5. 响应式设计：适配桌面和移动端 具体功能要求： 首页(index.html)： - 使用Swiper实现轮播图展示 - 非遗分类导航区域 - 特色项目推荐 - 最新资讯区域 栏目首页(category.html)： - 分类筛选功能 - 项目卡片网格布局 - 搜索功能（前端模拟） 内容详情页(detail.html)： - 详细信息展示 - 图片画廊 - 相关推荐 - 收藏功能（使用localStorage） 个人设置(profile.html)： - 用户信息展示 - 收藏列表管理 - 主题设置切换 - 浏览历史 时间轴页面(timeline.html)： - 垂直时间轴布局 - 滚动触发动画 - 历史事件卡片 - 响应式时间轴（桌面端左右交替，移动端单列） 样式要求： - 主色调：中国传统色彩（如#8B4513、#D2691E等） - 字体：中文字体兼容性（优先使用系统字体） - 图片占位：使用placeholder图片或描述性alt文本 - 代码规范：语义化标签、合理注释、规范命名 文件结构： non-heritage-website/ ├── index.html ├── category.html ├── detail.html ├── profile.html ├── timeline.html ├── css/ │ ├── style.css（主样式） │ └── swiper-bundle.min.css ├── js/ │ ├── main.js（主逻辑） │ ├── swiper-bundle.min.js │ └── components.js（组件函数） ├── images/（图片资源） └── video/（视频资源） 请严格按照以上要求生成完整的、可直接运行的代码。每个文件都要包含完整的HTML结构，CSS要包含响应式媒体查询，JavaScript要包含错误处理。代码要满足我的所有要求，特别是要突出展示技术要点的实现。". An AI-generated interactive game/tool created by lkiinnn on MyPopku.