362 lines
10 KiB
HTML
362 lines
10 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:none;
|
||
|
}
|
||
|
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: 0.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 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;
|
||
|
cursor: pointer;
|
||
|
}
|
||
|
.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);
|
||
|
}
|
||
|
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: 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 {
|
||
|
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 {/* change to #nextpgh for non-href method */
|
||
|
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(milliseconds) {
|
||
|
var start = new Date().getTime();
|
||
|
for (var i = 0; i < 1e7; i++) {
|
||
|
if ((new Date().getTime() - start) > milliseconds){
|
||
|
break;
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
$(document).ready(function() {
|
||
|
listofresults=[];
|
||
|
endwhere=0;
|
||
|
ifspeech=document.createElement("input").webkitSpeech;
|
||
|
function playnow(ttsstr) {
|
||
|
$("#playerframe").attr("src", "http://translate.google.com/translate_tts?tl=en&q="+ttsstr);
|
||
|
}
|
||
|
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");
|
||
|
}
|
||
|
});
|
||
|
$("#nextpg").click(function() {
|
||
|
$("#intro").fadeOut("slow").css("display", "none");
|
||
|
$("#appb").fadeOut("slow").css("display", "none");
|
||
|
$("#appa").fadeIn("slow").css("display", "block");
|
||
|
if (ifspeech == undefined) {
|
||
|
playnow("please type your search query");
|
||
|
} else {
|
||
|
playnow("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: exception
|
||
|
});
|
||
|
function exception(data, status){
|
||
|
$(data).find("entry").each(function(index, domele) {
|
||
|
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>';
|
||
|
$("#results").append(appstr);
|
||
|
listofresults[index]=[$(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")];
|
||
|
});
|
||
|
playnow("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":
|
||
|
playnow("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 nu=parseInt(docmd.split(" ")[1])-1;
|
||
|
window.location=listofresults[nu][0];
|
||
|
break;
|
||
|
}
|
||
|
playnow("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>
|