这个项目能做什么

## 概要 这是预定于2026年2月15日举办的活动「さっぽろすごいAIまつり」的官方落地页。网站是仅由HTML、CSS、JavaScript构成的静态站点,不依赖构建工具或框架。 ## 设计特点 - 以火焰为主题的粒子动画、渐变和专用配色 - 现代深色主题 - 适配手机、平板和桌面设备的响应式设计 - 滚动动画、视差效果等交互 配色通过CSS变量(`:root`)定义,修改 `--flame-red`、`--flame-orange`、`--flame-yellow`、`--flame-bright`、`--dark-bg`、`--dark-surface`、`--dark-elevated` 等即可调整配色。 ## 内容结构 介绍三个项目。 1. AI商业大赛 — 由市民发表商业创意 2. AI艺术节 — 与AI共同创作的艺术、音乐、影像现场演出 3. AI展示・体验会 — 在展示展位进行AI作品展示与体验 网站还设有独立章节,介绍为这些项目提供基础知识的免费e-learning网站「すごいAI道場」,并通过外部链接(dojo.sugoiai.org)进行引导。同时也预留了众筹链接和Discord邀请链接的记载位置。 ## 文件结构 - `index.html` — 落地页主体 - `style.css` — 样式表 - `script.js` — 动画与交互 - `requirements.md` — 需求定义 - `todo.md` — 工作记录・检查清单 - `README.md` — 说明 ## 使用方法 可在浏览器中直接打开 `index.html`,或通过Python 3的 `python3 -m http.server 8000`、`npx http-server` 等本地服务器查看。由于是静态站点,可直接部署到Netlify(拖放)、Vercel(Git仓库联动)、GitHub Pages、Firebase Hosting等平台。 ## 自定义 - 文本通过编辑 `index.html` 修改 - 配色和间距通过 `style.css` 的CSS变量调整 - 滚动动画的时机、视差效果的强度、悬停效果通过 `script.js` 调整 图片目前为占位符,文档中说明了将图片放入 `images/` 文件夹,并将 `.image-placeholder` 元素替换为img标签的步骤。 ## 性能方面的实现 包括使用CSS Grid/Flexbox进行布局、通过Intersection Observer实现延迟动画、使用requestAnimationFrame处理滚动、通过CSS transforms实现硬件加速。 ## 部署前检查清单 包括将Discord邀请链接改为实际URL、替换图片占位符、设置OGP图片和favicon、设置访问分析、确认所有链接运作、确认在各画面宽度下的显示。 ## 运营信息 主办为札幌すごいAI会。咨询渠道记载了X(Twitter)账号 @ykishimotoy 和话题标签 #さっぽろすごいAIまつり。