2012-11-22 08:59:52 +08:00
<!DOCTYPE html>
< html >
< head >
<!-- <meta http - equiv="refresh" content="5" /> -->
2012-11-26 07:54:53 +08:00
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" / >
< meta name = "apple-mobile-web-app-capable" content = "yes" / >
< meta name = "apple-mobile-web-app-status-bar-style" content = "black" / >
< meta name = "keywords" content = "ambc, eyesoff, youtube, speech, voice" / >
< meta name = "application-name" content = "EyesOff" / >
< meta name = "author" content = "Ambrose Chua Chi Meng (AmbC)" / >
2012-11-22 08:59:52 +08:00
< title > EyesOff< / title >
2012-11-26 07:54:53 +08:00
< link href = 'http://fonts.googleapis.com/css?family=Ubuntu:300,400,700' rel = 'stylesheet' type = 'text/css' / >
2012-11-22 08:59:52 +08:00
< style >
2012-11-24 17:27:14 +08:00
::-moz-selection {
background-color: rgba(200, 100, 0, 0.7);
}
::selection {
background-color: rgba(200, 100, 0, 0.7);
}
2012-11-22 08:59:52 +08:00
* {
padding: 0;
margin: 0;
2012-11-24 17:27:14 +08:00
outline:none;
2012-11-22 08:59:52 +08:00
}
body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-size: 25px;
2012-11-24 16:25:43 +08:00
font-family: "Ubuntu Light", Ubuntu, Arial;
2012-11-22 08:59:52 +08:00
color: #fff;
background-color: #000;
2012-11-26 07:54:53 +08:00
opacity: 0.99;
2012-11-22 08:59:52 +08:00
}
2012-11-24 17:27:14 +08:00
#appa, #appb, #intro {
2012-11-22 08:59:52 +08:00
padding: 40px;
}
::-moz-select {
background-color: rgba(200, 200, 0, 0.5);
}
h1 {
font-size: 50px;
font-weight: 0;
padding: 20px;
}
p {
padding: 5px;
}
.coolbox {
2012-11-24 16:25:43 +08:00
font-family: "Ubuntu Light", Ubuntu, Arial;
2012-11-22 08:59:52 +08:00
font-size: 25px;
border: 1px solid rgb(200, 100, 0);
border-bottom-color: rgb(180, 80, 0);
border-right-color: rgb(180, 80, 0);
border-radius: 10px;
padding: 10px 15px;
margin: 20px 3px;
background-color: rgba(200, 100, 0, 0.2);
color: #fff;
2012-11-24 16:25:43 +08:00
cursor: pointer;
2012-11-22 08:59:52 +08:00
}
2012-11-24 17:27:14 +08:00
.coolbox:hover {
border: 1px solid rgb(255, 155, 0);
border-bottom-color: rgb(235, 135, 0);
border-right-color: rgb(235, 135, 0);
background-color: rgba(200, 100, 0, 0.3);
}
.coolbox:active {
border: 1px solid rgb(220, 120, 0);
border-bottom-color: rgb(200, 100, 0);
border-right-color: rgb(200, 100, 0);
background-color: rgba(200, 100, 0, 0.25);
}
input.coolbox:focus {
border: 1px solid rgb(230, 130, 0);
border-bottom-color: rgb(210, 110, 0);
border-right-color: rgb(210, 110, 0);
background-color: rgba(200, 100, 0, 0.28);
}
2012-11-22 08:59:52 +08:00
.nextpg {
margin: 15px 40px;
width: 90px;
}
#intro {
display: block;
}
2012-11-26 07:54:53 +08:00
#appa, #appb {
2012-11-22 08:59:52 +08:00
display: none;
}
2012-11-26 07:54:53 +08:00
#searchbox, #toolsabox {
2012-11-22 08:59:52 +08:00
color: #aaa;
}
2012-11-24 16:25:43 +08:00
.headsup {
font-size: 15px;
}
#showmewhy {
cursor: pointer;
2012-11-26 07:54:53 +08:00
}
#brightness {
width: 70px;
font-size: 12px;
position: fixed;
bottom: 10px;
right: 10px;
margin: 0;
}
#playerframe {/*
width: 1px;
height: 1px;*/
min-height: 0;
min-width: 0;
background-color: #000;
display: none;
2012-11-26 11:09:31 +08:00
}/*
.result a {
display: block;
}*/
#results {
position: absolute;
top: 220px;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
padding: 40px 60px;
2012-11-26 07:54:53 +08:00
}
.result {
2012-11-26 11:09:31 +08:00
background-color: rgba(200, 100, 0, 0.0);
border: 1px solid rgba(220, 120, 0, 0.1);
border-bottom-color: rgba(200, 100, 0, 0.1);
border-right-color: rgba(200, 100, 0, 0.1);
border-radius: 10px;
padding: 8px;
margin: 8px;
display: block;
height: 187px;
color: #fff;
}
.result .resulttext {
padding: 0px 15px;
margin: 0px 10px;
}
.result h2 {
display: block;
padding: 0;
margin: 0px;
font-size: 40px;
font-weight: 0;
}
.result p, .result span {
padding: 0;
margin: 0;
font-size: 20px;
overflow: hidden;
text-overflow: ellipsis;
width: auto;
white-space: nowrap;
font-weight: 0;
}
.result span {
margin: 1px;
color: #ccc;
}
.result .resultimg {/*
display: block;*/
vertical-align: top;
float: left;
}
.result a {
color: inherit;
text-emphasis: none;
text-decoration: none;
}
.result:hover {
background-color: rgba(200, 100, 0, 0.2);
border: 1px solid rgba(220, 120, 0, 0.3);
border-bottom-color: rgba(200, 100, 0, 0.3);
border-right-color: rgba(200, 100, 0, 0.3);
}
.result:active {
background-color: rgba(200, 100, 0, 0.15);
border: 1px solid rgba(220, 120, 0, 0.25);
border-bottom-color: rgba(200, 100, 0, 0.25);
border-right-color: rgba(200, 100, 0, 0.25);
}
.result:hover h2 {
color: #99f;
}
.result h2:hover {
text-decoration: underline;
}
.result h2:active {
text-decoration: underline;
color: #88f;
}
.red {
color: #f00;
2012-11-24 16:25:43 +08:00
}
2012-11-22 08:59:52 +08:00
< / style >
< / head >
< body >
< div id = "intro" >
2012-11-26 11:09:31 +08:00
< h1 > Project EyesOff< sup class = "red headsup" > BETA< / sup > - Purely client-side! < / h1 >
2012-11-26 07:54:53 +08:00
< p > Inspired by < b > 'No screen at night! '< / b > , we give you < b > Project EyesOff< / b > ! It is a service that allows you to surf YouTube and listen to music via voice recognition and speech. Powered by < b > Google Chrome's buit-in voice input< / b > and < b > Google Translate's text to speech< / b > , you can ensure it will give you the best possible results. It only works on Google Chrome. < a href = "http://wp.me/p2q22L-2x" > On my blog< / a > . < / p >
< div class = "coolbox nextpg" > Go on...< / div > < br / > < br / >
2012-11-22 08:59:52 +08:00
< / div >
2012-11-24 17:27:14 +08:00
< div id = "appa" >
2012-11-24 16:25:43 +08:00
< h1 id = "searchhead" > Type < del id = "showmewhy" > or say< / del > your search query< / h1 >
2012-11-22 08:59:52 +08:00
< form action = "#" id = "search" >
2012-11-26 07:54:53 +08:00
< input type = "text" id = "searchbox" class = "coolbox" value = "Search..." x-webkit-speech = "x-webkit-speech" onwebkitspeechchange = '$("#search").submit();' / >
2012-11-24 16:25:43 +08:00
< input type = "submit" class = "coolbox" value = "Search" / >
2012-11-22 08:59:52 +08:00
< / form >
< / div >
2012-11-24 17:27:14 +08:00
< div id = "appb" >
2012-11-26 11:09:31 +08:00
< h1 id = "resultshead" > Here are your results< / h1 >
2012-11-26 07:54:53 +08:00
< form action = "#" id = "toolsa" >
< input type = "text" id = "toolsabox" class = "coolbox" value = "Command..." x-webkit-speech = "x-webkit-speech" onwebkitspeechchange = '$("#toolsa").submit();' / >
< input type = "submit" class = "coolbox" value = "Do" / >
< / form >
< div id = "results" >
< / div >
2012-11-24 17:27:14 +08:00
< / div >
2012-11-26 07:54:53 +08:00
< div id = "brightness" class = "coolbox" > Turn down brightness< / div >
2012-11-26 11:09:31 +08:00
< iframe id = "playerframe" name = "player" src = "" title = "This is the player" > < / iframe >
2012-11-24 17:27:14 +08:00
2012-11-22 08:59:52 +08:00
< script type = "text/javascript" src = "jquery.min.js" > < / script >
< script type = "text/javascript" >
2012-11-26 11:09:31 +08:00
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7 ; i + + ) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
2012-11-22 08:59:52 +08:00
$(document).ready(function() {
2012-11-26 11:09:31 +08:00
listofresults=[];
endwhere=0;
2012-11-26 07:54:53 +08:00
ifspeech=document.createElement("input").webkitSpeech;
2012-11-26 11:09:31 +08:00
function playnow(ttsstr) {
2012-11-26 07:54:53 +08:00
$("#playerframe").attr("src", "http://translate.google.com/translate_tts?tl=en&q="+ttsstr);
2012-11-26 11:09:31 +08:00
}
2012-11-26 07:54:53 +08:00
if (ifspeech != undefined) {
// $("#searchhead").html('Type < sup class = "headsup" > (Voice search is not supported in your browser, we recommend < a target = "_blank" href = "http://chrome.google.com/" > Google Chrome< / a > )< / sup > your search query');
$("#searchhead").html('Type or say your search query < sup class = "headsup" > (Yay! Your browser supports speech input! )< / sup > ');
}
$("#brightness").click(function() {
if ($(this).html()=="Turn down brightness") {
$("body").css("opacity", "0.3");
$(this).html("Turn up brightness");
} else {
$("body").css("opacity", "1");
$(this).html("Turn down brightness");
}
});
2012-11-22 08:59:52 +08:00
$(".nextpg").click(function() {
$("#intro").fadeOut("slow").css("display", "none");
2012-11-24 17:27:14 +08:00
$("#appa").fadeIn("slow").css("display", "block");
2012-11-26 07:54:53 +08:00
if (ifspeech == undefined) {
playnow("please type your search query");
} else {
playnow("please type or say your search query");
}
2012-11-22 08:59:52 +08:00
});
2012-11-26 07:54:53 +08:00
$("#searchbox, #toolsabox").focus(function() {
if ($(this).val() == "Search..." || $(this).val() == "Command...") {
2012-11-22 08:59:52 +08:00
$(this).val("");
$(this).css("color", "#fff");
}
2012-11-26 11:09:31 +08:00
});
2012-11-22 08:59:52 +08:00
$("#search").submit(function() {
2012-11-26 11:09:31 +08:00
$("#results").html("< div style = 'text-align: center;' id = 'loadingimg' > < img src = 'loading.gif' / > < / div > ");
$("#appa").fadeOut("slow").css("display", "none");
$("#appb").fadeIn("slow").css("display", "block");
sleep(100);
// playnow("serching youtube for "+$("#searchbox").val());
2012-11-26 07:54:53 +08:00
$.ajax({
type: 'GET',
url: 'http://gdata.youtube.com/feeds/api/videos?q='+$("#searchbox").val()+'& start-index=1& max-results=20& v=2& key=AI39si6YeaDRSECPlD-FPnLV2r1T8rt6GHxYePHc94KTWRKgu3PnVMPmOaM0bISMORXolzcHLR7sCzCcN5K38carFyUTCH8jSg',
dataType: "xml",
success: exception
});
function exception(data, status){
$(data).find("entry").each(function(index, domele) {
2012-11-26 11:09:31 +08:00
var appstr='< div class = "result" > < a href = "'+$(this).find(" player:first " ) . attr ( " url " ) + ' " > < div class = "resultimg" > < img src = "'+$(this).find(" thumbnail:eq ( 1 ) " ) . attr ( " url " ) + ' " / > < / div > < div class = "resulttext" > < h2 > #'+(index+1)+' : '+$(this).find("title:first").text()+'< / h2 > < span > by '+$(this).find("name:first").text()+'< / span > < p > '+$(this).find("description:first").text()+'< / p > < / div > < / a > < / div > ';
2012-11-26 07:54:53 +08:00
$("#results").append(appstr);
2012-11-26 11:09:31 +08:00
listofresults[index]=[$(this).find("player:first").attr("url"), $(this).find("title:first").text(), $(this).find("name:first").text()];
2012-11-26 07:54:53 +08:00
});
2012-11-26 11:09:31 +08:00
playnow("here are your results for "+$("#searchbox").val());
$("#resultshead").append(" for "+$("#searchbox").val());
2012-11-26 07:54:53 +08:00
$("#loadingimg").html("");
2012-11-24 17:27:14 +08:00
}
return false;
});
2012-11-26 11:09:31 +08:00
$("#toolsa").submit(function() {
docmd=$("#toolsabox").val();
switch(docmd) {
case "read":
/*
for (var i = 0; i < listofresults.length ; i + + ) {
playnow(listofresults[i][1]+" by "+listofresults[i][2]);
// sleep(100);
if (i > endwhere) {
endwhere=endwhere+1;
break;
}
}*/
playnow("number "+(endwhere+1)+" - "+listofresults[endwhere][1]+" by "+listofresults[endwhere][2]);
endwhere=endwhere+1;
break;
case "search again":
$("#toolsabox").blur();
sleep(100);
$("#appb").fadeOut("slow").css("display", "none");
$("#appa").fadeIn("slow").css("display", "block");
$("#resultshead").html("Here are your results");
$("#searchbox").val("Search...");
$("#toolsabox").val("");
break;
default:
if (docmd.indexOf("number ") == 0) {
var nu=parseInt(docmd.split(" ")[1])-1;
/////// NEED TO SEND TO IFRAME ///////
window.location=listofresults[nu][0];
//////////////////////////////////////
break;
}
playnow("unknown command");
}
return false;
2012-11-22 08:59:52 +08:00
});
2012-11-24 16:25:43 +08:00
$("#showmewhy").click(function() {
$("#searchhead").html('Type < del id = "showmewhy" > or say< / del > your search query < sup class = "headsup" > (Speech input is not supported in your browser, we recommend < a target = "_blank" href = "http://chrome.google.com/" > Google Chrome< / a > )< / sup > ');
});
2012-11-22 08:59:52 +08:00
});
2012-11-24 16:25:43 +08:00
2012-11-22 08:59:52 +08:00
< / script >
< / body >
< / html >