# website

**Repository Path**: geiwo-tech/website

## Basic Information

- **Project Name**: website
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-08-01
- **Last Updated**: 2025-08-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 潮汐漂流瓶官方网站

🌊 一个温暖的社交应用官网，展示潮汐漂流瓶的功能特色和下载方式。

## 项目介绍

这是潮汐漂流瓶的官方网站，采用Node.js + Express + EJS技术栈构建，提供现代化的响应式设计体验。

### 核心功能

- 🏠 **产品介绍** - 展示应用的核心功能和特色
- 📱 **下载引导** - 提供微信小程序下载方式
- 📄 **法律文档** - 隐私政策和用户协议
- 🎨 **现代设计** - 海洋主题的视觉设计
- 📱 **响应式** - 适配桌面端和移动端

## 技术栈

- **后端框架**: Express.js
- **模板引擎**: EJS
- **CSS框架**: Tailwind CSS
- **图标库**: Font Awesome
- **安全**: Helmet.js
- **压缩**: Compression

## 项目结构

```
website/
├── server.js              # Express服务器
├── package.json           # 项目配置
├── README.md              # 说明文档
├── public/                # 静态资源
│   ├── css/
│   │   └── style.css      # 自定义样式
│   ├── js/
│   │   └── main.js        # 前端脚本
│   └── images/            # 图片资源
│       ├── button-mine.png
│       ├── button-pickup.png
│       ├── button-throw.png
│       └── home-bg.png
└── views/                 # EJS模板
    ├── index.ejs          # 首页
    ├── privacy.ejs        # 隐私政策
    └── terms.ejs          # 用户协议
```

## 快速开始

### 1. 安装依赖

```bash
cd website
npm install
```

### 2. 启动开发服务器

```bash
npm run dev
```

### 3. 访问网站

打开浏览器访问: http://localhost:3000

## 部署说明

### 生产环境运行

```bash
npm start
```

### 环境变量

可以通过环境变量配置端口:

```bash
PORT=8080 npm start
```

### 服务器部署

#### 1. 使用PM2 (推荐)

```bash
# 安装PM2
npm install -g pm2

# 启动应用
pm2 start server.js --name "tidal-website"

# 查看状态
pm2 status

# 查看日志
pm2 logs tidal-website
```

#### 2. 使用Docker

```dockerfile
FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm ci --only=production

COPY . .

EXPOSE 3000

CMD ["npm", "start"]
```

#### 3. 使用Nginx反向代理

```nginx
server {
    listen 80;
    server_name yourdomain.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 静态资源缓存
    location /css {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    location /js {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    location /images {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}
```

## 功能特性

### 🎨 视觉设计

- **海洋主题**: 蓝色渐变背景和波浪动画
- **浮动气泡**: 动态气泡效果增强沉浸感
- **毛玻璃效果**: 现代化的半透明设计
- **平滑动画**: CSS3动画和过渡效果

### 📱 响应式设计

- **移动优先**: 适配各种屏幕尺寸
- **触摸友好**: 移动端优化的交互
- **自适应布局**: Flexbox和Grid布局

### ⚡ 性能优化

- **资源压缩**: Gzip压缩减少传输大小
- **图片优化**: WebP格式支持
- **CDN加速**: 第三方库使用CDN
- **缓存策略**: 静态资源缓存

### 🔒 安全特性

- **CSP策略**: 内容安全策略防护
- **XSS防护**: 跨站脚本攻击防护
- **HTTPS支持**: SSL/TLS加密传输
- **输入验证**: 表单数据验证

## 开发指南

### 添加新页面

1. 在`views/`目录创建EJS模板
2. 在`server.js`中添加路由
3. 在`public/css/style.css`中添加样式

### 修改样式

- 主要样式在`public/css/style.css`
- 使用CSS变量统一主题色彩
- 遵循响应式设计原则

### 添加交互功能

- 在`public/js/main.js`中添加JavaScript
- 使用模块化编程避免全局污染
- 添加错误处理和性能监控

## 法律合规

网站严格遵循中国法律法规要求:

- ✅ **ICP备案**: 底部展示备案号
- ✅ **工信部链接**: 链接到官方备案网站
- ✅ **隐私政策**: 详细的隐私保护说明
- ✅ **用户协议**: 完整的服务条款
- ✅ **举报机制**: 违法信息举报渠道

## 维护说明

### 日志监控

```bash
# 查看访问日志
pm2 logs tidal-website

# 监控系统资源
pm2 monit
```

### 更新部署

```bash
# 拉取最新代码
git pull origin main

# 安装依赖
npm install

# 重启服务
pm2 restart tidal-website
```

### 备份策略

- 定期备份用户数据
- 代码版本控制
- 配置文件备份

## 问题排查

### 常见问题

1. **端口被占用**
   ```bash
   lsof -i :3000
   kill -9 <PID>
   ```

2. **npm安装失败**
   ```bash
   npm cache clean --force
   rm -rf node_modules package-lock.json
   npm install
   ```

3. **静态资源404**
   - 检查文件路径
   - 确认Express静态资源配置

## 贡献指南

1. Fork项目
2. 创建特性分支
3. 提交变更
4. 推送到分支
5. 创建Pull Request

## 许可证

MIT License - 详见[LICENSE](LICENSE)文件

## 联系我们

- 📧 **邮箱**: dev@tidaldrift.com
- 🌐 **网站**: https://www.tidaldrift.com
- 💬 **微信**: TidalDrift_Dev

---

⭐ 如果这个项目对你有帮助，请给我们一个star！