This repository has been archived by the owner on Sep 13, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (85 loc) · 3.69 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<head>
<title>Leapcha jQuery Plugin Example</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.css" media="screen" />
<link rel="stylesheet" href="css/leapcha.css"/>
</head>
<body>
<div class="container-narrow">
<div class="masthead">
<!--ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul-->
<h2 class="muted">Leapcha</h2>
</div>
<hr>
<div class="jumbotron">
<h2>Captcha + jQuery + Leap Motion</h2>
<p class="lead">A simple POC in the form of a jQuery plugin, using the Leap Motion to draw captcha shapes.</p>
<a class="btn btn-large btn-info" href="https://github.com/barbagallo/leapcha">Go to Github Page</a>
</div>
<hr>
<h3>Here's a simple example of a form using Leapcha:</h3>
<!-- Sample Form: -->
<form action="#" method="post" id="contact-form">
<fieldset style="float:left; width: 300px;">
<legend>Basic Info</legend>
<label>Name</label>
<input type="text" name="name" placeholder="Name" />
<label>E-mail</label>
<input type="text" name="email" placeholder="E-mail" />
<label class="checkbox">
<input type="checkbox"> Some checkbox
</label>
</fieldset>
<fieldset style="float:right; width: 300px;">
<legend>Captcha</legend>
<label>Please draw the shape below or try a <a href="index.html">new one</a>.</label>
<div id="lc-challenge"></div>
<!--button type="submit" class="btn">Submit</button-->
</fieldset>
<fieldset style="padding: 20px 0; clear: both;">
<canvas id="lc-canvas">
Your browser doesn't support the canvas element - please visit in a modern browser.
</canvas>
</fieldset>
<fieldset>
<input type="submit" id="send-info" value="submitform.php" class="btn btn-large btn-primary disabled" disabled="disabled" />
</fieldset>
</form>
<hr>
<div class="footer">
<p>Copyright © 2013 John Paul Barbagallo.</p>
<p><a href="https://twitter.com/jbarbagallo" class="twitter-follow-button" data-show-count="false" data-lang="en">Follow @jbarbagallo</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
</div>
</div>
</body>
<script src="js/leap.js"></script>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.leapcha.1.0.js"></script>
<script>
$(document).ready(function(){
$('#contact-form').leapcha({
canvasId: '#lc-canvas',
divId: '#lc-challenge',
shapes: ['triangle', 'circle', 'check', 'zigzag', 'arrow', 'pigtail', 'star'],
// -- NOTE: There is an default onSuccess method, it's similar to this method below...
onSuccess: function($form, $canvas, ctx) {
var opts = this,
$submit = opts.submitId ? $form.find(opts.submitId) : $form.find('input[type=submit]:disabled');
// Set the form action:
$form.attr( 'action', $(opts.actionId).val() );
// Enable the submit button:
$submit.prop('disabled', false).removeClass('disabled');
return;
}
});
});
</script>
</html>