Untitled

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>KnowUP! - Collaborative Q&A</title>
<link rel="shortcut icon" href="img/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">
<link rel="stylesheet" type="text/css" href="css/font-roboto.css">
<link rel="stylesheet" type="text/css" href="css/ink.css">
<link rel="stylesheet" type="text/css" href="css/other.css">
<script type="text/javascript" src="js/modernizr-2.8.3.min.js"></script>
<script type="text/javascript" src="js/ink-all.min.js"></script>
<script type="text/javascript" src="js/autoload.min.js"></script>
<script>
    // initialize and setup facebook js sdk
    window.fbAsyncInit = function() {
        FB.init({
          appId      : '1045480332189466',
          xfbml      : true,
          version    : 'v2.5'
        });
        FB.getLoginStatus(function(response) {
          if (response.status === 'connected') {
            document.getElementById('status').innerHTML = 'We are connected.';
            document.getElementById('login').style.visibility = 'hidden';
          } else if (response.status === 'not_authorized') {
            document.getElementById('status').innerHTML = 'We are not logged in.'
          } else {
            document.getElementById('status').innerHTML = 'You are not logged into Facebook.';
          }
        });
    };
    (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "js/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    // login with facebook with extra permissions
    function login() {
      FB.login(function(response) {
        if (response.status === 'connected') {
            document.getElementById('status').innerHTML = 'We are connected.';
            document.getElementById('login').style.visibility = 'hidden';
          } else if (response.status === 'not_authorized') {
            document.getElementById('status').innerHTML = 'We are not logged in.'
          } else {
            document.getElementById('status').innerHTML = 'You are not logged into Facebook.';
          }
      }, {scope: 'email'});
    }

    // getting basic user info
    function getInfo() {
      FB.api('/me', 'GET', {fields: 'first_name,last_name,name,id'}, function(response) {
        document.getElementById('status').innerHTML = response.id;
      });
    }
  </script>
</head>
<body onload="checkLoginState()">

  <div id="responsive-bg">
    <img src="img/DSCF2597.png" alt="">
  </div>
  <div class="ink-grid overlay half-vertical-padding push-center xlarge-45 large-60 medium-80 all-100">
    <div class="column double-horizontal-padding half-vertical-space">
      <img src="img/header.png" alt="">
    </div>
    <form action="index_user.html" method="post" class="ink-form ink-formvalidator">
      <fieldset>
        <legend class="slab align-center">Autenticação</legend>
        <div class="control-group column-group half-gutters">
          <label for="username" class="all-25 align-right">Username:</label>
          <div class="control append-symbol all-75">
            <span>
              <input name="username" id="username" type="text" data-rules="required" placeholder="Por favor introduza aqui o seu username...">
              <i class="fa fa-user"></i>
            </span>
          </div>
        </div>
        <div class="control-group column-group half-gutters">
          <label for="password" class="all-25 align-right">Password:</label>
          <div class="control append-symbol all-75">
            <span>
              <input name="password" id="password" type="password" data-rules="required" placeholder="Por favor introduza aqui a sua password...">
              <i class="fa fa-key"></i>
            </span>
          </div>
        </div>
        <div class="column-group half-horizontal-gutters">
          <div class="control-group all-15 small-5 tiny-5">
          </div>
          <div class="control-group all-25 small-30 tiny-30">
            <div class="control append-symbol">
              <span>
                <input class="ink-button black" type="submit" id="submit" name="submit" value="Validar">
                <i class="fa fa-check"></i>
              </span>
            </div>
          </div>
          <div class="control-group all-45 small-60 tiny-60">
            <div class="control append-symbol">
              <span>
                <input class="ink-button black" type="button" id="reset" name="reset" value="Recuperar Password">
                <i class="fa fa-exclamation-triangle"></i>
                </span>
              </span>
            </div>
          </div>
        </div>
        <div class="control-group column-group">
          <p class="align-center no-margin">Não se encontra registado?
            <a href="user_register.html">Registe-se aqui!</a>
          </p>
        </div>
      </fieldset>
    </form>
    <div class="control-group column-group">
          <div id="status"></div>
          <button onclick="getInfo()">Get Info</button>
          <fb:login-button scope="public_profile,email" onlogin="login();"></fb:login-button>
    </div>
  </div>
</body>
</html>