Google John [omega] - a mini-prjoect thing meant as both a comeback to AND a possible item that would be Google Nose (http://goo.gl/AQn58) compatible - version: 0.0.1 # date 1 april 2013

COPYRIGHTS_FAQ_EULA

//// Google John is a toilet that reads data from your waste matter and returns relevant ads in Web History!
/// Works with Google Nose Beta! 
// Google Nose Beta will intensify the aroma of the house you built by a whoppin 4%!

/////
// *F*A*Q*
// "BULL!" you say?
// We sh## you not
//"ETA?"
//Does the pope cr@/o in the woods?

                                                                   
                                                                    
              __                                                    
            //  ) )     ___     / ___      ___      ___      ___    
           //  / /    ((   ) ) //\ \     //   ) ) //   ) ) //   ) ) ®
           \\ () ) )   \ \    //  \ \   //   / / //___/ / //___/ /  
            \\__/ / //   ) ) //    \ \ ((___/ / //       //         
            
            
// derived from an ORIGINAL WORK.....  Google Now loading animation. by 
    __                                                  
         /  |      /                     /                    
        ( O_/ ___    _ _  ___  ___  ___ (  ___       ___      
        |    |___ | | | )|   )|   )|    | |   ) \  )|___)\   )
        |__/  __/ | |  / |__/ |  / |__  | |__/|  \/ |__   \_/ 
                                                           / 
                                                           
                                                          
////
/////////

index.html

<div class="cont">
  
  <div class="frame1"></div>
  <div class="frame2"></div>
  
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
  <div class="line4"></div>
  <div class="line5"></div>
  <div class="line6"></div>
  <div class="line7"></div>
  <div class="line8"></div>
  <div class="line9"></div>
  <span><h1>Google<h2>john</h2></h1></span>
  <div><h3 class="q">The Perfect <a href="http://goo.gl/AQn58">Google Nose</a> Companion</h3></div>
<div><p>omega</p></div>
  <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAIoAAAAECAIAAADeXzCbAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA2hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8%2BIDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpGNzdGMTE3NDA3MjA2ODExODFEOUEyMzFBOERFQzcyQyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDozQTlDNkVFOEVGQzIxMUUxOUJDNkEyREUzQzEzOUJGNiIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDozQTlDNkVFN0VGQzIxMUUxOUJDNkEyREUzQzEzOUJGNiIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ1M2IChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NDZENjQwNjM2MzIwNjgxMTgwODM4RUVFOTdCQkFFREQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6Rjc3RjExNzQwNzIwNjgxMTgxRDlBMjMxQThERUM3MkMiLz4gPC9yZGY6RGVzY3JpcHRpb24%2BIDwvcmRmOlJERj4gPC94OnhtcG1ldGE%2BIDw/eHBhY2tldCBlbmQ9InIiPz6z2rdVAAAAMElEQVR42mJkaP/OQHvwb7Y1A10AY%2B85Oln0OYwOtjAxjIJBDEajZzR6RgG5ACDAAGNHBgAfwwAlAAAAAElFTkSuQmCC">
  
</div>
<div><h3 style="margin-left:5em;">Coming Soon</h3></div>

style.css

@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville|Roboto:400,300,100);

* {margin:0;padding:0;font-size:100%;vertical-align:baseline;border:2em;outline:0;background:transparent;font-weight:normal;outline:none;line-height:2em;-webkit-text-size-adjust:100%;}

body { 
  background: #f5f5f5;
  margin-top:50px;
}

h1 {
  display:inline;
  background: #f5f5f5;
  position:absolute;
  left:-100px; 
  top:60px;
  animation: google 4.5s 0.2s ease; 
  font: 400 72px/80px 'Libre Baskerville', serif;
  z-index: 20;
  color:gray;
}
p {
  font:300 'Roboto', sans-serif;, serif;
  animation: google 7s 0.5s ease;
  display:inline;
  position:absolute;
  margin-left:20em;;
  margin-top:5em;
  z-index:19;
  
}
h3 {
   font:100 'Roboto', sans-serif;, serif;
}
h2 {
  display:inline;
  position:absolute;
  left:180px; 
  top:50px;
  animation: google2 6s 0.3s ease; 
  color:brown;
  font:300 70px/80px 'Roboto', sans-serif;, serif; 
}
h1 span {
  font:300 30px/30px 'Roboto', sans-serif;, serif;
  position:relative;
  top:-20px;
}  

