1 line
9.0 KiB
HTML
1 line
9.0 KiB
HTML
<!DOCTYPE html><html><head><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)"/><title>EyesOff</title><link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,700' rel='stylesheet' type='text/css'/><style>::-moz-selection{background-color:rgba(200,100,0,0.7)}::selection{background-color:rgba(200,100,0,0.7)}*{padding:0;margin:0;outline:0}body,html{padding:0;margin:0;width:100%;height:100%;font-size:25px;font-family:"Ubuntu Light",Ubuntu,Arial;color:#fff;background-color:#000;opacity:.99}#appa,#appb,#intro{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{font-family:"Ubuntu Light",Ubuntu,Arial;font-size:25px;border:1px solid #c86400;border-bottom-color:#b45000;border-right-color:#b45000;border-radius:10px;padding:10px 15px;margin:20px 3px;background-color:rgba(200,100,0,0.2);color:#fff;cursor:pointer}.coolbox:hover{border:1px solid #ff9b00;border-bottom-color:#eb8700;border-right-color:#eb8700;background-color:rgba(200,100,0,0.3)}.coolbox:active{border:1px solid #dc7800;border-bottom-color:#c86400;border-right-color:#c86400;background-color:rgba(200,100,0,0.25)}input.coolbox:focus{border:1px solid #e68200;border-bottom-color:#d26e00;border-right-color:#d26e00;background-color:rgba(200,100,0,0.28)}form{width:100%}input[type=text]{min-width:300px;width:50%}#nextpg,#nextpgh{margin:15px 40px;width:90px}#intro{display:block}#appa,#appb{display:none}#searchbox,#toolsabox{color:#aaa}.headsup{font-size:15px}#showmewhy{cursor:pointer}#brightness{width:70px;font-size:12px;position:fixed;bottom:10px;right:10px;margin:0}#playerframe{min-height:0;min-width:0;background-color:#000;display:none}#results{position:absolute;top:220px;bottom:0;left:0;right:0;overflow:auto;padding:40px 60px}.result{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:0 15px;margin:0 10px}.result h2{display:block;padding:0;margin:0;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{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}#nextpg{display:none}</style></head><body><div id="intro"><h1>Project EyesOff<sup class="red headsup">BETA</sup> - 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" id="nextpg">Go on...</div><div class="coolbox" id="nextpgh">Go on...</div><br/><br/></div><div id="appa"><h1 id="searchhead">Type <del id="showmewhy">or say</del> your search query</h1><form action="#" id="search"><input type="text" id="searchbox" class="coolbox" value="Search..." x-webkit-speech="x-webkit-speech" onwebkitspeechchange='$("#search").submit();'/><input type="submit" class="coolbox" value="Search"/></form></div><div id="appb"><h1 id="resultshead">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"/><span class="headsup wrap">“read”: reads results one by one; “number <i>x</i>”: goes to video; “search again”: goes back to search;</span></form><div id="results"></div></div><div id="brightness" class="coolbox">Turn down brightness</div><iframe id="playerframe" name="player" src="" title="This is the player"></iframe><script type="text/javascript" src="jquery.min.js"></script><script type="text/javascript" src="http://raw.github.com/cowboy/jquery-hashchange/master/jquery.ba-hashchange.min.js"></script><script type="text/javascript">function sleep(e){var f=new Date().getTime();for(var d=0;d<10000000;d++){if((new Date().getTime()-f)>e){break}}}$(document).ready(function(){listofresults=[];endwhere=0;ifspeech=document.createElement("input").webkitSpeech;function b(a){$("#playerframe").attr("src","http://translate.google.com/translate_tts?tl=en&q="+a)}if(ifspeech!=undefined){$("#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")}});$("#nextpg").click(function(){$("#intro").fadeOut("slow").css("display","none");$("#appb").fadeOut("slow").css("display","none");$("#appa").fadeIn("slow").css("display","block");if(ifspeech==undefined){b("please type your search query")}else{b("please type or say your search query")}});$("#searchbox, #toolsabox").focus(function(){if($(this).val()=="Search..."||$(this).val()=="Command..."){$(this).val("");$(this).css("color","#fff")}});$("#search").submit(function(){$("#results").html("<div style='text-align: center;' id='loadingimg'><img src='loading.gif' /></div>");$("#intro").fadeOut("slow").css("display","none");$("#appa").fadeOut("slow").css("display","none");$("#appb").fadeIn("slow").css("display","block");sleep(100);$.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:a});function a(e,f){$(e).find("entry").each(function(h,d){var c='<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>#'+(h+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>";$("#results").append(c);listofresults[h]=[$(this).find("player:first").attr("url"),$(this).find("title:first").text(),$(this).find("name:first").text(),$(this).find("content[type='application/x-shockwave-flash']").attr("src")]});b("here are your results for "+$("#searchbox").val());$("#resultshead").append(" for "+$("#searchbox").val());$("#loadingimg").html("")}return false});$("#toolsa").submit(function(){docmd=$("#toolsabox").val();switch(docmd){case"read":b("number "+(endwhere+1)+" - "+listofresults[endwhere][1]+" by "+listofresults[endwhere][2]);endwhere=endwhere+1;break;case"search again":$("#toolsabox").blur();sleep(100);$("#intro").fadeOut("slow").css("display","none");$("#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 a=parseInt(docmd.split(" ")[1])-1;window.location=listofresults[a][0];break}b("unknown command")}return false});$("#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>')});$(window).hashchange(function(){hash=window.location.hash.substring(1);if(hash!=""){if(hash.indexOf("?q=")!==-1){$("#resultshead").html("Here are your results");hash=hash.substring(3);$("#intro").fadeOut("slow").css("display","none");$("#appa").fadeIn("slow").css("display","block");$("#searchbox").val(hash);$("#search").submit()}else{if(hash=="?skipintro"){$("#nextpg").click()}}}});$(window).hashchange();$("#nextpgh").click(function(){window.location.hash="#?skipintro"})});</script></body></html> |