102 lines
2.3 KiB
HTML
102 lines
2.3 KiB
HTML
|
<!DOCTYPE html>
|
||
|
<html>
|
||
|
<head>
|
||
|
<!-- <meta http-equiv="refresh" content="5" /> -->
|
||
|
<title>EyesOff</title>
|
||
|
<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>
|