LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Log In

NATHAN.TOKYO
CSS
html {
  font-size: 10px;
}

body {
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  background: -webkit-linear-gradient(bottom, #da0b62, #dfc59f);
  background: linear-gradient(0deg, #da0b62, #dfc59f);
  font-family: "Source Sans Pro", sans-serif;
  font-size: 2rem;
  line-height: 1.414;
}
body:after {
  z-index: 1;
  content: '';
  mix-blend-mode: color;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: -webkit-radial-gradient(circle, rgba(0, 0, 0, 0) 40%, #8f3d88);
  background-image: radial-gradient(circle, rgba(0, 0, 0, 0) 40%, #8f3d88);
  -webkit-transform-origin: 70% 100%;
          transform-origin: 70% 100%;
  -webkit-transform: scaleY(2) scaleX(1.5);
          transform: scaleY(2) scaleX(1.5);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Bitter", serif;
  margin: 0 0 0.8em 0;
  font-weight: 800;
  font-size: 1.414em;
  line-height: 1;
}

* {
  box-sizing: border-box;
}

.wrap {
  position: absolute;
  z-index: 2;
  width: 420px;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
  background: #fcfffa;
  border-radius: 1.5rem;
  padding: 5rem;
  box-shadow: 1rem 2rem 4rem rgba(143, 61, 136, 0.2), inset 0.4rem 0.6rem 0.6rem rgba(223, 197, 159, 0.4), inset -0.4rem -0.6rem 0.6rem rgba(218, 11, 98, 0.2);
  color: #8f3d88;
}
.wrap label {
  display: block;
  margin: 2rem 0 0.5rem;
  font-size: 2rem;
  font-weight: 300;
}
.wrap input {
  border-radius: 0.5rem;
  padding: 1rem;
  border: none;
  outline: none;
  font-family: "Source Sans Pro", sans-serif;
}
.wrap input[type="text"], .wrap input[type="password"] {
  color: #8f3d88;
  width: 100%;
  margin: 0.5rem 0;
  background: #f5feff;
  font-weight: 300;
  box-shadow: inset -0.15rem -0.25rem 0.5rem rgba(252, 254, 231, 0.4), inset 0.05rem 0.1rem 0.3rem rgba(143, 61, 136, 0.4), 0.2rem 0.3rem 0.6rem #fcfee7, -0.2rem -0.3rem 0.2rem rgba(218, 11, 98, 0.1);
  -webkit-transition: color 220ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-filter 110ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 2200ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: color 220ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-filter 110ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 2200ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: color 220ms cubic-bezier(0.215, 0.61, 0.355, 1), filter 110ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 2200ms cubic-bezier(0.215, 0.61, 0.355, 1);
  transition: color 220ms cubic-bezier(0.215, 0.61, 0.355, 1), filter 110ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 2200ms cubic-bezier(0.215, 0.61, 0.355, 1), -webkit-filter 110ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 2200ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
@-webkit-keyframes shake {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  30% {
    -webkit-transform: translateX(-1rem);
            transform: translateX(-1rem);
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  40% {
    -webkit-transform: translateX(1rem);
            transform: translateX(1rem);
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
            animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  55% {
    -webkit-transform: translateX(-1rem);
            transform: translateX(-1rem);
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
            animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  70% {
    -webkit-transform: translateX(0.7rem);
            transform: translateX(0.7rem);
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
            animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  85% {
    -webkit-transform: translateX(-0.7rem);
            transform: translateX(-0.7rem);
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
@keyframes shake {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  30% {
    -webkit-transform: translateX(-1rem);
            transform: translateX(-1rem);
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  40% {
    -webkit-transform: translateX(1rem);
            transform: translateX(1rem);
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
            animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  55% {
    -webkit-transform: translateX(-1rem);
            transform: translateX(-1rem);
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
            animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  70% {
    -webkit-transform: translateX(0.7rem);
            transform: translateX(0.7rem);
    -webkit-animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
            animation-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1);
  }
  85% {
    -webkit-transform: translateX(-0.7rem);
            transform: translateX(-0.7rem);
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
.wrap input[type="text"].shake, .wrap input[type="password"].shake {
  -webkit-filter: blur(0.6px);
          filter: blur(0.6px);
  color: transparent;
  -webkit-animation: shake 440ms infinite;
          animation: shake 440ms infinite;
  -webkit-transform: translateX(-1rem);
          transform: translateX(-1rem);
}
.wrap input[type="password"] {
  letter-spacing: 0.2rem;
}
.wrap input[type="submit"] {
  padding: 1rem 2rem;
  color: #da0b62;
  background: #da0b62;
  cursor: pointer;
  -webkit-transition: box-shadow 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: box-shadow 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: box-shadow 220ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: box-shadow 220ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: scale(1);
          transform: scale(1);
  box-shadow: 0.05rem 0.05rem 0.1rem rgba(143, 61, 136, 0.2), inset 0.15rem 0.25rem 0.5rem rgba(252, 254, 231, 0.4), inset -0.15rem -0.25rem 0.5rem rgba(143, 61, 136, 0.4), -0.2rem -0.3rem 0.6rem rgba(252, 254, 231, 0.1), 0.2rem 0.3rem 0.6rem rgba(218, 11, 98, 0.1);
}
.wrap input[type="submit"]:hover:not(:active):not([disabled]), .wrap input[type="submit"]:focus:not(:active):not([disabled]) {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  box-shadow: 0.05rem 0.25rem 0.3rem rgba(143, 61, 136, 0.2), inset 0.15rem 0.25rem 0.5rem rgba(252, 254, 231, 0.4), inset -0.15rem -0.25rem 0.5rem rgba(143, 61, 136, 0.4), -0.2rem -0.3rem 0.6rem rgba(252, 254, 231, 0.1), 0.2rem 0.3rem 0.6rem rgba(218, 11, 98, 0.1);
}
.wrap #submit {
  margin-top: 2rem;
  position: relative;
  display: inline-block;
}
.wrap #submit label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 0;
  color: white;
  font-weight: 800;
  text-shadow: 1px 1px 5px rgba(143, 61, 136, 0.3);
  pointer-events: none;
  -webkit-transform-origin: 50% 30%;
          transform-origin: 50% 30%;
  -webkit-transition: opacity 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.wrap #submit:hover label {
  -webkit-transform: translateY(-10%) scale(1.05);
          transform: translateY(-10%) scale(1.05);
}
.wrap #submit .dots {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  line-height: 1rem;
  padding: 0;
  pointer-events: none;
  -webkit-transform: translateY(-30%);
          transform: translateY(-30%);
  opacity: 0;
  -webkit-transition: opacity 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1), opacity 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.wrap #submit .dots .dot {
  position: absolute;
  top: calc(50% - 0.5rem);
  width: 1rem;
  height: 1rem;
  border-radius: 1rem;
  background: white;
  display: block;
  -webkit-animation: bounce 800ms infinite;
          animation: bounce 800ms infinite;
}
@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  15% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  30% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes bounce {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  15% {
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  30% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
.wrap #submit .dots .dot:nth-child(1) {
  left: calc(30% - 0.5rem);
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}
.wrap #submit .dots .dot:nth-child(2) {
  left: calc(50% - 0.5rem);
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}
.wrap #submit .dots .dot:nth-child(3) {
  left: calc(70% - 0.5rem);
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
}
.wrap #submit.checking label {
  -webkit-transform: translateY(30%);
          transform: translateY(30%);
  opacity: 0;
}
.wrap #submit.checking .dots {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  opacity: 1;
}
.wrap .message {
  position: absolute;
  bottom: 5rem;
  right: 5rem;
  color: #8f3d88;
  font-size: 20px;
  line-height: 30px;
  -webkit-transition: opacity 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 220ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: opacity 220ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.wrap .message.lockout {
  color: #da0b62;
}
.wrap .message.hidden {
  opacity: 0;
  -webkit-transform: translateY(50%);
          transform: translateY(50%);
}
.wrap .message.finished {
  opacity: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.wrap .message .lnr {
  color: #da0b62;
  font-size: 30px;
}
.wrap .message .number {
  font-size: 30px;
  position: relative;
  display: inline-block;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  color: transparent;
  margin-right: 0.2rem;
  -webkit-transition: color 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color 220ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color 220ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.wrap .message .number:before {
  content: '2';
  position: absolute;
  left: 0;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  color: transparent;
  -webkit-transition: color 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color 220ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color 220ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.wrap .message .number:after {
  content: '3';
  position: absolute;
  left: 0;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  color: #da0b62;
  -webkit-transition: color 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color 220ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: color 220ms cubic-bezier(0.645, 0.045, 0.355, 1), transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 220ms cubic-bezier(0.645, 0.045, 0.355, 1);
}
.wrap .message .number.two:after {
  color: transparent;
  -webkit-transform: translateY(-200%);
          transform: translateY(-200%);
}
.wrap .message .number.two:before {
  color: #da0b62;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}
.wrap .message .number.one {
  color: #da0b62;
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
}
.wrap .message .number.one:before, .wrap .message .number.one:after {
  color: transparent;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
}

.sig {
  position: fixed;
  bottom: 8px;
  right: 8px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 100;
  font-family: sans-serif;
  color: rgba(255, 255, 255, 0.8);
  letter-spacing: 2px;
}
JS
//FOCUS THE USERNAME FIELD ON PAGE LOAD
//Comment this out if you want to edit as its really frustrating
$(document).ready(function(){
  //$('#username').focus();
});

//CATCH THE SUBMIT
$('#login').on('submit', function(e){
  e.preventDefault();
  e.stopPropagation();
  
  //CHECK THAT FIELDS ARE FILLED
  if ($("#username").val() != '' && $("#password").val() != '' ){
    
    //SUBMIT BUTTON ANIMATION HANDLING
    $('#submit').addClass('checking');
    $('#submit input').attr('disabled','true');
    
    //IMITATE LOADING TIME
    //This would be replaced with ajax in production.
    setTimeout(function(){
      $('#submit').removeClass('checking');
      clearPassword();
      handleMessage();
    }, 1000);
    
  } else{
    
    //SHAKE THE USERNAME AND PW FIELDS IF THEY ARE EMPTY ON SUBMIT
    if ($("#username").val() != ''){
      
      $("#password").addClass('shake');
      $("#password").focus();
      setTimeout(function(){
        $("#password").removeClass('shake');
      },440);
      
    } else {
      
      $("#username").addClass('shake');
      $("#username").focus();
      setTimeout(function(){
        $("#username").removeClass('shake');
      },440);
      
    }
  }
})

//HANDLE ANIMATION AND CLEARING OF INCORRECT PW
function clearPassword(){
  $("#password").addClass('shake');
  setTimeout(function(){
    $("#password").val('');
    $("#password").focus();
    $("#password").removeClass('shake');
    $('#submit input').removeAttr('disabled');
  },440);
}

//STORE USERNAMES AND ATTEMPTS REMAINING
//Purley for display purposes, this would be handled on the server with ajax in production.
var log = {};


//CHECK THE NUMBER OF ATTEMPTS REMANING AND SHOW APPROPRIATE MESSAGE
function handleMessage(){
  
  var username = $('#username').val();
  
  if(log[username] == undefined){
    log[username] = 3;
  }
  
  var attempts = log[username];
  
  switch(attempts){
    case 3:
      $('.remain').removeClass('hidden finished');
      $('.number').removeClass('two one');
      $('.lockout').addClass('hidden');
      log[username]--
    break;
    case 2:
      $('.remain').removeClass('hidden finished');
      $('.number').addClass('two');
      $('.number').removeClass('one');
      $('.lockout').addClass('hidden');
      log[username]--
    break;
    case 1:
      $('.remain').removeClass('hidden finished');
      $('.number').addClass('two one');
      $('.lockout').addClass('hidden');
      log[username]--
    break;
    case 0:
      $('.remain').removeClass('hidden');
      $('.remain').addClass('finished');
      $('.number').addClass('two one');
      $('.lockout').removeClass('hidden');
    break;
  }
}
Host Instantly Drag and Drop Website Builder

 

Description

I tried to see what I could improve usability wise on the humble Login form. As much as possible I wanted to use visual cues to convey information simply.
Term
Wed, 11/29/2017 - 11:22

Related Codes

Pen ID
Pen ID
Pen ID