.cont {
  position:relative;
  width:30em;
  margin: auto;
}

.frame1 {
  position: absolute;
  width: 13em;
  height: 0em;
  background:#555;
  animation: frame1 3.4s 0.5s ease; 
  z-index: 2;
}
  
.frame2 {
  position: absolute;
  width: 0em; 
  height: 16em;
  margin-left: 1.5em;
  margin-top: 1.5em;
  background:#cdd5e0;
  animation: frame2 4.6s 0.5s ease; 
  z-index: 3;
}

.line1, .line2, .line3 {
  position: absolute;
  width: 7em;
  height: 0em;
  margin-left: 3em;
  margin-top: 3em;
  background:#fff;
  z-index: 4;
}

.line4, .line5, .line6, .line7, .line8, .line9 {
  position: absolute;
  z-index: 1;
}
.line4 {
  width: 0em;
  height: 2em;
  margin-left: 2em;
  margin-top: 7em;
  background:#AFCC17;
  animation: left 2s 2.8s ease;
}
.line5 {
  width: 4em;
  height: 0em;
  margin-left: 4em;
  margin-top: 7em;
  background:#F2CE3B;
  animation: right 2s 2.8s ease;
}
.line6 {
  width: 3em;
  height: 0em;
  margin-left: 2em;
  margin-top: 12em;
  background:#F06533;
  animation: right 2s 3s ease;
}
.line7 {
  width: 2em;
  height: 0em;
  margin-left: 4em;
  margin-top: 7em;
  background:#4491AB;
  animation: right 2s 2.8s ease;
}
.line8 {
  width: 0em;
  height: 2em;
  margin-left: 3em;
  margin-top: 9em;
  background:#AFCC17;
  animation: left 2s 3s ease;
}
.line9 {
  width: 3em;
  height: 0em;
  margin-left: 4em;
  margin-top: 3em;
  background:#F06533;
  animation: right 2s 2.7s ease;
}
  

.line1 { animation: line 4.2s 0.9s ease; }
.line2 { animation: line 4.1s 0.8s ease; margin-top: 7.5em;}
.line3 { animation: line 4s 0.7s ease; margin-top:12em}
 

@keyframes line {
  0% { height: 4em; opacity: 0;}
	10% { top: 0em; opacity: 1;} 
	20% { top: 0em; } 
  60% { top: 0em; left:0; opacity: 1; width: 7em;}
  100% { left: 30em; opacity: 0; height:4em; width: 0.1em; } 
}

@keyframes left {
	0% { height: auto; opacity: 0;}
	10% { top: 0em; opacity: 1;} 
	20% { top: 0em; } 
  60% { top: 0em; left:0; opacity: 1; width: 7em;}
  100% { left: -30em; opacity: 0; height:4em; width: 0.1em;   } 
}
@keyframes right {
	0% { width: 4em; height: auto; opacity: 0;}
	10% { top: 0em; opacity: 1;} 
	20% { top: 0em; } 
  60% { top: 0em; left:0; opacity: 1; width: 7em;}
  100% { left: 30em; opacity: 0; height:4em; width: 0.1em; } 
}
/*
@keyframes frame1 {
	0% { height: 0.1em; top:12em; left:0;}
	10% { height: 22em; top: -1em; left:0;}  
	20% { height: 20em; top: 0em; left:0;} 
  70% { top: 0em; left:0; opacity: 1;}
  95% { width: 13em; top:0em; left: -30em;  opacity: 0;}
  100% { height:20em; width: 0.1em; opacity: 0;}  
}

@keyframes frame2 { 
	0% { width: 10em; top:0; left:0; opacity: 0;}
	10% { top: 0em; left:0; opacity: 1;} 
	20% { top: 0em; left:0;} 
  70% { width: 10em; top: 0em; left:0; opacity: 1;}
  100% { left: -40em; opacity: 0; width:0.1em; }
}*/
@keyframes google {
	0% { opacity: 0;}
	10% { } 
	20% { } 
  90% { opacity: 0;}
  100% { opacity: 1; } 
}/*
@keyframes google2 {
	0% { opacity: 0;} 
	10% { } 
	80% { left: -100px;} 
  90% { opacity: 0;}
  100% { opacity: 1; } 
}*/