1596 lines
87 KiB
HTML
1596 lines
87 KiB
HTML
<!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>—</span>
|
||
<span>▢</span>
|
||
<span style="cursor: pointer;">✕</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">☰</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">↪</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>+</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">⚙</span>
|
||
<span>Setup Required</span>
|
||
</div>
|
||
<div style="display: flex; gap: 12px; color: var(--text-muted); cursor: pointer;">
|
||
<span>▼</span>
|
||
<span>×</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">🎓</div>
|
||
<span class="app-stat-chevron">›</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">👥</div>
|
||
<span class="app-stat-chevron">›</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">✔</div>
|
||
<span class="app-stat-chevron">›</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">⚠</div>
|
||
<span class="app-stat-chevron">›</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);">📈</span>
|
||
<span>Analytics & KPIs</span>
|
||
<span class="badge">📅 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>🎓</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">📁 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">📁</span>
|
||
<span style="color: var(--text-muted);">⋮</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>🎓</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">📁 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">📁</span>
|
||
<span style="color: var(--text-muted);">⋮</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>🎓</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">📁 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">📁</span>
|
||
<span style="color: var(--text-muted);">⋮</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>🎓</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">📁 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">📁</span>
|
||
<span style="color: var(--text-muted);">⋮</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>🎓</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">📁 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">📁</span>
|
||
<span style="color: var(--text-muted);">⋮</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>🎓</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">📁 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">📁</span>
|
||
<span style="color: var(--text-muted);">⋮</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">📁 Student Folders</button>
|
||
<button class="page-btn">📄 All Documents</button>
|
||
</div>
|
||
<div style="display: flex; gap: 8px;">
|
||
<button class="page-btn" style="background: var(--primary-green); color: #fff;">☁ Upload</button>
|
||
<button class="page-btn">🖶 Print List</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="doc-folder-card">
|
||
<div class="doc-folder-left">
|
||
<div class="doc-folder-icon">📁</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;">›</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">📁 Student Folders</button>
|
||
<button class="page-btn">📄 All Archived Docs</button>
|
||
</div>
|
||
<button class="page-btn">🖶 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;">📁</div>
|
||
<div>
|
||
<div class="doc-folder-title">ADAMS, JENNIE</div>
|
||
<div class="doc-folder-sub">16 items • <span class="badge-inactive">Inactive</span></div>
|
||
</div>
|
||
</div>
|
||
<span style="color: var(--text-muted);">›</span>
|
||
</div>
|
||
|
||
<div class="doc-folder-card">
|
||
<div class="doc-folder-left">
|
||
<div class="doc-folder-icon" style="color: #ef4444;">📁</div>
|
||
<div>
|
||
<div class="doc-folder-title">ASD, MARACENA</div>
|
||
<div class="doc-folder-sub">6 items • <span class="badge-inactive">Inactive</span></div>
|
||
</div>
|
||
</div>
|
||
<span style="color: var(--text-muted);">›</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">⇄ 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">📅 S.Y. 2026-2027 (Active) ▼</button>
|
||
<button class="page-btn" style="background: #ef4444; color: #fff;">📖 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 & 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 & Graduation</h4>
|
||
<span id="settings-chevron-academic" class="chevron">▼</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">▼</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">▼</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 & Feedback</h4>
|
||
<span id="settings-chevron-appearance" class="chevron">▼</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);">🔒</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">›</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);">ℹ</span>
|
||
<h4>About & App Updates</h4>
|
||
</div>
|
||
<span id="settings-chevron-about" class="chevron">▼</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);">›</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);">›</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);">›</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);">›</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 & 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 • 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 • 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 • 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 • 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 • 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">«</span>
|
||
<span class="android-page-btn">‹</span>
|
||
<span class="android-page-btn active">1</span>
|
||
<span class="android-page-btn">2</span>
|
||
<span class="android-page-btn">›</span>
|
||
<span class="android-page-btn">»</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;">›</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>›</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>›</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>›</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>›</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>›</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Pagination -->
|
||
<div class="android-pagination">
|
||
<span class="android-page-btn">«</span>
|
||
<span class="android-page-btn">‹</span>
|
||
<span class="android-page-btn active">1</span>
|
||
<span class="android-page-btn">2</span>
|
||
<span class="android-page-btn">›</span>
|
||
<span class="android-page-btn">»</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 • 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);">›</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 • 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);">›</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 • 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);">›</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 • 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);">›</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);">›</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 • 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);">›</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">«</span>
|
||
<span class="android-page-btn">‹</span>
|
||
<span class="android-page-btn active">1</span>
|
||
<span class="android-page-btn">2</span>
|
||
<span class="android-page-btn">›</span>
|
||
<span class="android-page-btn">»</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;">›</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 & 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;">›</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 & 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')">×</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 & 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')">×</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;">
|
||
⇩
|
||
</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>
|