UNPKG

2.88 kBHTMLView Raw
1<!doctype html>
2<html lang="en">
3
4<head>
5 <meta charset="utf-8">
6 <title>Signature Pad demo</title>
7 <meta name="description"
8 content="Signature Pad - HTML5 canvas based smooth signature drawing using variable width spline interpolation.">
9
10 <meta name="viewport"
11 content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
12
13 <meta name="apple-mobile-web-app-capable" content="yes">
14 <meta name="apple-mobile-web-app-status-bar-style" content="black">
15
16 <link rel="stylesheet" href="css/signature-pad.css">
17
18 <script type="text/javascript">
19 var _gaq = _gaq || [];
20 _gaq.push(['_setAccount', 'UA-39365077-1']);
21 _gaq.push(['_trackPageview']);
22
23 (function () {
24 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
25 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
26 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
27 })();
28 </script>
29</head>
30
31<body onselectstart="return false">
32 <span id="forkongithub">
33 <a href="https://github.com/szimek/signature_pad">Fork me on GitHub</a>
34 </span>
35
36 <div id="signature-pad" class="signature-pad">
37 <div id="canvas-wrapper" class="signature-pad--body">
38 <canvas></canvas>
39 </div>
40 <div class="signature-pad--footer">
41 <div class="description">Sign above</div>
42
43 <div class="signature-pad--actions">
44 <div class="column">
45 <button type="button" class="button clear" data-action="clear">Clear</button>
46 <button type="button" class="button" data-action="undo" title="Ctrl-Z">Undo</button>
47 <button type="button" class="button" data-action="redo" title="Ctrl-Y">Redo</button>
48 <br/>
49 <button type="button" class="button" data-action="change-color">Change color</button>
50 <button type="button" class="button" data-action="change-width">Change width</button>
51 <button type="button" class="button" data-action="change-background-color">Change background color</button>
52
53 </div>
54 <div class="column">
55 <button type="button" class="button save" data-action="save-png">Save as PNG</button>
56 <button type="button" class="button save" data-action="save-jpg">Save as JPG</button>
57 <button type="button" class="button save" data-action="save-svg">Save as SVG</button>
58 <button type="button" class="button save" data-action="save-svg-with-background">Save as SVG with
59 background</button>
60 </div>
61 </div>
62
63 <div>
64 <button type="button" class="button" data-action="open-in-window">Open in Window</button>
65 </div>
66 </div>
67 </div>
68
69 <script src="js/signature_pad.umd.min.js"></script>
70 <script src="js/app.js"></script>
71</body>
72
73</html>