<head id="HD" lmdiid="HD">
  <!-- CSS Files -->
  <link href="../styleSheets/boxy.css" type="text/css" rel="stylesheet">
  <link href="../Themes/bootstrap-dialog.min.css" rel="stylesheet">
  <link rel="stylesheet" href="../scripts/dataTables.bootstrap5.min.css">
  <link rel="stylesheet" href="../scripts/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="../scripts/jquery-ui.min.css">
  <link href="..//stylesheets/isite/jquery-ui/jquery-ui.css" type="text/css" rel="stylesheet">
  <link href="..//stylesheets/boxy.css" type="text/css" rel="stylesheet">

  <!-- JavaScript Files - CORRECT ORDER -->
  <!-- 1. jQuery FIRST -->


  <!-- 2. CryptoJS BEFORE formutility.js -->
  <script type="text/javascript" src="../scripts/crypto-js.min.js"></script>

  <!-- 3. Other jQuery plugins and utilities -->
  <script language="javascript" src="../scripts/boxy/jquery.boxy.js"></script>
  <script language='javascript' src="../scripts/jquery.numeric.js"></script>
  <script type="text/javascript" src="../scripts/jquery-ui.min.js" charset="UTF-8"></script>
  <script type="text/javascript" language="javascript" src="..//scripts/jquery.maskedinput-1.3.min.js"></script>
  <script type="text/javascript" language="javascript" src="..//scripts/shortcut.js"></script>
  <script type="text/javascript" language="javascript" src="..//scripts/slidescript.js"></script>
  <script type="text/javascript" language="javascript" src="..//scripts/scale.fix.js"></script>
  <script type="text/javascript" language="javascript" src="..//scripts/isite/validation.js"></script>

  <!-- 4. Application scripts -->
  <script language="javascript" src="../scripts/generalUtilityv2.js"></script>
  <script language="javascript" src="../scripts/formutility.js?v=1"></script>
  <script type="text/javascript" src="../scripts/ajax.js"></script>
  <script type="text/javascript" src="../scripts/bootstrap-dialog.min.js" charset="UTF-8"></script>
  <script src="../scripts/dataTables.bootstrap5.min.js"></script>
  <script src="../scripts/IMAPP/custom.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

  <title>Fiber360</title>

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --primary: #000000;
      --primary-dark: #686868;
      --text: #172033;
      --muted: #667085;
      --border: #dfe3ea;
      --background: #f7f9fc;
    }

    body {
      font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Arial, sans-serif;
      background: var(--background);
      color: var(--text);
    }

    .login-page {
      min-height: 100vh;
      display: flex;
    }

    /* LEFT PANEL */

    .brand-panel {
      width: 50%;
      min-height: 100vh;
      padding: 56px 70px;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      background:
        radial-gradient(
          circle at 10% 10%,
          rgba(255,255,255,.15),
          transparent 30%
        ),
        linear-gradient(135deg, #0f2f67 0%, #174ea6 55%, #2563eb 100%);

      color: #fff;
    }

    .brand-panel::before {
      content: "";
      position: absolute;
      width: 430px;
      height: 430px;
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 50%;
      right: -180px;
      top: -130px;
    }

    .brand-panel::after {
      content: "";
      position: absolute;
      width: 600px;
      height: 600px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 50%;
      left: -300px;
      bottom: -320px;
    }

    .brand-logo {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 22px;
      font-weight: 700;
      letter-spacing: -.5px;
    }

    .logo-icon {
      width: 38px;
      height: 38px;
      background: #fff;
      color: var(--primary);
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
    }

    .brand-content {
      position: relative;
      z-index: 2;
      max-width: 570px;
    }

    .eyebrow {
      display: inline-block;
      margin-bottom: 20px;
      padding: 7px 12px;
      border: 1px solid rgba(255,255,255,.2);
      background: rgba(255,255,255,.08);
      border-radius: 50px;
      font-size: 12px;
      letter-spacing: 1px;
      text-transform: uppercase;
    }

    .brand-content h1 {
      font-size: 46px;
      line-height: 1.13;
      letter-spacing: -1.5px;
      margin-bottom: 20px;
      font-weight: 650;
    }

    .brand-content p {
      max-width: 500px;
      font-size: 16px;
      line-height: 1.7;
      color: rgba(255,255,255,.75);
    }

    .features {
      display: flex;
      gap: 28px;
      margin-top: 38px;
    }

    .feature {
      font-size: 13px;
      color: rgba(255,255,255,.8);
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .check {
      width: 20px;
      height: 20px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: rgba(255,255,255,.12);
      border-radius: 50%;
      font-size: 11px;
    }

    .brand-footer {
      position: relative;
      z-index: 2;
      font-size: 12px;
      color: rgba(255,255,255,.5);
    }

    /* RIGHT PANEL */

    .login-panel {
      width: 50%;
      min-height: 100vh;
      background: #fff;

      display: flex;
      align-items: center;
      justify-content: center;
margin:auto;
      padding: 60px;
    }

    .login-container {
      width: 100%;
      max-width: 420px;
    }

    .mobile-logo {
      display: none;
    }

    .login-header {
      margin-bottom: 15px;
    }

    .login-header h2 {
      font-size: 30px;
      letter-spacing: -.7px;
      margin-bottom: 10px;
      font-weight: 650;
    }

    .login-header p {
      color: var(--muted);
      font-size: 14px;
      line-height: 1.6;
    }

    /* FORM */

    .form-group {
      margin-bottom: 20px;
    }

    label {
      display: block;
      margin-bottom: 8px;
      font-size: 13px;
      font-weight: 600;
      color: #344054;
    }

    .input-wrapper {
      position: relative;
    }

    input {
      width: 100%;
      height: 50px;
      padding: 0 15px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: #fff;
      font-size: 14px;
      color: var(--text);
      transition: .2s;
      outline: none;
    }

    input::placeholder {
      color: #98a2b3;
    }

    input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
    }

    .password-input {
      padding-right: 55px;
    }

    .password-toggle {
      position: absolute;
      right: 15px;
      top: 50%;
      transform: translateY(-50%);
      border: none;
      background: none;
      color: var(--muted);
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
    }

    .form-options {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 4px 0 24px;
    }

    .remember {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 13px;
      color: var(--muted);
      cursor: pointer;
    }

    .remember input {
      width: 16px;
      height: 16px;
      accent-color: var(--primary);
    }

    .forgot {
      color: var(--primary);
      font-size: 13px;
      text-decoration: none;
      font-weight: 600;
    }

    .forgot:hover {
      text-decoration: underline;
    }

    .login-btn {
      width: 100%;
      height: 50px;
      border: none;
      border-radius: 8px;
      background: var(--primary);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: .2s;
    }

    .login-btn:hover {
      background: var(--primary-dark);
      transform: translateY(-1px);
    }

    .login-btn:active {
      transform: translateY(0);
    }

    .divider {
      display: flex;
      align-items: center;
      gap: 15px;
      margin: 28px 0;
      color: #98a2b3;
      font-size: 12px;
    }

    .divider::before,
    .divider::after {
      content: "";
      flex: 1;
      height: 1px;
      background: #eaecf0;
    }

    .sso-btn {
      width: 100%;
      height: 48px;
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 8px;
      color: #344054;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: .2s;
    }

    .sso-btn:hover {
      background: #f9fafb;
      border-color: #cbd0d8;
    }

    .help-text {
      margin-top: 32px;
      text-align: center;
      font-size: 12px;
      color: #98a2b3;
    }

    .help-text a {
      color: #667085;
      font-weight: 600;
      text-decoration: none;
    }

    /* RESPONSIVE */

    @media (max-width: 900px) {
      .brand-panel {
        display: none;
      }

      .login-panel {
        width: 100%;
        padding: 30px;
      }

      .mobile-logo {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 55px;
        font-size: 20px;
        font-weight: 700;
      }

      .mobile-logo .logo-icon {
        background: var(--primary);
        color: #fff;
      }
    }

    @media (max-width: 480px) {
      .login-panel {
        align-items: flex-start;
        padding: 28px 22px;
      }

      .login-container {
        max-width: none;
      }

      .mobile-logo {
        margin-bottom: 50px;
      }

      .login-header h2 {
        font-size: 27px;
      }

      .form-options {
        align-items: flex-start;
      }
    }
	.login-header p{
	text-align: center;
	font-size:12px!important
	}
  </style>
  <script language="javascript" src="../BootstrapFiles/jquery/jquery-3.1.1.min.js"></script>

</head>

<body style="font-size: 12pt; height:100vh">


 <section class="login-panel">

      <div class="login-container">
	  
	   <div class="mobile-logo">
          <div class="logo-icon">O</div>
          Fiber360
        </div>
		<div style="display: flex;justify-content: center;">
		<img src="./images/login_cover.jpg" style="width:60%">
		</div>

        <div class="login-header">
          <!-- <h2>Welcome back</h2> -->
          <p>
            Enter your credentials to access your workspace.
          </p>
        </div>
	  
	  
  <form name="form1" method="post" action="login.aspx" id="form1" lmdiid="form1">

    <div id="divLoginbox" lmdiid="divLoginbox">
      <div class="login-card">

        <!-- <h2>Login</h2> -->

<!-- <div type="form" formId="1">
		 </div> --> 
		 <label for="email">Username</label>
          <input type="text" name="username" placeholder="Enter Username" utype="uname" required>
		  
		 <label for="email">Password</label>  
          <input type="password" name="password" placeholder="Enter Password" utype="upwd" required>

      <br> <br>

        <input name="BtnLogin" type="button" id="BtnLogin" class="btnrSubmit login-btn" value="Login" formid="1" onclick="Login(this)" utype="login" lmdiid="BtnLogin">

        <div class="login-header">
          <p>Powered with iManagerApps<br>
          Fiber360- &#169; Copyright 2026 LetMeDoit Technologies. All rights reserved -
          <a href="#" class="footer-link disabled-link " onclick="window.open('http://www.letmedoit.in')" target="_blank" title="technology that works for you">www.letmedoit.in</a></p>
        </div>
      </div>
    </div>

  </form>

</div>


  <!-- ===================== DELETE SESSION MODAL ===================== -->
  <div class="modal fade" id="deleteSessionModal" tabindex="-1" role="dialog" lmdiid="deleteSessionModal">
    <div class="modal-dialog modal-sm modal-dialog-centered" role="document">
      <div class="modal-content">

        <div class="modal-header bg-danger text-white">
          <h5 class="modal-title">Delete Session</h5>
          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close" onclick="$('#deleteSessionModal').modal('hide');">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <div class="modal-body">
          <p>Are you sure you want to delete this session?</p>
          <p class="text-muted">This action cannot be undone.</p>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" onclick="$('#deleteSessionModal').modal('hide');">Cancel</button>

          <button type="button" class="btn btn-danger" onclick="DeleteSessionAndLogin();">
            Delete
          </button>
        </div>

      </div>
    </div>
  </div>
  <!-- ================== END DELETE SESSION MODAL ==================== -->

  <!-- Unique Change Password Modal -->
  <div class="modal fade" id="Modal_ChangePassword_8754" tabindex="-1" role="dialog" aria-labelledby="Modal_ChangePasswordLabel_8754" aria-hidden="true" lmdiid="Modal_ChangePassword_8754">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="Modal_ChangePasswordLabel_8754" lmdiid="Modal_ChangePasswordLabel_8754">Change Password</h5>
          <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <div id="Modal_Caption_8754" style="color:red; font-weight:bold;" lmdiid="Modal_Caption_8754"></div>
          <div class="mb-3">
            <label for="Input_CurrentPassword_8754" class="form-label">Current Password:</label>
            <input type="password" class="form-control" id="Input_CurrentPassword_8754" lmdiid="Input_CurrentPassword_8754">
          </div>
          <div class="mb-3">
            <label for="Input_NewPassword_8754" class="form-label">New Password:</label>
            <input type="password" class="form-control" id="Input_NewPassword_8754" lmdiid="Input_NewPassword_8754">
          </div>
          <div class="mb-3">
            <label for="Input_RepeatPassword_8754" class="form-label">Repeat Password:</label>
            <input type="password" class="form-control" id="Input_RepeatPassword_8754" lmdiid="Input_RepeatPassword_8754">
          </div>
          <div id="Modal_ResetMsg_8754" style="color:red; font-size: 0.9em;" lmdiid="Modal_ResetMsg_8754"></div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" id="Btn_ResetPassword_8754" lmdiid="Btn_ResetPassword_8754">Reset</button>
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>





</section></body>


<script> $(document).ready(function() {});   </script><!-- AJAX CONTENT -->