Init the website with github copilot

Author: riverfor

.DS_Store

@@ -0,0 +1,50 @@
+# Q+2077: 代码边疆
+
+欢迎来到《Q+2077：代码边疆》的官方网站！本项目旨在创建一个响应式的单页网站，展示游戏的核心理念和运作方式，采用赛博朋克风格的设计。
+
+## 项目结构
+
+- **index.html**: 主要的HTML文件，结构化单页网站，包括固定导航栏、首屏、内容区和页脚。
+- **css/**: 包含所有样式文件
+  - **style.css**: 主要样式，包含布局、排版和色彩方案。
+  - **animations.css**: 定义网站中使用的CSS动画效果。
+  - **responsive.css**: 媒体查询和响应式样式，确保网站在不同屏幕尺寸下适配良好。
+- **js/**: 包含所有JavaScript文件
+  - **main.js**: 初始化网站功能，包括导航事件监听和平滑滚动。
+  - **animations.js**: 处理动画效果的JavaScript代码，使用GSAP库增强视觉效果。
+  - **scroll.js**: 管理与滚动相关的功能，包括视差效果和滚动触发的动画。
+- **assets/**: 包含网站使用的所有资源
+  - **fonts/**: 自定义字体文件，提供独特的赛博朋克美学。
+  - **icons/**: 网站图标，包括logo和各个部分的代表图标。
+- **lib/**: 包含第三方库
+  - **gsap.min.js**: GSAP库的压缩版本，用于动画和过渡效果。
+  - **three.min.js**: Three.js库的压缩版本，用于渲染3D元素。
+- **README.md**: 项目的文档，包含设置说明和网站功能概述。
+
+## 安装与使用
+
+1. 克隆此仓库到本地：
+   ```
+   git clone <repository-url>
+   ```
+2. 进入项目目录：
+   ```
+   cd qplus2077-website
+   ```
+3. 打开 `index.html` 文件以查看网站。
+
+## 特性
+
+- 赛博朋克风格的设计，结合黑白灰色调和霓虹蓝/紫光效。
+- 响应式布局，适配移动端设备。
+- 动态二进制代码流背景和Q+2077星球全息投影。
+- 平滑滚动和视差效果，提升用户体验。
+- 交互增强功能，包括导航高亮、汉堡菜单和轻触反馈。
+
+## 贡献
+
+欢迎任何形式的贡献！请提交问题或拉取请求以帮助我们改进项目。
+
+## 联系我们
+
+如有任何问题或建议，请通过社交媒体与我们联系。

docs/.DS_Store

@@ -0,0 +1 @@
+This file is intentionally left blank.

docs/README.md

@@ -0,0 +1,61 @@
+/* Animations for the Q+2077 website */
+
+/* Fade in effect */
+.fade-in {
+    opacity: 0;
+    animation: fadeIn 1s forwards;
+}
+
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+    }
+}
+
+/* Slide in from the left */
+.slide-in-left {
+    transform: translateX(-100%);
+    animation: slideInLeft 0.5s forwards;
+}
+
+@keyframes slideInLeft {
+    to {
+        transform: translateX(0);
+    }
+}
+
+/* Slide in from the right */
+.slide-in-right {
+    transform: translateX(100%);
+    animation: slideInRight 0.5s forwards;
+}
+
+@keyframes slideInRight {
+    to {
+        transform: translateX(0);
+    }
+}
+
+/* Hover effect for buttons */
+.button-hover {
+    transition: background-color 0.3s, transform 0.3s;
+}
+
+.button-hover:hover {
+    background-color: rgba(0, 0, 0, 0.7);
+    transform: scale(1.05);
+}
+
+/* Pulsing effect for social media icons */
+.pulse {
+    animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+    0%, 100% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(1.1);
+    }
+}