parent
e4ab96d2b9
commit
6d72b15637
|
|
@ -0,0 +1,4 @@
|
|||
<!DOCTYPE html><html lang=en><meta charset=utf-8><meta name=viewport content="initial-scale=1, minimum-scale=1, width=device-width"><title>Error 403 (Forbidden)!!1</title><style>*{margin:0;padding:0}html,code{font:15px/22px arial,sans-serif}html{background:#fff;color:#222;padding:15px}body{margin:7% auto 0;max-width:390px;min-height:180px;padding:30px 0 15px}* > body{background:url(//www.google.com/images/errors/robot.png) 100% 5px no-repeat;padding-right:205px}p{margin:11px 0 22px;overflow:hidden}ins{color:#777;text-decoration:none}a img{border:0}@media screen and (max-width:772px){body{background:none;margin-top:0;max-width:none;padding-right:0}}</style><a href=//www.google.com/><img src=//www.google.com/images/errors/logo_sm.gif alt=Google></a><p><b>403.</b> <ins>That’s an error.</ins><p>Your client does not have permission to get URL <code>/translate_tts?q=please+type+or+say+your+search+query</code> from this server. (Client IP address: 31.170.160.100)<br><br>
|
||||
|
||||
|
||||
<ins>That’s all we know.</ins>
|
||||
207
index.html
207
index.html
|
|
@ -115,15 +115,96 @@ min-height: 0;
|
|||
min-width: 0;
|
||||
background-color: #000;
|
||||
display: none;
|
||||
}/*
|
||||
.result a {
|
||||
display: block;
|
||||
}*/
|
||||
#results {
|
||||
position: absolute;
|
||||
top: 220px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: auto;
|
||||
padding: 40px 60px;
|
||||
}
|
||||
.result {
|
||||
|
||||
background-color: rgba(200, 100, 0, 0.0);
|
||||
border: 1px solid rgba(220, 120, 0, 0.1);
|
||||
border-bottom-color: rgba(200, 100, 0, 0.1);
|
||||
border-right-color: rgba(200, 100, 0, 0.1);
|
||||
border-radius: 10px;
|
||||
padding: 8px;
|
||||
margin: 8px;
|
||||
display: block;
|
||||
height: 187px;
|
||||
color: #fff;
|
||||
}
|
||||
.result .resulttext {
|
||||
padding: 0px 15px;
|
||||
margin: 0px 10px;
|
||||
}
|
||||
.result h2 {
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 0px;
|
||||
font-size: 40px;
|
||||
font-weight: 0;
|
||||
}
|
||||
.result p, .result span {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: auto;
|
||||
white-space: nowrap;
|
||||
font-weight: 0;
|
||||
}
|
||||
.result span {
|
||||
margin: 1px;
|
||||
color: #ccc;
|
||||
}
|
||||
.result .resultimg {/*
|
||||
display: block;*/
|
||||
vertical-align: top;
|
||||
float: left;
|
||||
}
|
||||
.result a {
|
||||
color: inherit;
|
||||
text-emphasis: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
.result:hover {
|
||||
background-color: rgba(200, 100, 0, 0.2);
|
||||
border: 1px solid rgba(220, 120, 0, 0.3);
|
||||
border-bottom-color: rgba(200, 100, 0, 0.3);
|
||||
border-right-color: rgba(200, 100, 0, 0.3);
|
||||
}
|
||||
.result:active {
|
||||
background-color: rgba(200, 100, 0, 0.15);
|
||||
border: 1px solid rgba(220, 120, 0, 0.25);
|
||||
border-bottom-color: rgba(200, 100, 0, 0.25);
|
||||
border-right-color: rgba(200, 100, 0, 0.25);
|
||||
}
|
||||
.result:hover h2 {
|
||||
color: #99f;
|
||||
}
|
||||
.result h2:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.result h2:active {
|
||||
text-decoration: underline;
|
||||
color: #88f;
|
||||
}
|
||||
.red {
|
||||
color: #f00;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="intro">
|
||||
<h1>Project EyesOff - Purely client-side! </h1>
|
||||
<h1>Project EyesOff<sup class="red headsup">BETA</sup> - Purely client-side! </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 Chrome's buit-in voice input</b> and <b>Google Translate's text to speech</b>, you can ensure it will give you the best possible results. It only works on Google Chrome. <a href="http://wp.me/p2q22L-2x">On my blog</a>. </p>
|
||||
<div class="coolbox nextpg">Go on...</div><br /><br />
|
||||
</div>
|
||||
|
|
@ -135,7 +216,7 @@ display: none;
|
|||
</form>
|
||||
</div>
|
||||
<div id="appb">
|
||||
<h1 id="searchhead">Here are your results</h1>
|
||||
<h1 id="resultshead">Here are your results</h1>
|
||||
<form action="#" id="toolsa">
|
||||
<input type="text" id="toolsabox" class="coolbox" value="Command..." x-webkit-speech="x-webkit-speech" onwebkitspeechchange='$("#toolsa").submit();' />
|
||||
<input type="submit" class="coolbox" value="Do" />
|
||||
|
|
@ -147,47 +228,25 @@ display: none;
|
|||
|
||||
<div id="brightness" class="coolbox">Turn down brightness</div>
|
||||
|
||||
<!--
|
||||
<audio id="player">
|
||||
<source src="" type="audio/mp3">
|
||||
</audio> -->
|
||||
<iframe id="playerframe" src="" title="This is the player"></iframe>
|
||||
<iframe id="playerframe" name="player" src="" title="This is the player"></iframe>
|
||||
|
||||
<script type="text/javascript" src="jquery.min.js"></script>
|
||||
<!-- <script type="text/javascript" src="jquery.xmlns.js"></script> -->
|
||||
<!-- <script type="text/javascript" src="http://raw.github.com/kvz/phpjs/master/functions/var/var_dump.js"></script> -->
|
||||
<!-- <script type="text/javascript" src="http://raw.github.com/hiddentao/google-tts/master/google-tts.min.js"></script> -->
|
||||
<script type="text/javascript">
|
||||
function sleep(milliseconds) {
|
||||
var start = new Date().getTime();
|
||||
for (var i = 0; i < 1e7; i++) {
|
||||
if ((new Date().getTime() - start) > milliseconds){
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
$(document).ready(function() {
|
||||
listofresults=[];
|
||||
endwhere=0;
|
||||
ifspeech=document.createElement("input").webkitSpeech;
|
||||
// var tts = new GoogleTTS('en-GB');
|
||||
function playnow(ttsstr) { // HOW TO USE: PUT playnow(fileid);
|
||||
/*
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: 'tts.php?q='+ttsstr,
|
||||
success: ttsdone
|
||||
});
|
||||
function ttsdone(data, status){
|
||||
$("#player source").attr("src", data);
|
||||
var audio = $("#player")[0];
|
||||
audio.play();
|
||||
}
|
||||
*/
|
||||
//tts.play(ttsstr);
|
||||
function playnow(ttsstr) {
|
||||
$("#playerframe").attr("src", "http://translate.google.com/translate_tts?tl=en&q="+ttsstr);
|
||||
}/*
|
||||
function getXmlDOMFromString(xmlStr){
|
||||
if (window.ActiveXObject && window.GetObject) {
|
||||
var dom = new ActiveXObject('Microsoft.XMLDOM');
|
||||
dom.loadXML(xmlStr);
|
||||
return dom;
|
||||
}
|
||||
if (window.DOMParser){
|
||||
return new DOMParser().parseFromString(xmlStr,'text/xml');
|
||||
}
|
||||
throw new Error( 'No XML parser available' );
|
||||
}*/
|
||||
}
|
||||
if (ifspeech != 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>');
|
||||
|
|
@ -215,21 +274,13 @@ $(document).ready(function() {
|
|||
$(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
|
||||
// http://gdata.youtube.com/feeds/api/videos?q=skateboarding+dog&start-index=0&max-results=10&v=2&key=AI39si6YeaDRSECPlD-FPnLV2r1T8rt6GHxYePHc94KTWRKgu3PnVMPmOaM0bISMORXolzcHLR7sCzCcN5K38carFyUTCH8jSg
|
||||
// api: AI39si6YeaDRSECPlD-FPnLV2r1T8rt6GHxYePHc94KTWRKgu3PnVMPmOaM0bISMORXolzcHLR7sCzCcN5K38carFyUTCH8jSg
|
||||
$("#results").html("<div style='text-align: center;' id='loadingimg'><img src='loading.gif' /></div>");
|
||||
$("#appa").fadeOut("slow").css("display", "none");
|
||||
$("#appb").fadeIn("slow").css("display", "block");
|
||||
playnow("serching youtube for "+$("#searchbox").val());
|
||||
$("#results").html("<div style='text-align: center;' id='loadingimg'><img src='loading.gif' /></div>");
|
||||
$("#appa").fadeOut("slow").css("display", "none");
|
||||
$("#appb").fadeIn("slow").css("display", "block");
|
||||
sleep(100);
|
||||
// playnow("serching youtube for "+$("#searchbox").val());
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: 'http://gdata.youtube.com/feeds/api/videos?q='+$("#searchbox").val()+'&start-index=1&max-results=20&v=2&key=AI39si6YeaDRSECPlD-FPnLV2r1T8rt6GHxYePHc94KTWRKgu3PnVMPmOaM0bISMORXolzcHLR7sCzCcN5K38carFyUTCH8jSg',
|
||||
|
|
@ -237,25 +288,53 @@ $(document).ready(function() {
|
|||
success: exception
|
||||
});
|
||||
function exception(data, status){
|
||||
// datadb = data;
|
||||
// alert(data+" - lol");
|
||||
// xml = $.parseXML(data);
|
||||
// var xmlData = getXmlDOMFromString(data);
|
||||
// alert($(doc).find("entry"));
|
||||
//alert($(data).find("entry"));// .find("title").text());
|
||||
// $.xmlns.media = "media:";
|
||||
$(data).find("entry").each(function(index, domele) {
|
||||
var appstr='<a href="'+$(this).find("player:first").attr("url")+'">#'+(index+1)+' : <div class="result"><img src="'+$(this).find("thumbnail:eq(1)").attr("url")+'" /><h1>'+$(this).find("title:first").text()+'</h1><span>'+$(this).find("description:first").text()+'</span></div></a>';
|
||||
var appstr='<div class="result"><a href="'+$(this).find("player:first").attr("url")+'"><div class="resultimg"><img src="'+$(this).find("thumbnail:eq(1)").attr("url")+'" /></div><div class="resulttext"><h2>#'+(index+1)+' : '+$(this).find("title:first").text()+'</h2><span>by '+$(this).find("name:first").text()+'</span><p>'+$(this).find("description:first").text()+'</p></div></a></div>';
|
||||
$("#results").append(appstr);
|
||||
listofresults[index]=[$(this).find("player:first").attr("url"), $(this).find("title:first").text(), $(this).find("name:first").text()];
|
||||
});
|
||||
playnow("here are your results for "+$("#searchbox").val());
|
||||
$("#resultshead").append(" for "+$("#searchbox").val());
|
||||
$("#loadingimg").html("");
|
||||
playnow("here are your results");
|
||||
}
|
||||
return false;
|
||||
});
|
||||
$("#searchbox").bind("onwebkitspeechchange", function() { // doesn't work, on doesn't work
|
||||
$("#search").submit();
|
||||
alert("s");
|
||||
$("#toolsa").submit(function() {
|
||||
docmd=$("#toolsabox").val();
|
||||
switch(docmd) {
|
||||
case "read":
|
||||
/*
|
||||
for (var i = 0; i < listofresults.length; i++) {
|
||||
playnow(listofresults[i][1]+" by "+listofresults[i][2]);
|
||||
// sleep(100);
|
||||
if (i > endwhere) {
|
||||
endwhere=endwhere+1;
|
||||
break;
|
||||
}
|
||||
}*/
|
||||
playnow("number "+(endwhere+1)+" - "+listofresults[endwhere][1]+" by "+listofresults[endwhere][2]);
|
||||
endwhere=endwhere+1;
|
||||
break;
|
||||
case "search again":
|
||||
$("#toolsabox").blur();
|
||||
sleep(100);
|
||||
$("#appb").fadeOut("slow").css("display", "none");
|
||||
$("#appa").fadeIn("slow").css("display", "block");
|
||||
$("#resultshead").html("Here are your results");
|
||||
$("#searchbox").val("Search...");
|
||||
$("#toolsabox").val("");
|
||||
break;
|
||||
default:
|
||||
if (docmd.indexOf("number ") == 0) {
|
||||
var nu=parseInt(docmd.split(" ")[1])-1;
|
||||
/////// NEED TO SEND TO IFRAME ///////
|
||||
window.location=listofresults[nu][0];
|
||||
//////////////////////////////////////
|
||||
break;
|
||||
}
|
||||
playnow("unknown command");
|
||||
}
|
||||
return false;
|
||||
});
|
||||
$("#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>');
|
||||
|
|
|
|||
101
index.html~
101
index.html~
|
|
@ -1,101 +0,0 @@
|
|||
<!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>
|
||||
Loading…
Reference in New Issue