CodePen Embed - Google Logo Password

<div class="parent inactive">
  <div class="logo">
    <input class="film" onclick="color_collect(this)" caption="enter the color pattern"/>
    <span g char="<" caption="reset" onclick="color_chute(-1)">G</span>
    <span o char="red" onclick="color_chute(1)">o</span>
    <span p char="yellow" onclick="color_chute(2)">o</span>
    <span g h char="blue" onclick="color_chute(3)">g</span>
    <span l char="green" onclick="color_chute(4)">l</span>
    <span e char="?" caption="help" onclick="color_chute(0)">e</span>
  </div>
  <div class="welcome">
    <div class="text" onclick="key_collect(this)" placeholder="or did you need something?">hey there, fellow Googler, tell me about your day...</div>
    <div>
      <span class="logo" product-sans>
        <b .g>G</b><b .o>o</b><b .p>o</b><b .g>g</b><b .l>l</b><b .e>e</b>
      </span><br><br>
      An attempt to reproduce the new Google logo (with a minor bug)
      <br><br>
      <img class="auto" caption="the real logo" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
    </div>
  </div>
  <div class="key" onclick="key_collect(this, true)" placeholder="umm, password?" pwd>
    enter a password
  </div>
  <div class="exit logo" onclick="color_uncollect(document.querySelector('div.logo'))">exit</div>
</div>
<div class="hidden">
  <input type="password" class="key" onkeydown="blink_cursor(1, 'key', true); if(event.keyCode === 13){key_uncollect(this); submit('key', this); this.blur()}"/>
  <input type="password" class="logo"/>
  <input type="text" class="text" -onblur="key_uncollect(this)" onkeydown="blink_cursor(1, 'text'); if(event.keyCode === 13){ var k = 0; this.value = this.value.slice(0, k = this.selectionStart) + '\b' + this.value.slice(this.selectionStart, this.value.length); this.selectionStart = this.selectionEnd = k + 1}"/>
</div>

/*
 * See: https://www.google.com/fonts/license/productsans
 */
/* cyrillic */
@font-face {
  font-family: 'Product Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/productsans/v7/HYvgU2fE2nRJvZ5JFAumwZX5f-9o1vgP2EXwfjgl7AY.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
  font-family: 'Product Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/productsans/v7/HYvgU2fE2nRJvZ5JFAumwaaRobkAwv3vxw3jMhVENGA.woff2) format('woff2');
  unicode-range: U+0370-03FF;
}
/* latin-ext */
@font-face {
  font-family: 'Product Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/productsans/v7/HYvgU2fE2nRJvZ5JFAumwT0LW-43aMEzIO6XUTLjad8.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Product Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/productsans/v7/HYvgU2fE2nRJvZ5JFAumwegdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

@font-face {
  font-family: raleway;
  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/200597/Raleway-Regular.ttf');
} [raleway] {
  font-family: raleway;
}

@font-face {
  font-family: 'Product Sans', Raleway, Arial, sans-serif, monospace;
} [product-sans] {
  font-family: Product Sans;
}

body {
  background: #e6e6e6;
  color: #fff;
  font-family: Product Sans;
  overflow: hidden;
}

b {
  font-weight: bold;
}

/* .parent.inactive, .parent.active */

div.parent {
  color: #e6e6e6;
  height: 100vh;
  text-align: center;
  transition: all 1000ms;
  width: 100vw;
}

div.parent.inactive, div.parent.anim {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), rgba(230, 230, 230, 0.3));
}

div.parent.inactive:hover, div.parent.active {
  color: #fff;
}

div.parent.anim {
  height: 0;
}

/* .inactive .key, .exit.logo */

div.parent .key, .exit.logo, [caption]::before {
  background: #fff;
  border: solid 5px #fff;
  border-radius: 0.5vw;
  box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.2);
  color: #b6b6b6;
  font-size: 2vw;
  height: 2vw;
  margin-left: 37vw;
  margin-top: 40vh;
  opacity: 0;
  position: absolute;
  transition: all 1000ms;
  width: 20vw;
  z-index: 9;
}

div.parent.inactive:hover .key {
  opacity: 1;
}

/* .exit.logo */

.exit.logo {
  cursor: pointer;
  display: none;
  opacity: 1;
}

/* .hidden */

.hidden {
  height: 0;
  overflow: hidden;
  width: 0;
}

/* logo */

input.film {
  background: rgba(0,0,0,0);
  color: rgba(0,0,0,0);
  border: solid 0 rgba(0,0,0,0);
  height: 12vw;
  margin-left: -1vw;
  position: absolute;
  transitrion: all 0;
  width: 40vw;
  z-index: 36;
}

div.logo {
  height: 11vw;
}

div.logo > * {
  cursor: pointer;
  transition: all 1000ms;
}

