From 3a94aed993c5f88824a06df0dcf9033c2f579335 Mon Sep 17 00:00:00 2001
From: ambrosechua <ambrose.chua.cm@gmail.com>
Date: Sat, 24 Nov 2012 17:27:14 +0800
Subject: [PATCH] Added search

---
 index.html | 47 ++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 42 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 347fb49..232e577 100755
--- a/index.html
+++ b/index.html
@@ -5,9 +5,16 @@
 <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,700' rel='stylesheet' type='text/css' />
 <title>EyesOff</title>
 <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;
@@ -19,7 +26,7 @@ font-family: "Ubuntu Light", Ubuntu, Arial;
 color: #fff;
 background-color: #000;
 }
-#app, #intro {
+#appa, #appb, #intro {
 padding: 40px;
 }
 ::-moz-select {
@@ -46,6 +53,24 @@ 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;
@@ -53,7 +78,7 @@ width: 90px;
 #intro {
 display: block;
 }
-#app {
+#appa {
 display: none;
 }
 #searchbox {
@@ -73,19 +98,23 @@ cursor: pointer;
 <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 Voice Recognition</b> and <b>text to voice</b>, you can ensure it will give you the best possible results. </p>
 <div class="coolbox nextpg">Go on...</div>
 </div>
-<div id="app">
+<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" />
 <input type="submit" class="coolbox" value="Search" />
 </form>
 </div>
+<div id="appb">
+</div>
+
+
 <script type="text/javascript" src="jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
 	$(".nextpg").click(function() {
 		$("#intro").fadeOut("slow").css("display", "none");
-		$("#app").fadeIn("slow").css("display", "block");
+		$("#appa").fadeIn("slow").css("display", "block");
 	});
 	$("#searchbox").focus(function() {
 		if ($(this).val() == "Search...") {
@@ -104,7 +133,15 @@ $(document).ready(function() {
 		// http://gdata.youtube.com/feeds/api/videos?q=skateboarding+dog&start-index=0&max-results=10&v=2&key=AI39si6YeaDRSECPlD-FPnLV2r1T8rt6GHxYePHc94KTWRKgu3PnVMPmOaM0bISMORXolzcHLR7sCzCcN5K38carFyUTCH8jSg
 		// api: AI39si6YeaDRSECPlD-FPnLV2r1T8rt6GHxYePHc94KTWRKgu3PnVMPmOaM0bISMORXolzcHLR7sCzCcN5K38carFyUTCH8jSg
 		$("#searchhead").fadeIn("slow").html("Search not available yet! Sorry for party rockng! ");
-		setTimeout('$("#searchhead").fadeIn("slow").html("Type or say your search query");', 2000);
+		if (document.createElement("input").webkitSpeech != undefined) {
+			setTimeout('$("#searchhead").fadeIn("slow").html("Type or say your search query <sup class=\\"headsup\\">(Yay! Your browser supports speech input! )</sup>");', 2000);
+		} else {
+			setTimeout('$("#searchhead").fadeIn("slow").html("Type <del id=\\"showmewhy\\">or say</del> your search query");', 2000);
+		}
+		return false;
+	});
+	$("#searchbox").bind("onwebkitspeechchange", function() {
+		$("#search").submit();
 	});
 	$("#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>');