109 lines
4.6 KiB
Plaintext
109 lines
4.6 KiB
Plaintext
---
|
|
// Navbar component with official Talisay Integrated School logo
|
|
---
|
|
|
|
<header class="fixed left-0 right-0 top-0 z-50 border-b border-[#1f3627]/80 bg-[#09110c]/85 backdrop-blur-xl transition-all duration-300">
|
|
<div class="mx-auto flex max-w-7xl items-center justify-between px-4 py-3 sm:px-6 lg:px-8">
|
|
|
|
<!-- Logo & Official School Identity -->
|
|
<a href="#" class="group flex items-center gap-3">
|
|
<div class="relative flex h-11 w-11 shrink-0 items-center justify-center rounded-xl p-0.5 transition-transform duration-300 group-hover:scale-105">
|
|
<img
|
|
src="/tis_logo.png"
|
|
alt="Talisay Integrated School Seal"
|
|
class="h-10 w-10 object-contain drop-shadow-[0_2px_8px_rgba(22,163,74,0.4)]"
|
|
width="40"
|
|
height="40"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-display text-base font-extrabold tracking-tight text-white sm:text-lg">
|
|
TIS RMS
|
|
</span>
|
|
<span class="rounded-md border border-[#16a34a]/30 bg-[#16a34a]/15 px-2 py-0.5 text-[10px] font-bold text-[#4ade80]">
|
|
v1.0.0
|
|
</span>
|
|
</div>
|
|
<div class="flex items-center gap-1.5 text-[10px] tracking-wide text-slate-400 font-medium">
|
|
<span class="text-amber-400 font-semibold">Talisay Integrated School</span>
|
|
<span class="text-slate-600">•</span>
|
|
<span class="text-slate-400">Tiaong, Quezon</span>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
|
|
<!-- Desktop Navigation Links -->
|
|
<nav class="hidden items-center gap-6 text-sm font-medium text-slate-300 lg:flex">
|
|
<a href="#showcase" class="transition hover:text-[#4ade80]">Teacher Showcase</a>
|
|
<a href="#school-forms" class="transition hover:text-[#4ade80]">SF-10 & SF-9 Records</a>
|
|
<a href="#ocr-pipeline" class="transition hover:text-[#4ade80]">OCR Scanner</a>
|
|
<a href="#features" class="transition hover:text-[#4ade80]">System Features</a>
|
|
<a href="#architecture" class="transition hover:text-[#4ade80]">Campus LAN</a>
|
|
<a href="#downloads" class="transition hover:text-[#4ade80]">Downloads</a>
|
|
</nav>
|
|
|
|
<!-- Right Actions -->
|
|
<div class="flex items-center gap-3">
|
|
<a
|
|
href="https://github.com/ssbg04/TIS_RMS"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="hidden items-center rounded-xl border border-[#23412f] bg-[#111f16] px-3.5 py-2 text-xs font-semibold text-slate-300 transition hover:border-[#16a34a]/60 hover:bg-[#162a1d] hover:text-white sm:inline-flex"
|
|
>
|
|
GitHub
|
|
</a>
|
|
|
|
<a
|
|
href="#downloads"
|
|
class="inline-flex items-center rounded-xl bg-[#16a34a] px-4 py-2 text-xs font-semibold text-white shadow-md shadow-[#16a34a]/20 transition hover:bg-[#15803d]"
|
|
>
|
|
<span>Install App</span>
|
|
</a>
|
|
|
|
<!-- Mobile Menu Toggle Button -->
|
|
<button
|
|
id="mobile-menu-btn"
|
|
type="button"
|
|
class="inline-flex items-center justify-center rounded-xl border border-[#23412f] bg-[#111f16] p-2 text-slate-300 hover:text-white lg:hidden"
|
|
aria-label="Toggle Navigation Menu"
|
|
>
|
|
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Mobile Dropdown Menu -->
|
|
<div id="mobile-menu" class="hidden border-b border-[#1f3627] bg-[#0d1811] px-6 py-4 lg:hidden">
|
|
<nav class="flex flex-col gap-3 text-sm font-medium text-slate-200">
|
|
<a href="#showcase" class="py-1.5 transition hover:text-[#4ade80]">Teacher Showcase</a>
|
|
<a href="#school-forms" class="py-1.5 transition hover:text-[#4ade80]">SF-10 & SF-9 Records</a>
|
|
<a href="#ocr-pipeline" class="py-1.5 transition hover:text-[#4ade80]">OCR Scanner</a>
|
|
<a href="#features" class="py-1.5 transition hover:text-[#4ade80]">System Features</a>
|
|
<a href="#architecture" class="py-1.5 transition hover:text-[#4ade80]">Campus LAN</a>
|
|
<a href="#downloads" class="py-1.5 transition hover:text-[#4ade80]">Downloads</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<script>
|
|
const menuBtn = document.getElementById('mobile-menu-btn');
|
|
const menu = document.getElementById('mobile-menu');
|
|
|
|
if (menuBtn && menu) {
|
|
menuBtn.addEventListener('click', () => {
|
|
menu.classList.toggle('hidden');
|
|
});
|
|
|
|
const menuLinks = menu.querySelectorAll('a');
|
|
menuLinks.forEach(link => {
|
|
link.addEventListener('click', () => {
|
|
menu.classList.add('hidden');
|
|
});
|
|
});
|
|
}
|
|
</script>
|