MAINHACK

Viewing / Editing File: index.php

<?php include("functions.php");?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>SHS ONLINE ADMISSION</title>

/* ---------- Top Banner ---------- */
    .top-banner{
      background:var(--accent);
      color:#fff;
      text-align:center;
      padding:0.9rem 1rem;
      font-weight:600;
      display:flex;
      gap:.6rem;
      align-items:center;
      justify-content:center;
      flex-wrap:wrap;
    }
    .top-banner a{
      background:#fff;
      color:var(--accent);
      padding:.45rem .7rem;
      border-radius:10px;
      text-decoration:none;
      font-weight:700;
      box-shadow:0 2px 6px rgba(0,0,0,0.08);
    }

/* ---------- Navbar ---------- */
.navbar {
  background: var(--brand); /* ✅ Solid color background */
  max-width: 100%;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* subtle shadow for depth */
}

.brand .title {
  color: white; /* ✅ White brand name */
  font-weight: 800;
  letter-spacing: 1px;
  font-size: clamp(1rem, 2.6vw, 1.6rem);
}

.brand .subtitle {
  color: rgba(255, 255, 255, 0.8); /* ✅ Lighter white subtitle */
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.9;
}

.nav-links li a {
  color: white; /* ✅ White links */
  background: rgba(255, 255, 255, 0.1);
  padding: 0.5rem 0.8rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  transition: transform 0.18s ease, background 0.18s ease;
}

.nav-links li a:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.2);
}

/* Hamburger bars in white for contrast */
.hamburger .bar {
  background: white;
}

/* Desktop nav links */
    .nav-links{
      display:flex;
      gap: clamp(.6rem, 2vw, 1.2rem);
      align-items:center;
      list-style:none;
      margin:0;
      padding:0;
    }
    .nav-links li a{
      color:var(--brand);
      background: rgba(0,0,0,0.02);
      padding:.5rem .8rem;
      border-radius:10px;
      text-decoration:none;
      font-weight:600;
      transition:transform .18s ease, background .18s ease;
    }
    .nav-links li a:hover{ transform:translateY(-2px); background: rgba(0,0,0,0.03) }

/* Hamburger (mobile) */
    .hamburger{
      display:none;
      background:transparent;
      border:0;
      gap:.35rem;
      padding:.35rem;
      cursor:pointer;
    }
    .hamburger .bar{
      width:26px;
      height:3px;
      background:#0d3b3f;
      border-radius:3px;
      display:block;
    }

