header.html

<div class="icnml_logo icnml_header_bg">
    <a href="/{{ baseurl }}">ICNML</a>
</div>
<div class="icnml_navloc icnml_header_bg" id="navloc"></div>
<div class="icnml_user_info icnml_header_bg">
    <span>{{ session[ 'username' ] }}</span>
    <span>|</span>
    <span id="icnml_countdown">-</span>
    <span>|</span>
    <span><a href="{{ url_for( 'serve_qrcode' ) }}">Update TOTP</a></span>
    <span>|</span>
    <span><a href="{{ url_for( 'u2f_admin' ) }}">Security keys</a></span>
    <span>|</span>
    
    {% if admin %}
        <span><a href="{{ url_for( 'validate_signin' ) }}">New users validation</a></span>
        <span>|</span>
    {% endif %}
    
    <span><a href="{{ url_for( 'logout' ) }}">Logout</a></span>
</div>

<div id="icnml_backtothetop" class="icnml_backtothetop">
    <svg width="40px" height="40px" viewBox="0 0 314.069 314.069" >
        <path style="fill: #303e4d;" d="M293.003,78.531C249.646,3.436,153.619-22.295,78.529,21.061C3.434,64.411-22.297,160.443,21.067,235.542
            c43.35,75.087,139.375,100.822,214.465,57.467C310.628,249.648,336.371,153.621,293.003,78.531z M219.835,265.802
            c-60.067,34.685-136.894,14.114-171.576-45.961C13.577,159.762,34.161,82.943,94.23,48.261
            c60.071-34.69,136.894-14.106,171.578,45.971C300.493,154.308,279.906,231.118,219.835,265.802z M168.132,121.034
            c-3.066-3.07-7.077-4.599-11.097-4.599c-4.018,0-8.031,1.529-11.101,4.599l-44.409,44.406c-6.133,6.128-6.133,16.078,0,22.206
            v-0.009c6.129,6.132,16.076,6.132,22.201,0l33.308-33.299l33.298,33.299c6.135,6.132,16.077,6.132,22.201,0v0.009
            c6.135-6.128,6.135-16.078,0-22.206L168.132,121.034z" />
    </svg>
</div>

<script type="text/javascript">
    var eventTime = moment().add( {{ session_timeout }}, 'seconds' );
    var interval = 1000;
    
    setInterval( function()
	{
        var duration = moment.duration( eventTime - moment(), 'milliseconds' );
        if( duration <= 0 )
        {
			window.location = "{{ url_for( 'logout' ) }}";
			
        } else {
        	var minutes = moment( duration.minutes(), 'minutes' ).format( "mm" );
        	var seconds = moment( duration.seconds(), 'seconds' ).format( "ss" );
        	
            $( '#icnml_countdown' )
        	    .text( minutes + ":" + seconds );
        }
    }, interval );
    
    $( '#icnml_backtothetop' ).on( 'click', function( event )
	{
    	event.preventDefault();
        $( "html, body" ).animate( { scrollTop: 0 }, "fast" );
        return false;
	} );
    
    window.onscroll = function()
    {
        if( window.pageYOffset > 37 )
            $( '#icnml_backtothetop' ).css( 'top', '30px' );
        else
        	$( '#icnml_backtothetop' ).css( 'top', '-40px' );
    };
</script>