div.parent.inactive > div.logo.pop > * {
  font-size: 15vw;
}

div.parent.inactive > .logo > span, div.parent.active > .logo > span {
  font-size: 10vw;
  margin: -2px;
  padding: 5px;
  width: 3vw;
}

div.parent.active > .logo > span {
  box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.2);
  font-size: 5vw;
}

div.parent.inactive > .logo.pop > span {
  cursor: pointer;
  text-shadow: 1px 5px 0px rgba(0,0,0,0.2);
}

div.parent.inactive > .logo.pop > span:hover {
  border-bottom: solid 5px rgba(0,0,0,0);
  border-radius: 1vw;
  height: 15vw;
  padding-bottom: 25px;
  text-shadow: 1px 10px 0px rgba(0,0,0,0.1);
}

div.parent.inactive > .logo.pop > span::after {
  background: inherit;
  border: none;
  content: attr(char);
  font-size: 20%;
  padding: 0.5vw;
  vertical-align: -50%;
}

div.parent.active > .logo.pop > span::after {
  background: rgba(0,0,0,0);
  border: none;
  content: "";
  vertical-align: 0;
}

[g] {
  background: #4285F4;
} [g]:first-of-type {
  border-bottom-left-radius: 2.5vw;
}

[\.g] {
  color: #4285F4;
}

[o], [e] {
  background: #EA4335;
}

[\.o], [\.e] {
  color: #EA4335;
}

[p] {
  background: #FBBC05;
}

[\.p] {
  color: #FBBC05;
}

[l] {
  background: #34A853;
}

[\.l] {
  color: #34A853;
}

[e] {
  border-bottom-right-radius: 2.5vw;
}

[\.e] {
  transform: rotateZ(270deg);
}

/* etc. */

div.welcome, div.welcome > * {
  background: #fff;
  border: solid 5px #fff;
  border-radius: 0.5vw;
  box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.2);
  color: #b6b6b6;
  display: none;
  font-size: 5vw;
  height: 80vh;
  margin-left: 0;
  margin-top: 0;
  opacity: 0;
  position: relative;
  text-align: left;
  transition: all 1000ms;
  width: 90vw;
  z-index: 18;
}

div.welcome > * {
  box-shadow: 0px 1px 8px 0px rgba(0,0,0,0.15);
  display: inherit;
  float: left;
  font-size: 16px;
  height: 40%;
  margin: auto;
  opacity: inherit;
  width: 40%;
  z-index: 27;
}

div.welcome.anim {
  opacity: 1;
}

/* input */

div#focus {
  box-shadow: 1px 10px 5px rgba(0,0,0,0.1);
}

a[cursor] {
  border: none;
  border-left: solid 1px rgba(0,0,0,0);
  height: 5vw;
  width: 1px;
}

a[select] {
  background: #f3f3f3;
  border: dashed 1px #000;
  color: #000;
  text-decoration: none;
}

div[placeholder], div[text], div[pwd] {
  background: #f6f6f6;
  border-color: #f6f6f6;
  font-family: inherit;
  cursor: text;
  overflow: auto;
}

div[placeholder]:hover, div[text]:hover, div[pwd]:hover {
  background: #fff;
  border-color: #fff;
}

div[placeholder][fix], div[text][fix], div[pwd] {
  overflow: hidden;
}

span.logo {
  font-size: 7vw;
}

span.logo > * {
  border: none;
  margin: 0;
  padding: 0;
}

[caption]::before {
  background: #fff;
  border: solid 5px #fff;
  border-radius: 0.5vw;
  box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.2);
  color: #b6b6b6;
  content: attr(caption);
  height: auto;
  margin-left: auto;
  margin-top: 5%;
  position: absolute;
  text-align: center;
  text-shadow: none;
  z-index: 27;
}

[caption]:hover::before {
  opacity: 1;
}

img.auto {
  height: auto;
  max-height: 100%;
  max-width: 100%;
  width: auto;
}

// Google Password - Ephellon Dantzler 2016
document.query = document.querySelector;

// Allow the use of colors to make a password
function color_collect(e) {
  document.query(".key").style.display = document.query(".logo .film").style.display = "none";
  document.query(".exit.logo").style.display = "inherit";
  e.parentElement.className += " pop";
}

function color_chute(e) {
  var f = document.query("input.logo");
  if(e < 1) {
    if(e === 0) {
      document.querySelector('.exit.logo').innerHTML = "<a .o>red</a> <a .g>blue</a> <a .p>yellow</a> <a .l>green</a>";
      setTimeout(function(){
        document.querySelector('.exit.logo').innerHTML =  "exit"
      }, 7000);
    }
    else {
      f.value = "";
    }
  } else {
    f.value += e;
    if(f.value.length >= 4) {
      submit("color");
    }
  }
}

