增加website 官网

.gitignore

@@ -5,7 +5,7 @@
 node_modules/
 package-lock.json
 Users/
-output/
+output-chrome/
 output-firefox/
 output-edge/
-.vscode/
+.vscode/    

CODE_OF_CONDUCT.md

@@ -1,76 +0,0 @@
-# Contributor Covenant Code of Conduct
-
-## Our Pledge
-
-In the interest of fostering an open and welcoming environment, we as
-contributors and maintainers pledge to making participation in our project and
-our community a harassment-free experience for everyone, regardless of age, body
-size, disability, ethnicity, sex characteristics, gender identity and expression,
-level of experience, education, socio-economic status, nationality, personal
-appearance, race, religion, or sexual identity and orientation.
-
-## Our Standards
-
-Examples of behavior that contributes to creating a positive environment
-include:
-
-* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
-* Showing empathy towards other community members
-
-Examples of unacceptable behavior by participants include:
-
-* The use of sexualized language or imagery and unwelcome sexual attention or
- advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
-* Publishing others' private information, such as a physical or electronic
- address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a
- professional setting
-
-## Our Responsibilities
-
-Project maintainers are responsible for clarifying the standards of acceptable
-behavior and are expected to take appropriate and fair corrective action in
-response to any instances of unacceptable behavior.
-
-Project maintainers have the right and responsibility to remove, edit, or
-reject comments, commits, code, wiki edits, issues, and other contributions
-that are not aligned to this Code of Conduct, or to ban temporarily or
-permanently any contributor for other behaviors that they deem inappropriate,
-threatening, offensive, or harmful.
-
-## Scope
-
-This Code of Conduct applies both within project spaces and in public spaces
-when an individual is representing the project or its community. Examples of
-representing a project or community include using an official project e-mail
-address, posting via an official social media account, or acting as an appointed
-representative at an online or offline event. Representation of a project may be
-further defined and clarified by project maintainers.
-
-## Enforcement
-
-Instances of abusive, harassing, or otherwise unacceptable behavior may be
-reported by contacting the project team at [email protected]. All
-complaints will be reviewed and investigated and will result in a response that
-is deemed necessary and appropriate to the circumstances. The project team is
-obligated to maintain confidentiality with regard to the reporter of an incident.
-Further details of specific enforcement policies may be posted separately.
-
-Project maintainers who do not follow or enforce the Code of Conduct in good
-faith may face temporary or permanent repercussions as determined by other
-members of the project's leadership.
-
-## Attribution
-
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
-available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
-
-[homepage]: https://www.contributor-covenant.org
-
-For answers to common questions about this code of conduct, see
-https://www.contributor-covenant.org/faq

PRIVACY_POLICY.md

@@ -1,58 +0,0 @@
-# FeHelper 隐私政策
-
-最后更新日期：2023年10月10日
-
-## 引言
-
-FeHelper（"我们"、"我们的"或"本扩展"）尊重您的隐私。本隐私政策旨在告知您关于我们如何收集、使用、存储和保护您通过使用我们的Chrome浏览器扩展所提供的信息。
-
-## 我们收集的信息
-
-### 使用数据
-
-我们收集关于您如何使用FeHelper扩展的匿名数据，包括：
-
-- 扩展的安装和更新事件
-- 每日活跃使用情况
-- 使用的具体工具功能（如JSON格式化、二维码生成等）
-- 扩展版本信息
-
-### 用户标识符
-
-为了统计唯一用户数，我们为每个安装的扩展实例生成一个随机唯一标识符（UUID）。这个标识符是匿名的，不包含任何可以直接识别您个人身份的信息。
-
-## 我们如何使用收集的信息
-
-我们收集的信息用于以下目的：
-
-- 改进扩展功能和用户体验
-- 了解哪些功能最受欢迎，以便优先开发和改进
-- 识别并修复可能的问题或错误
-- 了解用户的使用模式以优化性能
-
-## 数据分析服务
-
-我们使用Google Analytics 4（GA4）来收集和分析上述使用数据。GA4受Google隐私政策的约束，您可以在[此处](https://policies.google.com/privacy)查看。
-
-## 数据分享和披露
-
-我们不会出售、出租或以其他方式分享您的个人信息，除非：
-
-- 法律要求我们这样做
-- 为了保护我们的权利、财产或安全
-- 在获得您的同意的情况下
-
-## 数据安全
-
-我们采取合理的安全措施来保护所收集的信息，防止未经授权的访问、使用或披露。
-
-## 隐私政策的变更
-
-我们可能会更新本隐私政策。如有重大变更，我们将通过扩展内通知或更新日期来通知您。
-
-## 联系我们
-
-如果您对本隐私政策有任何疑问，请通过以下方式联系我们：
-
-- 电子邮件：[您的电子邮件地址]
-- 网站：[您的网站地址] 

README_TEST.md

@@ -1,16 +0,0 @@
-## FeHelper测试说明书
-
-> 本教程主要用于 output/fehelper.zip 包的本地测试，日常使用的话，建议安装线上正式版（Chrome商店版）
-
-### 一、测试包安装
-1. 下载fehelper.zip包，文件路径：`output/fehelper.zip`
-2. 解压fehelper.zip包，建议解压到一个`安全的目录`，别无意间被删掉了
-3. 打开chrome浏览器，地址栏输入：`chrome://extensions/` 进入插件管理界面
-4. 右上角`开启开发者模式`，确保所有的插件可被管理
-5. 如果本机已安装过线上FeHelper正式版，请找到它，并且`禁用它`
-6. 上方找到`加载已解压的扩展程序`按钮，选择fehelper.zip的解压目录
-7. 完成本地包载入，FeHelper本地包安装成功
-
-
-### 二、测试内容反馈
-大家可以把测试过程中发现的问题，统一提交到这里：[https://github.com/zxlie/FeHelper/issues/192](https://github.com/zxlie/FeHelper/issues/192) ，我会尽快跟进并修复它，为大家提供更高质量的FeHelper！

gulpfile.js

@@ -3,24 +3,26 @@
  * @author zhaoxianlie
  */
 
-let gulp = require('gulp');
-
-let clean = require('gulp-clean');
-let copy = require('gulp-copy');
-let zip = require('gulp-zip');
-let uglifyjs = require('gulp-uglify-es').default;
-let uglifycss = require('gulp-uglifycss');
-let htmlmin = require('gulp-htmlmin');
-let jsonmin = require('gulp-jsonminify');
-let fs = require('fs');
-let through = require('through2');
-let path = require('path');
-let pretty = require('pretty-bytes');
-let shell = require('shelljs');
-let babel = require('gulp-babel');
-let assert = require('assert');
-let gulpIf = require('gulp-if');
-let imagemin = require('gulp-imagemin');
+const gulp = require('gulp');
+const clean = require('gulp-clean');
+const copy = require('gulp-copy');
+const zip = require('gulp-zip');
+const uglifyjs = require('gulp-uglify-es').default;
+const uglifycss = require('gulp-uglifycss');
+const htmlmin = require('gulp-htmlmin');
+const jsonmin = require('gulp-jsonminify');
+const fs = require('fs');
+const through = require('through2');
+const path = require('path');
+const pretty = require('pretty-bytes');
+const shell = require('shelljs');
+const babel = require('gulp-babel');
+const assert = require('assert');
+const gulpIf = require('gulp-if');
+const imagemin = require('gulp-imagemin');
+const imageminGifsicle = require('imagemin-gifsicle');
+const imageminMozjpeg = require('imagemin-mozjpeg');
+const imageminSvgo = require('imagemin-svgo');
 
 let isSilentDetect = false; // <-- 添加全局标志位
 
@@ -29,22 +31,22 @@ let isSilentDetect = false; // <-- 添加全局标志位
 
 // 清理输出目录
 function cleanOutput() {
-    return gulp.src('output', {read: false, allowEmpty: true}).pipe(clean({force: true}));
+    return gulp.src('output-chrome', {read: false, allowEmpty: true}).pipe(clean({force: true}));
 }
 
 // 复制静态资源
 function copyAssets() {
-    return gulp.src(['apps/**/*.{gif,png,jpg,jpeg,cur,ico,ttf,.woff2}', '!apps/static/screenshot/**/*']).pipe(copy('output'));
+    return gulp.src(['apps/**/*.{gif,png,jpg,jpeg,cur,ico,ttf,.woff2}', '!apps/static/screenshot/**/*']).pipe(copy('output-chrome'));
 }
 
 // 处理JSON文件
 function processJson() {
-    return gulp.src('apps/**/*.json').pipe(jsonmin()).pipe(gulp.dest('output/apps'));
+    return gulp.src('apps/**/*.json').pipe(jsonmin()).pipe(gulp.dest('output-chrome/apps'));
 }
 
 // 处理HTML文件
 function processHtml() {
-    return gulp.src('apps/**/*.html').pipe(htmlmin({collapseWhitespace: true})).pipe(gulp.dest('output/apps'));
+    return gulp.src('apps/**/*.html').pipe(htmlmin({collapseWhitespace: true})).pipe(gulp.dest('output-chrome/apps'));
 }
 
 // 合并 & 压缩 js
@@ -92,7 +94,7 @@ function processJs() {
                 ecma: 2015
             }
         })))
-        .pipe(gulp.dest('output/apps'));
+        .pipe(gulp.dest('output-chrome/apps'));
 }
 
 // 合并 & 压缩 css
@@ -116,38 +118,37 @@ function processCss() {
         })
     };
 
