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

First Commit

master
Ambrose Chua 10 years ago
commit
6d4a2385be
3 changed files with 224 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 101
      index.html
  2. 100
      index.html~
  3. 23
      jquery.min.js

101
index.html
View File

@ -0,0 +1,101 @@
<!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>

100
index.html~
View File

@ -0,0 +1,100 @@
<!DOCTYPE html>
<html>
<head>
<!-- <meta http-equiv="refresh" content="5" /> -->
<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>

23
jquery.min.js
File diff suppressed because it is too large
View File

Write Preview
Loading…
Cancel
Save