-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
37 lines (31 loc) · 1.49 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Imagedit</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
</head>
<style id='mainImageBackgroundImage'>
</style>
<style id='mainImageEdits'>
</style>
<body>
<h1 id='imgSrcForm'><input type="text" placeholder="Enter image source here..." spellcheck="false"><button onclick='openImage(this.parentElement.getElementsByTagName("input")[0].value)'>Go!</button></body></h1>
<div id="mainImageEditArea" style='display: none;'>
<div id="mainImage"></div>
<div id="imageEditing">
<div><p>Blur (px)</p><input min='0' class="blur" unit="px" type='number'></div>
<div><p>Grayscale (%)</p><input min='0' class="grayscale" unit="%" type='number'></div>
<div><p>Invert (%)</p><input min='0' class="invert" unit="%" type='number'></div>
<div><p>Sepia (%)</p><input min='0' class="sepia" unit="%" type='number'></div>
<div><p>Color Wheel Rotate (deg)</p><input class="hue-rotate" unit="deg" type='number'></div>
<div><p>Opacity (%)</p><input min='0' value='100' class="opacity" unit="%" type='number'></div>
<div><p>Brightness (%)</p><input min='0' value='100' class="brightness" unit="%" type='number'></div>
<div><p>Contrast (%)</p><input min='0' value='100' class="contrast" unit="%" type='number'></div>
</div>
</div>
</body>
<script type="text/javascript" src='script.js'></script>
</html>