 
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Login Page</title>
        <!-- Bootstrap core CSS -->
        <link rel="stylesheet" href="css/bootstrap.min.css">
        <!-- Font Awesome -->
        <link rel="stylesheet" href="css/font-awesome/css/font-awesome.min.css">
        <!-- Ionicons -->
        <link  href="css/login.css" rel="stylesheet">    

        <link rel="stylesheet" href="css/ionicons/css/ionicons.min.css">
        <link rel="icon" type="image/png" sizes="16x16" href="andpic.png">

        <script src="js/vuepkg.js" type="text/javascript"></script>
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
        <!-- Ionicons -->
        <link rel="stylesheet" href="css/ionicons/css/ionicons.min.css">
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
        <script src="js/user.js?v1"></script>
        <link rel="icon" type="image/png" sizes="16x16" href="dist/images.png">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        
        <style>
    body {
        background: linear-gradient(135deg, #c0c0c0, #f0f0f0);
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        margin: 0;
        padding: 0;
    }

    #login-form {
        background-color: #1f1f1f;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
        overflow: hidden;
    }

    #topic {
        color: white;
        font-weight: 600;
        font-size: 24px;
        letter-spacing: 1px;
    }

    #lab {
        color: #dddddd;
        margin-top: 10px;
        display: block;
        font-size: 14px;
    }

    #txtUserName,
    #txtPassword {
        border-radius: 6px;
        margin-bottom: 10px;
        border: 1px solid #aaa;
        padding: 8px 10px;
        font-size: 14px;
    }

    #txterror {
        color: #ffdddd;
        font-weight: bold;
        margin-top: 10px;
        font-size: 13px;
    }

    .button {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 8px 20px;
        font-size: 14px;
        cursor: pointer;
        border-radius: 6px;
        transition: background-color 0.3s ease;
    }

    .button:hover {
        background-color: #45a049;
    }

    .button3 {
        background-color: #f44336;
    }

    .button3:hover {
        background-color: #d32f2f;
    }

    .letter-red {
        color: #f44336;
        font-weight: bold;
    }

    .form-group h1 {
        font-size: 22px;
        margin-bottom: 30px;
    }

    .img-fluid {
        border-radius: 0 0 12px 0;
        object-fit: cover;
    }

    @media (max-width: 768px) {
        #login-form {
            flex-direction: column;
        }

        .col-md-4, .col-md-8 {
            padding: 20px !important;
            width: 100%;
        }

        .form-group h1 {
            font-size: 18px;
        }
    }
</style>

        
    </head>
    <body>


   

        <div class="container" >
            <br><br>
            
            <div id="login-form" class="row" style="padding: 0px;">
                <!-- <br><br><br><br><br> -->
                <div style="background-color: #539ae6;width: 100%;height: 10px"></div>
                
             

                <div class="col-md-4" style="padding: 20px;">
                    <br><br>
                    <div>
                        <!--<img style="align-content: center" class="img-responsive" src="img/Mas_Holdings_Logo.png">-->
                        <div class="form-group" >
                            <h1 id="topic"><center>ABEYWICKRAMA  <span  >
                          MOTOR  TRADERS  (PVT) LTD</span></center></h1>
                        </div>
                    </div>
                    <!--<h3><center>MAS HOLDINGS</center></h3>-->
                    <div class="form-group"></div>

                    <strong id="lab">User Name:</strong>
                    <input class="form-control"  name="UserName" type="text" id="txtUserName" onkeypress="keyset('txtPassword', event)"  />
                    <strong id="lab">Password:</strong>
                    <input class="form-control" name="Password" type="password" id="txtPassword" onkeypress="keyset('lbtn', event)"/>
                    <div id="txterror" class="login_error">
                    </div>
                    <br>
                     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   &nbsp;&nbsp;
                    <button class="button button3" style="background-color: #f44336;" id="lbtn"  name="lbtn" onclick="IsValiedData();">&nbsp;&nbsp;&nbsp;&nbsp;Log in &nbsp;&nbsp; &nbsp;&nbsp;</button>

                </div>
                   <div class="col-md-8" style="text-align: center;color: white;font-family: Helvetica, Geneva, sans-serif;font-size: 13px;letter-spacing: 0.4px;word-spacing: 6px;color: white;text-decoration: none;font-style: normal;font-variant: normal;text-transform: none;">
                    <div style="margin-top: 20px;">
                       <img src="images/back.jpg"   class="img-fluid" style="width:100%; ">
                   </div>
                    <div style="margin-top: 60px;margin:  20px;" >
                   <p><b><span class="letter-red">I</span>nfodata <span class="letter-red">C</span>omputer <span class="letter-red">S</span>ystems</b></p>
                   </div>
                </div>
               
            </div>
        </div>

        
    </body>    
</html>     


<script>
    var elem = document.getElementById("txtPassword");
    elem.onkeyup = function (e) {
        if (e.keyCode == 13) {
            IsValiedData();
        }
    }


</script>


<script src="js/jquery-2.1.0.js"></script>
<script src="js/bootstrap.min.js"></script>
 