<!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>