<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Colorization app</title>
<style>
.back{
height:100%;
width:100%;
position: absolute;
background-color: yellow;
top:0px;
padding: 10px;
}
#draw_canvas {
height: 200%;
border: 3px solid black;
background-image: linear-gradient(rgba(60,60,60,.85), rgba(60,60,60,.85)), url(../static/{{img_path}});
background-color: #c7b39b;
background-size: 100%;
}
</style>
</head>
<body>
<div align="left" style ="margin : 5px; margin-left : 0px">
<input type="button" onclick="location.href='/';" value="Home" />
</div>
<p style="margin: 0; padding: 0">
Left click - colorize, right hold - remove with rectangle, left click on result - use corresponding color.
</p>
<hr style ="margin: 0; padding: 0">
<p><table>
<tr>
<td>
<table>
<tr>
<td><button style="background-color: #000000; height: 20px; width: 20px;" onclick="color('#000000')"></button>
<td><button style="background-color: #B0171F; height: 20px; width: 20px;" onclick="color('#B0171F')"></button>
</tr>
<tr>
<td><button style="background-color: #DA70D6; height: 20px; width: 20px;" onclick="color('#DA70D6')"></button>
<td><button style="background-color: #8A2BE2; height: 20px; width: 20px;" onclick="color('#8A2BE2')"></button>
</tr>
<tr>
<td><button style="background-color: #0000FF; height: 20px; width: 20px;" onclick="color('#0000FF')"></button>
<td><button style="background-color: #4876FF; height: 20px; width: 20px;" onclick="color('#4876FF')"></button>
</tr>
<tr>
<td><button style="background-color: #CAE1FF; height: 20px; width: 20px;" onclick="color('#CAE1FF')"></button>
<td><button style="background-color: #6E7B8B; height: 20px; width: 20px;" onclick="color('#6E7B8B')"></button>
</tr>
<tr>
<td><button style="background-color: #00C78C; height: 20px; width: 20px;" onclick="color('#00C78C')"></button>
<td><button style="background-color: #00FA9A; height: 20px; width: 20px;" onclick="color('#00FA9A')"></button>
</tr>
<tr>
<td><button style="background-color: #00FF7F; height: 20px; width: 20px;" onclick="color('#00FF7F')"></button>
<td><button style="background-color: #00C957; height: 20px; width: 20px;" onclick="color('#00C957')"></button>
</tr>
<tr>
<td><button style="background-color: #3D9140; height: 20px; width: 20px;" onclick="color('#3D9140')"></button>
<td><button style="background-color: #32CD32; height: 20px; width: 20px;" onclick="color('#32CD32')"></button>
</tr>
<tr>
<td><button style="background-color: #00EE00; height: 20px; width: 20px;" onclick="color('#00EE00')"></button>
<td><button style="background-color: #008B00; height: 20px; width: 20px;" onclick="color('#008B00')"></button>
</tr>
<tr>
<td><button style="background-color: #76EE00; height: 20px; width: 20px;" onclick="color('#76EE00')"></button>
<td><button style="background-color: #CAFF70; height: 20px; width: 20px;" onclick="color('#CAFF70')"></button>
</tr>
<tr>
<td><button style="background-color: #FFFF00; height: 20px; width: 20px;" onclick="color('#FFFF00')"></button>
<td><button style="background-color: #CDCD00; height: 20px; width: 20px;" onclick="color('#CDCD00')"></button>
</tr>
<tr>
<td><button style="background-color: #FFF68F; height: 20px; width: 20px;" onclick="color('#FFF68F')"></button>
<td><button style="background-color: #FFFACD; height: 20px; width: 20px;" onclick="color('#FFFACD')"></button>
</tr>
<tr>
<td><button style="background-color: #FFEC8B; height: 20px; width: 20px;" onclick="color('#FFEC8B')"></button>
<td><button style="background-color: #FFD700; height: 20px; width: 20px;" onclick="color('#FFD700')"></button>
</tr>
<tr>
<td><button style="background-color: #F5DEB3; height: 20px; width: 20px;" onclick="color('#F5DEB3')"></button>
<td><button style="background-color: #FFE4B5; height: 20px; width: 20px;" onclick="color('#FFE4B5')"></button>
</tr>
<tr>
<td><button style="background-color: #EECFA1; height: 20px; width: 20px;" onclick="color('#EECFA1')"></button>
<td><button style="background-color: #FF9912; height: 20px; width: 20px;" onclick="color('#FF9912')"></button>
</tr>
<tr>
<td><button style="background-color: #8E388E; height: 20px; width: 20px;" onclick="color('#8E388E')"></button>
<td><button style="background-color: #7171C6; height: 20px; width: 20px;" onclick="color('#7171C6')"></button>
</tr>
<tr>
<td><button style="background-color: #7D9EC0; height: 20px; width: 20px;" onclick="color('#7D9EC0')"></button>
<td><button style="background-color: #388E8E; height: 20px; width: 20px;" onclick="color('#388E8E')"></button>
</tr>
<tr>
<td><button style="background-color: #71C671; height: 20px; width: 20px;" onclick="color('#71C671')"></button>
<td><button style="background-color: #8E8E38; height: 20px; width: 20px;" onclick="color('#8E8E38')"></button>
</tr>
<tr>
<td><button style="background-color: #C5C1AA; height: 20px; width: 20px;" onclick="color('#C5C1AA')"></button>
<td><button style="background-color: #C67171; height: 20px; width: 20px;" onclick="color('#C67171')"></button>
</tr>
<tr>
<td><button style="background-color: #555555; height: 20px; width: 20px;" onclick="color('#555555')"></button>
<td><button style="background-color: #848484; height: 20px; width: 20px;" onclick="color('#848484')"></button>
</tr>
<tr>
<td><button style="background-color: #FFFFFF; height: 20px; width: 20px;" onclick="color('#FFFFFF')"></button>
<td><button style="background-color: #EE0000; height: 20px; width: 20px;" onclick="color('#EE0000')"></button>
</tr>
<tr>
<td><button style="background-color: #FF4040; height: 20px; width: 20px;" onclick="color('#FF4040')"></button>
<td><button style="background-color: #EE6363; height: 20px; width: 20px;" onclick="color('#EE6363')"></button>
</tr>
<tr>
<td><button style="background-color: #FFC1C1; height: 20px; width: 20px;" onclick="color('#FFC1C1')"></button>
<td><button style="background-color: #FF7256; height: 20px; width: 20px;" onclick="color('#FF7256')"></button>
</tr>
<tr>
<td><button style="background-color: #FF4500; height: 20px; width: 20px;" onclick="color('#FF4500')"></button>
<td><button style="background-color: #F4A460; height: 20px; width: 20px;" onclick="color('#F4A460')"></button>
</tr>
<tr>
<td><button style="background-color: #FF8000; height: 20px; width: 20px;" onclick="color('FF8000')"></button>
<td><button style="background-color: #FFD700; height: 20px; width: 20px;" onclick="color('#FFD700')"></button>
</tr>
<tr>
<td><button style="background-color: #8B864E; height: 20px; width: 20px;" onclick="color('#8B864E')"></button>
<td><button style="background-color: #9ACD32; height: 20px; width: 20px;" onclick="color('#9ACD32')"></button>
</tr>
<tr>
<td><button style="background-color: #66CD00; height: 20px; width: 20px;" onclick="color('#66CD00')"></button>
<td><button style="background-color: #BDFCC9; height: 20px; width: 20px;" onclick="color('#BDFCC9')"></button>
</tr>
<tr>
<td><button style="background-color: #76EEC6; height: 20px; width: 20px;" onclick="color('#76EEC6')"></button>
<td><button style="background-color: #40E0D0; height: 20px; width: 20px;" onclick="color('#40E0D0')"></button>
</tr>
<tr>
<td><button style="background-color: #E0EEEE; height: 20px; width: 20px;" onclick="color('#E0EEEE')"></button>
<td><button style="background-color: #98F5FF; height: 20px; width: 20px;" onclick="color('#98F5FF')"></button>
</tr>
<tr>
<td><button style="background-color: #33A1C9; height: 20px; width: 20px;" onclick="color('#33A1C9')"></button>
<td><button style="background-color: #F0F8FF; height: 20px; width: 20px;" onclick="color('#F0F8FF')"></button>
</tr>
<tr>
<td><button style="background-color: #4682B4; height: 20px; width: 20px;" onclick="color('#4682B4')"></button>
<td><button style="background-color: #C6E2FF; height: 20px; width: 20px;" onclick="color('#C6E2FF')"></button>
</tr>
<tr>
<td><button style="background-color: #9B30FF; height: 20px; width: 20px;" onclick="color('#9B30FF')"></button>
<td><button style="background-color: #EE82EE; height: 20px; width: 20px;" onclick="color('#EE82EE')"></button>
</tr>
<tr>
<td><button style="background-color: #FFC0CB; height: 20px; width: 20px;" onclick="color('#FFC0CB')"></button>
<td><button style="background-color: #7CFC00; height: 20px; width: 20px;" onclick="color('#7CFC00')"></button>
</tr>
<tr>
<input type="color" id="color">
</tr>
</table>
</td>
<td>
<div style="width: 1150px; height: 800px; overflow: auto"><canvas align = "center" id="draw_canvas" width="{{width}}" height="{{height}}"></canvas></div>
</td>
<td>
<canvas id='result'></canvas>
</td>
</tr>
</table></p>
<button style="height: 20px; width: 80px" onclick="reset()">Clear</button>
<button style="height: 20px; width: 80px" onclick="colorize()" >Colorize</button>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="/static/js/draw.js">
</script>
</body>
</html>