forked from mirror/chinese-colors
69 lines
2.1 KiB
Markdown
69 lines
2.1 KiB
Markdown
# <img src="demo/logo.png" alt="Logo" width="50"> Chinese Color
|
||
|
||
> [中文文档](README.zh.md)
|
||
|
||
[Chinese Color Cheatsheet](https://colors.ichuantong.cn)
|
||
|
||
<img src="demo/pc.png" alt="PC UI" width="600">
|
||
|
||
## Features
|
||
|
||
- Build with react.js 👏
|
||
- PWA supported ☕️
|
||
|
||
<img src="demo/pwa.jpg" alt="PWA Logo" width="300">
|
||
|
||
- Responsive (Mobile First) 📱
|
||
|
||
<img src="demo/m.png" alt="Mobile UI" width="300">
|
||
|
||
- Highlight the selected color ✨
|
||
- Classify the colors 🚥
|
||
- Copy HEX 🖨
|
||
- Add to favorites 😍
|
||
- Poetry aside 😘
|
||
- Wallpaper/Image Card (not stable, welcome [feedback](https://github.com/zerosoul/chinese-colors/issues)) 🌸
|
||
|
||
<img src="demo/wallpaper.png" alt="screen shot" width="300">
|
||
|
||
<img src="demo/card.png" alt="card image" width="200">
|
||
|
||
## Technology Stack & Thanks
|
||
|
||
- [create-react-app](https://github.com/facebook/create-react-app)
|
||
- [react.js](https://reactjs.org)
|
||
- [styled-components](https://styled-components.com): CSS-IN-JS Best Practice
|
||
- eslint + prettier: for better code
|
||
- [html2canvas](http://html2canvas.hertzen.com/)
|
||
- [pinyin](https://github.com/hotoo/pinyin): convert Han to pinyin
|
||
- [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard): enable copy
|
||
- [iconfont.cn](https://iconfont.cn): icons
|
||
- [https://www.transparenttextures.com/](https://www.transparenttextures.com/): awesome pattern images
|
||
- [今日诗词](https://www.jinrishici.com)
|
||
- Thanks the great Open Source
|
||
|
||
## Local Development
|
||
|
||
clone: `git clone https://github.com/zerosoul/chinese-colors.git`
|
||
|
||
init: `cd chinese-colors && npm install`
|
||
|
||
run: `npm run start`
|
||
|
||
enjoy: `http://localhost:8099/`
|
||
|
||
## Changelog
|
||
|
||
[Changelog](CHANGELOG.md)
|
||
|
||
## Reference
|
||
|
||
- Color data source：[中国传统颜色](http://blog.sina.com.cn/s/blog_5c3b139d0101deia.html)
|
||
- UI：[nipponcolors.com](http://nipponcolors.com/)
|
||
|
||
## Support
|
||
|
||
<a href="https://www.producthunt.com/posts/chinese-color?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-chinese-color" target="_blank">
|
||
<img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=167119&theme=dark" alt="Chinese Traditional Color - Chinese Color Cheatsheet Online! "/>
|
||
</a>
|