print <<ENDOFTEXT;
<!DOCTYPE html>
<html lang="en">
<head>    
    <meta charset="utf-8">
    <title>$useropts{title}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">    
    <link href="$useropts{'css'}/bootstrap-itv.min.css" rel="stylesheet">  
    <link href="$useropts{'css'}/charisma-app.css" rel="stylesheet">
    <link href="$useropts{'css'}/login_screen.css" rel="stylesheet">
    <link rel="shortcut icon" href="$useropts{'img'}/favicon.ico"> 
    <style>
        body { background-color:#ffffff; color:#222222; }
        .well { background-color: #e5e4e6; }
        .input-group-addon { background-color: #c6c1c1; }
     </style>
</head>

<body class="bg-container bg-colour"style="overflow:hidden;">
<div class="ch-container">
    <div class="row">
        
    <div class="row">
        <div class="col-md-12 center login-header">
            <img src="$useropts{'img'}/$useropts{logo}" style="height:76px;">
        </div>
        <!--/span-->
    </div><!--/row-->

    <div class="row">
        <div class="well col-md-5 center login-box">
            <div id="loginResult" class="alert alert-info" style="margin-bottom:20px;">
                Please login with your Username and Password.
            </div>            
            <!-- <form class="form-horizontal" action="index.html" method="post"> -->
            <form class="form-horizontal" id="loginForm" name="loginForm" method="post" action="" style="margin-top:12px;">
                <fieldset>
                    <div class="input-group input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user red"></i></span>
                        <input type="text" name="username" id="username" class="form-control" placeholder="Username">
                    </div>
                    <div class="clearfix"></div><br>

                    <div class="input-group input-group">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock red"></i></span>
                        <input type="password" name="password" id="password" class="form-control" placeholder="Password">
                    </div>
                    <div class="clearfix"></div>
                    <!-- <div class="input-prepend">
                        <label class="remember" for="remember"><input type="checkbox" id="remember"> Remember me</label>
                    </div> <div class="clearfix"></div> -->

                    <p class="center col-md-5">
                        <button type="submit" class="btn btn-primary btn-sm">Login</button>
                    </p>
                </fieldset>
            </form>
        </div>
        <!--/span-->
    </div><!--/row-->
</div><!--/fluid-row-->

</div><!--/.fluid-container-->

<script src="$useropts{'js'}/jquery-1.4.4.min.js"></script> 

<script>
	try {
		parent.reloadForLogin();
		parent.BootstrapDialog.closeAll();
	}
	catch(err) { // do nothing 
			   }
			   
	var scripts = '$useropts{'scripts'}' ;
</script>
<script type="text/javascript" src="$useropts{'js'}/login.js?no_cache=1.0"></script>

<div style="position:absolute;right:10px;bottom:10px;"><a href="https://kre8it.co.za" target="_blank" style="color:#ded6d6;">Built by Kre8IT Programming</a></div>

</body>
</html>
ENDOFTEXT
#