<!DOCTYPE html>
<html lang="en">
  <head>
    <title>GIL::Login</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/gilstyle.min.css" type="text/css">
	<link rel="icon" type="image/x-icon" img src="../images/login/logo.png">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap" rel="stylesheet">
    <script language="javascript" src="scripts/formutility.js?v=1"></script>
    <script type="text/javascript" src="scripts/crypto-js.min.js"></script>
    <script type="text/javascript" src="scripts/Ajax.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js" integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
  </head>
  <style>
    body {
      background-image: url("../images/login/bg-login-sk.png");
      background-repeat: no-repeat;
      height: 100vh;
      object-fit: cover;
      background-size: cover;
    }

    .row {
      height: 100%;
    }

    .contain {
      height: 100%;
      display: flex;
      align-items: center;
    }

    .home-banner {
      background: #fff;
      height: 60%;
      /* padding: 20px;  */
      box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
    border: 1px solid #f7f7f7;
    }

    .image-div {
      background-image: url("images/sk_banner01.png");
      background-repeat: no-repeat;
      height: 100%;
      object-fit: cover;
      background-size: cover;
    }

    .logo {
      width: 100px;
    }

    .inputform {
      border: none;
      border-bottom: 1px solid #C8C8C8;
      outline:none;
      
    }

    .loginbtn {
     border: none;
    background: linear-gradient(90deg, #FFFF1C -36.87%, #00C3FF 100%);
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15);
    border-radius: 33px;
    opacity: 0.67;
    padding: 10px;
    color: rgb(0, 0, 0);
    }

    .login-card {
      width: 70%;
      row-gap: 20px;
    }
    .bg-none{
      background: none;
    }
  </style>
  <body>
    <div class="contain">
      <div class="col-md-8 mx-auto home-banner">
        <div class="row">
          <div class="col-md-6">
            <div class="form1 d-flex justify-content-center align-items-center h-100">
              <div class="login-card d-flex flex-column">
               
				 <img src="./images/login/SPOTON.png" class="logo" alt="logo">
                <label for="">Username</label>
                <input class="inputform" type="text" utype="uname">
                <label for="">Password</label>
                <input type="password" class="inputform" utype="upwd">
				<label class="form-label" utype="uinfo" style="height: 15px;display:none"></label>
                <button class="loginbtn" onclick="Login(this)" class="border-0 bg-none">LOGIN</button>
              </div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="image-div"></div>
          </div>
        </div>
      </div>
	  
	  <div id="alertContainer" class="mt-3" style="bottom: 45px;left: 0px;margin: auto;position: absolute;right: 0px;width: 67%;text-align: center;" lmdiid="alertContainer"></div>

    </div>
	<div class="modal fade" id="myDialog" role="dialog" lmdiid="myDialog">
         <div class="modal-dialog">
           <div class="modal-content">
            
           <div class="modal-body" id="DivContent" lmdiid="DivContent">
             <p>This is demo text.</p>
           </div>
         </div>
      </div>
    </div>
	
	
	<!-- info modal -->
	<div class="modal fade" id="infoModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" lmdiid="infoModal">
		  <div class="modal-dialog modal-dialog-centered">
			<div class="modal-content">
			  <div class="modal-header">
				<h5 class="modal-title" id="staticBackdropLabel" lmdiid="staticBackdropLabel">Modal title</h5>
				<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
			  </div>
			  <div class="modal-body">
				<p id="infoCont" lmdiid="infoCont">Info message</p>
			  </div>
			  <div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Ok</button>
			  </div>
			</div>
		  </div>
		</div>
	<!-- info modal -->
	
	<script>
	function invokeInfo(cont){
	document.getElementById("infoCont").innerHTML = cont;
	$('#infoModal').modal('show');
	}
	
	function AlertCont(content, isError){
		const alertContainer = document.getElementById('alertContainer');
		  let alertClass = isError ? 'alert-danger' : 'alert-success';
		  let alertMessage = isError ? `<strong>Error:</strong>` : `<strong>Success:</strong>`;

		  alertContainer.innerHTML = `
			<div class="alert ${alertClass} alert-dismissible fade show" role="alert" style="background-color: ${isError ? '#F4483C' : '#4CAF50'}; color: white;">
			  ${alertMessage} ${content}.
			  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
			</div>
		  `;
		}
	</script>
  </body>
  
</html><script> $(document).ready(function() {});   </script><!-- AJAX CONTENT -->