From fca3a1f9d701c6342a2fd7fced01a7d164daefb5 Mon Sep 17 00:00:00 2001 From: ssbg04 Date: Mon, 28 Sep 2026 22:23:12 +0800 Subject: [PATCH] feat(demo): update prototype to showcase authentic Windows and Android app screens --- demo/app.js | 537 +++++++------------------ demo/index.html | 635 ++++------------------------- demo/style.css | 1023 +++++++++++------------------------------------ 3 files changed, 473 insertions(+), 1722 deletions(-) diff --git a/demo/app.js b/demo/app.js index 7f1c272..75bafe5 100644 --- a/demo/app.js +++ b/demo/app.js @@ -1,371 +1,149 @@ /** - * TIS-RMS Interactive Prototype Logic - * Powers navigation, device switching, mock data filtering, and simulated workflows. + * TIS-RMS Interactive Prototype Showcase + * Drives real screen switching between actual screenshots and interactive dialogs. */ -// ── Mock Data ─────────────────────────────────────────────────── -const MOCK_STUDENTS = [ - { id: 1, lrn: '109876543210', name: 'DELA CRUZ, Juan Santos', grade: 'Grade 10', section: 'Jacinto', sex: 'Male', status: 'Enrolled', age: 16, contact: '0917-123-4567', docs: 4 }, - { id: 2, lrn: '109876543211', name: 'SANTOS, Maria Clara Perez', grade: 'Grade 9', section: 'Silang', sex: 'Female', status: 'Enrolled', age: 15, contact: '0918-234-5678', docs: 5 }, - { id: 3, lrn: '109876543212', name: 'ALVAREZ, Gabriel Mendoza', grade: 'Grade 7', section: 'Rizal', sex: 'Male', status: 'Enrolled', age: 13, contact: '0919-345-6789', docs: 3 }, - { id: 4, lrn: '109876543213', name: 'BAUTISTA, Chloe Anne Flores', grade: 'Grade 8', section: 'Aguinaldo', sex: 'Female', status: 'Enrolled', age: 14, contact: '0920-456-7890', docs: 4 }, - { id: 5, lrn: '109876543214', name: 'RAMIREZ, Christian Paul Torres', grade: 'Grade 11', section: 'TVL-ICT', sex: 'Male', status: 'Enrolled', age: 17, contact: '0921-567-8901', docs: 5 }, - { id: 6, lrn: '109876543215', name: 'VILLANUEVA, Princess Diane Gomez', grade: 'Grade 12', section: 'STEM A', sex: 'Female', status: 'Enrolled', age: 18, contact: '0922-678-9012', docs: 5 }, - { id: 7, lrn: '109876543216', name: 'CASTILLO, Joshua Mark Reyes', grade: 'Grade 10', section: 'Tandang Sora', sex: 'Male', status: 'Enrolled', age: 16, contact: '0923-789-0123', docs: 4 }, - { id: 8, lrn: '109876543217', name: 'MERCADO, Angel Mae Lim', grade: 'Grade 7', section: 'Bonifacio', sex: 'Female', status: 'Enrolled', age: 13, contact: '0924-890-1234', docs: 3 }, +const SCREENS = [ + { id: 'dashboard', name: 'Dashboard', icon: '📊' }, + { id: 'students', name: 'Students', icon: '👥' }, + { id: 'documents', name: 'Documents', icon: '📁' }, + { id: 'archives', name: 'Archives', icon: '📦' }, + { id: 'reports', name: 'Reports', icon: '📈' }, + { id: 'users', name: 'Users', icon: '👤' }, + { id: 'history', name: 'History', icon: '🕒' }, + { id: 'settings', name: 'Settings', icon: '⚙️' }, ]; -const MOCK_DOCS = [ - { name: 'PSA / NSO Birth Certificate', code: 'DOC-PSA', required: true, status: 'Verified', count: 1420 }, - { name: 'SF10 / Form 137 (Permanent Record)', code: 'DOC-SF10', required: true, status: 'Verified', count: 1388 }, - { name: 'SF9 / Form 138 (Report Card)', code: 'DOC-SF9', required: true, status: 'Verified', count: 1405 }, - { name: 'Certificate of Good Moral Character', code: 'DOC-GMC', required: false, status: 'Complete', count: 1290 }, - { name: '2x2 Recent ID Photo', code: 'DOC-PHOTO', required: true, status: 'Verified', count: 1482 }, -]; - -const MOCK_CLASSES = [ - { grade: 'Grade 7', section: 'Rizal', adviser: 'Ms. Carmela Diaz', students: 46, max: 50 }, - { grade: 'Grade 7', section: 'Bonifacio', adviser: 'Mr. Eduardo Ramos', students: 48, max: 50 }, - { grade: 'Grade 8', section: 'Aguinaldo', adviser: 'Mrs. Leah Manalo', students: 45, max: 50 }, - { grade: 'Grade 8', section: 'Luna', adviser: 'Mr. Kenneth Ortiz', students: 47, max: 50 }, - { grade: 'Grade 9', section: 'Silang', adviser: 'Ms. Joanne Beltran', students: 44, max: 50 }, - { grade: 'Grade 10', section: 'Jacinto', adviser: 'Mr. Roderick Tan', students: 49, max: 50 }, - { grade: 'Grade 11', section: 'TVL-ICT', adviser: 'Engr. Mark Soriano', students: 42, max: 45 }, - { grade: 'Grade 12', section: 'STEM A', adviser: 'Dr. Evelyn Cruz', students: 40, max: 45 }, -]; - -// ── Application State ────────────────────────────────────────── -let currentDevice = 'windows'; +let currentDevice = 'windows'; // 'windows' | 'android' let currentScreen = 'dashboard'; -let currentTheme = 'light'; -let studentFilter = 'all'; -let searchQuery = ''; -// ── Initialization ───────────────────────────────────────────── document.addEventListener('DOMContentLoaded', () => { setupDeviceSwitcher(); - setupThemeToggle(); - setupNavigation(); - renderStudentsTable(); - renderMobileStudentsList(); - renderDocsList(); - renderClassesList(); - startClock(); + setupScreenPills(); + setupKeyboardNavigation(); + updateView(); }); -// ── Device Switcher ──────────────────────────────────────────── +// ── Device Switcher ─────────────────────────────────────────── function setupDeviceSwitcher() { const winBtn = document.getElementById('btn-view-windows'); const androidBtn = document.getElementById('btn-view-android'); - const winFrame = document.getElementById('desktop-frame'); - const phoneFrame = document.getElementById('phone-frame'); winBtn.addEventListener('click', () => { currentDevice = 'windows'; winBtn.classList.add('active'); androidBtn.classList.remove('active'); - winFrame.style.display = 'flex'; - phoneFrame.style.display = 'none'; - syncScreens(); + document.getElementById('desktop-window').style.display = 'flex'; + document.getElementById('phone-mockup').style.display = 'none'; + updateView(); }); androidBtn.addEventListener('click', () => { currentDevice = 'android'; androidBtn.classList.add('active'); winBtn.classList.remove('active'); - winFrame.style.display = 'none'; - phoneFrame.style.display = 'flex'; - syncScreens(); + document.getElementById('desktop-window').style.display = 'none'; + document.getElementById('phone-mockup').style.display = 'flex'; + updateView(); }); } -// ── Theme Toggle ─────────────────────────────────────────────── -function setupThemeToggle() { - const toggleBtn = document.getElementById('theme-toggle-btn'); - toggleBtn.addEventListener('click', () => { - currentTheme = currentTheme === 'light' ? 'dark' : 'light'; - document.documentElement.setAttribute('data-theme', currentTheme); - toggleBtn.innerHTML = currentTheme === 'light' - ? `` - : ``; - }); -} +// ── Screen Selector Pills ───────────────────────────────────── +function setupScreenPills() { + const bar = document.getElementById('screen-selector-bar'); + if (!bar) return; -// ── Navigation ───────────────────────────────────────────────── -function setupNavigation() { - // Desktop sidebar clicks - document.querySelectorAll('.win-nav-item').forEach(item => { - item.addEventListener('click', () => { - const target = item.getAttribute('data-screen'); - if (target) navigateTo(target); - }); - }); - - // Mobile bottom nav clicks - document.querySelectorAll('.bottom-nav-item').forEach(item => { - item.addEventListener('click', () => { - const target = item.getAttribute('data-screen'); - if (target) navigateTo(target); - }); - }); -} - -function navigateTo(screenId) { - currentScreen = screenId; - syncScreens(); -} - -function syncScreens() { - // Update desktop sidebar active class - document.querySelectorAll('.win-nav-item').forEach(el => { - el.classList.toggle('active', el.getAttribute('data-screen') === currentScreen); - }); - - // Update mobile bottom nav active class - document.querySelectorAll('.bottom-nav-item').forEach(el => { - el.classList.toggle('active', el.getAttribute('data-screen') === currentScreen); - }); - - // Update desktop content views - document.querySelectorAll('.win-screen-view').forEach(view => { - view.style.display = view.id === `win-${currentScreen}` ? 'block' : 'none'; - }); - - // Update mobile content views - document.querySelectorAll('.phone-screen-view').forEach(view => { - view.style.display = view.id === `phone-${currentScreen}` ? 'block' : 'none'; - }); - - // Update breadcrumb titles - const titles = { - dashboard: 'Dashboard Overview', - students: 'Students Directory', - documents: 'Document Requirements', - academic: 'Classes & Academic Structure', - settings: 'System Settings & About' - }; - - const winTitle = document.getElementById('win-breadcrumb-title'); - if (winTitle) winTitle.textContent = titles[currentScreen] || 'Dashboard'; - - const phoneTitle = document.getElementById('phone-header-title'); - if (phoneTitle) phoneTitle.textContent = titles[currentScreen] || 'TIS-RMS'; -} - -// ── Students Table & Card Rendering ──────────────────────────── -function renderStudentsTable() { - const tbody = document.getElementById('students-table-body'); - if (!tbody) return; - - const filtered = filterStudentData(); - tbody.innerHTML = ''; - - if (filtered.length === 0) { - tbody.innerHTML = `No student records matched your search query.`; - return; - } - - filtered.forEach(student => { - const tr = document.createElement('tr'); - tr.className = 'student-row-click'; - tr.innerHTML = ` - ${student.name} - ${student.lrn} - ${student.grade} - ${student.section} - ${student.sex} - ${student.status} - - - - `; - tr.addEventListener('click', (e) => { - if (e.target.tagName !== 'BUTTON') openStudentModal(student.id); - }); - tbody.appendChild(tr); - }); -} - -function renderMobileStudentsList() { - const container = document.getElementById('mobile-students-container'); - if (!container) return; - - const filtered = filterStudentData(); - container.innerHTML = ''; - - if (filtered.length === 0) { - container.innerHTML = `
No student records found.
`; - return; - } - - filtered.forEach(student => { - const card = document.createElement('div'); - card.className = 'mobile-student-card'; - card.innerHTML = ` -
- ${student.name} - ${student.status} -
-
LRN: ${student.lrn}
-
- ${student.grade} - ${student.section} - Details › -
- `; - card.addEventListener('click', () => openStudentModal(student.id)); - container.appendChild(card); - }); -} - -function filterStudentData() { - return MOCK_STUDENTS.filter(s => { - const matchesSearch = s.name.toLowerCase().includes(searchQuery.toLowerCase()) || - s.lrn.includes(searchQuery) || - s.section.toLowerCase().includes(searchQuery.toLowerCase()); - - if (studentFilter === 'all') return matchesSearch; - if (studentFilter === 'male') return matchesSearch && s.sex === 'Male'; - if (studentFilter === 'female') return matchesSearch && s.sex === 'Female'; - return matchesSearch && s.grade.toLowerCase().includes(studentFilter.toLowerCase()); - }); -} - -function setStudentFilter(filterVal, element) { - studentFilter = filterVal; - document.querySelectorAll('.filter-chips .chip').forEach(c => c.classList.remove('active')); - if (element) element.classList.add('active'); - renderStudentsTable(); - renderMobileStudentsList(); -} - -function onSearchInput(query) { - searchQuery = query; - renderStudentsTable(); - renderMobileStudentsList(); -} - -// ── Documents Screen ─────────────────────────────────────────── -function renderDocsList() { - const winContainer = document.getElementById('docs-grid-windows'); - const phoneContainer = document.getElementById('docs-list-phone'); - - if (winContainer) { - winContainer.innerHTML = MOCK_DOCS.map(doc => ` -
-
-
${doc.name}
-
${doc.code} • ${doc.count} Verified Records
-
-
- ${doc.status} - -
-
- `).join(''); - } - - if (phoneContainer) { - phoneContainer.innerHTML = MOCK_DOCS.map(doc => ` -
-
- ${doc.name} - ${doc.status} -
-
- ${doc.count} submissions - View › -
-
- `).join(''); - } -} - -// ── Academic Screen ──────────────────────────────────────────── -function renderClassesList() { - const winContainer = document.getElementById('classes-grid-windows'); - const phoneContainer = document.getElementById('classes-list-phone'); - - const html = MOCK_CLASSES.map(cls => ` -
-
- ${cls.grade} - ${cls.students}/${cls.max} Students -
-
Section ${cls.section}
-
Adviser: ${cls.adviser}
-
-
-
-
+ bar.innerHTML = SCREENS.map(s => ` + `).join(''); - - if (winContainer) winContainer.innerHTML = html; - if (phoneContainer) phoneContainer.innerHTML = html; } -// ── Student Detail Modal ─────────────────────────────────────── -function openStudentModal(id) { - const student = MOCK_STUDENTS.find(s => s.id === id); - if (!student) return; - - const modal = document.getElementById('student-modal'); - const body = document.getElementById('student-modal-body'); - - body.innerHTML = ` -
-
- ${student.name.charAt(0)} -
-
-

