ssbg04/TIS_RMS_Web
1
0 Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: redesign to minimalist white theme and add multi-architecture APK downloads (universal, 64-bit, 32-bit)

Browse Source
This commit is contained in:
ssbg04 committed 2026-09-26 22:35:15 +08:00
1 parent 3d4c4b33fc
commit a739db89d6
13 files changed
+590 -356
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

public/screenshots/dashboard.webp
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 49 KiB

After

Width:  |  Height:  |  Size: 33 KiB

src/components/AppShowcase.astro
+34 -24
View File
@@ -28,30 +28,32 @@ const showcaseTabs = [
]; ];
--- ---
<section id="showcase" class="relative bg-[#09110c] py-24 text-white border-t border-white/5"> <section id="showcase" class="relative bg-white py-20 border-t border-slate-200">
<div class="mx-auto max-w-6xl px-5 sm:px-8"> <div class="mx-auto max-w-6xl px-5 sm:px-8">
<!-- Header --> <!-- Header -->
<div class="mx-auto max-w-2xl text-center"> <div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold text-[#4ade80] uppercase tracking-widest mb-3">App Preview</p> <div class="inline-flex items-center gap-1.5 rounded-full border border-emerald-200 bg-[#ecfdf5] px-3.5 py-1 text-xs font-semibold text-[#15803d] uppercase tracking-wider mb-3.5">
<h2 class="font-display text-3xl font-bold text-white sm:text-4xl"> App Preview
</div>
<h2 class="font-display text-3xl font-bold text-slate-900 sm:text-4xl">
See the app in action. See the app in action.
</h2> </h2>
<p class="mt-4 text-base text-slate-400 leading-relaxed"> <p class="mt-3 text-base text-slate-600 leading-relaxed">
Real screenshots from the desktop app built specifically for Talisay Integrated School. Real screenshots from the desktop app built specifically for Talisay Integrated School.
</p> </p>
</div> </div>
<!-- Tab Buttons --> <!-- Tab Buttons -->
<div class="mt-10 flex flex-wrap items-center justify-center gap-2"> <div class="mt-9 flex flex-wrap items-center justify-center gap-2">
{showcaseTabs.map((tab, idx) => ( {showcaseTabs.map((tab, idx) => (
<button <button
type="button" type="button"
data-tab={tab.id} data-tab={tab.id}
class={`tab-btn rounded-lg px-4 py-2 text-sm font-medium transition-all border ${ class={`tab-btn rounded-xl px-4 py-2 text-sm font-semibold transition-all border shadow-xs ${
idx === 0 idx === 0
? "bg-[#16a34a] text-white border-[#16a34a]" ? "bg-[#15803d] text-white border-[#15803d] shadow-sm"
: "bg-transparent text-slate-400 border-white/10 hover:text-white hover:border-white/20" : "bg-white text-slate-600 border-slate-200 hover:text-slate-900 hover:border-slate-300"
}`} }`}
> >
{tab.title} {tab.title}
@@ -59,34 +61,42 @@ const showcaseTabs = [
))} ))}
</div> </div>
<!-- Screenshot Window --> <!-- Screenshot Window (Authentic Desktop Client Window Styling) -->
<div class="mt-8 overflow-hidden rounded-2xl border border-white/10 bg-[#0c1610] shadow-2xl shadow-black/60"> <div class="mt-8 overflow-hidden rounded-2xl border border-slate-300/80 bg-white shadow-xl">
<!-- Simple window titlebar --> <!-- Desktop Client Titlebar matching app screenshot -->
<div class="flex items-center gap-2.5 border-b border-white/5 bg-[#15803d] px-4 py-2.5"> <div class="flex items-center justify-between border-b border-emerald-800/40 bg-[#15803d] px-4 py-2.5 select-none">
<img src="/tis_logo.png" alt="TIS" class="h-4 w-4 object-contain" /> <div class="flex items-center gap-2.5">
<span class="text-sm font-semibold text-white">TIS Record Management System</span> <img src="/tis_logo.png" alt="TIS Logo" class="h-4.5 w-4.5 object-contain" width="18" height="18" />
<span class="text-xs sm:text-sm font-medium text-white tracking-wide">TIS Record Management System</span>
</div>
<!-- Window minimize / maximize / close icons matching desktop app -->
<div class="flex items-center gap-4 text-white/80 text-xs">
<span class="hover:text-white cursor-default transition">─</span>
<span class="hover:text-white cursor-default transition">□</span>
<span class="hover:text-white cursor-default transition">✕</span>
</div>
</div> </div>
<!-- Screenshot Area --> <!-- Screenshot Area -->
<div class="relative bg-[#09110c] p-3 sm:p-4"> <div class="relative bg-slate-100/70 p-2 sm:p-4">
{showcaseTabs.map((tab, idx) => ( {showcaseTabs.map((tab, idx) => (
<div <div
id={`tab-content-${tab.id}`} id={`tab-content-${tab.id}`}
class={`tab-content ${idx === 0 ? "block" : "hidden"}`} class={`tab-content ${idx === 0 ? "block" : "hidden"}`}
> >
<div class="overflow-hidden rounded-xl border border-white/8"> <div class="overflow-hidden rounded-xl border border-slate-200 shadow-xs bg-white">
<img <img
src={tab.image} src={tab.image}
alt={`TIS RMS ${tab.title}`} alt={`TIS RMS ${tab.title}`}
loading="lazy" loading="lazy"
class="w-full object-cover aspect-[16/10]" class="w-full object-cover aspect-[16/9.5]"
/> />
</div> </div>
<!-- Caption --> <!-- Caption -->
<div class="mt-4 text-center"> <div class="mt-4 text-center pb-2">
<h3 class="font-display text-lg font-semibold text-white">{tab.title}</h3> <h3 class="font-display text-lg font-bold text-slate-900">{tab.title}</h3>
<p class="text-sm text-slate-400 mt-1">{tab.tagline}</p> <p class="text-sm text-slate-600 mt-0.5">{tab.tagline}</p>
</div> </div>
</div> </div>
))} ))}
@@ -105,12 +115,12 @@ const showcaseTabs = [
const target = btn.dataset.tab; const target = btn.dataset.tab;
buttons.forEach((b) => { buttons.forEach((b) => {
b.classList.remove('bg-[#16a34a]', 'text-white', 'border-[#16a34a]'); b.classList.remove('bg-[#15803d]', 'text-white', 'border-[#15803d]', 'shadow-sm');
b.classList.add('bg-transparent', 'text-slate-400', 'border-white/10'); b.classList.add('bg-white', 'text-slate-600', 'border-slate-200');
}); });
btn.classList.remove('bg-transparent', 'text-slate-400', 'border-white/10'); btn.classList.remove('bg-white', 'text-slate-600', 'border-slate-200');
btn.classList.add('bg-[#16a34a]', 'text-white', 'border-[#16a34a]'); btn.classList.add('bg-[#15803d]', 'text-white', 'border-[#15803d]', 'shadow-sm');
contents.forEach((content) => { contents.forEach((content) => {
if (content.id === `tab-content-${target}`) { if (content.id === `tab-content-${target}`) {
src/components/Architecture.astro
+39 -28
View File
@@ -2,43 +2,48 @@
// Architecture component - How TIS RMS works on campus // Architecture component - How TIS RMS works on campus
--- ---
<section id="architecture" class="relative bg-[#09110c] py-24 border-t border-white/5 text-white"> <section id="architecture" class="relative bg-[#f8fafc] py-20 border-t border-slate-200">
<div class="mx-auto max-w-6xl px-5 sm:px-8"> <div class="mx-auto max-w-6xl px-5 sm:px-8">
<!-- Header --> <!-- Header -->
<div class="mx-auto max-w-2xl text-center"> <div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold text-[#4ade80] uppercase tracking-widest mb-3">How It's Set Up</p> <div class="inline-flex items-center gap-1.5 rounded-full border border-emerald-200 bg-[#ecfdf5] px-3.5 py-1 text-xs font-semibold text-[#15803d] uppercase tracking-wider mb-3.5">
<h2 class="font-display text-3xl font-bold text-white sm:text-4xl"> How It's Set Up
</div>
<h2 class="font-display text-3xl font-bold text-slate-900 sm:text-4xl">
Works on your school's network — no internet needed. Works on your school's network — no internet needed.
</h2> </h2>
<p class="mt-4 text-base text-slate-400 leading-relaxed"> <p class="mt-3 text-base text-slate-600 leading-relaxed">
TIS RMS runs on a designated school computer. Teachers connect through the school Wi-Fi or cable network. Everything stays inside the school. TIS RMS runs on a designated school computer. Teachers connect through the school Wi-Fi or cable network. Everything stays inside the school.
</p> </p>
</div> </div>
<!-- 3 cards --> <!-- 3 network cards -->
<div class="mt-14 grid gap-5 sm:grid-cols-3"> <div class="mt-12 grid gap-5 sm:grid-cols-3">
<div class="rounded-2xl border border-white/8 bg-white/3 p-7 text-center"> <div class="rounded-2xl border border-slate-200/90 bg-white p-7 text-center shadow-xs transition hover:shadow-md hover:border-slate-300">
<div class="text-4xl mb-4">🖥️</div> <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-slate-100 text-3xl mx-auto mb-4">🖥️</div>
<h3 class="font-display text-lg font-semibold text-white">Teacher Computers</h3> <h3 class="font-display text-lg font-bold text-slate-900">Teacher Computers</h3>
<p class="mt-2 text-sm text-slate-400 leading-relaxed"> <p class="mt-2 text-sm text-slate-600 leading-relaxed">
Teachers use the Windows desktop app on their workstations or the Android app on their phones to scan documents. Teachers use the Windows desktop app on their workstations or the Android app on their phones to scan documents.
</p> </p>
</div> </div>
<div class="rounded-2xl border border-[#16a34a]/30 bg-[#16a34a]/5 p-7 text-center"> <div class="rounded-2xl border-2 border-[#15803d]/40 bg-[#ecfdf5] p-7 text-center shadow-xs relative">
<div class="text-4xl mb-4">🏫</div> <span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-[#15803d] px-3 py-0.5 text-xs font-bold text-white shadow-xs">
<h3 class="font-display text-lg font-semibold text-white">School Server PC</h3> Campus Host
<p class="mt-2 text-sm text-slate-400 leading-relaxed"> </span>
<div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-white text-3xl mx-auto mb-4 shadow-xs">🏫</div>
<h3 class="font-display text-lg font-bold text-[#15803d]">School Server PC</h3>
<p class="mt-2 text-sm text-slate-700 leading-relaxed">
One designated school computer acts as the server. It stores all records and runs quietly in the background — always on. One designated school computer acts as the server. It stores all records and runs quietly in the background — always on.
</p> </p>
</div> </div>
<div class="rounded-2xl border border-white/8 bg-white/3 p-7 text-center"> <div class="rounded-2xl border border-slate-200/90 bg-white p-7 text-center shadow-xs transition hover:shadow-md hover:border-slate-300">
<div class="text-4xl mb-4">📡</div> <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-slate-100 text-3xl mx-auto mb-4">📡</div>
<h3 class="font-display text-lg font-semibold text-white">School Wi-Fi / LAN</h3> <h3 class="font-display text-lg font-bold text-slate-900">School Wi-Fi / LAN</h3>
<p class="mt-2 text-sm text-slate-400 leading-relaxed"> <p class="mt-2 text-sm text-slate-600 leading-relaxed">
All devices communicate through the local school network. No data leaves the campus — private and fast. All devices communicate through the local school network. No data leaves the campus — private and fast.
</p> </p>
</div> </div>
@@ -46,25 +51,31 @@
</div> </div>
<!-- 3 benefit cards --> <!-- 3 benefit cards -->
<div class="mt-8 grid gap-5 sm:grid-cols-3"> <div class="mt-6 grid gap-5 sm:grid-cols-3">
<div class="rounded-2xl border border-white/8 bg-white/3 p-6"> <div class="rounded-2xl border border-slate-200/90 bg-white p-6 shadow-xs">
<h4 class="font-display text-base font-semibold text-white mb-2">Works Without Internet</h4> <h4 class="font-display text-base font-bold text-slate-900 mb-2 flex items-center gap-2">
<p class="text-sm text-slate-400 leading-relaxed"> <span class="text-[#15803d]">✓</span> Works Without Internet
</h4>
<p class="text-sm text-slate-600 leading-relaxed">
Teachers can access and update records even when the school's internet connection is slow or down. Teachers can access and update records even when the school's internet connection is slow or down.
</p> </p>
</div> </div>
<div class="rounded-2xl border border-white/8 bg-white/3 p-6"> <div class="rounded-2xl border border-slate-200/90 bg-white p-6 shadow-xs">
<h4 class="font-display text-base font-semibold text-white mb-2">Student Data Stays Private</h4> <h4 class="font-display text-base font-bold text-slate-900 mb-2 flex items-center gap-2">
<p class="text-sm text-slate-400 leading-relaxed"> <span class="text-[#15803d]">✓</span> Student Data Stays Private
</h4>
<p class="text-sm text-slate-600 leading-relaxed">
All student records are stored only on school hardware — never uploaded to any external service or cloud. All student records are stored only on school hardware — never uploaded to any external service or cloud.
</p> </p>
</div> </div>
<div class="rounded-2xl border border-white/8 bg-white/3 p-6"> <div class="rounded-2xl border border-slate-200/90 bg-white p-6 shadow-xs">
<h4 class="font-display text-base font-semibold text-white mb-2">Fast Local Performance</h4> <h4 class="font-display text-base font-bold text-slate-900 mb-2 flex items-center gap-2">
<p class="text-sm text-slate-400 leading-relaxed"> <span class="text-[#15803d]">✓</span> Fast Local Performance
</h4>
<p class="text-sm text-slate-600 leading-relaxed">
Because everything runs on your local network, searching and loading records is instant across all workstations. Because everything runs on your local network, searching and loading records is instant across all workstations.
</p> </p>
</div> </div>
src/components/Downloads.astro
+248 -103
View File
@@ -1,136 +1,253 @@
--- ---
// Downloads component - Official installers for Talisay Integrated School // Downloads component - Official installers for Talisay Integrated School
let latestReleaseTag = "v1.0.10"; // Default asset sizes & URLs (v1.0.27 latest release)
let winAssetSize = "19.6 MB"; let latestReleaseTag = "v1.0.27";
let apkAssetSize = "83.4 MB";
let publishedDateStr = "Latest Release"; let publishedDateStr = "Latest Release";
try { let winAssetSize = "18.2 MB";
const res = await fetch("https://api.github.com/repos/ssbg04/TIS_RMS/releases/latest", { let winDownloadUrl = "https://github.com/ssbg04/TIS_RMS/releases/download/v1.0.27/TIS_RMS_Client_Setup_v1.0.27.exe";
headers: { "User-Agent": "TIS-RMS-Web" }
}); let apkUniversalSize = "75.4 MB";
if (res.ok) { let apkUniversalUrl = "https://github.com/ssbg04/TIS_RMS/releases/download/v1.0.27/TIS_RMS_Universal_v1.0.27.apk";
const data = await res.json();
if (data.tag_name) latestReleaseTag = data.tag_name; let apk64Size = "29.4 MB";
if (data.published_at) { let apk64Url = "https://github.com/ssbg04/TIS_RMS/releases/download/v1.0.27/TIS_RMS_64_v1.0.27.apk";
publishedDateStr = new Date(data.published_at).toLocaleDateString("en-US", {
month: "long", let apk32Size = "27.4 MB";
day: "numeric", let apk32Url = "https://github.com/ssbg04/TIS_RMS/releases/download/v1.0.27/TIS_RMS_32bit_v1.0.27.apk";
year: "numeric"
}); let releaseHtmlUrl = "https://github.com/ssbg04/TIS_RMS/releases/latest";
}
const winAsset = data.assets?.find((a: any) => a.name === "TIS_RMS_Client_Setup.exe" || a.name.endsWith(".exe"));
const apkAsset = data.assets?.find((a: any) => a.name === "TIS_RMS_Android_Universal.apk" || a.name.endsWith(".apk"));
if (winAsset) winAssetSize = `${(winAsset.size / (1024 * 1024)).toFixed(1)} MB`;
if (apkAsset) apkAssetSize = `${(apkAsset.size / (1024 * 1024)).toFixed(1)} MB`;
}
} catch (e) {
// Gracefully fallback to defaults
}
--- ---
<section id="downloads" class="bg-[#09110c] py-24 text-white border-t border-white/5"> <section id="downloads" class="relative bg-white py-24 border-t border-slate-200">
<div class="mx-auto max-w-5xl px-5 sm:px-8"> <div class="mx-auto max-w-6xl px-5 sm:px-8">
<!-- Header --> <!-- Header -->
<div class="text-center mb-14"> <div class="text-center mb-14">
<p class="text-sm font-semibold text-[#4ade80] uppercase tracking-widest mb-3">Downloads</p> <div class="inline-flex items-center gap-1.5 rounded-full border border-emerald-200 bg-[#ecfdf5] px-3.5 py-1 text-xs font-semibold text-[#15803d] uppercase tracking-wider mb-3.5">
<h2 class="font-display text-3xl font-bold text-white sm:text-4xl"> Official Installers
Get the TIS RMS App </div>
<h2 class="font-display text-3xl font-bold text-slate-900 sm:text-4xl">
Download TIS RMS
</h2> </h2>
<p class="mt-4 text-base text-slate-400 max-w-lg mx-auto leading-relaxed"> <p class="mt-3 text-base text-slate-600 max-w-xl mx-auto leading-relaxed">
Free for all Talisay Integrated School staff. Available for Windows and Android. Free for all Talisay Integrated School staff. Available for Windows campus workstations and Android mobile devices.
</p> </p>
<div class="mt-4 flex items-center justify-center gap-2 text-sm text-slate-500"> <div class="mt-4 flex flex-wrap items-center justify-center gap-2 text-sm text-slate-500">
<span id="release-version-label" class="text-slate-300 font-medium">{latestReleaseTag}</span> <span id="release-version-label" class="inline-flex items-center rounded-md bg-emerald-50 px-2.5 py-0.5 text-xs font-semibold text-[#15803d] border border-emerald-200">
<span>·</span> {latestReleaseTag}
</span>
<span class="text-slate-300">·</span>
<span id="release-date-label">{publishedDateStr}</span> <span id="release-date-label">{publishedDateStr}</span>
<span>·</span> <span class="text-slate-300">·</span>
<a href="https://github.com/ssbg04/TIS_RMS/releases/latest" target="_blank" rel="noopener noreferrer" class="github-release-notes-link text-[#4ade80] hover:underline">Release Notes →</a> <a href={releaseHtmlUrl} target="_blank" rel="noopener noreferrer" class="github-release-notes-link font-medium text-[#15803d] hover:underline">
Release Notes →
</a>
</div> </div>
</div> </div>
<!-- Download Cards --> <!-- Download Grid -->
<div class="grid gap-5 sm:grid-cols-2"> <div class="grid gap-6 lg:grid-cols-12">
<!-- Windows Card --> <!-- Windows Card (lg:col-span-5) -->
<div class="flex flex-col rounded-2xl border border-white/8 bg-white/3 p-8"> <div class="lg:col-span-5 flex flex-col justify-between rounded-2xl border border-slate-200/90 bg-white p-7 sm:p-8 shadow-xs hover:shadow-md transition">
<div class="mb-6 flex h-14 w-14 items-center justify-center rounded-xl bg-blue-500/10 border border-blue-500/15"> <div>
<svg class="h-7 w-7 text-blue-400" fill="currentColor" viewBox="0 0 24 24"> <!-- Header icon & badge -->
<path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.551H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"/> <div class="flex items-center justify-between mb-6">
</svg> <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-blue-50 border border-blue-100 text-blue-600 shadow-xs">
<svg class="h-7 w-7" fill="currentColor" viewBox="0 0 24 24">
<path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.551H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"/>
</svg>
</div>
<span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">
Desktop Client
</span>
</div>
<h3 class="font-display text-2xl font-bold text-slate-900">Windows</h3>
<p class="mt-2.5 text-sm text-slate-600 leading-relaxed">
The complete management application for teachers and registrars. Includes student lookup, document directory, and automated SF-10 Excel export.
</p>
<!-- Specifications list -->
<div class="mt-6 rounded-xl border border-slate-200/80 bg-slate-50/70 p-4 space-y-2 text-xs">
<div class="flex items-center justify-between">
<span class="text-slate-500">Compatibility</span>
<span class="font-semibold text-slate-800">Windows 10 / 11 (64-bit)</span>
</div>
<div class="flex items-center justify-between border-t border-slate-200/60 pt-2">
<span class="text-slate-500">Installer Type</span>
<span class="font-semibold text-slate-800">NSIS One-Click Setup (.exe)</span>
</div>
<div class="flex items-center justify-between border-t border-slate-200/60 pt-2">
<span class="text-slate-500">Download Size</span>
<span id="win-release-size" class="font-bold text-[#15803d]">{winAssetSize}</span>
</div>
</div>
</div> </div>
<h3 class="font-display text-xl font-bold text-white">Windows</h3> <div class="mt-8">
<p class="mt-2 text-base text-slate-400 leading-relaxed flex-1"> <a
The main desktop app for teachers and registrars. One-click installer — works on your school network. id="win-download-btn"
</p> href={winDownloadUrl}
<p class="mt-3 text-sm text-slate-500">Windows 10 / 11 · <span id="win-release-size">{winAssetSize}</span></p> class="flex w-full items-center justify-center gap-2.5 rounded-xl bg-[#15803d] px-5 py-3.5 text-base font-semibold text-white shadow-md shadow-[#15803d]/15 hover:bg-[#166534] transition"
>
<a <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
id="win-download-btn" <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" />
href="https://github.com/ssbg04/TIS_RMS/releases/latest/download/TIS_RMS_Client_Setup.exe" </svg>
class="mt-6 flex items-center justify-center gap-2.5 rounded-xl bg-[#16a34a] px-5 py-4 text-base font-semibold text-white hover:bg-[#15803d] transition shadow-lg shadow-[#16a34a]/20" Download for Windows
> </a>
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <p class="mt-2.5 text-center text-xs text-slate-500">
<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" /> Works offline on school local Wi-Fi or wired network.
</svg> </p>
Download for Windows </div>
</a>
</div> </div>
<!-- Android Card --> <!-- Android Hub Card (lg:col-span-7) -->
<div class="flex flex-col rounded-2xl border border-white/8 bg-white/3 p-8"> <div class="lg:col-span-7 flex flex-col justify-between rounded-2xl border border-slate-200/90 bg-white p-7 sm:p-8 shadow-xs hover:shadow-md transition">
<div class="mb-6 flex h-14 w-14 items-center justify-center rounded-xl bg-[#4ade80]/10 border border-[#4ade80]/15"> <div>
<svg class="h-7 w-7 text-[#4ade80]" fill="currentColor" viewBox="0 0 24 24"> <!-- Header icon & badge -->
<path d="M17.523 15.341a1 1 0 01-1 1H7.477a1 1 0 01-1-1V8.659a1 1 0 011-1h9.046a1 1 0 011 1v6.682zM14.56 3.239l1.32-2.286a.25.25 0 00-.433-.25l-1.337 2.314A7.966 7.966 0 0012 2.659a7.966 7.966 0 00-2.11.358L8.553.703a.25.25 0 00-.433.25l1.32 2.286A8.02 8.02 0 004 9.659v.5h16v-.5a8.02 8.02 0 00-5.44-6.42zM9.5 7.659a.75.75 0 110-1.5.75.75 0 010 1.5zm5 0a.75.75 0 110-1.5.75.75 0 010 1.5zM4 21.659a2 2 0 002 2h.5v-8.5H4v6.5zm13.5 2a2 2 0 002-2v-6.5h-2.5v8.5h.5zM6.477 22.659H17.523V13.5H6.477v9.159z"/> <div class="flex items-center justify-between mb-6">
</svg> <div class="flex h-14 w-14 items-center justify-center rounded-2xl bg-[#ecfdf5] border border-emerald-200 text-[#15803d] shadow-xs">
<svg class="h-7 w-7" fill="currentColor" viewBox="0 0 24 24">
<path d="M17.523 15.341a1 1 0 01-1 1H7.477a1 1 0 01-1-1V8.659a1 1 0 011-1h9.046a1 1 0 011 1v6.682zM14.56 3.239l1.32-2.286a.25.25 0 00-.433-.25l-1.337 2.314A7.966 7.966 0 0012 2.659a7.966 7.966 0 00-2.11.358L8.553.703a.25.25 0 00-.433.25l1.32 2.286A8.02 8.02 0 004 9.659v.5h16v-.5a8.02 8.02 0 00-5.44-6.42zM9.5 7.659a.75.75 0 110-1.5.75.75 0 010 1.5zm5 0a.75.75 0 110-1.5.75.75 0 010 1.5zM4 21.659a2 2 0 002 2h.5v-8.5H4v6.5zm13.5 2a2 2 0 002-2v-6.5h-2.5v8.5h.5zM6.477 22.659H17.523V13.5H6.477v9.159z"/>
</svg>
</div>
<div class="flex items-center gap-2">
<span class="rounded-full bg-emerald-50 text-[#15803d] border border-emerald-200 px-3 py-1 text-xs font-semibold">
Android 8.0+
</span>
<span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">
Mobile Scanner
</span>
</div>
</div>
<h3 class="font-display text-2xl font-bold text-slate-900">Android APK Packages</h3>
<p class="mt-2.5 text-sm text-slate-600 leading-relaxed">
Scan paper SF-10 and SF-9 forms using your smartphone camera. Choose the package suited for your device:
</p>
<!-- 3 APK Packages -->
<div class="mt-5 space-y-3">
<!-- 1. Universal APK -->
<div class="rounded-xl border-2 border-[#15803d]/40 bg-[#ecfdf5]/50 p-4 transition hover:bg-[#ecfdf5]/80">
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
<div>
<div class="flex items-center gap-2">
<span class="font-bold text-slate-900 text-sm">Universal APK</span>
<span class="rounded-md bg-[#15803d] text-white px-2 py-0.5 text-[11px] font-bold">Recommended</span>
</div>
<p class="text-xs text-slate-600 mt-1">
Compatible with all Android phones (32-bit &amp; 64-bit). If unsure, pick this.
</p>
<p class="text-xs font-medium text-slate-500 mt-1">
Size: <span id="apk-universal-size" class="font-bold text-[#15803d]">{apkUniversalSize}</span> · All architectures
</p>
</div>
<a
id="apk-universal-btn"
href={apkUniversalUrl}
class="shrink-0 inline-flex items-center justify-center gap-2 rounded-lg bg-[#15803d] px-4 py-2 text-xs font-semibold text-white shadow-xs hover:bg-[#166534] 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
Download Universal
</a>
</div>
</div>
<!-- 2. 64-bit APK -->
<div class="rounded-xl border border-slate-200/90 bg-slate-50/70 p-4 transition hover:bg-slate-50">
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
<div>
<div class="flex items-center gap-2">
<span class="font-bold text-slate-900 text-sm">64-bit APK</span>
<span class="rounded-md bg-blue-50 text-blue-700 border border-blue-200 px-2 py-0.5 text-[11px] font-semibold">arm64-v8a</span>
</div>
<p class="text-xs text-slate-600 mt-1">
Optimized for modern Android smartphones (2018+). Faster install, 60% smaller file.
</p>
<p class="text-xs font-medium text-slate-500 mt-1">
Size: <span id="apk-64-size" class="font-bold text-slate-800">{apk64Size}</span> · 64-bit ARM
</p>
</div>
<a
id="apk-64-btn"
href={apk64Url}
class="shrink-0 inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2 text-xs font-semibold text-slate-800 shadow-xs hover:bg-slate-50 hover:border-slate-400 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
Download 64-bit
</a>
</div>
</div>
<!-- 3. 32-bit APK -->
<div class="rounded-xl border border-slate-200/90 bg-slate-50/70 p-4 transition hover:bg-slate-50">
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
<div>
<div class="flex items-center gap-2">
<span class="font-bold text-slate-900 text-sm">32-bit APK</span>
<span class="rounded-md bg-amber-50 text-amber-700 border border-amber-200 px-2 py-0.5 text-[11px] font-semibold">armeabi-v7a</span>
</div>
<p class="text-xs text-slate-600 mt-1">
Tailored for older Android models or budget school handheld devices.
</p>
<p class="text-xs font-medium text-slate-500 mt-1">
Size: <span id="apk-32-size" class="font-bold text-slate-800">{apk32Size}</span> · 32-bit ARM
</p>
</div>
<a
id="apk-32-btn"
href={apk32Url}
class="shrink-0 inline-flex items-center justify-center gap-2 rounded-lg border border-slate-300 bg-white px-4 py-2 text-xs font-semibold text-slate-800 shadow-xs hover:bg-slate-50 hover:border-slate-400 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
Download 32-bit
</a>
</div>
</div>
</div>
</div> </div>
<h3 class="font-display text-xl font-bold text-white">Android</h3> <!-- Android installation tip -->
<p class="mt-2 text-base text-slate-400 leading-relaxed flex-1"> <div class="mt-6 pt-4 border-t border-slate-200/80 flex items-start gap-2.5 text-xs text-slate-500">
Use your phone to scan paper documents. The app reads student details automatically — no Play Store needed. <span class="text-base text-amber-500 leading-none">💡</span>
</p> <span>
<p class="mt-3 text-sm text-slate-500">Android 8.0+ · <span id="apk-release-size">{apkAssetSize}</span></p> <strong class="text-slate-700">Android Tip:</strong> When installing, allow <strong class="text-slate-700 font-semibold">"Install unknown apps"</strong> or <strong class="text-slate-700 font-semibold">"Unknown sources"</strong> in your device settings.
</span>
<a </div>
id="apk-download-btn"
href="https://github.com/ssbg04/TIS_RMS/releases/latest/download/TIS_RMS_Android_Universal.apk"
class="mt-6 flex items-center justify-center gap-2.5 rounded-xl border border-white/12 bg-white/6 px-5 py-4 text-base font-semibold text-white hover:bg-white/10 transition"
>
<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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
Download for Android
</a>
</div> </div>
</div> </div>
<!-- IT Admin / Server note --> <!-- IT Admin / Campus Server Note -->
<div class="mt-6 rounded-2xl border border-white/6 bg-white/2 p-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4"> <div class="mt-8 rounded-2xl border border-slate-200 bg-slate-50/80 p-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 shadow-xs">
<div> <div>
<p class="text-sm font-semibold text-slate-300">For IT Admins — Campus Server Setup</p> <p class="text-sm font-bold text-slate-900">For IT Admins — Campus Server Setup</p>
<p class="mt-1 text-sm text-slate-500">The backend server runs on Node.js on a designated school PC. Visit GitHub for setup instructions.</p> <p class="mt-1 text-sm text-slate-600">The backend server runs locally on Node.js and SQLite on a designated school computer. Setup guides and API endpoints are on GitHub.</p>
</div> </div>
<a <a
href="https://github.com/ssbg04/TIS_RMS" href="https://github.com/ssbg04/TIS_RMS"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="shrink-0 inline-flex items-center gap-2 rounded-lg border border-white/10 bg-white/5 px-4 py-2.5 text-sm font-medium text-slate-300 hover:bg-white/10 hover:text-white transition" class="shrink-0 inline-flex items-center gap-2 rounded-xl border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 hover:bg-slate-50 hover:text-slate-900 transition shadow-xs"
> >
<svg class="h-4 w-4" fill="currentColor" viewBox="0 0 24 24"> <svg class="h-4 w-4" 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" /> <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> </svg>
View on GitHub View GitHub Repository
</a> </a>
</div> </div>
<!-- Android install note -->
<p class="mt-6 text-center text-sm text-slate-600">
For Android: enable <strong class="text-slate-400">Install unknown apps</strong> in your device settings before installing the APK.
</p>
</div> </div>
</section> </section>
@@ -150,11 +267,25 @@ try {
}) })
: ""; : "";
const winAsset = release.assets?.find( const assets: any[] = release.assets || [];
(a: any) => a.name === "TIS_RMS_Client_Setup.exe" || a.name.endsWith(".exe")
// Windows
const winAsset = assets.find((a: any) => a.name.endsWith(".exe"));
// Universal APK
const universalAsset = assets.find((a: any) =>
a.name.toLowerCase().includes("universal") && a.name.endsWith(".apk")
); );
const apkAsset = release.assets?.find( // 64-bit APK
(a: any) => a.name === "TIS_RMS_Android_Universal.apk" || a.name.endsWith(".apk") const asset64 = assets.find((a: any) =>
(a.name.includes("64") || a.name.toLowerCase().includes("arm64")) &&
!a.name.toLowerCase().includes("universal") &&
a.name.endsWith(".apk")
);
// 32-bit APK
const asset32 = assets.find((a: any) =>
(a.name.includes("32") || a.name.toLowerCase().includes("v7a")) &&
!a.name.toLowerCase().includes("universal") &&
a.name.endsWith(".apk")
); );
const versionLabel = document.getElementById("release-version-label"); const versionLabel = document.getElementById("release-version-label");
@@ -169,11 +300,25 @@ try {
if (winBtn && winAsset.browser_download_url) winBtn.href = winAsset.browser_download_url; if (winBtn && winAsset.browser_download_url) winBtn.href = winAsset.browser_download_url;
} }
if (apkAsset) { if (universalAsset) {
const apkSize = document.getElementById("apk-release-size"); const univSize = document.getElementById("apk-universal-size");
if (apkSize) apkSize.textContent = `${(apkAsset.size / (1024 * 1024)).toFixed(1)} MB`; if (univSize) univSize.textContent = `${(universalAsset.size / (1024 * 1024)).toFixed(1)} MB`;
const apkBtn = document.getElementById("apk-download-btn") as HTMLAnchorElement | null; const univBtn = document.getElementById("apk-universal-btn") as HTMLAnchorElement | null;
if (apkBtn && apkAsset.browser_download_url) apkBtn.href = apkAsset.browser_download_url; if (univBtn && universalAsset.browser_download_url) univBtn.href = universalAsset.browser_download_url;
}
if (asset64) {
const size64 = document.getElementById("apk-64-size");
if (size64) size64.textContent = `${(asset64.size / (1024 * 1024)).toFixed(1)} MB`;
const btn64 = document.getElementById("apk-64-btn") as HTMLAnchorElement | null;
if (btn64 && asset64.browser_download_url) btn64.href = asset64.browser_download_url;
}
if (asset32) {
const size32 = document.getElementById("apk-32-size");
if (size32) size32.textContent = `${(asset32.size / (1024 * 1024)).toFixed(1)} MB`;
const btn32 = document.getElementById("apk-32-btn") as HTMLAnchorElement | null;
if (btn32 && asset32.browser_download_url) btn32.href = asset32.browser_download_url;
} }
const notesLinks = document.querySelectorAll<HTMLAnchorElement>(".github-release-notes-link"); const notesLinks = document.querySelectorAll<HTMLAnchorElement>(".github-release-notes-link");
src/components/Features.astro
+13 -9
View File
@@ -34,27 +34,31 @@ const featuresList = [
]; ];
--- ---
<section id="features" class="relative bg-[#09110c] py-24 border-t border-white/5 text-white"> <section id="features" class="relative bg-white py-20 border-t border-slate-200">
<div class="mx-auto max-w-6xl px-5 sm:px-8"> <div class="mx-auto max-w-6xl px-5 sm:px-8">
<!-- Header --> <!-- Header -->
<div class="mx-auto max-w-2xl text-center"> <div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold text-[#4ade80] uppercase tracking-widest mb-3">Features</p> <div class="inline-flex items-center gap-1.5 rounded-full border border-emerald-200 bg-[#ecfdf5] px-3.5 py-1 text-xs font-semibold text-[#15803d] uppercase tracking-wider mb-3.5">
<h2 class="font-display text-3xl font-bold text-white sm:text-4xl"> Features
</div>
<h2 class="font-display text-3xl font-bold text-slate-900 sm:text-4xl">
Everything you need to manage school records. Everything you need to manage school records.
</h2> </h2>
<p class="mt-4 text-base text-slate-400 leading-relaxed"> <p class="mt-3 text-base text-slate-600 leading-relaxed">
Simple tools to help school staff register, organize, and access student information — without the complexity. Simple tools to help school staff register, organize, and access student information — without the complexity.
</p> </p>
</div> </div>
<!-- Feature Grid --> <!-- Feature Grid -->
<div class="mt-14 grid gap-5 sm:grid-cols-2 lg:grid-cols-3"> <div class="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
{featuresList.map((item) => ( {featuresList.map((item) => (
<div class="rounded-2xl border border-white/8 bg-white/3 p-6 transition hover:bg-white/6 hover:border-white/14"> <div class="rounded-2xl border border-slate-200/90 bg-white p-6 shadow-xs transition hover:shadow-md hover:border-slate-300">
<div class="text-3xl mb-4">{item.icon}</div> <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-slate-50 border border-slate-100 text-2xl mb-4 shadow-xs">
<h3 class="font-display text-lg font-semibold text-white">{item.title}</h3> {item.icon}
<p class="mt-2 text-sm text-slate-400 leading-relaxed">{item.description}</p> </div>
<h3 class="font-display text-base font-bold text-slate-900">{item.title}</h3>
<p class="mt-2 text-sm text-slate-600 leading-relaxed">{item.description}</p>
</div> </div>
))} ))}
</div> </div>
src/components/Footer.astro
+38 -24
View File
@@ -3,13 +3,13 @@
const currentYear = new Date().getFullYear(); const currentYear = new Date().getFullYear();
--- ---
<footer class="bg-[#070e0a] border-t border-white/5 text-slate-400 py-12"> <footer class="bg-slate-50 border-t border-slate-200 text-slate-600 py-12">
<div class="mx-auto max-w-6xl px-5 sm:px-8"> <div class="mx-auto max-w-6xl px-5 sm:px-8">
<div class="grid gap-10 md:grid-cols-3 pb-10 border-b border-white/5"> <div class="grid gap-10 md:grid-cols-4 pb-10 border-b border-slate-200">
<!-- Brand --> <!-- Brand -->
<div class="space-y-3"> <div class="space-y-3 md:col-span-2">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<img <img
src="/tis_logo.png" src="/tis_logo.png"
@@ -17,48 +17,62 @@ const currentYear = new Date().getFullYear();
class="h-9 w-9 object-contain" class="h-9 w-9 object-contain"
/> />
<div> <div>
<div class="font-display text-base font-bold text-white">TIS RMS</div> <div class="font-display text-base font-bold text-slate-900">TIS RMS</div>
<div class="text-xs text-amber-400">Talisay Integrated School</div> <div class="text-xs text-[#15803d] font-semibold">Talisay Integrated School</div>
</div> </div>
</div> </div>
<p class="text-sm text-slate-500 leading-relaxed max-w-xs"> <p class="text-sm text-slate-500 leading-relaxed max-w-sm">
A records management system for Talisay Integrated School in Tiaong, Quezon, Philippines. Designed to digitize and manage student records from old documents dated 2021 onwards. A dedicated records management system for Talisay Integrated School in Tiaong, Quezon, Philippines. Designed to digitize and manage learner basic profiles from historical documents 2021 onwards.
</p> </p>
<div class="pt-1 text-xs text-slate-400">
DepEd Division of Quezon · Region IV-A CALABARZON
</div>
</div> </div>
<!-- Navigation --> <!-- Navigation -->
<div class="space-y-3"> <div class="space-y-3">
<h4 class="text-sm font-semibold text-slate-200">Navigation</h4> <h4 class="text-sm font-bold text-slate-900">Navigation</h4>
<ul class="space-y-2 text-sm"> <ul class="space-y-2 text-sm">
<li><a href="#showcase" class="hover:text-white transition">App Preview</a></li> <li><a href="#showcase" class="hover:text-slate-900 transition">App Preview</a></li>
<li><a href="#school-forms" class="hover:text-white transition">School Forms</a></li> <li><a href="#school-forms" class="hover:text-slate-900 transition">School Forms</a></li>
<li><a href="#ocr-pipeline" class="hover:text-white transition">Document Scanning</a></li> <li><a href="#ocr-pipeline" class="hover:text-slate-900 transition">Document Scanning</a></li>
<li><a href="#features" class="hover:text-white transition">Features</a></li> <li><a href="#features" class="hover:text-slate-900 transition">Features</a></li>
<li><a href="#downloads" class="hover:text-white transition">Downloads</a></li> <li><a href="#downloads" class="hover:text-slate-900 transition">Downloads Hub</a></li>
</ul> </ul>
</div> </div>
<!-- Downloads --> <!-- Downloads -->
<div class="space-y-3"> <div class="space-y-3">
<h4 class="text-sm font-semibold text-slate-200">Downloads</h4> <h4 class="text-sm font-bold text-slate-900">Direct Downloads</h4>
<ul class="space-y-2 text-sm"> <ul class="space-y-2 text-sm">
<li> <li>
<a href="https://github.com/ssbg04/TIS_RMS/releases/latest/download/TIS_RMS_Client_Setup.exe" target="_blank" rel="noopener noreferrer" class="hover:text-white transition flex items-center gap-1.5"> <a href="https://github.com/ssbg04/TIS_RMS/releases/latest/download/TIS_RMS_Client_Setup_v1.0.27.exe" target="_blank" rel="noopener noreferrer" class="hover:text-slate-900 transition flex items-center gap-1.5">
Windows App (.exe) <span>Windows App (.exe)</span>
<span class="text-xs text-[#4ade80]">Latest</span> <span class="text-[11px] font-semibold text-[#15803d] bg-emerald-50 px-1.5 py-0.2 rounded border border-emerald-200">Win 10/11</span>
</a> </a>
</li> </li>
<li> <li>
<a href="https://github.com/ssbg04/TIS_RMS/releases/latest/download/TIS_RMS_Android_Universal.apk" target="_blank" rel="noopener noreferrer" class="hover:text-white transition flex items-center gap-1.5"> <a href="https://github.com/ssbg04/TIS_RMS/releases/latest/download/TIS_RMS_Universal_v1.0.27.apk" target="_blank" rel="noopener noreferrer" class="hover:text-slate-900 transition flex items-center gap-1.5">
Android App (.apk) <span>Android Universal (.apk)</span>
<span class="text-xs text-[#4ade80]">Latest</span> <span class="text-[11px] font-semibold text-[#15803d] bg-emerald-50 px-1.5 py-0.2 rounded border border-emerald-200">All Devices</span>
</a> </a>
</li> </li>
<li> <li>
<a href="https://github.com/ssbg04/TIS_RMS/releases/latest" target="_blank" rel="noopener noreferrer" class="hover:text-white transition">Release Notes</a> <a href="https://github.com/ssbg04/TIS_RMS/releases/latest/download/TIS_RMS_64_v1.0.27.apk" target="_blank" rel="noopener noreferrer" class="hover:text-slate-900 transition flex items-center gap-1.5">
<span>Android 64-bit (.apk)</span>
<span class="text-[11px] text-blue-600 bg-blue-50 px-1.5 py-0.2 rounded border border-blue-200">arm64</span>
</a>
</li> </li>
<li> <li>
<a href="https://github.com/ssbg04/TIS_RMS" target="_blank" rel="noopener noreferrer" class="hover:text-white transition">GitHub Repository</a> <a href="https://github.com/ssbg04/TIS_RMS/releases/latest/download/TIS_RMS_32bit_v1.0.27.apk" target="_blank" rel="noopener noreferrer" class="hover:text-slate-900 transition flex items-center gap-1.5">
<span>Android 32-bit (.apk)</span>
<span class="text-[11px] text-amber-700 bg-amber-50 px-1.5 py-0.2 rounded border border-amber-200">v7a</span>
</a>
</li>
<li class="pt-1">
<a href="https://github.com/ssbg04/TIS_RMS/releases/latest" target="_blank" rel="noopener noreferrer" class="text-xs text-slate-500 hover:text-slate-800 transition">
View GitHub Releases →
</a>
</li> </li>
</ul> </ul>
</div> </div>
@@ -66,9 +80,9 @@ const currentYear = new Date().getFullYear();
</div> </div>
<!-- Bottom --> <!-- Bottom -->
<div class="mt-8 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-slate-600"> <div class="mt-8 flex flex-col sm:flex-row items-center justify-between gap-3 text-xs text-slate-500">
<div>© {currentYear} Talisay Integrated School — TIS RMS. Tiaong, Quezon, Philippines.</div> <div>© {currentYear} Talisay Integrated School — TIS RMS. Tiaong, Quezon, Philippines.</div>
<div>Developed by <strong class="text-slate-400">BSIT3DSB</strong></div> <div>Developed by <strong class="text-slate-700 font-semibold">BSIT3DSB</strong></div>
</div> </div>
</div> </div>
src/components/Hero.astro
+36 -36
View File
@@ -2,31 +2,31 @@
// Hero component - Talisay Integrated School Records Management System // Hero component - Talisay Integrated School Records Management System
--- ---
<section class="relative overflow-hidden pt-32 pb-24 lg:pt-40 lg:pb-32"> <section class="relative overflow-hidden pt-32 pb-20 lg:pt-40 lg:pb-28">
<!-- Soft background glow --> <!-- Soft ambient background light -->
<div class="absolute inset-0 -z-10 pointer-events-none"> <div class="absolute inset-0 -z-10 pointer-events-none">
<div class="absolute left-1/2 -top-24 h-[480px] w-[700px] -translate-x-1/2 rounded-full bg-[#16a34a]/15 blur-3xl"></div> <div class="absolute left-1/2 -top-24 h-[440px] w-[720px] -translate-x-1/2 rounded-full bg-emerald-500/10 blur-3xl"></div>
</div> </div>
<div class="mx-auto max-w-4xl px-5 sm:px-8 text-center"> <div class="mx-auto max-w-4xl px-5 sm:px-8 text-center">
<!-- School badge --> <!-- School badge -->
<div class="mb-6 inline-flex items-center gap-2.5 rounded-full border border-white/10 bg-white/5 px-4 py-1.5 text-sm text-slate-300"> <div class="mb-6 inline-flex items-center gap-2.5 rounded-full border border-slate-200 bg-white px-4 py-1.5 text-sm text-slate-700 shadow-xs">
<img src="/tis_logo.png" alt="TIS Logo" class="h-5 w-5 object-contain" width="20" height="20" /> <img src="/tis_logo.png" alt="TIS Logo" class="h-5 w-5 object-contain" width="20" height="20" />
<span class="text-amber-400 font-semibold">Talisay Integrated School</span> <span class="text-[#15803d] font-semibold">Talisay Integrated School</span>
<span class="text-slate-500">•</span> <span class="text-slate-300">•</span>
<span>Tiaong, Quezon</span> <span class="text-slate-600">Tiaong, Quezon</span>
</div> </div>
<!-- Headline --> <!-- Headline -->
<h1 class="font-display text-4xl font-extrabold tracking-tight text-white sm:text-6xl lg:text-7xl"> <h1 class="font-display text-4xl font-extrabold tracking-tight text-slate-900 sm:text-6xl lg:text-7xl">
Student Records,<br class="hidden sm:inline" /> Student Records,<br class="hidden sm:inline" />
<span class="text-[#4ade80]"> Made Simple.</span> <span class="text-[#15803d]"> Made Simple.</span>
</h1> </h1>
<!-- Subtitle --> <!-- Subtitle -->
<p class="mt-6 text-lg text-slate-300 leading-relaxed max-w-2xl mx-auto"> <p class="mt-6 text-lg text-slate-600 leading-relaxed max-w-2xl mx-auto">
TIS RMS helps Talisay Integrated School staff digitize, organize, and look up student records from old school documents — all stored safely on school computers, no internet needed. TIS RMS helps Talisay Integrated School staff digitize, organize, and look up student records from old school documents — all stored safely on school computers, no internet needed.
</p> </p>
@@ -34,7 +34,7 @@
<div class="mt-10 flex flex-wrap items-center justify-center gap-4"> <div class="mt-10 flex flex-wrap items-center justify-center gap-4">
<a <a
href="#downloads" href="#downloads"
class="inline-flex items-center gap-2 rounded-xl bg-[#16a34a] px-7 py-3.5 text-base font-semibold text-white shadow-lg shadow-[#16a34a]/20 transition hover:bg-[#15803d]" class="inline-flex items-center gap-2 rounded-xl bg-[#15803d] px-7 py-3.5 text-base font-semibold text-white shadow-md shadow-[#15803d]/20 transition hover:bg-[#166534]"
> >
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <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 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /> <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" />
@@ -44,58 +44,58 @@
<a <a
href="#showcase" href="#showcase"
class="inline-flex items-center rounded-xl border border-white/10 bg-white/5 px-7 py-3.5 text-base font-semibold text-slate-200 transition hover:bg-white/10 hover:text-white" class="inline-flex items-center rounded-xl border border-slate-200 bg-white px-7 py-3.5 text-base font-semibold text-slate-700 shadow-xs transition hover:bg-slate-50 hover:border-slate-300"
> >
See How It Looks See How It Looks
</a> </a>
</div> </div>
<!-- Quick facts --> <!-- Quick facts -->
<div class="mt-10 flex flex-wrap items-center justify-center gap-3 text-sm text-slate-400"> <div class="mt-10 flex flex-wrap items-center justify-center gap-3 text-sm text-slate-600">
<span class="flex items-center gap-1.5"> <span class="flex items-center gap-1.5">
<span class="h-1.5 w-1.5 rounded-full bg-[#4ade80]"></span> <span class="h-2 w-2 rounded-full bg-[#15803d]"></span>
Windows &amp; Android Windows &amp; Android
</span> </span>
<span class="text-slate-600">·</span> <span class="text-slate-300">·</span>
<span class="flex items-center gap-1.5"> <span class="flex items-center gap-1.5">
<span class="h-1.5 w-1.5 rounded-full bg-amber-400"></span> <span class="h-2 w-2 rounded-full bg-amber-500"></span>
100% Offline — Works on School Wi-Fi 100% Offline — Works on School Wi-Fi
</span> </span>
<span class="text-slate-600">·</span> <span class="text-slate-300">·</span>
<span class="flex items-center gap-1.5"> <span class="flex items-center gap-1.5">
<span class="h-1.5 w-1.5 rounded-full bg-[#4ade80]"></span> <span class="h-2 w-2 rounded-full bg-[#15803d]"></span>
Free for All TIS Staff Free for All TIS Staff
</span> </span>
</div> </div>
</div> </div>
<!-- Simple 4-highlight cards --> <!-- 4-highlight cards -->
<div class="mx-auto mt-20 max-w-5xl px-5 sm:px-8"> <div class="mx-auto mt-16 max-w-5xl px-5 sm:px-8">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4"> <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
<div class="rounded-2xl border border-white/8 bg-white/3 p-5 transition hover:bg-white/6"> <div class="rounded-2xl border border-slate-200/90 bg-white p-5 shadow-xs transition hover:shadow-md hover:border-slate-300">
<div class="text-2xl mb-3">📋</div> <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-[#ecfdf5] text-xl mb-3.5">📋</div>
<h3 class="font-display text-base font-semibold text-white">SF-10 &amp; SF-9 Records</h3> <h3 class="font-display text-base font-bold text-slate-900">SF-10 &amp; SF-9 Records</h3>
<p class="mt-1.5 text-sm text-slate-400 leading-relaxed">Register student basic info from official school forms quickly.</p> <p class="mt-1.5 text-sm text-slate-600 leading-relaxed">Register student basic info from official school forms quickly.</p>
</div> </div>
<div class="rounded-2xl border border-white/8 bg-white/3 p-5 transition hover:bg-white/6"> <div class="rounded-2xl border border-slate-200/90 bg-white p-5 shadow-xs transition hover:shadow-md hover:border-slate-300">
<div class="text-2xl mb-3">🗂️</div> <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-[#eff6ff] text-xl mb-3.5">🗂️</div>
<h3 class="font-display text-base font-semibold text-white">Document Archive</h3> <h3 class="font-display text-base font-bold text-slate-900">Document Archive</h3>
<p class="mt-1.5 text-sm text-slate-400 leading-relaxed">Organize historical student records from 2021 onwards in one place.</p> <p class="mt-1.5 text-sm text-slate-600 leading-relaxed">Organize historical student records from 2021 onwards in one place.</p>
</div> </div>
<div class="rounded-2xl border border-white/8 bg-white/3 p-5 transition hover:bg-white/6"> <div class="rounded-2xl border border-slate-200/90 bg-white p-5 shadow-xs transition hover:shadow-md hover:border-slate-300">
<div class="text-2xl mb-3">📷</div> <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-[#fffbeb] text-xl mb-3.5">📷</div>
<h3 class="font-display text-base font-semibold text-white">Scan Documents</h3> <h3 class="font-display text-base font-bold text-slate-900">Scan Documents</h3>
<p class="mt-1.5 text-sm text-slate-400 leading-relaxed">Use your Android phone to scan paper documents — the app reads the text automatically.</p> <p class="mt-1.5 text-sm text-slate-600 leading-relaxed">Use your Android phone to scan paper documents — the app reads text automatically.</p>
</div> </div>
<div class="rounded-2xl border border-white/8 bg-white/3 p-5 transition hover:bg-white/6"> <div class="rounded-2xl border border-slate-200/90 bg-white p-5 shadow-xs transition hover:shadow-md hover:border-slate-300">
<div class="text-2xl mb-3">🔒</div> <div class="flex h-11 w-11 items-center justify-center rounded-xl bg-[#ecfdf5] text-xl mb-3.5">🔒</div>
<h3 class="font-display text-base font-semibold text-white">Private &amp; Offline</h3> <h3 class="font-display text-base font-bold text-slate-900">Private &amp; Offline</h3>
<p class="mt-1.5 text-sm text-slate-400 leading-relaxed">Student data stays on school computers. No cloud, no internet required.</p> <p class="mt-1.5 text-sm text-slate-600 leading-relaxed">Student data stays on school computers. No cloud, no external servers required.</p>
</div> </div>
</div> </div>
src/components/Navbar.astro
+28 -19
View File
@@ -2,30 +2,31 @@
// Navbar component - Talisay Integrated School RMS // Navbar component - Talisay Integrated School RMS
--- ---
<header class="fixed left-0 right-0 top-0 z-50 border-b border-white/5 bg-[#09110c]/90 backdrop-blur-xl"> <header class="fixed left-0 right-0 top-0 z-50 border-b border-slate-200/80 bg-white/90 backdrop-blur-md shadow-xs">
<div class="mx-auto flex max-w-6xl items-center justify-between px-5 py-3.5 sm:px-8"> <div class="mx-auto flex max-w-6xl items-center justify-between px-5 py-3.5 sm:px-8">
<!-- Brand --> <!-- Brand -->
<a href="#" class="flex items-center gap-3"> <a href="#" class="flex items-center gap-3 group">
<img <img
src="/tis_logo.png" src="/tis_logo.png"
alt="Talisay Integrated School" alt="Talisay Integrated School"
class="h-9 w-9 object-contain" class="h-9 w-9 object-contain transition-transform group-hover:scale-105"
width="36" width="36"
height="36" height="36"
/> />
<div> <div>
<div class="font-display text-base font-bold text-white leading-none">TIS RMS</div> <div class="font-display text-base font-bold text-slate-900 leading-none">TIS RMS</div>
<div class="text-xs text-slate-400 mt-0.5">Talisay Integrated School</div> <div class="text-xs text-slate-500 mt-0.5 font-normal">Talisay Integrated School</div>
</div> </div>
</a> </a>
<!-- Desktop Navigation --> <!-- Desktop Navigation -->
<nav class="hidden items-center gap-7 text-sm text-slate-300 lg:flex"> <nav class="hidden items-center gap-7 text-sm font-medium text-slate-600 lg:flex">
<a href="#showcase" class="transition hover:text-white">App Preview</a> <a href="#showcase" class="transition hover:text-slate-900">App Preview</a>
<a href="#school-forms" class="transition hover:text-white">School Forms</a> <a href="#school-forms" class="transition hover:text-slate-900">School Forms</a>
<a href="#features" class="transition hover:text-white">Features</a> <a href="#ocr-pipeline" class="transition hover:text-slate-900">Scanning</a>
<a href="#downloads" class="transition hover:text-white">Downloads</a> <a href="#features" class="transition hover:text-slate-900">Features</a>
<a href="#downloads" class="transition hover:text-slate-900">Downloads</a>
</nav> </nav>
<!-- Actions --> <!-- Actions -->
@@ -34,15 +35,21 @@
href="https://github.com/ssbg04/TIS_RMS" href="https://github.com/ssbg04/TIS_RMS"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
class="hidden items-center rounded-lg border border-white/10 bg-white/5 px-3.5 py-2 text-sm text-slate-300 transition hover:bg-white/10 hover:text-white sm:inline-flex" class="hidden items-center rounded-lg border border-slate-200 bg-white px-3.5 py-2 text-sm font-medium text-slate-700 transition hover:bg-slate-50 hover:border-slate-300 sm:inline-flex shadow-xs"
> >
<svg class="h-4 w-4 mr-1.5 text-slate-600" 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 GitHub
</a> </a>
<a <a
href="#downloads" href="#downloads"
class="inline-flex items-center rounded-lg bg-[#16a34a] px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#15803d]" class="inline-flex items-center gap-1.5 rounded-lg bg-[#15803d] px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#166534] shadow-sm"
> >
<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 Download
</a> </a>
@@ -50,7 +57,7 @@
<button <button
id="mobile-menu-btn" id="mobile-menu-btn"
type="button" type="button"
class="inline-flex items-center justify-center rounded-lg border border-white/10 bg-white/5 p-2 text-slate-300 hover:text-white lg:hidden" class="inline-flex items-center justify-center rounded-lg border border-slate-200 bg-white p-2 text-slate-700 hover:bg-slate-50 lg:hidden shadow-xs"
aria-label="Toggle Navigation Menu" aria-label="Toggle Navigation Menu"
> >
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"> <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -61,12 +68,14 @@
</div> </div>
<!-- Mobile Menu --> <!-- Mobile Menu -->
<div id="mobile-menu" class="hidden border-b border-white/5 bg-[#09110c] px-5 py-4 lg:hidden"> <div id="mobile-menu" class="hidden border-b border-slate-200 bg-white px-5 py-4 lg:hidden shadow-md">
<nav class="flex flex-col gap-3 text-sm text-slate-200"> <nav class="flex flex-col gap-3 text-sm font-medium text-slate-700">
<a href="#showcase" class="py-1 transition hover:text-white">App Preview</a> <a href="#showcase" class="py-1 transition hover:text-[#15803d]">App Preview</a>
<a href="#school-forms" class="py-1 transition hover:text-white">School Forms</a> <a href="#school-forms" class="py-1 transition hover:text-[#15803d]">School Forms</a>
<a href="#features" class="py-1 transition hover:text-white">Features</a> <a href="#ocr-pipeline" class="py-1 transition hover:text-[#15803d]">Document Scanning</a>
<a href="#downloads" class="py-1 transition hover:text-white">Downloads</a> <a href="#features" class="py-1 transition hover:text-[#15803d]">Features</a>
<a href="#downloads" class="py-1 transition hover:text-[#15803d]">Downloads</a>
<a href="https://github.com/ssbg04/TIS_RMS" target="_blank" rel="noopener noreferrer" class="py-1 transition text-slate-500 hover:text-slate-800">View on GitHub →</a>
</nav> </nav>
</div> </div>
</header> </header>
src/components/OcrPipeline.astro
+29 -24
View File
@@ -2,46 +2,48 @@
// OcrPipeline component - How document scanning works, in plain English // OcrPipeline component - How document scanning works, in plain English
--- ---
<section id="ocr-pipeline" class="relative bg-[#09110c] py-24 border-t border-white/5 text-white"> <section id="ocr-pipeline" class="relative bg-white py-20 border-t border-slate-200">
<div class="mx-auto max-w-6xl px-5 sm:px-8"> <div class="mx-auto max-w-6xl px-5 sm:px-8">
<!-- Header --> <!-- Header -->
<div class="mx-auto max-w-2xl text-center"> <div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold text-[#4ade80] uppercase tracking-widest mb-3">Document Scanning</p> <div class="inline-flex items-center gap-1.5 rounded-full border border-emerald-200 bg-[#ecfdf5] px-3.5 py-1 text-xs font-semibold text-[#15803d] uppercase tracking-wider mb-3.5">
<h2 class="font-display text-3xl font-bold text-white sm:text-4xl"> Document Scanning
</div>
<h2 class="font-display text-3xl font-bold text-slate-900 sm:text-4xl">
How scanning a document works. How scanning a document works.
</h2> </h2>
<p class="mt-4 text-base text-slate-400 leading-relaxed"> <p class="mt-3 text-base text-slate-600 leading-relaxed">
Point your Android phone at a paper document — the app does the rest. No manual typing required. Point your Android phone at a paper document — the app does the rest. No manual typing required.
</p> </p>
</div> </div>
<!-- 3-step flow --> <!-- 3-step flow -->
<div class="mt-14 grid gap-5 sm:grid-cols-3"> <div class="mt-12 grid gap-5 sm:grid-cols-3">
<div class="relative rounded-2xl border border-white/8 bg-white/3 p-7"> <div class="relative rounded-2xl border border-slate-200/90 bg-white p-7 shadow-xs transition hover:shadow-md hover:border-slate-300">
<div class="absolute -top-4 left-7 flex h-8 w-8 items-center justify-center rounded-full bg-[#16a34a] text-sm font-bold text-white">1</div> <div class="absolute -top-4 left-7 flex h-8 w-8 items-center justify-center rounded-full bg-[#15803d] text-sm font-bold text-white shadow-xs">1</div>
<div class="text-3xl mt-2 mb-4">📸</div> <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-[#ecfdf5] text-2xl mt-2 mb-4">📸</div>
<h3 class="font-display text-lg font-semibold text-white">Scan or Upload</h3> <h3 class="font-display text-lg font-bold text-slate-900">Scan or Upload</h3>
<p class="mt-2 text-sm text-slate-400 leading-relaxed"> <p class="mt-2 text-sm text-slate-600 leading-relaxed">
Use the Android app to take a photo of the paper document, or drag and drop a PDF into the desktop app. Use the Android app to take a photo of the paper document, or drag and drop a PDF into the desktop app.
</p> </p>
</div> </div>
<div class="relative rounded-2xl border border-white/8 bg-white/3 p-7"> <div class="relative rounded-2xl border border-slate-200/90 bg-white p-7 shadow-xs transition hover:shadow-md hover:border-slate-300">
<div class="absolute -top-4 left-7 flex h-8 w-8 items-center justify-center rounded-full bg-[#16a34a] text-sm font-bold text-white">2</div> <div class="absolute -top-4 left-7 flex h-8 w-8 items-center justify-center rounded-full bg-[#15803d] text-sm font-bold text-white shadow-xs">2</div>
<div class="text-3xl mt-2 mb-4">🔍</div> <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-[#eff6ff] text-2xl mt-2 mb-4">🔍</div>
<h3 class="font-display text-lg font-semibold text-white">App Reads the Form</h3> <h3 class="font-display text-lg font-bold text-slate-900">App Reads the Form</h3>
<p class="mt-2 text-sm text-slate-400 leading-relaxed"> <p class="mt-2 text-sm text-slate-600 leading-relaxed">
The system automatically reads the student's name, LRN, birth date, and other details from the scanned image. The system automatically reads the student's name, LRN, birth date, and other details from the scanned image.
</p> </p>
</div> </div>
<div class="relative rounded-2xl border border-white/8 bg-white/3 p-7"> <div class="relative rounded-2xl border border-slate-200/90 bg-white p-7 shadow-xs transition hover:shadow-md hover:border-slate-300">
<div class="absolute -top-4 left-7 flex h-8 w-8 items-center justify-center rounded-full bg-[#16a34a] text-sm font-bold text-white">3</div> <div class="absolute -top-4 left-7 flex h-8 w-8 items-center justify-center rounded-full bg-[#15803d] text-sm font-bold text-white shadow-xs">3</div>
<div class="text-3xl mt-2 mb-4">✅</div> <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-[#ecfdf5] text-2xl mt-2 mb-4">✅</div>
<h3 class="font-display text-lg font-semibold text-white">Record is Saved</h3> <h3 class="font-display text-lg font-bold text-slate-900">Record is Saved</h3>
<p class="mt-2 text-sm text-slate-400 leading-relaxed"> <p class="mt-2 text-sm text-slate-600 leading-relaxed">
The student record is saved to the school database and becomes instantly searchable from any teacher workstation. The student record is saved to the school database and becomes instantly searchable from any teacher workstation.
</p> </p>
</div> </div>
@@ -49,15 +51,18 @@
</div> </div>
<!-- CTA Banner --> <!-- CTA Banner -->
<div class="mt-12 rounded-2xl border border-white/8 bg-white/3 p-8 text-center"> <div class="mt-12 rounded-2xl border border-emerald-200/80 bg-gradient-to-br from-emerald-50/70 via-white to-slate-50 p-8 sm:p-10 text-center shadow-xs">
<h3 class="font-display text-2xl font-bold text-white">Digitize 100+ records in minutes.</h3> <h3 class="font-display text-2xl font-bold text-slate-900">Digitize 100+ records in minutes.</h3>
<p class="mt-3 text-base text-slate-400 max-w-xl mx-auto leading-relaxed"> <p class="mt-2.5 text-base text-slate-600 max-w-xl mx-auto leading-relaxed">
Instead of manually typing student information one by one, staff can scan whole stacks of documents quickly and accurately. Instead of manually typing student information one by one, staff can scan whole stacks of documents quickly and accurately.
</p> </p>
<a <a
href="#downloads" href="#downloads"
class="mt-6 inline-flex items-center rounded-xl bg-[#16a34a] px-6 py-3 text-sm font-semibold text-white shadow-md shadow-[#16a34a]/20 hover:bg-[#15803d] transition" class="mt-6 inline-flex items-center gap-2 rounded-xl bg-[#15803d] px-6 py-3 text-sm font-semibold text-white shadow-md shadow-[#15803d]/15 hover:bg-[#166534] 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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
Get the App Get the App
</a> </a>
</div> </div>
src/components/SchoolForms.astro
+57 -52
View File
@@ -2,50 +2,52 @@
// SchoolForms component - SF-10 & SF-9 integration explained simply // SchoolForms component - SF-10 & SF-9 integration explained simply
--- ---
<section id="school-forms" class="relative bg-[#09110c] py-24 border-t border-white/5 text-white"> <section id="school-forms" class="relative bg-[#f8fafc] py-20 border-t border-slate-200">
<div class="mx-auto max-w-6xl px-5 sm:px-8"> <div class="mx-auto max-w-6xl px-5 sm:px-8">
<div class="grid gap-14 lg:grid-cols-2 lg:items-center"> <div class="grid gap-12 lg:grid-cols-2 lg:items-center">
<!-- Left: Description --> <!-- Left: Description -->
<div> <div>
<p class="text-sm font-semibold text-amber-400 uppercase tracking-widest mb-3">School Forms</p> <div class="inline-flex items-center gap-1.5 rounded-full border border-amber-200 bg-amber-50 px-3.5 py-1 text-xs font-semibold text-amber-800 uppercase tracking-wider mb-3.5">
School Forms Integration
</div>
<h2 class="font-display text-3xl font-bold text-white sm:text-4xl leading-tight"> <h2 class="font-display text-3xl font-bold text-slate-900 sm:text-4xl leading-tight">
Register students using SF-10 &amp; SF-9 forms. Register students using SF-10 &amp; SF-9 forms.
</h2> </h2>
<p class="mt-5 text-base text-slate-400 leading-relaxed"> <p class="mt-4 text-base text-slate-600 leading-relaxed">
TIS RMS uses the official <strong class="text-white">School Form 10 (SF-10)</strong> and <strong class="text-white">School Form 9 (SF-9)</strong> as the fastest way to add student basic information into the system from old documents. TIS RMS uses the official <strong class="text-slate-900 font-semibold">School Form 10 (SF-10)</strong> and <strong class="text-slate-900 font-semibold">School Form 9 (SF-9)</strong> as the fastest way to add student basic information into the system from old documents.
</p> </p>
<div class="mt-4 rounded-xl border border-amber-500/20 bg-amber-500/8 p-4 text-sm text-amber-300 leading-relaxed"> <div class="mt-5 rounded-xl border border-amber-200 bg-amber-50/80 p-4 text-sm text-amber-900 leading-relaxed shadow-xs">
<strong class="text-amber-200">Note:</strong> TIS RMS is for registering basic student information from historical records (2021 onwards). It is <strong>not an enrollment system</strong> and does not track grades. <strong class="font-bold text-amber-950">Administrative Note:</strong> TIS RMS is specifically scoped for digitizing basic learner profiles from historical records (2021 onwards). It is <strong>not an enrollment system</strong> and does not track grading periods.
</div> </div>
<div class="mt-8 space-y-4"> <div class="mt-7 space-y-3.5">
<div class="flex items-start gap-4 rounded-xl border border-white/8 bg-white/3 p-5"> <div class="flex items-start gap-4 rounded-xl border border-slate-200/90 bg-white p-5 shadow-xs transition hover:border-slate-300">
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[#16a34a]/20 text-[#4ade80] text-lg">1</div> <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-[#ecfdf5] text-[#15803d] font-bold text-base">1</div>
<div> <div>
<h3 class="font-display text-base font-semibold text-white">School Form 10 (SF-10)</h3> <h3 class="font-display text-base font-bold text-slate-900">School Form 10 (SF-10)</h3>
<p class="mt-1 text-sm text-slate-400 leading-relaxed">The main source for student basic information — captures name, LRN, birth date, gender, and originating school.</p> <p class="mt-1 text-sm text-slate-600 leading-relaxed">The primary source for learner profile data — captures name, LRN, birth date, gender, and originating school.</p>
</div> </div>
</div> </div>
<div class="flex items-start gap-4 rounded-xl border border-white/8 bg-white/3 p-5"> <div class="flex items-start gap-4 rounded-xl border border-slate-200/90 bg-white p-5 shadow-xs transition hover:border-slate-300">
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-amber-500/15 text-amber-400 text-lg">2</div> <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-amber-50 text-amber-700 font-bold text-base">2</div>
<div> <div>
<h3 class="font-display text-base font-semibold text-white">School Form 9 (SF-9)</h3> <h3 class="font-display text-base font-bold text-slate-900">School Form 9 (SF-9)</h3>
<p class="mt-1 text-sm text-slate-400 leading-relaxed">A supporting document used to cross-reference student identifiers and school year records from old files.</p> <p class="mt-1 text-sm text-slate-600 leading-relaxed">A secondary document used to cross-reference learner identifiers and school year records from legacy physical folders.</p>
</div> </div>
</div> </div>
<div class="flex items-start gap-4 rounded-xl border border-white/8 bg-white/3 p-5"> <div class="flex items-start gap-4 rounded-xl border border-slate-200/90 bg-white p-5 shadow-xs transition hover:border-slate-300">
<div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-500/15 text-blue-400 text-lg">3</div> <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-xl bg-blue-50 text-blue-700 font-bold text-base">3</div>
<div> <div>
<h3 class="font-display text-base font-semibold text-white">Auto-fill SF-10 Spreadsheet</h3> <h3 class="font-display text-base font-bold text-slate-900">Auto-fill SF-10 Spreadsheets</h3>
<p class="mt-1 text-sm text-slate-400 leading-relaxed">Once a student is registered, the system can generate a pre-filled official DepEd SF-10 Excel file — ready to submit.</p> <p class="mt-1 text-sm text-slate-600 leading-relaxed">Once registered, the system exports a pre-filled official DepEd SF-10 Excel file — ready for school reporting and audits.</p>
</div> </div>
</div> </div>
@@ -53,59 +55,62 @@
</div> </div>
<!-- Right: Sample record preview --> <!-- Right: Sample record preview -->
<div class="overflow-hidden rounded-2xl border border-white/8 bg-[#0c1610] shadow-xl"> <div class="overflow-hidden rounded-2xl border border-slate-300/80 bg-white shadow-xl">
<!-- Window bar --> <!-- Window bar matching app screenshot -->
<div class="flex items-center gap-2 border-b border-white/5 bg-[#15803d] px-5 py-3"> <div class="flex items-center justify-between border-b border-emerald-800/40 bg-[#15803d] px-5 py-3">
<span class="h-2.5 w-2.5 rounded-full bg-white/30"></span> <div class="flex items-center gap-2">
<span class="h-2.5 w-2.5 rounded-full bg-white/30"></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/30"></span> <span class="h-2.5 w-2.5 rounded-full bg-white/40"></span>
<span class="ml-2 text-sm font-medium text-white">Student Registration Form</span> <span class="h-2.5 w-2.5 rounded-full bg-white/40"></span>
<span class="ml-2 text-xs sm:text-sm font-medium text-white">Student Registration Form</span>
</div>
<span class="rounded bg-white/20 px-2 py-0.5 text-xs text-white">SF-10 Parser</span>
</div> </div>
<!-- Sample data --> <!-- Sample data -->
<div class="p-6 space-y-4"> <div class="p-6 space-y-4 bg-white">
<div class="rounded-xl border border-white/6 bg-white/3 p-4"> <div class="rounded-xl border border-slate-200 bg-slate-50/70 p-4">
<p class="text-xs font-semibold text-[#4ade80] uppercase tracking-wider mb-3">Learner Basic Information</p> <p class="text-xs font-bold text-[#15803d] uppercase tracking-wider mb-3">Learner Basic Information</p>
<div class="grid grid-cols-2 gap-3"> <div class="grid grid-cols-2 gap-3">
<div class="rounded-lg bg-[#09110c] p-3 border border-white/5"> <div class="rounded-lg bg-white p-3 border border-slate-200/80 shadow-xs">
<div class="text-xs text-slate-500 mb-1">LRN</div> <div class="text-xs text-slate-500 mb-0.5">LRN</div>
<div class="text-sm font-semibold text-[#4ade80]">108297100170</div> <div class="text-sm font-bold text-[#15803d] tracking-wide">108297100170</div>
</div> </div>
<div class="rounded-lg bg-[#09110c] p-3 border border-white/5"> <div class="rounded-lg bg-white p-3 border border-slate-200/80 shadow-xs">
<div class="text-xs text-slate-500 mb-1">Full Name</div> <div class="text-xs text-slate-500 mb-0.5">Full Name</div>
<div class="text-sm font-semibold text-white">Garcia, Cris Charles</div> <div class="text-sm font-bold text-slate-900">Garcia, Cris Charles</div>
</div> </div>
<div class="rounded-lg bg-[#09110c] p-3 border border-white/5"> <div class="rounded-lg bg-white p-3 border border-slate-200/80 shadow-xs">
<div class="text-xs text-slate-500 mb-1">Year Level</div> <div class="text-xs text-slate-500 mb-0.5">Year Level</div>
<div class="text-sm font-semibold text-amber-400">Grade 7</div> <div class="text-sm font-semibold text-amber-700">Grade 7 — JHS</div>
</div> </div>
<div class="rounded-lg bg-[#09110c] p-3 border border-white/5"> <div class="rounded-lg bg-white p-3 border border-slate-200/80 shadow-xs">
<div class="text-xs text-slate-500 mb-1">School</div> <div class="text-xs text-slate-500 mb-0.5">School</div>
<div class="text-sm font-semibold text-white">Talisay Integrated School</div> <div class="text-sm font-semibold text-slate-900">Talisay Integrated School</div>
</div> </div>
</div> </div>
</div> </div>
<div class="rounded-xl border border-white/6 bg-white/3 p-4 space-y-2.5"> <div class="rounded-xl border border-slate-200 bg-slate-50/70 p-4 space-y-2.5">
<p class="text-xs font-semibold text-amber-400 uppercase tracking-wider">Document Fields (from SF-10)</p> <p class="text-xs font-bold text-amber-700 uppercase tracking-wider">Document Fields (from SF-10)</p>
{[ {[
["Date of Birth", "April 14, 2009"], ["Date of Birth", "April 14, 2009"],
["Sex", "Male"], ["Sex", "Male"],
["Originating School", "Talisay Elementary School"], ["Originating School", "Talisay Elementary School"],
["Document Source", "SF-10 Archive (2021+)"], ["Document Source", "SF-10 Physical Archive (2021+)"],
].map(([field, value]) => ( ].map(([field, value]) => (
<div class="flex items-center justify-between text-sm border-b border-white/5 pb-2 last:border-0 last:pb-0"> <div class="flex items-center justify-between text-sm border-b border-slate-200/70 pb-2 last:border-0 last:pb-0">
<span class="text-slate-400">{field}</span> <span class="text-slate-600">{field}</span>
<span class="text-white font-medium">{value}</span> <span class="text-slate-900 font-semibold">{value}</span>
</div> </div>
))} ))}
</div> </div>
<div class="flex items-center justify-between rounded-xl bg-[#16a34a]/10 border border-[#16a34a]/20 p-3.5"> <div class="flex items-center justify-between rounded-xl bg-emerald-50 border border-emerald-200 p-3.5">
<span class="text-sm text-slate-300">Basic info registration only — <span class="text-white font-medium">no grade tracking</span></span> <span class="text-xs sm:text-sm text-slate-700">Basic info registration only — <span class="text-slate-900 font-semibold">no grade tracking</span></span>
<span class="rounded-lg bg-[#16a34a] px-3 py-1 text-xs font-semibold text-white">Save Record</span> <span class="rounded-lg bg-[#15803d] px-3.5 py-1.5 text-xs font-semibold text-white shadow-xs">Save Record</span>
</div> </div>
</div> </div>
src/components/TechStack.astro
+15 -13
View File
@@ -2,33 +2,35 @@
// TechStack component - Simplified "built with" section for transparency // TechStack component - Simplified "built with" section for transparency
--- ---
<section id="tech-stack" class="relative bg-[#09110c] py-20 border-t border-white/5 text-white"> <section id="tech-stack" class="relative bg-[#f8fafc] py-16 border-t border-slate-200">
<div class="mx-auto max-w-6xl px-5 sm:px-8"> <div class="mx-auto max-w-6xl px-5 sm:px-8">
<!-- Header --> <!-- Header -->
<div class="mx-auto max-w-2xl text-center"> <div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold text-slate-400 uppercase tracking-widest mb-3">Built With</p> <div class="inline-flex items-center gap-1.5 rounded-full border border-slate-200 bg-white px-3.5 py-1 text-xs font-semibold text-slate-600 uppercase tracking-wider mb-3.5 shadow-xs">
<h2 class="font-display text-2xl font-bold text-white sm:text-3xl"> Built With
</div>
<h2 class="font-display text-2xl font-bold text-slate-900 sm:text-3xl">
Reliable technology for school use. Reliable technology for school use.
</h2> </h2>
<p class="mt-3 text-base text-slate-400 leading-relaxed"> <p class="mt-2.5 text-base text-slate-600 leading-relaxed">
TIS RMS is built with modern, proven tools chosen for long-term stability and ease of maintenance. TIS RMS is built with modern, proven tools chosen for long-term stability and ease of maintenance.
</p> </p>
</div> </div>
<!-- Simple tech tags — readable, not detailed --> <!-- Tech tags -->
<div class="mt-12 flex flex-wrap justify-center gap-3"> <div class="mt-10 flex flex-wrap justify-center gap-2.5">
{[ {[
"Flutter (Windows & Android)", "Flutter (Windows Desktop & Android)",
"Node.js Server", "Node.js Backend",
"SQLite Database", "SQLite Database",
"Tesseract OCR", "Tesseract OCR Pipeline",
"ExcelJS", "DepEd SF-10 Excel Generator",
"Campus LAN Architecture", "Campus LAN Architecture",
"Role-Based Access", "Role-Based Access Control",
"Windows Installer", "Windows NSIS Installer",
].map((tech) => ( ].map((tech) => (
<span class="rounded-full border border-white/10 bg-white/4 px-4 py-2 text-sm text-slate-300"> <span class="rounded-full border border-slate-200 bg-white px-4 py-1.5 text-sm font-medium text-slate-700 shadow-xs transition hover:border-slate-300">
{tech} {tech}
</span> </span>
))} ))}
src/layouts/Layout.astro
+12 -2
View File
@@ -13,7 +13,7 @@ const {
--- ---
<!doctype html> <!doctype html>
<html lang="en" class="scroll-smooth dark"> <html lang="en" class="scroll-smooth">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -35,7 +35,17 @@ const {
<link rel="icon" href="/tis_logo.png" type="image/png" /> <link rel="icon" href="/tis_logo.png" type="image/png" />
</head> </head>
<body class="bg-[#09110c] text-slate-100 selection:bg-[#16a34a] selection:text-white school-watermark-bg min-h-screen"> <body class="bg-[#f8fafc] text-slate-800 selection:bg-[#15803d] selection:text-white school-watermark-bg min-h-screen relative antialiased">
<!-- Faint school emblem watermark matching app desktop background -->
<div class="fixed inset-0 pointer-events-none -z-10 flex items-center justify-center overflow-hidden">
<img
src="/tis_logo.png"
alt=""
aria-hidden="true"
class="w-[680px] h-[680px] object-contain opacity-[0.032] grayscale select-none blur-[0.5px]"
/>
</div>
<slot /> <slot />
</body> </body>
</html>␍ </html>␍
src/styles/global.css
+41 -22
View File
@@ -5,23 +5,26 @@
--font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-display: 'Outfit', sans-serif; --font-display: 'Outfit', sans-serif;
--bg-base: #09110c; --bg-base: #f8fafc;
--bg-surface: #0e1a12; --bg-surface: #ffffff;
--bg-card: #112017; --bg-card: #ffffff;
--bg-subtle: #f1f5f9;
--border: #1f3627; --border: #e2e8f0;
--border-strong: #2a4c37; --border-strong: #cbd5e1;
--green: #16a34a; --green: #15803d;
--green-light: #22c55e; --green-light: #16a34a;
--green-glow: #4ade80; --green-soft: #ecfdf5;
--green-hover: #15803d; --green-pill-border: #bbf7d0;
--green-hover: #166534;
--gold: #f59e0b; --gold: #d97706;
--text-main: #f8fafc; --text-main: #0f172a;
--text-muted: #94a3b8; --text-body: #334155;
--text-subtle: #64748b; --text-muted: #64748b;
--text-subtle: #94a3b8;
} }
html { html {
@@ -29,14 +32,14 @@ html {
font-family: var(--font-sans); font-family: var(--font-sans);
font-size: 16px; font-size: 16px;
background-color: var(--bg-base); background-color: var(--bg-base);
color: var(--text-main); color: var(--text-body);
color-scheme: dark; color-scheme: light;
} }
body { body {
margin: 0; margin: 0;
background-color: var(--bg-base); background-color: var(--bg-base);
color: var(--text-main); color: var(--text-body);
overflow-x: hidden; overflow-x: hidden;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
line-height: 1.6; line-height: 1.6;
@@ -45,6 +48,7 @@ body {
h1, h2, h3, h4, .font-display { h1, h2, h3, h4, .font-display {
font-family: var(--font-display); font-family: var(--font-display);
line-height: 1.2; line-height: 1.2;
color: var(--text-main);
} }
::selection { ::selection {
@@ -52,15 +56,30 @@ h1, h2, h3, h4, .font-display {
color: #ffffff; color: #ffffff;
} }
/* Glass nav */ /* Watermark school background effect from app screenshot */
.school-watermark-bg {
background-image:
radial-gradient(circle at 50% 0%, rgba(22, 163, 74, 0.05) 0%, transparent 60%),
radial-gradient(circle at 100% 100%, rgba(22, 163, 74, 0.03) 0%, transparent 50%);
}
.school-crest-watermark {
position: absolute;
pointer-events: none;
opacity: 0.04;
user-select: none;
}
/* Glass nav for light mode */
.glass-nav { .glass-nav {
background: rgba(9, 17, 12, 0.92); background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(20px); backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid #e2e8f0;
} }
/* Custom Scrollbar */ /* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); } ::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--green); } ::-webkit-scrollbar-thumb:hover { background: var(--green); }