ambrose
/
eyesoff
mirror of https://github.com/serverwentdown/eyesoff.git
1
0
Fork 0
Code Releases Activity

Added search

master
Ambrose Chua 2012-11-24 17:27:14 +08:00
parent 35d678002f
commit 3a94aed993
1 changed files with 42 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
index.html
View File

@ -5,9 +5,16 @@
<link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,700' rel='stylesheet' type='text/css' /> <link href='http://fonts.googleapis.com/css?family=Ubuntu:300,400,700' rel='stylesheet' type='text/css' />
<title>EyesOff</title> <title>EyesOff</title>
<style> <style>
::-moz-selection {
background-color: rgba(200, 100, 0, 0.7);
}
::selection {
background-color: rgba(200, 100, 0, 0.7);
}
* { * {
padding: 0; padding: 0;
margin: 0; margin: 0;
outline:none;
} }
body, html { body, html {
padding: 0; padding: 0;
@ -19,7 +26,7 @@ font-family: "Ubuntu Light", Ubuntu, Arial;
color: #fff; color: #fff;
background-color: #000; background-color: #000;
} }
#app, #intro { #appa, #appb, #intro {
padding: 40px; padding: 40px;
} }
::-moz-select { ::-moz-select {
@ -46,6 +53,24 @@ background-color: rgba(200, 100, 0, 0.2);
color: #fff; color: #fff;
cursor: pointer; 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 { .nextpg {
margin: 15px 40px; margin: 15px 40px;
width: 90px; width: 90px;
@ -53,7 +78,7 @@ width: 90px;
#intro { #intro {
display: block; display: block;
} }
#app { #appa {
display: none; display: none;
} }
#searchbox { #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> <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 class="coolbox nextpg">Go on...</div>
</div> </div>
<div id="app"> <div id="appa">
<h1 id="searchhead">Type <del id="showmewhy">or say</del> your search query</h1> <h1 id="searchhead">Type <del id="showmewhy">or say</del> your search query</h1>
<form action="#" id="search"> <form action="#" id="search">
<input type="text" id="searchbox" class="coolbox" value="Search..." x-webkit-speech="x-webkit-speech" /> <input type="text" id="searchbox" class="coolbox" value="Search..." x-webkit-speech="x-webkit-speech" />
<input type="submit" class="coolbox" value="Search" /> <input type="submit" class="coolbox" value="Search" />
</form> </form>
</div> </div>
<div id="appb">
</div>
<script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
$(document).ready(function() { $(document).ready(function() {
$(".nextpg").click(function() { $(".nextpg").click(function() {
$("#intro").fadeOut("slow").css("display", "none"); $("#intro").fadeOut("slow").css("display", "none");
$("#app").fadeIn("slow").css("display", "block"); $("#appa").fadeIn("slow").css("display", "block");
}); });
$("#searchbox").focus(function() { $("#searchbox").focus(function() {
if ($(this).val() == "Search...") { 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 // http://gdata.youtube.com/feeds/api/videos?q=skateboarding+dog&start-index=0&max-results=10&v=2&key=AI39si6YeaDRSECPlD-FPnLV2r1T8rt6GHxYePHc94KTWRKgu3PnVMPmOaM0bISMORXolzcHLR7sCzCcN5K38carFyUTCH8jSg
// api: AI39si6YeaDRSECPlD-FPnLV2r1T8rt6GHxYePHc94KTWRKgu3PnVMPmOaM0bISMORXolzcHLR7sCzCcN5K38carFyUTCH8jSg // api: AI39si6YeaDRSECPlD-FPnLV2r1T8rt6GHxYePHc94KTWRKgu3PnVMPmOaM0bISMORXolzcHLR7sCzCcN5K38carFyUTCH8jSg
$("#searchhead").fadeIn("slow").html("Search not available yet! Sorry for party rockng! "); $("#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() { $("#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>'); $("#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>');