2012-11-22 08:59:52 +08:00
<!DOCTYPE html>
< html >
< head >
<!-- <meta http - equiv="refresh" content="5" /> -->
2012-11-24 16:25:43 +08:00
< link href = 'http://fonts.googleapis.com/css?family=Ubuntu:300,400,700' rel = 'stylesheet' type = 'text/css' / >
2012-11-22 08:59:52 +08:00
< title > EyesOff< / title >
< style >
2012-11-24 17:27:14 +08:00
::-moz-selection {
background-color: rgba(200, 100, 0, 0.7);
}
::selection {
background-color: rgba(200, 100, 0, 0.7);
}
2012-11-22 08:59:52 +08:00
* {
padding: 0;
margin: 0;
2012-11-24 17:27:14 +08:00
outline:none;
2012-11-22 08:59:52 +08:00
}
body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-size: 25px;
2012-11-24 16:25:43 +08:00
font-family: "Ubuntu Light", Ubuntu, Arial;
2012-11-22 08:59:52 +08:00
color: #fff;
background-color: #000;
}
2012-11-24 17:27:14 +08:00
#appa, #appb, #intro {
2012-11-22 08:59:52 +08:00
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 {
2012-11-24 16:25:43 +08:00
font-family: "Ubuntu Light", Ubuntu, Arial;
2012-11-22 08:59:52 +08:00
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;
2012-11-24 16:25:43 +08:00
cursor: pointer;
2012-11-22 08:59:52 +08:00
}
2012-11-24 17:27:14 +08:00
.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);
}
2012-11-22 08:59:52 +08:00
.nextpg {
margin: 15px 40px;
width: 90px;
}
#intro {
display: block;
}
2012-11-24 17:27:14 +08:00
#appa {
2012-11-22 08:59:52 +08:00
display: none;
}
#searchbox {
color: #aaa;
}
2012-11-24 16:25:43 +08:00
.headsup {
font-size: 15px;
}
#showmewhy {
cursor: pointer;
}
2012-11-22 08:59:52 +08:00
< / style >
< / head >
< body >
< div id = "intro" >
< h1 > Project EyesOff< / 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 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 >
2012-11-24 17:27:14 +08:00
< div id = "appa" >
2012-11-24 16:25:43 +08:00
< h1 id = "searchhead" > Type < del id = "showmewhy" > or say< / del > your search query< / h1 >
2012-11-22 08:59:52 +08:00
< form action = "#" id = "search" >
2012-11-24 16:25:43 +08:00
< input type = "text" id = "searchbox" class = "coolbox" value = "Search..." x-webkit-speech = "x-webkit-speech" / >
< input type = "submit" class = "coolbox" value = "Search" / >
2012-11-22 08:59:52 +08:00
< / form >
< / div >
2012-11-24 17:27:14 +08:00
< div id = "appb" >
< / div >
2012-11-22 08:59:52 +08:00
< 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");
2012-11-24 17:27:14 +08:00
$("#appa").fadeIn("slow").css("display", "block");
2012-11-22 08:59:52 +08:00
});
$("#searchbox").focus(function() {
if ($(this).val() == "Search...") {
$(this).val("");
$(this).css("color", "#fff");
}
2012-11-24 16:25:43 +08:00
});/*
2012-11-22 08:59:52 +08:00
$("#searchbox").blur(function() {
if ($(this).val() == "") {
$(this).val("Search...");
$(this).css("color", "#aaa");
}
2012-11-24 16:25:43 +08:00
});*/
2012-11-22 08:59:52 +08:00
$("#search").submit(function() {
2012-11-24 16:25:43 +08:00
// ask youtube.com
// http://gdata.youtube.com/feeds/api/videos?q=skateboarding+dog& start-index=0& max-results=10& v=2& key=AI39si6YeaDRSECPlD-FPnLV2r1T8rt6GHxYePHc94KTWRKgu3PnVMPmOaM0bISMORXolzcHLR7sCzCcN5K38carFyUTCH8jSg
// api: AI39si6YeaDRSECPlD-FPnLV2r1T8rt6GHxYePHc94KTWRKgu3PnVMPmOaM0bISMORXolzcHLR7sCzCcN5K38carFyUTCH8jSg
2012-11-22 08:59:52 +08:00
$("#searchhead").fadeIn("slow").html("Search not available yet! Sorry for party rockng! ");
2012-11-24 17:27:14 +08:00
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();
2012-11-22 08:59:52 +08:00
});
2012-11-24 16:25:43 +08:00
$("#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 > ');
});
if (document.createElement("input").webkitSpeech != 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 > ');
}
2012-11-22 08:59:52 +08:00
});
2012-11-24 16:25:43 +08:00
2012-11-22 08:59:52 +08:00
< / script >
< / body >
< / html >