Skip to content

Commit 78ea89d

Browse files
netshdevnetshdev
committed
feat: implement initial monochrome image processing application with image upload and result viewing.
0 parents  commit 78ea89d

21 files changed

Lines changed: 4775 additions & 0 deletions

‎.gitignore‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?
25+
26+
# Agents
27+
.agent

‎.vscode/extensions.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"recommendations": [
3+
"bradlc.vscode-tailwindcss"
4+
]
5+
}

‎README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# MonoPixel
2+
3+
A visual tool to demonstrate image compression by removing color information.
4+
5+
## Overview
6+
7+
MonoPixel strips hue and saturation data from images to convert them to grayscale. It calculates and visualizes the space saved by this process, helping compare file sizes between full-color and monochrome versions.
8+
9+
## Stack
10+
11+
- React + Vite
12+
- TypeScript
13+
- Tailwind CSS
14+
15+
## Running Locally
16+
17+
```bash
18+
git clone https://github.com/netshdev/monopixel.git
19+
cd monopixel
20+
npm install
21+
npm run dev
22+
```
23+
24+
## License
25+
26+
MIT

‎eslint.config.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import js from '@eslint/js'
2+
import globals from 'globals'
3+
import reactHooks from 'eslint-plugin-react-hooks'
4+
import reactRefresh from 'eslint-plugin-react-refresh'
5+
import tseslint from 'typescript-eslint'
6+
import { defineConfig, globalIgnores } from 'eslint/config'
7+
8+
export default defineConfig([
9+
globalIgnores(['dist']),
10+
{
11+
files: ['**/*.{ts,tsx}'],
12+
extends: [
13+
js.configs.recommended,
14+
tseslint.configs.recommended,
15+
reactHooks.configs.flat.recommended,
16+
reactRefresh.configs.vite,
17+
],
18+
languageOptions: {
19+
ecmaVersion: 2020,
20+
globals: globals.browser,
21+
},
22+
},
23+
])

‎index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link rel="icon" type="image/svg+xml" href="/logo.svg" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<title>MonoPixel - Grayscale Image Compression</title>
9+
<meta name="description"
10+
content="MonoPixel is a free online tool to compress images by removing color information. Convert images to grayscale, reduce file size, and compare quality instantly." />
11+
<meta name="keywords"
12+
content="image compression, grayscale converter, reduce image size, webp converter, monochrome image, online tool" />
13+
<meta name="robots" content="index, follow" />
14+
15+
<meta property="og:type" content="website" />
16+
<meta property="og:title" content="MonoPixel - Grayscale Image Compression" />
17+
<meta property="og:description"
18+
content="Reduce image file sizes by up to 50% by removing color data. Compare results instantly." />
19+
20+
<meta property="twitter:card" content="summary_large_image" />
21+
<meta property="twitter:title" content="MonoPixel - Grayscale Image Compression" />
22+
<meta property="twitter:description"
23+
content="Reduce image file sizes by up to 50% by removing color data. Compare results instantly." />
24+
</head>
25+
26+
<body>
27+
<div id="root"></div>
28+
<script type="module" src="/src/main.tsx"></script>
29+
</body>
30+
31+
</html>

0 commit comments

Comments
 (0)