-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathindex.html
127 lines (127 loc) · 6.08 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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype html>
<head>
<title>Point Jarvis</title>
<link rel="shortcut icon" href="favicon.png">
<link rel="image_src" href="img/logo_black.png" />
<link rel="stylesheet" href="css/style.css" />
<meta name="description" content="Point Jarvis is a free tiny JavaScript library that acts like IronMan's Jarvis. It uses browser embedded speech recognition and www.voicerss.org's text to speech API to bring you a part of Jarvis." />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta property="og:image" content="http://ravenjohn.github.io/.jarvis.js/img/logo_black.png"/>
<meta property="og:title" content="Point Jarvis. Get ready to be Iron Man"/>
<meta property="og:url" content="http://ravenjohn.github.io/.jarvis.js/"/>
<meta property="og:site_name" content="Point Jarvis"/>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=573083026063875";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div id="home">
<div id="inner-home">
<img src="img/logo_logotype_glow.png" alt="Point Jarvis Logo"/>
<p id="home-p">Point Jarvis is a free tiny JavaScript library that acts like IronMan's Jarvis. It uses browser embedded speech recognition and www.voicerss.org's text to speech API to bring you a part of Jarvis.</p>
<button id="demo-button">Launch Demo</button>
</div>
</div>
<div id="why">
<div id="inner-why">
<span class="title">Why .jarvis.js?</span>
<br /><br /><br />
<img src="img/why_jarvis.png" alt="Why Jarvis?" height="405px"/>
<br />
</div>
</div>
<footer>
<br />
<span class="title">Game on.</span>
<br /><br />
<p>Come and visit me on <a href="//github.com/ravenjohn/.jarvis.js" target="_blank">Github</a> to get the latest version of Point Jarvis. Don't forget to like or leave a comment.</p>
<br /><br />
<br /><br />
<a href="mailto:[email protected]" target="_blank"><img src="img/insidepage_email_icon.png"></a>
<a href="//facebook.com/ven.lagrimas" target="_blank"><img src="img/insidepage_facebook_icon.png"></a>
<a href="//twitter.com/ravenlagrimas" target="_blank"><img src="img/insidepage_twitter_icon.png"></a>
<br /><br />
<div class="fb-like" data-href="http://ravenjohn.github.io/.jarvis.js" data-width="The pixel width of the plugin" data-height="The pixel height of the plugin" data-colorscheme="dark" data-layout="standard" data-action="like" data-show-faces="true" data-send="false"></div>
<br />
<div class="fb-comments" data-href="http://ravenjohn.github.io/.jarvis.js" data-colorscheme="dark" data-numposts="5" data-width="The pixel width of the plugin"></div>
<p id="thnks"><small>A big thanks to <a href="mailto:[email protected]">Jean Manas</a> for designing this site. P.S. This is my girlfriend, don't mess with her.</small></p>
</footer>
<script src="//code.jquery.com/jquery.js"></script>
<script src="//cdn.jsdelivr.net/jarvis.js/1.0.0/jarvis.min.js"></script>
<script>
jarvis.setVoiceKey('814690c9d02c4c15be28146ee9f6ac27');
jarvis.learn([
["hello jarvis", function(){
jarvis.speak("Good! Let's try more, how about you say your name.");
$('#home-p').html("Good! Let's try more, how about you say your name. 'I'm 'your_name''");
}],
["I'm :name", function(name){
$('#home-p').html("Your name is '" + name + "' right? Say yes or no.");
jarvis.speak("Your name is '" + name + "' right? Say yes or no.");
jarvis._tmp_name = name;
}],
["yes", function(){
jarvis._name = jarvis._tmp_name;
delete jarvis._tmp_name;
jarvis.speak("Name confirmed! Say 'goodbye'");
$('#home-p').html("Name confirmed! Say goodbye.");
}],
["no", function(name){
jarvis._name = jarvis._tmp_name;
delete jarvis._tmp_name;
jarvis.speak("Say your name again");
$('#home-p').html("Say your name again. I'm 'your_name'");
}],
["good bye", function(name){
jarvis.speak("Thank you "+jarvis._name);
$('#home-p').html("Thank you "+jarvis._name+"!");
$('#demo-button').html('Relaunch demo');
$('#demo-button').fadeIn();
}]
]);
jarvis.onnomatch = function(){
jarvis.speak('Sorry. I can\' understand you.');
};
jarvis.onrecognize = function(a){
console.log(a);
};
jarvis.onstart = function(){
$('#demo-button').fadeOut();
$('#home-p').html("Let's get started. Pump up your speakers or put in your earplugs and say 'Hello Jarvis'");
jarvis.speak("Let's get started. Pump up your speakers or put in your earplugs and say 'Hello Jarvis");
};
jarvis.onerror = function(e){
if(e.error == "not-allowed"){
$('#home-p').html("Jarvis was denied. X( Please allow Jarvis to use your speaker. Try checking the camera icon on the right side bar of your address bar");
jarvis.speak("I was denied. Please allow me to use your speaker.");
}
else if(e.error == "network"){
$('#home-p').html("Something is wrong with your network. Try refreshing the page.");
jarvis.speak("Something is wrong with your network. Try refreshing the page.");
}
$('#demo-button').fadeIn();
$('#demo-button').html('Try Again');
};
$('#demo-button').click(function(){
jarvis.start();
$('#home-p').html("Please allow us to use your microphones.");
});
$divs = $('#home, #why');
$innerHome = $('#inner-home');
$innerWhy = $('#inner-why');
window.onresize = function(){
var size = (window.innerHeight > window.innerWidth ? window.innerHeight : window.innerWidth);
$divs.css('height',window.innerHeight);
$divs.css('background-size', size+'px '+size+'px');
$innerHome.css('top', ((window.innerHeight/2)-($innerHome.height()/2))+'px');
$innerWhy.css('top', ((window.innerHeight/2)-($innerWhy.height()/2))+'px');
};
window.onresize();
</script>
</body>
</html>