refactor: layout and style

.specstory/.gitignore

@@ -0,0 +1,2 @@
+# SpecStory explanation file
+/.what-is-this.md

README.md

@@ -2,19 +2,31 @@
 
 > 中文: [README (中文)](README_zh.md)
 
+## Contents
+
+- [Project Milestones](#project-milestones)
+- [How to Use](#how-to-use)
+  - [Image → Contribution Heatmap](#image--contribution-heatmap)
+  - [Quick Tips](#quick-tips)
+  - [Platform Notes](#platform-notes)
+- [Rendering Examples](#rendering-examples)
+- [Development Guide](#development-guide)
+- [Star History](#star-history)
+- [Disclaimer](#disclaimer)
+
 ## Project Milestones
 
 In early November, this project was recommended by YiFeng Ruan(阮一峰), and officially featured in [Tech Enthusiast Weekly Issue 372](https://www.ruanyifeng.com/blog/2025/11/weekly-issue-372.html); in mid-November, it was recommended by the well-known influencer "it咖啡馆" and featured in [GitHub Weekly Hotspots Issue 93](https://youtu.be/pjQftatKpjc?si=5pMK1bAyFXfp6oyF); in December, it was successfully selected as an "interesting project" by the renowned open-source community HelloGitHub <a href="https://hellogithub.com/repository/zmrlft/GreenWall" target="_blank"><img src="https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=c1b693c5b9244e26953733a6816eac62&claim_uid=KodS5CpL41Jj0Z8&theme=small" alt="Featured｜HelloGitHub" /></a>
 
-## How to use
+## How to Use
 
 Make sure Git is installed on your computer.
 
 ![app screenshot](/docs/images/app.png)
 
 Download the app, open it, and first grab a Personal Access Token (PAT) so you can sign in to GitHub. You can follow this guide: [how to get your PAT](docs/githubtoken_en.md).
 
-### New: Image → Contribution Heatmap
+### Image → Contribution Heatmap
 
 - Upload any image (PNG/JPG/SVG) and turn it into a contribution heatmap.
 - Choose rows (1–7) and columns (1–52) to fit your image’s shape.
@@ -59,11 +71,13 @@ Once you’re logged in you’ll see your avatar and name in the upper-left corn
 - Use the brush intensity control to switch between different shades of green.
 - **Copy and Paste Feature**: Click the "Copy Mode" button to enter copy mode. Drag to select an area on the calendar and press `Ctrl+C` to copy. The app will show a "Copy successful" message. After copying, the selected pattern will follow the mouse as a preview. Left-click or press `Ctrl+V` to paste to the target location, right-click to cancel the paste preview. Press `Ctrl+V` to quickly restore the last copied pattern.
 
-### Windows/Linux
+### Platform Notes
+
+#### Windows/Linux
 
 Download and run the application directly.
 
-### macOS
+#### macOS
 
 Since this application is not yet signed, you may encounter security restrictions on first launch. Follow these steps to resolve:
 
@@ -77,62 +91,55 @@ sudo xattr -r -d com.apple.quarantine ./green-wall.app
 
 **Warning:** The commands will not automatically launch the application. You need to manually double-click the app to start it (the commands only modify file attributes).
 
-## Rendering
+## Rendering Examples
 
-![text](docs/images/cailg.png)
-![catfish](docs/images/cat.png)
-![lovecat](docs/images/darkcat.jpg)
-![helloWorld](docs/images/darkhw.png)
-![androidlife](docs/images/darkandroid.png)
+| ![text](docs/images/cailg.png) | ![catfish](docs/images/cat.png) |
+| --- | --- |
+| ![lovecat](docs/images/darkcat.jpg) | ![helloWorld](docs/images/darkhw.png) |
+| ![androidlife](docs/images/darkandroid.png) |  |
 
 ## Development Guide
 
-- Environmental Preparation
-
-  Install Go 1.23+
-
-  Install Node.js (v22+)
+### Environment setup
 
-  Install Git
+- Install Go 1.24+
+- Install Node.js (v22+)
+- Install Git
 
-- Install dependent tools
+### Install dependent tools
 
-  ```
-  go install github.com/wailsapp/wails/v2/cmd/wails@v2.10.2
-  ```
-
-- Project operation
-
-  Clone the repository and enter the directory:
+```bash
+go install github.com/wailsapp/wails/v2/cmd/wails@v2.10.2
+```
 
-  ```
-  git clone https://github.com/zmrlft/GreenWall.git
-  cd GreenWall
-  ```
+### Project workflow
 
-  Install front-end dependencies:
+Clone the repository and enter the directory:
 
-  ```
-  cd frontend && npm install
-  ```
+```bash
+git clone https://github.com/zmrlft/GreenWall.git
+cd GreenWall
+```
 
-  Start the development environment
+Install front-end dependencies:
 
-  ```
-  wails dev
-  ```
+```bash
+cd frontend && npm install
+```
 
-  Construction
+Start the development environment:
 
-  ```
-  wails build
-  ```
+```bash
+wails dev
+```
 
-  Output path: build/bin/
+Build:
 
-## Future features
+```bash
+wails build
+```
 
-We may add support for creating repositories in custom languages. For example, if you want a Java repository, the tool would generate one and it would be reflected in your GitHub language statistics.
+Output path: `build/bin/`
 
 ## Star History
 

README_zh.md

@@ -2,134 +2,143 @@
 
 > English: [README (English)](README.md)
 
-## 项目里程碑：
+## 目录
+
+- [项目里程碑](#项目里程碑)
+- [如何使用](#如何使用)
+  - [图片转贡献图](#图片转贡献图)
+  - [快速提示](#快速提示)
+  - [平台说明](#平台说明)
+- [效果图](#效果图)
+- [开发指南](#开发指南)
+- [Star History](#star-history)
+- [免责](#免责)
+
+## 项目里程碑
 
 11月初，本项目获阮一峰大佬的推荐，正式收录于[科技爱好者周刊372期](https://www.ruanyifeng.com/blog/2025/11/weekly-issue-372.html)；11月中旬，获知名大V“it咖啡馆”推荐，正式收录于[Github一周热点93期](https://youtu.be/pjQftatKpjc?si=5pMK1bAyFXfp6oyF)；12月，以“有趣的项目”身份顺利入选知名开源社区“你好Github”<a href="https://hellogithub.com/repository/zmrlft/GreenWall" target="_blank"><img src="https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=c1b693c5b9244e26953733a6816eac62&claim_uid=KodS5CpL41Jj0Z8&theme=small" alt="Featured｜HelloGitHub" /></a>
 
 ## 如何使用
 
-请确保你的电脑已经安装了 git。
+请确保你的电脑已经安装了 Git。
 
 ![app screenshot](/docs/images/app_zh.png)
 
-下载软件，打开后，首先要获取你的PAT来登录github，你可以参考这个：[如何获取你的github访问令牌](docs/githubtoken.md)
+下载软件后，先获取 PAT 来登录 GitHub。可参考：[如何获取你的 GitHub 访问令牌](docs/githubtoken.md)。
 
-### 新增：图片转贡献图
+### 图片转贡献图
 
 - 上传图片（PNG/JPG/SVG），一键生成贡献热力图。
-  - 尽量选择线条清晰、对比度的照片，但是细节不宜过多，否则将被压缩的难以辨认。
+  - 建议使用线条清晰、对比度适中的图片，细节过多会在压缩后丢失。
 - 自由设置行数（1~7）和列数（1~52），匹配图片形状。
 - 两种模式：
-  - **自动** – 出来会有色阶变化
-  - **二值化** – 出来是最深和无色
+  - **自动**：会保留色阶变化。
+  - **二值化**：仅保留最深色和无色。
 - 可调亮度反转、阈值、缩放平滑、笔画补强。
 - 在日历上悬停定位，左键应用，右键取消。
 
 **小贴士**
-- 二值化结果太稀疏时，加大“二值补笔画强度”
+- 二值化结果太稀疏时，加大“二值补笔画强度”。
 - 文字清晰优先选“邻近点（保细节）”。
-- 又想要色阶变化，又想要文字清晰，可以适当调高亮度阈值
+- 如果既想保留色阶又想提高文字清晰度，可适当提高亮度阈值。
 
 **成果示例**
-![success_example1](docs/images/success_example1.png)
-![success_example2](docs/images/success_example2.png)
-![success_example3](docs/images/success_example3.png)
-![success_example4](docs/images/success_example4.png) 
+- ![success_example1](docs/images/success_example1.png)
+- ![success_example2](docs/images/success_example2.png)
+- ![success_example3](docs/images/success_example3.png)
+- ![success_example4](docs/images/success_example4.png)
+
 **失败示例**
-![failure_example1](docs/images/failure_example1.png)
-![failure_example2](docs/images/failure_example2.png)
-![failure_example3](docs/images/failure_example3.png) 
+- ![failure_example1](docs/images/failure_example1.png)
+- ![failure_example2](docs/images/failure_example2.png)
+- ![failure_example3](docs/images/failure_example3.png)
 
-登录成功左上角会显示你的头像和名字。拖动鼠标在日历上尽情画画，发挥你的艺术才能！画完后点击创建远程仓库，你可以自定义仓库名称和描述，选择仓库是否公开，确认无误后点击生成并且推送，软件会自动在你的GitHub上创建对应的仓库。
+登录成功后，左上角会显示你的头像和名字。拖动鼠标在日历上绘制图案，完成后点击创建远程仓库。你可以自定义仓库名称和描述，选择仓库是否公开，确认后点击生成并推送，软件会自动在你的 GitHub 上创建并推送仓库。
+
+> 注意：GitHub 可能需要 5 分钟到两天才会显示贡献图案。你可以把仓库设为私有，并在贡献统计里开启“显示私有仓库贡献”，这样他人看不到仓库内容但能看到你的贡献记录。
 
-注意： GitHub 可能需要 5 分钟至两天才会显示你的贡献度图案。你可以把仓库设置为私人仓库，并在贡献统计中允许显示私人仓库的贡献，这样他人看不到仓库内容但可以看到贡献记录。
 ![private setting screenshot](docs/images/privatesetting.png)
 
 ### 快速提示
 
-- 绘画过程中右键可以切换画笔和橡皮擦
-- 可以调节画笔的强度
-- **复制粘贴功能**：点击"复制模式"按钮进入复制模式，在日历上拖选一块区域后按 `Ctrl+C` 复制，软件会弹出"复制成功"提示。复制后，被选中区域的图案会跟随鼠标移动作为预览，你可以左键点击或按 `Ctrl+V` 粘贴到目标位置，右键取消粘贴预览。按`Ctrl+V`可以快速恢复上次复制的图案
+- 绘画过程中右键可以切换画笔和橡皮擦。
+- 可以调节画笔强度。
+- **复制粘贴功能**：点击“复制模式”进入复制模式，在日历上拖选区域后按 `Ctrl+C` 复制。复制成功后，被选区域会跟随鼠标作为预览。你可以左键点击或按 `Ctrl+V` 粘贴到目标位置，右键取消粘贴预览。按 `Ctrl+V` 也可以快速恢复上次复制的图案。
+
+### 平台说明
 
-### Windows/Linux
+#### Windows/Linux
 
-下载后直接点击运行即可。软件开源，报毒正常
+下载后直接运行即可（开源软件被误报为病毒属于常见现象）。
 
-### macOS
+#### macOS
 
-由于本应用暂时未进行签名服务，首次运行时可能会遇到安全限制。按以下步骤解决：
+由于本应用暂未签名，首次运行时可能遇到系统安全限制。可按以下步骤处理：
 
 ```bash
 cd 你的green-wall.app存在的目录
 sudo xattr -cr ./green-wall.app
 sudo xattr -r -d com.apple.quarantine ./green-wall.app
 ```
 
-**提示：** 这些指令并不需要全部执行，从上往下依次尝试，如果某条指令解决了问题就无需继续执行。
+**提示：** 不需要全部执行，从上到下依次尝试，问题解决后即可停止。
 
-**警告：** 命令执行后不会自动弹出应用界面，需要手动双击应用来启动（命令只是改变了文件属性）。
+**警告：** 命令执行后不会自动启动应用，需要手动双击打开（命令仅修改文件属性）。
 
 ## 效果图
 
-![text](docs/images/cailg.png)
-![catfish](docs/images/cat.png)
-![lovecat](docs/images/darkcat.jpg)
-![helloWorld](docs/images/darkhw.png)
-![androidlife](docs/images/darkandroid.png)
+| ![text](docs/images/cailg.png) | ![catfish](docs/images/cat.png) |
+| --- | --- |
+| ![lovecat](docs/images/darkcat.jpg) | ![helloWorld](docs/images/darkhw.png) |
+| ![androidlife](docs/images/darkandroid.png) |  |
 
 ## 开发指南
 
-- 环境准备
+### 环境准备
 
-  安装 Go 1.23+
+- 安装 Go 1.24+
+- 安装 Node.js (v22+)
+- 安装 Git
 
-  安装 Node.js (v22+)
+### 安装依赖工具
 
-  安装 git
-
-- 安装依赖工具
-
-  ```
-  go install github.com/wailsapp/wails/v2/cmd/wails@v2.10.2
-  ```
-
-- 项目操作
-
-  克隆仓库并进入目录：
+```bash
+go install github.com/wailsapp/wails/v2/cmd/wails@v2.10.2
+```
 
-  ```
-  git clone https://github.com/zmrlft/GreenWall.git
-  cd GreenWall
-  ```
+### 项目操作
 
-  安装前端依赖：
+克隆仓库并进入目录：
 
-  ```
-  cd frontend && npm install
-  ```
+```bash
+git clone https://github.com/zmrlft/GreenWall.git
+cd GreenWall
+```
 
-  启动开发环境
+安装前端依赖：
 
-  ```
-  wails dev
-  ```
+```bash
+cd frontend && npm install
+```
 
-  构建
+启动开发环境：
 
-  ```
-  wails build
-  ```
+```bash
+wails dev
+```
 
-  输出路径：build/bin/
+构建：
 
-## 未来的功能
+```bash
+wails build
+```
 
-我们可能会增加创建自定义语言仓库的功能，例如生成一个 Java 仓库并在你的主页语言占比中统计它。
+输出路径：`build/bin/`
 
 ## Star History
 
 [![Star History Chart](https://api.star-history.com/svg?repos=zmrlft/GreenWall&type=date&legend=top-left)](https://www.star-history.com/#zmrlft/GreenWall&type=date&legend=top-left)
 
 ## 免责
 
-免责声明：本项目仅用于教育、演示及研究 GitHub 贡献机制，如用于求职造假，所造成后果自负。
+本项目仅用于教育、演示及研究 GitHub 贡献机制；如用于求职造假等不当用途，后果由使用者自行承担。