From d0b42876f138d2f6bf4f6351e5a5beb8125007e8 Mon Sep 17 00:00:00 2001
From: ambrosechua <ambrose.chua.cm@gmail.com>
Date: Mon, 26 Nov 2012 11:30:42 +0800
Subject: [PATCH] minified version available

---
 bin/bin     |   0
 indexd.html | 337 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 337 insertions(+)
 create mode 100755 bin/bin
 create mode 100755 indexd.html
diff --git a/bin/bin b/bin/bin
new file mode 100755
index 0000000..e69de29
diff --git a/indexd.html b/indexd.html
new file mode 100755
index 0000000..45f4f91
--- /dev/null
+++ b/indexd.html
@@ -0,0 +1,337 @@
+<!DOCTYPE html>
+<html>
+<head>
+<!-- <meta http-equiv="refresh" content="5" /> -->
+<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);
+}
+.nextpg {
+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 {/*
+width: 1px;
+height: 1px;*/
+min-height: 0;
+min-width: 0;
+background-color: #000;
+display: none;
+}/*
+.result a {
+display: block;
+}*/
+#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 {/*
+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;
+}
+</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 nextpg">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" />
+</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">
+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");
+		$("#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>");
+		$("#appa").fadeOut("slow").css("display", "none");
+		$("#appb").fadeIn("slow").css("display", "block");
+		sleep(100);
+		// 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){
+			$(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);
+				$("#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;
+	});
+	$("#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>');
+	});
+});
+
+</script>
+</body>
+</html>
