-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpaint.html
60 lines (56 loc) · 2.98 KB
/
paint.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>Web-based Paint Program</title>
<link href="favicon.ico" rel="shortcut icon" />
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/colpick.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<script type="text/javascript" src="js/colpick.js"></script>
<script type="text/javascript" src="js/paint.js"></script>
</head>
<body>
<header>
<h1>Web-based Paint Program</h1>
</header>
<div id="container">
<canvas id="drawPan" width="800" height="500">
<p>Unfortunately, your browser is currently unsupported by our web application. We are sorry for the inconvenience. Please use one of the supported browsers listed below, or draw the image you want using an offline tool.</p><p>Supported browsers: <a href="http://www.opera.com/">Opera</a>, <a href="http://www.mozilla.com/">Firefox</a>, <a href="http://www.apple.com/safari">Safari</a>, and <a href="http://www.konqueror.org/">Konqueror</a>.</p>
</canvas>
<!--<canvas id="imageTemp" width="1000" height="500"></canvas> -->
</div>
<div id="statusUpdate" class="floatLeft"></div>
<div class="floatRight">
<div id="tool_container" class="container box">
<div class="containerHeader">ToolBox</div>
<div class="containerBody">
<span class="tools" data-value="circle" title="Circle"><img src="img/tool_circle.png" alt="Cir"/></span>
<span class="tools" data-value="ellipse" title="Ellipse"><img src="img/tool_ellipse.png" alt="Ellip"/></span>
<span class="tools" data-value="rect" title="Rectangle"><img src="img/tool_rect.png" alt="Rect"/></span>
<span class="tools" data-value="line" title="Line"><img src="img/tool_line.png" alt="Line"/></span>
<span class="tools" data-value="pencil" title="Pencil"><img src="img/tool_pencil.png" alt="Pen"/></span>
<div class="clearFix"></div>
<span class="tools" data-value="translate" title="Move"><img src="img/tool_move.png" alt="Mov"/></span>
<span class="tools" data-value="rotate" title="Rotate"><img src="img/tool_rotate.png" alt="Rot"/></span>
<span class="tools" data-value="scale" title="Zoom"><img src="img/tool_zoom.png" alt="Zm"/></span>
<div class="clearFix"></div>
<span class="tools" id="colorpicker" title="Line Color"></span>
<div class="clearFix"></div>
</div>
</div>
<div id="layer_container" class="container box floatLeft">
<div class="containerHeader">Layer <img id="newLayer" src="img/layer_add.png" class="floatRight" /></div>
<div class="containerBody floatLeft" id="layerList">
<!-- <ul id="layerList">
</ul> -->
</div>
</div>
</div>
<footer>
<span class="floatRight">Developed By: Laxman Maharjan</span>
</footer>
</body>
</html>