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
< title > EyesOff< / title >
2012-11-22 08:59:52 +08:00
< style >
* {
padding: 0;
margin: 0;
}
body, html {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
font-size: 25px;
font-family: Helvitica, "Ubuntu Light", Ubuntu, Arial;
color: #fff;
background-color: #000;
}
#app, #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-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;
}
.nextpg {
margin: 15px 40px;
cursor: pointer;
width: 90px;
}
#intro {
display: block;
}
#app {
display: none;
}
#searchbox {
color: #aaa;
}
< / 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 >
< div id = "app" >
< h1 id = "searchhead" > Type or say your search query< / h1 >
< form action = "#" id = "search" >
< input type = "search" id = "searchbox" class = "coolbox" value = "Search..." / > < input type = "submit" class = "coolbox" value = "Search" / >
< / form >
< / 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");
});
$("#searchbox").focus(function() {
if ($(this).val() == "Search...") {
$(this).val("");
$(this).css("color", "#fff");
}
});
$("#searchbox").blur(function() {
if ($(this).val() == "") {
$(this).val("Search...");
$(this).css("color", "#aaa");
}
});
$("#search").submit(function() {
///ask youtube.com
$("#searchhead").fadeIn("slow").html("Search not available yet! Sorry for party rockng! ");
setTimeout('$("#searchhead").fadeIn("slow").html("Type or say your search query");', 2000);
});
});
< / script >
< / body >
< / html >