anchor.diff:  <div id="footer">
       <div class="container">
           <br><br><br>
  -        <p class="text-center">FunWeb &#9400; 2017 <p>
  -    </div>
  -</div>
  -
  -    <script type="text/javascript">
  -        $(document).ready(function () {
  -
  -            $("#helpModalButton").on('click', function(e) {
  -                $.post("/weakestChapter", {}, function(data) {
  -                    data = JSON.parse(data);
  -
  -                    $("#helpModalContent").html(data.weakestChapter);
  -                });
  -
  +        <p class="text-center"><span class="name">FunWeb &#9400; 2017 </span><p>
  +    </div>
  +</div>
  +
  +<script type="text/javascript">
  +    $(document).ready(function () {
  +
  +        $("#helpModalButton").on('click', function(e) {
  +            $.post("/weakestChapter", {}, function(data) {
  +                data = JSON.parse(data);
  +
  +                $("#helpModalContent").html(data.weakestChapter);
               });
   
  -            $("#updatePasswordButton").on('click', function (e) {
  -                $.post("/updatePassword", {newPassword: $("#newPassword").val()}, function (data) {
  -                    alert("password was updated")
  -                })
  -            })
           });
  -    </script>
  +
  +
  +    });
  +
  +    $(function() {
  +        $(".notifications .messages").hide();
  +        $(".notifications").click(function() {
  +            if ($(this).children(".messages").children().length > 0) {
  +                $(this).children(".messages").fadeToggle(300);
  +            }
  +        });
  +    });
  +
  +    var modal = document.getElementById('myModal');
  +
  +    // Get the button that opens the modal
  +    var btn = document.getElementById("myBtn");
  +
  +    // Get the <span> element that closes the modal
  +    var span = document.getElementsByClassName("close")[0];
  +
  +    // When the user clicks on the button, open the modal
  +    btn.onclick = function() {
  +        modal.style.display = "block";
  +    }
  +
  +    // When the user clicks on <span> (x), close the modal
  +    span.onclick = function() {
  +        modal.style.display = "none";
  +    }
  +
  +    // When the user clicks anywhere outside of the modal, close it
  +    window.onclick = function(event) {
  +        if (event.target == modal) {
  +            modal.style.display = "none";
  +        }
  +    }
  +
  +</script>
   </body>
   
  +</html>
  +<%@ page contentType="text/html;charset=UTF-8" language="java" %>
  +<!DOCTYPE html>
  +<html lang="en">
  +<head>
  +    <title>Fun Web</title>
  +    <meta charset="utf-8">
  +    <meta name="viewport" content="width=device-width, initial-scale=1">
  +    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  +    <link rel="stylesheet" href="main_menucss.css">
  +    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  +    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  +    <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
  +    <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
  +    <style type="text/css">
  +        p.detail { color:#4C4C4C;font-weight:bold;font-family:Comic;font-size:19 }
  +        span.name { color:#696969;font-weight:bold;font-family:Tahoma;font-size:18 }
  +        span.title { color:#00061a;font-weight:bold;font-family:Tahoma;font-size:30 }
  +        p.gold { color:#EAC117;font-weight:bold;font-family:Comic;font-size:19 }
  +
  +        @import url(http://fonts.googleapis.com/css?family=Lato);
  +
  +        .p1_box {
  +            position: relative;
  +            padding: 1px;
  +            margin-bottom: 36px;
  +            border: 2px solid #ff6765;
  +        }
  +
  +        .p1_box a.bot {
  +            margin-top: 1px;
  +            padding: 22px 0 20px 42px;
  +            border: 2px solid #ff6765;
  +            display: block;
  +            position: relative;
  +            background-color: #ff6765;
  +            color: #2a394e;
  +            font: 27px/27px 'Economica', sans-serif;
  +        }
  +
  +        .p1_box a.bot:hover {
  +            background-color: #fff;
  +        }
  +
  +        .p1_box.left {
  +            margin-right: 23px;
  +        }
  +
  +        .p1_box.right {
  +            margin-left: 23px;
  +        }
  +
  +        .p1_box.right:after {
  +            top: 126px;
  +            left: -12px;
  +            width: 0px;
  +            height: 0px;
  +            border-style: solid;
  +            border-width: 10px 12px 10px 0;
  +            border-color: transparent #ff6360 transparent transparent;
  +
  +        }
  +
  +        .cl4 {
  +            border-color: #2a394e;
  +        }
  +
  +        .cl4 a.bot {
  +            background-color: #f3f6f8;
  +            border-color: #f3f6f8;
  +            padding-left: 70px;
  +            padding-top: 75px;
  +            margin-top: 0;
  +            padding-bottom: 59px;
  +            font-size: 36px;
  +            line-height: 36px;
  +
  +        }
  +
  +        #arena{
  +            background-image: url("http://i.imgur.com/OT41iNM.jpg");
  +            background-size: 500px 180px;
  +
  +        }
  +
  +        #tutorial{
  +            background-image: url("http://i.imgur.com/B2mqEZb.jpg");
  +            background-size: 525px 200px;
  +        }
  +
  +        .cl4 a.bot:hover {
  +            color: #fff;
  +            background-color: #2a394e;
  +            border-color: #2a394e;
  +        }
  +
  +        .cl4:before {
  +            top: 57px !important;
  +            background-color: #2a394e;
  +
  +        }
  +
  +        .cl4.right:after {
  +            top: 52px;
  +            border-color: transparent #2a394e transparent transparent;
  +        }
  +
  +
  +        .navbar, .dropdown-menu{
  +            background:rgba(255,255,255,0.25);
  +            border: none;
  +
  +        }
  +
  +        .nav>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .dropdown-menu>li>a, .dropdown-menu>li{
  +            border-bottom: 3px solid transparent;
  +        }
  +        .nav>li>a:focus, .nav>li>a:hover,.nav .open>a, .nav .open>a:focus, .nav .open>a:hover, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover{
  +            border-bottom: 3px solid transparent;
  +            background: none;
  +        }
  +        .navbar a, .dropdown-menu>li>a, .dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover, .navbar-toggle{
  +            color: black;
  +        }
  +        .dropdown-menu{
  +            -webkit-box-shadow: none;
  +            box-shadow:none;
  +        }
  +
  +        .nav li:hover:nth-child(8n+1), .nav li.active:nth-child(8n+1){
  +            border-bottom: #C4E17F 3px solid;
  +        }
  +        .nav li:hover:nth-child(8n+2), .nav li.active:nth-child(8n+2){
  +            border-bottom: #F7FDCA 3px solid;
  +        }
  +        .nav li:hover:nth-child(8n+3), .nav li.active:nth-child(8n+3){
  +            border-bottom: #FECF71 3px solid;
  +        }
  +        .nav li:hover:nth-child(8n+4), .nav li.active:nth-child(8n+4){
  +            border-bottom: #F0776C 3px solid;
  +        }
  +        .nav li:hover:nth-child(8n+5), .nav li.active:nth-child(8n+5){
  +            border-bottom: #DB9DBE 3px solid;
  +        }
  +        .nav li:hover:nth-child(8n+6), .nav li.active:nth-child(8n+6){
  +            border-bottom: #C49CDE 3px solid;
  +        }
  +        .nav li:hover:nth-child(8n+7), .nav li.active:nth-child(8n+7){
  +            border-bottom: #669AE1 3px solid;
  +        }
  +        .nav li:hover:nth-child(8n+8), .nav li.active:nth-child(8n+8){
  +            border-bottom: #62C2E4 3px solid;
  +        }
  +
  +        .navbar-toggle .icon-bar{
  +            color: #fff;
  +            background: #fff;
  +        }
  +
  +        #atributes{
  +            margin-top: 80px;
  +        }
  +
  +        body{
  +            width: 98%;
  +        }
  +
  +        a {
  +            font-size: 19px;
  +            color: #808080;
  +        }
  +
  +        a.navbar-brand {
  +            font-size: 27px;
  +            font-weight:bold;
  +            font-family:Times;
  +            color: #2F4F4F;
  +        }
  +
  +        hr {
  +            display: block;
  +            height: 1px;
  +            border: 0;
  +            border-top: 1px solid #ccc;
  +            margin: 1em 0;
  +            padding: 0;
  +        }
  +
  +        img {
  +            margin-top: 80px;
  +        }
  +
  +
  +
  +        html {
  +            font:12pt Lato, sans-serif;
  +            min-height:100%;
  +        }
  +
  +        .notifications .messages {
  +            display:block;
  +            position:absolute;
  +            left:-40px;
  +            width:300px;
  +            max-height:240px;
  +        }
  +
  +        .notifications .messages:before {
  +            content:'.';
  +            display:block;
  +            position:absolute;
  +            margin-left:-10px;
  +            left:50%;
  +            top:-18px;
  +            width:0;
  +            height:0;
  +            color:transparent;
  +            border:10px solid black;
  +            border-color:transparent transparent white;
  +        }
  +
  +        .notifications .messages .message {
  +            display:block;
  +            position:relative;
  +            padding:10px;
  +            background-color:#FAFAD2;
  +            color:black;
  +            text-decoration:none;
  +        }
  +
  +        .notifications .messages .message + .message {
  +            border-top:1px solid #e0e0e0;
  +        }
  +
  +        .verticalLine {
  +            border-left: thick solid #ff0000;
  +        }
  +
  +        .modal {
  +            display: none; /* Hidden by default */
  +            position: fixed; /* Stay in place */
  +            z-index: 1; /* Sit on top */
  +            left: 0;
  +            top: 0;
  +            width: 100%; /* Full width */
  +            height: 100%; /* Full height */
  +            overflow: auto; /* Enable scroll if needed */
  +            background-color: rgb(0,0,0); /* Fallback color */
  +            background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  +        }
  +
  +        /* Modal Content/Box */
  +        .modal-content {
  +            background-color: #fefefe;
  +            margin: 15% auto; /* 15% from the top and centered */
  +            padding: 20px;
  +            border: 1px solid #888;
  +            width: 30%; /* Could be more or less, depending on screen size */
  +            height: 40%;
  +        }
  +
  +        /* The Close Button */
  +        .close {
  +            color: #aaa;
  +            float: right;
  +            font-size: 28px;
  +            font-weight: bold;
  +        }
  +
  +        .close:hover,
  +        .close:focus {
  +            color: black;
  +            text-decoration: none;
  +            cursor: pointer;
  +        }
  +
  +    </style>
  +</head>
  +
  +<body background="images/backgrmenu.jpg">
  +<div class="navbar-wrapper">
  +    <div class="container-fluid">
  +        <nav class="navbar navbar-fixed-top">
  +            <div class="container">
  +                <div class="navbar-header">
  +                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
  +                        <span class="sr-only">Toggle navigation</span>
  +                        <span class="icon-bar"></span>
  +                        <span class="icon-bar"></span>
  +                        <span class="icon-bar"></span>
  +                    </button>
  +                    <a class="navbar-brand" href="#">FunWeb</a>
  +                </div>
  +                <div id="navbar" class="navbar-collapse collapse">
  +                    <ul class="nav navbar-nav">
  +                        <li class="active"><a href="#" class="">Home</a></li>
  +
  +                        <li class="notifications"><a href="#">Notifications</a>
  +                            <div class="messages">
  +                                <a href="#" class="message">Giani invited you to play in Arena</a>
  +                            </div>
  +                        </li>
  +                        <li><a href="#">Chat</a></li>
  +                        <li id="myBtn"><a href="#">Help</a></li>
  +                        <div id="myModal" class="modal">
  +                            <div class="modal-content">
  +                                <span class="close">&times;</span>
  +                                <p><h2>Help</h2>
  +                                Bun venit pe FunWeb! Acumuleaza cat mai multe cunostiinte despre Tehnologii Web si intrece-te cu ceilalti!</p>
  +                            </div>
  +
  +                        </div>
  +                    </ul>
  +                    <ul class="nav navbar-nav pull-right">
  +                        <li class=" dropdown"><a href="#" class="dropdown-toggle active" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Options <span class="caret"></span></a>
  +                            <ul class="dropdown-menu">
  +                                <li><a href="#">Change Password</a></li>
  +                                <li><a href="#">Admin Menu</a></li>
  +                            </ul>
  +                        </li>
  +                        <li class=""><a href="#">Logout</a></li>
  +                    </ul>
  +                </div>
  +            </div>
  +        </nav>
  +    </div>
  +</div>
  +
  +
  +<div class="row">
  +    <div class="col-sm-4">
  +        <div class="row">
  +            <div class="col-sm-1"> </div>
  +
  +            <div class="col-sm-4">
  +                <img id="avatar" src="images/logoFunWeb.png" alt="avatar" width="150" height="150">
  +            </div>
  +            <div class="verticalLine">
  +                <div id = "atributes" class="col-sm-6">
  +
  +                    <p class="detail"> Name: ${Username} </p>
  +                    <p class="detail"> Level: ${Level} </p>
  +                    <p class="detail"> Title: ${Title} </p>
  +                    <p class="gold"> Coins: ${Gold} </p>
  +                </div>
  +            </div>
  +        </div>
  +    </div>
  +    <div class="col-sm-7"> </div>
  +</div>
  +<hr><br>
  +<h2 id="choose" class="text-center"><span class="title"> Welcome to FunWeb !</span></h2>
  +<br>
  +<div class="row">
  +    <div class="col-sm-1"> </div>
  +    <div class="col-sm-5">
  +        <div class="grid_6">
  +            <div class="p1_box right cl4">
  +                <div class="type"></div>
  +                <a href="#" class="bot" align="left" id="arena">Arena</a>
  +            </div>
  +        </div>
  +    </div>
  +    <div class="col-sm-5">
  +        <div class="grid_6">
  +            <div class="p1_box right cl4">
  +                <div class="type"></div>
  +                <a href="#" class="bot" align="left" id="tutorial">Tutorial Mode</a>
  +            </div>
  +        </div>
  +    </div>
  +    <div class="col-sm-1"> </div>
  +</div>
  +
  +
  +
  +<div id="footer">
  +    <div class="container">
  +        <br><br><br>
  +        <p class="text-center"><span class="name">FunWeb &#9400; 2017 </span><p>
  +    </div>
  +</div>
  +
  +<script type="text/javascript">
  +    $(document).ready(function () {
  +
  +        $("#helpModalButton").on('click', function(e) {
  +            $.post("/weakestChapter", {}, function(data) {
  +                data = JSON.parse(data);
  +
  +                $("#helpModalContent").html(data.weakestChapter);
  +            });
  +
  +        });
  +
  +
  +    });
  +
  +    $(function() {
  +        $(".notifications .messages").hide();
  +        $(".notifications").click(function() {
  +            if ($(this).children(".messages").children().length > 0) {
  +                $(this).children(".messages").fadeToggle(300);
  +            }
  +        });
  +    });
  +
  +    var modal = document.getElementById('myModal');
  +
  +    // Get the button that opens the modal
  +    var btn = document.getElementById("myBtn");
  +
  +    // Get the <span> element that closes the modal
  +    var span = document.getElementsByClassName("close")[0];
  +
  +    // When the user clicks on the button, open the modal
  +    btn.onclick = function() {
  +        modal.style.display = "block";
  +    }
  +
  +    // When the user clicks on <span> (x), close the modal
  +    span.onclick = function() {
  +        modal.style.display = "none";
  +    }
  +
  +    // When the user clicks anywhere outside of the modal, close it
  +    window.onclick = function(event) {
  +        if (event.target == modal) {
  +            modal.style.display = "none";
  +        }
  +    }
  +
  +</script>
  +</body>
  +
   </html>
positive.code:     <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
      <link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
      <script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
  
  </head>
  
  <body>
  <nav class="navbar navbar-default" role="navigation">
      <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
          </button>
      </div>
  
      <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
              <li class="navbar-left"><a href="#">Fun Web</a></li>
              <li data-toggle="modal" data-target="#myModal" id="helpModalButton"><a href="#">Help</a></li>
              <div class="modal fade" id="myModal" role="dialog">
                  <div class="modal-dialog">
  
                      <!-- Modal content-->
                      <div class="modal-content">
                          <div class="modal-header">
                              <button type="button" class="close" data-dismiss="modal">&times;</button>
                              <h4 class="modal-title">Help</h4>
                          </div>
                          <div class="modal-body">
                              <h3>Tips:</h3>
                              <p>You should learn more from this chapter: </p>
                              <p id="helpModalContent"> </p>
                          </div>
                          <div class="modal-footer">
                              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                          </div>
                      </div>
                  </div>
              </div>
  
              <li><a href="#">Notifications</a></li>
              <li><a href="#">Chat</a></li>
  
              <li class="dropdown" id="right">
                  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Options <span class="caret"></span></a>
                  <ul class="dropdown-menu">
                      <form>
                          <li><a href="#">Sounds</a></li>
                          <li role="separator" class="divider"></li>
                          <li><a href="#">Suport</a></li>
                          <li role="separator" class="divider"></li>
                          <li class="admin-options"><a href="/adminPannel">Admin Options </a> </li>
                          <li class="admin-options" role="separator" class="divider"></li>
                          <li><a href="#">Logout</a></li>
                      </form>
                  </ul>
              </li>
          </ul>
      </div>
  </nav>
  
  
  <div class="row">
  
negative.code:             <div class="col-sm-1"> </div>
  
              <div class="col-sm-4">
                  <img id="avatar" src="http://i.imgur.com/Oj65hZF.pnghttp://i.imgur.com/Oj65hZF.png" alt="avatar" width="150" height="150">
              </div>
              <div class="verticalLine">
                  <div id = "atributes" class="col-sm-6">
  
                      <p class="detail"> Name: ${Username} </p>
                      <p class="detail"> Level: ${Level} </p>
                      <p class="detail"> Title: ${Title} </p>
                      <p class="gold"> Coins: ${Gold} </p>
                  </div>
              </div>
          </div>
      </div>
      <div class="col-sm-7"> </div>
  </div>
  <hr><br>
  <h2 id="choose" class="text-center"><span class="title"> Welcome to FunWeb !</span></h2>
  <br>
  <div class="row">
      <div class="col-sm-1"> </div>
      <div class="col-sm-5">
          <div class="grid_6">
              <div class="p1_box right cl4">
                  <div class="type"></div>
                  <a href="#" class="bot" align="left" id="arena">Arena</a>
              </div>
          </div>
      </div>
      <div class="col-sm-5">
          <div class="grid_6">
              <div class="p1_box right cl4">
                  <div class="type"></div>
                  <a href="#" class="bot" align="left" id="tutorial">Tutorial Mode</a>
              </div>
          </div>
      </div>
      <div class="col-sm-1"> </div>
  </div>
  
  
  