-    return gulp.src('apps/**/*.css').pipe(cssMerge()).pipe(uglifycss()).pipe(gulp.dest('output/apps'));
+    return gulp.src('apps/**/*.css').pipe(cssMerge()).pipe(uglifycss()).pipe(gulp.dest('output-chrome/apps'));
 }
 
 // 添加图片压缩任务
 function compressImages() {
-    return gulp.src('output/apps/**/*.{png,jpg,jpeg,gif,svg}') // 源目录应为 output
+    return gulp.src('output-chrome/apps/**/*.{png,jpg,jpeg,gif,svg}') // 源目录应为 output
         .pipe(imagemin([
-            imagemin.gifsicle({interlaced: true}),
-            imagemin.mozjpeg({quality: 75, progressive: true}),
-            imagemin.optipng({optimizationLevel: 5}),
-            imagemin.svgo({
+            imageminGifsicle({interlaced: true}),
+            imageminMozjpeg({quality: 75, progressive: true}),
+            imageminSvgo({
                 plugins: [
                     {removeViewBox: true},
                     {cleanupIDs: false}
                 ]
             })
         ]))
-        .pipe(gulp.dest('output/apps')); // 覆盖回 output
+        .pipe(gulp.dest('output-chrome/apps')); // 覆盖回 output
 }
 
 // 清理冗余文件，并且打包成zip，发布到chrome webstore
 function zipPackage(cb) {
     // 读取manifest文件
-    let pathOfMF = './output/apps/manifest.json';
+    let pathOfMF = './output-chrome/apps/manifest.json';
     let manifest = require(pathOfMF);
 
     manifest.name = manifest.name.replace('-Dev', '');
     fs.writeFileSync(pathOfMF, JSON.stringify(manifest));
 
     // ============压缩打包================================================
-    shell.exec('cd output/ && rm -rf fehelper.zip && zip -r fehelper.zip apps/ > /dev/null && cd ../');
-    let size = fs.statSync('output/fehelper.zip').size;
+    shell.exec('cd output-chrome/ && rm -rf fehelper.zip && zip -r fehelper.zip apps/ > /dev/null && cd ../');
+    let size = fs.statSync('output-chrome/fehelper.zip').size;
     size = pretty(size);
 
 
@@ -161,7 +162,7 @@ function zipPackage(cb) {
 
 // 打包ms-edge安装包
 function edgePackage(cb) {
-    shell.exec('rm -rf output-edge && cp -r output output-edge && rm -rf output-edge/fehelper.zip');
+    shell.exec('rm -rf output-edge && cp -r output-chrome output-edge && rm -rf output-edge/fehelper.zip');
 
     // 更新edge所需的配置文件
     let pathOfMF = './output-edge/apps/manifest.json';
@@ -188,7 +189,7 @@ function edgePackage(cb) {
 
 // 打包Firefox安装包
 function firefoxPackage(cb) {
-    shell.exec('rm -rf output-firefox && cp -r output output-firefox && rm -rf output-firefox/fehelper.zip');
+    shell.exec('rm -rf output-firefox && cp -r output-chrome output-firefox && rm -rf output-firefox/fehelper.zip');
 
     // 清理掉firefox里不支持的tools
     let rmTools = ['page-capture', 'color-picker', 'ajax-debugger', 'wpo', 'code-standards', 'ruler', 'remove-bg'];
@@ -236,7 +237,7 @@ function firefoxPackage(cb) {
 }
 
 function syncFiles() {
-    return gulp.src('apps/**/*').pipe(gulp.dest('output/apps'));
+    return gulp.src('apps/**/*').pipe(gulp.dest('output-chrome/apps'));
 }
 
 // 设置静默标志
@@ -285,7 +286,7 @@ function detectUnusedFiles(cb) {
             } else {
                 // 只关注静态资源文件，并排除特殊文件
                 if (/\.(js|css|png|jpg|jpeg|gif|svg)$/i.test(file) && !shouldExcludeFile(fullPath)) {
-                    const relativePath = path.relative('output/apps', fullPath);
+                    const relativePath = path.relative('output-chrome/apps', fullPath);
                     allFiles.add(relativePath);
                 }
             }
@@ -337,7 +338,7 @@ function detectUnusedFiles(cb) {
                 } else {
                     // Resolve relative paths (./, ../, or direct filename)
                     const absolutePath = path.resolve(fileDir, extractedPath);
-                    finalPathToAdd = path.relative('output/apps', absolutePath);
+                    finalPathToAdd = path.relative('output-chrome/apps', absolutePath);
                 }
                 
                 // Final check before adding
@@ -351,7 +352,7 @@ function detectUnusedFiles(cb) {
     
     // 读取manifest.json中的引用
     function processManifest() {
-        const manifestPath = 'output/apps/manifest.json';
+        const manifestPath = 'output-chrome/apps/manifest.json';
         if (fs.existsSync(manifestPath)) {
             const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
             
@@ -411,7 +412,7 @@ function detectUnusedFiles(cb) {
             <img src="chrome-extension://abcdefgh/static/icon.png">
         `;
         
-        const testFilePath = 'output/apps/test/index.html';
+        const testFilePath = 'output-chrome/apps/test/index.html';
         referencedFiles.clear();  // 清理之前的测试数据
         findReferences(testContent, testFilePath);
         
@@ -435,15 +436,15 @@ function detectUnusedFiles(cb) {
         runTests();
         
         // 执行实际检测
-        getAllFiles('output/apps');
+        getAllFiles('output-chrome/apps');
         processManifest();
         
         // 扫描所有文件内容中的引用
-        const filesToScan = fs.readdirSync('output/apps', { recursive: true })
+        const filesToScan = fs.readdirSync('output-chrome/apps', { recursive: true })
             .filter(file => !shouldExcludeFile(file));
             
         filesToScan.forEach(file => {
-            const fullPath = path.join('output/apps', file);
+            const fullPath = path.join('output-chrome/apps', file);
             if (fs.statSync(fullPath).isFile() && /\.(html|js|css|json)$/i.test(file)) {
                 const content = fs.readFileSync(fullPath, 'utf8');
                 findReferences(content, fullPath);
@@ -460,7 +461,7 @@ function detectUnusedFiles(cb) {
             unusedFiles.forEach(file => {
                 if (!isSilentDetect) console.log(file);
                 try {
-                    const fullPath = path.join('output/apps', file);
+                    const fullPath = path.join('output-chrome/apps', file);
                     if (fs.existsSync(fullPath)) {
                        totalUnusedSize += fs.statSync(fullPath).size; 
                        // 删除文件
@@ -518,7 +519,7 @@ gulp.task('default',
     gulp.series(
         cleanOutput, 
         gulp.parallel(copyAssets, processCss, processJs, processHtml, processJson), 
-        compressImages,
+        // compressImages,  // 已关闭图片压缩功能
         setSilentDetect,
         detectUnusedFiles,
         unsetSilentDetect,

package.json

@@ -6,16 +6,18 @@
   "dependencies": {
     "crypto": "^1.0.1",
     "geoip-lite": "^1.4.10",
+    "imagemin-mozjpeg": "^10.0.0",
     "ua-parser-js": "^2.0.3"
   },
   "devDependencies": {
+    "@babel/code-frame": "^7.27.1",
     "@babel/core": "^7.26.10",
     "@babel/preset-env": "^7.26.9",
     "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0",
     "gulp-clean": "^0.4.0",
-    "gulp-copy": "^1.1.0",
-    "gulp-htmlmin": "^4.0.0",
+    "gulp-copy": "^4.0.1",
+    "gulp-htmlmin": "^5.0.1",
     "gulp-if": "^3.0.0",
     "gulp-imagemin": "^7.1.0",
     "gulp-jsonminify": "^1.1.0",
@@ -25,7 +27,9 @@
     "nodemon": "^3.1.10",
     "pretty-bytes": "^4.0.2",
     "run-sequence": "^2.2.1",
-    "shelljs": "^0.8.1"
+    "shelljs": "^0.8.1",
+    "svgo": "^2.8.0",
+    "uuid": "^9.0.0"
   },
   "scripts": {
     "watch": "gulp watch",
@@ -35,7 +39,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/zxlie/FeOnline.git"
+    "url": "git+https://github.com/zxlie/FeHelper.git"
   },
   "keywords": [
     "fehelper"
@@ -43,7 +47,7 @@
   "author": "zhaoxianlie",
   "license": "ISC",
   "bugs": {
-    "url": "https://www.baidufe.com/fehelper/feedback.html"
+    "url": "https://github.com/zxlie/FeHelper/issues"
   },
-  "homepage": "https://www.baidufe.com/fehelper"
+  "homepage": "https://github.com/zxlie/FeHelper"
 }

website/README.md

@@ -0,0 +1,108 @@
+# FeHelper 官网
+
+这是 FeHelper Chrome/Edge 浏览器扩展的官方网站。
+
+## 项目特点
+
+- 🎨 **现代化设计**: 采用渐变色彩和流畅动画，展现"重磅发布"的视觉效果
+- 📱 **完全响应式**: 适配各种设备屏幕，提供一致的用户体验
+- ⚡ **性能优化**: 使用系统字体，无外部字体依赖，加载速度极快
+- 🎯 **功能直观**: 通过HTML+CSS可视化展示各工具功能，无需截图
+- 🔗 **实时数据**: 自动获取GitHub的stars和forks数据
+- 🌏 **国内友好**: 所有资源均可在国内环境正常访问
+
+## 技术实现
+
+### 字体策略
+- **系统字体栈**: 使用高质量的系统字体，包含中英文完整支持
+- **字体回退**: `-apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif`
+- **无外部依赖**: 完全避免Google Fonts等外部字体服务，确保国内访问稳定
+
+### 可视化演示
+- **JSON工具**: 代码高亮显示
+- **差异对比**: 颜色标识增删改
+- **代码压缩**: 动态显示压缩率
+- **二维码**: CSS绘制二维码图案
+- **API调试**: 模拟请求响应状态
+
+### 交互效果
+- **标签切换**: 工具分类展示
+- **滚动动画**: Intersection Observer API
+- **悬停效果**: 3D变换和阴影
+- **视差滚动**: 背景图案动画
+- **计数动画**: GitHub数据动效
+
+## 文件结构
+
+```
+website/
+├── index.html              # 主页面 (498行)
+├── css/
+│   └── style.css          # 样式文件 (1267行)
+├── js/
+│   └── script.js          # 交互脚本 (394行)
+├── img/                    # 图标资源
+│   ├── favicon.ico         # 网站图标
+│   ├── fe-16.png          # 16x16 FeHelper图标
+│   ├── fe-48.png          # 48x48 FeHelper图标
+│   └── fe-128.png         # 128x128 FeHelper图标
+└── README.md              # 项目说明
+```
+
+## 本地开发
+
+1. 克隆项目到本地
+2. 进入website目录
+3. 启动本地服务器：
+   ```bash
+   python3 -m http.server 8000
+   ```
+4. 打开浏览器访问 `http://localhost:8000`
+
+## 浏览器支持
+
+- Chrome 60+
+- Edge 79+
+- Firefox 60+
+- Safari 12+
+
+## 部署
+
+可以部署到任何静态网站托管服务：
+- GitHub Pages
+- Netlify
+- Vercel
+- 腾讯云静态网站托管
+- 阿里云OSS静态网站
+
+## 更新记录
+
+### v2.2 (2024-12-19)
+- 📊 更新真实数据：GitHub 5.3K stars, 1.3K forks, Chrome Store 200K+ 用户
+- 🦊 新增Firefox浏览器支持和下载选项
+- 📖 添加"关于FeHelper"时间线，展示13年发展历程
+- 🔗 更新所有浏览器商店链接和评分数据
+- ✨ 优化GitHub数据获取逻辑，提供真实默认值
+
+### v2.1 (2024-12-19)
+- 🎨 添加FeHelper官方图标到网站
+- 🔖 更新favicon和多尺寸图标
+- ✨ 替换导航栏、页脚、徽章等位置的图标
+- 🚀 增强品牌视觉识别度
+
+### v2.0 (2024-12-19)
+- ✅ 移除Google Fonts依赖，改用系统字体
+- ✅ 优化国内访问体验
+- ✅ 提升页面加载速度
+- ✅ 增强字体显示兼容性
+
+### v1.0 (2024-12-19)
+- 🎉 初始版本发布
+- 🎨 现代化渐变设计
+- 📱 响应式布局适配
+- 🔧 功能工具可视化展示
+- 📊 GitHub数据集成
+
+## 许可证
+
+MIT License - 详见 LICENSE 文件 

website/css/style.css

@@ -0,0 +1,1575 @@
+/* Reset and Base Styles */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:root {
+    --primary-color: #3b82f6;
+    --primary-dark: #2563eb;
+    --secondary-color: #8b5cf6;
+    --accent-color: #06b6d4;
+    --success-color: #10b981;
+    --warning-color: #f59e0b;
+    --error-color: #ef4444;
+    --text-primary: #1f2937;
+    --text-secondary: #6b7280;
+    --text-light: #9ca3af;
+    --bg-primary: #ffffff;
+    --bg-secondary: #f8fafc;
+    --bg-dark: #0f172a;
+    --border-color: #e5e7eb;
+    --border-light: #f3f4f6;
+    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+    --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+    --gradient-secondary: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
+    --gradient-accent: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
+}
+
+html {
+    scroll-behavior: smooth;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    line-height: 1.6;
+    color: var(--text-primary);
+    background-color: var(--bg-primary);
+    overflow-x: hidden;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+/* Navigation */
+.navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    background: rgba(255, 255, 255, 0.95);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--border-light);
+    z-index: 1000;
+    transition: all 0.3s ease;
+}
+
+.nav-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 70px;
+}
+
+.nav-logo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--primary-color);
+}
+
+.nav-logo .logo-icon {
+    width: 28px;
+    height: 28px;
+    object-fit: contain;
+}
+
+.nav-menu {
+    display: flex;
+    list-style: none;
+    gap: 32px;
+    align-items: center;
+}
+
+.nav-menu a {
+    text-decoration: none;
+    color: var(--text-primary);
+    font-weight: 500;
+    transition: color 0.3s ease;
+    position: relative;
+}
+
+.nav-menu a:hover {
+    color: var(--primary-color);
+}
+
+.nav-menu a::after {
+    content: '';
+    position: absolute;
+    bottom: -5px;
+    left: 0;
+    width: 0;
+    height: 2px;
+    background: var(--gradient-primary);
+    transition: width 0.3s ease;
+}
+
+.nav-menu a:hover::after {
+    width: 100%;
+}
+
+.github-link {
+    background: var(--gradient-primary);
+    color: white !important;
+    padding: 8px 16px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 600;
+    transition: transform 0.2s ease;
+}
+
+.github-link:hover {
+    transform: translateY(-2px);
+    color: white !important;
+}
+
+.github-link::after {
+    display: none;
+}
+
+.nav-toggle {
+    display: none;
+    flex-direction: column;
+    cursor: pointer;
+    gap: 4px;
+}
+
+.nav-toggle span {
+    width: 25px;
+    height: 3px;
+    background: var(--text-primary);
+    transition: all 0.3s ease;
+}
+
+/* Hero Section */
+.hero {
+    position: relative;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    padding: 120px 0 80px;
+    overflow: hidden;
+    background: linear-gradient(135deg, #f0f9ff 0%, #faf5ff 50%, #f0f9ff 100%);
+}
+
+.hero-background {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+}
+
+.gradient-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, #f0f9ff 0%, #faf5ff 50%, #f0f9ff 100%);
+}
+
+.hero-pattern {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: 
+        radial-gradient(circle at 25% 25%, rgba(59, 130, 246, 0.1) 0%, transparent 50%),
+        radial-gradient(circle at 75% 75%, rgba(139, 92, 246, 0.1) 0%, transparent 50%);
+    animation: float 20s ease-in-out infinite;
+}
+
+@keyframes float {
+    0%, 100% { transform: translateY(0px); }
+    50% { transform: translateY(-20px); }
+}
+
+.hero .container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 80px;
+    align-items: center;
+}
+
+.hero-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: rgba(59, 130, 246, 0.1);
+    color: var(--primary-color);
+    padding: 12px 20px;
+    border-radius: 30px;
+    font-weight: 600;
+    font-size: 14px;
+    margin-bottom: 24px;
+    border: 1px solid rgba(59, 130, 246, 0.2);
+    animation: pulse 2s infinite;
+}
+
+.badge-icon {
+    width: 16px;
+    height: 16px;
+    object-fit: contain;
+}
+
+@keyframes pulse {
+    0%, 100% { transform: scale(1); }
+    50% { transform: scale(1.05); }
+}
+
+.hero-title {
+    font-size: 56px;
+    font-weight: 800;
+    line-height: 1.1;
+    margin-bottom: 24px;
+    letter-spacing: -0.02em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.gradient-text {
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.hero-subtitle {
+    font-size: 20px;
+    color: var(--text-secondary);
+    margin-bottom: 40px;
+    line-height: 1.8;
+    max-width: 700px;
+}
+
+.subtitle-main {
+    display: block;
+    margin-bottom: 10px;
+}
+
+.subtitle-main .highlight {
+    color: #6366f1;
+    font-weight: 600;
+}
+
+.subtitle-features {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 16px;
+    font-size: 15px;
+    margin-top: 4px;
+}
+
+.subtitle-features .feature {
+    background: #f3f4f6;
+    border-radius: 16px;
+    padding: 2px 14px;
+    color: #6366f1;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    gap: 4px;
+}
+
+.hero-stats {
+    display: flex;
+    gap: 40px;
+    margin-bottom: 40px;
+}
+
+.stat-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+}
+
+.stat-item i {
+    font-size: 24px;
+    color: var(--primary-color);
+}
+
+.stat-number {
+    font-size: 24px;
+    font-weight: 700;
+    color: var(--text-primary);
+}
+
+.stat-label {
+    font-size: 14px;
+    color: var(--text-secondary);
+    text-align: center;
+}
+
+.hero-buttons {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+}
+
+.btn-primary, .btn-secondary {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    padding: 16px 32px;
+    border-radius: 12px;
+    font-weight: 600;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    font-size: 16px;
+}
+
+.btn-primary {
+    background: var(--gradient-primary);
+    color: white;
+    box-shadow: var(--shadow-lg);
+}
+
+.btn-primary:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-xl);
+}
+
+.btn-secondary {
+    background: white;
+    color: var(--text-primary);
+    border: 2px solid var(--border-color);
+}
+
+.btn-secondary:hover {
+    border-color: var(--primary-color);
+    color: var(--primary-color);
+    transform: translateY(-2px);
+}
+
+.hero-visual {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.browser-mockup {
+    background: white;
+    border-radius: 16px;
+    box-shadow: var(--shadow-xl);
+    overflow: hidden;
+    width: 100%;
+    max-width: 500px;
+    transform: perspective(1000px) rotateY(-5deg) rotateX(5deg);
+    transition: transform 0.3s ease;
+}
+
+.browser-mockup:hover {
+    transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
+}
+
+.browser-header {
+    background: #f8fafc;
+    padding: 16px 20px;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    border-bottom: 1px solid var(--border-color);
+}
+
+.browser-controls {
+    display: flex;
+    gap: 8px;
+}
+
+.browser-controls span {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #ef4444;
+}
+
+.browser-controls span:nth-child(2) {
+    background: #f59e0b;
+}
+
+.browser-controls span:nth-child(3) {
+    background: #10b981;
+}
+
+.browser-url {
+    flex: 1;
+    background: white;
+    padding: 8px 16px;
+    border-radius: 8px;
+    color: var(--text-secondary);
+    font-size: 14px;
+    border: 1px solid var(--border-color);
+}
+
+.extension-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.extension-logo {
+    width: 16px;
+    height: 16px;
+    object-fit: contain;
+}
+
+.browser-content {
+    padding: 32px;
+}
+
+.tool-grid-demo {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+}
+
+.tool-card-demo {
+    background: var(--bg-secondary);
+    padding: 24px 16px;
+    border-radius: 12px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    transition: all 0.3s ease;
+    border: 1px solid var(--border-light);
+}
+
+.tool-card-demo:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-md);
+}
+
+.tool-card-demo i {
+    font-size: 24px;
+    color: var(--primary-color);
+}
+
+.tool-card-demo.json i { color: #059669; }
+.tool-card-demo.qr i { color: #7c3aed; }
+.tool-card-demo.encode i { color: #dc2626; }
+.tool-card-demo.postman i { color: #ea580c; }
+
+.tool-card-demo span {
+    font-weight: 600;
+    font-size: 14px;
+    color: var(--text-primary);
+}
+
+/* Features Section */
+.features {
+    padding: 120px 0;
+    background: var(--bg-secondary);
+}
+
+.section-header {
+    text-align: center;
+    margin-bottom: 80px;
+}
+
+.section-header h2 {
+    font-size: 40px;
+    font-weight: 700;
+    margin-bottom: 16px;
+    color: var(--text-primary);
+}
+
+.section-header p {
+    font-size: 18px;
+    color: var(--text-secondary);
+    max-width: 600px;
+    margin: 0 auto;
+}
+
+.features-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 40px;
+}
+
+.feature-card {
+    background: white;
+    padding: 40px 32px;
+    border-radius: 16px;
+    text-align: center;
+    box-shadow: var(--shadow-sm);
+    border: 1px solid var(--border-light);
+    transition: all 0.3s ease;
+}
+
+.feature-card:hover {
+    transform: translateY(-8px);
+    box-shadow: var(--shadow-xl);
+}
+
+.feature-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 80px;
+    height: 80px;
+    background: var(--gradient-primary);
+    border-radius: 20px;
+    margin-bottom: 24px;
+}
+
+.feature-icon i {
+    font-size: 32px;
+    color: white;
+}
+
+.feature-card h3 {
+    font-size: 24px;
+    font-weight: 700;
+    margin-bottom: 8px;
+    color: var(--text-primary);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.feature-sub {
+    font-size: 15px;
+    color: #6366f1;
+    font-weight: 600;
+    margin-top: 2px;
+    letter-spacing: 0.5px;
+}
+
+.feature-card p {
+    color: var(--text-secondary);
+    line-height: 1.8;
+    font-size: 16px;
+    margin-top: 8px;
+}
+
+/* Tools Section */
+.tools {
+    padding: 120px 0;
+    background: var(--bg-primary);
+}
+
+.category-tabs {
+    display: flex;
+    justify-content: center;
+    gap: 8px;
+    margin-bottom: 60px;
+    flex-wrap: wrap;
+}
+
+.tab-btn {
+    padding: 12px 24px;
+    border: 2px solid var(--border-color);
+    background: white;
+    color: var(--text-secondary);
+    border-radius: 30px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-weight: 500;
+    font-size: 14px;
+}
+
+.tab-btn:hover, .tab-btn.active {
+    background: var(--gradient-primary);
+    color: white;
+    border-color: transparent;
+    transform: translateY(-2px);
+}
+
+.tools-grid {
+    display: none;
+    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
+    gap: 32px;
+}
+
+.tools-grid.active {
+    display: grid;
+}
+
+.tool-card {
+    background: white;
+    border-radius: 16px;
+    padding: 32px;
+    box-shadow: var(--shadow-sm);
+    border: 1px solid var(--border-light);
+    transition: all 0.3s ease;
+}
+
+.tool-card:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+}
+
+.tool-icon {
+    width: 60px;
+    height: 60px;
+    font-size: 36px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 16px;
+    margin-right: 18px;
+    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+    color: #fff;
+    box-shadow: 0 2px 12px 0 rgba(59,130,246,0.10);
+    transition: all 0.3s;
+}
+
+.tools-grid .tool-card h3 {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 10px;
+    color: var(--text-primary);
+}
+
+.tools-grid .tool-icon span {
+    font-size: 36px;
+    line-height: 1;
+    font-family: inherit;
+}
+
+.tools-grid .tool-card {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.json-icon { background: linear-gradient(135deg, #059669, #10b981); }
+.diff-icon { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }
+.beautify-icon { background: linear-gradient(135deg, #3b82f6, #06b6d4); }
+.compress-icon { background: linear-gradient(135deg, #f59e0b, #ef4444); }
+.encode-icon { background: linear-gradient(135deg, #dc2626, #f87171); }
+.qr-icon { background: linear-gradient(135deg, #7c3aed, #a855f7); }
+.api-icon { background: linear-gradient(135deg, #ea580c, #fb923c); }
+.websocket-icon { background: linear-gradient(135deg, #0891b2, #06b6d4); }
+.timestamp-icon { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
+.password-icon { background: linear-gradient(135deg, #dc2626, #ef4444); }
+.color-icon { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
+.screenshot-icon { background: linear-gradient(135deg, #059669, #34d399); }
+
+.tool-icon i {
+    font-size: 24px;
+    color: white;
+}
+
+.tool-card p {
+    color: var(--text-secondary);
+    margin-bottom: 20px;
+    line-height: 1.6;
+}
+
+.tool-demo {
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    padding: 16px;
+    font-size: 14px;
+}
+
+.json-demo pre {
+    background: #1f2937;
+    color: #f3f4f6;
+    padding: 16px;
+    border-radius: 8px;
+    overflow-x: auto;
+}
+
+.json-demo code {
+    color: #34d399;
+}
+
+.diff-demo {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+    margin-bottom: 12px;
+}
+
+.diff-left, .diff-right {
+    text-align: center;
+    font-weight: 600;
+    color: var(--text-secondary);
+    padding: 8px;
+    background: white;
+    border-radius: 4px;
+}
+
+.diff-line {
+    padding: 4px 8px;
+    border-radius: 4px;
+    font-family: monospace;
+    margin: 4px 0;
+}
+
+.diff-line.added {
+    background: rgba(16, 185, 129, 0.1);
+    color: #059669;
+}
+
+.diff-line.removed {
+    background: rgba(239, 68, 68, 0.1);
+    color: #dc2626;
+}
+
+.code-demo {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+}
+
+.code-before, .code-after {
+    flex: 1;
+    text-align: center;
+    padding: 12px;
+    background: white;
+    border-radius: 6px;
+    font-weight: 500;
+}
+
+.code-demo i {
+    color: var(--primary-color);
+}
+
+.compress-demo {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    text-align: center;
+}
+
+.size-before, .size-after {
+    background: white;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-weight: 600;
+    font-size: 16px;
+}
+
+.size-before {
+    color: #dc2626;
+}
+
+.size-after {
+    color: #059669;
+}
+
+.compress-ratio {
+    font-size: 12px;
+    color: var(--primary-color);
+    font-weight: 600;
+}
+
+.encode-demo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.encode-input, .encode-output {
+    flex: 1;
+    background: white;
+    padding: 12px;
+    border-radius: 6px;
+    text-align: center;
+    font-family: monospace;
+    font-size: 12px;
+}
+
+.encode-arrows {
+    color: var(--primary-color);
+}
+
+.qr-demo {
+    display: flex;
+    justify-content: center;
+}
+
+.qr-code {
+    width: 60px;
+    height: 60px;
+    background: white;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.qr-pattern {
+    width: 40px;
+    height: 40px;
+    background: 
+        linear-gradient(90deg, #000 0%, #000 20%, transparent 20%, transparent 40%, #000 40%, #000 60%, transparent 60%, transparent 80%, #000 80%),
+        linear-gradient(0deg, #000 0%, #000 20%, transparent 20%, transparent 40%, #000 40%, #000 60%, transparent 60%, transparent 80%, #000 80%);
+    background-size: 10px 10px;
+}
+
+.api-demo {
+    text-align: center;
+}
+
+.request-line {
+    background: white;
+    padding: 8px 12px;
+    border-radius: 6px;
+    font-family: monospace;
+    font-weight: 600;
+    margin-bottom: 8px;
+}
+
+.response-status {
+    padding: 6px 12px;
+    border-radius: 6px;
+    font-weight: 600;
+    font-size: 12px;
+}
+
+.response-status.success {
+    background: rgba(16, 185, 129, 0.1);
+    color: #059669;
+}
+
+.websocket-demo {
+    text-align: center;
+}
+
+.ws-status {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: white;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-weight: 600;
+    font-size: 12px;
+}
+
+.ws-status.connected {
+    color: #059669;
+}
+
+.ws-status.connected i {
+    color: #10b981;
+    animation: pulse-dot 2s infinite;
+}
+
+@keyframes pulse-dot {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.5; }
+}
+
+/* About Section */
+.about {
+    padding: 120px 0;
+    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+}
+
+.about-content {
+    display: grid;
+    grid-template-columns: 3fr 2fr;;
+    gap: 80px;
+    align-items: start;
+    margin-top: 60px;
+}
+
+.timeline-item {
+    display: flex;
+    gap: 32px;
+    margin-bottom: 48px;
+    position: relative;
+}
+
+.timeline-item:not(:last-child)::after {
+    content: '';
+    position: absolute;
+    left: 28px;
+    top: 60px;
+    width: 2px;
+    height: calc(100% + 8px);
+    background: linear-gradient(180deg, var(--primary-color), var(--secondary-color));
+}
+
+.timeline-year {
+    background: var(--gradient-primary);
+    color: white;
+    width: 56px;
+    height: 56px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+    font-size: 14px;
+    flex-shrink: 0;
+    box-shadow: var(--shadow-lg);
+}
+
+.timeline-content h3 {
+    font-size: 20px;
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: var(--text-primary);
+}
+
+.timeline-content p {
+    color: var(--text-secondary);
+    line-height: 1.6;
+}
+
+.about-stats {
+    display: flex;
+    flex-direction: column;
+    gap: 32px;
+    background: white;
+    padding: 40px 32px;
+    border-radius: 16px;
+    box-shadow: var(--shadow-lg);
+    height: fit-content;
+}
+
+.big-stat {
+    text-align: center;
+    padding: 16px 0;
+    border-bottom: 1px solid var(--border-light);
+}
+
+.big-stat:last-child {
+    border-bottom: none;
+}
+
+.big-number {
+    display: block;
+    font-size: 36px;
+    font-weight: 800;
+    background: var(--gradient-primary);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    margin-bottom: 8px;
+}
+
+.big-label {
+    display: block;
+    font-size: 14px;
+    color: var(--text-secondary);
+    font-weight: 500;
+}
+
+/* Browser Support */
+.browser-support {
+    padding: 120px 0;
+    background: var(--bg-secondary);
+}
+
+.browsers-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 32px;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.browser-card {
+    background: white;
+    padding: 40px 32px;
+    border-radius: 16px;
+    text-align: center;
+    box-shadow: var(--shadow-sm);
+    border: 1px solid var(--border-light);
+    transition: all 0.3s ease;
+}
+
+.browser-card:hover {
+    transform: translateY(-8px);
+    box-shadow: var(--shadow-xl);
+}
+
+.browser-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 80px;
+    height: 80px;
+    border-radius: 20px;
+    margin-bottom: 24px;
+}
+
+.browser-card.chrome .browser-icon {
+    background: linear-gradient(135deg, #4285f4, #34a853);
+}
+
+.browser-card.firefox .browser-icon {
+    background: linear-gradient(135deg, #ff6611, #ff9500);
+}
+
+.browser-card.edge .browser-icon {
+    background: linear-gradient(135deg, #0078d4, #00bcf2);
+}
+
+.browser-icon i {
+    font-size: 32px;
+    color: white;
+}
+
+.browser-card h3 {
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: var(--text-primary);
+}
+
+.browser-card > p {
+    color: var(--text-secondary);
+    margin-bottom: 20px;
+}
+
+.browser-stats {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 24px;
+    padding: 16px;
+    background: var(--bg-secondary);
+    border-radius: 8px;
+}
+
+.rating {
+    color: #f59e0b;
+    font-size: 14px;
+}
+
+.users {
+    color: var(--text-secondary);
+    font-size: 14px;
+    font-weight: 500;
+}
+
+.browser-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    background: var(--gradient-primary);
+    color: white;
+    padding: 12px 24px;
+    border-radius: 8px;
+    text-decoration: none;
+    font-weight: 600;
+    transition: all 0.3s ease;
+}
+
+.browser-link:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+}
+
+/* Download Section */
+.download {
+    padding: 120px 0;
+    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+    color: white;
+}
+
+.download-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 80px;
+    align-items: center;
+}
+
+.download-info h2 {
+    font-size: 40px;
+    font-weight: 700;
+    margin-bottom: 16px;
+}
+
+.download-info p {
+    font-size: 18px;
+    color: rgba(255, 255, 255, 0.8);
+    margin-bottom: 32px;
+}
+
+.download-features {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.feature {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.feature i {
+    color: #10b981;
+    font-size: 16px;
+}
+
+.download-buttons {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.download-btn {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    background: white;
+    color: var(--text-primary);
+    padding: 24px;
+    border-radius: 12px;
+    text-decoration: none;
+    transition: all 0.3s ease;
+    box-shadow: var(--shadow-lg);
+}
+
+.download-btn:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-xl);
+}
+
+.btn-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 50px;
+    height: 50px;
+    border-radius: 12px;
+}
+
+.chrome-btn .btn-icon {
+    background: linear-gradient(135deg, #4285f4, #34a853);
+}
+
+.firefox-btn .btn-icon {
+    background: linear-gradient(135deg, #ff6611, #ff9500);
+}
+
+.edge-btn .btn-icon {
+    background: linear-gradient(135deg, #0078d4, #00bcf2);
+}
+
+.github-btn .btn-icon {
+    background: linear-gradient(135deg, #24292e, #586069);
+}
+
+.btn-icon i {
+    font-size: 24px;
+    color: white;
+}
+
+.btn-text {
+    flex: 1;
+    text-align: left;
+}
+
+.btn-title {
+    display: block;
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 4px;
+}
+
+.btn-subtitle {
+    display: block;
+    font-size: 14px;
+    color: var(--text-secondary);
+}
+
+.btn-arrow {
+    font-size: 18px;
+    color: var(--text-light);
+    transition: transform 0.3s ease;
+}
+
+.download-btn:hover .btn-arrow {
+    transform: translateX(4px);
+}
+
+/* Footer */
+.footer {
+    background: var(--bg-dark);
+    color: white;
+    padding: 80px 0 40px;
+}
+
+.footer-content {
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 80px;
+    margin-bottom: 40px;
+}
+
+.footer-logo {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 24px;
+    font-weight: 700;
+    margin-bottom: 16px;
+}
+
+.footer-logo .logo-icon {
+    width: 28px;
+    height: 28px;
+    object-fit: contain;
+}
+
+.footer-main p {
+    color: rgba(255, 255, 255, 0.7);
+    margin-bottom: 24px;
+    line-height: 1.7;
+}
+
+.social-links {
+    display: flex;
+    gap: 16px;
+}
+
+.social-links a {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    color: white;
+    text-decoration: none;
+    transition: all 0.3s ease;
+}
+
+.social-links a:hover {
+    background: var(--primary-color);
+    transform: translateY(-2px);
+}
+
+.footer-links {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 40px;
+}
+
+.link-group h4 {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 16px;
+    color: white;
+}
+
+.link-group a {
+    display: block;
+    color: rgba(255, 255, 255, 0.7);
+    text-decoration: none;
+    margin-bottom: 8px;
+    transition: color 0.3s ease;
+}
+
+.link-group a:hover {
+    color: var(--primary-color);
+}
+
+.footer-bottom {
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    padding-top: 40px;
+    text-align: center;
+    color: rgba(255, 255, 255, 0.5);
+}
+
+.footer-bottom p {
+    margin-bottom: 8px;
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+    .hero .container {
+        grid-template-columns: 1fr;
+        gap: 60px;
+        text-align: center;
+    }
+    
+    .hero-title {
+        font-size: 48px;
+    }
+    
+    .about-content {
+        grid-template-columns: 1fr;
+        gap: 60px;
+    }
+    
+    .download-content {
+        grid-template-columns: 1fr;
+        gap: 60px;
+        text-align: center;
+    }
+    
+    .footer-content {
+        grid-template-columns: 1fr;
+        gap: 60px;
+        text-align: center;
+    }
+}
+
+@media (max-width: 768px) {
+    .nav-menu {
+        display: none;
+    }
+    
+    .nav-toggle {
+        display: flex;
+    }
+    
+    .hero-title {
+        font-size: 28px;
+        white-space: normal;
+    }
+    
+    .hero-subtitle {
+        font-size: 16px;
+        max-width: 100%;
+    }
+    
+    .subtitle-features {
+        gap: 8px;
+        font-size: 13px;
+    }
+    
+    .hero-stats {
+        flex-direction: column;
+        gap: 20px;
+    }
+    
+    .hero-buttons {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    
+    .section-header h2 {
+        font-size: 32px;
+    }
+    
+    .features-grid {
+        grid-template-columns: 1fr;
+        gap: 32px;
+    }
+    
+    .tools-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .category-tabs {
+        flex-direction: column;
+        align-items: center;
+    }
+    
+    .browsers-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .footer-links {
+        grid-template-columns: 1fr;
+        gap: 32px;
+    }
+    
+    .container {
+        padding: 0 16px;
+    }
+    
+    .hero {
+        padding: 100px 0 60px;
+    }
+    
+    .features,
+    .tools,
+    .browser-support,
+    .download {
+        padding: 80px 0;
+    }
+    
+    .footer {
+        padding: 60px 0 32px;
+    }
+}
+
+@media (max-width: 480px) {
+    .hero-title {
+        font-size: 28px;
+    }
+    
+    .hero-subtitle {
+        font-size: 16px;
+    }
+    
+    .section-header h2 {
+        font-size: 28px;
+    }
+    
+    .btn-primary,
+    .btn-secondary {
+        padding: 12px 24px;
+        font-size: 14px;
+    }
+    
+    .download-btn {
+        padding: 16px;
+    }
+    
+    .btn-title {
+        font-size: 16px;
+    }
+    
+    .btn-subtitle {
+        font-size: 12px;
+    }
+}
+
+/* Loading Animation */
+.loading {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    border-top-color: white;
+    animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+}
+
+/* Smooth Scrolling for iOS */
+@supports (-webkit-overflow-scrolling: touch) {
+    * {
+        -webkit-overflow-scrolling: touch;
+    }
+}
+
+.pro-badges {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 18px 24px;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 24px;
+}
+
+.pro-badges img {
+    border-radius: 12px;
+    box-shadow: 0 2px 12px 0 rgba(59,130,246,0.08);
+    transition: transform 0.18s cubic-bezier(.4,0,.2,1), box-shadow 0.18s;
+    height: 36px;
+    background: white;
+}
+
+.pro-badges img:hover {
+    transform: scale(1.07) translateY(-2px);
+    box-shadow: 0 6px 24px 0 rgba(59,130,246,0.18);
+}
+
+@media (max-width: 600px) {
+    .pro-badges img { height: 28px; }
+    .pro-badges { gap: 10px 8px; }
+}
+
+.tool-preview {
+    padding: 80px 0;
+    background: var(--bg-primary);
+}
+.preview-images {
+    display: flex;
+    gap: 32px;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-top: 32px;
+}
+.preview-item {
+    background: white;
+    border-radius: 16px;
+    box-shadow: 0 4px 24px 0 rgba(59,130,246,0.08);
+    overflow: hidden;
+    width: 320px;
+    max-width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+.preview-item img {
+    width: 100%;
+    display: block;
+    border-bottom: 1px solid #f3f4f6;
+    transition: transform 0.3s cubic-bezier(.4,0,.2,1), box-shadow 0.3s;
+    cursor: pointer;
+}
+.preview-item img:hover {
+    transform: scale(1.06);
+    box-shadow: 0 8px 32px 0 rgba(59,130,246,0.18);
+    z-index: 2;
+}
+.preview-caption {
+    padding: 16px 0;
+    font-size: 16px;
+    color: var(--text-secondary);
+    text-align: center;
+}
+@media (max-width: 900px) {
+    .preview-images { flex-direction: column; gap: 24px; align-items: center; }
+    .preview-item { width: 90%; }
+}
+/* 放大查看弹窗样式 */
+.img-modal {
+    position: fixed;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background: rgba(0,0,0,0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+    animation: fadeIn 0.2s;
+}
+.img-modal img {
+    max-width: 90vw;
+    max-height: 90vh;
+    border-radius: 16px;
+    box-shadow: 0 8px 32px 0 rgba(59,130,246,0.25);
+    background: white;
+}
+.img-modal-close {
+    position: absolute;
+    top: 32px;
+    right: 48px;
+    font-size: 40px;
+    color: #fff;
+    cursor: pointer;
+    z-index: 10000;
+    transition: color 0.2s;
+}
+.img-modal-close:hover {
+    color: #f59e0b;
+}
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+} 

website/index.html

@@ -0,0 +1,594 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>FeHelper - 前端开发者的超级助手</title>
+    <meta name="description" content="FeHelper是一个功能强大的浏览器扩展，专为前端开发者设计，集成了多种实用工具，支持Chrome和Edge浏览器。">
+    
+    <!-- Favicon -->
+    <link rel="icon" type="image/x-icon" href="img/favicon.ico">
+    <link rel="icon" type="image/png" sizes="16x16" href="img/fe-16.png">
+    <link rel="icon" type="image/png" sizes="48x48" href="img/fe-48.png">
+    <link rel="icon" type="image/png" sizes="128x128" href="img/fe-128.png">
+    <link rel="apple-touch-icon" sizes="128x128" href="img/fe-128.png">
+    
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="navbar">
+        <div class="nav-container">
+            <div class="nav-logo">
+                <img src="img/fe-48.png" alt="FeHelper Logo" class="logo-icon">
+                <span>FeHelper</span>
+            </div>
+            <ul class="nav-menu">
+                <li><a href="#features">功能特性</a></li>
+                <li><a href="#tools">工具箱</a></li>
+                <li><a href="#about">关于我们</a></li>
+                <li><a href="#download">立即下载</a></li>
+                <li><a href="https://github.com/zxlie/FeHelper" class="github-link" target="_blank">
+                    <i class="fab fa-github"></i> GitHub
+                </a></li>
+            </ul>
+            <div class="nav-toggle">
+                <span></span>
+                <span></span>
+                <span></span>
+            </div>
+        </div>
+    </nav>
+
+    <!-- Hero Section -->
+    <section class="hero">
+        <div class="hero-background">
+            <div class="gradient-bg"></div>
+            <div class="hero-pattern"></div>
+        </div>
+        <div class="container">
+            <div class="hero-content">
+                <h1 class="hero-title">
+                    前端开发者的 <span class="gradient-text">超级助手</span>
+                </h1>
+                <p class="hero-subtitle">
+                    <span class="subtitle-main">
+                        FeHelper是一个功能强大的 <span class="highlight">开源浏览器扩展</span>，专为前端开发者设计，集成了30多种实用工具，支持Chrome和Edge浏览器。
+                    </span>
+                </p>
+                <div class="badges-row pro-badges" style="margin: 32px 0 24px 0;">
+                    <a href="https://chrome.google.com/webstore/detail/pkgccpejnmalmdinmhkkfafefagiiiad" target="_blank">
+                        <img src="https://img.shields.io/chrome-web-store/v/pkgccpejnmalmdinmhkkfafefagiiiad?label=chrome%20web%20store&logo=googlechrome&color=3b82f6&style=for-the-badge" alt="Chrome Web Store Version">
+                    </a>
+                    <img src="https://img.shields.io/chrome-web-store/rating/pkgccpejnmalmdinmhkkfafefagiiiad?label=rating&logo=googlechrome&color=3b82f6&style=for-the-badge" alt="Chrome Web Store Rating">
+                    <img src="https://img.shields.io/chrome-web-store/users/pkgccpejnmalmdinmhkkfafefagiiiad?label=users&logo=googlechrome&color=3b82f6&style=for-the-badge" alt="Chrome Web Store Users">
+                    <a href="https://github.com/zxlie/FeHelper" target="_blank">
+                        <img src="https://img.shields.io/github/stars/zxlie/FeHelper?style=for-the-badge&color=8b5cf6&logo=github" alt="GitHub Stars">
+                        <img src="https://img.shields.io/github/forks/zxlie/FeHelper?style=for-the-badge&color=8b5cf6&logo=github" alt="GitHub Forks">
+                    </a>
+                </div>
+                <div class="hero-buttons">
+                    <a href="#download" class="btn-primary">
+                        <i class="fas fa-download"></i>
+                        立即安装
+                    </a>
+                    <a href="#features" class="btn-secondary">
+                        <i class="fas fa-play"></i>
+                        了解更多
+                    </a>
+                </div>
+            </div>
+            <div class="hero-visual">
+                <div class="browser-mockup">
+                    <div class="browser-header">
+                        <div class="browser-controls">
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                        </div>
+                        <div class="browser-url">fehelper.dev</div>
+                        <div class="extension-icon">
+                            <img src="img/fe-16.png" alt="FeHelper Extension" class="extension-logo">
+                        </div>
+                    </div>
+                    <div class="browser-content">
+                        <div class="tool-grid-demo">
+                            <div class="tool-card-demo json">
+                                <i class="fas fa-code"></i>
+                                <span>JSON</span>
+                            </div>
+                            <div class="tool-card-demo qr">
+                                <i class="fas fa-qrcode"></i>
+                                <span>二维码</span>
+                            </div>
+                            <div class="tool-card-demo encode">
+                                <i class="fas fa-key"></i>
+                                <span>编码</span>
+                            </div>
+                            <div class="tool-card-demo postman">
+                                <i class="fas fa-paper-plane"></i>
+                                <span>接口</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- 工具界面预览区 -->
+    <section class="tool-preview">
+      <div class="container">
+        <div class="section-header">
+          <h2>工具界面预览</h2>
+          <p>真实截图，所见即所得，体验极致流畅</p>
+        </div>
+        <div class="preview-images">
+          <div class="preview-item">
+            <img src="img/options.png" alt="FeHelper主界面" />
+            <div class="preview-caption">插件主界面</div>
+          </div>
+          <div class="preview-item">
+            <img src="img/jsonformat.png" alt="JSON美化工具界面" />
+            <div class="preview-caption">JSON美化工具</div>
+          </div>
+          <div class="preview-item">
+            <img src="img/qrcode.png" alt="二维码工具界面" />
+            <div class="preview-caption">二维码工具</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <!-- Features Section -->
+    <section id="features" class="features">
+        <div class="container">
+            <div class="section-header">
+                <h2>为什么选择 FeHelper？</h2>
+                <p>专为前端开发者打造的全能工具集</p>
+            </div>
+            <div class="features-grid">
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-bolt"></i>
+                    </div>
+                    <h3>超高性能 <span class="feature-sub">极速体验，极致流畅</span></h3>
+                    <p>基于 Manifest V3 构建，启动速度快，内存占用低，毫秒级响应，数十万开发者共同见证，真正不影响浏览器性能。</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-shield-alt"></i>
+                    </div>
+                    <h3>安全可靠 <span class="feature-sub">数据本地，隐私无忧</span></h3>
+                    <p>遵循最新安全标准，所有数据本地处理，绝不上传任何敏感信息，企业级安全保障，放心使用。</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fab fa-osi"></i>
+                    </div>
+                    <h3>完全开源 <span class="feature-sub">社区共建，持续进化</span></h3>
+                    <p>MIT 开源协议，代码透明，全球开发者共同维护，持续更新优化，欢迎每一位开发者参与共建。</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-tools"></i>
+                    </div>
+                    <h3>工具齐全 <span class="feature-sub">30+ 专业工具，一站集成</span></h3>
+                    <p>涵盖前端开发全流程，JSON、二维码、编码转换、接口调试、取色、截图、便签等，满足所有开发需求。</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-laptop-code"></i>
+                    </div>
+                    <h3>跨平台兼容 <span class="feature-sub">多端支持，随时随地</span></h3>
+                    <p>完美适配 Chrome、Edge、Firefox 等主流浏览器，支持多操作系统，开发体验无缝切换。</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">
+                        <i class="fas fa-magic"></i>
+                    </div>
+                    <h3>极致体验 <span class="feature-sub">细节打磨，所见即所得</span></h3>
+                    <p>现代化UI设计，动画流畅，交互友好，支持暗黑模式，助力高效开发每一天。</p>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Tools Section -->
+    <section id="tools" class="tools">
+        <div class="container">
+            <div class="section-header">
+                <h2>强大的工具集</h2>
+                <p>每一个工具都经过精心设计，只为提升您的开发效率</p>
+            </div>
+            <div class="tools-categories">
+                <div class="category-tabs">
+                    <button class="tab-btn active" data-category="dev">开发工具类</button>
+                    <button class="tab-btn" data-category="encode">编解码转换类</button>
+                    <button class="tab-btn" data-category="image">图像处理类</button>
+                    <button class="tab-btn" data-category="productivity">效率工具类</button>
+                    <button class="tab-btn" data-category="calculator">计算工具类</button>
+                    <button class="tab-btn" data-category="other">其他工具</button>
+                </div>
+
+                <!-- 开发工具类 -->
+                <div class="tools-grid active" data-category="dev">
+                    <div class="tool-card" data-category="dev">
+                        <h3><div class="tool-icon"><span>⒥</span></div>JSON美化工具</h3>
+                        <p>页面自动检测并格式化、手动格式化、乱码解码、排序、BigInt、编辑、下载、皮肤定制等</p>
+                        <div class="tool-demo"><div class="json-demo"><pre><code>{
+  "name": "FeHelper",
+  "version": "2.0",
+  "tools": ["JSON", "QR", "Encode"]
+}</code></pre></div></div>
+                    </div>
+                    <div class="tool-card" data-category="dev">
+                        <h3><div class="tool-icon"><span>☷</span></div>JSON比对工具</h3>
+                        <p>支持两个JSON内容的自动键值比较，并高亮显示差异点，同时也能判断JSON是否合法</p>
+                        <div class="tool-demo"><div class="diff-demo"><div class="diff-left">原始</div><div class="diff-right">修改后</div><div class="diff-line added">+ "new": "value"</div><div class="diff-line removed">- "old": "value"</div></div></div>
+                    </div>
+                    <div class="tool-card" data-category="dev">
+                        <h3><div class="tool-icon"><span>✡</span></div>代码美化工具</h3>
+                        <p>支持多语言的代码美化，包括 Javascript、CSS、HTML、XML、SQL，且会陆续支持更多格式</p>
+                        <div class="tool-demo"><div class="code-demo"><div class="code-before">压缩代码</div><span style="font-size:18px;">→</span><div class="code-after">格式化代码</div></div></div>
+                    </div>
+                    <div class="tool-card" data-category="dev">
+                        <h3><div class="tool-icon"><span>♯</span></div>代码压缩工具</h3>
+                        <p>Web开发用，提供简单的代码压缩功能，支持HTML、Javascript、CSS代码压缩</p>
+                        <div class="tool-demo"><div class="compress-demo"><div class="size-before">100KB</div><span style="font-size:18px;">→</span><div class="size-after">65KB</div><div class="compress-ratio">35% 压缩率</div></div></div>
+                    </div>
+                    <div class="tool-card" data-category="dev">
+                        <h3><div class="tool-icon"><span>☯</span></div>简易Postman</h3>
+                        <p>开发过程中的接口调试工具，支持GET/POST/HEAD请求方式，且支持JSON内容自动格式化</p>
+                        <div class="tool-demo"><div class="api-demo"><div class="request-line">POST /api/users</div><div class="response-status success">200 OK</div></div></div>
+                    </div>
+                    <div class="tool-card" data-category="dev">
+                        <h3><div class="tool-icon"><span>ⓦ</span></div>Websocket工具</h3>
+                        <p>支持对Websocket接口的抓包测试，包括ws服务的连接测试、消息发送测试、结果分析等</p>
+                        <div class="tool-demo"><div class="websocket-demo"><div class="ws-status connected"><span style="color:#10b981;font-size:16px;">●</span> 已连接</div></div></div>
+                    </div>
+                    <div class="tool-card" data-category="dev">
+                        <h3><div class="tool-icon"><span>✙</span></div>正则公式速查</h3>
+                        <p>支持 JavaScript / Python / PHP / Java 等语言的正则速查，包含验证类、提取类、替换类、格式化类、特殊字符类、编程相关等常用正则表达式</p>
+                    </div>
+                    <div class="tool-card" data-category="dev">
+                        <h3><div class="tool-icon"><span>Σ</span></div>网站性能优化</h3>
+                        <p>全面分析网页性能指标，包括核心Web指标(LCP/FID/CLS)、资源加载性能、内存使用、长任务监控等，并提供针对性的优化建议</p>
+                    </div>
+                </div>
+
+                <!-- 编解码转换类 -->
+                <div class="tools-grid" data-category="encode">
+                    <div class="tool-card" data-category="encode">
+                        <h3><div class="tool-icon"><span>♨</span></div>信息编码转换</h3>
+                        <p>支持多格式的信息编解码，如Unicode、UTF-8、UTF-16、URL、Base64、MD5、Hex、Gzip等</p>
+                        <div class="tool-demo"><div class="encode-demo"><div class="encode-input">Hello World</div><div class="encode-arrows"><span style="font-size:18px;">⇄</span></div><div class="encode-output">SGVsbG8gV29ybGQ=</div></div></div>
+                    </div>
+                    <div class="tool-card" data-category="encode">
+                        <h3><div class="tool-icon"><span>❖</span></div>进制转换工具</h3>
+                        <p>支持2进制到36进制数据之间的任意转换，比如：10进制转2进制，8进制转16进制，等等</p>
+                    </div>
+                    <div class="tool-card" data-category="encode">
+                        <h3><div class="tool-icon"><span>♖</span></div>时间(戳)转换</h3>
+                        <p>本地化时间与时间戳之间的相互转换，支持秒/毫秒、支持世界时区切换、各时区时钟展示等</p>
+                    </div>
+                    <div class="tool-card" data-category="encode">
+                        <h3><div class="tool-icon"><span>▶</span></div>颜色转换工具</h3>
+                        <p>支持HEX颜色到RGB格式的互转，比如HEX颜色「#43ad7f」转RGB后为「rgb(67, 173, 127)」</p>
+                    </div>
+                </div>
+
+                <!-- 图像处理类 -->
+                <div class="tools-grid" data-category="image">
+                    <div class="tool-card" data-category="image">
+                        <h3><div class="tool-icon"><span>▣</span></div>二维码/解码</h3>
+                        <p>支持自定义颜色和icon的二维码生成器，并且支持多种模式的二维码解码，包括截图后粘贴解码</p>
+                        <div class="tool-demo"><div class="qr-demo"><div class="qr-code"><div class="qr-pattern"></div></div></div></div>
+                    </div>
+                    <div class="tool-card" data-category="image">
+                        <h3><div class="tool-icon"><span>▤</span></div>图片转Base64</h3>
+                        <p>支持多种模式的图片转Base64格式，比如链接粘贴/截图粘贴等，也支持Base64数据逆转图片</p>
+                    </div>
+                    <div class="tool-card" data-category="image">
+                        <h3><div class="tool-icon"><span>⇲</span></div>SVG转为图片</h3>
+                        <p>支持SVG文件转换为PNG、JPG、WEBP等格式，可自定义输出尺寸，支持文件拖放和URL导入</p>
+                    </div>
+                    <div class="tool-card" data-category="image">
+                        <h3><div class="tool-icon"><span>📊</span></div>图表制作工具</h3>
+                        <p>快速制作各类数据可视化图表，支持柱状图、折线图、饼图等多种图表类型，可导出为图片格式</p>
+                        <div class="tool-demo"><div style="width:100%;height:40px;background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:6px;"></div></div>
+                    </div>
+                    <div class="tool-card" data-category="image">
+                        <h3><div class="tool-icon"><span>🖼️</span></div>海报快速生成</h3>
+                        <p>快速创建营销推广海报，支持朋友圈、小红书等多种模板，可自定义文字、图片和配色</p>
+                    </div>
+                    <div class="tool-card" data-category="image">
+                        <h3><div class="tool-icon"><span>✂</span></div>网页截屏工具</h3>
+                        <p>可对任意网页进行截屏，支持可视区域截屏、全网页滚动截屏，最终结果可预览后再保存</p>
+                    </div>
+                    <div class="tool-card" data-category="image">
+                        <h3><div class="tool-icon"><span>✑</span></div>页面取色工具</h3>
+                        <p>可直接在网页上针对任意元素进行色值采集，将光标移动到需要取色的位置，单击确定即可</p>
+                        <div class="tool-demo"><div style="width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#43ad7f,#f59e0b,#3b82f6);"></div></div>
+                    </div>
+                </div>
+
+                <!-- 效率工具类 -->
+                <div class="tools-grid" data-category="productivity">
+                    <div class="tool-card" data-category="productivity">
+                        <h3><div class="tool-icon"><span>֍</span></div>AI(智能助手)</h3>
+                        <p>由AI强力支撑的超智能对话工具，可以让它帮你写代码、改代码、做方案设计、查资料、做分析等</p>
+                    </div>
+                    <div class="tool-card" data-category="productivity">
+                        <h3><div class="tool-icon"><span>✐</span></div>我的便签笔记</h3>
+                        <p>方便快捷的浏览器便签笔记工具，支持创建目录对笔记进行分类管理，笔记支持一键导出/导入</p>
+                    </div>
+                    <div class="tool-card" data-category="productivity">
+                        <h3><div class="tool-icon"><span>ⓜ</span></div>Markdown转换</h3>
+                        <p>Markdown编写/预览工具，支持HTML片段直接转Markdown，支持将内容以PDF格式进行下载</p>
+                    </div>
+                    <div class="tool-card" data-category="productivity">
+                        <h3><div class="tool-icon"><span>♀</span></div>网页油猴工具</h3>
+                        <p>自行配置页面匹配规则、编写Hack脚本，实现网页Hack，如页面自动刷新、自动抢票等</p>
+                    </div>
+                </div>
+
+                <!-- 计算工具类 -->
+                <div class="tools-grid" data-category="calculator">
+                    <div class="tool-card" data-category="calculator">
+                        <h3><div class="tool-icon"><span>½</span></div>Crontab工具</h3>
+                        <p>一个简易的Crontab生成工具，支持随机生成Demo，编辑过程中，分时日月周会高亮提示</p>
+                    </div>
+                    <div class="tool-card" data-category="calculator">
+                        <h3><div class="tool-icon"><span>$</span></div>贷(还)款利率</h3>
+                        <p>贷款或还款利率的计算器，按月呈现还款计划；并支持按还款额反推贷款实际利率</p>
+                    </div>
+                    <div class="tool-card" data-category="calculator">
+                        <h3><div class="tool-icon"><span>♆</span></div>随机密码生成</h3>
+                        <p>将各种字符进行随机组合生成密码，可以由数字、大小写字母、特殊符号组成，支持指定长度</p>
+                    </div>
+                </div>
+
+                <!-- 其他工具 -->
+                <div class="tools-grid" data-category="other">
+                    <div class="tool-card" data-category="other">
+                        <h3><div class="tool-icon"><span>㉿</span></div>FH开发者工具</h3>
+                        <p>以开发平台的思想，FeHelper支持用户进行本地开发，将自己的插件功能集成进FH工具市场</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- About Section -->
+    <section class="about">
+        <div class="container">
+            <div class="section-header">
+                <h2>关于 FeHelper</h2>
+                <p>从2011年到现在，十多年专注前端开发工具</p>
+            </div>
+            <div class="about-content">
+                <div class="about-text">
+                    <div class="timeline-item">
+                        <div class="timeline-year">2011</div>
+                        <div class="timeline-content">
+                            <h3>项目启动</h3>
+                            <p>FeHelper 1.0版本在Google Chrome Webstore发布，开始服务前端开发者</p>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-year">2016</div>
+                        <div class="timeline-content">
+                            <h3>功能扩展</h3>
+                            <p>集成JSON美化、编码转换、二维码等核心工具，用户突破10万</p>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-year">2020</div>
+                        <div class="timeline-content">
+                            <h3>开源发布</h3>
+                            <p>项目在GitHub开源，支持社区贡献，增加Firefox和Edge支持</p>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-year">2024</div>
+                        <div class="timeline-content">
+                            <h3>全新升级</h3>
+                            <p>升级到Manifest V3，用户超过20万，GitHub Star超过5K</p>
+                        </div>
+                    </div>
+                    <div class="timeline-item">
+                        <div class="timeline-year">2025</div>
+                        <div class="timeline-content">
+                            <h3>UI与功能大改版</h3>
+                            <p>全新现代化渐变设计，极致响应式体验；所有工具可视化预览，交互动画全面升级；完全移除外部字体依赖，国内访问极速；支持Chrome/Edge/Firefox，开源社区持续壮大。</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Star趋势图替换原配图 -->
+                <div class="about-image" style="display:flex;justify-content:center;align-items:center;height:100%;min-height:320px;">
+                  <img src="https://api.star-history.com/svg?repos=zxlie/FeHelper&type=Date" alt="FeHelper GitHub Star趋势图" style="width:100%;max-width:480px;display:block;margin:0 auto;">
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Browser Support -->
+    <section class="browser-support">
+        <div class="container">
+            <div class="section-header">
+                <h2>跨浏览器支持</h2>
+                <p>在您喜爱的浏览器中享受一致的体验</p>
+            </div>
+            <div class="browsers-grid">
+                <div class="browser-card chrome">
+                    <div class="browser-icon">
+                        <i class="fab fa-chrome"></i>
+                    </div>
+                    <h3>Google Chrome</h3>
+                    <p>Chrome Web Store 官方发布</p>
+                    <div class="browser-stats">
+                        <span class="rating">★★★★☆ 4.5</span>
+                        <span class="users">200K+ 用户</span>
+                    </div>
+                    <a href="https://chrome.google.com/webstore/detail/pkgccpejnmalmdinmhkkfafefagiiiad" class="browser-link" target="_blank">
+                        <i class="fas fa-external-link-alt"></i>
+                        安装扩展
+                    </a>
+                </div>
+                <div class="browser-card firefox">
+                    <div class="browser-icon">
+                        <i class="fab fa-firefox"></i>
+                    </div>
+                    <h3>Mozilla Firefox</h3>
+                    <p>Firefox Add-ons 官方发布</p>
+                    <div class="browser-stats">
+                        <span class="rating">★★★★★ 4.6</span>
+                        <span class="users">30K+ 用户</span>
+                    </div>
+                    <a href="https://addons.mozilla.org/zh-CN/firefox/addon/web-fe-tool/" class="browser-link" target="_blank">
+                        <i class="fas fa-external-link-alt"></i>
+                        安装扩展
+                    </a>
+                </div>
+                <div class="browser-card edge">
+                    <div class="browser-icon">
+                        <i class="fab fa-edge"></i>
+                    </div>
+                    <h3>Microsoft Edge</h3>
+                    <p>Edge Add-ons 官方发布</p>
+                    <div class="browser-stats">
+                        <span class="rating">★★★★★ 4.8</span>
+                        <span class="users">50K+ 用户</span>
+                    </div>
+                    <a href="https://microsoftedge.microsoft.com/addons/detail/feolnkbgcbjmamimpfcnklggdcbgakhe" class="browser-link" target="_blank">
+                        <i class="fas fa-external-link-alt"></i>
+                        安装扩展
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Download Section -->
+    <section id="download" class="download">
+        <div class="container">
+            <div class="download-content">
+                <div class="download-info">
+                    <h2>立即体验 FeHelper</h2>
+                    <p>选择您的浏览器，开始高效的前端开发之旅</p>
+                    <div class="download-features">
+                        <div class="feature">
+                            <i class="fas fa-check"></i>
+                            <span>完全免费使用</span>
+                        </div>
+                        <div class="feature">
+                            <i class="fas fa-check"></i>
+                            <span>无需注册账号</span>
+                        </div>
+                        <div class="feature">
+                            <i class="fas fa-check"></i>
+                            <span>数据本地处理</span>
+                        </div>
+                        <div class="feature">
+                            <i class="fas fa-check"></i>
+                            <span>持续更新维护</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="download-buttons">
+                    <a href="https://chrome.google.com/webstore/detail/pkgccpejnmalmdinmhkkfafefagiiiad" class="download-btn chrome-btn" target="_blank">
+                        <div class="btn-icon">
+                            <i class="fab fa-chrome"></i>
+                        </div>
+                        <div class="btn-text">
+                            <span class="btn-title">Chrome 浏览器</span>
+                            <span class="btn-subtitle">从 Chrome Web Store 安装</span>
+                        </div>
+                        <i class="fas fa-arrow-right btn-arrow"></i>
+                    </a>
+                    <a href="https://addons.mozilla.org/zh-CN/firefox/addon/web-fe-tool/" class="download-btn firefox-btn" target="_blank">
+                        <div class="btn-icon">
+                            <i class="fab fa-firefox"></i>
+                        </div>
+                        <div class="btn-text">
+                            <span class="btn-title">Firefox 浏览器</span>
+                            <span class="btn-subtitle">从 Firefox Add-ons 安装</span>
+                        </div>
+                        <i class="fas fa-arrow-right btn-arrow"></i>
+                    </a>
+                    <a href="https://microsoftedge.microsoft.com/addons/detail/feolnkbgcbjmamimpfcnklggdcbgakhe" class="download-btn edge-btn" target="_blank">
+                        <div class="btn-icon">
+                            <i class="fab fa-edge"></i>
+                        </div>
+                        <div class="btn-text">
+                            <span class="btn-title">Edge 浏览器</span>
+                            <span class="btn-subtitle">从 Edge Add-ons 安装</span>
+                        </div>
+                        <i class="fas fa-arrow-right btn-arrow"></i>
+                    </a>
+                    <a href="https://github.com/zxlie/FeHelper" class="download-btn github-btn" target="_blank">
+                        <div class="btn-icon">
+                            <i class="fab fa-github"></i>
+                        </div>
+                        <div class="btn-text">
+                            <span class="btn-title">GitHub 源码</span>
+                            <span class="btn-subtitle">查看源码或本地构建</span>
+                        </div>
+                        <i class="fas fa-arrow-right btn-arrow"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </section>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <div class="footer-content">
+                <div class="footer-main">
+                                    <div class="footer-logo">
+                    <img src="img/fe-48.png" alt="FeHelper Logo" class="logo-icon">
+                    <span>FeHelper</span>
+                </div>
+                    <p>专为前端开发者打造的超级助手</p>
+                    <div class="social-links">
+                        <a href="https://github.com/zxlie/FeHelper" target="_blank">
+                            <i class="fab fa-github"></i>
+                        </a>
+                        <a href="https://www.baidufe.com/fehelper/feedback.html" target="_blank">
+                            <i class="fas fa-envelope"></i>
+                        </a>
+                    </div>
+                </div>
+                <div class="footer-links">
+                    <div class="link-group">
+                        <h4>产品</h4>
+                        <a href="#features">功能特性</a>
+                        <a href="#tools">工具箱</a>
+                        <a href="#download">下载安装</a>
+                    </div>
+                    <div class="link-group">
+                        <h4>开发者</h4>
+                        <a href="https://github.com/zxlie/FeHelper" target="_blank">GitHub</a>
+                        <a href="https://github.com/zxlie/FeHelper/issues" target="_blank">问题反馈</a>
+                        <a href="https://www.baidufe.com/fehelper/feedback.html" target="_blank">联系我们</a>
+                    </div>
+                    <div class="link-group">
+                        <h4>支持</h4>
+                        <a href="https://chrome.google.com/webstore/detail/pkgccpejnmalmdinmhkkfafefagiiiad" target="_blank">Chrome Store</a>
+                        <a href="https://microsoftedge.microsoft.com/addons/detail/feolnkbgcbjmamimpfcnklggdcbgakhe" target="_blank">Edge Add-ons</a>
+                    </div>
+                </div>
+            </div>
+            <div class="footer-bottom">
+                <p>&copy; 2024 FeHelper. Open source under MIT license.</p>
+                <p>Made with ❤️ for frontend developers</p>
+            </div>
+        </div>
+    </footer>
+
+    <script src="js/script.js"></script>
+</body>
+</html> 

website/js/script.js

@@ -0,0 +1,476 @@
+// FeHelper Website JavaScript
+
+// DOM Ready
+document.addEventListener('DOMContentLoaded', function() {
+    initNavigation();
+    initToolTabs();
+    initScrollAnimations();
+    initParallaxEffects();
+    fetchGitHubStats();
+    initSmoothScrolling();
+    initPreviewImageModal();
+});
+
+// Navigation functionality
+function initNavigation() {
+    const navbar = document.querySelector('.navbar');
+    const navToggle = document.querySelector('.nav-toggle');
+    const navMenu = document.querySelector('.nav-menu');
+
+    // Navbar scroll effect
+    window.addEventListener('scroll', () => {
+        if (window.scrollY > 50) {
+            navbar.style.background = 'rgba(255, 255, 255, 0.98)';
+            navbar.style.boxShadow = '0 4px 6px -1px rgb(0 0 0 / 0.1)';
+        } else {
+            navbar.style.background = 'rgba(255, 255, 255, 0.95)';
+            navbar.style.boxShadow = 'none';
+        }
+    });
+
+    // Mobile menu toggle
+    if (navToggle && navMenu) {
+        navToggle.addEventListener('click', () => {
+            navMenu.classList.toggle('active');
+            navToggle.classList.toggle('active');
+        });
+
+        // Close menu when clicking on links
+        navMenu.querySelectorAll('a').forEach(link => {
+            link.addEventListener('click', () => {
+                navMenu.classList.remove('active');
+                navToggle.classList.remove('active');
+            });
+        });
+    }
+}
+
+// Tool tabs functionality
+function initToolTabs() {
+    const tabButtons = document.querySelectorAll('.tab-btn');
+    const toolGrids = document.querySelectorAll('.tools-grid');
+
+    tabButtons.forEach(button => {
+        button.addEventListener('click', () => {
+            const category = button.dataset.category;
+
+            // Remove active class from all buttons and grids
+            tabButtons.forEach(btn => btn.classList.remove('active'));
+            toolGrids.forEach(grid => grid.classList.remove('active'));
+
+            // Add active class to clicked button and corresponding grid
+            button.classList.add('active');
+            const targetGrid = document.querySelector(`[data-category="${category}"].tools-grid`);
+            if (targetGrid) {
+                targetGrid.classList.add('active');
+            }
+
+            // Animate the transition
+            animateGridSwitch(targetGrid);
+        });
+    });
+}
+
+// Animate grid switch
+function animateGridSwitch(grid) {
+    if (!grid) return;
+
+    const cards = grid.querySelectorAll('.tool-card');
+    cards.forEach((card, index) => {
+        card.style.opacity = '0';
+        card.style.transform = 'translateY(20px)';
+        
+        setTimeout(() => {
+            card.style.transition = 'all 0.5s ease';
+            card.style.opacity = '1';
+            card.style.transform = 'translateY(0)';
+        }, index * 100);
+    });
+}
+
+// Scroll animations
+function initScrollAnimations() {
+    const observerOptions = {
+        threshold: 0.1,
+        rootMargin: '0px 0px -50px 0px'
+    };
+
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach(entry => {
+            if (entry.isIntersecting) {
+                entry.target.style.opacity = '1';
+                entry.target.style.transform = 'translateY(0)';
+                
+                // Special animations for different elements
+                if (entry.target.classList.contains('feature-card')) {
+                    entry.target.style.animationDelay = '0.2s';
+                    entry.target.classList.add('animate-fade-in-up');
+                } else if (entry.target.classList.contains('tool-card')) {
+                    entry.target.classList.add('animate-scale-in');
+                } else if (entry.target.classList.contains('stat-item')) {
+                    animateCounter(entry.target);
+                }
+            }
+        });
+    }, observerOptions);
+
+    // Observe elements for animation
+    const animatedElements = document.querySelectorAll('.feature-card, .tool-card, .browser-card, .stat-item');
+    animatedElements.forEach(el => {
+        el.style.opacity = '0';
+        el.style.transform = 'translateY(20px)';
+        el.style.transition = 'all 0.6s ease';
+        observer.observe(el);
+    });
+}
+
+// Counter animation
+function animateCounter(element) {
+    const numberElement = element.querySelector('.stat-number');
+    if (!numberElement) return;
+
+    const finalNumber = numberElement.textContent;
+    const numericValue = parseInt(finalNumber.replace(/[^\d]/g, ''));
+    const suffix = finalNumber.replace(/[\d.]/g, '');
+    
+    let currentNumber = 0;
+    const increment = numericValue / 50;
+    const timer = setInterval(() => {
+        currentNumber += increment;
+        if (currentNumber >= numericValue) {
+            numberElement.textContent = finalNumber;
+            clearInterval(timer);
+        } else {
+            numberElement.textContent = Math.floor(currentNumber) + suffix;
+        }
+    }, 50);
+}
+
+// Parallax effects
+function initParallaxEffects() {
+    window.addEventListener('scroll', () => {
+        const scrolled = window.pageYOffset;
+        const heroPattern = document.querySelector('.hero-pattern');
+        const browserMockup = document.querySelector('.browser-mockup');
+        
+        if (heroPattern) {
+            heroPattern.style.transform = `translateY(${scrolled * 0.5}px)`;
+        }
+        
+        if (browserMockup && scrolled < window.innerHeight) {
+            browserMockup.style.transform = `perspective(1000px) rotateY(-5deg) rotateX(5deg) translateY(${scrolled * 0.1}px)`;
+        }
+    });
+}
+
+// Fetch GitHub stats
+async function fetchGitHubStats() {
+    // Set real data as default values
+    const defaultStars = 5300;
+    const defaultForks = 1300;
+    
+    const starsElement = document.getElementById('github-stars');
+    const forksElement = document.getElementById('github-forks');
+    
+    // Set default values first
+    if (starsElement) {
+        starsElement.textContent = formatNumber(defaultStars);
+    }
+    if (forksElement) {
+        forksElement.textContent = formatNumber(defaultForks);
+    }
+    
+    try {
+        const response = await fetch('https://api.github.com/repos/zxlie/FeHelper');
+        const data = await response.json();
+        
+        // Update with real data if API succeeds
+        if (starsElement && data.stargazers_count) {
+            starsElement.textContent = formatNumber(data.stargazers_count);
+            animateCounter(starsElement.parentElement);
+        }
+        
+        if (forksElement && data.forks_count) {
+            forksElement.textContent = formatNumber(data.forks_count);
+            animateCounter(forksElement.parentElement);
+        }
+    } catch (error) {
+        console.log('GitHub API request failed, using default values:', error.message);
+        // Default values are already set
+    }
+}
+
+// Format numbers (e.g., 1234 -> 1.2K+)
+function formatNumber(num) {
+    if (num >= 1000) {
+        return (num / 1000).toFixed(1) + 'K';
+    }
+    return num.toString();
+}
+
+// Smooth scrolling
+function initSmoothScrolling() {
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                const headerOffset = 70;
+                const elementPosition = target.getBoundingClientRect().top;
+                const offsetPosition = elementPosition + window.pageYOffset - headerOffset;
+
+                window.scrollTo({
+                    top: offsetPosition,
+                    behavior: 'smooth'
+                });
+            }
+        });
+    });
+}
+
+// Add some interactive effects
+function addInteractiveEffects() {
+    // Tool card hover effects
+    document.querySelectorAll('.tool-card').forEach(card => {
+        card.addEventListener('mouseenter', function() {
+            this.style.transform = 'translateY(-8px) scale(1.02)';
+        });
+        
+        card.addEventListener('mouseleave', function() {
+            this.style.transform = 'translateY(0) scale(1)';
+        });
+    });
+
+    // Browser mockup interaction
+    const browserMockup = document.querySelector('.browser-mockup');
+    if (browserMockup) {
+        let isAnimating = false;
+        
+        browserMockup.addEventListener('mouseenter', function() {
+            if (!isAnimating) {
+                isAnimating = true;
+                this.style.transform = 'perspective(1000px) rotateY(0deg) rotateX(0deg) scale(1.05)';
+                
+                setTimeout(() => {
+                    isAnimating = false;
+                }, 300);
+            }
+        });
+        
+        browserMockup.addEventListener('mouseleave', function() {
+            this.style.transform = 'perspective(1000px) rotateY(-5deg) rotateX(5deg) scale(1)';
+        });
+    }
+
+    // Download button effects
+    document.querySelectorAll('.download-btn').forEach(btn => {
+        btn.addEventListener('mouseenter', function() {
+            const arrow = this.querySelector('.btn-arrow');
+            if (arrow) {
+                arrow.style.transform = 'translateX(8px)';
+            }
+        });
+        
+        btn.addEventListener('mouseleave', function() {
+            const arrow = this.querySelector('.btn-arrow');
+            if (arrow) {
+                arrow.style.transform = 'translateX(0)';
+            }
+        });
+    });
+}
+
+// Initialize interactive effects after DOM is loaded
+document.addEventListener('DOMContentLoaded', addInteractiveEffects);
+
+// Performance optimization: Throttle scroll events
+function throttle(func, limit) {
+    let inThrottle;
+    return function() {
+        const args = arguments;
+        const context = this;
+        if (!inThrottle) {
+            func.apply(context, args);
+            inThrottle = true;
+            setTimeout(() => inThrottle = false, limit);
+        }
+    }
+}
+
+// Apply throttling to scroll events
+window.addEventListener('scroll', throttle(function() {
+    // Scroll-based animations here
+}, 16)); // ~60fps
+
+// Add CSS animations dynamically
+const style = document.createElement('style');
+style.textContent = `
+    @keyframes animate-fade-in-up {
+        from {
+            opacity: 0;
+            transform: translateY(30px);
+        }
+        to {
+            opacity: 1;
+            transform: translateY(0);
+        }
+    }
+    
+    @keyframes animate-scale-in {
+        from {
+            opacity: 0;
+            transform: scale(0.9);
+        }
+        to {
+            opacity: 1;
+            transform: scale(1);
+        }
+    }
+    
+    .animate-fade-in-up {
+        animation: animate-fade-in-up 0.6s ease forwards;
+    }
+    
+    .animate-scale-in {
+        animation: animate-scale-in 0.6s ease forwards;
+    }
+    
+    /* Mobile menu styles */
+    @media (max-width: 768px) {
+        .nav-menu {
+            position: fixed;
+            top: 70px;
+            left: 0;
+            right: 0;
+            background: white;
+            flex-direction: column;
+            padding: 20px;
+            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+            transform: translateY(-100%);
+            opacity: 0;
+            visibility: hidden;
+            transition: all 0.3s ease;
+        }
+        
+        .nav-menu.active {
+            transform: translateY(0);
+            opacity: 1;
+            visibility: visible;
+        }
+        
+        .nav-toggle.active span:nth-child(1) {
+            transform: rotate(45deg) translate(5px, 5px);
+        }
+        
+        .nav-toggle.active span:nth-child(2) {
+            opacity: 0;
+        }
+        
+        .nav-toggle.active span:nth-child(3) {
+            transform: rotate(-45deg) translate(7px, -6px);
+        }
+    }
+`;
+document.head.appendChild(style);
+
+// Add loading states for GitHub data
+function showLoadingState() {
+    const starsElement = document.getElementById('github-stars');
+    const forksElement = document.getElementById('github-forks');
+    
+    if (starsElement) {
+        starsElement.innerHTML = '<span class="loading"></span>';
+    }
+    
+    if (forksElement) {
+        forksElement.innerHTML = '<span class="loading"></span>';
+    }
+}
+
+// Enhanced error handling
+window.addEventListener('error', function(e) {
+    console.log('Error caught:', e.error);
+    // Graceful degradation - keep functionality working
+});
+
+// Service Worker registration for PWA features (optional)
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', function() {
+        // Uncomment if you want to add PWA features
+        // navigator.serviceWorker.register('/sw.js');
+    });
+}
+
+// Export functions for testing (if needed)
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = {
+        formatNumber,
+        throttle
+    };
+}
+
+// Fetch all platform users via shields.io
+async function fetchAllPlatformUsers() {
+    // Shields.io JSON API
+    const sources = [
+        {
+            name: 'Chrome',
+            url: 'https://img.shields.io/chrome-web-store/users/pkgccpejnmalmdinmhkkfafefagiiiad.json',
+        },
+        {
+            name: 'Edge',
+            url: 'https://img.shields.io/microsoftedge/addons/users/feolnkbgcbjmamimpfcnklggdcbgakhe.json',
+        }
+    ];
+
+    let total = 0;
+    let details = [];
+
+    for (const src of sources) {
+        try {
+            const res = await fetch(src.url);
+            const data = await res.json();
+            // data.value 例："200k"
+            let value = data.value.replace(/[^0-9kK+]/g, '');
+            let num = 0;
+            if (value.endsWith('k') || value.endsWith('K')) {
+                num = parseFloat(value) * 1000;
+            } else {
+                num = parseInt(value, 10);
+            }
+            total += num;
+            details.push(`${src.name}: ${data.value}`);
+        } catch (e) {
+            details.push(`${src.name}: --`);
+        }
+    }
+
+    // 格式化总数
+    let totalStr = total >= 1000 ? (total / 1000).toFixed(1) + 'K+' : total + '+';
+    const numEl = document.getElementById('all-users-number');
+    if(numEl) numEl.textContent = totalStr;
+    const statEl = document.getElementById('all-users-stat');
+    if(statEl) statEl.title = details.join('，');
+}
+
+// 工具界面预览区图片放大查看
+function initPreviewImageModal() {
+    const imgs = document.querySelectorAll('.tool-preview .preview-item img');
+    imgs.forEach(img => {
+        img.addEventListener('click', function() {
+            // 创建弹窗元素
+            const modal = document.createElement('div');
+            modal.className = 'img-modal';
+            modal.innerHTML = `
+                <span class="img-modal-close" title="关闭">&times;</span>
+                <img src="${img.src}" alt="${img.alt}" />
+            `;
+            document.body.appendChild(modal);
+            // 关闭事件
+            modal.querySelector('.img-modal-close').onclick = () => document.body.removeChild(modal);
+            modal.onclick = (e) => {
+                if (e.target === modal) document.body.removeChild(modal);
+            };
+        });
+    });
+}