refactor: adopt minimalist design, remove icon redundancy, eliminate grade tracking, and scope to 2021+ document registration
This commit is contained in:
ssbg04 committed
1 parent
e562a24d63
commit
b461a729fb
12 files changed
+410
-667
No files matched your search
@@ -4,41 +4,35 @@ const showcaseTabs = [
|
||||
{
|
||||
id: "dashboard",
|
||||
title: "Dashboard Overview",
|
||||
tagline: "Real-time overview of active school records, S.Y. 2026-2027 KPIs, student metrics, and required setup.",
|
||||
tagline: "Overview of student records, basic information statistics, and digitized historical documents from 2021 onwards.",
|
||||
image: "/screenshots/dashboard.webp",
|
||||
badge: "S.Y. 2026-2027 Active",
|
||||
badge: "Archives (2021+)",
|
||||
},
|
||||
{
|
||||
id: "students",
|
||||
title: "Students Directory",
|
||||
tagline: "Search learners by LRN, manage section assignments (e.g. Grade 7 - Susan), and monitor 3/6 document completion.",
|
||||
title: "Student Directory",
|
||||
tagline: "Search learners by 12-digit LRN, view basic profile information, and register student data via SF-10 and SF-9 forms.",
|
||||
image: "/screenshots/students.webp",
|
||||
badge: "LRN & 4Ps Tracker",
|
||||
badge: "Basic Info Directory",
|
||||
},
|
||||
{
|
||||
id: "documents",
|
||||
title: "Document Vault & Folders",
|
||||
tagline: "Organize student folders with JHS/SHS checklists, upload transcripts, and inspect documents with instant PDF preview.",
|
||||
tagline: "Organize archived student folders (2021 onwards), view historical documents, and inspect records with instant PDF preview.",
|
||||
image: "/screenshots/documents.webp",
|
||||
badge: "OCR Document Ingestion",
|
||||
badge: "Document Archival",
|
||||
},
|
||||
{
|
||||
id: "reports",
|
||||
title: "DepEd Transparency Board",
|
||||
tagline: "DepEd Transparency & School Performance Board tracking enrollment trends, dropouts, and official PDF exports.",
|
||||
title: "Archive Statistics Board",
|
||||
tagline: "Historical student records overview tracking 4Ps learner markers and audit-ready document summaries.",
|
||||
image: "/screenshots/reports.webp",
|
||||
badge: "DepEd Compliance",
|
||||
badge: "Records Summary",
|
||||
},
|
||||
];
|
||||
---
|
||||
|
||||
<section id="showcase" class="relative bg-[#09110c] py-24 text-white overflow-hidden border-t border-[#1f3627]">
|
||||
<!-- Glowing Background Gradients -->
|
||||
<div class="absolute inset-0 -z-10 overflow-hidden pointer-events-none">
|
||||
<div class="absolute left-1/4 top-10 h-[500px] w-[500px] rounded-full bg-[#16a34a]/15 blur-[120px]"></div>
|
||||
<div class="absolute right-1/4 bottom-10 h-[400px] w-[400px] rounded-full bg-[#f59e0b]/10 blur-[100px]"></div>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
||||
|
||||
<!-- Section Title Header -->
|
||||
@@ -48,10 +42,10 @@ const showcaseTabs = [
|
||||
<span>Live System Interface</span>
|
||||
</div>
|
||||
<h2 class="mt-4 font-display text-3xl font-extrabold tracking-tight text-white sm:text-5xl">
|
||||
Designed for Talisay Integrated School Teachers.
|
||||
Designed for Talisay Integrated School.
|
||||
</h2>
|
||||
<p class="mt-4 text-base text-slate-300 sm:text-lg">
|
||||
Actual interface screenshots from the Flutter desktop client built specifically to make school record management and DepEd compliance effortless.
|
||||
Actual interface screenshots from the desktop client built specifically to manage and register student records from old documents dated 2021 onwards.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -63,12 +57,12 @@ const showcaseTabs = [
|
||||
data-tab={tab.id}
|
||||
class={`tab-btn relative flex items-center gap-2.5 rounded-xl px-4 py-2.5 text-xs sm:text-sm font-semibold transition-all duration-200 border ${
|
||||
idx === 0
|
||||
? "bg-[#16a34a] text-white border-[#16a34a] shadow-lg shadow-[#16a34a]/30"
|
||||
? "bg-[#16a34a] text-white border-[#16a34a] shadow-md shadow-[#16a34a]/20"
|
||||
: "bg-[#112017] text-slate-300 border-[#23412f] hover:bg-[#162a1d] hover:text-white"
|
||||
}`}
|
||||
>
|
||||
<span>{tab.title}</span>
|
||||
<span class="rounded-md bg-black/30 px-2 py-0.5 text-[10px] uppercase font-bold text-emerald-300">
|
||||
<span class="rounded bg-black/30 px-2 py-0.5 text-[10px] uppercase font-bold text-emerald-300">
|
||||
{tab.badge}
|
||||
</span>
|
||||
</button>
|
||||
@@ -88,9 +82,6 @@ const showcaseTabs = [
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 rounded-lg bg-black/25 px-3 py-1 text-xs font-mono text-emerald-100">
|
||||
<svg class="h-3.5 w-3.5 text-emerald-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
|
||||
</svg>
|
||||
<span id="tab-url">tis_rms://app/dashboard</span>
|
||||
</div>
|
||||
|
||||
@@ -109,8 +100,7 @@ const showcaseTabs = [
|
||||
id={`tab-content-${tab.id}`}
|
||||
class={`tab-content transition-all duration-300 ${idx === 0 ? "block" : "hidden"}`}
|
||||
>
|
||||
<!-- Image with sleek border & shadow -->
|
||||
<div class="group relative overflow-hidden rounded-xl border border-[#23412f] bg-[#0c1610] shadow-xl">
|
||||
<div class="group relative overflow-hidden rounded-xl border border-[#23412f] bg-[#0c1610]">
|
||||
<img
|
||||
src={tab.image}
|
||||
alt={`TIS_RMS ${tab.title} - Talisay Integrated School`}
|
||||
@@ -126,11 +116,8 @@ const showcaseTabs = [
|
||||
<p class="text-xs sm:text-sm text-slate-300 max-w-2xl mt-0.5">{tab.tagline}</p>
|
||||
</div>
|
||||
<div class="shrink-0">
|
||||
<span class="inline-flex items-center gap-1.5 rounded-lg bg-[#16a34a] px-3 py-1.5 text-xs font-semibold text-white shadow-md">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
Verified Module
|
||||
<span class="rounded-md border border-[#1f3627] bg-[#112017] px-3 py-1 text-xs font-mono text-[#4ade80]">
|
||||
System View
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -38,55 +38,38 @@
|
||||
<div class="relative flex flex-col justify-between rounded-2xl border border-[#23412f] bg-[#112017]/90 p-6">
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="rounded-md bg-blue-500/15 px-2.5 py-1 text-xs font-semibold text-blue-400 border border-blue-500/25">
|
||||
<span class="rounded bg-blue-500/15 px-2.5 py-1 text-xs font-semibold text-blue-400 border border-blue-500/25">
|
||||
Teacher Terminals
|
||||
</span>
|
||||
<span class="text-xs text-slate-400 font-mono">Flutter SDK</span>
|
||||
</div>
|
||||
|
||||
<h4 class="mt-4 font-display text-lg font-bold text-white">Teacher & Staff Clients</h4>
|
||||
<p class="mt-1.5 text-xs text-slate-300">Fast native UI for faculty desks and mobile scanning.</p>
|
||||
<p class="mt-1.5 text-xs text-slate-300">Fast native interface for faculty desks and mobile document scanning.</p>
|
||||
|
||||
<div class="mt-5 space-y-3">
|
||||
<div class="flex items-center gap-3 rounded-xl border border-[#254231] bg-[#09110c] p-3.5">
|
||||
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-600/20 text-blue-400">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs font-bold text-white">Windows Desktop App</div>
|
||||
<div class="text-[11px] text-slate-400">Class Advisers & Registrar Desks</div>
|
||||
</div>
|
||||
<div class="mt-5 space-y-2.5">
|
||||
<div class="rounded-xl border border-[#254231] bg-[#09110c] p-3">
|
||||
<div class="text-xs font-bold text-white">Windows Desktop App</div>
|
||||
<div class="text-[11px] text-slate-400 mt-0.5">Faculty Workstations & Registrars</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3 rounded-xl border border-[#254231] bg-[#09110c] p-3.5">
|
||||
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[#16a34a]/20 text-[#4ade80]">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs font-bold text-white">Android Mobile App</div>
|
||||
<div class="text-[11px] text-slate-400">MLKit Camera Document Scanner</div>
|
||||
</div>
|
||||
<div class="rounded-xl border border-[#254231] bg-[#09110c] p-3">
|
||||
<div class="text-xs font-bold text-white">Android Mobile App</div>
|
||||
<div class="text-[11px] text-slate-400 mt-0.5">MLKit Camera Document Scanner</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex items-center justify-center gap-2 text-xs text-slate-400 font-mono">
|
||||
<span>HTTP / REST Campus API</span>
|
||||
<svg class="h-4 w-4 text-[#4ade80] animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||
</svg>
|
||||
<div class="mt-6 text-center text-xs text-slate-400 font-mono border-t border-[#1f3627] pt-3">
|
||||
Local HTTP / REST Campus API
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tier 2: Backend Server & DB -->
|
||||
<div class="relative flex flex-col justify-between rounded-2xl border border-[#16a34a]/50 bg-[#09110c] p-6 glow-emerald">
|
||||
<div class="relative flex flex-col justify-between rounded-2xl border border-[#16a34a]/40 bg-[#09110c] p-6">
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="rounded-md bg-[#16a34a]/20 px-2.5 py-1 text-xs font-semibold text-[#4ade80] border border-[#16a34a]/40">
|
||||
<span class="rounded bg-[#16a34a]/20 px-2.5 py-1 text-xs font-semibold text-[#4ade80] border border-[#16a34a]/40">
|
||||
School Server Core
|
||||
</span>
|
||||
<span class="text-xs text-[#4ade80] font-mono">Express 5.2</span>
|
||||
@@ -95,38 +78,21 @@
|
||||
<h4 class="mt-4 font-display text-lg font-bold text-white">Node.js Express & SQLite</h4>
|
||||
<p class="mt-1.5 text-xs text-slate-300">Local server REST API with SQLite (`tis_rms.db`) persistence.</p>
|
||||
|
||||
<div class="mt-5 space-y-3">
|
||||
<div class="flex items-center gap-3 rounded-xl border border-[#23412f] bg-[#112017] p-3.5">
|
||||
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[#16a34a]/20 text-[#4ade80]">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs font-bold text-white">`better-sqlite3` DB</div>
|
||||
<div class="text-[11px] text-slate-400">Zero-maintenance local file storage</div>
|
||||
</div>
|
||||
<div class="mt-5 space-y-2.5">
|
||||
<div class="rounded-xl border border-[#23412f] bg-[#112017] p-3">
|
||||
<div class="text-xs font-bold text-white">better-sqlite3 DB</div>
|
||||
<div class="text-[11px] text-slate-400 mt-0.5">Zero-maintenance local file database</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3 rounded-xl border border-[#23412f] bg-[#112017] p-3.5">
|
||||
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-amber-500/20 text-amber-400">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs font-bold text-white">Windows Service Server</div>
|
||||
<div class="text-[11px] text-slate-400">Runs 24/7 on designated school PC</div>
|
||||
</div>
|
||||
<div class="rounded-xl border border-[#23412f] bg-[#112017] p-3">
|
||||
<div class="text-xs font-bold text-white">Windows Service Daemon</div>
|
||||
<div class="text-[11px] text-slate-400 mt-0.5">Runs continuously on designated school PC</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex items-center justify-center gap-2 text-xs text-slate-400 font-mono">
|
||||
<span>Local Processing Pipeline</span>
|
||||
<svg class="h-4 w-4 text-[#4ade80] animate-pulse" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||
</svg>
|
||||
<div class="mt-6 text-center text-xs text-[#4ade80] font-mono border-t border-[#1f3627] pt-3">
|
||||
Offline Campus LAN Hub
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -134,7 +100,7 @@
|
||||
<div class="relative flex flex-col justify-between rounded-2xl border border-[#23412f] bg-[#112017]/90 p-6">
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="rounded-md bg-amber-500/15 px-2.5 py-1 text-xs font-semibold text-amber-400 border border-amber-500/30">
|
||||
<span class="rounded bg-amber-500/15 px-2.5 py-1 text-xs font-semibold text-amber-400 border border-amber-500/30">
|
||||
Processing Engines
|
||||
</span>
|
||||
<span class="text-xs text-slate-400 font-mono">DepEd Suite</span>
|
||||
@@ -143,35 +109,21 @@
|
||||
<h4 class="mt-4 font-display text-lg font-bold text-white">OCR & Document Engine</h4>
|
||||
<p class="mt-1.5 text-xs text-slate-300">Ghostscript PDF rasterizer, Tesseract OCR & ExcelJS.</p>
|
||||
|
||||
<div class="mt-5 space-y-3">
|
||||
<div class="flex items-center gap-3 rounded-xl border border-[#254231] bg-[#09110c] p-3.5">
|
||||
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-emerald-600/20 text-[#4ade80]">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs font-bold text-white">Tesseract OCR Engine</div>
|
||||
<div class="text-[11px] text-slate-400">Automated text & field extraction</div>
|
||||
</div>
|
||||
<div class="mt-5 space-y-2.5">
|
||||
<div class="rounded-xl border border-[#254231] bg-[#09110c] p-3">
|
||||
<div class="text-xs font-bold text-white">Tesseract OCR Engine</div>
|
||||
<div class="text-[11px] text-slate-400 mt-0.5">Text & basic field extraction (2021+)</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3 rounded-xl border border-[#254231] bg-[#09110c] p-3.5">
|
||||
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-amber-500/20 text-amber-400">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-xs font-bold text-white">ExcelJS SF-10 Processor</div>
|
||||
<div class="text-[11px] text-slate-400">DepEd JHS & SHS template engine</div>
|
||||
</div>
|
||||
<div class="rounded-xl border border-[#254231] bg-[#09110c] p-3">
|
||||
<div class="text-xs font-bold text-white">ExcelJS SF-10 Processor</div>
|
||||
<div class="text-[11px] text-slate-400 mt-0.5">DepEd JHS & SHS template integration</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex items-center justify-center text-xs text-[#4ade80] font-mono">
|
||||
✓ Bundled Binaries & Local Processing
|
||||
<div class="mt-6 text-center text-xs text-slate-400 font-mono border-t border-[#1f3627] pt-3">
|
||||
Local Binaries & Offline Engines
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -181,32 +133,26 @@
|
||||
<!-- Why School LAN Architecture? Grid -->
|
||||
<div class="mt-12 grid gap-6 sm:grid-cols-3">
|
||||
<div class="rounded-2xl border border-[#233e2e] bg-[#112017]/80 p-6 transition hover:border-[#16a34a] hover:bg-[#15271d]">
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-[#16a34a]/20 text-[#4ade80] font-bold border border-[#16a34a]/30">
|
||||
1
|
||||
</div>
|
||||
<h4 class="mt-4 font-display text-lg font-bold text-white">Zero Internet Dependency</h4>
|
||||
<div class="font-mono text-sm font-bold text-[#4ade80]">01</div>
|
||||
<h4 class="mt-3 font-display text-lg font-bold text-white">Zero Internet Dependency</h4>
|
||||
<p class="mt-2 text-xs leading-relaxed text-slate-300">
|
||||
Faculty and advisers at Talisay Integrated School can run daily enrollment, document uploads, and report generation seamlessly over local Wi-Fi / Ethernet.
|
||||
Faculty and advisers at Talisay Integrated School can register basic student information, upload documents, and generate reports seamlessly over local Wi-Fi / Ethernet.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl border border-[#233e2e] bg-[#112017]/80 p-6 transition hover:border-[#16a34a] hover:bg-[#15271d]">
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-[#f59e0b]/20 text-amber-400 font-bold border border-[#f59e0b]/30">
|
||||
2
|
||||
</div>
|
||||
<h4 class="mt-4 font-display text-lg font-bold text-white">Student Data Privacy</h4>
|
||||
<div class="font-mono text-sm font-bold text-amber-400">02</div>
|
||||
<h4 class="mt-3 font-display text-lg font-bold text-white">Student Data Privacy</h4>
|
||||
<p class="mt-2 text-xs leading-relaxed text-slate-300">
|
||||
Learner records, PSA birth certificates, and academic histories remain safely within Talisay school hardware with no public cloud risks.
|
||||
Learner basic records and historical documents remain safely within Talisay school hardware with no public cloud security risks.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="rounded-2xl border border-[#233e2e] bg-[#112017]/80 p-6 transition hover:border-[#16a34a] hover:bg-[#15271d]">
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-[#16a34a]/20 text-[#4ade80] font-bold border border-[#16a34a]/30">
|
||||
3
|
||||
</div>
|
||||
<h4 class="mt-4 font-display text-lg font-bold text-white">Lightning Fast LAN Speed</h4>
|
||||
<div class="font-mono text-sm font-bold text-[#4ade80]">03</div>
|
||||
<h4 class="mt-3 font-display text-lg font-bold text-white">Fast Local Performance</h4>
|
||||
<p class="mt-2 text-xs leading-relaxed text-slate-300">
|
||||
Local SQLite operations (`better-sqlite3`) ensure instantaneous PDF previews, student directory lookups, and report generation across campus rooms.
|
||||
Local SQLite operations (`better-sqlite3`) ensure instantaneous PDF previews, student directory lookups, and report generation across campus workstations.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -26,130 +26,92 @@
|
||||
</div>
|
||||
|
||||
<!-- Release Artifacts Cards Grid -->
|
||||
<div class="mt-16 grid gap-8 md:grid-cols-2 lg:grid-cols-3">
|
||||
<div class="mt-16 grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
|
||||
<!-- Card 1: Windows Client -->
|
||||
<div class="group relative flex flex-col justify-between rounded-3xl border border-[#23412f] bg-[#112017]/90 p-7 shadow-2xl backdrop-blur-xl transition hover:border-[#16a34a] hover:bg-[#15271d]">
|
||||
<div class="group relative flex flex-col justify-between rounded-2xl border border-[#23412f] bg-[#112017]/90 p-6 transition hover:border-[#16a34a] hover:bg-[#15271d]">
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-blue-600/20 text-blue-400 border border-blue-500/30">
|
||||
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M0 3.449L9.75 2.1v9.451H0m10.95-9.6L24 0v11.4H10.95M0 12.6h9.75v9.451L0 20.699M10.95 12.6H24V24l-13.05-1.8" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="rounded-full bg-[#16a34a]/15 px-3 py-1 text-xs font-mono font-semibold text-[#4ade80] border border-[#16a34a]/30">
|
||||
<span class="font-display font-bold text-sm text-blue-400">Windows Desktop</span>
|
||||
<span class="rounded bg-[#16a34a]/15 px-2.5 py-0.5 text-[10px] font-mono font-semibold text-[#4ade80] border border-[#16a34a]/30">
|
||||
v1.0.0 (Latest)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-6 font-display text-xl font-bold text-white">Windows Desktop Setup</h3>
|
||||
<p class="mt-1.5 text-xs text-emerald-400 font-mono">TIS_RMS_Client_Setup.exe</p>
|
||||
<h3 class="mt-4 font-display text-lg font-bold text-white">Windows Desktop Setup</h3>
|
||||
<p class="mt-1 text-xs text-emerald-400 font-mono">TIS_RMS_Client_Setup.exe</p>
|
||||
|
||||
<p class="mt-4 text-xs sm:text-sm text-slate-300 leading-relaxed">
|
||||
Full Windows installation package created with Inno Setup. Includes desktop shortcuts, document processing helpers, and direct campus LAN connectivity.
|
||||
<p class="mt-3 text-xs text-slate-300 leading-relaxed">
|
||||
Full Windows installation package created with Inno Setup. Includes desktop shortcuts and direct campus LAN database connectivity.
|
||||
</p>
|
||||
|
||||
<div class="mt-6 space-y-2 text-xs text-slate-400 font-mono">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="h-4 w-4 text-[#4ade80]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Windows 10 / 11 (64-bit)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="h-4 w-4 text-[#4ade80]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Teacher Workstations & Registrars</span>
|
||||
</div>
|
||||
<div class="mt-5 space-y-1.5 text-xs text-slate-400 font-mono">
|
||||
<div>— Windows 10 / 11 (64-bit)</div>
|
||||
<div>— Teacher Workstations & Registrars</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<div class="mt-6">
|
||||
<a
|
||||
href="https://github.com/ssbg04/TIS_RMS/releases/latest"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center justify-center gap-2 rounded-xl bg-gradient-to-r from-[#16a34a] to-[#15803d] py-3.5 text-xs font-semibold text-white shadow-lg shadow-[#16a34a]/30 transition hover:from-[#15803d] hover:to-[#0f5c2b]"
|
||||
class="flex items-center justify-center rounded-xl bg-[#16a34a] py-3 text-xs font-semibold text-white transition hover:bg-[#15803d]"
|
||||
>
|
||||
<span>Download Setup (.exe)</span>
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
Download Setup (.exe)
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 2: Android Universal APK -->
|
||||
<div class="group relative flex flex-col justify-between rounded-3xl border border-[#23412f] bg-[#112017]/90 p-7 shadow-2xl backdrop-blur-xl transition hover:border-[#16a34a] hover:bg-[#15271d]">
|
||||
<div class="group relative flex flex-col justify-between rounded-2xl border border-[#23412f] bg-[#112017]/90 p-6 transition hover:border-[#16a34a] hover:bg-[#15271d]">
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-emerald-600/20 text-[#4ade80] border border-emerald-500/30">
|
||||
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M17.523 15.3414c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.552 0 .9997.4482.9997.9993s-.4477.9997-.9997.9997m-11.046 0c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.552 0 .9997.4482.9997.9993s-.4477.9997-.9997.9997m11.405-6.0028l1.9973-3.4592c.1192-.2066.0486-.4715-.158-.5907-.2066-.1192-.4715-.0486-.5907.158l-2.0238 3.505c-1.4646-.6692-3.1235-1.0505-4.8988-1.0772v-.0063c-1.7753.0267-3.4342.408-4.8988 1.0772l-2.0238-3.505c-.1192-.2066-.3841-.2772-.5907-.158-.2066.1192-.2772.3841-.158.5907l1.9973 3.4592c-3.1368 1.7061-5.2638 4.8875-5.5267 8.618h22.4095c-.2629-3.7305-2.3899-6.9119-5.5267-8.618" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="rounded-full bg-emerald-500/10 px-3 py-1 text-xs font-mono font-semibold text-[#4ade80] border border-emerald-500/20">
|
||||
<span class="font-display font-bold text-sm text-[#4ade80]">Android Mobile</span>
|
||||
<span class="rounded bg-emerald-500/10 px-2.5 py-0.5 text-[10px] font-mono font-semibold text-[#4ade80] border border-emerald-500/20">
|
||||
Universal Build
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-6 font-display text-xl font-bold text-white">Android Mobile Client</h3>
|
||||
<p class="mt-1.5 text-xs text-emerald-400 font-mono">TIS_RMS_Android_Universal.apk</p>
|
||||
<h3 class="mt-4 font-display text-lg font-bold text-white">Android Mobile Client</h3>
|
||||
<p class="mt-1 text-xs text-emerald-400 font-mono">TIS_RMS_Android_Universal.apk</p>
|
||||
|
||||
<p class="mt-4 text-xs sm:text-sm text-slate-300 leading-relaxed">
|
||||
Universal Android APK for educators. Features MLKit camera document scanning, offline cache, and instant document upload to the school database.
|
||||
<p class="mt-3 text-xs text-slate-300 leading-relaxed">
|
||||
Universal Android APK for educators. Features MLKit camera document scanning, offline cache, and instant document upload to the local school database.
|
||||
</p>
|
||||
|
||||
<div class="mt-6 space-y-2 text-xs text-slate-400 font-mono">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="h-4 w-4 text-[#4ade80]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Android 8.0+ (ARM64 & x86_64)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="h-4 w-4 text-[#4ade80]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>MLKit Camera Scanner</span>
|
||||
</div>
|
||||
<div class="mt-5 space-y-1.5 text-xs text-slate-400 font-mono">
|
||||
<div>— Android 8.0+ (ARM64 & x86_64)</div>
|
||||
<div>— MLKit Camera Scanner</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<div class="mt-6">
|
||||
<a
|
||||
href="https://github.com/ssbg04/TIS_RMS/releases/download/v1.0.0/TIS_RMS_Android_Universal.apk"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center justify-center gap-2 rounded-xl bg-[#16271c] py-3.5 text-xs font-semibold text-white transition hover:bg-[#1d3525] border border-[#23412f]"
|
||||
class="flex items-center justify-center rounded-xl bg-[#16271c] py-3 text-xs font-semibold text-white transition hover:bg-[#1d3525] border border-[#23412f]"
|
||||
>
|
||||
<span>Download APK (.apk)</span>
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
Download APK (.apk)
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Card 3: Backend Windows Service Setup -->
|
||||
<div class="group relative flex flex-col justify-between rounded-3xl border border-[#23412f] bg-[#112017]/90 p-7 shadow-2xl backdrop-blur-xl transition hover:border-[#16a34a] hover:bg-[#15271d] md:col-span-2 lg:col-span-1">
|
||||
<div class="group relative flex flex-col justify-between rounded-2xl border border-[#23412f] bg-[#112017]/90 p-6 transition hover:border-[#16a34a] hover:bg-[#15271d] md:col-span-2 lg:col-span-1">
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex h-12 w-12 items-center justify-center rounded-2xl bg-amber-500/20 text-amber-400 border border-amber-500/30">
|
||||
<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="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="rounded-full bg-amber-500/15 px-3 py-1 text-xs font-mono font-semibold text-amber-300 border border-amber-500/30">
|
||||
<span class="font-display font-bold text-sm text-amber-400">Campus Server</span>
|
||||
<span class="rounded bg-amber-500/15 px-2.5 py-0.5 text-[10px] font-mono font-semibold text-amber-300 border border-amber-500/30">
|
||||
Campus Server
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-6 font-display text-xl font-bold text-white">Backend School Server</h3>
|
||||
<p class="mt-1.5 text-xs text-amber-400 font-mono">Node.js Express Campus Daemon</p>
|
||||
<h3 class="mt-4 font-display text-lg font-bold text-white">Backend School Server</h3>
|
||||
<p class="mt-1 text-xs text-amber-400 font-mono">Node.js Express Campus Daemon</p>
|
||||
|
||||
<p class="mt-4 text-xs sm:text-sm text-slate-300 leading-relaxed">
|
||||
<p class="mt-3 text-xs text-slate-300 leading-relaxed">
|
||||
Run the Node backend continuously on your school server PC via NSSM background service — accessible across faculty Wi-Fi.
|
||||
</p>
|
||||
|
||||
@@ -160,17 +122,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-8">
|
||||
<div class="mt-6">
|
||||
<a
|
||||
href="https://github.com/ssbg04/TIS_RMS"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center justify-center gap-2 rounded-xl bg-[#16271c] py-3.5 text-xs font-semibold text-white transition hover:bg-[#1d3525] border border-[#23412f]"
|
||||
class="flex items-center justify-center rounded-xl bg-[#16271c] py-3 text-xs font-semibold text-white transition hover:bg-[#1d3525] border border-[#23412f]"
|
||||
>
|
||||
<span>View Source on GitHub</span>
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
|
||||
</svg>
|
||||
View Source on GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,47 +1,41 @@
|
||||
---
|
||||
// Features component - Teacher & Staff Centric for Talisay Integrated School
|
||||
// Features component - Student Records Management for Talisay Integrated School
|
||||
const featuresList = [
|
||||
{
|
||||
num: "01",
|
||||
title: "Advisory Class & Section Roster",
|
||||
description: "Effortlessly manage Junior & Senior High learner profiles, track section assignments (e.g. Grade 7 - Susan, Grade 10 - Rizal), and perform fast 12-digit LRN search.",
|
||||
icon: "M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z",
|
||||
tag: "Advisory Management",
|
||||
title: "Student LRN & Basic Profile Directory",
|
||||
description: "Manage historical student profiles, look up 12-digit LRNs, and catalog basic learner information from records dated 2021 onwards.",
|
||||
tag: "Profile Directory",
|
||||
},
|
||||
{
|
||||
num: "02",
|
||||
title: "Document Checklist (3/6 Docs)",
|
||||
description: "Monitor mandatory requirements per student (PSA Birth Certificate, Form 137, Report Card, Good Moral) with visual progress bars and instant PDF previews.",
|
||||
icon: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z",
|
||||
tag: "Requirement Tracker",
|
||||
title: "Basic Info Registration (SF10 & SF9)",
|
||||
description: "SF-10 and SF-9 documents provide the most efficient method to add basic student information into the system. Basic registration only—not enrollment.",
|
||||
tag: "Efficient Method",
|
||||
},
|
||||
{
|
||||
num: "03",
|
||||
title: "Automated OCR Document Scanner",
|
||||
description: "Digitize paper transcripts and report cards automatically using local Tesseract OCR, saving teachers countless hours of manual data entry.",
|
||||
icon: "M13 10V3L4 14h7v7l9-11h-7z",
|
||||
description: "Digitize historical paper transcripts and documents (2021+) automatically using local Tesseract OCR, saving hours of manual data entry.",
|
||||
tag: "Tesseract OCR",
|
||||
},
|
||||
{
|
||||
num: "04",
|
||||
title: "One-Click DepEd SF-10 Excel Export",
|
||||
description: "Generate official DepEd School Form 10 (JHS and SHS v2026) spreadsheets with pre-populated learning areas, quarterly grades, and automated general averages.",
|
||||
icon: "M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z",
|
||||
tag: "DepEd SF-10 Ready",
|
||||
title: "DepEd SF-10 Spreadsheet Export",
|
||||
description: "Generate official DepEd School Form 10 (JHS and SHS v2026) spreadsheets with pre-populated student biographical data and historical records.",
|
||||
tag: "SF-10 Integration",
|
||||
},
|
||||
{
|
||||
num: "05",
|
||||
title: "DepEd Transparency & 4Ps Analytics",
|
||||
description: "Monitor school enrollment trends, track 4Ps beneficiaries, log transferees and dropouts, and export audit-ready PDF reports for Division inspection.",
|
||||
icon: "M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z",
|
||||
tag: "Compliance Board",
|
||||
title: "Archival Records & 4Ps Overview",
|
||||
description: "Monitor cataloged historical files from 2021 onwards, classify 4Ps beneficiaries, and export audit-ready summaries for division inspection.",
|
||||
tag: "Archival Summary",
|
||||
},
|
||||
{
|
||||
num: "06",
|
||||
title: "100% Offline Campus LAN Resilience",
|
||||
description: "Designed specifically for Talisay Integrated School — access and update records smoothly even during internet or cloud outages in Tiaong, Quezon.",
|
||||
icon: "M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10",
|
||||
tag: "Local SQLite Server",
|
||||
description: "Designed specifically for Talisay Integrated School — access and update records smoothly on the local network even during internet outages in Tiaong.",
|
||||
tag: "Local SQLite DB",
|
||||
},
|
||||
];
|
||||
---
|
||||
@@ -53,48 +47,43 @@ const featuresList = [
|
||||
<div class="mx-auto max-w-3xl text-center">
|
||||
<div class="inline-flex items-center gap-2 rounded-full border border-[#2a4c37] bg-[#112017] px-4 py-1 text-xs font-semibold text-[#4ade80]">
|
||||
<img src="/tis_logo.png" alt="TIS Logo" class="h-3.5 w-3.5 object-contain" />
|
||||
<span>Built For Educators</span>
|
||||
<span>Core System Modules</span>
|
||||
</div>
|
||||
<h2 class="mt-4 font-display text-3xl font-extrabold tracking-tight text-white sm:text-5xl">
|
||||
Features that give teachers their time back.
|
||||
Designed for historical records management.
|
||||
</h2>
|
||||
<p class="mt-4 text-base text-slate-300 sm:text-lg">
|
||||
Designed from the ground up to solve real record-keeping and DepEd compliance challenges at Talisay Integrated School.
|
||||
Streamlined tools to digitize, organize, and register student information from old documents (2021 onwards) without grade tracking overhead.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature Grid -->
|
||||
<!-- Minimalist Feature Grid -->
|
||||
<div class="mt-16 grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{featuresList.map((item) => (
|
||||
<div class="group relative flex flex-col justify-between rounded-2xl border border-[#233e2e] bg-[#112017]/90 p-7 shadow-lg transition-all duration-300 hover:border-[#16a34a] hover:bg-[#15271d] hover:shadow-2xl hover:shadow-[#16a34a]/10 hover:-translate-y-1">
|
||||
<div class="group relative flex flex-col justify-between rounded-2xl border border-[#233e2e] bg-[#112017]/90 p-6 transition hover:border-[#16a34a] hover:bg-[#14261c]">
|
||||
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex h-11 w-11 items-center justify-center rounded-xl bg-[#16a34a]/15 text-[#4ade80] border border-[#16a34a]/25 transition-colors group-hover:bg-[#16a34a] group-hover:text-white">
|
||||
<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={item.icon} />
|
||||
</svg>
|
||||
</div>
|
||||
<span class="font-mono text-sm font-bold text-[#4ade80]">
|
||||
{item.num}
|
||||
</span>
|
||||
|
||||
<span class="rounded-md bg-black/30 border border-[#23412f] px-2.5 py-1 text-[11px] font-mono font-bold text-amber-400">
|
||||
<span class="rounded bg-black/30 border border-[#23412f] px-2 py-0.5 text-[10px] font-mono text-amber-400">
|
||||
{item.tag}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-6 font-display text-lg font-bold text-white group-hover:text-[#a7f3d0] transition-colors">
|
||||
<h3 class="mt-4 font-display text-base font-bold text-white group-hover:text-[#a7f3d0] transition-colors">
|
||||
{item.title}
|
||||
</h3>
|
||||
|
||||
<p class="mt-2.5 text-xs sm:text-sm leading-relaxed text-slate-300">
|
||||
<p class="mt-2 text-xs leading-relaxed text-slate-300">
|
||||
{item.description}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 flex items-center gap-1.5 text-xs font-semibold text-[#4ade80]">
|
||||
<span>Learn more</span>
|
||||
<svg class="h-4 w-4 transition-transform group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||
</svg>
|
||||
<div class="mt-5 border-t border-[#1f3627] pt-3 text-xs font-mono text-[#4ade80]">
|
||||
<span>Active Record Module</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
+10
-13
@@ -25,7 +25,7 @@ const currentYear = new Date().getFullYear();
|
||||
</div>
|
||||
|
||||
<p class="text-xs text-slate-300 leading-relaxed max-w-sm">
|
||||
A client-server school Record Management System designed for <strong>Talisay Integrated School in Tiaong, Quezon, Philippines</strong>. Built for teachers to automate DepEd SF-10 reports, manage student LRN profiles, track document requirements, and process scanned forms with Tesseract OCR over the offline campus LAN.
|
||||
A client-server school Record Management System designed for <strong>Talisay Integrated School in Tiaong, Quezon, Philippines</strong>. Dedicated to managing and digitizing historical student records from old documents dated <strong>2021 onwards</strong>. Utilizes SF-10 and SF-9 forms for efficient basic student info registration with zero grade tracking.
|
||||
</p>
|
||||
|
||||
<div class="inline-flex items-center gap-2 rounded-lg bg-[#112017] px-3 py-1.5 font-mono text-[11px] text-slate-400 border border-[#23412f]">
|
||||
@@ -36,12 +36,12 @@ const currentYear = new Date().getFullYear();
|
||||
|
||||
<!-- Navigation Links -->
|
||||
<div class="md:col-span-3 space-y-3">
|
||||
<h4 class="font-display text-xs font-bold uppercase tracking-wider text-slate-200">Teacher Tools</h4>
|
||||
<h4 class="font-display text-xs font-bold uppercase tracking-wider text-slate-200">System Navigation</h4>
|
||||
<ul class="space-y-2">
|
||||
<li><a href="#showcase" class="hover:text-[#4ade80] transition">App Showcase</a></li>
|
||||
<li><a href="#hero-features" class="hover:text-[#4ade80] transition">Key Features</a></li>
|
||||
<li><a href="#school-forms" class="hover:text-[#4ade80] transition">DepEd SF-10 Automation</a></li>
|
||||
<li><a href="#school-forms" class="hover:text-[#4ade80] transition">SF-10 & SF-9 Records</a></li>
|
||||
<li><a href="#ocr-pipeline" class="hover:text-[#4ade80] transition">OCR Document Engine</a></li>
|
||||
<li><a href="#features" class="hover:text-[#4ade80] transition">System Features</a></li>
|
||||
<li><a href="#architecture" class="hover:text-[#4ade80] transition">Campus LAN Offline Mode</a></li>
|
||||
<li><a href="#tech-stack" class="hover:text-[#4ade80] transition">System Architecture</a></li>
|
||||
</ul>
|
||||
@@ -52,21 +52,18 @@ const currentYear = new Date().getFullYear();
|
||||
<h4 class="font-display text-xs font-bold uppercase tracking-wider text-slate-200">Release & Distribution</h4>
|
||||
<ul class="space-y-2">
|
||||
<li>
|
||||
<a href="https://github.com/ssbg04/TIS_RMS/releases/latest" target="_blank" rel="noopener noreferrer" class="hover:text-[#4ade80] transition flex items-center gap-1.5">
|
||||
<span>Windows Desktop Installer (.exe)</span>
|
||||
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<a href="https://github.com/ssbg04/TIS_RMS/releases/latest" target="_blank" rel="noopener noreferrer" class="hover:text-[#4ade80] transition">
|
||||
Windows Desktop Installer (.exe)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/ssbg04/TIS_RMS/releases/download/v1.0.0/TIS_RMS_Android_Universal.apk" target="_blank" rel="noopener noreferrer" class="hover:text-[#4ade80] transition flex items-center gap-1.5">
|
||||
<span>Android Universal APK (.apk)</span>
|
||||
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<a href="https://github.com/ssbg04/TIS_RMS/releases/download/v1.0.0/TIS_RMS_Android_Universal.apk" target="_blank" rel="noopener noreferrer" class="hover:text-[#4ade80] transition">
|
||||
Android Universal APK (.apk)
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/ssbg04/TIS_RMS" target="_blank" rel="noopener noreferrer" class="hover:text-[#4ade80] transition flex items-center gap-1.5">
|
||||
<span>GitHub Repository (ssbg04/TIS_RMS)</span>
|
||||
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
||||
<a href="https://github.com/ssbg04/TIS_RMS" target="_blank" rel="noopener noreferrer" class="hover:text-[#4ade80] transition">
|
||||
GitHub Repository (ssbg04/TIS_RMS)
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
+170
-267
@@ -16,7 +16,7 @@
|
||||
<div class="mx-auto max-w-4xl text-center">
|
||||
|
||||
<!-- Official School Identity Pill -->
|
||||
<div class="mb-6 inline-flex items-center gap-2.5 rounded-full border border-[#2a4c37] bg-[#112017]/90 px-4 py-2 text-xs font-semibold text-[#a7f3d0] shadow-lg shadow-[#16a34a]/10 backdrop-blur-md">
|
||||
<div class="mb-6 inline-flex items-center gap-2.5 rounded-full border border-[#2a4c37] bg-[#112017]/90 px-4 py-1.5 text-xs font-semibold text-[#a7f3d0]">
|
||||
<img
|
||||
src="/tis_logo.png"
|
||||
alt="TIS Logo"
|
||||
@@ -26,149 +26,101 @@
|
||||
/>
|
||||
<span class="text-amber-400 font-bold">Talisay Integrated School</span>
|
||||
<span class="text-slate-500">•</span>
|
||||
<span class="text-slate-300">Tiaong, Quezon, Philippines</span>
|
||||
<span class="hidden sm:inline-flex rounded-full bg-[#16a34a]/25 px-2 py-0.5 text-[10px] font-bold text-[#4ade80]">
|
||||
DepEd Division of Quezon
|
||||
<span class="text-slate-300">Tiaong, Quezon</span>
|
||||
<span class="hidden sm:inline-flex rounded-full bg-[#16a34a]/20 border border-[#16a34a]/40 px-2 py-0.5 text-[10px] font-bold text-[#4ade80]">
|
||||
Old Documents Archive (2021 Onwards)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Main Teacher-Friendly Headline -->
|
||||
<!-- Main Headline -->
|
||||
<h1 class="font-display text-4xl font-extrabold tracking-tight text-white sm:text-6xl lg:text-7xl leading-[1.08]">
|
||||
The Record Management System <br class="hidden sm:inline" />
|
||||
built for <span class="bg-gradient-to-r from-[#4ade80] via-[#22c55e] to-[#f59e0b] bg-clip-text text-transparent">Talisay Integrated School Teachers.</span>
|
||||
Records Management System <br class="hidden sm:inline" />
|
||||
for <span class="bg-gradient-to-r from-[#4ade80] via-[#22c55e] to-[#f59e0b] bg-clip-text text-transparent">Old Documents (2021 Onwards).</span>
|
||||
</h1>
|
||||
|
||||
<!-- Subtitle -->
|
||||
<p class="mt-6 text-base text-slate-300 sm:text-lg sm:leading-8 font-normal max-w-3xl mx-auto">
|
||||
TIS RMS simplifies record-keeping for class advisers and school staff in Tiaong, Quezon. Generate official <strong>DepEd School Form 10 (SF-10 JHS/SHS)</strong>, track student LRNs and document requirements, scan physical records with <strong>Tesseract OCR</strong>, and work uninterrupted on your <strong>offline campus LAN</strong>.
|
||||
Built specifically for Talisay Integrated School to manage and register student basic information from historical documents dated <strong>2021 onwards</strong>. Utilizing <strong>SF-10 and SF-9</strong> documents offers the most efficient method to add basic learner profiles into your local school records—this is <strong>basic registration of basic information</strong>, not enrollment, with zero grade tracking.
|
||||
</p>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="mt-8 flex flex-wrap items-center justify-center gap-4">
|
||||
<a
|
||||
href="#downloads"
|
||||
class="group inline-flex items-center gap-2.5 rounded-xl bg-gradient-to-r from-[#16a34a] to-[#15803d] px-6 py-3.5 text-sm font-semibold text-white shadow-xl shadow-[#16a34a]/30 transition-all duration-200 hover:from-[#15803d] hover:to-[#0f5c2b] hover:shadow-2xl hover:shadow-[#16a34a]/40 hover:-translate-y-0.5"
|
||||
class="inline-flex items-center rounded-xl bg-[#16a34a] px-6 py-3 text-sm font-semibold text-white shadow-md shadow-[#16a34a]/20 transition hover:bg-[#15803d]"
|
||||
>
|
||||
<svg class="h-5 w-5 transition-transform duration-200 group-hover:translate-y-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
<span>Get Windows & Android App</span>
|
||||
Get Windows & Android App
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#hero-console"
|
||||
class="inline-flex items-center gap-2 rounded-xl border border-[#2a4c37] bg-[#132219]/80 px-6 py-3.5 text-sm font-semibold text-slate-200 shadow-sm backdrop-blur-sm transition hover:border-[#16a34a]/60 hover:bg-[#182c20] hover:text-white"
|
||||
class="inline-flex items-center rounded-xl border border-[#2a4c37] bg-[#132219]/80 px-6 py-3 text-sm font-semibold text-slate-200 transition hover:border-[#16a34a]/60 hover:bg-[#182c20] hover:text-white"
|
||||
>
|
||||
<svg class="h-4 w-4 text-[#4ade80]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
|
||||
</svg>
|
||||
<span>Try Interactive Teacher Demo</span>
|
||||
Explore Live Console
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Quick Platform Support Pills -->
|
||||
<div class="mt-6 flex flex-wrap items-center justify-center gap-4 text-xs font-medium text-slate-400">
|
||||
<div class="flex items-center gap-1.5">
|
||||
<svg class="h-4 w-4 text-emerald-400" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M0 3.449L9.75 2.1v9.451H0m10.95-9.6L24 0v11.4H10.95M0 12.6h9.75v9.451L0 20.699M10.95 12.6H24V24l-13.05-1.8" />
|
||||
</svg>
|
||||
<span>Windows Desktop App</span>
|
||||
</div>
|
||||
|
||||
<!-- Quick Platform Support Indicators -->
|
||||
<div class="mt-6 flex flex-wrap items-center justify-center gap-2.5 text-xs font-mono text-slate-400">
|
||||
<span class="rounded-md border border-[#1f3627] bg-[#112017] px-2.5 py-1 text-slate-300">Windows Desktop Client</span>
|
||||
<span class="text-slate-600">•</span>
|
||||
|
||||
<div class="flex items-center gap-1.5">
|
||||
<svg class="h-4 w-4 text-emerald-400" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M17.523 15.3414c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.552 0 .9997.4482.9997.9993s-.4477.9997-.9997.9997m-11.046 0c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.552 0 .9997.4482.9997.9993s-.4477.9997-.9997.9997m11.405-6.0028l1.9973-3.4592c.1192-.2066.0486-.4715-.158-.5907-.2066-.1192-.4715-.0486-.5907.158l-2.0238 3.505c-1.4646-.6692-3.1235-1.0505-4.8988-1.0772v-.0063c-1.7753.0267-3.4342.408-4.8988 1.0772l-2.0238-3.505c-.1192-.2066-.3841-.2772-.5907-.158-.2066.1192-.2772.3841-.158.5907l1.9973 3.4592c-3.1368 1.7061-5.2638 4.8875-5.5267 8.618h22.4095c-.2629-3.7305-2.3899-6.9119-5.5267-8.618" />
|
||||
</svg>
|
||||
<span>Android Mobile Scanner</span>
|
||||
</div>
|
||||
|
||||
<span class="rounded-md border border-[#1f3627] bg-[#112017] px-2.5 py-1 text-slate-300">Android Scanner</span>
|
||||
<span class="text-slate-600">•</span>
|
||||
|
||||
<div class="flex items-center gap-1.5 text-amber-400">
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M13 10V3L4 14h7v7l9-11h-7z" />
|
||||
</svg>
|
||||
<span>100% Offline Campus LAN</span>
|
||||
</div>
|
||||
<span class="rounded-md border border-[#1f3627] bg-[#112017] px-2.5 py-1 text-amber-400">100% Offline Campus LAN</span>
|
||||
<span class="text-slate-600">•</span>
|
||||
<span class="rounded-md border border-[#1f3627] bg-[#112017] px-2.5 py-1 text-[#4ade80]">SF10 / SF9 Registration</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Highlights Ticker: 4 Best Features Spotlight -->
|
||||
<!-- Highlights Ticker: 4 Spotlight Minimalist Cards -->
|
||||
<div id="hero-features" class="mt-14 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
|
||||
<!-- Feature 1: DepEd SF-10 -->
|
||||
<div class="group relative overflow-hidden rounded-2xl border border-[#233e2e] bg-[#112017]/90 p-5 shadow-lg transition duration-300 hover:border-[#16a34a] hover:bg-[#14261c] hover:-translate-y-1">
|
||||
<div class="flex items-center gap-3.5">
|
||||
<div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#16a34a]/20 text-[#4ade80] border border-[#16a34a]/30">
|
||||
<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="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-display text-base font-bold text-white">DepEd SF-10 Export</div>
|
||||
<div class="text-xs text-amber-400 font-medium">JHS & SHS v2026 Ready</div>
|
||||
</div>
|
||||
<!-- Feature 1: SF10 & SF9 Registration -->
|
||||
<div class="group relative overflow-hidden rounded-2xl border border-[#233e2e] bg-[#112017]/90 p-5 transition hover:border-[#16a34a] hover:bg-[#14261c]">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-mono text-xs font-bold text-[#4ade80]">01</span>
|
||||
<span class="text-[10px] font-mono text-amber-400 font-semibold uppercase">Registration Method</span>
|
||||
</div>
|
||||
<p class="mt-3 text-xs leading-relaxed text-slate-300">
|
||||
Auto-populates official DepEd permanent record sheets with formulas, general averages, and promotion remarks.
|
||||
<div class="mt-3 font-display text-base font-bold text-white">SF-10 & SF-9 Registration</div>
|
||||
<p class="mt-2 text-xs leading-relaxed text-slate-300">
|
||||
The efficient method to capture and register student basic profile information from official forms into the database.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 2: LRN & Document Checklist -->
|
||||
<div class="group relative overflow-hidden rounded-2xl border border-[#233e2e] bg-[#112017]/90 p-5 shadow-lg transition duration-300 hover:border-[#16a34a] hover:bg-[#14261c] hover:-translate-y-1">
|
||||
<div class="flex items-center gap-3.5">
|
||||
<div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#f59e0b]/20 text-[#fbbf24] border border-[#f59e0b]/30">
|
||||
<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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-display text-base font-bold text-white">LRN & Document Tracker</div>
|
||||
<div class="text-xs text-[#4ade80] font-medium">3/6 Docs Checklist</div>
|
||||
</div>
|
||||
<!-- Feature 2: Old Documents (2021 Onwards) -->
|
||||
<div class="group relative overflow-hidden rounded-2xl border border-[#233e2e] bg-[#112017]/90 p-5 transition hover:border-[#16a34a] hover:bg-[#14261c]">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-mono text-xs font-bold text-[#4ade80]">02</span>
|
||||
<span class="text-[10px] font-mono text-[#4ade80] font-semibold uppercase">Archival Scope</span>
|
||||
</div>
|
||||
<p class="mt-3 text-xs leading-relaxed text-slate-300">
|
||||
Search students by 12-digit LRN, check PSA, Form 137, and 4Ps status in seconds with visual progress bars.
|
||||
<div class="mt-3 font-display text-base font-bold text-white">Old Documents 2021+</div>
|
||||
<p class="mt-2 text-xs leading-relaxed text-slate-300">
|
||||
Dedicated records management to digitize, organize, and search historical student archives dated 2021 onwards.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 3: OCR Engine -->
|
||||
<div class="group relative overflow-hidden rounded-2xl border border-[#233e2e] bg-[#112017]/90 p-5 shadow-lg transition duration-300 hover:border-[#16a34a] hover:bg-[#14261c] hover:-translate-y-1">
|
||||
<div class="flex items-center gap-3.5">
|
||||
<div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-emerald-600/20 text-[#4ade80] border border-emerald-500/30">
|
||||
<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="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-display text-base font-bold text-white">Tesseract OCR Scanner</div>
|
||||
<div class="text-xs text-slate-400 font-medium">Zero Manual Typing</div>
|
||||
</div>
|
||||
<!-- Feature 3: OCR Text Scanner -->
|
||||
<div class="group relative overflow-hidden rounded-2xl border border-[#233e2e] bg-[#112017]/90 p-5 transition hover:border-[#16a34a] hover:bg-[#14261c]">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-mono text-xs font-bold text-[#4ade80]">03</span>
|
||||
<span class="text-[10px] font-mono text-slate-400 font-semibold uppercase">Tesseract OCR</span>
|
||||
</div>
|
||||
<p class="mt-3 text-xs leading-relaxed text-slate-300">
|
||||
Converts physical birth certificates, transcripts, and scanned reports into indexed digital records automatically.
|
||||
<div class="mt-3 font-display text-base font-bold text-white">OCR Character Scanner</div>
|
||||
<p class="mt-2 text-xs leading-relaxed text-slate-300">
|
||||
Extracts learner identifiers and profile details directly from paper scans without tedious manual transcription.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Feature 4: Local LAN Resilience -->
|
||||
<div class="group relative overflow-hidden rounded-2xl border border-[#233e2e] bg-[#112017]/90 p-5 shadow-lg transition duration-300 hover:border-[#16a34a] hover:bg-[#14261c] hover:-translate-y-1">
|
||||
<div class="flex items-center gap-3.5">
|
||||
<div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-[#0284c7]/20 text-[#38bdf8] border border-[#0284c7]/30">
|
||||
<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="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="font-display text-base font-bold text-white">Campus LAN Server</div>
|
||||
<div class="text-xs text-[#38bdf8] font-medium">No Internet Needed</div>
|
||||
</div>
|
||||
<!-- Feature 4: Offline Campus LAN -->
|
||||
<div class="group relative overflow-hidden rounded-2xl border border-[#233e2e] bg-[#112017]/90 p-5 transition hover:border-[#16a34a] hover:bg-[#14261c]">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-mono text-xs font-bold text-[#4ade80]">04</span>
|
||||
<span class="text-[10px] font-mono text-[#38bdf8] font-semibold uppercase">Zero Cloud Risk</span>
|
||||
</div>
|
||||
<p class="mt-3 text-xs leading-relaxed text-slate-300">
|
||||
Built for Talisay school environment with local SQLite database that keeps running during internet outages.
|
||||
<div class="mt-3 font-display text-base font-bold text-white">Campus LAN Database</div>
|
||||
<p class="mt-2 text-xs leading-relaxed text-slate-300">
|
||||
Fast SQLite storage running natively on school hardware in Tiaong, remaining 100% operational during internet outages.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -197,93 +149,75 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Secondary Navigation Bar inside Window -->
|
||||
<div class="flex flex-wrap items-center justify-between border-b border-[#1f3627] bg-[#101e15] px-4 py-3 sm:px-6">
|
||||
<!-- Secondary Navigation Bar inside Window - Minimalist Clean Tabs -->
|
||||
<div class="flex flex-wrap items-center justify-between border-b border-[#1f3627] bg-[#101e15] px-4 py-2.5 sm:px-6">
|
||||
<div class="flex items-center gap-2 overflow-x-auto pb-1 sm:pb-0">
|
||||
<button
|
||||
type="button"
|
||||
data-hero-tab="sf10"
|
||||
class="hero-tab-btn flex items-center gap-2 rounded-xl bg-[#16a34a] px-3.5 py-1.5 text-xs font-semibold text-white shadow-md transition"
|
||||
class="hero-tab-btn rounded-xl bg-[#16a34a] px-3.5 py-1.5 text-xs font-semibold text-white shadow-sm transition"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<span>DepEd SF-10 Generator</span>
|
||||
SF-10 & SF-9 Records
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
data-hero-tab="students"
|
||||
class="hero-tab-btn flex items-center gap-2 rounded-xl bg-[#16271c] px-3.5 py-1.5 text-xs font-semibold text-slate-300 border border-[#23412f] hover:bg-[#1a3023] hover:text-white transition"
|
||||
class="hero-tab-btn rounded-xl bg-[#16271c] px-3.5 py-1.5 text-xs font-semibold text-slate-300 border border-[#23412f] hover:bg-[#1a3023] hover:text-white transition"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
<span>Student & LRN Directory</span>
|
||||
Student Directory
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
data-hero-tab="docs"
|
||||
class="hero-tab-btn flex items-center gap-2 rounded-xl bg-[#16271c] px-3.5 py-1.5 text-xs font-semibold text-slate-300 border border-[#23412f] hover:bg-[#1a3023] hover:text-white transition"
|
||||
class="hero-tab-btn rounded-xl bg-[#16271c] px-3.5 py-1.5 text-xs font-semibold text-slate-300 border border-[#23412f] hover:bg-[#1a3023] hover:text-white transition"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 19a2 2 0 01-2-2V7a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1M5 19h14a2 2 0 002-2v-5a2 2 0 00-2-2H9a2 2 0 00-2 2v5a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<span>Document Checklist (3/6 Docs)</span>
|
||||
Basic Info Registration
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
data-hero-tab="transparency"
|
||||
class="hero-tab-btn flex items-center gap-2 rounded-xl bg-[#16271c] px-3.5 py-1.5 text-xs font-semibold text-slate-300 border border-[#23412f] hover:bg-[#1a3023] hover:text-white transition"
|
||||
class="hero-tab-btn rounded-xl bg-[#16271c] px-3.5 py-1.5 text-xs font-semibold text-slate-300 border border-[#23412f] hover:bg-[#1a3023] hover:text-white transition"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||||
</svg>
|
||||
<span>DepEd Transparency Board</span>
|
||||
Archive Overview (2021+)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="hidden md:flex items-center gap-2 text-xs font-mono text-slate-400">
|
||||
<span class="inline-block h-2 w-2 rounded-full bg-[#22c55e] animate-ping"></span>
|
||||
<span>LAN IP: 192.168.1.100 (Online)</span>
|
||||
<span class="inline-block h-2 w-2 rounded-full bg-[#22c55e]"></span>
|
||||
<span>Campus LAN Server Online</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 1 Content: DepEd SF-10 Generator Preview -->
|
||||
<!-- Tab 1 Content: SF-10 / SF-9 Basic Information Register Preview -->
|
||||
<div id="hero-tab-content-sf10" class="hero-tab-content block p-5 sm:p-7">
|
||||
<div class="grid gap-6 lg:grid-cols-12 lg:items-center">
|
||||
|
||||
<div class="lg:col-span-5 space-y-4">
|
||||
<div class="inline-flex items-center gap-2 rounded-lg bg-amber-500/10 px-3 py-1 text-xs font-semibold text-amber-400 border border-amber-500/20">
|
||||
<span>Automated Excel Template</span>
|
||||
<span>Historical Document Ingestion (2021 Onwards)</span>
|
||||
</div>
|
||||
<h3 class="font-display text-xl font-bold text-white sm:text-2xl">
|
||||
DepEd School Form 10 (SF-10) in One Click
|
||||
Basic Student Info from SF-10 & SF-9
|
||||
</h3>
|
||||
<p class="text-xs sm:text-sm text-slate-300 leading-relaxed">
|
||||
Say goodbye to copying and pasting grades into spreadsheets manually. TIS RMS populates official DepEd templates (JHS and SHS v2026) directly from student database records with all mathematical formulas, general averages, and promotion remarks preserved.
|
||||
Using official SF-10 and SF-9 documents is the most efficient method to add and catalog student basic information from historical records dated 2021 onwards. The system manages student profiles and document archives without tracking subject grades.
|
||||
</p>
|
||||
|
||||
<div class="space-y-2 pt-1 text-xs text-slate-300">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="h-4 w-4 text-[#4ade80]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Junior High School Form 10 (Grades 7 to 10)</span>
|
||||
<span class="text-[#4ade80] font-bold">—</span>
|
||||
<span>Extracts 12-digit LRN, legal name, and birth records</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="h-4 w-4 text-[#4ade80]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Senior High School SF-10 v2026 (Academic & TVL Strands)</span>
|
||||
<span class="text-[#4ade80] font-bold">—</span>
|
||||
<span>Registers historical academic year placement (2021+)</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="h-4 w-4 text-[#4ade80]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Instant PDF print preview and Excel export</span>
|
||||
<span class="text-[#4ade80] font-bold">—</span>
|
||||
<span>Basic information registration only (no grade tracking)</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -292,23 +226,21 @@
|
||||
href="#school-forms"
|
||||
class="inline-flex items-center gap-2 text-xs font-semibold text-[#4ade80] hover:text-white transition"
|
||||
>
|
||||
<span>Explore SF-10 Engine Features</span>
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||
</svg>
|
||||
<span>Explore Form Integration Details</span>
|
||||
<span>→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Mock Interactive SF-10 Card -->
|
||||
<!-- Mock Interactive Basic Information Record Card (No Grades) -->
|
||||
<div class="lg:col-span-7 overflow-hidden rounded-2xl border border-[#23412f] bg-[#09110c] p-4 sm:p-5">
|
||||
<div class="flex items-center justify-between border-b border-[#1f3627] pb-3">
|
||||
<div>
|
||||
<span class="text-xs font-mono font-bold text-amber-400">REPUBLIC OF THE PHILIPPINES — DEPED</span>
|
||||
<div class="text-sm font-bold text-white">Learner's Permanent Academic Record (SF10-JHS)</div>
|
||||
<span class="text-xs font-mono font-bold text-amber-400">TALISAY INTEGRATED SCHOOL — ARCHIVES</span>
|
||||
<div class="text-sm font-bold text-white">Learner Basic Information Record</div>
|
||||
</div>
|
||||
<span class="rounded bg-[#16a34a]/20 px-2.5 py-1 text-[10px] font-mono text-[#4ade80] font-bold border border-[#16a34a]/30">
|
||||
ExcelJS Powered
|
||||
2021+ Document Register
|
||||
</span>
|
||||
</div>
|
||||
|
||||
@@ -323,74 +255,50 @@
|
||||
<span class="text-white font-bold">GARCIA, CRIS CHARLES</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-slate-500 block text-[10px]">GRADE & SECTION:</span>
|
||||
<span class="text-amber-400 font-bold">Grade 7 - Susan</span>
|
||||
<span class="text-slate-500 block text-[10px]">YEAR LEVEL:</span>
|
||||
<span class="text-amber-400 font-bold">Grade 7</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-slate-500 block text-[10px]">SCHOOL YEAR:</span>
|
||||
<span class="text-white font-bold">2026-2027</span>
|
||||
<span class="text-slate-500 block text-[10px]">ARCHIVE YEAR:</span>
|
||||
<span class="text-white font-bold">2021-2022</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Learning Areas Table -->
|
||||
<!-- Basic Student Info Extracted Fields Table (Not Grades) -->
|
||||
<div class="mt-3 overflow-x-auto">
|
||||
<table class="w-full text-left text-xs font-mono">
|
||||
<thead>
|
||||
<tr class="border-b border-[#1f3627] text-[11px] text-slate-400">
|
||||
<th class="py-1.5">Learning Areas</th>
|
||||
<th class="py-1.5 text-center">Q1</th>
|
||||
<th class="py-1.5 text-center">Q2</th>
|
||||
<th class="py-1.5 text-center">Q3</th>
|
||||
<th class="py-1.5 text-center">Q4</th>
|
||||
<th class="py-1.5 text-center text-emerald-400">Final</th>
|
||||
<th class="py-1.5 text-right">Remarks</th>
|
||||
<th class="py-1.5">Registered Field</th>
|
||||
<th class="py-1.5">Archived Document Value</th>
|
||||
<th class="py-1.5 text-right">Verification</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-[#1f3627]/50 text-[11px] text-slate-300">
|
||||
<tr>
|
||||
<td class="py-1.5 text-white">Filipino</td>
|
||||
<td class="text-center">88</td>
|
||||
<td class="text-center">89</td>
|
||||
<td class="text-center">90</td>
|
||||
<td class="text-center">91</td>
|
||||
<td class="text-center font-bold text-emerald-400">90</td>
|
||||
<td class="text-right text-[#4ade80]">Passed</td>
|
||||
<td class="py-1.5 text-white">Date of Birth</td>
|
||||
<td>April 14, 2009</td>
|
||||
<td class="text-right text-[#4ade80]">Verified (SF10)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-1.5 text-white">English</td>
|
||||
<td class="text-center">87</td>
|
||||
<td class="text-center">88</td>
|
||||
<td class="text-center">89</td>
|
||||
<td class="text-center">90</td>
|
||||
<td class="text-center font-bold text-emerald-400">89</td>
|
||||
<td class="text-right text-[#4ade80]">Passed</td>
|
||||
<td class="py-1.5 text-white">Sex</td>
|
||||
<td>Male</td>
|
||||
<td class="text-right text-[#4ade80]">Verified (SF10)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-1.5 text-white">Mathematics</td>
|
||||
<td class="text-center">91</td>
|
||||
<td class="text-center">92</td>
|
||||
<td class="text-center">92</td>
|
||||
<td class="text-center">93</td>
|
||||
<td class="text-center font-bold text-emerald-400">92</td>
|
||||
<td class="text-right text-[#4ade80]">Passed</td>
|
||||
<td class="py-1.5 text-white">Originating School</td>
|
||||
<td>Talisay Elementary School</td>
|
||||
<td class="text-right text-[#4ade80]">Historical Record</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-1.5 text-white">Science</td>
|
||||
<td class="text-center">86</td>
|
||||
<td class="text-center">87</td>
|
||||
<td class="text-center">88</td>
|
||||
<td class="text-center">89</td>
|
||||
<td class="text-center font-bold text-emerald-400">88</td>
|
||||
<td class="text-right text-[#4ade80]">Passed</td>
|
||||
<td class="py-1.5 text-white">Document Source</td>
|
||||
<td>SF-10 / SF-9 Document (2021 Onwards)</td>
|
||||
<td class="text-right text-amber-400">Cataloged</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-1.5 text-white">MAPEH</td>
|
||||
<td class="text-center">90</td>
|
||||
<td class="text-center">91</td>
|
||||
<td class="text-center">92</td>
|
||||
<td class="text-center">93</td>
|
||||
<td class="text-center font-bold text-emerald-400">92</td>
|
||||
<td class="text-right text-[#4ade80]">Passed</td>
|
||||
<td class="py-1.5 text-white">System Role</td>
|
||||
<td>Basic Student Info Only</td>
|
||||
<td class="text-right text-slate-400">No Grade Tracking</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -399,10 +307,10 @@
|
||||
<!-- Footer of Sheet Preview -->
|
||||
<div class="mt-3 flex items-center justify-between border-t border-[#1f3627] pt-3 text-xs font-mono">
|
||||
<div class="text-slate-400">
|
||||
General Average: <strong class="text-emerald-400 text-sm">90.20</strong> (PROMOTED)
|
||||
Registration Type: <strong class="text-emerald-400">Basic Info Only (Not Enrollment)</strong>
|
||||
</div>
|
||||
<span class="rounded bg-emerald-500/10 px-2 py-0.5 text-[10px] text-emerald-400">
|
||||
Ready for DepEd Division Verification
|
||||
Archived S.Y. 2021+
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -415,38 +323,38 @@
|
||||
<div class="grid gap-6 lg:grid-cols-12 lg:items-center">
|
||||
<div class="lg:col-span-5 space-y-4">
|
||||
<div class="inline-flex items-center gap-2 rounded-lg bg-emerald-500/10 px-3 py-1 text-xs font-semibold text-emerald-400 border border-emerald-500/20">
|
||||
<span>Teacher Advisory Roster</span>
|
||||
<span>Historical Student Directory</span>
|
||||
</div>
|
||||
<h3 class="font-display text-xl font-bold text-white sm:text-2xl">
|
||||
Instant Student Lookup by LRN or Name
|
||||
Student Lookup by LRN or Name
|
||||
</h3>
|
||||
<p class="text-xs sm:text-sm text-slate-300 leading-relaxed">
|
||||
Find any learner in Talisay Integrated School instantly. Check their 4Ps classification, enrollment status, section assignment (such as Grade 7 - Susan), and document completion bars with zero confusion.
|
||||
Find any archived learner record from 2021 onwards. Check their 4Ps classification, basic profile information, and registered SF-10 / SF-9 documents.
|
||||
</p>
|
||||
<div class="flex items-center gap-3 pt-2">
|
||||
<span class="rounded-lg bg-[#16a34a]/20 border border-[#16a34a]/40 px-3 py-1.5 text-xs font-mono text-[#4ade80]">
|
||||
+ Bulk Add Learners
|
||||
+ Register Student Info
|
||||
</span>
|
||||
<span class="rounded-lg bg-slate-800 border border-slate-700 px-3 py-1.5 text-xs font-mono text-slate-300">
|
||||
Print Section Roster
|
||||
Export Directory List
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-7 overflow-hidden rounded-2xl border border-[#23412f] bg-[#09110c] p-4">
|
||||
<div class="flex items-center justify-between border-b border-[#1f3627] pb-3">
|
||||
<span class="font-display text-sm font-bold text-white">Students Directory — Talisay Integrated School</span>
|
||||
<span class="font-display text-sm font-bold text-white">Student Records (2021 Onwards)</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="rounded-md bg-[#16a34a] px-2.5 py-1 text-xs font-semibold text-white">+ Add Student</span>
|
||||
<span class="rounded-md bg-[#16a34a] px-2.5 py-1 text-xs font-semibold text-white">+ Register Info</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Directory Table Row Snapshot matching students.webp -->
|
||||
<!-- Directory Table Row Snapshot -->
|
||||
<div class="mt-4 space-y-2.5">
|
||||
<div class="rounded-xl border border-[#254231] bg-[#112017] p-3.5 transition hover:border-[#16a34a]">
|
||||
<div class="rounded-xl border border-[#254231] bg-[#112017] p-3.5">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-[#16a34a]/20 text-[#4ade80] font-bold">
|
||||
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-[#16a34a]/20 text-[#4ade80] font-bold font-mono text-xs">
|
||||
G
|
||||
</div>
|
||||
<div>
|
||||
@@ -455,24 +363,24 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2.5 text-xs">
|
||||
<span class="rounded bg-[#1a3424] px-2 py-1 font-mono text-slate-300 text-[11px]">
|
||||
Grade 7 - Susan
|
||||
<div class="flex items-center gap-2 text-xs">
|
||||
<span class="rounded bg-[#1a3424] px-2 py-0.5 font-mono text-slate-300 text-[11px]">
|
||||
S.Y. 2021-2022
|
||||
</span>
|
||||
<span class="rounded bg-[#143d24] px-2.5 py-1 text-[11px] font-bold text-[#4ade80]">
|
||||
Enrolled
|
||||
<span class="rounded bg-[#143d24] px-2 py-0.5 text-[11px] font-semibold text-[#4ade80]">
|
||||
Registered (2021+)
|
||||
</span>
|
||||
<span class="rounded bg-amber-500/15 border border-amber-500/30 px-2 py-0.5 text-[11px] font-bold text-amber-400">
|
||||
3 / 6 Docs
|
||||
<span class="rounded bg-amber-500/15 border border-amber-500/30 px-2 py-0.5 text-[11px] font-semibold text-amber-400">
|
||||
SF-10 & SF-9 Record
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rounded-xl border border-[#254231] bg-[#112017] p-3.5 transition hover:border-[#16a34a]">
|
||||
<div class="rounded-xl border border-[#254231] bg-[#112017] p-3.5">
|
||||
<div class="flex flex-wrap items-center justify-between gap-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-9 w-9 items-center justify-center rounded-lg bg-blue-600/20 text-blue-400 font-bold">
|
||||
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600/20 text-blue-400 font-bold font-mono text-xs">
|
||||
M
|
||||
</div>
|
||||
<div>
|
||||
@@ -481,15 +389,15 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2.5 text-xs">
|
||||
<span class="rounded bg-[#1a3424] px-2 py-1 font-mono text-slate-300 text-[11px]">
|
||||
Grade 10 - Rizal
|
||||
<div class="flex items-center gap-2 text-xs">
|
||||
<span class="rounded bg-[#1a3424] px-2 py-0.5 font-mono text-slate-300 text-[11px]">
|
||||
S.Y. 2022-2023
|
||||
</span>
|
||||
<span class="rounded bg-[#143d24] px-2.5 py-1 text-[11px] font-bold text-[#4ade80]">
|
||||
Enrolled
|
||||
<span class="rounded bg-[#143d24] px-2 py-0.5 text-[11px] font-semibold text-[#4ade80]">
|
||||
Registered (2021+)
|
||||
</span>
|
||||
<span class="rounded bg-[#16a34a]/20 border border-[#16a34a]/30 px-2 py-0.5 text-[11px] font-bold text-[#4ade80]">
|
||||
6 / 6 Docs (Complete)
|
||||
<span class="rounded bg-[#16a34a]/20 border border-[#16a34a]/30 px-2 py-0.5 text-[11px] font-semibold text-[#4ade80]">
|
||||
SF-10 & SF-9 Record
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -499,100 +407,95 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 3 Content: Document Checklist Preview -->
|
||||
<!-- Tab 3 Content: Basic Info Registration via SF10 & SF9 (Not Enrollment) -->
|
||||
<div id="hero-tab-content-docs" class="hero-tab-content hidden p-5 sm:p-7">
|
||||
<div class="grid gap-6 lg:grid-cols-12 lg:items-center">
|
||||
<div class="lg:col-span-5 space-y-4">
|
||||
<div class="inline-flex items-center gap-2 rounded-lg bg-amber-500/10 px-3 py-1 text-xs font-semibold text-amber-400 border border-amber-500/20">
|
||||
<span>DepEd Enrollment Compliance</span>
|
||||
<span>Efficient Registration Method</span>
|
||||
</div>
|
||||
<h3 class="font-display text-xl font-bold text-white sm:text-2xl">
|
||||
Track Mandatory Documents per Learner
|
||||
Basic Info Registration via SF10 & SF9
|
||||
</h3>
|
||||
<p class="text-xs sm:text-sm text-slate-300 leading-relaxed">
|
||||
Teachers can see at a glance which requirements are missing before graduation or section promotion. Digital folders store scanned PSA birth certificates, Form 137s, Form 138 report cards, and certificates with PDF preview.
|
||||
SF10 and SF9 documents provide the most efficient method to capture and register student basic information into the system.
|
||||
</p>
|
||||
<div class="rounded-xl border border-amber-500/25 bg-amber-500/10 p-3 text-xs text-amber-300 leading-relaxed">
|
||||
<strong class="text-amber-200">Important Note:</strong> This is <strong>not an enrollment system</strong>. TIS RMS is built strictly for the management and basic registration of student information from old documents dated <strong>2021 onwards</strong>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-7 overflow-hidden rounded-2xl border border-[#23412f] bg-[#09110c] p-4">
|
||||
<div class="flex items-center justify-between border-b border-[#1f3627] pb-3 text-xs font-mono">
|
||||
<span class="text-white font-bold">GARCIA_CRIS CHARLES_108297100170</span>
|
||||
<span class="text-amber-400 font-bold">3 of 6 Completed (50%)</span>
|
||||
<span class="text-white font-bold">SF10 & SF9 Registration Framework</span>
|
||||
<span class="text-emerald-400 font-semibold">2021 Onwards Focus</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2 text-xs">
|
||||
<div class="flex items-center justify-between rounded-xl bg-[#112017] p-3 border border-[#1f3627]">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-emerald-400">✓</span>
|
||||
<span class="text-white">PSA Birth Certificate</span>
|
||||
<div class="mt-3 space-y-2.5 text-xs">
|
||||
<div class="rounded-xl bg-[#112017] p-3.5 border border-[#1f3627]">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="font-bold text-white">School Form 10 (SF-10)</div>
|
||||
<span class="text-[10px] text-emerald-400 font-mono bg-[#16a34a]/20 px-2 py-0.5 rounded">Primary Info Source</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-emerald-400 font-bold bg-[#16a34a]/20 px-2 py-0.5 rounded">Verified</span>
|
||||
<p class="mt-1 text-[11px] text-slate-300">
|
||||
Captures LRN, full legal name, date of birth, sex, previous school origin, and academic year history from archived files.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between rounded-xl bg-[#112017] p-3 border border-[#1f3627]">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-emerald-400">✓</span>
|
||||
<span class="text-white">Form 137 (SF-10)</span>
|
||||
<div class="rounded-xl bg-[#112017] p-3.5 border border-[#1f3627]">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="font-bold text-white">School Form 9 (SF-9)</div>
|
||||
<span class="text-[10px] text-amber-400 font-mono bg-amber-500/20 px-2 py-0.5 rounded">Supporting Document</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-emerald-400 font-bold bg-[#16a34a]/20 px-2 py-0.5 rounded">Verified</span>
|
||||
<p class="mt-1 text-[11px] text-slate-300">
|
||||
Cross-references student basic identifiers and school year records from historical files (2021 onwards).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between rounded-xl bg-[#112017] p-3 border border-[#1f3627]">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-emerald-400">✓</span>
|
||||
<span class="text-white">SF-9 (Report Card)</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-emerald-400 font-bold bg-[#16a34a]/20 px-2 py-0.5 rounded">Verified</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between rounded-xl bg-[#181a17] p-3 border border-amber-500/30">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-amber-400 font-bold">!</span>
|
||||
<span class="text-slate-300">Certificate of Good Moral</span>
|
||||
</div>
|
||||
<span class="text-[10px] text-amber-400 font-bold bg-amber-500/20 px-2 py-0.5 rounded">Pending</span>
|
||||
<div class="rounded-xl bg-[#0e1913] p-3 border border-[#1f3627] text-[11px] text-slate-400 font-mono">
|
||||
Scope: Basic registration of basic information only. No grade tracking or enrollment processing.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab 4 Content: DepEd Transparency Board Preview -->
|
||||
<!-- Tab 4 Content: Historical Archive Summary Preview (2021 Onwards) -->
|
||||
<div id="hero-tab-content-transparency" class="hero-tab-content hidden p-5 sm:p-7">
|
||||
<div class="grid gap-6 lg:grid-cols-12 lg:items-center">
|
||||
<div class="lg:col-span-5 space-y-4">
|
||||
<div class="inline-flex items-center gap-2 rounded-lg bg-[#16a34a]/15 px-3 py-1 text-xs font-semibold text-[#4ade80] border border-[#16a34a]/30">
|
||||
<span>DepEd Transparency Board</span>
|
||||
<span>Archival Overview (2021+)</span>
|
||||
</div>
|
||||
<h3 class="font-display text-xl font-bold text-white sm:text-2xl">
|
||||
School Performance & Enrollment Trends
|
||||
Historical Records Management
|
||||
</h3>
|
||||
<p class="text-xs sm:text-sm text-slate-300 leading-relaxed">
|
||||
Track student enrollment, dropouts, transferees, and 4Ps learners across consecutive school years in Talisay Integrated School. Export clean audit summaries directly for DepEd Division inspection.
|
||||
Track and catalog student records from old documents dated 2021 onwards. Monitor registered learner profiles, 4Ps classifications, and digitized archives safely on your local campus server.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="lg:col-span-7 overflow-hidden rounded-2xl border border-[#23412f] bg-[#09110c] p-4 text-xs">
|
||||
<div class="flex items-center justify-between border-b border-[#1f3627] pb-3">
|
||||
<span class="font-display font-bold text-white">Enrollment by Grade Level (Talisay Integrated School)</span>
|
||||
<span class="rounded bg-rose-600 px-2.5 py-1 text-[10px] font-bold text-white">Export DepEd PDF</span>
|
||||
<span class="font-display font-bold text-white">Archived Records Register (2021 Onwards)</span>
|
||||
<span class="rounded bg-[#16a34a] px-2.5 py-1 text-[10px] font-semibold text-white">Export Summary</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 grid grid-cols-3 gap-3 text-center">
|
||||
<div class="rounded-xl bg-[#112017] p-3 border border-[#1f3627]">
|
||||
<div class="text-[11px] text-slate-400">Total Enrolled</div>
|
||||
<div class="text-[11px] text-slate-400">Archived Documents</div>
|
||||
<div class="text-xl font-bold text-white mt-1">1,248</div>
|
||||
<div class="text-[10px] text-[#4ade80] mt-0.5">S.Y. 2026-2027</div>
|
||||
<div class="text-[10px] text-[#4ade80] mt-0.5">2021 to Present</div>
|
||||
</div>
|
||||
<div class="rounded-xl bg-[#112017] p-3 border border-[#1f3627]">
|
||||
<div class="text-[11px] text-slate-400">4Ps Beneficiaries</div>
|
||||
<div class="text-[11px] text-slate-400">4Ps Learners</div>
|
||||
<div class="text-xl font-bold text-amber-400 mt-1">342</div>
|
||||
<div class="text-[10px] text-slate-400 mt-0.5">Active Learners</div>
|
||||
<div class="text-[10px] text-slate-400 mt-0.5">Classified Records</div>
|
||||
</div>
|
||||
<div class="rounded-xl bg-[#112017] p-3 border border-[#1f3627]">
|
||||
<div class="text-[11px] text-slate-400">Digitized Folders</div>
|
||||
<div class="text-xl font-bold text-[#4ade80] mt-1">98.4%</div>
|
||||
<div class="text-[10px] text-slate-400 mt-0.5">Complete Records</div>
|
||||
<div class="text-[11px] text-slate-400">SF10 / SF9 Verified</div>
|
||||
<div class="text-xl font-bold text-[#4ade80] mt-1">1,180</div>
|
||||
<div class="text-[10px] text-slate-400 mt-0.5">Basic Info Registered</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -37,9 +37,9 @@
|
||||
<!-- 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="#hero-features" class="transition hover:text-[#4ade80]">Top Features</a>
|
||||
<a href="#school-forms" class="transition hover:text-[#4ade80]">DepEd SF-10</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>
|
||||
@@ -50,21 +50,15 @@
|
||||
href="https://github.com/ssbg04/TIS_RMS"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="hidden items-center gap-2 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"
|
||||
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"
|
||||
>
|
||||
<svg class="h-4 w-4 text-[#4ade80]" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" />
|
||||
</svg>
|
||||
GitHub
|
||||
</a>
|
||||
|
||||
<a
|
||||
href="#downloads"
|
||||
class="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-[#16a34a] to-[#15803d] px-4 py-2 text-xs font-semibold text-white shadow-lg shadow-[#16a34a]/25 transition hover:from-[#15803d] hover:to-[#0f5c2b]"
|
||||
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]"
|
||||
>
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
|
||||
</svg>
|
||||
<span>Install App</span>
|
||||
</a>
|
||||
|
||||
@@ -86,9 +80,9 @@
|
||||
<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="#hero-features" class="py-1.5 transition hover:text-[#4ade80]">Top Features</a>
|
||||
<a href="#school-forms" class="py-1.5 transition hover:text-[#4ade80]">DepEd SF-10</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>
|
||||
|
||||
@@ -3,43 +3,38 @@
|
||||
const pipelineSteps = [
|
||||
{
|
||||
step: "01",
|
||||
title: "Document Ingestion & Capture",
|
||||
description: "Scan paper documents via Android MLKit Scanner or drag-and-drop PDFs/Images directly into the desktop client.",
|
||||
title: "Document Ingestion",
|
||||
description: "Scan historical physical documents (2021 onwards) via Android scanner or drag-and-drop PDFs into the desktop client.",
|
||||
tag: "Input Layer",
|
||||
tech: "MLKit / Desktop Upload",
|
||||
icon: "M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12",
|
||||
tech: "MLKit / Desktop Ingest",
|
||||
},
|
||||
{
|
||||
step: "02",
|
||||
title: "Ghostscript Rasterization",
|
||||
description: "Multi-page PDFs are rasterized into high-resolution image matrices to maximize character recognition precision.",
|
||||
description: "Multi-page historical PDFs are rasterized into high-resolution image matrices to maximize recognition precision.",
|
||||
tag: "Preprocessing",
|
||||
tech: "Ghostscript Engine",
|
||||
icon: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z",
|
||||
},
|
||||
{
|
||||
step: "03",
|
||||
title: "Tesseract OCR Extraction",
|
||||
description: "Locally bundled Tesseract OCR analyzes character glyphs, line coordinates, and key educational fields.",
|
||||
description: "Locally bundled Tesseract OCR extracts text lines, identifying key learner biodata and archival fields.",
|
||||
tag: "OCR Processing",
|
||||
tech: "Tesseract Engine",
|
||||
icon: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z",
|
||||
},
|
||||
{
|
||||
step: "04",
|
||||
title: "Normalization & SQLite Record",
|
||||
description: "Extracted strings (LRN, Student Name, Birth Date, Grades) are parsed and committed into the `better-sqlite3` database.",
|
||||
title: "Basic Info Normalization",
|
||||
description: "Extracted basic fields (LRN, Full Name, Birth Date, Gender, Origin) are parsed and committed into the SQLite database.",
|
||||
tag: "Structured Data",
|
||||
tech: "SQLite & Parser",
|
||||
icon: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4",
|
||||
},
|
||||
{
|
||||
step: "05",
|
||||
title: "School Form 10 Export",
|
||||
description: "Structured student records populate DepEd School Form 10 (SF-10 JHS/SHS) templates with zero manual typing.",
|
||||
title: "SF-10 & SF-9 Integration",
|
||||
description: "Structured learner records populate DepEd SF-10 templates for basic student registration with zero manual typing.",
|
||||
tag: "Report Output",
|
||||
tech: "ExcelJS Engine",
|
||||
icon: "M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z",
|
||||
},
|
||||
];
|
||||
---
|
||||
@@ -51,38 +46,32 @@ const pipelineSteps = [
|
||||
<div class="mx-auto max-w-3xl text-center">
|
||||
<div class="inline-flex items-center gap-2 rounded-full border border-[#2a4c37] bg-[#112017] px-4 py-1 text-xs font-semibold text-[#4ade80]">
|
||||
<img src="/tis_logo.png" alt="TIS Logo" class="h-3.5 w-3.5 object-contain" />
|
||||
<span>Automated Data Extraction</span>
|
||||
<span>Document Digitization</span>
|
||||
</div>
|
||||
<h2 class="mt-4 font-display text-3xl font-extrabold tracking-tight text-white sm:text-5xl">
|
||||
How the OCR Document Pipeline Works
|
||||
</h2>
|
||||
<p class="mt-4 text-base text-slate-300 sm:text-lg">
|
||||
Transform physical transcript scans, report cards, and enrollment forms into indexed, structured digital database records.
|
||||
Transform physical documents and scanned records from 2021 onwards into indexed, structured digital profiles.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Pipeline Step Grid -->
|
||||
<!-- Pipeline Step Grid - Minimalist Design Without Icon Redundancy -->
|
||||
<div class="mt-16 grid gap-6 md:grid-cols-3 lg:grid-cols-5">
|
||||
{pipelineSteps.map((step) => (
|
||||
<div class="group relative flex flex-col justify-between rounded-2xl border border-[#233e2e] bg-[#112017]/90 p-6 shadow-sm transition-all duration-300 hover:-translate-y-1 hover:border-[#16a34a] hover:bg-[#15271d] hover:shadow-xl">
|
||||
<div class="group relative flex flex-col justify-between rounded-2xl border border-[#233e2e] bg-[#112017]/90 p-6 transition hover:border-[#16a34a] hover:bg-[#15271d]">
|
||||
|
||||
<div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="font-display text-2xl font-black text-[#16a34a]/40 group-hover:text-[#4ade80]">
|
||||
<span class="font-mono text-xl font-bold text-[#4ade80]">
|
||||
{step.step}
|
||||
</span>
|
||||
<span class="rounded-md bg-black/30 border border-[#233e2e] px-2 py-0.5 text-[10px] font-bold text-amber-400">
|
||||
<span class="rounded bg-black/30 border border-[#233e2e] px-2 py-0.5 text-[10px] font-mono text-amber-400">
|
||||
{step.tag}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 flex h-10 w-10 items-center justify-center rounded-xl bg-[#16a34a]/15 text-[#4ade80] transition-colors group-hover:bg-[#16a34a] group-hover:text-white">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d={step.icon} />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<h3 class="mt-4 font-display text-base font-bold text-white group-hover:text-[#a7f3d0] transition-colors">
|
||||
<h3 class="mt-4 font-display text-sm font-bold text-white group-hover:text-[#a7f3d0] transition-colors">
|
||||
{step.title}
|
||||
</h3>
|
||||
|
||||
@@ -92,8 +81,7 @@ const pipelineSteps = [
|
||||
</div>
|
||||
|
||||
<div class="mt-6 border-t border-[#1f3627] pt-3">
|
||||
<div class="flex items-center gap-1.5 text-[11px] font-mono text-emerald-400">
|
||||
<span class="h-1.5 w-1.5 rounded-full bg-[#16a34a]"></span>
|
||||
<div class="text-[11px] font-mono text-emerald-400">
|
||||
{step.tech}
|
||||
</div>
|
||||
</div>
|
||||
@@ -102,31 +90,28 @@ const pipelineSteps = [
|
||||
))}
|
||||
</div>
|
||||
|
||||
<!-- OCR Demo Simulation Banner -->
|
||||
<div class="mt-12 overflow-hidden rounded-2xl border border-[#23412f] bg-[#0c1610] p-6 sm:p-8 text-white shadow-2xl">
|
||||
<!-- OCR Archival Benchmark Banner -->
|
||||
<div class="mt-12 overflow-hidden rounded-2xl border border-[#23412f] bg-[#0c1610] p-6 sm:p-8 text-white shadow-xl">
|
||||
<div class="flex flex-col lg:flex-row lg:items-center justify-between gap-6">
|
||||
|
||||
<div class="max-w-2xl">
|
||||
<div class="inline-flex items-center gap-2 rounded-md bg-amber-500/20 px-2.5 py-1 text-xs font-mono font-semibold text-amber-300 border border-amber-500/30">
|
||||
<span>⚡ Automated Extraction Benchmark</span>
|
||||
<div class="inline-flex items-center gap-2 rounded-md bg-amber-500/15 px-2.5 py-1 text-xs font-mono font-semibold text-amber-300 border border-amber-500/30">
|
||||
<span>Automated Archival Benchmark</span>
|
||||
</div>
|
||||
<h3 class="mt-3 font-display text-2xl font-bold text-white">
|
||||
Convert 100+ scanned student transcripts in minutes.
|
||||
Digitize 100+ historical student files in minutes.
|
||||
</h3>
|
||||
<p class="mt-2 text-sm text-slate-300">
|
||||
Eliminate manual entry bottlenecks during enrollment and graduation seasons. TIS RMS processes multi-page PDFs using local Ghostscript and Tesseract OCR thread pools directly on your local campus server in Talisay.
|
||||
Eliminate manual transcription bottlenecks when organizing student files from 2021 onwards. TIS RMS processes multi-page PDFs using local Ghostscript and Tesseract OCR thread pools directly on your local campus server.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="shrink-0">
|
||||
<a
|
||||
href="#downloads"
|
||||
class="inline-flex items-center gap-2 rounded-xl bg-gradient-to-r from-[#16a34a] to-[#15803d] px-5 py-3 text-xs font-semibold text-white shadow-lg shadow-[#16a34a]/30 hover:from-[#15803d] hover:to-[#0f5c2b]"
|
||||
class="inline-flex items-center rounded-xl bg-[#16a34a] px-5 py-3 text-xs font-semibold text-white shadow-md shadow-[#16a34a]/20 hover:bg-[#15803d]"
|
||||
>
|
||||
<span>Try OCR Ingestion</span>
|
||||
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
||||
</svg>
|
||||
Get OCR Scanner App
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,29 +1,33 @@
|
||||
---
|
||||
// SchoolForms component - DepEd SF-10 Automation for Talisay Integrated School
|
||||
// SchoolForms component - DepEd SF-10 & SF-9 Integration for Talisay Integrated School
|
||||
const schoolFormFeatures = [
|
||||
{
|
||||
num: "01",
|
||||
title: "DepEd SF-10 JHS Template",
|
||||
filename: "School-Form-10-JHS.xlsx",
|
||||
desc: "Pre-configured Excel template for Junior High School learner records, subject grades, general averages, and promotion status.",
|
||||
badge: "JHS Approved",
|
||||
desc: "Official Excel template for Junior High School basic learner profiles, LRN identification, and historical school origin (2021 onwards).",
|
||||
badge: "JHS Template",
|
||||
},
|
||||
{
|
||||
num: "02",
|
||||
title: "DepEd SF-10 SHS Template (v2026)",
|
||||
filename: "SSHS-SF-10-v2026_corrected.xlsx",
|
||||
desc: "Official Senior High School template supporting academic tracks, strands, semester subjects, unit credits, and TVL specializations.",
|
||||
badge: "SHS v2026 Corrected",
|
||||
desc: "Official Senior High School template for student basic biographical info, track classification, and historical records.",
|
||||
badge: "SHS v2026 Ready",
|
||||
},
|
||||
{
|
||||
num: "03",
|
||||
title: "ExcelJS Automated Population",
|
||||
filename: "Backend Excel Engine",
|
||||
desc: "Populates cell formatting, formulas, borders, and student metadata programmatically without requiring Microsoft Office installed on the server.",
|
||||
badge: "ExcelJS Driven",
|
||||
desc: "Populates official DepEd cell headers, borders, and student metadata programmatically without requiring Microsoft Office on the server.",
|
||||
badge: "ExcelJS Engine",
|
||||
},
|
||||
{
|
||||
title: "Batch Export & Instant Print",
|
||||
filename: "PDF & XLSX Out",
|
||||
desc: "Generate form suites for entire sections or graduating batches in seconds with built-in Flutter PDF preview and direct printing support.",
|
||||
badge: "Batch Generation",
|
||||
num: "04",
|
||||
title: "SF-10 & SF-9 Efficient Registration",
|
||||
filename: "Basic Info Ingestion",
|
||||
desc: "The fastest method to capture basic student info into the local database from old documents (2021 onwards). Not enrollment, basic registration only.",
|
||||
badge: "Efficient Method",
|
||||
},
|
||||
];
|
||||
---
|
||||
@@ -37,52 +41,50 @@ const schoolFormFeatures = [
|
||||
<div class="lg:col-span-6">
|
||||
<div class="inline-flex items-center gap-2 rounded-full border border-amber-500/30 bg-amber-500/10 px-3.5 py-1 text-xs font-semibold text-amber-400">
|
||||
<img src="/tis_logo.png" alt="TIS" class="h-3.5 w-3.5 object-contain" />
|
||||
<span>DepEd Official Compliance</span>
|
||||
<span>Historical Records Management (2021+)</span>
|
||||
</div>
|
||||
|
||||
<h2 class="mt-4 font-display text-3xl font-extrabold tracking-tight text-white sm:text-5xl leading-tight">
|
||||
Automated DepEd School Form 10 (SF-10) Generation.
|
||||
Basic Student Registration via SF-10 & SF-9.
|
||||
</h2>
|
||||
|
||||
<p class="mt-4 text-base text-slate-300 sm:text-lg leading-relaxed">
|
||||
TIS RMS bridges student database records directly with official Philippine Department of Education Excel forms. Export fully populated <strong>SF-10 JHS</strong> and <strong>SF-10 SHS</strong> permanent records with mathematical formulas and promotional remarks intact.
|
||||
TIS RMS utilizes <strong>SF-10 and SF-9 documents</strong> as the most efficient method to add and catalog student basic information from old documents dated <strong>2021 onwards</strong>. Please note: this is <strong>not an enrollment system</strong>, but a streamlined system for basic registration of basic information with zero grade tracking.
|
||||
</p>
|
||||
|
||||
<!-- Feature List Cards -->
|
||||
<div class="mt-8 space-y-4">
|
||||
<!-- Feature List Cards - Minimalist Numbered Design -->
|
||||
<div class="mt-8 space-y-3.5">
|
||||
{schoolFormFeatures.map((item) => (
|
||||
<div class="flex items-start gap-4 rounded-xl border border-[#233e2e] bg-[#112017]/80 p-4 transition hover:border-[#16a34a] hover:bg-[#15271d]">
|
||||
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[#16a34a]/15 text-[#4ade80] font-bold border border-[#16a34a]/30">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 17v-2m3 2v-4m3 4v-6m2 10H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
</svg>
|
||||
<div class="flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-[#16a34a]/20 text-[#4ade80] font-mono text-xs font-bold border border-[#16a34a]/30">
|
||||
{item.num}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="flex items-center gap-2">
|
||||
<h3 class="font-display text-sm font-bold text-white">{item.title}</h3>
|
||||
<span class="rounded-md bg-amber-500/15 border border-amber-500/30 px-2 py-0.5 text-[10px] font-bold text-amber-300">
|
||||
<span class="rounded bg-black/30 border border-[#23412f] px-2 py-0.5 text-[10px] font-mono text-amber-300">
|
||||
{item.badge}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-[11px] font-mono text-emerald-400 mt-0.5">{item.filename}</div>
|
||||
<p class="mt-1.5 text-xs text-slate-300 leading-relaxed">{item.desc}</p>
|
||||
<p class="mt-1 text-xs text-slate-300 leading-relaxed">{item.desc}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Column: Interactive Card Preview of SF-10 Sheet Structure -->
|
||||
<!-- Right Column: Card Preview of Basic Info Ingestion Structure (No Grades) -->
|
||||
<div class="lg:col-span-6">
|
||||
<div class="overflow-hidden rounded-2xl border border-[#23412f] bg-[#0c1610] text-white shadow-2xl">
|
||||
|
||||
<!-- Mock Excel Window Header with Authentic Green Bar -->
|
||||
<!-- Mock Window Header -->
|
||||
<div class="flex items-center justify-between border-b border-[#1f3627] bg-[#15803d] px-4 py-2.5">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="h-3 w-3 rounded-full bg-rose-500"></span>
|
||||
<span class="h-3 w-3 rounded-full bg-amber-500"></span>
|
||||
<span class="h-3 w-3 rounded-full bg-emerald-300"></span>
|
||||
<span class="h-2.5 w-2.5 rounded-full bg-white/40"></span>
|
||||
<span class="h-2.5 w-2.5 rounded-full bg-white/40"></span>
|
||||
<span class="h-2.5 w-2.5 rounded-full bg-white/40"></span>
|
||||
</div>
|
||||
<div class="text-xs font-mono text-white font-semibold">
|
||||
SSHS-SF-10-v2026_corrected.xlsx
|
||||
@@ -98,7 +100,7 @@ const schoolFormFeatures = [
|
||||
<!-- Learner Information Block -->
|
||||
<div class="rounded-xl border border-[#23412f] bg-[#112017] p-4">
|
||||
<div class="text-xs font-mono font-bold uppercase tracking-wider text-[#4ade80]">
|
||||
1. Learner Information Section
|
||||
1. Learner Basic Information Section
|
||||
</div>
|
||||
<div class="mt-3 grid grid-cols-2 gap-2.5 text-xs">
|
||||
<div class="rounded-lg bg-[#09110c] p-2.5 border border-[#1f3627]">
|
||||
@@ -110,23 +112,23 @@ const schoolFormFeatures = [
|
||||
<div class="font-bold text-white mt-0.5">GARCIA, CRIS CHARLES</div>
|
||||
</div>
|
||||
<div class="rounded-lg bg-[#09110c] p-2.5 border border-[#1f3627]">
|
||||
<div class="text-[10px] text-slate-400">Track & Strand / Section</div>
|
||||
<div class="font-bold text-amber-400 mt-0.5">Grade 7 - Susan</div>
|
||||
<div class="text-[10px] text-slate-400">Historical Year Level</div>
|
||||
<div class="font-bold text-amber-400 mt-0.5">Grade 7</div>
|
||||
</div>
|
||||
<div class="rounded-lg bg-[#09110c] p-2.5 border border-[#1f3627]">
|
||||
<div class="text-[10px] text-slate-400">School Name & Location</div>
|
||||
<div class="text-[10px] text-slate-400">School Origin & Location</div>
|
||||
<div class="font-bold text-white mt-0.5">Talisay Integrated School (Tiaong)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scholastic Record Block -->
|
||||
<!-- Historical Document Ingestion Block (No Grades) -->
|
||||
<div class="rounded-xl border border-[#23412f] bg-[#112017] p-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="text-xs font-mono font-bold uppercase tracking-wider text-amber-400">
|
||||
2. Scholastic Record & Ratings
|
||||
2. Archived Document Register (2021+)
|
||||
</div>
|
||||
<span class="text-[11px] font-mono text-emerald-400">Junior High School Form 10</span>
|
||||
<span class="text-[11px] font-mono text-emerald-400">SF-10 & SF-9 Records</span>
|
||||
</div>
|
||||
|
||||
<!-- Mini Table -->
|
||||
@@ -134,34 +136,31 @@ const schoolFormFeatures = [
|
||||
<table class="w-full text-left text-xs font-mono">
|
||||
<thead>
|
||||
<tr class="border-b border-[#1f3627] text-slate-400 text-[10px]">
|
||||
<th class="pb-1.5 font-semibold">Subject Title</th>
|
||||
<th class="pb-1.5 font-semibold text-center">Q1</th>
|
||||
<th class="pb-1.5 font-semibold text-center">Q2</th>
|
||||
<th class="pb-1.5 font-semibold text-center">Final</th>
|
||||
<th class="pb-1.5 font-semibold text-right">Remarks</th>
|
||||
<th class="pb-1.5 font-semibold">Registered Data Field</th>
|
||||
<th class="pb-1.5 font-semibold">Extracted Value</th>
|
||||
<th class="pb-1.5 font-semibold text-right">Source Document</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-[#1f3627]/60 text-slate-300">
|
||||
<tr>
|
||||
<td class="py-1.5 font-semibold text-white">General Mathematics</td>
|
||||
<td class="text-center">92</td>
|
||||
<td class="text-center">94</td>
|
||||
<td class="text-center font-bold text-emerald-400">93</td>
|
||||
<td class="text-right text-[#4ade80] font-bold">PASSED</td>
|
||||
<td class="py-1.5 font-semibold text-white">Learner Reference Number</td>
|
||||
<td class="font-bold text-emerald-400">108297100170</td>
|
||||
<td class="text-right text-[#4ade80]">SF-10 Archive</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-1.5 font-semibold text-white">Earth and Life Science</td>
|
||||
<td class="text-center">88</td>
|
||||
<td class="text-center">90</td>
|
||||
<td class="text-center font-bold text-emerald-400">89</td>
|
||||
<td class="text-right text-[#4ade80] font-bold">PASSED</td>
|
||||
<td class="py-1.5 font-semibold text-white">Date of Birth & Sex</td>
|
||||
<td>2009-04-14 / Male</td>
|
||||
<td class="text-right text-[#4ade80]">SF-10 Archive</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-1.5 font-semibold text-white">Oral Communication</td>
|
||||
<td class="text-center">95</td>
|
||||
<td class="text-center">96</td>
|
||||
<td class="text-center font-bold text-emerald-400">96</td>
|
||||
<td class="text-right text-[#4ade80] font-bold">PASSED</td>
|
||||
<td class="py-1.5 font-semibold text-white">Originating School</td>
|
||||
<td>Talisay Elementary School</td>
|
||||
<td class="text-right text-[#4ade80]">SF-9 Archive</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="py-1.5 font-semibold text-white">Document Scope</td>
|
||||
<td>Archived File (2021 Onwards)</td>
|
||||
<td class="text-right text-amber-400">Cataloged</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -169,14 +168,13 @@ const schoolFormFeatures = [
|
||||
</div>
|
||||
|
||||
<!-- Output Action Callout -->
|
||||
<div class="flex items-center justify-between rounded-xl bg-[#16a34a]/20 border border-[#16a34a]/40 p-3.5 text-xs text-white">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="h-4 w-4 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
||||
</svg>
|
||||
<span>Automated Formula Calculation (General Average: <strong class="text-emerald-300">92.67</strong>)</span>
|
||||
<div class="flex items-center justify-between rounded-xl bg-[#112017] border border-[#23412f] p-3 text-xs text-white">
|
||||
<div class="text-slate-300">
|
||||
Scope: <strong class="text-emerald-400">Basic Registration Only</strong> (No Grade Tracking)
|
||||
</div>
|
||||
<span class="rounded bg-[#16a34a] px-2.5 py-1 font-mono font-bold text-white shadow">Export XLSX</span>
|
||||
<span class="rounded bg-[#16a34a] px-2.5 py-1 font-mono text-xs font-semibold text-white">
|
||||
Export Record (.xlsx)
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,7 @@ const frontendTech = [
|
||||
{ name: "Dio", role: "HTTP Client", desc: "Campus LAN networking" },
|
||||
{ name: "Syncfusion PDF", role: "PDF Viewer", desc: "Student record rendering" },
|
||||
{ name: "MLKit Scanner", role: "Mobile Scanner", desc: "Camera document capture" },
|
||||
{ name: "fl_chart", role: "Data Visualization", desc: "Dashboard enrollment charts" },
|
||||
{ name: "fl_chart", role: "Data Visualization", desc: "Archival record statistics" },
|
||||
{ name: "Inno Setup", role: "Windows Installer", desc: "Desktop packaging" },
|
||||
];
|
||||
|
||||
@@ -17,7 +17,7 @@ const backendTech = [
|
||||
{ name: "SQLite", role: "Database", desc: "Local `tis_rms.db` file" },
|
||||
{ name: "better-sqlite3", role: "DB Driver", desc: "High speed synchronous query" },
|
||||
{ name: "Role-Based JWT", role: "Access Control", desc: "Teacher & Adviser permissions" },
|
||||
{ name: "ExcelJS", role: "Spreadsheet Engine", desc: "DepEd SF-10 population" },
|
||||
{ name: "ExcelJS", role: "Spreadsheet Engine", desc: "SF-10 template integration" },
|
||||
{ name: "Tesseract OCR", role: "OCR Extraction", desc: "Text recognition engine" },
|
||||
{ name: "NSSM", role: "Windows Service", desc: "Background service daemon" },
|
||||
];
|
||||
@@ -46,16 +46,9 @@ const backendTech = [
|
||||
<!-- Frontend Column -->
|
||||
<div class="rounded-3xl border border-[#233e2e] bg-[#112017]/90 p-6 sm:p-8">
|
||||
<div class="flex items-center justify-between border-b border-[#1f3627] pb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-blue-600 text-white font-bold">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-display text-lg font-bold text-white">Frontend Stack</h3>
|
||||
<p class="text-xs text-slate-400">Flutter Windows & Android Client</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-display text-lg font-bold text-white">Frontend Stack</h3>
|
||||
<p class="text-xs text-slate-400">Flutter Windows & Android Client</p>
|
||||
</div>
|
||||
<span class="rounded-lg bg-blue-500/15 border border-blue-500/30 px-2.5 py-1 text-xs font-mono font-bold text-blue-400">
|
||||
Dart ^3.11.5
|
||||
@@ -78,16 +71,9 @@ const backendTech = [
|
||||
<!-- Backend Column -->
|
||||
<div class="rounded-3xl border border-[#233e2e] bg-[#112017]/90 p-6 sm:p-8">
|
||||
<div class="flex items-center justify-between border-b border-[#1f3627] pb-4">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="flex h-10 w-10 items-center justify-center rounded-xl bg-[#16a34a] text-white font-bold">
|
||||
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" />
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-display text-lg font-bold text-white">Backend & Server</h3>
|
||||
<p class="text-xs text-slate-400">Node.js Express Local REST API</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="font-display text-lg font-bold text-white">Backend & Server</h3>
|
||||
<p class="text-xs text-slate-400">Node.js Express Local REST API</p>
|
||||
</div>
|
||||
<span class="rounded-lg bg-[#16a34a]/15 border border-[#16a34a]/30 px-2.5 py-1 text-xs font-mono font-bold text-[#4ade80]">
|
||||
Node + SQLite
|
||||
|
||||
@@ -7,8 +7,8 @@ interface Props {
|
||||
}
|
||||
|
||||
const {
|
||||
title = "TIS_RMS — Talisay Integrated School Record Management System | Tiaong, Quezon",
|
||||
description = "Official Record Management System for Talisay Integrated School in Tiaong, Quezon, Philippines. Designed for teachers with automated DepEd SF-10 generation, student LRN lookup, document completion tracking, and offline campus LAN resilience.",
|
||||
title = "TIS RMS — Student Records Management System (2021 Onwards) | Talisay Integrated School",
|
||||
description = "Records management system for Talisay Integrated School in Tiaong, Quezon. Dedicated to managing and digitizing historical learner records from old documents 2021 onwards using SF10 and SF9 for efficient basic information registration.",
|
||||
} = Astro.props;
|
||||
---
|
||||
|
||||
|
||||
@@ -74,21 +74,20 @@ code, pre, .font-mono {
|
||||
}
|
||||
|
||||
.glow-emerald {
|
||||
box-shadow: 0 0 45px -10px rgba(34, 197, 94, 0.25);
|
||||
box-shadow: 0 0 25px -8px rgba(34, 197, 94, 0.15);
|
||||
}
|
||||
|
||||
.glow-gold {
|
||||
box-shadow: 0 0 35px -10px rgba(245, 158, 11, 0.3);
|
||||
box-shadow: 0 0 20px -8px rgba(245, 158, 11, 0.15);
|
||||
}
|
||||
|
||||
/* Watermark background curve pattern */
|
||||
/* Minimalist clean background grid */
|
||||
.school-watermark-bg {
|
||||
background-image:
|
||||
radial-gradient(ellipse 80% 50% at 50% -20%, rgba(22, 163, 74, 0.15), transparent),
|
||||
radial-gradient(ellipse 60% 40% at 90% 40%, rgba(245, 158, 11, 0.06), transparent),
|
||||
linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
||||
background-size: 100% 100%, 100% 100%, 3.5rem 3.5rem, 3.5rem 3.5rem;
|
||||
radial-gradient(ellipse 70% 40% at 50% 0%, rgba(22, 163, 74, 0.08), transparent 70%),
|
||||
linear-gradient(to right, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
|
||||
background-size: 100% 100%, 3rem 3rem, 3rem 3rem;
|
||||
}
|
||||
|
||||
/* Animations */
|
||||
|
||||
Reference in new issue
Block a user