这是一个基于HTML、CSS和JavaScript构建的演示网站，用于展示AI³深圳站迷你黑客松活动信息。该网站采用了类似PowerPoint的幻灯片演示格式，结合了Neobrutalism设计风格，为用户提供丰富、生动的活动介绍体验。
该项目是一个纯前端网站，无需后端支持，可以直接在浏览器中打开并运行。主要功能包括：
- 响应式设计，适配不同尺寸的屏幕
- 左侧导航菜单，方便快速跳转到不同的幻灯片
- 键盘方向键导航支持（左右键切换幻灯片）
- 全屏显示功能
- 所有幻灯片采用一致的Neobrutalism设计风格
/
├── index.html # 主入口文件，通过iframe加载各幻灯片
├── css/
│ └── style.css # 全局样式文件
├── js/
│ └── script.js # 交互逻辑脚本
├── public/
│ └── images/ # 图片资源目录
│ ├── HackathonWeekly/# 周周黑客松相关图片
│ └── openbuild/ # OpenBuild相关图片
└── slides/ # 各幻灯片HTML文件
├── slide1.html # 封面页
├── slide2.html # 活动介绍
├── slide3.html # 活动主题
├── slide4.html # 活动详情
├── slide5.html # 活动流程
├── slide6.html # 参与人群
├── slide7.html # 参与收获
├── slide8.html # 组队指南
├── slide9.html # 技术导师介绍
├── slide10.html # 奖项设置
├── slide11.html # 代码提交指南
├── slide12.html # 合作伙伴
├── slide13.html # 联系我们
└── slide14.html # 感谢参与
- 直接打开
index.html文件，或将整个项目部署到任何静态网站托管服务 - 可以使用左右方向键切换幻灯片
- 点击左上角的菜单图标可以打开导航侧边栏
- 点击右上角的扩展图标可以进入全屏模式
- HTML5
- CSS3
- JavaScript (ES6+)
- Tailwind CSS - 通过CDN引入
- Font Awesome - 图标库
该项目采用了Neobrutalism设计风格，主要特点包括：
- 大胆鲜艳的配色（主色调：黑色、白色、明亮的原色如蓝色、红色、黄色）
- 粗体无衬线字体
- 清晰可见的边框和阴影
- 按钮和元素具有明显的立体感
- 网格布局与不对称设计
- 简约而直接的视觉元素
网站包含了AI³深圳站迷你黑客松的全部信息，包括：
- 封面页 - 活动主题和主办方信息
- 活动介绍 - AI³ Growth Journey计划简介
- 活动主题 - 使用AI代码助手编写智能合约
- 活动详情 - 时间、地点、报名方式
- 活动流程 - 详细的活动时间线
- 参与人群 - 参与要求和条件
- 参与收获 - 参与活动的收获和好处
- 组队指南 - 组队要求和建议
- 技术导师介绍 - 活动技术导师信息
- 奖项设置 - 比赛奖项和评分标准
- 代码提交指南 - 详细的代码提交流程
- 合作伙伴 - 主办方和赞助商信息
- 联系我们 - 各种联系方式和社区信息
- 感谢参与 - 感谢页面与返回首页功能
-
键盘快捷键:
- 左/右方向键: 切换到上一张/下一张幻灯片
- ESC: 关闭侧边栏
- F: 切换全屏模式
-
开发建议:
- 如需修改样式，编辑
css/style.css文件 - 如需修改交互逻辑，编辑
js/script.js文件 - 替换
public/images中的图片以自定义视觉元素
- 如需修改样式，编辑
本项目代码可自由用于非商业用途，商业使用请联系原作者。
如有问题或建议，请通过以下方式联系：
- 网站: aiweb3.dev
- 邮箱: [email protected]