nothing special

index.haml

/ by: @vinhnx.

!!!5
%html
  %head
    %meta{:charset => "utf-8"}
      %title random
  %body
    #container
      %h1{:title => "enter to win freeee cookies! ;)"} Join the Dark Side
      %small ... and get freeee cookies!

      %br/
      %a#le-btn{:href => "#"} I'm In!

    .welcome
      %a{:href => ""} check again

  
    #le-modal
      %a#close-btn{:href => "#"} x
      %form
        %ul
          %li
            %input{:id => "name", :placeholder => "Name", :required => "required",:type => "text", "x-webkit-speech" => ""}/
          %li
            %button{:type => "submit", :id => "go"} Go
            %button{:type => "reset"} Reset

script.coffee

$ ->
  c = $("div#container")
  $("div#le-modal").hide()
  $("div.welcome").hide()
  $("a#le-btn").click (e) ->
    c.addClass "blur"
    $("div#le-modal").slideDown "fast", ->
      $("a#close-btn").click ->
        $("div#le-modal").slideUp 500
        c.removeClass "blur"
    e.preventDefault()

  $("form").submit (e) ->
    e.preventDefault()
    i = $("input")
    if i.val().toLowerCase() is "luke" or i.val().toLowerCase() is "luke skywalker" or i.val().toLowerCase() is "skywalker"
      $("form").slideUp()
      c.hide()
      $("div.welcome").fadeIn().append("<div><img src='http://25.media.tumblr.com/tumblr_mahfv7CI0C1r4b9xyo1_500.jpg' alt='Happy Vader is happy'/></div>").prepend "<h1 style='text-transform: capitalize'>Welcome back home, " + i.val() + " !</h1>"
    else
      $("form").slideUp()
      c.hide()
      $("div.welcome").fadeIn().append("<div><img src='http://25.media.tumblr.com/tumblr_mah0py59jp1qd6kfbo1_500.jpg' alt='Join the Dark side today!'/></div>").prepend "<h1>Join the Dark Side today, " + i.val() + " ! ;)</h1>"

style.less

// ... modal in action

@import url('http://fonts.googleapis.com/css?family=Doppio+One');

// base setting
// ------------

@100: 100%;
@fontFam: 'Doppio One', 'Helvetica Neue', Helvetica, Arial, sans-serif;
@basecl: #111;
@cl1: #293033;
@cl2: #594D37;
@cl3: #8C644C;
@cl4: #C4BE90;
@cl5: #FAFAC0;

*, *:before, *:after { .box-sizing }

::-moz-selection { background: @cl5; color: #222; text-shadow: none; }
::selection { background: @cl5; color: #222; text-shadow: none; }

html {
  text-rendering: optimizeLegibility;
  margin: 0;
  padding: 0;
  font-size: 100%;
  min-height: 100%;
  overflow: hidden;
}

body {
  // background: @cl1;
  background-color: @cl1;
  background-image: linear-gradient(left, darken(@cl1, 2%) 50%, transparent 50%);
  background-size: 9rem;
  
  font: 14px/2 @fontFam;
  color: @cl5;
  text-shadow: 0 1px 0 #bdbdbd;
}

a, a:visited {
  color: @cl3;
}

a:active { .at; }

img {
  .box-shadow();
  
  // CSS3 calc()
  margin: calc(3% - 1rem) 0;  
  
  border-radius: 15px;
  -webkit-filter: grayscale(50%);
  // -webkit-filter: sepia(10%) brightness(0.5);
    .transition();
  
  &:hover {
    -webkit-filter: sepia(60%);
    -webkit-transform: scale(1.1);
    cursor: pointer;
    .transition();
    .box-shadow();
  }
  &:active {
    -webkit-transform: scale(1.9);
  }
  &:after {
    box-shadow: inset 2em 2em 6em #ccc;
  }
}

a#le-btn {
  background: lighten(@basecl, 10%);
  color: @cl4;  
  margin: 2rem 0;
  font-size: 35px;
  text-decoration: none;
  text-transform: capitlize;
  padding: .5rem 2.5rem;
  .box-shadow();
  &:hover {
    background: lighten(@basecl, 5%);
    color: darken(@cl4, 15%);
  }
}

#container {
  margin: 15% 0;
  text-shadow: 0 -1px 0 @basecl;
  text-align: center;
  h1 {
    color: darken(@cl4, 22%);
    text-shadow: 1px 4px 9px #000;
    text-transform: uppercase;
    font-size: 90px;
    line-height: 90px;
    .transition();
    &:hover {
      -webkit-transform: scale(1.1);
      color: darken(@cl4, 22%);
      cursor: pointer;
    }
    &:active {
      -webkit-transform: scale(1.9);
    }
  }
}

#le-modal {
    width: 380px;
    height: auto;
    margin: 0;
    position: absolute;
    z-index: 9999;
    bottom: 0;
    left: calc(35% + 1rem);
  
    // left: calc(50% - 3em);
    // top: calc(50% - 3em);
  
    background: lighten(@cl1, 22%);
    .box-shadow();
    ul {
      list-style: none;
      display: block;
      margin: 1rem 2rem 1rem 0;
      li {
        input[type^='t'], input[type$='d'] {
          font-size: 22px;
          margin: .7rem 1rem;
          padding: .5rem 1rem;
          border: none;
          .box-shadow();
        }
        button {
          background: darken(@cl3, 5%);
          color:  @cl5;
          font-size: 18px;
          border: solid  1px darken(@cl3, 10%);
          padding: .3rem 2.5rem;
          margin: .4rem .8rem;
          &:hover {
            background: @cl1;
            color: @cl4;
          }
        }
      }
    }
}

#close-btn {
  position: absolute;
  right:  .1rem;
  padding: .5rem 1rem;
  text-decoration: none;
  color: @cl1;
  &:hover {
    color: @cl4;
  }
}

.welcome {
  text-align: center;
  h1 {
    text-transform: capitalize;
  }
}


// HELPER
// ------

.box-shadow {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
} 

.box-shadow(@x: 0, @y: 7px, @blur: 7px, @spread: 0, @color: @basecl) {
  box-shadow: @x @y @blur @spread @color;
}

.at {
  top: 1px;
  position: relative;
}

.blur {
  -webkit-filter: blur(7px);
}

.transition-duration(@timing: 150ms) {
  -webkit-transition-duration: @timing;
  -moz-transition-duration: @timing;
  transition-duration: @timing;
}

.transition(@timing: 300ms, @type: all, @style: ease-in) {
  -webkit-transition: @timing @type @style;
  -moz-transition: @timing @type @style;
  transition: @timing @type @style;
}

.box-sizing(@display: border-box) {
  -webkit-box-sizing: @display;
  -moz-box-sizing: @display;
  box-sizing: @display;
}