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">
<!-- Header -->
<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>
<h2 class="font-display text-3xl font-bold text-white sm:text-4xl">
<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">
App Preview
</div>
<h2 class="font-display text-3xl font-bold text-slate-900 sm:text-4xl">
See the app in action.
</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.
</p>
</div>
<!-- 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) => (
<button
type="button"
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
? "bg-[#16a34a] text-white border-[#16a34a]"
: "bg-transparent text-slate-400 border-white/10 hover:text-white hover:border-white/20"
? "bg-[#15803d] text-white border-[#15803d] shadow-sm"
: "bg-white text-slate-600 border-slate-200 hover:text-slate-900 hover:border-slate-300"
}`}
>
{tab.title}
@@ -59,34 +61,42 @@ const showcaseTabs = [
))}
</div>
<!-- Screenshot Window -->
<div class="mt-8 overflow-hidden rounded-2xl border border-white/10 bg-[#0c1610] shadow-2xl shadow-black/60">
<!-- Screenshot Window (Authentic Desktop Client Window Styling) -->
<div class="mt-8 overflow-hidden rounded-2xl border border-slate-300/80 bg-white shadow-xl">
<!-- Simple window titlebar -->
<div class="flex items-center gap-2.5 border-b border-white/5 bg-[#15803d] px-4 py-2.5">
<img src="/tis_logo.png" alt="TIS" class="h-4 w-4 object-contain" />
<span class="text-sm font-semibold text-white">TIS Record Management System</span>
<!-- Desktop Client Titlebar matching app screenshot -->
<div class="flex items-center justify-between border-b border-emerald-800/40 bg-[#15803d] px-4 py-2.5 select-none">
<div class="flex items-center gap-2.5">
<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>
<!-- 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) => (
<div
id={`tab-content-${tab.id}`}
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
src={tab.image}
alt={`TIS RMS ${tab.title}`}
loading="lazy"
class="w-full object-cover aspect-[16/10]"
class="w-full object-cover aspect-[16/9.5]"
/>
</div>
<!-- Caption -->
<div class="mt-4 text-center">
<h3 class="font-display text-lg font-semibold text-white">{tab.title}</h3>
<p class="text-sm text-slate-400 mt-1">{tab.tagline}</p>
<div class="mt-4 text-center pb-2">
<h3 class="font-display text-lg font-bold text-slate-900">{tab.title}</h3>
<p class="text-sm text-slate-600 mt-0.5">{tab.tagline}</p>
</div>
</div>
))}
@@ -105,12 +115,12 @@ const showcaseTabs = [
const target = btn.dataset.tab;
buttons.forEach((b) => {
b.classList.remove('bg-[#16a34a]', 'text-white', 'border-[#16a34a]');
b.classList.add('bg-transparent', 'text-slate-400', 'border-white/10');
b.classList.remove('bg-[#15803d]', 'text-white', 'border-[#15803d]', 'shadow-sm');
b.classList.add('bg-white', 'text-slate-600', 'border-slate-200');
});
btn.classList.remove('bg-transparent', 'text-slate-400', 'border-white/10');
btn.classList.add('bg-[#16a34a]', 'text-white', 'border-[#16a34a]');
btn.classList.remove('bg-white', 'text-slate-600', 'border-slate-200');
btn.classList.add('bg-[#15803d]', 'text-white', 'border-[#15803d]', 'shadow-sm');
contents.forEach((content) => {
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
---
<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">
<!-- Header -->
<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>
<h2 class="font-display text-3xl font-bold text-white sm:text-4xl">
<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">
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.
</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.
</p>
</div>
<!-- 3 cards -->
<div class="mt-14 grid gap-5 sm:grid-cols-3">
<!-- 3 network cards -->
<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="text-4xl mb-4">🖥️</div>
<h3 class="font-display text-lg font-semibold text-white">Teacher Computers</h3>
<p class="mt-2 text-sm text-slate-400 leading-relaxed">
<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="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-bold text-slate-900">Teacher Computers</h3>
<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.
</p>
</div>
<div class="rounded-2xl border border-[#16a34a]/30 bg-[#16a34a]/5 p-7 text-center">
<div class="text-4xl mb-4">🏫</div>
<h3 class="font-display text-lg font-semibold text-white">School Server PC</h3>
<p class="mt-2 text-sm text-slate-400 leading-relaxed">
<div class="rounded-2xl border-2 border-[#15803d]/40 bg-[#ecfdf5] p-7 text-center shadow-xs relative">
<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">
Campus Host
</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.
</p>
</div>
<div class="rounded-2xl border border-white/8 bg-white/3 p-7 text-center">
<div class="text-4xl mb-4">📡</div>
<h3 class="font-display text-lg font-semibold text-white">School Wi-Fi / LAN</h3>
<p class="mt-2 text-sm text-slate-400 leading-relaxed">
<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="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-bold text-slate-900">School Wi-Fi / LAN</h3>
<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.
</p>
</div>
@@ -46,25 +51,31 @@
</div>
<!-- 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">
<h4 class="font-display text-base font-semibold text-white mb-2">Works Without Internet</h4>
<p class="text-sm text-slate-400 leading-relaxed">
<div class="rounded-2xl border border-slate-200/90 bg-white p-6 shadow-xs">
<h4 class="font-display text-base font-bold text-slate-900 mb-2 flex items-center gap-2">
<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.
</p>
</div>
<div class="rounded-2xl border border-white/8 bg-white/3 p-6">
<h4 class="font-display text-base font-semibold text-white mb-2">Student Data Stays Private</h4>
<p class="text-sm text-slate-400 leading-relaxed">
<div class="rounded-2xl border border-slate-200/90 bg-white p-6 shadow-xs">
<h4 class="font-display text-base font-bold text-slate-900 mb-2 flex items-center gap-2">
<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.
</p>
</div>
<div class="rounded-2xl border border-white/8 bg-white/3 p-6">
<h4 class="font-display text-base font-semibold text-white mb-2">Fast Local Performance</h4>
<p class="text-sm text-slate-400 leading-relaxed">
<div class="rounded-2xl border border-slate-200/90 bg-white p-6 shadow-xs">
<h4 class="font-display text-base font-bold text-slate-900 mb-2 flex items-center gap-2">
<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.
</p>
</div>
src/components/Downloads.astro
+248 -103
View File
@@ -1,136 +1,253 @@
---
// Downloads component - Official installers for Talisay Integrated School
let latestReleaseTag = "v1.0.10";
let winAssetSize = "19.6 MB";
let apkAssetSize = "83.4 MB";
// Default asset sizes & URLs (v1.0.27 latest release)
let latestReleaseTag = "v1.0.27";
let publishedDateStr = "Latest Release";
try {
const res = await fetch("https://api.github.com/repos/ssbg04/TIS_RMS/releases/latest", {
headers: { "User-Agent": "TIS-RMS-Web" }
});
if (res.ok) {
const data = await res.json();
if (data.tag_name) latestReleaseTag = data.tag_name;
if (data.published_at) {
publishedDateStr = new Date(data.published_at).toLocaleDateString("en-US", {
month: "long",
day: "numeric",
year: "numeric"
});
}
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
}
let winAssetSize = "18.2 MB";
let winDownloadUrl = "https://github.com/ssbg04/TIS_RMS/releases/download/v1.0.27/TIS_RMS_Client_Setup_v1.0.27.exe";
let apkUniversalSize = "75.4 MB";
let apkUniversalUrl = "https://github.com/ssbg04/TIS_RMS/releases/download/v1.0.27/TIS_RMS_Universal_v1.0.27.apk";
let apk64Size = "29.4 MB";
let apk64Url = "https://github.com/ssbg04/TIS_RMS/releases/download/v1.0.27/TIS_RMS_64_v1.0.27.apk";
let apk32Size = "27.4 MB";
let apk32Url = "https://github.com/ssbg04/TIS_RMS/releases/download/v1.0.27/TIS_RMS_32bit_v1.0.27.apk";
let releaseHtmlUrl = "https://github.com/ssbg04/TIS_RMS/releases/latest";
---
<section id="downloads" class="bg-[#09110c] py-24 text-white border-t border-white/5">
<div class="mx-auto max-w-5xl px-5 sm:px-8">
<section id="downloads" class="relative bg-white py-24 border-t border-slate-200">
<div class="mx-auto max-w-6xl px-5 sm:px-8">
<!-- Header -->
<div class="text-center mb-14">
<p class="text-sm font-semibold text-[#4ade80] uppercase tracking-widest mb-3">Downloads</p>
<h2 class="font-display text-3xl font-bold text-white sm:text-4xl">
Get the TIS RMS App
<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">
Official Installers
</div>
<h2 class="font-display text-3xl font-bold text-slate-900 sm:text-4xl">
Download TIS RMS
</h2>
<p class="mt-4 text-base text-slate-400 max-w-lg mx-auto leading-relaxed">
Free for all Talisay Integrated School staff. Available for Windows and Android.
<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 campus workstations and Android mobile devices.
</p>
<div class="mt-4 flex 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>·</span>
<div class="mt-4 flex flex-wrap items-center justify-center gap-2 text-sm text-slate-500">
<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">
{latestReleaseTag}
</span>
<span class="text-slate-300">·</span>
<span id="release-date-label">{publishedDateStr}</span>
<span>·</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>
<span class="text-slate-300">·</span>
<a href={releaseHtmlUrl} target="_blank" rel="noopener noreferrer" class="github-release-notes-link font-medium text-[#15803d] hover:underline">
Release Notes →
</a>
</div>
</div>
<!-- Download Cards -->
<div class="grid gap-5 sm:grid-cols-2">
<!-- Download Grid -->
<div class="grid gap-6 lg:grid-cols-12">
<!-- Windows Card -->
<div class="flex flex-col rounded-2xl border border-white/8 bg-white/3 p-8">
<div class="mb-6 flex h-14 w-14 items-center justify-center rounded-xl bg-blue-500/10 border border-blue-500/15">
<svg class="h-7 w-7 text-blue-400" 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>
<!-- Windows Card (lg:col-span-5) -->
<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>
<!-- Header icon & badge -->
<div class="flex items-center justify-between mb-6">
<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>
<h3 class="font-display text-xl font-bold text-white">Windows</h3>
<p class="mt-2 text-base text-slate-400 leading-relaxed flex-1">
The main desktop app for teachers and registrars. One-click installer — works on your school network.
</p>
<p class="mt-3 text-sm text-slate-500">Windows 10 / 11 · <span id="win-release-size">{winAssetSize}</span></p>
<a
id="win-download-btn"
href="https://github.com/ssbg04/TIS_RMS/releases/latest/download/TIS_RMS_Client_Setup.exe"
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"
>
<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 Windows
</a>
<div class="mt-8">
<a
id="win-download-btn"
href={winDownloadUrl}
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"
>
<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 Windows
</a>
<p class="mt-2.5 text-center text-xs text-slate-500">
Works offline on school local Wi-Fi or wired network.
</p>
</div>
</div>
<!-- Android Card -->
<div class="flex flex-col rounded-2xl border border-white/8 bg-white/3 p-8">
<div class="mb-6 flex h-14 w-14 items-center justify-center rounded-xl bg-[#4ade80]/10 border border-[#4ade80]/15">
<svg class="h-7 w-7 text-[#4ade80]" 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>
<!-- Android Hub Card (lg:col-span-7) -->
<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>
<!-- Header icon & badge -->
<div class="flex items-center justify-between mb-6">
<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>
<h3 class="font-display text-xl font-bold text-white">Android</h3>
<p class="mt-2 text-base text-slate-400 leading-relaxed flex-1">
Use your phone to scan paper documents. The app reads student details automatically — no Play Store needed.
</p>
<p class="mt-3 text-sm text-slate-500">Android 8.0+ · <span id="apk-release-size">{apkAssetSize}</span></p>
<a
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>
<!-- Android installation tip -->
<div class="mt-6 pt-4 border-t border-slate-200/80 flex items-start gap-2.5 text-xs text-slate-500">
<span class="text-base text-amber-500 leading-none">💡</span>
<span>
<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>
</div>
</div>
</div>
<!-- IT Admin / 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">
<!-- IT Admin / Campus Server Note -->
<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>
<p class="text-sm font-semibold text-slate-300">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="text-sm font-bold text-slate-900">For IT Admins — Campus Server Setup</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>
<a
href="https://github.com/ssbg04/TIS_RMS"
target="_blank"
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">
<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>
View on GitHub
View GitHub Repository
</a>
</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>
</section>
@@ -150,11 +267,25 @@ try {
})
: "";
const winAsset = release.assets?.find(
(a: any) => a.name === "TIS_RMS_Client_Setup.exe" || a.name.endsWith(".exe")
const assets: any[] = release.assets || [];
// 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(
(a: any) => a.name === "TIS_RMS_Android_Universal.apk" || a.name.endsWith(".apk")
// 64-bit 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");
@@ -169,11 +300,25 @@ try {
if (winBtn && winAsset.browser_download_url) winBtn.href = winAsset.browser_download_url;
}
if (apkAsset) {
const apkSize = document.getElementById("apk-release-size");
if (apkSize) apkSize.textContent = `${(apkAsset.size / (1024 * 1024)).toFixed(1)} MB`;
const apkBtn = document.getElementById("apk-download-btn") as HTMLAnchorElement | null;
if (apkBtn && apkAsset.browser_download_url) apkBtn.href = apkAsset.browser_download_url;
if (universalAsset) {
const univSize = document.getElementById("apk-universal-size");
if (univSize) univSize.textContent = `${(universalAsset.size / (1024 * 1024)).toFixed(1)} MB`;
const univBtn = document.getElementById("apk-universal-btn") as HTMLAnchorElement | null;
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");
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">
<!-- Header -->
<div class="mx-auto max-w-2xl text-center">
<p class="text-sm font-semibold text-[#4ade80] uppercase tracking-widest mb-3">Features</p>
<h2 class="font-display text-3xl font-bold text-white sm:text-4xl">
<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">
Features
</div>
<h2 class="font-display text-3xl font-bold text-slate-900 sm:text-4xl">
Everything you need to manage school records.
</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.
</p>
</div>
<!-- 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) => (
<div class="rounded-2xl border border-white/8 bg-white/3 p-6 transition hover:bg-white/6 hover:border-white/14">
<div class="text-3xl mb-4">{item.icon}</div>
<h3 class="font-display text-lg font-semibold text-white">{item.title}</h3>
<p class="mt-2 text-sm text-slate-400 leading-relaxed">{item.description}</p>
<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="flex h-12 w-12 items-center justify-center rounded-xl bg-slate-50 border border-slate-100 text-2xl mb-4 shadow-xs">
{item.icon}
</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>
src/components/Footer.astro
+38 -24
View File
@@ -3,13 +3,13 @@
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="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 -->
<div class="space-y-3">
<div class="space-y-3 md:col-span-2">
<div class="flex items-center gap-3">
<img
src="/tis_logo.png"
@@ -17,48 +17,62 @@ const currentYear = new Date().getFullYear();
class="h-9 w-9 object-contain"
/>
<div>
<div class="font-display text-base font-bold text-white">TIS RMS</div>
<div class="text-xs text-amber-400">Talisay Integrated School</div>
<div class="font-display text-base font-bold text-slate-900">TIS RMS</div>
<div class="text-xs text-[#15803d] font-semibold">Talisay Integrated School</div>
</div>
</div>
<p class="text-sm text-slate-500 leading-relaxed max-w-xs">
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.
<p class="text-sm text-slate-500 leading-relaxed max-w-sm">
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>
<div class="pt-1 text-xs text-slate-400">
DepEd Division of Quezon · Region IV-A CALABARZON
</div>
</div>
<!-- Navigation -->
<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">
<li><a href="#showcase" class="hover:text-white transition">App Preview</a></li>
<li><a href="#school-forms" class="hover:text-white transition">School Forms</a></li>
<li><a href="#ocr-pipeline" class="hover:text-white transition">Document Scanning</a></li>
<li><a href="#features" class="hover:text-white transition">Features</a></li>
<li><a href="#downloads" class="hover:text-white transition">Downloads</a></li>
<li><a href="#showcase" class="hover:text-slate-900 transition">App Preview</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-slate-900 transition">Document Scanning</a></li>
<li><a href="#features" class="hover:text-slate-900 transition">Features</a></li>
<li><a href="#downloads" class="hover:text-slate-900 transition">Downloads Hub</a></li>
</ul>
</div>
<!-- Downloads -->
<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">
<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">
Windows App (.exe)
<span class="text-xs text-[#4ade80]">Latest</span>
<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">
<span>Windows App (.exe)</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>
</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">
Android App (.apk)
<span class="text-xs text-[#4ade80]">Latest</span>
<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">
<span>Android Universal (.apk)</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>
</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>
<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>
</ul>
</div>
@@ -66,9 +80,9 @@ const currentYear = new Date().getFullYear();
</div>
<!-- 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>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>
src/components/Hero.astro
+36 -36
View File
@@ -2,31 +2,31 @@
// 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 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 class="mx-auto max-w-4xl px-5 sm:px-8 text-center">
<!-- 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" />
<span class="text-amber-400 font-semibold">Talisay Integrated School</span>
<span class="text-slate-500">•</span>
<span>Tiaong, Quezon</span>
<span class="text-[#15803d] font-semibold">Talisay Integrated School</span>
<span class="text-slate-300">•</span>
<span class="text-slate-600">Tiaong, Quezon</span>
</div>
<!-- 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" />
<span class="text-[#4ade80]"> Made Simple.</span>
<span class="text-[#15803d]"> Made Simple.</span>
</h1>
<!-- 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.
</p>
@@ -34,7 +34,7 @@
<div class="mt-10 flex flex-wrap items-center justify-center gap-4">
<a
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">
<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
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
</a>
</div>
<!-- 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="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
</span>
<span class="text-slate-600">·</span>
<span class="text-slate-300">·</span>
<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
</span>
<span class="text-slate-600">·</span>
<span class="text-slate-300">·</span>
<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
</span>
</div>
</div>
<!-- Simple 4-highlight cards -->
<div class="mx-auto mt-20 max-w-5xl px-5 sm:px-8">
<!-- 4-highlight cards -->
<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="rounded-2xl border border-white/8 bg-white/3 p-5 transition hover:bg-white/6">
<div class="text-2xl mb-3">📋</div>
<h3 class="font-display text-base font-semibold text-white">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>
<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="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-bold text-slate-900">SF-10 &amp; SF-9 Records</h3>
<p class="mt-1.5 text-sm text-slate-600 leading-relaxed">Register student basic info from official school forms quickly.</p>
</div>
<div class="rounded-2xl border border-white/8 bg-white/3 p-5 transition hover:bg-white/6">
<div class="text-2xl mb-3">🗂️</div>
<h3 class="font-display text-base font-semibold text-white">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>
<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="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-bold text-slate-900">Document Archive</h3>
<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 class="rounded-2xl border border-white/8 bg-white/3 p-5 transition hover:bg-white/6">
<div class="text-2xl mb-3">📷</div>
<h3 class="font-display text-base font-semibold text-white">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>
<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="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-bold text-slate-900">Scan Documents</h3>
<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 class="rounded-2xl border border-white/8 bg-white/3 p-5 transition hover:bg-white/6">
<div class="text-2xl mb-3">🔒</div>
<h3 class="font-display text-base font-semibold text-white">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>
<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="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-bold text-slate-900">Private &amp; Offline</h3>
<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>
src/components/Navbar.astro
+28 -19
View File
@@ -2,30 +2,31 @@
// 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">
<!-- Brand -->
<a href="#" class="flex items-center gap-3">
<a href="#" class="flex items-center gap-3 group">
<img
src="/tis_logo.png"
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"
height="36"
/>
<div>
<div class="font-display text-base font-bold text-white leading-none">TIS RMS</div>
<div class="text-xs text-slate-400 mt-0.5">Talisay Integrated School</div>
<div class="font-display text-base font-bold text-slate-900 leading-none">TIS RMS</div>
<div class="text-xs text-slate-500 mt-0.5 font-normal">Talisay Integrated School</div>
</div>
</a>
<!-- Desktop Navigation -->
<nav class="hidden items-center gap-7 text-sm text-slate-300 lg:flex">
<a href="#showcase" class="transition hover:text-white">App Preview</a>
<a href="#school-forms" class="transition hover:text-white">School Forms</a>
<a href="#features" class="transition hover:text-white">Features</a>
<a href="#downloads" class="transition hover:text-white">Downloads</a>
<nav class="hidden items-center gap-7 text-sm font-medium text-slate-600 lg:flex">
<a href="#showcase" class="transition hover:text-slate-900">App Preview</a>
<a href="#school-forms" class="transition hover:text-slate-900">School Forms</a>
<a href="#ocr-pipeline" class="transition hover:text-slate-900">Scanning</a>
<a href="#features" class="transition hover:text-slate-900">Features</a>
<a href="#downloads" class="transition hover:text-slate-900">Downloads</a>
</nav>
<!-- Actions -->
@@ -34,15 +35,21 @@
href="https://github.com/ssbg04/TIS_RMS"
target="_blank"
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
</a>
<a
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
</a>
@@ -50,7 +57,7 @@
<button
id="mobile-menu-btn"
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"
>
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
@@ -61,12 +68,14 @@
</div>
<!-- Mobile Menu -->
<div id="mobile-menu" class="hidden border-b border-white/5 bg-[#09110c] px-5 py-4 lg:hidden">
<nav class="flex flex-col gap-3 text-sm text-slate-200">
<a href="#showcase" class="py-1 transition hover:text-white">App Preview</a>
<a href="#school-forms" class="py-1 transition hover:text-white">School Forms</a>
<a href="#features" class="py-1 transition hover:text-white">Features</a>
<a href="#downloads" class="py-1 transition hover:text-white">Downloads</a>
<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 font-medium text-slate-700">
<a href="#showcase" class="py-1 transition hover:text-[#15803d]">App Preview</a>
<a href="#school-forms" class="py-1 transition hover:text-[#15803d]">School Forms</a>
<a href="#ocr-pipeline" class="py-1 transition hover:text-[#15803d]">Document Scanning</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>
</div>
</header>
src/components/OcrPipeline.astro
+29 -24
View File
@@ -2,46 +2,48 @@
// 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">
<!-- Header -->
<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>
<h2 class="font-display text-3xl font-bold text-white sm:text-4xl">
<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">
Document Scanning
</div>
<h2 class="font-display text-3xl font-bold text-slate-900 sm:text-4xl">
How scanning a document works.
</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.
</p>
</div>
<!-- 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="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="text-3xl mt-2 mb-4">📸</div>
<h3 class="font-display text-lg font-semibold text-white">Scan or Upload</h3>
<p class="mt-2 text-sm text-slate-400 leading-relaxed">
<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-[#15803d] text-sm font-bold text-white shadow-xs">1</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-bold text-slate-900">Scan or Upload</h3>
<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.
</p>
</div>
<div class="relative rounded-2xl border border-white/8 bg-white/3 p-7">
<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="text-3xl mt-2 mb-4">🔍</div>
<h3 class="font-display text-lg font-semibold text-white">App Reads the Form</h3>
<p class="mt-2 text-sm text-slate-400 leading-relaxed">
<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-[#15803d] text-sm font-bold text-white shadow-xs">2</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-bold text-slate-900">App Reads the Form</h3>
<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.
</p>
</div>
<div class="relative rounded-2xl border border-white/8 bg-white/3 p-7">
<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="text-3xl mt-2 mb-4">✅</div>
<h3 class="font-display text-lg font-semibold text-white">Record is Saved</h3>
<p class="mt-2 text-sm text-slate-400 leading-relaxed">
<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-[#15803d] text-sm font-bold text-white shadow-xs">3</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-bold text-slate-900">Record is Saved</h3>
<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.
</p>
</div>
@@ -49,15 +51,18 @@
</div>
<!-- CTA Banner -->
<div class="mt-12 rounded-2xl border border-white/8 bg-white/3 p-8 text-center">
<h3 class="font-display text-2xl font-bold text-white">Digitize 100+ records in minutes.</h3>
<p class="mt-3 text-base text-slate-400 max-w-xl mx-auto leading-relaxed">
<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-slate-900">Digitize 100+ records in minutes.</h3>
<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.
</p>
<a
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
</a>
</div>
src/components/SchoolForms.astro
+57 -52
View File
@@ -2,50 +2,52 @@
// 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="grid gap-14 lg:grid-cols-2 lg:items-center">
<div class="grid gap-12 lg:grid-cols-2 lg:items-center">
<!-- Left: Description -->
<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.
</h2>
<p class="mt-5 text-base text-slate-400 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.
<p class="mt-4 text-base text-slate-600 leading-relaxed">
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>
<div class="mt-4 rounded-xl border border-amber-500/20 bg-amber-500/8 p-4 text-sm text-amber-300 leading-relaxed">
<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.
<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="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 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 h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-[#16a34a]/20 text-[#4ade80] text-lg">1</div>
<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-xl bg-[#ecfdf5] text-[#15803d] font-bold text-base">1</div>
<div>
<h3 class="font-display text-base font-semibold text-white">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>
<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-600 leading-relaxed">The primary source for learner profile data — captures name, LRN, birth date, gender, and originating school.</p>
</div>
</div>
<div class="flex items-start gap-4 rounded-xl border border-white/8 bg-white/3 p-5">
<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 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-xl bg-amber-50 text-amber-700 font-bold text-base">2</div>
<div>
<h3 class="font-display text-base font-semibold text-white">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>
<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-600 leading-relaxed">A secondary document used to cross-reference learner identifiers and school year records from legacy physical folders.</p>
</div>
</div>
<div class="flex items-start gap-4 rounded-xl border border-white/8 bg-white/3 p-5">
<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 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-xl bg-blue-50 text-blue-700 font-bold text-base">3</div>
<div>
<h3 class="font-display text-base font-semibold text-white">Auto-fill SF-10 Spreadsheet</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>
<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-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>
@@ -53,59 +55,62 @@
</div>
<!-- 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 -->
<div class="flex items-center gap-2 border-b border-white/5 bg-[#15803d] px-5 py-3">
<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/30"></span>
<span class="h-2.5 w-2.5 rounded-full bg-white/30"></span>
<span class="ml-2 text-sm font-medium text-white">Student Registration Form</span>
<!-- Window bar matching app screenshot -->
<div class="flex items-center justify-between border-b border-emerald-800/40 bg-[#15803d] px-5 py-3">
<div class="flex items-center gap-2">
<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>
<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>
<!-- 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">
<p class="text-xs font-semibold text-[#4ade80] uppercase tracking-wider mb-3">Learner Basic Information</p>
<div class="rounded-xl border border-slate-200 bg-slate-50/70 p-4">
<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="rounded-lg bg-[#09110c] p-3 border border-white/5">
<div class="text-xs text-slate-500 mb-1">LRN</div>
<div class="text-sm font-semibold text-[#4ade80]">108297100170</div>
<div class="rounded-lg bg-white p-3 border border-slate-200/80 shadow-xs">
<div class="text-xs text-slate-500 mb-0.5">LRN</div>
<div class="text-sm font-bold text-[#15803d] tracking-wide">108297100170</div>
</div>
<div class="rounded-lg bg-[#09110c] p-3 border border-white/5">
<div class="text-xs text-slate-500 mb-1">Full Name</div>
<div class="text-sm font-semibold text-white">Garcia, Cris Charles</div>
<div class="rounded-lg bg-white p-3 border border-slate-200/80 shadow-xs">
<div class="text-xs text-slate-500 mb-0.5">Full Name</div>
<div class="text-sm font-bold text-slate-900">Garcia, Cris Charles</div>
</div>
<div class="rounded-lg bg-[#09110c] p-3 border border-white/5">
<div class="text-xs text-slate-500 mb-1">Year Level</div>
<div class="text-sm font-semibold text-amber-400">Grade 7</div>
<div class="rounded-lg bg-white p-3 border border-slate-200/80 shadow-xs">
<div class="text-xs text-slate-500 mb-0.5">Year Level</div>
<div class="text-sm font-semibold text-amber-700">Grade 7 — JHS</div>
</div>
<div class="rounded-lg bg-[#09110c] p-3 border border-white/5">
<div class="text-xs text-slate-500 mb-1">School</div>
<div class="text-sm font-semibold text-white">Talisay Integrated School</div>
<div class="rounded-lg bg-white p-3 border border-slate-200/80 shadow-xs">
<div class="text-xs text-slate-500 mb-0.5">School</div>
<div class="text-sm font-semibold text-slate-900">Talisay Integrated School</div>
</div>
</div>
</div>
<div class="rounded-xl border border-white/6 bg-white/3 p-4 space-y-2.5">
<p class="text-xs font-semibold text-amber-400 uppercase tracking-wider">Document Fields (from SF-10)</p>
<div class="rounded-xl border border-slate-200 bg-slate-50/70 p-4 space-y-2.5">
<p class="text-xs font-bold text-amber-700 uppercase tracking-wider">Document Fields (from SF-10)</p>
{[
["Date of Birth", "April 14, 2009"],
["Sex", "Male"],
["Originating School", "Talisay Elementary School"],
["Document Source", "SF-10 Archive (2021+)"],
["Document Source", "SF-10 Physical Archive (2021+)"],
].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">
<span class="text-slate-400">{field}</span>
<span class="text-white font-medium">{value}</span>
<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-600">{field}</span>
<span class="text-slate-900 font-semibold">{value}</span>
</div>
))}
</div>
<div class="flex items-center justify-between rounded-xl bg-[#16a34a]/10 border border-[#16a34a]/20 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="rounded-lg bg-[#16a34a] px-3 py-1 text-xs font-semibold text-white">Save Record</span>
<div class="flex items-center justify-between rounded-xl bg-emerald-50 border border-emerald-200 p-3.5">
<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-[#15803d] px-3.5 py-1.5 text-xs font-semibold text-white shadow-xs">Save Record</span>
</div>
</div>
src/components/TechStack.astro
+15 -13
View File
@@ -2,33 +2,35 @@
// 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">
<!-- Header -->
<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>
<h2 class="font-display text-2xl font-bold text-white sm:text-3xl">
<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">
Built With
</div>
<h2 class="font-display text-2xl font-bold text-slate-900 sm:text-3xl">
Reliable technology for school use.
</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.
</p>
</div>
<!-- Simple tech tags — readable, not detailed -->
<div class="mt-12 flex flex-wrap justify-center gap-3">
<!-- Tech tags -->
<div class="mt-10 flex flex-wrap justify-center gap-2.5">
{[
"Flutter (Windows & Android)",
"Node.js Server",
"Flutter (Windows Desktop & Android)",
"Node.js Backend",
"SQLite Database",
"Tesseract OCR",
"ExcelJS",
"Tesseract OCR Pipeline",
"DepEd SF-10 Excel Generator",
"Campus LAN Architecture",
"Role-Based Access",
"Windows Installer",
"Role-Based Access Control",
"Windows NSIS Installer",
].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}
</span>
))}
src/layouts/Layout.astro
+12 -2
View File
@@ -13,7 +13,7 @@ const {
---
<!doctype html>
<html lang="en" class="scroll-smooth dark">
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8" />
<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" />
</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 />
</body>
</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-display: 'Outfit', sans-serif;
--bg-base: #09110c;
--bg-surface: #0e1a12;
--bg-card: #112017;
--bg-base: #f8fafc;
--bg-surface: #ffffff;
--bg-card: #ffffff;
--bg-subtle: #f1f5f9;
--border: #1f3627;
--border-strong: #2a4c37;
--border: #e2e8f0;
--border-strong: #cbd5e1;
--green: #16a34a;
--green-light: #22c55e;
--green-glow: #4ade80;
--green-hover: #15803d;
--green: #15803d;
--green-light: #16a34a;
--green-soft: #ecfdf5;
--green-pill-border: #bbf7d0;
--green-hover: #166534;
--gold: #f59e0b;
--gold: #d97706;
--text-main: #f8fafc;
--text-muted: #94a3b8;
--text-subtle: #64748b;
--text-main: #0f172a;
--text-body: #334155;
--text-muted: #64748b;
--text-subtle: #94a3b8;
}
html {
@@ -29,14 +32,14 @@ html {
font-family: var(--font-sans);
font-size: 16px;
background-color: var(--bg-base);
color: var(--text-main);
color-scheme: dark;
color: var(--text-body);
color-scheme: light;
}
body {
margin: 0;
background-color: var(--bg-base);
color: var(--text-main);
color: var(--text-body);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
line-height: 1.6;
@@ -45,6 +48,7 @@ body {
h1, h2, h3, h4, .font-display {
font-family: var(--font-display);
line-height: 1.2;
color: var(--text-main);
}
::selection {
@@ -52,15 +56,30 @@ h1, h2, h3, h4, .font-display {
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 {
background: rgba(9, 17, 12, 0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
background: rgba(255, 255, 255, 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid #e2e8f0;
}
/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--green); }