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;
}
.result {
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 07:54:53 +08:00
< h1 > Project EyesOff - Purely client-side! < / h1 >
< 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 07:54:53 +08:00
< h1 id = "searchhead" > Here are your results< / h1 >
< 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 >
<!--
< audio id = "player" >
< source src = "" type = "audio/mp3" >
< / audio > -->
< iframe id = "playerframe" 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 >
2012-11-26 07:54:53 +08:00
<!-- <script type="text/javascript" src="jquery.xmlns.js"></script> -->
<!-- <script type="text/javascript" src="http://raw.github.com/kvz/phpjs/master/functions/var/var_dump.js"></script> -->
<!-- <script type="text/javascript" src="http://raw.github.com/hiddentao/google - tts/master/google - tts.min.js"></script> -->
2012-11-22 08:59:52 +08:00
< script type = "text/javascript" >
$(document).ready(function() {
2012-11-26 07:54:53 +08:00
ifspeech=document.createElement("input").webkitSpeech;
// var tts = new GoogleTTS('en-GB');
function playnow(ttsstr) { // HOW TO USE: PUT playnow(fileid);
/*
$.ajax({
type: 'GET',
url: 'tts.php?q='+ttsstr,
success: ttsdone
});
function ttsdone(data, status){
$("#player source").attr("src", data);
var audio = $("#player")[0];
audio.play();
}
*/
//tts.play(ttsstr);
$("#playerframe").attr("src", "http://translate.google.com/translate_tts?tl=en&q="+ttsstr);
}/*
function getXmlDOMFromString(xmlStr){
if (window.ActiveXObject & & window.GetObject) {
var dom = new ActiveXObject('Microsoft.XMLDOM');
dom.loadXML(xmlStr);
return dom;
}
if (window.DOMParser){
return new DOMParser().parseFromString(xmlStr,'text/xml');
}
throw new Error( 'No XML parser available' );
}*/
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-24 16:25:43 +08:00
});/*
2012-11-22 08:59:52 +08:00
$("#searchbox").blur(function() {
if ($(this).val() == "") {
$(this).val("Search...");
$(this).css("color", "#aaa");
}
2012-11-24 16:25:43 +08:00
});*/
2012-11-22 08:59:52 +08:00
$("#search").submit(function() {
2012-11-24 16:25:43 +08:00
// ask youtube.com
// http://gdata.youtube.com/feeds/api/videos?q=skateboarding+dog& start-index=0& max-results=10& v=2& key=AI39si6YeaDRSECPlD-FPnLV2r1T8rt6GHxYePHc94KTWRKgu3PnVMPmOaM0bISMORXolzcHLR7sCzCcN5K38carFyUTCH8jSg
// api: AI39si6YeaDRSECPlD-FPnLV2r1T8rt6GHxYePHc94KTWRKgu3PnVMPmOaM0bISMORXolzcHLR7sCzCcN5K38carFyUTCH8jSg
2012-11-26 07:54:53 +08:00
playnow("serching youtube for "+$("#searchbox").val());
$.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){
// datadb = data;
// alert(data+" - lol");
// xml = $.parseXML(data);
// var xmlData = getXmlDOMFromString(data);
// alert($(doc).find("entry"));
//alert($(data).find("entry"));// .find("title").text());
// $.xmlns.media = "media:";
$("#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");
$(data).find("entry").each(function(index, domele) {
var appstr='< a href = "'+$(this).find(" player:first " ) . attr ( " url " ) + ' " > #'+(index+1)+' : < div class = "result" > < img src = "'+$(this).find(" thumbnail:eq ( 1 ) " ) . attr ( " url " ) + ' " / > < h1 > '+$(this).find("title:first").text()+'< / h1 > < span > '+$(this).find("description:first").text()+'< / span > < / div > < / a > ';
$("#results").append(appstr);
});
$("#loadingimg").html("");
playnow("here are your results");
2012-11-24 17:27:14 +08:00
}
return false;
});
2012-11-26 07:54:53 +08:00
$("#searchbox").bind("onwebkitspeechchange", function() { // doesn't work, on doesn't work
2012-11-24 17:27:14 +08:00
$("#search").submit();
2012-11-26 07:54:53 +08:00
alert("s");
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 >