function color_uncollect(e) {
  document.query(".key").style.display = document.query(".film").style.display = "";
  document.query(".exit.logo").style.display = "none";
  e.className = "logo";
  submit("color");
}

// Allow the use of the keyboard
var cursor = 1;

function key_collect(e, k) {
  var f = document.query("input." + e.className);
  f.focus();
  e.id = "focus";
  e.cursor = setInterval(function() {
    cursor = -(cursor - 1);
    blink_cursor(cursor, e.className + "", k);
  }, 500);
}

function blink_cursor(b, c, k) {
  var d = document.query("div." + c),
      n = document.query("input." + c),
      S = 'visit',
      N = n.value,
      N_ = N.slice(0, n.selectionStart),
      _N = N.slice(n.selectionStart, N.length),
      __N = N.slice(n.selectionStart, n.selectionEnd),
      ___N = N.slice(n.selectionEnd, N.length),
      U = (/[\w\$]\.[\w\$]/.test(__N)?
           (/^([\w\$\-]{3,})?\:\/\//.test(__N)?
            (S = 'open', __N):
            "http://" + __N):
           "https://google.com/search?q=" + (S = 'search for', __N)
           .replace(/[\b]/g, " "));
  var a = ["", "<a cursor style='border-color: " + d.style.color + "'></a>"];
  if(n.selectionStart === n.selectionEnd) {
    d.innerHTML = ((k)?
                   ((N_.replace(/./g, "&middot;")) + a[b] + (_N.replace(/./g, "&middot;"))):
                   (html(N_) + a[b] + html(_N)))
      .replace(/[\b]/g, "<br>")
      .replace(/\s\s/g, "&nbsp;&nbsp;");
  } else {
    d.innerHTML = ((k)?
                   ( N_ + '<a select style="border-color: ' + d.style.color + ';">' + (__N.replace(/./g, "&middot;")) + '</a>' + ___N ):
                   ( html(N_) + '<a select draggable="true" ondrag="this.setAttribute(\'href\', this.innerHTML)" href="' + encodeURI(U).replace(/%20/g, "+") + '" style="border-color: ' + d.style.color + ';" target="_blank" caption=\'drag/click to ' + S + ' "' + html(__N).replace(/[\b]/g, " ") + '"\'>' + html(__N) + '</a>' + html(___N) ))
      .replace(/[\b]/g, "<br>")
      .replace(/\s\s/g, "&nbsp;&nbsp;");
  }
  if(n.value === "") {
    d.style.color = "rgba(182, 182, 182, 0.7)";
    d.innerHTML = a[b] + (d.getAttribute("placeholder") || n.getAttribute("placeholder")) || ""
  } else {
    d.style.color = "#6e6e6e";
  }
}

function key_uncollect(c) {
  c = c.className;
  blink_cursor(0, c);
  c = document.query("div." + c);
  c.id = "";
  clearInterval(c.cursor);
}

function submit(c, e) {
  var a = ["color", "key"],
      b = ["div.key", "input.film", "div.exit.logo"],
      f;
  switch(c) {
    case "color":
      f = document.query("input.logo");
      if(f.value == "1324") { // red blue yellow green
        allow(b);
      }
      break;
    case "key":
      e = e.className.split(" ")[0];
      f = document.query("input." + e);
      e = document.query("div." + e);
      if(f.value == "#codepen" || f.value == "8888") { // password or PIN
        allow(b);
      } else {
        e.innerHTML = "password failed";
        e.style.background = e.style.borderColor = "#EA4335";
        e.style.color = "#fff";
      }
      break;
  }
}


// passed "inspection"
function allow(b) {
  document.query("div.parent").className += " active";
  for(var x = 0; x < b.length; x++) {
    document.query(b[x]).style.display = "none";
  }
  document.query("div.logo").setAttribute("onclick", "");
  for(var x = 0; x < (y = "hlop", y.length); x++) {
    document.query("span[" + y[x] + "]").setAttribute("caption", "this letter does nothing");
  }
  document.query("div.welcome").style.display = "inherit";
  setTimeout(function(){
    document.query("div.parent").className = "parent active anim";
    setTimeout(function(){
      document.query("div.parent").className = "parent active";
      document.query("span[g]").setAttribute("caption", "Google.com");
      document.query("span[g]").setAttribute("onclick", "window.open('https://google.com')");
      document.query("span[e]").setAttribute("caption", "exit");
      document.query("span[e]").setAttribute("onclick", "k = confirm('You are about to leave me...'); if(k) window.close()");
    }, 1000);
    document.query("div.welcome").className += " anim";
  }, 100);
}

function html(n) {
  return n
    .replace(/&([^#\w])/g, "&amp;$1")
    .replace(/</g, "&lt;")
    .replace(/>/g, "&gt;");
}

This Pen is owned by The E.N.D. on CodePen.

See more by @Ephellon on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.