/* ---------- Mobile off-canvas menu ---------- */
    .mobile-menu {
      position: fixed;
      top:0;
      right:0;
      height:100vh;
      width:min(92%,380px);
      background: linear-gradient(180deg,var(--brand), #06606b);
      color:#fff;
      transform: translateX(110%);
      transition: transform .32s cubic-bezier(.2,.9,.2,1);
      z-index:1200;
      padding: 2.2rem 1.25rem;
      box-shadow: -8px 0 30px rgba(0,0,0,0.18);
      display:flex;
      flex-direction:column;
      gap:1rem;
    }
    .mobile-menu.open{ transform: translateX(0) }
    .mobile-menu .close {
      align-self:flex-end;
      background:transparent;
      border:0;
      color:rgba(255,255,255,.95);
      font-size:1.05rem;
      cursor:pointer;
      margin-bottom: .25rem;
    }
    .mobile-menu nav ul{ list-style:none; padding:0; margin: .4rem 0 0; display:flex; flex-direction:column; gap:.4rem }
    .mobile-menu nav a{
      display:block;
      padding:.85rem .7rem;
      border-radius:10px;
      text-decoration:none;
      color:#fff;
      font-weight:700;
      background: rgba(255,255,255,0.06);
    }
    .mobile-menu nav a:hover{ background: rgba(255,255,255,0.09) }

/* overlay used to dim page while menu open */
    .overlay {
      position:fixed; inset:0; background:rgba(0,0,0,.32);
      opacity:0; pointer-events:none; transition:opacity .28s;
      z-index:1100;
    }
    .overlay.show{ opacity:1; pointer-events:auto }

/* Dropdown styling */
.dropdown-label {
  display: block;
  margin: 1rem 0 0.4rem;
  font-weight: 600;
  color: var(--brand);
  font-size: 1rem;
}

.dropdown {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 2px solid var(--brand);
  border-radius: 10px;
  background: #fff;
  font-size: 1rem;
  font-weight: 600;
  color: #244b52;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.dropdown:hover {
  border-color: #005f6b;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.dropdown:focus {
  outline: none;
  border-color: #005f6b;
  box-shadow: 0 0 0 3px rgba(0, 123, 128, 0.2);
}

/* ---------- Page content grid ---------- */
    .page {
      max-width:var(--max-width);
      margin:1.5rem auto;
      padding: 0 1rem 3.5rem;
      width:calc(100% - 2rem);
      display:grid;
      grid-template-columns: 1fr 420px;
      gap: var(--container-gap);
      align-items:start;
    }

/* Card */
    .card{
      background:var(--card-bg);
      border-radius:var(--radius);
      box-shadow: 0 8px 22px rgba(9,19,21,0.06);
      padding: clamp(1rem,2.3vw,1.6rem);
      transition: transform .22s ease, box-shadow .22s ease;
    }
    .card:hover{ transform: translateY(-6px); box-shadow: 0 16px 40px rgba(9,19,21,0.08) }
    .card h2{
      color:var(--brand);
      margin:0 0 .6rem;
      font-size: clamp(1.1rem, 2.2vw, 1.45rem);
    }
    .card p{ color:#244b52; margin:.4rem 0; font-size: clamp(.95rem,1.9vw,1.02rem) }
    .muted{ color:var(--muted); font-weight:600; }

/* Buttons */
    .btn{
      display:inline-block;
      background:var(--brand);
      color:#fff;
      text-decoration:none;
      padding:.78rem 1.1rem;
      border-radius:12px;
      font-weight:700;
      margin-top:.6rem;
      transition:transform .14s ease, box-shadow .14s ease;
    }
    .btn:hover{ transform:translateY(-3px); box-shadow: 0 8px 18px rgba(7,67,70,0.12) }

/* Make right column buttons full-width on small screens */
    .right .btn{ display:block; width:100%; text-align:center }

/* layout niceties */
    .important{ font-weight:800; color:var(--accent) }

/* ---------- Responsive breakpoints ---------- */
    /* Tablet and narrower: stack cards, show hamburger */
    @media (max-width: 980px){
      .page{ grid-template-columns: 1fr; }
      .navbar{ margin-top:.4rem }
      .nav-links{ display:none }
      .hamburger{ display:inline-flex }
      .brand .subtitle { display:none }
    }

/* Mobile small screens: tighten spacing, mobile menu overlay covers less */
    @media (max-width: 420px){
      :root{ --max-width:1000px }
      .top-banner{ padding:.7rem .6rem; font-size:.95rem }
      .mobile-menu{ width:100%; }
      .brand .title{ font-size:1.1rem }
      .page{ padding-bottom: 2rem; margin-top:.9rem }
      .card{ padding: .9rem 1rem }
    }

/* ---------- Accessibility helpers ---------- */
    :focus{ outline: 3px solid rgba(0,123,128,.12); outline-offset: 3px }
    button{ background:transparent; border:0; font-family:inherit }
    @media (prefers-reduced-motion:reduce){ *{transition:none!important} }
  </style>
</head>
<body>

<header class="navbar" role="banner">
    <div class="brand" aria-hidden="false">
      <div class="title">ONLINE ADMISSION</div>
    </div>

<ul class="nav-links" role="navigation" aria-label="Main navigation">
      <li><a style="color:white;" href="#">Home</a></li>
      <li><a style="color:white;" href="#">Lost Admission Token</a></li>
      <li><a style="color:white;" href="#">Contact Us</a></li>
      
    </ul>

<div class="overlay" id="overlay" tabindex="-1" aria-hidden="true"></div>

<aside class="mobile-menu" id="mobileMenu" aria-hidden="true" role="dialog" aria-label="Mobile menu">
    <button class="close" id="closeBtn" aria-label="Close menu">✕</button>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Lost Admission Token</a></li>
        <li><a href="#">Contact Us</a></li>
 
      </ul>
    </nav>
  </aside>

<main class="page" role="main">
    
    <section class="card left" aria-labelledby="welcome">
      <h2 id="welcome">WELCOME TO SHS ONLINE ADMISSION!</h2>

<p>
  <a href="#" style="color:var(--brand); font-weight:700; text-decoration:underline;">BBECAS</a> 
  created this <strong>SHS Admission Portal</strong> to make your admissions process easier. 
  Instead of visiting the school physically, you can complete everything online through this portal.
</p>

<p>
  Here, you can check and submit your placement documents, download and print your admission letter, 
  prospectus, medical forms, and more — all in one place.
</p>

<p class="important">ONLY REPORT TO SCHOOL WHEN SCHOOL REOPENS...</p>
          
<section class="card left" aria-labelledby="welcome">
  <h2 id="welcome">LIST OF SCHOOLS USING BBECAS ONLINE ADMISSION</h2>

<?php  
    // Fetch schools
    $getallshs = mysqli_query($new,"SELECT DISTINCT logo, school_name FROM schools ORDER BY school_name DESC");
    $totalSchools = mysqli_num_rows($getallshs);
  ?>

<div style="position:relative;width:100%;">
    <input 
      type="text" 
      id="schoolSearch" 
      placeholder="Search school name..." 
      style="width:100%;padding:10px 12px;margin-bottom:10px;border:1px solid #ccc;border-radius:8px;outline:none;"
      oninput="filterSchools()"
      onclick="openDropdown()"
    >

<div id="schoolLogo" style="margin-top:15px;text-align:center;"></div>

function openDropdown() {
      dropdown.style.display = 'block';
    }

function filterSchools() {
      let input = searchBox.value.toLowerCase();
      let options = dropdown.options;
      let anyVisible = false;

for (let i = 0; i < options.length; i++) {
        let text = options[i].text.toLowerCase();
        if (text.includes(input)) {
          options[i].style.display = '';
          anyVisible = true;
        } else {
          options[i].style.display = 'none';
        }
      }

dropdown.style.display = anyVisible ? 'block' : 'none';
    }

function selectSchool(select) {
      let selected = select.options[select.selectedIndex];
      searchBox.value = selected.text; // Fill input with selected school name
      dropdown.style.display = 'none';
      showLogo(selected.value);
    }

// Close dropdown when clicking outside
    document.addEventListener('click', function(event) {
      if (!event.target.closest('.dropdown') && event.target !== searchBox) {
        dropdown.style.display = 'none';
      }
    });
  </script>
</section>

<h4>If you NEED help with your Admission Process,</h4>
<a href="school-admin">Click here to reach your school’s system administrator</a>

.contact-section h2 {
    font-size: 1.6rem;
    margin-bottom: 12px;
    color: #1e293b; /* dark gray-blue */
    letter-spacing: -0.5px;
  }

.contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }

.contact-list li {
    font-size: 1.2rem;
    padding: 10px 0;
    border-bottom: 1px solid #e2e8f0;
    color: #334155;
    transition: color 0.3s ease;
  }

.contact-list li:last-child {
    border-bottom: none;
  }

.contact-list li:hover {
    color: #0ea5e9; /* highlight on hover */
    cursor: pointer;
  }
</style>

</section>

<aside class="card right" aria-labelledby="procedures">
    <h2 id="procedures">Student Login Portal</h2>
<p class="muted">
  Access your official admission documents and follow the steps for a smooth registration process.
</p>
<a class="btn" href="student/" role="button">Click here to Login</a>

<h2 style="margin-top:0.2rem">Schools & Teachers Login Portal</h2>
<p class="muted">
  Access the official portal to manage admissions, student placements, and school-related activities.
</p>
<a class="btn" href="admin/" role="button">Click here to Login</a>

</aside>

function openMenu(){
        mobile.classList.add('open');
        overlay.classList.add('show');
        mobile.setAttribute('aria-hidden','false');
        overlay.setAttribute('aria-hidden','false');
        btn.setAttribute('aria-expanded','true');
        document.body.style.overflow = 'hidden'; // lock body scroll
      }
      function closeMenu(){
        mobile.classList.remove('open');
        overlay.classList.remove('show');
        mobile.setAttribute('aria-hidden','true');
        overlay.setAttribute('aria-hidden','true');
        btn.setAttribute('aria-expanded','false');
        document.body.style.overflow = ''; // restore scroll
      }

btn.addEventListener('click', function(){ 
        const isOpen = mobile.classList.contains('open');
        (isOpen? closeMenu : openMenu)();
      });
      closeBtn.addEventListener('click', closeMenu);
      overlay.addEventListener('click', closeMenu);

// close on escape
      document.addEventListener('keydown', function(e){
        if(e.key === 'Escape' && mobile.classList.contains('open')) closeMenu();
      });

// if the user resizes to desktop ensure menu state reset
      let resizeTimeout;
      window.addEventListener('resize', function(){
        clearTimeout(resizeTimeout);
        resizeTimeout = setTimeout(function(){
          if(window.innerWidth > 980 && mobile.classList.contains('open')){
            closeMenu();
          }
        }, 120);
      });
    })();
  </script>
</body>
</html>

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: index.php

Server Info

System Features

User Info