<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
title
>Simple Image Editor</
title
>
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
<
link
rel
=
"stylesheet"
href
=
"style.css"
>
<
script
defer
src
=
</
script
>
</
head
>
<
body
>
<
nav
class
=
"green"
>
<
div
class
=
"nav-wrapper container"
>
<
span
class
=
"nav-header"
>
Simple Image Filters
</
span
>
<
ul
class
=
"right image-save"
>
<
button
class
=
"btn btn-flat blue white-text"
onclick
=
"saveImage()"
>
Save
</
button
>
<
button
class
=
"btn btn-flat red white-text"
onclick
=
"resetImage()"
>
Reset
</
button
>
</
ul
>
</
div
>
</
nav
>
<
img
id
=
"sourceImage"
crossorigin
=
"anonymous"
>
<
div
class
=
"image-preview"
>
<
canvas
id
=
"canvas"
height
=
"0"
></
canvas
>
</
div
>
<
div
class
=
"container app"
>
<
div
class
=
"help-text center-align"
>
<
h5
>Please Upload an Image to Start Editing</
h5
>
</
div
>
<
div
class
=
"image-controls"
>
<
h6
>Image Controls</
h6
>
<
div
class
=
"row"
>
<
div
class
=
"col s6"
>
<
span
class
=
"range-field"
>
<
label
for
=
"brightnessSlider"
>
Brightness
</
label
>
<
input
id
=
"brightnessSlider"
type
=
"range"
value
=
"100"
min
=
"0"
max
=
"300"
onchange
=
"applyFilter()"
>
</
span
>
</
div
>
<
div
class
=
"col s6"
>
<
span
class
=
"range-field"
>
<
label
for
=
"contrastSlider"
>
Contrast
</
label
>
<
input
id
=
"contrastSlider"
type
=
"range"
value
=
"100"
min
=
"0"
max
=
"200"
onchange
=
"applyFilter()"
>
</
span
>
</
div
>
</
div
>
<
div
class
=
"row"
>
<
div
class
=
"col s6"
>
<
span
class
=
"range-field"
>
<
label
for
=
"grayscaleSlider"
>
Grayscale
</
label
>
<
input
id
=
"grayscaleSlider"
type
=
"range"
value
=
"0"
min
=
"0"
max
=
"100"
onchange
=
"applyFilter()"
>
</
span
>
</
div
>
<
div
class
=
"col s6"
>
<
span
class
=
"range-field"
>
<
label
for
=
"saturationSlider"
>
Saturation
</
label
>
<
input
id
=
"saturationSlider"
type
=
"range"
value
=
"100"
min
=
"0"
max
=
"300"
onchange
=
"applyFilter()"
>
</
span
>
</
div
>
</
div
>
<
div
class
=
"row"
>
<
div
class
=
"col s6"
>
<
span
class
=
"range-field"
>
<
label
for
=
"sepiaSlider"
>
Sepia
</
label
>
<
input
id
=
"sepiaSlider"
type
=
"range"
value
=
"0"
min
=
"0"
max
=
"200"
onchange
=
"applyFilter()"
>
</
span
>
</
div
>
<
div
class
=
"col s6"
>
<
span
class
=
"range-field"
>
<
label
for
=
"hueRotateSlider"
>
Hue
</
label
>
<
input
id
=
"hueRotateSlider"
type
=
"range"
value
=
"0"
min
=
"0"
max
=
"360"
onchange
=
"applyFilter()"
>
</
span
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"preset-filters"
>
<
h6
>Preset Filters</
h6
>
<
button
class
=
"btn green"
onclick
=
"brightenFilter()"
>
Brighten
</
button
>
<
button
class
=
"btn green"
onclick
=
"bwFilter()"
>
Black and White
</
button
>
<
button
class
=
"btn green"
onclick
=
"funkyFilter()"
>
Funky
</
button
>
<
button
class
=
"btn green"
onclick
=
"vintageFilter()"
>
Vintage
</
button
>
</
div
>
<
div
class
=
"file-controls"
>
<
h6
>File Controls</
h6
>
<
a
id
=
"link"
></
a
>
<
div
class
=
"file-field input-field"
>
<
div
class
=
"btn green"
>
<
span
>Upload Image</
span
>
<
input
type
=
"file"
accept
=
"image/*"
onchange
=
"uploadImage(event)"
>
</
div
>
<
div
class
=
"file-path-wrapper"
>
<
input
class
=
"file-path"
type
=
"text"
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
src
=
"app.js"
></
script
>
</
body
>
</
html
>