${student.name}

- LRN: ${student.lrn} • ${student.grade} - ${student.section} -
-
- -
Gender:${student.sex}
-
Age:${student.age} years old
-
Enrollment Status:${student.status}
-
Parent / Guardian Contact:${student.contact}
-
School:Talipan National High School
- -
-
Submitted Document Requirements
-
-
- PSA Birth Certificate - ✓ Verified -
-
- Form 137 / SF10 - ✓ Verified -
-
- Form 138 / SF9 - ✓ Verified -
-
-
- `; - - modal.classList.add('active'); +function setScreen(screenId) { + currentScreen = screenId; + updateView(); } -function openDocPreviewModal(name, code) { - const modal = document.getElementById('doc-preview-modal'); - const title = document.getElementById('doc-preview-title'); - const codeEl = document.getElementById('doc-preview-code'); +function updateView() { + // Update screen pills + document.querySelectorAll('.screen-pill').forEach(pill => { + pill.classList.toggle('active', pill.getAttribute('data-screen') === currentScreen); + }); - if (title) title.textContent = name; - if (codeEl) codeEl.textContent = code; + // Windows Desktop Image + const winImg = document.getElementById('win-screen-img'); + if (winImg) { + winImg.style.opacity = '0'; + setTimeout(() => { + winImg.src = `screenshots/windows/${currentScreen}.webp`; + winImg.style.opacity = '1'; + }, 120); + } - modal.classList.add('active'); + // Android Mobile Image + const phoneImg = document.getElementById('phone-screen-img'); + if (phoneImg) { + phoneImg.style.opacity = '0'; + setTimeout(() => { + phoneImg.src = `screenshots/android/${currentScreen}.webp`; + phoneImg.style.opacity = '1'; + }, 120); + } + + // Update Dynamic Hotspots + updateHotspots(); } +// ── Dynamic Hotspots ────────────────────────────────────────── +function updateHotspots() { + const addStudentHotspot = document.getElementById('hotspot-add-student'); + const settingsUpdateHotspot = document.getElementById('hotspot-settings-update'); + + if (addStudentHotspot) { + addStudentHotspot.style.display = currentScreen === 'students' ? 'block' : 'none'; + } + + if (settingsUpdateHotspot) { + settingsUpdateHotspot.style.display = currentScreen === 'settings' ? 'block' : 'none'; + } +} + +// ── Keyboard Shortcuts (1-8 and Left/Right Arrows) ──────────── +function setupKeyboardNavigation() { + document.addEventListener('keydown', (e) => { + // 1-8 keys + const num = parseInt(e.key); + if (!isNaN(num) && num >= 1 && num <= SCREENS.length) { + setScreen(SCREENS[num - 1].id); + return; + } + + // Arrow keys + const currentIndex = SCREENS.findIndex(s => s.id === currentScreen); + if (e.key === 'ArrowRight') { + const nextIndex = (currentIndex + 1) % SCREENS.length; + setScreen(SCREENS[nextIndex].id); + } else if (e.key === 'ArrowLeft') { + const prevIndex = (currentIndex - 1 + SCREENS.length) % SCREENS.length; + setScreen(SCREENS[prevIndex].id); + } + }); +} + +// ── Interactive Modals ───────────────────────────────────────── function openAddStudentModal() { const modal = document.getElementById('add-student-modal'); - modal.classList.add('active'); + if (modal) modal.classList.add('active'); +} + +function openUpdateCheckModal() { + const modal = document.getElementById('update-modal'); + if (modal) { + modal.classList.add('active'); + simulateUpdateProcess(); + } } function closeModal(id) { @@ -373,76 +151,57 @@ function closeModal(id) { if (modal) modal.classList.remove('active'); } -// ── Settings Collapsible Sections ────────────────────────────── -function toggleSettingsSection(id) { - const body = document.getElementById(`settings-body-${id}`); - const arrow = document.getElementById(`settings-arrow-${id}`); - if (!body) return; - - const isVisible = body.style.display !== 'none'; - body.style.display = isVisible ? 'none' : 'flex'; - if (arrow) { - arrow.style.transform = isVisible ? 'rotate(0deg)' : 'rotate(180deg)'; - } -} - -// ── Check For Updates Simulation ─────────────────────────────── -function simulateUpdateCheck() { - const btn = document.getElementById('btn-check-update'); - const btnText = document.getElementById('btn-check-update-text'); - const statusBanner = document.getElementById('update-status-banner'); +// ── Simulated Update Check Workflow ──────────────────────────── +function simulateUpdateProcess() { + const statusEl = document.getElementById('update-modal-status'); + const actionBtn = document.getElementById('btn-download-action'); const toast = document.getElementById('browser-download-toast'); - const toastText = document.getElementById('toast-filename'); + const toastFile = document.getElementById('toast-filename'); - if (!btn) return; + const isWin = currentDevice === 'windows'; + const arch = isWin ? 'x64 (64-bit)' : 'ARM64 (64-bit)'; + const file = isWin ? 'TIS_RMS_Setup_v1.0.24.exe' : 'TIS_RMS_64_v1.0.24.apk'; - btn.disabled = true; - btnText.textContent = 'Checking GitHub releases...'; - statusBanner.style.display = 'none'; + statusEl.innerHTML = ` +
+
+ Querying GitHub releases for ${arch}... +
+ `; + actionBtn.style.display = 'none'; setTimeout(() => { - btn.disabled = false; - btnText.textContent = 'Check for Updates'; - - // Architecture-matched file simulation - const isWin = currentDevice === 'windows'; - const filename = isWin ? 'TIS_RMS_Setup_v1.0.24.exe' : 'TIS_RMS_64_v1.0.24.apk'; - const archLabel = isWin ? 'x64 (64-bit)' : 'ARM64 (64-bit)'; - - statusBanner.style.display = 'block'; - statusBanner.innerHTML = ` -
- - New Version Detected: v1.0.24 for ${archLabel} -
-
- Architecture matched: ${filename}.
- Simulating launching download in device's default browser... + statusEl.innerHTML = ` +
+
+ ✓ Update Detected: v1.0.24 +
+
+ Architecture: ${arch}
+ Matched Asset: ${file}
+ Opening direct link in default device browser... +
`; - // Show simulated default browser toast - if (toast && toastText) { - toastText.textContent = filename; - toast.classList.add('active'); - setTimeout(() => { - toast.classList.remove('active'); - }, 5000); - } - }, 1200); + actionBtn.style.display = 'inline-flex'; + actionBtn.onclick = () => { + closeModal('update-modal'); + triggerDownloadToast(file); + }; + + triggerDownloadToast(file); + }, 1400); } -// ── Clock for Android Status Bar ─────────────────────────────── -function startClock() { - function updateTime() { - const el = document.getElementById('phone-time'); - if (!el) return; - const now = new Date(); - let hours = now.getHours(); - let mins = now.getMinutes(); - mins = mins < 10 ? '0' + mins : mins; - el.textContent = `${hours}:${mins}`; +function triggerDownloadToast(filename) { + const toast = document.getElementById('browser-download-toast'); + const toastFile = document.getElementById('toast-filename'); + if (toast && toastFile) { + toastFile.textContent = filename; + toast.classList.add('active'); + setTimeout(() => { + toast.classList.remove('active'); + }, 5000); } - updateTime(); - setInterval(updateTime, 30000); } diff --git a/demo/index.html b/demo/index.html index 1408860..4e4c1b3 100644 --- a/demo/index.html +++ b/demo/index.html @@ -1,5 +1,5 @@ - + @@ -15,583 +15,95 @@
TIS Logo - TIS-RMS Demo + TIS-RMS Showcase
- +
- -
- - -
- + + + +
- -
+ +
-
+
Logo - TIS Record Management System - Talipan National High School + TIS Record Management System
-
+
— ▢ - ✕ + ✕
-
- - + + - -
- -
-
- Dashboard Overview -
-
-
- - -
- - -
-
- - -
- - -
-
-
-
👥
-
-
Total Students
-

1,482

-
-
-
-
✔
-
-
Enrolled
-

1,420

-
-
-
-
⇄
-
-
Transferred
-

38

-
-
-
-
⊘
-
-
Dropped Out
-

24

-
-
-
- -
-
-
- Grade Level Distribution - S.Y. 2026-2027 -
-
-
- Grade 7 -
- 280 -
-
- Grade 8 -
- 260 -
-
- Grade 9 -
- 250 -
-
- Grade 10 -
- 240 -
-
- Grade 11 -
- 230 -
-
- Grade 12 -
- 222 -
-
-
- -
-
- Recent Activity -
-
-
-
Student Enrolled
-
Juan Dela Cruz • Grade 10
-
-
-
SF10 Verified
-
Maria Clara Perez • Grade 9
-
-
-
Section Capacity Alert
-
Grade 10 - Jacinto at 49/50
-
-
-
-
-
- - - - - - - - - - - - - -
-
+ +
+ +
- - - - - - - +