-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
253 lines (240 loc) · 13.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>PIXEL REFIT</title>
<link
href="https://fonts.googleapis.com/css2?family=Fredoka+One&family=Teko:wght@300&display=swap"
rel="stylesheet"
/>
<!-- <link rel="icon" type="image/x-icon" href="/images/icons/favicon.ico" /> -->
<link
rel="shortcut icon"
href="/images/icons/android-chrome-192x192.png"
type="image/x-icon"
/>
<link rel="stylesheet" href="style.css" />
<link rel="manifest" href="site.webmanifest" />
<!-- ios support -->
<link rel="apple-touch-icon" href="images/icons/apple-touch-icon.png" />
<link
rel="apple-touch-icon"
href="images/icons/android-chrome-512x512.png"
/>
<meta name="apple-mobile-web-app-status-bar" content="#02dac5" />
<meta name="theme-color" content="#02dac5" />
</head>
<body>
<div class="main">
<div class="Tools">
<ul>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
width="24"
fill="#ccc"
style="transform: scale(1.3)"
>
<path
d="M12 24.075 8.4 20.575H3.425V15.6L-0.075 12L3.425 8.4V3.4H8.4L12 -0.125L15.6 3.4H20.6V8.4L24.125 12L20.6 15.6V20.575H15.6ZM12 17.175Q14.175 17.175 15.688 15.675Q17.2 14.175 17.2 12Q17.2 9.825 15.688 8.312Q14.175 6.8 12 6.8Z"
/>
</svg>
<p>Brightness</p>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
class="blur"
height="24"
fill="#ccc"
width="24"
style="transform: scale(1.5)"
>
<path
d="M5.95 15.25Q5.425 15.25 5.062 14.887Q4.7 14.525 4.7 14Q4.7 13.475 5.062 13.113Q5.425 12.75 5.95 12.75Q6.475 12.75 6.838 13.113Q7.2 13.475 7.2 14Q7.2 14.525 6.838 14.887Q6.475 15.25 5.95 15.25ZM5.95 19.3Q5.425 19.3 5.062 18.938Q4.7 18.575 4.7 18.025Q4.7 17.5 5.062 17.137Q5.425 16.775 5.95 16.775Q6.475 16.775 6.838 17.137Q7.2 17.5 7.2 18.025Q7.2 18.575 6.838 18.938Q6.475 19.3 5.95 19.3ZM5.95 11.25Q5.425 11.25 5.062 10.875Q4.7 10.5 4.7 9.975Q4.7 9.45 5.062 9.087Q5.425 8.725 5.95 8.725Q6.475 8.725 6.838 9.087Q7.2 9.45 7.2 9.975Q7.2 10.5 6.838 10.875Q6.475 11.25 5.95 11.25ZM2.925 10.725Q2.625 10.725 2.425 10.512Q2.225 10.3 2.225 10Q2.225 9.7 2.425 9.487Q2.625 9.275 2.95 9.275Q3.25 9.275 3.45 9.487Q3.65 9.7 3.65 10Q3.65 10.3 3.45 10.512Q3.25 10.725 2.925 10.725ZM5.95 7.2Q5.425 7.2 5.062 6.837Q4.7 6.475 4.7 5.925Q4.7 5.4 5.062 5.037Q5.425 4.675 5.95 4.675Q6.475 4.675 6.838 5.037Q7.2 5.4 7.2 5.925Q7.2 6.475 6.838 6.837Q6.475 7.2 5.95 7.2ZM21.05 10.725Q20.75 10.725 20.55 10.512Q20.35 10.3 20.35 10Q20.35 9.7 20.55 9.487Q20.75 9.275 21.075 9.275Q21.375 9.275 21.575 9.487Q21.775 9.7 21.775 10Q21.775 10.3 21.575 10.512Q21.375 10.725 21.05 10.725ZM14.025 7.2Q13.475 7.2 13.113 6.837Q12.75 6.475 12.75 5.925Q12.75 5.4 13.113 5.037Q13.475 4.675 14.025 4.675Q14.55 4.675 14.913 5.037Q15.275 5.4 15.275 5.925Q15.275 6.475 14.913 6.837Q14.55 7.2 14.025 7.2ZM14 3.65Q13.7 3.65 13.5 3.437Q13.3 3.225 13.3 2.925Q13.3 2.625 13.5 2.412Q13.7 2.2 14.025 2.2Q14.325 2.2 14.525 2.412Q14.725 2.625 14.725 2.925Q14.725 3.225 14.525 3.437Q14.325 3.65 14 3.65ZM2.925 14.725Q2.625 14.725 2.425 14.512Q2.225 14.3 2.225 14Q2.225 13.7 2.425 13.487Q2.625 13.275 2.95 13.275Q3.25 13.275 3.45 13.487Q3.65 13.7 3.65 14Q3.65 14.3 3.45 14.512Q3.25 14.725 2.925 14.725ZM9.95 21.775Q9.65 21.775 9.45 21.575Q9.25 21.375 9.25 21.05Q9.25 20.75 9.45 20.55Q9.65 20.35 9.975 20.35Q10.275 20.35 10.488 20.55Q10.7 20.75 10.7 21.075Q10.7 21.375 10.488 21.575Q10.275 21.775 9.95 21.775ZM9.975 3.65Q9.65 3.65 9.45 3.437Q9.25 3.225 9.25 2.925Q9.25 2.625 9.45 2.412Q9.65 2.2 9.975 2.2Q10.275 2.2 10.488 2.412Q10.7 2.625 10.7 2.925Q10.7 3.225 10.488 3.437Q10.275 3.65 9.975 3.65ZM9.975 7.2Q9.45 7.2 9.088 6.837Q8.725 6.475 8.725 5.925Q8.725 5.4 9.088 5.037Q9.45 4.675 9.975 4.675Q10.5 4.675 10.863 5.037Q11.225 5.4 11.225 5.925Q11.225 6.475 10.863 6.837Q10.5 7.2 9.975 7.2ZM10 15.8Q9.25 15.8 8.725 15.287Q8.2 14.775 8.2 14Q8.2 13.225 8.713 12.712Q9.225 12.2 10 12.2Q10.75 12.2 11.262 12.712Q11.775 13.225 11.775 14Q11.775 14.75 11.262 15.275Q10.75 15.8 10 15.8ZM18.05 15.25Q17.525 15.25 17.163 14.887Q16.8 14.525 16.8 14Q16.8 13.475 17.163 13.113Q17.525 12.75 18.05 12.75Q18.575 12.75 18.938 13.113Q19.3 13.475 19.3 14Q19.3 14.525 18.938 14.887Q18.575 15.25 18.05 15.25ZM18.05 19.3Q17.525 19.3 17.163 18.938Q16.8 18.575 16.8 18.025Q16.8 17.5 17.163 17.137Q17.525 16.775 18.05 16.775Q18.575 16.775 18.938 17.137Q19.3 17.5 19.3 18.025Q19.3 18.575 18.938 18.938Q18.575 19.3 18.05 19.3ZM18.05 11.25Q17.525 11.25 17.163 10.875Q16.8 10.5 16.8 9.975Q16.8 9.45 17.163 9.087Q17.525 8.725 18.05 8.725Q18.575 8.725 18.938 9.087Q19.3 9.45 19.3 9.975Q19.3 10.5 18.938 10.875Q18.575 11.25 18.05 11.25ZM18.05 7.2Q17.525 7.2 17.163 6.837Q16.8 6.475 16.8 5.925Q16.8 5.4 17.163 5.037Q17.525 4.675 18.05 4.675Q18.575 4.675 18.938 5.037Q19.3 5.4 19.3 5.925Q19.3 6.475 18.938 6.837Q18.575 7.2 18.05 7.2ZM21.05 14.725Q20.75 14.725 20.55 14.512Q20.35 14.3 20.35 14Q20.35 13.7 20.55 13.487Q20.75 13.275 21.075 13.275Q21.375 13.275 21.575 13.487Q21.775 13.7 21.775 14Q21.775 14.3 21.575 14.512Q21.375 14.725 21.05 14.725ZM14.025 19.3Q13.475 19.3 13.113 18.938Q12.75 18.575 12.75 18.025Q12.75 17.5 13.113 17.137Q13.475 16.775 14.025 16.775Q14.55 16.775 14.913 17.137Q15.275 17.5 15.275 18.025Q15.275 18.575 14.913 18.938Q14.55 19.3 14.025 19.3ZM14 21.775Q13.7 21.775 13.5 21.575Q13.3 21.375 13.3 21.05Q13.3 20.75 13.5 20.55Q13.7 20.35 14 20.35Q14.325 20.35 14.525 20.55Q14.725 20.75 14.725 21.05Q14.725 21.375 14.525 21.575Q14.325 21.775 14 21.775ZM10 11.775Q9.25 11.775 8.725 11.262Q8.2 10.75 8.2 9.975Q8.2 9.225 8.713 8.7Q9.225 8.175 10 8.175Q10.75 8.175 11.262 8.688Q11.775 9.2 11.775 9.975Q11.775 10.75 11.262 11.262Q10.75 11.775 10 11.775ZM9.975 19.3Q9.45 19.3 9.088 18.938Q8.725 18.575 8.725 18.025Q8.725 17.5 9.088 17.137Q9.45 16.775 9.975 16.775Q10.5 16.775 10.863 17.137Q11.225 17.5 11.225 18.025Q11.225 18.575 10.863 18.938Q10.5 19.3 9.975 19.3ZM14 15.8Q13.25 15.8 12.738 15.287Q12.225 14.775 12.225 14Q12.225 13.225 12.738 12.712Q13.25 12.2 14 12.2Q14.775 12.2 15.288 12.712Q15.8 13.225 15.8 14Q15.8 14.75 15.288 15.275Q14.775 15.8 14 15.8ZM14 11.775Q13.25 11.775 12.738 11.262Q12.225 10.75 12.225 9.975Q12.225 9.225 12.738 8.7Q13.25 8.175 14 8.175Q14.775 8.175 15.288 8.688Q15.8 9.2 15.8 9.975Q15.8 10.75 15.288 11.262Q14.775 11.775 14 11.775Z"
/>
</svg>
<p>Blur</p>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
height="24"
width="24"
fill="#ccc"
style="transform: scale(1.2)"
>
<path
d="M12 23.15Q9.7 23.15 7.663 22.275Q5.625 21.4 4.112 19.887Q2.6 18.375 1.725 16.325Q0.85 14.275 0.85 12Q0.85 9.7 1.725 7.662Q2.6 5.625 4.112 4.112Q5.625 2.6 7.675 1.725Q9.725 0.85 12 0.85Q14.3 0.85 16.337 1.725Q18.375 2.6 19.888 4.112Q21.4 5.625 22.275 7.675Q23.15 9.725 23.15 12Q23.15 14.3 22.275 16.337Q21.4 18.375 19.888 19.887Q18.375 21.4 16.325 22.275Q14.275 23.15 12 23.15ZM13.25 19.65Q16.075 19.175 17.913 17.075Q19.75 14.975 19.75 12Q19.75 9.075 17.913 6.962Q16.075 4.85 13.25 4.375Z"
/>
</svg>
<p>GrayScale</p>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
style="transform: scale(1.5)"
width="24"
height="24"
fill="#ccc"
>
<path
d="M20 14c-.092.064-2 2.083-2 3.5 0 1.494.949 2.448 2 2.5.906.044 2-.891 2-2.5 0-1.5-1.908-3.436-2-3.5zM9.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586l7-7-.707-.707L11 4.586 8.707 2.293 7.293 3.707 9.586 6 4 11.586c-.378.378-.586.88-.586 1.414s.208 1.036.586 1.414L9.586 20zM11 7.414 16.586 13H5.414L11 7.414z"
></path>
</svg>
<p>Hue Rotate</p>
</li>
<li>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="#ccc"
style="transform: scale(1.4)"
>
<path
d="m11 4-.5-1-.5 1-1 .125.834.708L9.5 6l1-.666 1 .666-.334-1.167.834-.708zm8.334 10.666L18.5 13l-.834 1.666-1.666.209 1.389 1.181L16.834 18l1.666-1.111L20.166 18l-.555-1.944L21 14.875zM6.667 6.333 6 5l-.667 1.333L4 6.5l1.111.944L4.667 9 6 8.111 7.333 9l-.444-1.556L8 6.5zM3.414 17c0 .534.208 1.036.586 1.414L5.586 20c.378.378.88.586 1.414.586s1.036-.208 1.414-.586L20 8.414c.378-.378.586-.88.586-1.414S20.378 5.964 20 5.586L18.414 4c-.756-.756-2.072-.756-2.828 0L4 15.586c-.378.378-.586.88-.586 1.414zM17 5.414 18.586 7 15 10.586 13.414 9 17 5.414z"
></path>
</svg>
<p>Saturation</p>
</li>
<li onclick="Download_btn()">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="#ccc"
style="transform: scale(1.5)"
>
<path d="M11 16h2V7h3l-4-5-4 5h3z"></path>
<path
d="M5 22h14c1.103 0 2-.897 2-2v-9c0-1.103-.897-2-2-2h-4v2h4v9H5v-9h4V9H5c-1.103 0-2 .897-2 2v9c0 1.103.897 2 2 2z"
></path>
</svg>
<p>Export</p>
</li>
</ul>
</div>
<div class="content">
<p id="logo">PIXEL REFIT</p>
<div class="choose_image">
<div class="upload_img_box">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="#ccc"
style="transform: scale(1.6)"
>
<path
d="m9 13 3-4 3 4.5V12h4V5c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h8v-4H5l3-4 1 2z"
></path>
<path d="M19 14h-2v3h-3v2h3v3h2v-3h3v-2h-3z"></path>
</svg>
<input
type="file"
name="selectedImage"
id="selectedImage"
accept="image/jpeg, image/png"
/>
<p id="hint">choose image from folder</p>
</div>
</div>
<canvas id="image_canvas"></canvas>
<div class="image_holder">
<button id="remove_img_btn">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
style="transform: scale(1.2)"
fill="#02dac5"
>
<path
d="M16 2H8C4.691 2 2 4.691 2 8v13a1 1 0 0 0 1 1h13c3.309 0 6-2.691 6-6V8c0-3.309-2.691-6-6-6zm.706 13.293-1.414 1.414L12 13.415l-3.292 3.292-1.414-1.414 3.292-3.292-3.292-3.292 1.414-1.414L12 10.587l3.292-3.292 1.414 1.414-3.292 3.292 3.292 3.292z"
></path>
</svg>
</button>
<img src="" alt="img" id="image" />
</div>
<div class="options">
<div class="option">
<input
type="range"
max="200"
min="0"
value="100"
id="brightness"
class="slider"
/>
<p id="brightVal" class="show_value">100</p>
</div>
<div class="option">
<input
type="range"
max="40"
min="0"
value="0"
id="blur"
class="slider"
/>
<p id="blurVal" class="show_value">0</p>
</div>
<div class="option">
<input
type="range"
max="100"
min="0"
value="0"
id="greyScale"
class="slider"
/>
<p id="greyVal" class="show_value">0</p>
</div>
<div class="option">
<input
type="range"
max="100"
min="0"
value="0"
id="hue"
class="slider"
/>
<p id="hueVal" class="show_value">0</p>
</div>
<div class="option">
<input
type="range"
max="100"
min="1"
value="1"
id="saturation"
class="slider"
/>
<p id="saturationVal" class="show_value">1</p>
</div>
</div>
<button id="clearAll">
<span>Reset</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
fill="#111"
style="transform: scale(1)"
>
<path
d="M12 16c1.671 0 3-1.331 3-3s-1.329-3-3-3-3 1.331-3 3 1.329 3 3 3z"
></path>
<path
d="M20.817 11.186a8.94 8.94 0 0 0-1.355-3.219 9.053 9.053 0 0 0-2.43-2.43 8.95 8.95 0 0 0-3.219-1.355 9.028 9.028 0 0 0-1.838-.18V2L8 5l3.975 3V6.002c.484-.002.968.044 1.435.14a6.961 6.961 0 0 1 2.502 1.053 7.005 7.005 0 0 1 1.892 1.892A6.967 6.967 0 0 1 19 13a7.032 7.032 0 0 1-.55 2.725 7.11 7.11 0 0 1-.644 1.188 7.2 7.2 0 0 1-.858 1.039 7.028 7.028 0 0 1-3.536 1.907 7.13 7.13 0 0 1-2.822 0 6.961 6.961 0 0 1-2.503-1.054 7.002 7.002 0 0 1-1.89-1.89A6.996 6.996 0 0 1 5 13H3a9.02 9.02 0 0 0 1.539 5.034 9.096 9.096 0 0 0 2.428 2.428A8.95 8.95 0 0 0 12 22a9.09 9.09 0 0 0 1.814-.183 9.014 9.014 0 0 0 3.218-1.355 8.886 8.886 0 0 0 1.331-1.099 9.228 9.228 0 0 0 1.1-1.332A8.952 8.952 0 0 0 21 13a9.09 9.09 0 0 0-.183-1.814z"
></path>
</svg>
</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>