177 lines
9.7 KiB
HTML
177 lines
9.7 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-RMS | Interactive App Screens 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 Control Bar ──────────────────────────────── -->
|
|
<header class="top-control-bar">
|
|
<div class="brand-badge">
|
|
<img src="assets/logo.png" alt="TIS Logo">
|
|
<span>TIS-RMS Showcase</span>
|
|
</div>
|
|
|
|
<!-- Device Switcher -->
|
|
<div class="device-switcher" role="tablist">
|
|
<button id="btn-view-windows" class="device-btn active" title="Switch to Windows Desktop app 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 app 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>
|
|
|
|
<!-- ── Screen Selector Pill Bar ───────────────────────────────── -->
|
|
<nav id="screen-selector-bar" class="screen-selector-bar">
|
|
<!-- Injected via app.js -->
|
|
</nav>
|
|
|
|
<!-- ── Viewport Area ─────────────────────────────────────────── -->
|
|
<main class="viewport-container">
|
|
|
|
<!-- 1. WINDOWS DESKTOP WINDOW FRAME -->
|
|
<div id="desktop-window" class="desktop-window">
|
|
<!-- Titlebar -->
|
|
<div class="win-titlebar">
|
|
<div class="win-titlebar-left">
|
|
<img src="assets/logo.png" alt="Logo">
|
|
<span>TIS Record Management System</span>
|
|
</div>
|
|
<div class="win-window-controls">
|
|
<span>—</span>
|
|
<span>▢</span>
|
|
<span style="cursor: pointer;">✕</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Stage with actual screenshot and clickable interactive hotspots -->
|
|
<div class="win-stage">
|
|
<img id="win-screen-img" class="win-screen-img" src="screenshots/windows/dashboard.webp" alt="Windows Screen">
|
|
|
|
<!-- Interactive Sidebar Hotspots (Clicking sidebar directly on screenshot navigates!) -->
|
|
<div class="win-sidebar-hotspots">
|
|
<div class="hotspot-sidebar-item hotspot-item-dashboard" title="Go to Dashboard" onclick="setScreen('dashboard')"></div>
|
|
<div class="hotspot-sidebar-item hotspot-item-students" title="Go to Students Directory" onclick="setScreen('students')"></div>
|
|
<div class="hotspot-sidebar-item hotspot-item-documents" title="Go to Documents" onclick="setScreen('documents')"></div>
|
|
<div class="hotspot-sidebar-item hotspot-item-archives" title="Go to Archives" onclick="setScreen('archives')"></div>
|
|
<div class="hotspot-sidebar-item hotspot-item-reports" title="Go to Reports" onclick="setScreen('reports')"></div>
|
|
<div class="hotspot-sidebar-item hotspot-item-users" title="Go to Users Management" onclick="setScreen('users')"></div>
|
|
<div class="hotspot-sidebar-item hotspot-item-history" title="Go to Audit History" onclick="setScreen('history')"></div>
|
|
<div class="hotspot-sidebar-item hotspot-item-settings" title="Go to Settings" onclick="setScreen('settings')"></div>
|
|
</div>
|
|
|
|
<!-- Hotspot: Add Student on Students Screen -->
|
|
<div id="hotspot-add-student" class="hotspot-add-student" title="Click to simulate Add Student modal" onclick="openAddStudentModal()" style="display: none;"></div>
|
|
|
|
<!-- Hotspot: Check Updates on Settings Screen -->
|
|
<div id="hotspot-settings-update" class="hotspot-settings-update" title="Click to test Check for Updates" onclick="openUpdateCheckModal()" style="display: none;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. ANDROID SMARTPHONE FRAME -->
|
|
<div id="phone-mockup" class="phone-mockup" style="display: none;">
|
|
<div class="phone-screen-container">
|
|
<img id="phone-screen-img" class="phone-screen-img" src="screenshots/android/dashboard.webp" alt="Android Screen">
|
|
|
|
<!-- Hotspots for quick testing -->
|
|
<div style="position: absolute; top: 12%; right: 5%; width: 50px; height: 50px; cursor: pointer;" title="Interactive Action" onclick="openAddStudentModal()"></div>
|
|
<div style="position: absolute; bottom: 2%; left: 0; right: 0; height: 60px; display: flex;">
|
|
<div style="flex: 1; cursor: pointer;" title="Dashboard" onclick="setScreen('dashboard')"></div>
|
|
<div style="flex: 1; cursor: pointer;" title="Students" onclick="setScreen('students')"></div>
|
|
<div style="flex: 1; cursor: pointer;" title="Documents" onclick="setScreen('documents')"></div>
|
|
<div style="flex: 1; cursor: pointer;" title="Settings" onclick="setScreen('settings')"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
|
|
<!-- ── Interactive Modals ────────────────────────────────────── -->
|
|
|
|
<!-- 1. Add Student Modal -->
|
|
<div id="add-student-modal" class="modal-overlay" onclick="if(event.target===this)closeModal('add-student-modal')">
|
|
<div class="modal-dialog">
|
|
<div class="modal-header">
|
|
<h3>Add New Student Record</h3>
|
|
<button class="modal-close" onclick="closeModal('add-student-modal')">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p style="font-size: 13px; color: var(--text-muted); line-height: 1.5;">
|
|
Select student registration method:
|
|
</p>
|
|
|
|
<div style="display: flex; flex-direction: column; gap: 10px;">
|
|
<div style="background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 14px; cursor: pointer;" onclick="alert('Simulation: Launches the multi-step student enrollment form.'); closeModal('add-student-modal');">
|
|
<h4 style="font-size: 14px; font-weight: 700; color: #fff;">Standard Stepper Form</h4>
|
|
<p style="font-size: 12px; color: var(--text-muted); margin-top: 3px;">Full student biographical details, parent info, and LRN verification.</p>
|
|
</div>
|
|
|
|
<div style="background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 14px; cursor: pointer;" onclick="alert('Simulation: Launches OCR document scanning for automatic field extraction.'); closeModal('add-student-modal');">
|
|
<h4 style="font-size: 14px; font-weight: 700; color: #fff;">Scan Document OCR</h4>
|
|
<p style="font-size: 12px; color: var(--text-muted); margin-top: 3px;">Auto-extract student information directly from Birth Certificate or Form 137.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div style="padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: flex-end;">
|
|
<button class="btn-secondary" onclick="closeModal('add-student-modal')">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 2. Software Update Check Modal -->
|
|
<div id="update-modal" class="modal-overlay" onclick="if(event.target===this)closeModal('update-modal')">
|
|
<div class="modal-dialog">
|
|
<div class="modal-header">
|
|
<h3>About & App Updates</h3>
|
|
<button class="modal-close" onclick="closeModal('update-modal')">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="update-modal-status">
|
|
<!-- Dynamically filled via app.js -->
|
|
</div>
|
|
</div>
|
|
<div style="padding: 14px 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); display: flex; justify-content: flex-end; gap: 10px;">
|
|
<button class="btn-secondary" onclick="closeModal('update-modal')">Close</button>
|
|
<button id="btn-download-action" class="btn-primary" style="display: none;">
|
|
<span>Download in Browser</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 3. Simulated Browser Download Toast -->
|
|
<div id="browser-download-toast" class="browser-download-toast">
|
|
<div class="toast-icon">
|
|
<svg width="20" height="20" fill="none" stroke="#fff" stroke-width="2.5" viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>
|
|
</div>
|
|
<div>
|
|
<div style="font-size: 13px; font-weight: 700;">Opening in Default Browser</div>
|
|
<div id="toast-filename" style="font-size: 11px; opacity: 0.85; font-family: monospace;">TIS_RMS_Setup_v1.0.24.exe</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
</style>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html>
|