Untitled

<!DOCTYPE html>
<html>
  
  <!-- Made by Niji-Chan -->

  <head>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,700' rel='stylesheet' type='text/css'>
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <!-- WEBM Background
    <video autoplay loop muted poster="background-fallback.jpg" id="webm">
      <source src="http://i.4cdn.org/wsg/1437458229845.webm" type="video/webm">
      <source src="http://i.4cdn.org/wsg/1437458229845.webm" type="video/mp4">
    </video> -->
    
    <div class="search">
      <input type="text" id="searchbox" placeholder="Search Encrypted Google" />
      <div id="output"></div>
    </div>

    <div class="container">
      <div class="art-box one">
        <div class="artwork"></div>
        <ul class="links">
          <li><a href="#">Google</a></li>
          <li><a href="#">Twitter</a></li>
          <li><a href="#">Gmail</a></li>
          <li><a href="#">Bandcamp</a></li>
          <li><a href="#">Soundcloud</a></li>
          <li><a href="#">Youtube</a></li>
        </ul>
      </div>
      
      <!-- // NOTE ////////////////////////////////////

        Copy paste box below for more link-boxes.
        
        Want a new background?
        
        1. Replace "two" with "three"
        2. Open style.css
        3. Copy the .art-box.two .artwork entry
        4. Change "two" to "three"
        5. Change background url.
        6. ???
        7. Profit.
        
      ////////////////////////////////////////////   //-->
      <div class="art-box two">
        <div class="artwork"></div>
        <ul class="links">
          <li><a href="#">4Chan</a></li>
          <li><a href="#">8Chan</a></li>
          <li><a href="#">lainchan</a></li>
          <li><a href="#">Butthurt Club</a></li>
          <li><a href="#">sad panda</a></li>
          <li><a href="#">wallhaven</a></li>
        </ul>
      </div>
    </div>
    
    <script src="script.js"></script>
  </body>
</html>

var searchbox = document.getElementById('searchbox')
var searchlist = document.getElementById('output')

/* this function handles the data */
function onResults (data){
  var results = data[1]
  var cleaned
  var result
  var list = "<ul class='search-list'>"
  
  for (var index in results) {
    result = results[index][0]
    cleaned = result.replace('<b>', '').replace('</b>', '')
    list += [
      '<li><a href="https://encrypted.google.com/search?q=' + cleaned + '" target="_blank">',
      result,
      '</a></li>'
    ].join('')
  }
  
  list += "</ul>"
  searchlist.innerHTML = results.length ? list : ''
}

/* handles keypresses for autocomplete */
searchbox.onkeyup = searchbox.onclick = function (e) {
  if (e.keyCode === 13) {
    window.open('https://encrypted.google.com/search?q=' + searchbox.value)
    searchlist.innerHTML = ''
    searchbox.value = ''
    return
  }
  
  $.getJSON(
    'https://encrypted.google.com/complete/search?' + 
    'client=hp&hl=en&sugexp=msedr&gs_rn=62&gs_ri=hp&cp=1&gs_id=9c&xhr=t&callback=?&q=' +
    searchbox.value, onResults)
}

/* handles clicking other places */
$(window).mouseup(function (e) {
  var container = $(searchbox.parentNode)
  
  if (container.has(e.target).length !== 0 && $(e.target).parent('a').length !== 0) {
    return setTimeout(function () {
      searchlist.innerHTML = ''
      searchbox.value = ''
    }, 100)    
  }

  if (!container.is(e.target) && container.has(e.target).length === 0) {
    searchlist.innerHTML = ''
    searchbox.value = ''
  }
})

* {
  box-sizing: border-box;
  /* -webkit-font-smoothing: antialiased; */ /* osx probs */ 
}


body {
  background: #17181A /* url('http://i.4cdn.org/wg/1437347345653.png') */;
  color: white;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial;
  font-size: 12px;
}

/* WEBM Background */

video#webm {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  /* background: url(polina.jpg) no-repeat;
  background-size: cover; */
}

::-webkit-input-placeholder {  
  color: #444;
}

a {
  color: #999;
  padding: 0 0 5px;
  display: inline-block;
  text-decoration: none;
}

a:hover {
  color: #5AB9FF;
  cursor: pointer;
}

.search {
  position: relative;
  z-index: 99;
}

.search input {
  width: 100%;
  background: none;
  border-bottom: 1px solid #27282B;
  color: #888;
  border: none;
  outline: none;
  padding: 10px;
  margin: 0 0 50px;
}

.search-list {
  position: absolute;
  top: 38px;
  left: 5px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.search-list a {
  background: #111;
  padding: 2px 5px;
  text-decoration: none;
  margin-bottom: 2px;
}

.container {
  position: relative;
  margin: 10% auto 0;
  width: 80%;
  z-index: 98;
}

.art-box {
  width: 250px;
  float: left;
  margin-bottom: 40px;
}

.art-box .artwork {
  width: 45px;
  height: 140px;
  background-size: cover;
  float: left;
}

.art-box .links {
  float: left;
  list-style: none;
  margin: 10px;
  padding: 0;
}

.art-box .links a {
  color: #999;
  padding: 0 0 5px;
  display: inline-block;
  text-decoration: none;
}

.art-box .links a:hover {
  color: #5AB9FF;
  cursor: pointer;
}

/* ARTWORKS (LINK SIDEBAR BACKGROUND) */

.art-box.one .artwork {
  background-image: url(http://i.4cdn.org/wg/1437270955592.jpg);
}

.art-box.two .artwork {
  background-image: url(http://i.4cdn.org/wg/1437175275951.png);
}