JingYu588/open/2026GrowthCompass

Public

WeChat Login

Code Issues Pull requests Events Packages Insights

main

Branch

Tag

取名字真的难

fix: 更新 CNB 配置，修复环境变量导入地址和项目名称

fe5822cb

2 commits

.cnb.yml
.edgeone.yml
.gitignore
LICENSE
README.md
envs.yml.example
index.html

鲸鱼工具平台 🐋

一个基于海洋主题的炫酷导航首页，包含2026马年倒计时和丰富的海底动画效果。

✨ 功能特性

🐋 海洋主题设计 - 深海渐变背景，配合气泡、光晕等效果
⏰ 2026马年倒计时 - 带有马年主题的炫酷倒计时
🔗 导航卡片 - 玻璃态效果，悬停动画
🗳️ 投票入口 - 集成投票链接
🌊 丰富的海底动物 - 鲸鱼、鱼群、海龟、水母、海星、珊瑚、海草、螃蟹、海螺、小虾、海马
📱 响应式设计 - 完美适配移动端和桌面端
🎨 烟散效果 - 第一个导航卡片副标题的动态烟散效果

🚀 快速开始

本地运行

克隆或下载项目
用浏览器直接打开 index.html

或者使用本地服务器：


# Python 3
python3 -m http.server 8000

# Python 2
python -m SimpleHTTPServer 8000

# Node.js
npx http-server -p 8000

# PHP
php -S localhost:8000

然后在浏览器访问 http://localhost:8000

部署到 EdgeOne Pages

本项目已配置 EdgeOne Pages 自动构建部署，只需：

将代码推送到 Git 仓库
在 EdgeOne Pages 中连接仓库
配置构建命令（如有需要）
自动部署完成

📁 项目结构


whale-tool-platform/
├── .cnb.yml              # CNB (Cloud Native Build) 配置文件
│                         # 用于自动构建并部署至 EdgeOne Pages
│
├── .edgeone.yml          # EdgeOne Pages 配置文件
│                         # 包含构建、部署、缓存等设置
│
├── .gitignore            # Git 忽略文件
│                         # 排除依赖、日志、临时文件等
│
├── envs.yml.example      # 环境变量配置示例
│                         # 用于配置 EDGEONE_API_TOKEN
│
├── index.html            # 主页面
│                         # 包含完整的 HTML、CSS 和 JavaScript
│                         # - 海洋主题设计
│                         # - 2026马年倒计时
│                         # - 导航卡片
│                         # - 投票入口
│                         # - 丰富的海底动物动画
│
├── LICENSE               # MIT License 开源许可证
│                         # 允许自由使用、修改和分发
│
└── README.md             # 项目说明文档
                         # 本文件，包含项目介绍、使用方法等

文件说明

文件	说明	用途
`.cnb.yml`	CNB 构建配置	配置自动构建和部署到 EdgeOne Pages 的流水线
`.edgeone.yml`	EdgeOne Pages 配置	EdgeOne Pages 平台的构建和部署设置
`.gitignore`	Git 忽略规则	指定不需要提交到版本控制的文件
`envs.yml.example`	环境变量示例	说明如何配置 API Token
`index.html`	主页面	网站的所有内容（HTML/CSS/JS）
`LICENSE`	开源许可证	MIT 协议
`README.md`	项目文档	项目说明和使用指南

🎨 自定义配置

修改导航链接

在 index.html 中找到导航卡片区域，修改 href 属性：


<a href="你的链接" class="nav-card" target="_blank">
    <span class="nav-icon">🔧</span>
    <div class="nav-title">工具名称</div>
    <div class="nav-desc">工具描述</div>
</a>

修改主题颜色

在 index.html 的 <style> 标签中修改 body 的背景渐变：


body {
    background: linear-gradient(180deg,
        #0a1628 0%,      /* 深海蓝 */
        #1a365d 30%,     /* 中层蓝 */
        #1e4a6e 60%,     /* 浅层蓝 */
        #1a365d 100%      /* 底部蓝 */
    );
}

调整海底动物数量

在 index.html 的 <script> 标签中修改相关函数的参数：


// 调整气泡数量
const bubbleCount = 30;  // 改为想要的数量

// 调整鱼群数量
const fishCount = 12;   // 改为想要的数量

🌊 海底动物说明

当前页面包含以下海底动物：

动物	Emoji	动画效果
鲸鱼	🐋	游动 + 脉冲
鱼群	🐠🐟🐡	穿梭游动
海龟	🐢	缓慢游动
水母	🪼	浮动 + 触须摆动
海星	⭐	闪烁 + 脉冲
珊瑚	🪸🌿	发光
海草	🌿	随波摇摆
螃蟹	🦀	横向行走
海螺	🐚	轻微浮动
小虾	🦐	快速游动
海马	🦡	优雅浮动