Files

1596 lines
87 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TIS Record Management System | Web Prototype</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- ── Top Floating Device Switcher ──────────────────────────── -->
<header class="top-control-bar">
<div class="brand-badge">
<img src="assets/logo.png" alt="Logo">
<span>TIS-RMS Static Web App</span>
</div>
<div class="device-switcher" role="tablist">
<button id="btn-view-windows" class="device-btn active" title="Switch to Windows Desktop View">
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
<path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801"/>
</svg>
<span>Windows Desktop</span>
</button>
<button id="btn-view-android" class="device-btn" title="Switch to Android Mobile View">
<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor">
<path d="M17.523 15.3414c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.551 0 .9993.4482.9993.9993.0001.5511-.4483.9997-.9993.9997m-11.046 0c-.5511 0-.9993-.4486-.9993-.9997s.4482-.9993.9993-.9993c.5511 0 .9993.4482.9993.9993 0 .5511-.4482.9997-.9993.9997m11.4045-6.02l1.9973-3.4592a.416.416 0 00-.1521-.5676.416.416 0 00-.5676.1521l-2.0223 3.503C15.5902 8.411 13.8533 8.081 12 8.081s-3.5902.33-5.1367.8687L4.841 5.4467a.4161.4161 0 00-.5677-.1521.4157.4157 0 00-.1521.5676l1.9973 3.4592C2.6889 11.1867.3432 14.6589 0 18.761h24c-.3432-4.1021-2.6889-7.5743-6.1185-9.4396"/>
</svg>
<span>Android Mobile</span>
</button>
</div>
</header>
<!-- ── Main Viewport Container ───────────────────────────────── -->
<main class="viewport-container">
<!-- ==============================================================
1. WINDOWS DESKTOP APP (Pixel-Perfect Recreation)
============================================================== -->
<div id="desktop-window" class="desktop-window">
<!-- Titlebar -->
<div class="win-titlebar">
<div class="win-titlebar-left">
<span>TIS Record Management System</span>
</div>
<div class="win-window-controls">
<span>&#x2014;</span>
<span>&#x25A2;</span>
<span style="cursor: pointer;">&#x2715;</span>
</div>
</div>
<div class="win-body">
<!-- Sidebar Navigation -->
<aside class="win-sidebar">
<div class="win-app-brand">
<div class="win-brand-info">
<img src="assets/logo.png" alt="Logo">
<h3>TIS RMS</h3>
</div>
<div class="win-hamburger">&#9776;</div>
</div>
<div class="win-sidebar-group">
<div class="win-group-label">OVERVIEW</div>
<ul class="win-nav-list">
<li class="win-nav-item active" data-screen="dashboard">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>
<span>Dashboard</span>
</li>
<li class="win-nav-item" data-screen="students">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z"/></svg>
<span>Students</span>
</li>
<li class="win-nav-item" data-screen="documents">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"/></svg>
<span>Documents</span>
</li>
<li class="win-nav-item" data-screen="archives">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M20.54 5.23l-1.39-1.68C18.88 3.21 18.47 3 18 3H6c-.47 0-.88.21-1.16.55L3.46 5.23C3.17 5.57 3 6.02 3 6.5V19c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6.5c0-.48-.17-.93-.46-1.27zM12 17.5L6.5 12H10v-2h4v2h3.5L12 17.5zM5.12 5l.81-1h12l.94 1H5.12z"/></svg>
<span>Archives</span>
</li>
</ul>
</div>
<div class="win-sidebar-group">
<div class="win-group-label">ACCOUNT</div>
<ul class="win-nav-list">
<li class="win-nav-item" data-screen="reports">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M5 9.2h3V19H5zM10.6 5h2.8v14h-2.8zm5.6 8H19v6h-2.8z"/><path d="M19 19H5V5h14v14m0-16H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>
<span>Reports</span>
</li>
<li class="win-nav-item" data-screen="users">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg>
<span>Users</span>
</li>
<li class="win-nav-item" data-screen="history">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M13 3a9 9 0 0 0-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42A8.954 8.954 0 0 0 13 21a9 9 0 0 0 0-18zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/></svg>
<span>History</span>
</li>
<li class="win-nav-item" data-screen="settings">
<svg viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>
<span>Settings</span>
</li>
</ul>
</div>
<div class="win-user-profile">
<div class="win-user-left">
<div class="avatar-badge">AT</div>
<div class="win-user-details">
<h4>Admin Registrar ...</h4>
<span>ADMIN</span>
</div>
</div>
<span style="color: var(--text-muted); cursor: pointer;" title="Logout">&#x21AA;</span>
</div>
</aside>
<!-- Main Screen Stage -->
<section class="win-main-stage">
<!-- Stage Top Bar -->
<div class="win-stage-header">
<div id="stage-screen-title" class="stage-title">Dashboard Overview</div>
<div class="stage-header-actions">
<button class="icon-btn" title="Search"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg></button>
<button class="icon-btn" title="Filters"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="4" y1="21" x2="4" y2="14"></line><line x1="4" y1="10" x2="4" y2="3"></line><line x1="12" y1="21" x2="12" y2="12"></line><line x1="12" y1="8" x2="12" y2="3"></line><line x1="20" y1="21" x2="20" y2="16"></line><line x1="20" y1="12" x2="20" y2="3"></line><line x1="1" y1="14" x2="7" y2="14"></line><line x1="9" y1="8" x2="15" y2="8"></line><line x1="17" y1="16" x2="23" y2="16"></line></svg></button>
<button class="icon-btn" title="Notifications"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path><path d="M13.73 21a2 2 0 0 1-3.46 0"></path></svg></button>
<div class="avatar-badge" style="width: 32px; height: 32px; font-size: 11px;">AT</div>
<!-- Add Student button (visible on Students screen) -->
<button id="btn-add-student-header" class="btn-add-student" style="display: none;" onclick="openAddStudentModal()">
<span>&#x2B;</span>
<span>Add Student</span>
</button>
</div>
</div>
<!-- Stage Scroll Viewport -->
<div class="win-scroll-viewport">
<!-- SCREEN 1: DASHBOARD -->
<div id="win-screen-dashboard" class="desktop-screen-content" style="display: flex; flex-direction: column; gap: 18px;">
<!-- Setup Required Banner -->
<div class="setup-banner">
<div class="setup-banner-left">
<span class="setup-banner-icon">&#x2699;</span>
<span>Setup Required</span>
</div>
<div style="display: flex; gap: 12px; color: var(--text-muted); cursor: pointer;">
<span>&#x25BC;</span>
<span>&times;</span>
</div>
</div>
<p style="font-size: 14px; color: var(--text-secondary);">Welcome back, Admin Registrar. Here is what is happening today.</p>
<!-- 4 Stat Cards -->
<div class="stat-cards-grid">
<div class="app-stat-card" onclick="setScreen('students')">
<div class="app-stat-header">
<div class="app-stat-icon green">&#x1F393;</div>
<span class="app-stat-chevron">&rsaquo;</span>
</div>
<div class="app-stat-number">91</div>
<div class="app-stat-label">Total Students</div>
</div>
<div class="app-stat-card" onclick="setScreen('users')">
<div class="app-stat-header">
<div class="app-stat-icon blue">&#x1F465;</div>
<span class="app-stat-chevron">&rsaquo;</span>
</div>
<div class="app-stat-number">18</div>
<div class="app-stat-label">Active Users</div>
</div>
<div class="app-stat-card" onclick="setScreen('documents')">
<div class="app-stat-header">
<div class="app-stat-icon green">&#x2714;</div>
<span class="app-stat-chevron">&rsaquo;</span>
</div>
<div class="app-stat-number">0</div>
<div class="app-stat-label">Complete Docs</div>
</div>
<div class="app-stat-card" onclick="setScreen('documents')">
<div class="app-stat-header">
<div class="app-stat-icon amber">&#x26A0;</div>
<span class="app-stat-chevron">&rsaquo;</span>
</div>
<div class="app-stat-number">91</div>
<div class="app-stat-label">Missing Docs</div>
</div>
</div>
<!-- Analytics & KPIs Section -->
<div class="kpi-section-title">
<span style="color: var(--accent-emerald);">&#x1F4C8;</span>
<span>Analytics &amp; KPIs</span>
<span class="badge">&#x1F4C5; S.Y. 2026-2027</span>
</div>
<div class="kpi-grid">
<!-- Digitalization Progress Card -->
<div class="kpi-card">
<div class="kpi-card-header">
<h4>Digitalization Progress</h4>
<p>Enrolled students with all mandatory requirements completed</p>
</div>
<div class="rings-container">
<div class="ring-item">
<div class="circular-ring">0%</div>
<span class="ring-label">JHS</span>
<span class="ring-sub">0 / 5</span>
</div>
<div class="ring-item">
<div class="circular-ring">0%</div>
<span class="ring-label">SHS</span>
<span class="ring-sub">0 / 0</span>
</div>
<div class="ring-item">
<div class="circular-ring">0%</div>
<span class="ring-label">Overall</span>
<span class="ring-sub">0 / 5</span>
</div>
</div>
</div>
<!-- Document Status Distribution Card -->
<div class="kpi-card">
<div class="kpi-card-header">
<h4>Document Status Distribution</h4>
<p>By unique document types uploaded</p>
</div>
<div class="kpi-progress-bar">
<div class="kpi-bar-meta">
<span>Completed</span>
<span style="color: var(--text-secondary);">1/15 (6.7%)</span>
</div>
<div class="bar-track-custom">
<div class="bar-fill-green"></div>
</div>
</div>
<div class="kpi-progress-bar">
<div class="kpi-bar-meta">
<span>Archived</span>
<span style="color: var(--text-secondary);">8/15 (53.3%)</span>
</div>
<div class="bar-track-custom">
<div class="bar-fill-amber"></div>
</div>
</div>
</div>
</div>
</div>
<!-- SCREEN 2: STUDENTS DIRECTORY -->
<div id="win-screen-students" class="desktop-screen-content" style="display: none; flex-direction: column; gap: 14px;">
<div class="students-list-view">
<!-- Student Card 1 -->
<div class="student-card-row" onclick="openStudentDetail('ADAMS, JENNIE', '108297100191', 'Grade 12 - STEM - Quisumbing', 'Inactive')">
<div class="student-left">
<div class="student-avatar">JA</div>
<div class="student-names">
<h4>ADAMS, JENNIE</h4>
<span>LRN: 108297100191</span>
</div>
</div>
<div class="student-middle">
<div class="student-section-info">
<span>&#x1F393;</span>
<span>Grade 12 - STEM - Quisumbing</span>
</div>
<span class="badge-4ps">4Ps</span>
<span class="badge-inactive">Inactive</span>
</div>
<div class="student-right">
<div class="docs-progress-chip">
<div class="docs-progress-text">&#x1F4C1; 5 / 7 Docs Archived</div>
<div class="docs-mini-bar"><div class="docs-mini-fill" style="width: 71%;"></div></div>
</div>
<span class="folder-action-icon">&#x1F4C1;</span>
<span style="color: var(--text-muted);">&#x22EE;</span>
</div>
</div>
<!-- Student Card 2 -->
<div class="student-card-row" onclick="openStudentDetail('ASD, MARACENA', '412341241234', 'Grade 10 - Pocahontas', 'Inactive')">
<div class="student-left">
<div class="student-avatar">MA</div>
<div class="student-names">
<h4>ASD, MARACENA</h4>
<span>LRN: 412341241234</span>
</div>
</div>
<div class="student-middle">
<div class="student-section-info">
<span>&#x1F393;</span>
<span>Grade 10 - Pocahontas</span>
</div>
<span class="badge-inactive">Inactive</span>
</div>
<div class="student-right">
<div class="docs-progress-chip">
<div class="docs-progress-text">&#x1F4C1; 3 / 3 Docs Archived</div>
<div class="docs-mini-bar"><div class="docs-mini-fill" style="width: 100%;"></div></div>
</div>
<span class="folder-action-icon">&#x1F4C1;</span>
<span style="color: var(--text-muted);">&#x22EE;</span>
</div>
</div>
<!-- Student Card 3 -->
<div class="student-card-row" onclick="openStudentDetail('ASDF, ASDF', '342142141234', 'Grade 12 - Euphoria', 'Inactive')">
<div class="student-left">
<div class="student-avatar">AA</div>
<div class="student-names">
<h4>ASDF, ASDF</h4>
<span>LRN: 342142141234</span>
</div>
</div>
<div class="student-middle">
<div class="student-section-info">
<span>&#x1F393;</span>
<span>Grade 12 - Euphoria</span>
</div>
<span class="badge-inactive">Inactive</span>
</div>
<div class="student-right">
<div class="docs-progress-chip">
<div class="docs-progress-text">&#x1F4C1; 4 / 4 Docs Archived</div>
<div class="docs-mini-bar"><div class="docs-mini-fill" style="width: 100%;"></div></div>
</div>
<span class="folder-action-icon">&#x1F4C1;</span>
<span style="color: var(--text-muted);">&#x22EE;</span>
</div>
</div>
<!-- Student Card 4 -->
<div class="student-card-row" onclick="openStudentDetail('Arroyo, Gemma', '108297100198', 'Grade 7 - Moonstar', 'Dropped')">
<div class="student-left">
<div class="student-avatar">GA</div>
<div class="student-names">
<h4>Arroyo, Gemma</h4>
<span>LRN: 108297100198</span>
</div>
</div>
<div class="student-middle">
<div class="student-section-info">
<span>&#x1F393;</span>
<span>Grade 7 - Moonstar</span>
</div>
<span class="badge-4ps">4Ps</span>
<span class="badge-dropped">Dropped</span>
</div>
<div class="student-right">
<div class="docs-progress-chip">
<div class="docs-progress-text">&#x1F4C1; 2 / 3 Docs Archived</div>
<div class="docs-mini-bar"><div class="docs-mini-fill" style="width: 66%;"></div></div>
</div>
<span class="folder-action-icon">&#x1F4C1;</span>
<span style="color: var(--text-muted);">&#x22EE;</span>
</div>
</div>
<!-- Student Card 5 -->
<div class="student-card-row" onclick="openStudentDetail('BAKA, ASTA', '108371216161', 'Grade 12 - Euphoria', 'Inactive')">
<div class="student-left">
<div class="student-avatar">AB</div>
<div class="student-names">
<h4>BAKA, ASTA</h4>
<span>LRN: 108371216161</span>
</div>
</div>
<div class="student-middle">
<div class="student-section-info">
<span>&#x1F393;</span>
<span>Grade 12 - Euphoria</span>
</div>
<span class="badge-4ps">4Ps</span>
<span class="badge-inactive">Inactive</span>
</div>
<div class="student-right">
<div class="docs-progress-chip">
<div class="docs-progress-text">&#x1F4C1; 1 / 7 Docs Archived</div>
<div class="docs-mini-bar"><div class="docs-mini-fill" style="width: 14%;"></div></div>
</div>
<span class="folder-action-icon">&#x1F4C1;</span>
<span style="color: var(--text-muted);">&#x22EE;</span>
</div>
</div>
<!-- Student Card 6 -->
<div class="student-card-row" onclick="openStudentDetail('BALL, WASABI RICE', '123123123213', 'Grade 7 - Rosal', 'Inactive')">
<div class="student-left">
<div class="student-avatar">WB</div>
<div class="student-names">
<h4>BALL, WASABI RICE</h4>
<span>LRN: 123123123213</span>
</div>
</div>
<div class="student-middle">
<div class="student-section-info">
<span>&#x1F393;</span>
<span>Grade 7 - Rosal</span>
</div>
<span class="badge-inactive">Inactive</span>
</div>
<div class="student-right">
<div class="docs-progress-chip">
<div class="docs-progress-text">&#x1F4C1; 0 / 3 Docs Archived</div>
<div class="docs-mini-bar"><div class="docs-mini-fill" style="width: 0%;"></div></div>
</div>
<span class="folder-action-icon">&#x1F4C1;</span>
<span style="color: var(--text-muted);">&#x22EE;</span>
</div>
</div>
</div>
<!-- Pagination Controls -->
<div class="pagination-bar">
<span class="page-btn">Previous</span>
<span class="page-btn active">1</span>
<span class="page-btn">2</span>
<span class="page-btn">3</span>
<span class="page-btn">4</span>
<span class="page-btn">5</span>
<span class="page-btn">Next</span>
</div>
</div>
<!-- SCREEN 3: DOCUMENTS -->
<div id="win-screen-documents" class="desktop-screen-content" style="display: none; flex-direction: column; gap: 14px;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; gap: 8px;">
<button class="page-btn active">&#x1F4C1; Student Folders</button>
<button class="page-btn">&#x1F4C4; All Documents</button>
</div>
<div style="display: flex; gap: 8px;">
<button class="page-btn" style="background: var(--primary-green); color: #fff;">&#x2601; Upload</button>
<button class="page-btn">&#x1F5B6; Print List</button>
</div>
</div>
<div class="doc-folder-card">
<div class="doc-folder-left">
<div class="doc-folder-icon">&#x1F4C1;</div>
<div>
<div class="doc-folder-title">RIZAL_JUAN_308035123456</div>
<div class="doc-folder-sub">1 item</div>
<div class="doc-folder-badges">
<span class="badge-jhs">JHS 0/3</span>
<span class="badge-shs">SHS 0/4</span>
</div>
</div>
</div>
<span style="color: var(--text-muted); font-size: 16px;">&rsaquo;</span>
</div>
</div>
<!-- SCREEN 4: ARCHIVES -->
<div id="win-screen-archives" class="desktop-screen-content" style="display: none; flex-direction: column; gap: 14px;">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div style="display: flex; gap: 8px;">
<button class="page-btn active">&#x1F4C1; Student Folders</button>
<button class="page-btn">&#x1F4C4; All Archived Docs</button>
</div>
<button class="page-btn">&#x1F5B6; Print List</button>
</div>
<div style="display: flex; flex-direction: column; gap: 10px;">
<div class="doc-folder-card">
<div class="doc-folder-left">
<div class="doc-folder-icon" style="color: #ef4444;">&#x1F4C1;</div>
<div>
<div class="doc-folder-title">ADAMS, JENNIE</div>
<div class="doc-folder-sub">16 items &bull; <span class="badge-inactive">Inactive</span></div>
</div>
</div>
<span style="color: var(--text-muted);">&rsaquo;</span>
</div>
<div class="doc-folder-card">
<div class="doc-folder-left">
<div class="doc-folder-icon" style="color: #ef4444;">&#x1F4C1;</div>
<div>
<div class="doc-folder-title">ASD, MARACENA</div>
<div class="doc-folder-sub">6 items &bull; <span class="badge-inactive">Inactive</span></div>
</div>
</div>
<span style="color: var(--text-muted);">&rsaquo;</span>
</div>
</div>
</div>
<!-- SCREEN 5: REPORTS -->
<div id="win-screen-reports" class="desktop-screen-content" style="display: none; flex-direction: column; gap: 14px;">
<div class="setup-banner" style="background: rgba(25, 135, 84, 0.15); border-color: rgba(25, 135, 84, 0.3);">
<div>
<div style="font-weight: 700; color: #fff;">DepEd Transparency Board <span style="font-size: 11px; opacity: 0.7;">1/3</span></div>
<div style="font-size: 12px; color: var(--text-secondary); margin-top: 2px;">Click toggle button to swap views (3rd click shows combined)</div>
</div>
<button class="page-btn">&#x21C4; Swap View</button>
</div>
<div class="setup-banner" style="background: var(--card-bg);">
<div style="font-weight: 800; font-size: 15px; color: #fff;">DEPED TRANSPARENCY BOARD</div>
<div style="display: flex; gap: 8px;">
<button class="page-btn">&#x1F4C5; S.Y. 2026-2027 (Active) &#x25BC;</button>
<button class="page-btn" style="background: #ef4444; color: #fff;">&#x1F4D6; Export PDF</button>
</div>
</div>
<div class="kpi-card" style="padding: 24px;">
<h4 style="margin-bottom: 4px;">4Ps Beneficiaries Distribution across Grades (SY 2026-2027)</h4>
<div style="height: 180px; display: flex; align-items: flex-end; gap: 24px; padding-top: 20px; border-bottom: 1px solid var(--card-border);">
<div style="display: flex; flex-direction: column; align-items: center; gap: 6px;">
<div style="width: 24px; height: 120px; background: #a855f7; border-radius: 4px 4px 0 0;"></div>
<span style="font-size: 11px; color: var(--text-secondary);">Grade 7</span>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 6px;">
<div style="width: 24px; height: 60px; background: #a855f7; border-radius: 4px 4px 0 0;"></div>
<span style="font-size: 11px; color: var(--text-secondary);">Grade 8</span>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 6px;">
<div style="width: 24px; height: 80px; background: #a855f7; border-radius: 4px 4px 0 0;"></div>
<span style="font-size: 11px; color: var(--text-secondary);">Grade 9</span>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 6px;">
<div style="width: 24px; height: 40px; background: #a855f7; border-radius: 4px 4px 0 0;"></div>
<span style="font-size: 11px; color: var(--text-secondary);">Grade 10</span>
</div>
<div style="display: flex; flex-direction: column; align-items: center; gap: 6px;">
<div style="width: 24px; height: 90px; background: #a855f7; border-radius: 4px 4px 0 0;"></div>
<span style="font-size: 11px; color: var(--text-secondary);">SHS</span>
</div>
</div>
</div>
</div>
<!-- SCREEN 6: USERS -->
<div id="win-screen-users" class="desktop-screen-content" style="display: none; flex-direction: column; gap: 14px;">
<div class="kpi-card">
<h4 style="margin-bottom: 12px;">Active Faculty &amp; System Personnel</h4>
<div style="display: flex; flex-direction: column; gap: 8px;">
<div class="student-card-row">
<div class="student-left">
<div class="avatar-badge">AD</div>
<div class="student-names">
<h4>Admin Registrar</h4>
<span>admin@tis.edu.ph</span>
</div>
</div>
<span class="badge-jhs">Super Admin</span>
</div>
<div class="student-card-row">
<div class="student-left">
<div class="avatar-badge" style="background: #0284c7;">TC</div>
<div class="student-names">
<h4>Ms. Carmela Diaz</h4>
<span>adviser.g7@tis.edu.ph</span>
</div>
</div>
<span class="badge-shs">Teacher / Adviser</span>
</div>
</div>
</div>
</div>
<!-- SCREEN 7: HISTORY -->
<div id="win-screen-history" class="desktop-screen-content" style="display: none; flex-direction: column; gap: 14px;">
<div class="kpi-card">
<h4 style="margin-bottom: 12px;">System Activity Audit Trail</h4>
<div style="display: flex; flex-direction: column; gap: 8px; font-size: 13px;">
<div class="info-row"><span>Student Record Updated (ADAMS, JENNIE)</span><span style="color: var(--text-secondary);">Today, 10:04 AM</span></div>
<div class="info-row"><span>SF10 Document Uploaded via Scanner</span><span style="color: var(--text-secondary);">Today, 09:42 AM</span></div>
<div class="info-row"><span>Admin Login Success</span><span style="color: var(--text-secondary);">Today, 08:30 AM</span></div>
</div>
</div>
</div>
<!-- SCREEN 8: SETTINGS & ABOUT -->
<div id="win-screen-settings" class="desktop-screen-content" style="display: none; flex-direction: column; gap: 14px;">
<div class="settings-list-view">
<!-- Collapsible 1: Academic & Graduation -->
<div class="settings-card-item">
<div class="settings-card-header" onclick="toggleSettingsSection('academic')">
<h4>Academic &amp; Graduation</h4>
<span id="settings-chevron-academic" class="chevron">&#x25BC;</span>
</div>
<div id="settings-body-academic" class="settings-card-body" style="display: none;">
<div class="info-row"><span class="label">Current Active Term:</span><span class="val">S.Y. 2026-2027</span></div>
<div class="info-row"><span class="label">Graduation Checking:</span><span class="val">Automatic Verification</span></div>
</div>
</div>
<!-- Collapsible 2: Student Enrollment Auto-Update -->
<div class="settings-card-item">
<div class="settings-card-header" onclick="toggleSettingsSection('enrollment')">
<h4>Student Enrollment Auto-Update</h4>
<span id="settings-chevron-enrollment" class="chevron">&#x25BC;</span>
</div>
<div id="settings-body-enrollment" class="settings-card-body" style="display: none;">
<div class="info-row"><span class="label">Auto-Update from SF Forms:</span><span class="val">Enabled (Daily)</span></div>
</div>
</div>
<!-- Collapsible 3: Remind Teachers -->
<div class="settings-card-item">
<div class="settings-card-header" onclick="toggleSettingsSection('teachers')">
<h4>Remind Teachers</h4>
<span id="settings-chevron-teachers" class="chevron">&#x25BC;</span>
</div>
<div id="settings-body-teachers" class="settings-card-body" style="display: none;">
<div class="info-row"><span class="label">Pending Grades Reminder:</span><span class="val">Active (Every Friday)</span></div>
</div>
</div>
<!-- Collapsible 4: Appearance & Feedback -->
<div class="settings-card-item">
<div class="settings-card-header" onclick="toggleSettingsSection('appearance')">
<h4>Appearance &amp; Feedback</h4>
<span id="settings-chevron-appearance" class="chevron">&#x25BC;</span>
</div>
<div id="settings-body-appearance" class="settings-card-body" style="display: none;">
<div class="info-row"><span class="label">Theme Mode:</span><span class="val">Dark Mode (Default)</span></div>
<div class="info-row"><span class="label">Sound Effects:</span><span class="val">Enabled</span></div>
<div class="info-row"><span class="label">Haptic Vibration:</span><span class="val">Enabled</span></div>
</div>
</div>
<!-- Collapsible 5: Security -->
<div class="settings-card-item">
<div class="settings-card-header" onclick="toggleSettingsSection('security')">
<div style="display: flex; align-items: center; gap: 10px;">
<span style="color: var(--accent-emerald);">&#x1F512;</span>
<div>
<h4>Security</h4>
<p style="font-size: 11px; color: var(--text-secondary); margin-top: 2px;">Manage password, active login sessions, and account status</p>
</div>
</div>
<span class="chevron">&rsaquo;</span>
</div>
</div>
<!-- Collapsible 6: About & App Updates (Feature Just Implemented) -->
<div class="settings-card-item">
<div class="settings-card-header" onclick="toggleSettingsSection('about')">
<div style="display: flex; align-items: center; gap: 10px;">
<span style="color: var(--accent-emerald);">&#x2139;</span>
<h4>About &amp; App Updates</h4>
</div>
<span id="settings-chevron-about" class="chevron">&#x25BC;</span>
</div>
<div id="settings-body-about" class="settings-card-body" style="display: flex;">
<div class="info-row"><span class="label">Application:</span><span class="val">Talipan Integrated School - RMS</span></div>
<div class="info-row"><span class="label">Current Version:</span><span class="val">v1.0.23 (Build 24)</span></div>
<div class="info-row"><span class="label">Platform:</span><span class="val">Windows</span></div>
<div class="info-row"><span class="label">Architecture:</span><span class="val">x64 (64-bit)</span></div>
<div class="info-row"><span class="label">Institution:</span><span class="val">Talisay National High School</span></div>
<div class="info-row"><span class="label">Developed By:</span><span class="val">Dalubhasaan ng Lungsod ng San Pablo (DLSP)</span></div>
<div style="margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--card-border);">
<h5 style="margin-bottom: 6px;">Software Updates</h5>
<p style="font-size: 11px; color: var(--text-secondary); margin-bottom: 12px;">Check for new releases and improvements.</p>
<div id="update-result-banner" style="display: none; padding: 12px; background: rgba(25, 135, 84, 0.15); border: 1px solid rgba(25, 135, 84, 0.35); border-radius: 8px; margin-bottom: 12px;"></div>
<button id="btn-check-updates" class="page-btn" style="background: var(--primary-green); color: #fff; display: flex; align-items: center; gap: 6px;" onclick="simulateUpdateCheck()">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21.5 2v6h-6M21.34 15.57a10 10 0 1 1-.57-8.38l5.67-5.67"/></svg>
<span>Check for Updates</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<!-- ==============================================================
2. ANDROID MOBILE APP (Pixel-Perfect Smartphone Mockup)
============================================================== -->
<div id="phone-frame" class="phone-frame" style="display: none;">
<!-- Punch-hole Camera -->
<div class="phone-punch-hole"></div>
<!-- Inner Phone Screen -->
<div class="phone-screen-inner">
<!-- Android 14 Status Bar -->
<div class="phone-status-bar">
<div class="phone-status-left">
<span id="phone-clock">10:05</span>
<div class="phone-app-icons">
<!-- Discord / App Icons -->
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994.021-.041.001-.09-.041-.106a13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.929 1.793 8.18 1.793 12.061 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.894.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.028zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/></svg>
<!-- Messenger -->
<svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.373 0 0 4.974 0 11.111c0 3.498 1.745 6.616 4.472 8.652v4.237l4.086-2.242c1.093.303 2.253.464 3.442.464 6.627 0 12-4.974 12-11.111C24 4.974 18.627 0 12 0zm1.191 14.963l-3.056-3.26-5.963 3.26 6.559-6.963 3.13 3.259 5.89-3.259-6.56 6.963z"/></svg>
<!-- YouTube Play -->
<svg width="11" height="11" viewBox="0 0 24 24" fill="currentColor"><path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
</div>
</div>
<div class="phone-status-right">
<span style="font-size: 10px; color: #cbd5e1;">8.68 KB/s</span>
<span>⏰</span>
<span>ᛒ</span>
<span>📶</span>
<span>📶</span>
<span>🔋 45%⚡</span>
</div>
</div>
<!-- Android App Header (Changes Title and Actions Dynamically) -->
<div class="phone-app-header">
<div class="phone-header-left">
<button class="phone-drawer-btn" onclick="openMobileDrawer()" title="Open Navigation Menu">☰</button>
<span id="phone-screen-title" class="phone-header-title">Dashboard</span>
</div>
<div id="phone-header-actions" class="phone-header-actions">
<!-- Rendered dynamically by syncScreenView() -->
</div>
</div>
<!-- Slide-out Android Navigation Drawer -->
<div id="mobile-drawer-backdrop" class="mobile-drawer-backdrop" onclick="closeMobileDrawer()"></div>
<div id="mobile-drawer" class="mobile-drawer">
<div class="mobile-drawer-header">
<img src="assets/logo.png" alt="School Logo" class="mobile-drawer-logo">
<div class="mobile-drawer-user">
<h4>TIS RMS</h4>
<span>Admin Registrar Talisay</span>
<p>admin@tis.edu.ph</p>
</div>
</div>
<div class="mobile-drawer-body">
<div class="mobile-drawer-group-title">OVERVIEW</div>
<div class="mobile-drawer-item active" data-screen="dashboard" onclick="setScreen('dashboard'); closeMobileDrawer();">
<span class="icon">📊</span>
<span>Dashboard</span>
</div>
<div class="mobile-drawer-item" data-screen="students" onclick="setScreen('students'); closeMobileDrawer();">
<span class="icon">🎓</span>
<span>Students</span>
</div>
<div class="mobile-drawer-item" data-screen="documents" onclick="setScreen('documents'); closeMobileDrawer();">
<span class="icon">📁</span>
<span>Documents</span>
</div>
<div class="mobile-drawer-item" data-screen="archives" onclick="setScreen('archives'); closeMobileDrawer();">
<span class="icon">🗄️</span>
<span>Archives</span>
</div>
<div class="mobile-drawer-group-title">ACCOUNT</div>
<div class="mobile-drawer-item" data-screen="reports" onclick="setScreen('reports'); closeMobileDrawer();">
<span class="icon">📈</span>
<span>Reports</span>
</div>
<div class="mobile-drawer-item" data-screen="users" onclick="setScreen('users'); closeMobileDrawer();">
<span class="icon">👥</span>
<span>Users</span>
</div>
<div class="mobile-drawer-item" data-screen="history" onclick="setScreen('history'); closeMobileDrawer();">
<span class="icon">🕒</span>
<span>History</span>
</div>
<div class="mobile-drawer-item" data-screen="settings" onclick="setScreen('settings'); closeMobileDrawer();">
<span class="icon">⚙️</span>
<span>Settings</span>
</div>
</div>
</div>
<!-- Mobile Scrollable Screen Content -->
<div class="phone-scroll-content">
<!-- 1. ANDROID DASHBOARD (from dashboard.webp) -->
<div id="phone-screen-dashboard" class="mobile-screen-content" style="display: flex; flex-direction: column; gap: 14px;">
<div class="android-page-title">Dashboard Overview</div>
<!-- Setup Required Banner -->
<div class="setup-banner">
<div class="setup-banner-left">
<span class="setup-banner-icon">⚙️</span>
<span>Setup Required</span>
</div>
<div style="display: flex; gap: 12px; color: var(--text-muted); cursor: pointer;">
<span>⌄</span>
<span>✕</span>
</div>
</div>
<div class="android-page-subtitle">Welcome back, Admin Registrar. Here is what is happening today.</div>
<!-- 2x2 Stat Cards -->
<div class="android-stat-grid">
<div class="android-stat-card" onclick="setScreen('students')">
<div class="android-stat-top">
<span style="font-size: 18px; color: var(--accent-emerald);">🎓</span>
<span style="color: var(--text-muted);">&rsaquo;</span>
</div>
<div class="android-stat-title">Total Students</div>
<div class="android-stat-val">91</div>
</div>
<div class="android-stat-card" onclick="setScreen('users')">
<div class="android-stat-top">
<span style="font-size: 18px; color: #38bdf8;">👥</span>
<span style="color: var(--text-muted);">&rsaquo;</span>
</div>
<div class="android-stat-title">Active Users</div>
<div class="android-stat-val">18</div>
</div>
<div class="android-stat-card" onclick="setScreen('documents')">
<div class="android-stat-top">
<span style="font-size: 18px; color: var(--accent-emerald);">📁</span>
<span style="color: var(--text-muted);">&rsaquo;</span>
</div>
<div class="android-stat-title">Complete Docs</div>
<div class="android-stat-val">0</div>
</div>
<div class="android-stat-card" onclick="setScreen('documents')">
<div class="android-stat-top">
<span style="font-size: 18px; color: #f59e0b;">🧰</span>
<span style="color: var(--text-muted);">&rsaquo;</span>
</div>
<div class="android-stat-title">Missing Docs</div>
<div class="android-stat-val">91</div>
</div>
</div>
<!-- Analytics & KPIs -->
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 6px;">
<div style="display: flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; font-size: 16px;">
<span style="color: var(--accent-emerald);">📈</span>
<span>Analytics &amp; KPIs</span>
</div>
<span class="badge" style="background: rgba(25,135,84,0.15); border-color: rgba(25,135,84,0.3); color: #a7f3d0; font-size: 11px;">
📅 S.Y. 2026-2027
</span>
</div>
<!-- Digitalization Progress -->
<div class="kpi-card" style="padding: 16px;">
<div style="display: flex; align-items: flex-start; gap: 10px;">
<span style="color: var(--accent-emerald); font-size: 18px;">🔄</span>
<div>
<h4 style="font-size: 14px; color: #fff;">Digitalization Progress</h4>
<p style="font-size: 11px; color: #8e9e95; margin-top: 2px;">Enrolled students with all mandatory requirements completed</p>
</div>
</div>
<div class="rings-container" style="margin-top: 16px;">
<div class="ring-item">
<div class="circular-ring" style="border-color: #10b981; color: #10b981; width: 68px; height: 68px; font-size: 14px;">0%</div>
<span class="ring-label" style="font-size: 11px; margin-top: 6px;">JHS</span>
<span class="ring-sub" style="font-size: 10px;">0 / 5</span>
</div>
<div class="ring-item">
<div class="circular-ring" style="border-color: #38bdf8; color: #38bdf8; width: 68px; height: 68px; font-size: 14px;">0%</div>
<span class="ring-label" style="font-size: 11px; margin-top: 6px;">SHS</span>
<span class="ring-sub" style="font-size: 10px;">0 / 0</span>
</div>
<div class="ring-item">
<div class="circular-ring" style="border-color: #a855f7; color: #a855f7; width: 68px; height: 68px; font-size: 14px;">0%</div>
<span class="ring-label" style="font-size: 11px; margin-top: 6px;">Overall</span>
<span class="ring-sub" style="font-size: 10px;">0 / 5</span>
</div>
</div>
</div>
<!-- Document Status Distribution -->
<div class="kpi-card" style="padding: 16px;">
<div style="display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px;">
<span style="color: #f59e0b; font-size: 18px;">🥧</span>
<div>
<h4 style="font-size: 14px; color: #fff;">Document Status Distribution</h4>
<p style="font-size: 11px; color: #8e9e95; margin-top: 2px;">By unique document types uploaded</p>
</div>
</div>
<div class="kpi-progress-bar">
<div class="kpi-bar-meta">
<span style="font-size: 11px;">Completed</span>
<span style="font-size: 11px; color: #94a3b8;">1/15 (6.7%)</span>
</div>
<div class="bar-track-custom"><div class="bar-fill-green"></div></div>
</div>
<div class="kpi-progress-bar">
<div class="kpi-bar-meta">
<span style="font-size: 11px;">Archived</span>
<span style="font-size: 11px; color: #94a3b8;">8/15 (53.3%)</span>
</div>
<div class="bar-track-custom"><div class="bar-fill-amber"></div></div>
</div>
</div>
</div>
<!-- 2. ANDROID STUDENTS (from students.webp) -->
<div id="phone-screen-students" class="mobile-screen-content" style="display: none; flex-direction: column; gap: 10px;">
<!-- Student 1: ADAMS, JENNIE -->
<div class="android-student-card" onclick="openStudentDetail('ADAMS, JENNIE', '108297100191', 'Grade 12 - STEM - Quisumbing', 'Inactive')">
<div class="android-student-top">
<div class="android-student-avatar">JA</div>
<div class="android-student-info">
<div class="android-student-header-row">
<span class="android-student-name">ADAMS, JENNIE</span>
<div class="android-badges-wrap">
<span class="badge-4ps">4Ps</span>
<span class="badge-inactive">Inactive</span>
</div>
</div>
<div class="android-student-sub">LRN: 108297100191 &bull; Grade 12 - STEM - Quisu...</div>
</div>
</div>
<div class="android-student-bottom">
<div class="android-doc-prog">
<span style="font-size: 12px; color: #94a3b8;">📁</span>
<span class="android-doc-text">5 / 7 Docs <span style="font-size: 10px; color: #64748b;">Archived ▾</span></span>
<div class="android-doc-bar"><div class="android-doc-fill" style="width: 71%;"></div></div>
</div>
<span class="android-folder-icon">📁</span>
</div>
</div>
<!-- Student 2: ASD, MARACENA -->
<div class="android-student-card" onclick="openStudentDetail('ASD, MARACENA', '412341241234', 'Grade 10 - Pocahontas', 'Inactive')">
<div class="android-student-top">
<div class="android-student-avatar">MA</div>
<div class="android-student-info">
<div class="android-student-header-row">
<span class="android-student-name">ASD, MARACENA</span>
<div class="android-badges-wrap">
<span class="badge-inactive">Inactive</span>
</div>
</div>
<div class="android-student-sub">LRN: 412341241234 &bull; Grade 10 - Pocahontas</div>
</div>
</div>
<div class="android-student-bottom">
<div class="android-doc-prog">
<span style="font-size: 12px; color: #94a3b8;">📁</span>
<span class="android-doc-text">3 / 3 Docs <span style="font-size: 10px; color: #64748b;">Archived ▾</span></span>
<div class="android-doc-bar"><div class="android-doc-fill" style="width: 100%;"></div></div>
</div>
<span class="android-folder-icon">📁</span>
</div>
</div>
<!-- Student 3: ASDF, ASDF -->
<div class="android-student-card" onclick="openStudentDetail('ASDF, ASDF', '342142141234', 'Grade 12 - Euphoria', 'Inactive')">
<div class="android-student-top">
<div class="android-student-avatar">AA</div>
<div class="android-student-info">
<div class="android-student-header-row">
<span class="android-student-name">ASDF, ASDF</span>
<div class="android-badges-wrap">
<span class="badge-inactive">Inactive</span>
</div>
</div>
<div class="android-student-sub">LRN: 342142141234 &bull; Grade 12 - Euphoria</div>
</div>
</div>
<div class="android-student-bottom">
<div class="android-doc-prog">
<span style="font-size: 12px; color: #94a3b8;">📁</span>
<span class="android-doc-text">4 / 4 Docs <span style="font-size: 10px; color: #64748b;">Archived ▾</span></span>
<div class="android-doc-bar"><div class="android-doc-fill" style="width: 100%;"></div></div>
</div>
<span class="android-folder-icon">📁</span>
</div>
</div>
<!-- Student 4: Arroyo, Gemma -->
<div class="android-student-card" onclick="openStudentDetail('Arroyo, Gemma', '108297100198', 'Grade 7 - Moonstar', 'Dropped')">
<div class="android-student-top">
<div class="android-student-avatar">GA</div>
<div class="android-student-info">
<div class="android-student-header-row">
<span class="android-student-name">Arroyo, Gemma</span>
<div class="android-badges-wrap">
<span class="badge-4ps">4Ps</span>
<span class="badge-dropped">Dropped</span>
</div>
</div>
<div class="android-student-sub">LRN: 108297100198 &bull; Grade 7 - Moonstar</div>
</div>
</div>
<div class="android-student-bottom">
<div class="android-doc-prog">
<span style="font-size: 12px; color: #94a3b8;">📁</span>
<span class="android-doc-text">2 / 3 Docs <span style="font-size: 10px; color: #64748b;">Archived ▾</span></span>
<div class="android-doc-bar"><div class="android-doc-fill" style="width: 66%;"></div></div>
</div>
<span class="android-folder-icon">📁</span>
</div>
</div>
<!-- Student 5: BAKA, ASTA -->
<div class="android-student-card" onclick="openStudentDetail('BAKA, ASTA', '108371216161', 'Grade 12 - Euphoria', 'Inactive')">
<div class="android-student-top">
<div class="android-student-avatar">AB</div>
<div class="android-student-info">
<div class="android-student-header-row">
<span class="android-student-name">BAKA, ASTA</span>
<div class="android-badges-wrap">
<span class="badge-4ps">4Ps</span>
<span class="badge-inactive">Inactive</span>
</div>
</div>
<div class="android-student-sub">LRN: 108371216161 &bull; Grade 12 - Euphoria</div>
</div>
</div>
<div class="android-student-bottom">
<div class="android-doc-prog">
<span style="font-size: 12px; color: #94a3b8;">📁</span>
<span class="android-doc-text">1 / 7 Docs <span style="font-size: 10px; color: #64748b;">Archived ▾</span></span>
<div class="android-doc-bar"><div class="android-doc-fill" style="width: 14%;"></div></div>
</div>
<span class="android-folder-icon">📁</span>
</div>
</div>
<!-- Android Pagination (Exact from Screenshot) -->
<div class="android-pagination">
<span class="android-page-btn">&laquo;</span>
<span class="android-page-btn">&lsaquo;</span>
<span class="android-page-btn active">1</span>
<span class="android-page-btn">2</span>
<span class="android-page-btn">&rsaquo;</span>
<span class="android-page-btn">&raquo;</span>
<span class="android-page-btn">1 ▾</span>
</div>
</div>
<!-- 3. ANDROID DOCUMENTS (from documents.webp) -->
<div id="phone-screen-documents" class="mobile-screen-content" style="display: none; flex-direction: column; gap: 10px;">
<!-- Segmented bar -->
<div class="android-segmented-row">
<div class="android-pill-group">
<div class="android-pill active">📁 Folders</div>
<div class="android-pill">📄 Documents</div>
</div>
<button class="phone-action-icon" style="font-size: 18px;">⋮</button>
</div>
<!-- Folder card RIZAL_JUAN -->
<div class="android-student-card" style="padding: 16px;">
<div style="display: flex; align-items: center; justify-content: space-between;">
<div style="display: flex; align-items: center; gap: 14px;">
<div style="width: 44px; height: 44px; background: rgba(245,158,11,0.15); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px;">📁</div>
<div>
<h4 style="font-size: 14px; font-weight: 700; color: #fff;">RIZAL_JUAN_308035123456</h4>
<span style="font-size: 11px; color: #8e9e95;">1 item</span>
<div style="display: flex; gap: 6px; margin-top: 6px;">
<span class="badge-jhs">JHS 0/3</span>
<span class="badge-shs">SHS 0/4</span>
</div>
</div>
</div>
<span style="color: var(--text-muted); font-size: 18px;">&rsaquo;</span>
</div>
</div>
</div>
<!-- 4. ANDROID ARCHIVES (from archives.webp) -->
<div id="phone-screen-archives" class="mobile-screen-content" style="display: none; flex-direction: column; gap: 8px;">
<!-- Segmented bar -->
<div class="android-segmented-row">
<div class="android-pill-group">
<div class="android-pill active">📁 Folders</div>
<div class="android-pill">🗄️ Archived</div>
</div>
<button class="phone-action-icon" style="font-size: 18px;">⋮</button>
</div>
<!-- Red Star Folders List -->
<div class="android-student-card" style="padding: 12px 14px;">
<div style="display: flex; align-items: center; justify-content: space-between;">
<div style="display: flex; align-items: center; gap: 12px;">
<span style="font-size: 24px; color: #ef4444;">📁</span>
<div>
<h4 style="font-size: 13px; font-weight: 700; color: #fff;">ADAMS, JENNIE</h4>
<div style="display: flex; align-items: center; gap: 6px; margin-top: 2px;">
<span style="font-size: 11px; color: #8e9e95;">16 items</span>
<span class="badge-inactive">Inactive</span>
</div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 10px; color: var(--text-muted);">
<span>⋮</span>
<span>&rsaquo;</span>
</div>
</div>
</div>
<div class="android-student-card" style="padding: 12px 14px;">
<div style="display: flex; align-items: center; justify-content: space-between;">
<div style="display: flex; align-items: center; gap: 12px;">
<span style="font-size: 24px; color: #ef4444;">📁</span>
<div>
<h4 style="font-size: 13px; font-weight: 700; color: #fff;">ASD, MARACENA</h4>
<div style="display: flex; align-items: center; gap: 6px; margin-top: 2px;">
<span style="font-size: 11px; color: #8e9e95;">6 items</span>
<span class="badge-inactive">Inactive</span>
</div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 10px; color: var(--text-muted);">
<span>⋮</span>
<span>&rsaquo;</span>
</div>
</div>
</div>
<div class="android-student-card" style="padding: 12px 14px;">
<div style="display: flex; align-items: center; justify-content: space-between;">
<div style="display: flex; align-items: center; gap: 12px;">
<span style="font-size: 24px; color: #ef4444;">📁</span>
<div>
<h4 style="font-size: 13px; font-weight: 700; color: #fff;">ASDF, ASDF</h4>
<div style="display: flex; align-items: center; gap: 6px; margin-top: 2px;">
<span style="font-size: 11px; color: #8e9e95;">10 items</span>
<span class="badge-inactive">Inactive</span>
</div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 10px; color: var(--text-muted);">
<span>⋮</span>
<span>&rsaquo;</span>
</div>
</div>
</div>
<div class="android-student-card" style="padding: 12px 14px;">
<div style="display: flex; align-items: center; justify-content: space-between;">
<div style="display: flex; align-items: center; gap: 12px;">
<span style="font-size: 24px; color: #ef4444;">📁</span>
<div>
<h4 style="font-size: 13px; font-weight: 700; color: #fff;">Arroyo, Gemma</h4>
<div style="display: flex; align-items: center; gap: 6px; margin-top: 2px;">
<span style="font-size: 11px; color: #8e9e95;">8 items</span>
<span class="badge-dropped">Dropped</span>
</div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 10px; color: var(--text-muted);">
<span>⋮</span>
<span>&rsaquo;</span>
</div>
</div>
</div>
<div class="android-student-card" style="padding: 12px 14px;">
<div style="display: flex; align-items: center; justify-content: space-between;">
<div style="display: flex; align-items: center; gap: 12px;">
<span style="font-size: 24px; color: #ef4444;">📁</span>
<div>
<h4 style="font-size: 13px; font-weight: 700; color: #fff;">BAKA, ASTA</h4>
<div style="display: flex; align-items: center; gap: 6px; margin-top: 2px;">
<span style="font-size: 11px; color: #8e9e95;">2 items</span>
<span class="badge-inactive">Inactive</span>
</div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 10px; color: var(--text-muted);">
<span>⋮</span>
<span>&rsaquo;</span>
</div>
</div>
</div>
<!-- Pagination -->
<div class="android-pagination">
<span class="android-page-btn">&laquo;</span>
<span class="android-page-btn">&lsaquo;</span>
<span class="android-page-btn active">1</span>
<span class="android-page-btn">2</span>
<span class="android-page-btn">&rsaquo;</span>
<span class="android-page-btn">&raquo;</span>
<span class="android-page-btn">1 ▾</span>
</div>
</div>
<!-- 5. ANDROID REPORTS (from reports.webp) -->
<div id="phone-screen-reports" class="mobile-screen-content" style="display: none; flex-direction: column; gap: 12px;">
<!-- Top Swap Banner -->
<div class="setup-banner" style="background: rgba(25,135,84,0.15); border-color: rgba(25,135,84,0.35); padding: 12px 14px;">
<div>
<div style="font-size: 13px; font-weight: 700; color: #fff;">🏛️ DepEd Transparency Board <span style="font-size: 10px; opacity: 0.7;">1/3</span></div>
<span style="font-size: 11px; color: #8e9e95;">Tap toggle to switch</span>
</div>
<button class="phone-action-btn-green" style="padding: 4px 10px; font-size: 13px;">⇄</button>
</div>
<!-- Green Transparency Card -->
<div class="android-transparency-card">
<div class="android-transparency-header">
<span>⊞</span>
<span>DEPED TRANSPARENCY BOARD</span>
</div>
<div style="background: rgba(0,0,0,0.2); padding: 8px 12px; border-radius: 8px; font-size: 12px; display: flex; justify-content: space-between; align-items: center;">
<span>🎯 Academic Year: SY 2026-2027 (Active)</span>
<span>▾</span>
</div>
<button style="background: #ef4444; color: #fff; border: none; border-radius: 8px; padding: 8px 14px; font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; width: fit-content;">
<span>📕 Export PDF</span>
</button>
</div>
<!-- Sub-Tabs -->
<div style="display: flex; gap: 14px; border-bottom: 2px solid rgba(255,255,255,0.06); padding-bottom: 8px; font-size: 12px; font-weight: 600;">
<span style="color: var(--accent-emerald); border-bottom: 2px solid var(--accent-emerald); padding-bottom: 8px; margin-bottom: -10px;">⊞ All Sections</span>
<span style="color: #94a3b8;">📊 Data on Enrollment</span>
<span style="color: #94a3b8;">📉 Dropouts</span>
</div>
<!-- Enrollment Card with Chart -->
<div class="kpi-card" style="padding: 16px;">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;">
<div style="display: flex; align-items: center; gap: 8px;">
<span style="color: var(--accent-emerald);">📊</span>
<h4 style="font-size: 13px; color: #fff;">Data on Enrollment</h4>
</div>
<div style="display: flex; gap: 6px;">
<span style="background: rgba(25,135,84,0.2); color: #10b981; font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 4px;">Active SY Total: 5</span>
<button style="background: #ef4444; color: #fff; border: none; border-radius: 4px; padding: 4px 8px; font-size: 10px; font-weight: 700;">📕 Export PDF</button>
</div>
</div>
<div style="font-size: 12px; font-weight: 600; color: #cbd5e1; margin-bottom: 10px;">Enrollment Trends across School Years</div>
<div style="display: flex; gap: 12px; font-size: 10px; color: #8e9e95; margin-bottom: 12px;">
<span>■ 2024-2025</span>
<span style="color: #38bdf8;">■ 2025-2026</span>
<span style="color: #10b981;">■ 2026-2027</span>
</div>
<!-- Bar Chart Simulation -->
<div style="height: 120px; display: flex; align-items: flex-end; gap: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 4px; padding-left: 20px; position: relative;">
<div style="position: absolute; left: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-between; font-size: 9px; color: #64748b;">
<span>34</span><span>30</span><span>20</span><span>10</span><span>0</span>
</div>
<div style="width: 14px; height: 25px; background: #64748b; border-radius: 2px;"></div>
<div style="width: 14px; height: 35px; background: #38bdf8; border-radius: 2px;"></div>
<div style="width: 14px; height: 38px; background: #10b981; border-radius: 2px;"></div>
<div style="width: 14px; height: 20px; background: #64748b; border-radius: 2px; margin-left: 10px;"></div>
<div style="width: 14px; height: 42px; background: #38bdf8; border-radius: 2px;"></div>
<div style="width: 14px; height: 85px; background: #38bdf8; border-radius: 2px; margin-left: 10px;"></div>
</div>
</div>
</div>
<!-- 6. ANDROID USERS (from users.webp) -->
<div id="phone-screen-users" class="mobile-screen-content" style="display: none; flex-direction: column; gap: 10px;">
<!-- Horizontal Filter Chips -->
<div class="android-filter-chips">
<span class="android-chip active">All (18)</span>
<span class="android-chip">Admin (6)</span>
<span class="android-chip">Teacher (12)</span>
<span class="android-chip">Inactive</span>
</div>
<!-- Users List -->
<div class="android-user-card">
<div class="android-user-left">
<div class="android-user-avatar">AA</div>
<div class="android-user-details">
<h4>Ana Arandia</h4>
<div class="android-user-handle">@ana</div>
<div class="android-user-contact">anaarandia@gmail.com &bull; 09123456789</div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 8px;">
<span class="android-user-badge">ADMIN</span>
<span style="color: var(--text-muted);">&rsaquo;</span>
</div>
</div>
<div class="android-user-card">
<div class="android-user-left">
<div class="android-user-avatar" style="background: #143528; color: #10b981;">RB</div>
<div class="android-user-details">
<h4>Rene Baterbonia</h4>
<div class="android-user-handle">@rene</div>
<div class="android-user-contact">renebaterbonia@gmail.com &bull; 0912345...</div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 8px;">
<span class="android-user-badge">ADMIN</span>
<span style="color: var(--text-muted);">&rsaquo;</span>
</div>
</div>
<div class="android-user-card">
<div class="android-user-left">
<div class="android-user-avatar">ED</div>
<div class="android-user-details">
<h4>Ermhar A. De Vera</h4>
<div class="android-user-handle">@ermhar</div>
<div class="android-user-contact">ermhardevera11@gmail.com &bull; 094784...</div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 8px;">
<span class="android-user-badge">ADMIN</span>
<span style="color: var(--text-muted);">&rsaquo;</span>
</div>
</div>
<div class="android-user-card">
<div class="android-user-left">
<div class="android-user-avatar">PL</div>
<div class="android-user-details">
<h4>Pao Lul</h4>
<div class="android-user-handle">@paolul</div>
<div class="android-user-contact">paolul@gmail.com &bull; 09123123123</div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 8px;">
<span class="android-user-badge">ADMIN</span>
<span style="color: var(--text-muted);">&rsaquo;</span>
</div>
</div>
<div class="android-user-card">
<div class="android-user-left">
<div class="android-user-avatar">CP</div>
<div class="android-user-details">
<h4>Chinee Pasigan</h4>
<div class="android-user-handle">@chinee</div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 8px;">
<span class="android-user-badge">ADMIN</span>
<span style="color: var(--text-muted);">&rsaquo;</span>
</div>
</div>
<div class="android-user-card">
<div class="android-user-left">
<div class="android-user-avatar" style="background: #198754; color: #fff;">AT</div>
<div class="android-user-details">
<h4>Admin Registrar Talis...</h4>
<div class="android-user-handle">@admin</div>
<div class="android-user-contact">gcrischarles@gmail.com &bull; 093929756...</div>
</div>
</div>
<div style="display: flex; align-items: center; gap: 8px;">
<span class="android-user-badge">ADMIN</span>
<span style="color: var(--text-muted);">&rsaquo;</span>
</div>
</div>
</div>
<!-- 7. ANDROID HISTORY (from history.webp) -->
<div id="phone-screen-history" class="mobile-screen-content" style="display: none; flex-direction: column; gap: 10px;">
<!-- Segmented tabs -->
<div class="android-segmented-row">
<div class="android-pill-group">
<div class="android-pill active">📑 Activities</div>
<div class="android-pill">👤 Users</div>
<div class="android-pill">💻 Sessions</div>
</div>
</div>
<div style="display: flex; align-items: center; justify-content: space-between; margin-top: 4px;">
<span style="font-size: 13px; font-weight: 700; color: #fff;">Recent Activity Logs</span>
<div style="display: flex; gap: 10px; color: #94a3b8; font-size: 14px;">
<span>🔍</span>
<span>🎛️</span>
<span>🔄</span>
</div>
</div>
<!-- Activity 1 -->
<div class="android-activity-card">
<div class="android-activity-icon archive">📥</div>
<div class="android-activity-body">
<div class="android-activity-top">
<div class="android-activity-tags">
<span class="android-tag-archive">ARCHIVE</span>
<span class="android-tag-student">STUDENT</span>
</div>
<span class="android-activity-date">Sep 28, 2026, 7:34 PM</span>
</div>
<div class="android-activity-desc">
Auto-archived 1 student(s) to 'Inactive' (no enrollment in AY 2026-2027 after scheduled cutoff (2026-09-26T23:59:59.000)): 108297100191 (JENNIE ADAMS)
</div>
<div class="android-activity-author">👤 By: Admin Registrar Talisay</div>
</div>
</div>
<!-- Activity 2 -->
<div class="android-activity-card">
<div class="android-activity-icon create">➕</div>
<div class="android-activity-body">
<div class="android-activity-top">
<div class="android-activity-tags">
<span style="background: rgba(16,185,129,0.2); color: #10b981; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px;">CREATE</span>
<span class="android-tag-student">DOCUMENT</span>
</div>
<span class="android-activity-date">Sep 27, 2026, 7:03 PM</span>
</div>
<div class="android-activity-desc">
Uploaded "JHS - Certificate of Enrollment.jpg" (JHS - Certificate of Enrollment) for JUAN RIZAL
</div>
<div class="android-activity-author">👤 By: Admin Registrar Talisay</div>
</div>
</div>
<!-- Activity 3 -->
<div class="android-activity-card">
<div class="android-activity-icon update">✏️</div>
<div class="android-activity-body">
<div class="android-activity-top">
<div class="android-activity-tags">
<span style="background: rgba(56,189,248,0.2); color: #38bdf8; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px;">UPDATE</span>
<span class="android-tag-student">STUDENT</span>
</div>
<span class="android-activity-date">Sep 27, 2026, 6:40 PM</span>
</div>
<div class="android-activity-desc">
Updated student ••••••••3456
</div>
<div class="android-activity-author">👤 By: Admin Registrar Talisay</div>
</div>
</div>
<!-- Pagination & Total -->
<div class="android-pagination">
<span class="android-page-btn">&laquo;</span>
<span class="android-page-btn">&lsaquo;</span>
<span class="android-page-btn active">1</span>
<span class="android-page-btn">2</span>
<span class="android-page-btn">&rsaquo;</span>
<span class="android-page-btn">&raquo;</span>
<span class="android-page-btn">1 ▾</span>
</div>
<div style="text-align: center; font-size: 11px; color: #8e9e95;">Total: 1142 activities</div>
</div>
<!-- 8. ANDROID SETTINGS (from settings.webp) -->
<div id="phone-screen-settings" class="mobile-screen-content" style="display: none; flex-direction: column; gap: 12px;">
<div class="android-page-title">Account Settings</div>
<div class="android-page-subtitle">Manage your profile information and security settings.</div>
<!-- Card 1: Profile Details -->
<div class="android-student-card" style="padding: 16px;">
<div style="display: flex; align-items: center; justify-content: space-between;">
<h4 style="font-size: 14px; font-weight: 700; color: #fff;">Profile Details</h4>
<span style="color: #94a3b8;">⌄</span>
</div>
</div>
<!-- Card 2: Document Requirements -->
<div class="android-student-card" style="padding: 16px;">
<div style="display: flex; align-items: flex-start; justify-content: space-between;">
<div style="display: flex; gap: 12px;">
<span style="font-size: 20px; color: var(--accent-emerald);">📁</span>
<div>
<h4 style="font-size: 14px; font-weight: 700; color: #fff;">Document Requirements</h4>
<p style="font-size: 12px; color: #8e9e95; margin-top: 2px;">Configure required documents for JHS and SHS</p>
</div>
</div>
<span style="color: #94a3b8; font-size: 16px;">&rsaquo;</span>
</div>
<div class="android-info-box-green">
ℹ️ Define which documents are required for enrollment per grade level (e.g., Form 137, Birth Certificate, Good Moral). Students with missing required documents will appear in the Missing Docs dashboard tile.
</div>
</div>
<!-- Card 3: Academic & Class Management -->
<div class="android-student-card" style="padding: 16px;">
<div style="display: flex; align-items: flex-start; justify-content: space-between;">
<div style="display: flex; gap: 12px;">
<span style="font-size: 20px; color: #38bdf8;">🎓</span>
<div>
<h4 style="font-size: 14px; font-weight: 700; color: #fff;">Academic &amp; Class Management</h4>
<p style="font-size: 12px; color: #8e9e95; margin-top: 2px;">Manage academic years, sections, and class advisers</p>
</div>
</div>
<span style="color: #94a3b8; font-size: 16px;">&rsaquo;</span>
</div>
<div class="android-info-box-blue">
ℹ️ Set up academic years, grade levels, and sections. Assign teachers to their sections so they can view and manage their students' records. Changes here affect enrollment options across the system.
</div>
</div>
<!-- Card 4: About & App Updates -->
<div class="android-student-card" style="padding: 16px;">
<div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;">
<div style="display: flex; align-items: center; gap: 8px;">
<span style="font-size: 16px; color: var(--accent-emerald);">ℹ️</span>
<h4 style="font-size: 14px; font-weight: 700; color: #fff;">About &amp; App Updates</h4>
</div>
</div>
<div class="info-row"><span class="label">App:</span><span class="val">TIS-RMS Mobile</span></div>
<div class="info-row"><span class="label">Architecture:</span><span class="val">ARM64 (64-bit)</span></div>
<div class="info-row"><span class="label">Version:</span><span class="val">v1.0.23</span></div>
<button class="page-btn" style="background: var(--primary-green); color: #fff; margin-top: 10px; width: 100%; border: none; padding: 10px; font-weight: 700; border-radius: 8px;" onclick="simulateUpdateCheck()">
Check for Updates
</button>
</div>
</div>
</div>
<!-- Android Home Navigation Gesture Bar (No bottom tabs) -->
<div class="android-gesture-pill"></div>
</div>
</div>
</main>
<!-- ── Interactive Modals ────────────────────────────────────── -->
<!-- Student Detail Modal -->
<div id="student-detail-modal" class="modal-backdrop" onclick="if(event.target===this)closeModal('student-detail-modal')">
<div class="modal-content">
<div class="modal-head">
<h3>Student Information</h3>
<button class="modal-close-btn" onclick="closeModal('student-detail-modal')">&times;</button>
</div>
<div class="modal-body">
<div style="display: flex; align-items: center; gap: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--card-border);">
<div class="avatar-badge" style="width: 44px; height: 44px; font-size: 16px;">AT</div>
<div>
<h4 id="detail-student-name" style="font-size: 15px; font-weight: 700;">ADAMS, JENNIE</h4>
<span id="detail-student-lrn" style="font-size: 12px; color: var(--text-secondary);">LRN: 108297100191</span>
</div>
</div>
<div class="info-row"><span class="label">Grade &amp; Section:</span><span id="detail-student-grade" class="val">Grade 12 - STEM</span></div>
<div class="info-row"><span class="label">Status:</span><span id="detail-student-status" class="val">Inactive</span></div>
<div class="info-row"><span class="label">School:</span><span class="val">Talisay National High School</span></div>
</div>
</div>
</div>
<!-- Add Student Modal -->
<div id="add-student-modal" class="modal-backdrop" onclick="if(event.target===this)closeModal('add-student-modal')">
<div class="modal-content">
<div class="modal-head">
<h3>Add Student Record</h3>
<button class="modal-close-btn" onclick="closeModal('add-student-modal')">&times;</button>
</div>
<div class="modal-body">
<p style="font-size: 13px; color: var(--text-secondary);">Choose registration mode:</p>
<div style="background: rgba(255,255,255,0.05); padding: 12px; border-radius: 8px; cursor: pointer;" onclick="alert('Demo: Opens multi-step student enrollment form.'); closeModal('add-student-modal');">
<h5 style="color: #fff;">1. Standard Student Stepper Form</h5>
<span style="font-size: 11px; color: var(--text-secondary);">Register student biographical details and LRN manually.</span>
</div>
<div style="background: rgba(255,255,255,0.05); padding: 12px; border-radius: 8px; cursor: pointer;" onclick="alert('Demo: Prompts camera / document scan OCR parser.'); closeModal('add-student-modal');">
<h5 style="color: #fff;">2. Scan Document OCR</h5>
<span style="font-size: 11px; color: var(--text-secondary);">Auto-populate details from Birth Certificate or SF10.</span>
</div>
</div>
</div>
</div>
<!-- Toast -->
<div id="download-toast" class="download-toast">
<div style="background: var(--primary-green); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
&#x21E9;
</div>
<div>
<div style="font-size: 12px; font-weight: 700;">Browser Download Triggered</div>
<div id="toast-filename" style="font-size: 11px; color: var(--text-secondary); font-family: monospace;">TIS_RMS_Setup_v1.0.24.exe</div>
</div>
</div>
<script src="app.js"></script>
</body>
</html>