<!DOCTYPE html>
<html lang="en">
<head>


  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>live.bhssite.com</title>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Roboto', sans-serif;
      background-color: #f5f7fa;
      color: #333;
    }

    header {
      background-color: #0077b6;
      color: white;
      padding: 30px 20px;
      text-align: center;
    }

 /* Navigation Bar */
nav {
  background-color: #023e8a;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: auto;
  padding: 10px 20px;
  color: white;
}

.logo {
  height: 40px;
  vertical-align: middle;
}

.site-title {
  font-size: 1.2rem;
  font-weight: bold;
  margin-left: 10px;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 20px;
}

.nav-links li a {
  color: white;
  text-decoration: none;
  font-weight: 500;
  padding: 10px 15px;
  border-radius: 6px;
  transition: 0.3s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-links li a:hover,
.nav-links li a.active {
  background-color: #0096c7;
}

.menu-toggle {
  font-size: 26px;
  display: none;
  cursor: pointer;
}

/* Mobile Styles */
@media (max-width: 768px) {
  .menu-toggle {
    display: block;
  }

  .nav-links {
    flex-direction: column;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    background: #023e8a;
    display: none;
  }

  .nav-links.show {
    display: flex;
  }

  .nav-links li {
    text-align: center;
    padding: 10px 0;
  }
}

    .content {
      max-width: 900px;
      margin: 40px auto;
      padding: 0 20px;
      animation: fadeIn 0.4s ease-in-out;
    }

    footer {
      background-color: #0077b6;
      color: white;
      text-align: center;
      padding: 15px;
      position: fixed;
      bottom: 0;
      width: 100%;
    }

    h2 {
      color: #023e8a;
      margin-bottom: 15px;
    }

    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 600px) {
      nav a {
        padding: 12px 15px;
        font-size: 14px;
      }
    }
    
    /* Popup Modal Styles */
/* Modal (Popup) Styling */
.modal {
  display: none;
  position: fixed;
  z-index: 9999; /* Higher than nav */
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #fff;
  padding: 30px 20px;
  border-radius: 10px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  position: relative;
  animation: fadeIn 0.3s ease-in-out;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: #666;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
}

.close-btn:hover {
  color: #000;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}
.nav-links i {
  margin-right: 6px;
}
  </style>
</head>

<body>

<header style="display: flex; flex-direction: column; align-items: center; padding: 30px 20px;">
  <div style="display: flex; align-items: center; gap: 15px;">
    <img src="logo.png" alt="Logo" style="height: 60px;">
    <h1>Bloomfield Hall Schools
</h1>
  </div>
  <p>Web-based software platform</p>
</header>
<nav>
  <div class="nav-container">
    <div class="logo-title">
      <img src="logo1.png" alt="Logo" class="logo" />
      <span class="site-title">Live BHS Sites</span>
    </div>
    <div class="menu-toggle" id="menuToggle">&#9776;</div>
    <ul class="nav-links" id="navLinks">
   
      <li><a href="http://fee.bhssite.com""><i class="fa-solid fa-chart-line"></i> Admission & Fee</a></li>
      <li><a href="http://result.bhssite.com"><i class="fa-solid fa-file-alt"></i> Result & Attendance</a></li>
      <li><a href="http://payroll.bhssite.com"><i class="fa-solid fa-pen"></i> H.R & Payroll</a></li>
      <li><a href="http://accounts.bhssite.com"><i class="fa-solid fa-chart-bar"></i> Accounts & Ledger</a></li>
<li><a href="http://tcs.bhssite.com"><i class="fa-solid fa-chart-line"></i> The Country School</a></li>
  
    </ul>
  </div>
</nav>
  <div class="content" id="mainContent">
    <h2>Welcome to the live.bhssite.com</h2>
      <h3>Important Notice</h3>
      <p>A new School Leaving Certificate feature has been developed and is now operational in the result software.

All students marked as “left” are automatically included in this module, and their School Leaving Certificates are readily available. No additional action is required from the branch other than the branch head’s signature and the school stamp, as all relevant data is automatically populated from the online left-student records.
<br>
Please note the following points:
<br>
All School Leaving Certificates must be initiated through the result software, as manual issuance has been discontinued.<br>

Online “left cases” must be initiated promptly to avoid any processing issues.<br>

This certificate will only be available for students whose dues are fully cleared in the software.<br>

In case of outstanding fees, branches must contact their respective RD Office to obtain approval.<br>

 
 <br>
   In case of any query please contact at 042-35752296,opschanges@yahoo.com,mubashar.masood@hotmail.com <br></p>
  </div>

  <footer>
    &copy; <span id="year"></span> BHS Pvt Ltd. All rights reserved.
  </footer>
<!-- Popup Modal -->
<div id="popup" class="modal">
  <div class="modal-content">
    <span class="close-btn" onclick="closePopup()">&times;</span>
    <h2>Important!</h2>
    <p>A new School Leaving Certificate feature has been developed and is now operational in the result software.</p>
  </div>
</div>

<script>

 // Popup once per session
  window.onload = function () {
    if (!sessionStorage.getItem("popupShown")) {
      const popup = document.getElementById("popup");
      popup.style.display = "flex";
      sessionStorage.setItem("popupShown", "true");

      // Auto close after 5 seconds
      setTimeout(() => {
        closePopup();
      }, 5000);
    }
  };

  // Close popup manually
  function closePopup() {
    const popup = document.getElementById("popup");
    if (popup) popup.style.display = "none";
  }

  // Close if clicked outside the modal content
  window.onclick = function (event) {
    const popup = document.getElementById("popup");
    if (event.target === popup) {
      popup.style.display = "none";
    }
  };

  // Mobile menu toggle
  document.getElementById('menuToggle').addEventListener('click', () => {
    document.getElementById('navLinks').classList.toggle('show');
  });

  // Scroll section highlighting
  const sections = document.querySelectorAll("section");
  const navItems = document.querySelectorAll(".nav-links a");

  window.addEventListener("scroll", () => {
    let current = "";
    sections.forEach((section) => {
      const sectionTop = section.offsetTop - 70;
      if (pageYOffset >= sectionTop) {
        current = section.getAttribute("id");
      }
    });

    navItems.forEach((a) => {
      a.classList.remove("active");
      if (a.getAttribute("href").includes(current)) {
        a.classList.add("active");
      }
    });
  });

  // Year in footer
  document.getElementById("year").textContent = new Date().getFullYear();
</script>


</body>
</html>