second_page

<%--
  Created by IntelliJ IDEA.
  User: insan
  Date: 1/3/17
  Time: 4:06 PM
--%>

<%@ page contentType="text/html;charset=UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>SureCash Stipend Disbursement</title>
    <link href="${resource(dir: 'css', file: 'bootstrap.min.buttonAndGlyph.css')}" rel="stylesheet">
    <style type="text/css">

    html, body {
        height: 100%;
        margin: 0px;
        padding: 0px;
        background-color: #ffd32f;
    }

    #bg-image {
        height: 100vh;
        width: auto;
        vertical-align: top;
        /*text-align: center;*/
        display: block;
        margin: 0 auto
    }

    #btn-logout {
        position: fixed;
        padding: 5px;
        Top: 0;
        right: 0;
        z-index: 999;
        height: 8vh;
        width: 10%;
        font-size: 4vh;
    }

    </style>
    <script src="../js/jquery-1.9.1.min.js"></script>
</head>

<body style="height: 100%">

<div id="parent">
    <div id="inner">
        <img id="bg-image" src="${resource(dir: 'images', file: 'Stipend web temp27022017.gif')}"/>
        <g:link controller="authentication" action="logout">
            <button type="button" class="btn btn-warning" id="btn-logout" data-toggle="tooltip" data-placement="right" title="Log Out">
                <span class="glyphicon glyphicon-log-out" aria-hidden="true"></span>
            </button>
        </g:link>

    </div>
</div>
<script>
    $(document).ready(function () {
        console.log('Document ready');
        setTimeout(changeImage, 7000);
    });

    function changeImage() {
        console.log('image gonna change...');
        $('#bg-image').fadeOut(500, function () {
            $('#bg-image').attr('src', "../images/pm_stipend_disb_3.png");
            $('#bg-image').fadeIn(500);
        });
    }
</script>
</body>
</html>