Setup

Getting Started

CodideX Mobile runs as static HTML, CSS, and JavaScript. You can open files directly in a browser, but a small local server is recommended for realistic browser testing.

Open the Template

Open the project root folder.
Open /index.html to view the app selector.
Open each app dashboard directly when needed.

/index.html
/auth/splash.html
/auth/signup.html
/auth/otp-verification.html
/auth/forgot-password.html
/auth/reset-password.html
/preview/index.html
/student-ui/dashboard.html
/student-ui/fee-payment.html
/student-ui/dummy-payment-gateway.html
/teacher-ui/dashboard.html
/employee-ui/dashboard.html
/parent-ui/dashboard.html
/parent-ui/fee-payment.html
/parent-ui/dummy-payment-gateway.html

Professional mobile phone-frame preview is available at /preview/index.html. Recommended local server: use any static server such as VS Code Live Server, Python http.server, or a Node static server from the project root.

Authentication UI Flow

Open /auth/splash.html to preview the frontend authentication flow. It includes a splash screen, role selector, login, signup, OTP verification, forgot password, reset password, and password show/hide controls.

Authentication screens are frontend UI only. They do not verify real passwords, call APIs, connect to a database, send OTP, or deliver email/SMS.

Account Settings UI

Each role includes an account settings page with notification, profile, and security groups.

/student-ui/account-settings.html
/teacher-ui/account-settings.html
/employee-ui/account-settings.html
/parent-ui/account-settings.html

Settings switches, password update links, two-step verification, logout, and log out all devices are frontend preview interactions only.

Fee Payment UI & Dummy Gateway

Open /student-ui/fee-payment.html or /parent-ui/fee-payment.html to preview the fee checkout flow. The dummy gateway includes Cash, Card, UPI, and Net Banking UI tabs, then redirects to a static success screen.

/student-ui/fee-payment.html
/student-ui/dummy-payment-gateway.html
/student-ui/payment-success.html
/student-ui/payment-history.html
/student-ui/payment-receipt.html
/parent-ui/fee-payment.html
/parent-ui/dummy-payment-gateway.html
/parent-ui/payment-success.html
/parent-ui/payment-history.html
/parent-ui/payment-receipt.html
/teacher-ui/leave-request.html
/teacher-ui/leave-history.html
/teacher-ui/leave-approval.html
/teacher-ui/hr-complaint.html
/teacher-ui/hr-announcements.html
/teacher-ui/salary-slip.html
/employee-ui/salary-slip.html

Payment UI is frontend-only dummy UI. It does not include a real payment gateway, SDK, backend, API, database, card processing, UPI processing, bank integration, real receipt generation, or PDF generation.

Teacher HR Self-Service UI

Teacher staff self-service pages are available for leave request, leave history, leave approval preview, HR complaint, HR announcements, and salary slip access.

/teacher-ui/leave-request.html
/teacher-ui/leave-history.html
/teacher-ui/leave-approval.html
/teacher-ui/hr-complaint.html
/teacher-ui/hr-announcements.html
/teacher-ui/salary-slip.html

Teacher HR pages are frontend UI only. No real leave backend, HR workflow backend, payroll backend, database, or API is included.

Receipt & Salary Slip Preview UI

Open /student-ui/payment-receipt.html, /parent-ui/payment-receipt.html, /teacher-ui/salary-slip.html, or /employee-ui/salary-slip.html to preview printable document screens.

Print buttons call window.print(). Download PDF buttons show a frontend-only toast message.

Receipt and salary slip previews do not create real PDF files, connect to payroll, calculate salary, verify payments, use a backend, call APIs, or store data in a database.

Screenshots and Marketplace Preview Assets

Screenshot assets are stored in /marketplace/screenshots/. The organized screenshot gallery is available at /marketplace/screenshots/index.html, and marketplace preview images are stored in /marketplace/preview-images/.

The screenshot gallery supports mixed image dimensions. Portrait mobile screens and landscape preview images are displayed with separate responsive treatments.

Edit Files

Task	Where to edit
Edit page content	Open the required HTML file inside `/student-ui/`, `/teacher-ui/`, `/employee-ui/`, or `/parent-ui/`.
Edit shared CSS	Use `/assets/css/mobile-variables.css`, `/assets/css/mobile-global.css`, `/assets/css/mobile-layout.css`, and `/assets/css/mobile-components.css`.
Edit role CSS	Use `student-mobile.css`, `teacher-mobile.css`, `employee-mobile.css`, or `parent-mobile.css`.
Edit demo interactions	Use JavaScript files in `/assets/js/`. These are frontend demo behaviors only.
Edit auth UI	Use `/auth/splash.html`, `/auth/welcome.html`, `/auth/login.html`, `/auth/signup.html`, `/auth/otp-verification.html`, `/auth/forgot-password.html`, `/auth/reset-password.html`, `/auth/auth.css`, and `/auth/auth.js`.
Edit account settings UI	Use each role's `account-settings.html`, plus `/assets/css/account-settings.css` and `/assets/js/account-settings.js`.
Edit payment UI	Use Student and Parent payment pages, plus `/assets/css/mobile-payment.css` and `/assets/js/mobile-payment.js`.
Edit receipt and salary slip UI	Use `/assets/css/mobile-print.css`, `/assets/js/mobile-print-demo.js`, and the role-specific receipt or salary slip pages.
Replace branding	Update logo assets in `/assets/images/branding/` and text labels in HTML pages.

Branding and Avatars

Replace logo marks and app icons in /assets/images/branding/. Update visible brand text in root and app HTML files.

Symbolic avatars live in /assets/images/avatars/. Replace the grey silhouette asset globally only if the buyer wants a different placeholder style.

Do not add profile photo upload, change, camera, or crop controls in mobile profile screens if CodideX Core desktop ERP handles profile image management.

Testing

Test at mobile widths such as 390px and 414px.
Check light and dark mode.
Open Student, Teacher, Employee, and Parent dashboards.
Open auth signup, OTP, forgot password, and reset password pages.
Open role-wise account settings pages and verify toggles remain frontend-only.
Open Student and Parent fee payment, dummy gateway, payment success, payment history, and receipt placeholder pages.
Open Student and Parent receipt preview pages and Teacher and Employee salary slip preview pages.
Confirm toast, confirmation modal, and preloader demo behavior.
Verify that pages remain frontend-only and static.

No backend, API, database, PHP, MySQL, Firebase, real push notification, real payment gateway, or real messaging system is included.