0% found this document useful (0 votes)

9 views556 pages

Final Manu

The document presents a capstone project titled 'EMIS: A Web-based Application with QR Attendance Integration for San Agustin Elementary School,' aimed at improving school management through a web-based system that integrates QR code attendance tracking and enhances communication between parents and teachers. The project addresses challenges in managing student data, attendance, and communication, ultimately reducing administrative burdens and fostering a stronger school-home connection. The researchers, Lalaine A. De Leon, Karla Liezel L. Lotivio, Angela M. Nieva, and Jay Anthony M. Saberola, are fulfilling their Bachelor of Science in Information Technology requirements with this project, expected to be completed by June 2025.

Uploaded by

nvvinluan

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

9 views556 pages

Final Manu

Uploaded by

nvvinluan

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 556

EMIS: A Web-based Application with QR Attendance Integration for San Agustin

Elementary School

A Capstone Project
Presented to the Faculty of the
Information and Communications Technology Program
STI College Naga

In Partial Fulfilment
of the Requirements for the Degree
Bachelor of Science in Information Technology

Lalaine A. De Leon
Karla Liezel L. Lotivio
Angela M. Nieva
Jay Anthony M. Saberola

December 2024

i
ENDORSEMENT FORM FOR ORAL DEFENSE

TITLE OF RESEARCH: EMIS: A Web-based Application with QR Attendance

Integration for San Agustin Elementary School

NAME OF PROPONENTS: Lalaine A. De Leon

Karla Liezel L. Lotivio
Angela M. Nieva
Jay Anthony M. Saberola

In Partial Fulfilment of the Requirements

for the degree Bachelor of Science in Information Technology
has been examined and is recommended for Oral Defense.

ENDORSED BY:

Capstone Project Adviser

APPROVED FOR ORAL DEFENSE:

Glydel P. Peñaranda
Capstone Project Coordinator/Adviser

NOTED BY:

Marbert P. Plazo LPT

Program Head

DECEMBER 2024

STI College Naga

ii
APPROVAL SHEET

This capstone project titled EMIS: A Web-based Application with QR Attendance

Integration for San Agustin Elementary School, prepared and submitted by Lalaine A.
De Leon, Karla Liezel L. Lotivio, Angela M. Nieva, and Jay Anthony M. Saberola in
partial fulfillment of the requirements for the degree of Bachelor of Science in
Information Technology, has been examined and is recommended for acceptance and
approval.

Accepted and approved by the Capstone Project Review Panel

in partial fulfillment of the requirements for the degree of
Bachelor of Science in Information Technology

Marbert P. Plazo LPT Maria Diejhey Binuya Martinez

Panel Member Panel Member

Carlo Angelo Calleja

Lead Panelist

Noted:

Glydel P.Peñaranda Marbert P. Plazo LPT

Capstone Project Coordinator/Adviser Program Head

December 2024

STI College Naga

iii
ACKNOWLEDGEMENT

The researchers wish to express their heartfelt appreciation, profound gratitude

and sincere thanks to the persons who lend their helping hand, provided encouragement
and inspiration in the completion of this study. They would like to express their
indebtedness to the following:

Miss Glydel P. Peñaranda, Capstone Project Coordinator/Adviser, who diligently

and unselfishly provided her invaluable guidance, support, and dedication throughout the
duration of the project.The team is truly grateful for the time and energy she invested in
mentoring them during this challenging yet rewarding journey.

To the Capstone Project Review Panel, the researchers would like to extend their
heartfelt appreciation to each member for taking the time to review and evaluate this
Capstone Project. Their thorough assessment, constructive feedback, and insightful
suggestions were invaluable to the development and refinement of this research.

Mrs. Cecilia SJ. Begata, San Agustin Elementary School Teacher-In-Charge, for
her kindness and open mindedness for allowing the study to be crafted and conducted in
their humble school. Also, to all SAES Faculty Members for their hospitality and sharing
their knowledge, experience, insights and suggestions for the functionality and
effectiveness of this Web – Based Application.

To dear parents and guardians, for unwavering support and encouragement

throughout the entire process of this capstone project journey. Words cannot fully express
how thankful the team for their constant love and sacrifices. To parents/guardians who
are always there to lift the spirits and morale of the team during the challenging times,
providing the strength and motivation to keep going.

Friends and inspirations, for endless support in accomplishing this capstone

project. The companionship during the most challenging and rewarding parts of this
project is highly appreciated, whether through late-night brainstorming sessions,
motivational words, or simply being there.

Mr. Marbert P. Plazo LPT, IT Program Head, who devotedly gave his effort in
creating an environment where the researchers were able to grow, learn, and develop both
professionally and personally.

And above all to the Almighty God, for the guidance, strengths, blessings,
courage, and protection at all times for making this academic endeavor possible.

STI College Naga

iv
ABSTRACT

Title of research: EMIS: A Web-based Application with QR Attendance

Integration for San Agustin Elementary School

Researchers: Lalaine A. De Leon

Karla Liezel L. Lotivio
Angela M. Nieva
Jay Anthony M. Saberola

Degree: Bachelor of Science in Information Technology

Date of Completion: June 2025

Keywords: QR Attendance, EMIS, Document Sharing, Web-based

Application

EMIS: A Web-based Application with QR Attendance

Integration for San Agustin Elementary School

Managing school tasks such as attendance tracking, student data management, and
communication between parents and teachers can be challenging, especially in schools
with large student populations. Traditional methods often lead to errors, delays, and a
lack of updates, making it difficult for parents to stay informed and for teachers to
manage their workload efficiently.

This capstone project introduced EMIS, a web-based system designed to

streamline these processes for San Agustin Elementary School. The web-based system
integrates QR code-based attendance tracking, allowing teachers to quickly and
accurately record student attendance. Additionally, the system provides real-time updates
for parents, improving communication between parents and teachers and allowing them
to stay informed on their learner’s progress.

After initial development and testing, the app was expected to improve
administrative efficiency, save time, and enhanced communication between parents and
teachers. It will ensure a smoother flow of information and better management of student
data, ultimately reducing administrative burdens and fostering a stronger school-home
connection.

STI College Naga

v
Table of Contents
Page
Title Page ---------------------------------------------------------------------------------- i
Endorsement form for Oral Defense --------------------------------------------------- ii
Approval Sheet ---------------------------------------------------------------------------- iii
Acknowledgments ------------------------------------------------------------------------ iv
Abstract ------------------------------------------------------------------------------------ v
Table of Contents ------------------------------------------------------------------------- vi
------------------------------------------------------------------------- vii

Introduction
Project Context 1
---------------------------------------------------------------------- 2
--------------------------------------------------------------------- 3
-
---------------------------------------------------------------------
-
Purpose and Description 3
-----------------------------------------------------------
4
----------------------------------------------------------- 5
Objectives
----------------------------------------------------------------------------
Scope and Limitations 5
-------------------------------------------------------------- 6
-------------------------------------------------------------
-
7
Review of Related Literature/Studies/Systems
8
Review of Related Literature
--------------------------------------------- 9

------------------------------------------- 9
-- 10
------------------------------------------- 11
--
Related Studies/Systems

STI College Naga

vi
---------------------------------------------------

---------------------------------------------------

---------------------------------------------------
Methodology
Technical Background ------------------------------------------------------------- 12
------------------------------------------------------------- 13
Calendar of Activities ---------------------------------------------------- 14
Resources ----------------------------------------------------------------- 15
----------------------------------------------------------------- 16
Requirements Analysis ------------------------------------------------------------ 16
Requirements Documentation ---------------------------------------------------- 17
User Testing Letter 18
----------------------------------------------------------------- 19 - 24
Data Flow Diagram ----------------------------------------------------------------
Design of Software, System, Product, and/or Processes ---------------------- 25
---------------------- 26
Development 26
------------------------------------------------------------------------ 27
----------------------------------------------------------------------- 28
-----------------------------------------------------------------------

Results and Discussion

Testing ------------------------------------------------------------------------------- 29
Description of Prototype ---------------------------------------------------------- 29
System Requirements ---------------------------------------------------------- 30
Implementation Plan --------------------------------------------------------------- 30

Conclusion -------------------------------------------------------------------------------- 30
-------------------------------------------------------------------------------- 31
-------------------------------------------------------------------------------- 32
-------------------------------------------------------------------------------- 33

STI College Naga

vii
Recommendations ----------------------------------------------------------------- 33

Appendices
Resources Persom ------------------------------------------------------------------ 34
Relevant Source Code ------------------------------------------------------------- 35 –
514
Evaluation Tool/Test Documents ------------------------------------------------ 515 -
516
Sample Input/Output/Reports ---------------------------------------------------- 517 –
521
User Interface Design -------------------------------------------------------------
522 -
539
User’s Guide ----------------------------------------------------------------------- 540
Certificate of Proofreading ------------------------------------------------------- 541
Personal Technical Vitae --------------------------------------------------------- 542 -
545
References --------------------------------------------------------------------------------- 546 -
547

STI College Naga

viii
INTRODUCTION

Project Context

In today’s rapidly changing education world, managing information effectively is

crucial for schools to succeed. Schools face many challenges and need efficient tools to
handle student data, improve communication with parents, and support teachers. An
Education Management Information System (EMIS) helps by bringing together various
tasks into one easy-to-use platform. This system makes it simpler for school staff to
manage the work, allowing to focus more on teaching and helping students, while also
keeping parents updated on their children's school activities (Henderson & Mapp, 2002).

As schools expand and educational needs become more complex, having good
management tools becomes even more important. Traditional methods for handling tasks
like attendance, grading, and student records can be slow and prone to mistakes. This
means that parents often struggle to stay updated on their child’s school activities, and
teachers face challenges in managing their workload effectively (Epstein, 2010).

San Agustin Elementary School currently uses a Learning Information System

(LIS) from the Department of Education (DepEd) for tracking student performance,
managing curriculum, and handling enrollment. However, teachers still face issues with
taking attendance and managing student information. These traditional methods can be
slow and error-prone, adding to teachers' workloads and taking time away from teaching.
Parents also struggle with staying active and updated about their child’s school activities
due to a lack of effective communication with teachers (Henderson & Mapp, 2002).

The project “EMIS: A Web-based Application with QR Attendance Integration

for San Agustin Elementary School” aims to address these challenges. The web-based
system simplifies attendance tracking with QR codes, which teachers scan to
automatically record student presence. This reduces manual errors and saves time,
making it easier for teachers to manage student performance (Epstein, 2010).

1
STI College Naga
Additionally, the EMIS web-based system allows teachers to upload digital report
cards, share learning progress of learners like evaluation and assessment results, and
distribute homework and e-learning materials. The system also provides a secure
platform for parents to access important school events, send messages to teachers, and
schedule appointments to discuss their child’s progress. By integrating all these features
into one user-friendly platform, EMIS helps streamline school management, reduce
teachers' administrative burdens, and keep parents more involved in their child's
education (Henderson & Mapp, 2002).

The system also focuses on real-time updates for attendance data, ensuring that
parents are immediately informed about any irregularities. It addresses limitations by
integrating seamlessly with existing school systems while offering a user-friendly
interface accessible on web-based platforms. However, it requires internet connectivity
and modern devices for optimal performance.

The researchers conducted a survey using Google Forms to gather insights from
parents. The survey conveyed the following results, out of 100 parents, 49 respondents
rarely communicate with their child's teacher. twenty-two (22) communicated daily,
seventeen (17) weekly, and twelve (12) monthly. When asked if they received updates
on their child's school matters, the majority of parents do not receive updates forty-one
(41) answered no. Twenty-eight (28) always received updates of their child’s school
activities, twenty-seven (27) occasionally receive updates, and the remaining four (4)
answered maybe. The methods of communication utilized were in-person meetings,
seventy (70) parents selected this as their primary method, twelve (12) via phone calls,
nine (9) through emails, five (5) through printed reports, and two (2) by Messenger.

Regarding satisfaction with current communication methods, twenty-two (22)

parents were satisfied, twenty-seven (27) were very satisfied, twenty (20) were neutral,
and 31 were dissatisfied. Parents expressed a desire for more information on academic
reports sixty-eight (68), behavior ten (10), school events and notes from the teacher
seventeen (17), and attendance records five (5). Moreover, sixty-eight 68 parents found it
difficult to schedule meetings with teachers due to work or other duties, while thirty-two

2
STI College Naga
(32) did not have this issue. Ninety-five (95) out of 100 respondents believed that an
integrated web-based app for communication and information sharing would enhance
their involvement in their child's education, while 5 out of 100 were unsure about it.

A teacher’s survey about how manageable their overall workload is. four (4) out
of ten respondents answered neutral, two (2) answered manageable, two (2)
unmanageable, and two (2) very unmanageable. In terms of workloads, the researchers let
them select all that they find the most challenging tasks, and computing grades received
the highest response. Nine out of ten selected spreadsheets to compute and record grades,
and 1 chosed school software. Half of the number teachers always encountered
challenges, while the other half encountered them sometimes.

In inputting and managing student data, 6 out of 10 still do it manually, 3 used

spreadsheets, and 1 used school software. Seven out of 10 sometimes experience errors
when calculating grades, 2 always, and 1 never. Five teachers spend 1–3 hours on
grading and assessment each week, 3 teachers spend 3–5 hours, 1 spends less than 1 hour,
and 1 spends more than 5 hours. In consolidating and managing data for reports, manual
methods received the highest votes among teachers. Six out of 10 encountered challenges
in data management and reporting, while the remaining 4 face challenges sometimes.
Most of the teachers find grading assignments and tests to be the biggest challenge
because it is time-consuming.

The researchers then asked the teachers if an application that automates data
consolidation would be beneficial, and 9 out of 10 answered yes, while 1 said no. Six out
of 10 ensurde the accuracy of recording attendance by regular cross-checking, 3 manually
(writing names on paper), and 1 with an automated system. In recording incorrect
attendance, 5 out of 10 answered sometimes, 4 answered always, and 1 answered never.

The results of the survey show strong support for our QR attendance integration
and parent communication features in a web-based system exclusively for San Agustin
Elementary School (SAES).

3
STI College Naga
Purpose and Description

Purpose

The purpose of the project, "EMIS: A Web-based Application with QR

Attendance Integration for San Agustin Elementary School," is to enhance the efficiency
and effectiveness of school management. The system aims to streamline administrative
tasks by automating processes like attendance tracking, which reduces manual errors and
saves time for teachers. By incorporating QR codes for attendance and automated
grading, the app simplifies these routines.

Additionally, the system supports better student monitoring by tracking academic

performance and providing tools for managing and sharing student exam marks,
homework, and e-learning materials. Teachers can also easily update and maintain
accurate records of student data, while parents gain real-time access to their child’s
progress, attendance, and school events.

By centralizing these functions into one user-friendly platform, the EMIS project
reduces the administrative burden on school staff, simplifies the workflow, and fosters
better collaboration between teachers and parents. This ultimately improves the overall
educational experience for both teachers and parents by addressing common challenges
and providing practical solutions.

Description

The "EMIS: A Web-based Application with QR Attendance Integration for San

Agustin Elementary School" is designed to address various challenges in school
management by integrating multiple functionalities into a single platform. This system
streamlines attendance tracking through QR code integration, allowing teachers to
quickly and accurately record student presence, reducing errors and saving time.

4
STI College Naga
In addition, EMIS provides a secure platform for parents to access important
school records and updates. It includes messaging between parents and teachers,
scheduling meetings, and notifying parents about school events. The app also allows
teachers to upload and share student exam marks, homework, and e-learning materials,
while parents can upload or share essential documents like medical certificates and
absence notes directly to the system.

By combining these capabilities, EMIS enhances communication, data

management, and administrative workflows. The system reduces the workload for
teachers, enabling them to focus more on teaching and student support, while also
fostering active parent engagement in their child’s education.

Objectives
The objectives of “EMIS (Education Management Information System): A Web-
based for San Agustin Elementary School” are as follows:

● Implement QR code scanning for teachers to record student attendance easily and

accurately in real time, reducing manual effort and minimizing errors.

● Provide a secure platform for parents to communicate with teachers, send

messages, schedule meetings, and receive real-time updates on school events and
student performance.

● Enable the teachers to upload and download the student exam marks, homework,

and e-learning materials.

● Allow teachers and parents to access and update detailed student personal data

and academic history through to maintain accurate records.

● Simplify the attendance tracking process to save teachers time and reduce their

administrative workload.

5
STI College Naga
Scope and Limitations

Scope

● Attendance Management:
- QR code scanning for automatic attendance recording.
- Real-time updates of attendance data.
● Parent Communication:
- Messaging feature for parents to communicate with teachers.
- Scheduling appointments for meetings with teachers.
● Document Sharing:
- A platform for sharing important documents, such as exams, grades and
student data.
● Integration and Usability:
- Seamless integration with existing school databases and systems.
- User-friendly interface for web-based platforms.

The system has the following limitation:

● The system relies on internet access and modern devices (smartphones, tablets, or
computers). Users without reliable internet or compatible devices might face
challenges.

● QR code attendance tracking requires reliable internet access to ensure immediate

data upload and synchronization.

● The system is primarily designed for parents’ use, with limited features directly
accessible to students.

6
STI College Naga
Review of Related Literature/Studies/Systems

Review of Related Literature

In addition to engagement and social skills, teachers being proactive in their

efforts to reach out to parents and make consistent, positive connections benefit academic
success. Teachers are trained to deliver content to students with best practices in mind.
Communicating with parents consistently about what scholars are working on, classroom
culture, and new concepts coming up, shifts parental attitudes toward their children’s
education in a positive manner. When parents feel assured about their children’s school
experience, students are likely to view school in a similar light. When students can show
up with a positive attitude and in a headspace to learn, with high expectations from
parents, positive results are more likely to occur. Students are less likely to benefit from
parents helping with homework or delivering content (Kelty, N. E., & Wakabayashi, T.
2020).

Tracking attendance has been a historical challenge in education due to error-

prone nature of traditional paper-based methods. Many institutions have adopted web
technologies and automated attendance systems QR codes, barcodes, and RFID-based
technologies. The automated use of QR code scanning addresses the issue of manual
attendance making it an advancement in educational technology, providing an accurate
and efficient method for recording attendance (Emily Sing Kiang Siew, Zhi Yan Chong,
Sah Nah Sze, & Richki Hardi. 2023).

Advanced Android-based system for managing attendance and grades that

transforms educational processes by centralizing attendance and grading, offering
educators an efficient platform for managing student records. Parents gain valuable
insights into their child's academic progress, including access to attendance records and
grades, as well as the ability to connect with educators. This redefines academic
engagement by facilitating collaboration among educators, students, and parents (S.
Neeharika, S. Ravikishan and M. Ankitha. 2023).

7
STI College Naga
Advanced Android-based system for managing attendance and grades that
transforms educational processes by centralizing attendance and grading, offering
educators an efficient platform for managing student records. Parents gain valuable
insights into their child's academic progress, including access to attendance records and
grades, as well as the ability to connect with educators. This redefines academic
engagement by facilitating collaboration among educators, students, and parents (S.
Neeharika, S. Ravikishan and M. Ankitha. 2023).

Attendance of students is directly related to their academic performances and still

performed conventionally, this makes it time consuming and tiresome especially in large
classrooms. Education institutions are encouraged to explore the potential use of Quick
Response (QR) as future attendance management to track and record the student's
attendance. Students were required to scan the unique QR code assigned to them using
their smartphone during or at the beginning of each lecture in order to confirm their
attendance. This speeds up the process of taking attendance and save them for teaching
time (Siti Nazleen Abdul Rabu, 2019)

School management and teacher professionalism has an impact on teachers’

performance. The result based on the data that is collected using questionnaires,
documentation, and observation shows that school-based management significantly
improves teacher performance and teacher professionalism significantly improves teacher
performance. Both school-based management and teacher professionalism together
significantly improve teacher performance (Rohma, S., Harapan, E., & Wardiah,
D.2020).

In institutions of higher learning, the attendance of students to the class is directly

related to their academic performance. However, the record-keeping of most student
attendance is still performed conventionally, which is tedious and time consuming,
especially that involved a large classroom. Higher education institutions in Malaysia are
now encouraged to explore the potential use of Quick Response (QR) code and
smartphone as a future attendance management system to track and record the student's

8
STI College Naga
attendance to the class and tutorial. In response, this study attempts to explain the design
and implementation of a proposed system developed using Google Drive, Google Form,
Google Sheet, Notepad, and QR code generator add-ons in Google Sheet. Students were
required to scan the unique QR code assigned to them using their smartphone during or at
the beginning of each lecture in order to confirm their attendance. This affordable QR
code-based attendance system enables lecturers to speed up the process of taking
attendance, especially in a large classroom and would save them valuable teaching time.
The proposed system provides better security than the conventional methods that depend
on the sign-in sheet or roll calling student names including eliminating chances of
students signing up for others who may not be present. In addition, it also provides a
faster and simpler way to take attendance, which could be easily adopted by lecturers to
facilitate the process of taking, managing and keeping the record of students' attendance
(Siti Nazleen Abdul Rabu, 2019).

Related Studies/System

As information and communication technology develops rapidly, it is already a

trend that traditional paper communication is replaced by e-communication. Smart device
messages, such as LINE, Facebook Messenger or SKYPE, could be convenient tools to
issue notices to parents and reduce conflicts due to negligence such as missing phone
calls, forgotten alerts, etc. A barrier to student success that often presents itself in the
classroom is off-task student behavior. There are numerous causes for lack of
engagement in the classroom. Inappropriate academic expectations, a disconnect between
the teacher and the scholar, and distractions in the learning environment are all factors
that may lead to off-task behavior. One remedy for this issue is making frequent positive
connections with parents. By looking for positive student conduct that matches classroom
and school-wide expectations and relaying those instances to parents two or more times a
week, students' classroom behavior may increase (Fefer, 2020).

9
STI College Naga
The rapid advancement of science and technology has ushered in transformative
changes in education management, embracing innovative tools and methods for more
efficient and effective educational processes. The purpose of this study was to investigate
the use of EMIS in enhancing effective school management and explore the challenges
associated with it. The study shows that EMIS plays a crucial role in efficiently managing
schools. Principals rely on EMIS as a dependable repository for school data, for tracking
attendance of both teachers and students, managing student enrollments, ensuring the
efficient operation of school finances, enhancing communication, and improving the
management of academic activities. However, challenges such as a shortage of ICT
experts, inadequate internet connectivity, limited budgets, frequent electricity outages,
the absence of user-friendly software, and difficulties in system integration and
interoperability have been identified as hindrances to the effective utilization of EMIS in
school management (Mbawala, J. J., Lestari, S., & Mwakalindile, A. 2024).

Information systems enable countries to be cost‐efficient and effective in their

education planning. When institutionalized and guided by a clear vision and strategic
planning, an Education Management Information System (EMIS) helps policy makers
manage an education system to produce quality outputs [1]. Unfortunately, many
countries have invested resources in building education management information
systems, but these systems are often not institutionalized, lack a guiding vision, and are
not incorporated into strategic planning processes. The study evaluates the effectiveness
of the Education Management Information System (EMIS) across different types of
schools, including central, non-central, and multi-grade institutions. It reveals that while
most schools show high implementation of EMIS, there are variations in effectiveness
depending on the module and type of school. Among the EMIS modules, Pupil MIS was
highly implemented and prioritized because it aligns with DepEd’s learner-centered
mission, while Finance MIS was only moderately implemented. Challenges such as
geographical constraints and resource limitations impact the effectiveness of monitoring
and evaluation, particularly in areas affected by armed conflict or poor infrastructure.

10
STI College Naga
The Website-based information systems provide quick and accurate information,
as demonstrated by MIN 7 Tangerang, a madrasa that has earned numerous accolades.
Their website offers extensive information about the madrasa, necessitating the
administration to ensure data accuracy through an information system audit. The
objective of the audit is to assess the website for application refinement and evaluate the
audit's implementation for website maintenance. The findings reveal eleven audit points,
indicating deficiencies that need further audits for refinement and maintenance.

QR Attender is an app designed to simplify attendance management by using QR

codes for check-ins. It features automatic attendance recording, real-time data
synchronization, and a user-friendly interface. The app generates detailed attendance
reports, sends automated notifications, and integrates with existing systems. It ensures
data security and privacy while providing insights into attendance patterns. QR Attender
helps reduce administrative workload, minimize errors, and improve overall attendance
tracking efficiency.

11
STI College Naga
METHODOLOGY

Technical Background

The proposed system, EMIS: A Web for San Agustin Elementary School, is
designed to address the administrative and communication challenges faced by the
school. It integrates modern web technologies to streamline tasks such as attendance
management, grading, student information management, and communication between
parents and teachers.

● Web Platform Integration: The system utilizes a web-based platform to ensure

accessibility and ease of use. The web platform is primarily for teachers and school
administrators, enabling them to manage student data, generate reports, and monitor
overall system usage.
● QR Code Technology: One of the key features of the system is QR code-based
attendance management. Each student is assigned a unique QR code that is scanned
by the teacher to automatically record attendance. This technology minimizes
manual errors and streamlines the process of tracking student attendance. The data is
instantly updated on the web-based platform, allowing parents to view their child’s
attendance status in real-time.
● Database Management System: The system relies on a robust relational database
management system (RDBMS) to store and manage student data, attendance records,
grades, and communication logs. The database ensures that all information is
securely stored, easily retrievable, and efficiently managed. The use of SQL
(Structured Query Language) allows for efficient querying and data manipulation.
● Data Security and Privacy: Given the sensitivity of student data, the system
incorporates multiple layers of security, including user authentication, role-based
access control, and data encryption. The system is designed to comply with relevant
data protection regulations, ensuring that student information is kept confidential and
secure from unauthorized access.

12
STI College Naga
● Cloud Computing: The system is hosted on a cloud-based server to ensure
scalability, reliability, and accessibility. Cloud computing allows the system to
handle many users and data without significant performance degradation. It also
facilitates real-time data synchronization with the web platform, ensuring that all
users have access to the most current information.
● Communication Features: The system includes a communication module that
allows parents and teachers to exchange messages, schedule meetings, and share
important documents securely. This module is designed to improve parent-teacher
engagement and ensure that parents are kept informed about their child’s academic
progress and any school events or updates.
● Automated Reporting and Analytics: The system generates automated reports on
various aspects such as student performance and attendance. These reports are easily
accessible to teachers and school administrators and can be used for data-driven
decision-making. The analytics tools provide insights into student performance
trends and help in identifying areas that need attention.
● Technology Stack: The system is built using a combination of programming
languages and frameworks suited for web development. Common technologies
might include HTML, CSS, JavaScript for the front end, and a back end built using
frameworks like Django (Python), Laravel (PHP), or Node.js.
● Scalability and Maintenance: The system is designed to be scalable, allowing for
easy addition of new features or expansion to accommodate more users. Regular
updates and maintenance are planned to ensure the system remains functional,
secure, and up-to-date with the latest technological advancements.

13
STI College Naga
14
STI College Naga
Resources
Hardware:

• Development Computers: High-performance computers for app development, testing,

and deployment. Specifications should include a minimum of 16GB RAM, i7 processors,
and SSD storage.

• Mobile Devices: A range of smartphones and tablets for Android users only for testing
the app's compatibility and performance across different devices.

• Server: A reliable server for hosting the back-end infrastructure, databases, and APIs.
Cloud services like AWS, Google Cloud, or Azure can be considered.

• Networking Equipment: Reliable internet connectivity and networking devices to

facilitate seamless communication among the development team.

Software

• Integrated Development Environment (IDE): Software like Visual Studio Code,

Android Studio, or Xcode for coding and development.

• Version Control System: GitHub or GitLab for source code management and
collaboration among developers.

• Database Management System: MySQL, PostgreSQL, or MongoDB for managing

the app’s data.

• API Development Tools: Postman for testing APIs and Swagger for API
documentation.

15
STI College Naga
• Security Tools: Tools for encryption, penetration testing, and ensuring compliance with
data protection regulations.

• Prototyping Tools: Figma or Adobe XD for designing and prototyping the app’s user
interface.

Requirement Analysis

The "EMIS: A Web-based Application with QR Attendance for San Agustin

Elementary School" involves identifying and defining the specific needs for the system to
ensure it meets project goals. The system must support QR code-based attendance
integration, allowing teachers to scan QR codes to automatically record student presence.
The platform must facilitate effective parent communication by enabling parents to view
attendance, send messages, and schedule appointments with teachers. Additionally, it
should securely manage and update student information and offer an intuitive, user-
friendly interface for web applications.

The system must ensure data security with robust authentication measures,
maintain high performance with quick response times, and be compatible across various
devices and platforms. Regular data backups and recovery options are essential to protect
against data loss.

Stakeholder requirements include providing teachers with efficient tools for managing
administrative tasks, enabling parents to stay updated on their child's progress and
communicate with teachers, and allowing school administrators to oversee and manage
the entire system effectively.

16
STI College Naga
Requirement Documentations

The "EMIS: A Web-based Application with QR Attendance Integration for San

Agustin Elementary School" outlines the key features and specifications necessary for the
project. It begins with an overview of the project’s goals, which include developing a
system to streamline attendance tracking and enhance communication between teachers
and parents. Functional requirements include QR code-based attendance recording and
facilitating parent communication through features like sending messages and scheduling
appointments.

Non-functional requirements cover usability, performance, and security, ensuring

the system is user-friendly, responsive, and secure. Technical requirements specify
compatibility with various devices and integration with existing school databases.
Constraints include the absence of personalized learning plan features. Acceptance
criteria are set to ensure the system meets all specified requirements and is deemed
effective by both teachers and parents.

This documentation provides a comprehensive guide for developing and

evaluating the system, ensuring it meets the needs of San Agustin Elementary School
effectively.

17
STI College Naga
Figure 1: Request Letter for User- Testing

18
STI College Naga
19
STI College Naga
20
STI College Naga
21
STI College Naga
22
STI College Naga
23
STI College Naga
24
STI College Naga
Design of Software, System, Product, and/or Processes

Figure 1.0: Scrum development Methodology

The figure above represents the use of Scrum, an Agile development methodology, for
the "EMIS: A Web-based Application with QR Attendance Integration for San Agustin
Elementary School." The sprint cycle is depicted as a circle with segments for Daily
Stand-ups, Development & Testing, and Review & Adjust. It begins with Sprint Planning
and transitions to the next cycle with Sprint Review and Retrospective. Agile is a
flexible, iterative approach that breaks the project into manageable increments called
sprints. Each sprint delivers specific features or improvements.

25
STI College Naga
This method enables continuous feedback and iterative progress, ensuring alignment with
stakeholder needs, such as those of teachers and parents. By working in short cycles, the
team can quickly adapt to changes, address issues, and develop features like QR
attendance and parent communication effectively. Scrum enhances Agile by structuring
the development process. It includes creating a product backlog to list and prioritize
tasks. Each sprint starts with a Sprint Planning session, where tasks are selected. Daily
Stand-up meetings track progress and address challenges. At the end of each sprint, a
Sprint Review gathers stakeholder feedback, followed by a Retrospective to identify
areas for improvement. Through Agile and Scrum, the project benefits from a structured
yet flexible process. The cycles of planning, execution, and review ensure that the system
is functional, user-friendly, and aligned with the needs of San Agustin Elementary
School. This methodology’s emphasis on collaboration and adaptability allows the
project to evolve continuously, resulting in a final product that effectively addresses the
school’s challenges.

Development

Sprint 1: Project Setup and Core Functionality

Goal: Set up the development environment and establish the core functionalities for the
EMIS system.
Tasks:

● Configure the development environment (PHP, SQL, Bootstrap).

● Implement user registration and login systems for teachers, parents, and
administrators.
● Design and develop the school dashboard interface.
● Create the QR-based attendance tracking feature for students.

Deliverables:

● Functional registration and login system.

● QR-based attendance tracking for streamlined school operations.

26
STI College Naga
Sprint 2: Parent Communication and Information Management
Goal: Enhance communication between parents and teachers and enable effective
information management.
Tasks:

● Develop messaging and notification features for teacher-parent communication.

● Allow parents to schedule meetings with teachers via the system.
● Implement features to upload, store, and manage student performance data.
● Create interfaces for sharing student performance reports.

Deliverables:

● Communication and messaging module.

● Secure storage and sharing system for student data.

Sprint 3: System Analytics and Reporting

Goal: Provide analytics and reports to improve decision-making processes.
Tasks:

● Design an analytics dashboard for school administrators.

● Implement attendance reports.
● Integrate visualizations like graphs for attendance.

Deliverables:

● Comprehensive analytics dashboard.

● Exportable reports for school management.

Sprint 4: Final Testing and Deployment

Goal: Test the system for reliability and deploy it to production.
Tasks:

● Conduct end-to-end testing for user acceptance.

● Optimize system performance and ensure security compliance.

27
STI College Naga
Deliverables:

● Fully functional and tested EMIS system.

● Production-ready deployment.

Sprint 5: User Training and Feedback Collection

Goal: Prepare users for the system and gather insights for future improvements.
Tasks:

● Conduct one-time demonstration sessions for teachers, administrators, and

parents.
● Develop user guides and manuals.
● Collect and analyze feedback from users for system enhancements.

Deliverables:

● Trained users across all roles.

28
STI College Naga
RESULT AND DISCUSSION

Testing

During the testing phase, feedback from administrators, teachers, and parents was
gathered to enhance the functionality and usability of the EMIS system. Teachers
acknowledged the system's value in monitoring student progress and simplifying
administrative tasks, though some noted that users with limited technological experience
might face challenges navigating it. In response to suggestions, such as the removal of the
"Leave" button from the teacher interface, modifications were made to simplify the
system and reduce potential confusion. These refinements improved the user experience
by focusing on essential features. Testing also confirmed the system’s ability to operate
smoothly on a web-based platform, with successful QR code integration for attendance
tracking and seamless real-time data synchronization. While the system met almost all
functional requirements, it highlighted the need for additional training and support for
users unfamiliar with technology to maximize its impact. Overall, the testing phase
demonstrated the effectiveness of the EMIS system in addressing key challenges while
identifying areas for further improvement.

Description of Prototype

The EMIS system prototype was created to meet the needs of San Agustin
Elementary School by making administrative tasks like attendance tracking and student
performance management easier. It is a web-based platform that works on computers and
mobile phones, allowing teachers, administrators, and parents to use it conveniently. The
system needs hardware like computers and mobile devices, an internet connection for
real-time updates, and software made with PHP and SQL to manage attendance, records,
and communication. The design includes features like QR code attendance tracking,
secure data storage, and easy-to-use tools for parent-teacher communication. The system
was tested to make sure it works well, is reliable, and easy to use. Feedback from users
helped improve the prototype and ensure it met the school’s needs.

29
STI College Naga
System Requirements

The prototype was developed to run on a web-based platform, ensuring accessibility

across various devices, including computers and mobile phones. The system requires the
following:

● Hardware: Computers/laptops for school staff (teachers, administrators) and

mobile devices for access.
● Software: A web-based system built using PHP and SQL to manage attendance,
student records, and communication features.
● Network: A stable internet connection is necessary for real-time data
synchronization and communication.

Implementation Plan

The Implementation Plan outlines the steps for deploying, installing, and
transitioning the EMIS system into an operational state. It provides an overview of the
system and describes the key tasks involved in the implementation process, such as
setting up the system, training users, and ensuring proper integration with existing school
systems. The plan also details the necessary resources, including hardware (computers,
mobile devices, and servers), software (web-based platform, database management), and
facilities (server hosting). Additionally, it includes any site-specific requirements, such as
network infrastructure and user access configurations, to ensure the smooth deployment
and operation of the system at San Agustin Elementary School.

Conclusion

The development and implementation of the Education Management Information

System (EMIS) at San Agustin Elementary School successfully addressed long-standing
challenges in school administration. The system simplified key tasks, such as attendance
tracking and student performance management, contributing to significant improvements
in operational efficiency and data accuracy. Features like QR code-based attendance have
proven to be particularly effective.

30
STI College Naga
The QR attendance feature significantly reduced the time and effort required for
manual tracking, while minimizing errors commonly associated with traditional methods.
Automated data consolidation and reporting further eased the workload for teachers,
allowing them to focus more on instructional tasks. Additionally, the system provided
better access to students' academic progress, promoting greater involvement and
engagement from both teachers and parents in the educational process.

Testing confirmed the system's effectiveness as a web-based platform accessible

on multiple devices. User feedback emphasized the importance of a simple and intuitive
interface, especially for users with limited technical experience. Based on this feedback,
unnecessary features were removed, and workflows were simplified to improve overall
usability. Training sessions were also introduced to ensure that all users could navigate
the platform efficiently.

The successful implementation of the system also highlighted the need for reliable
internet connectivity and modern hardware to ensure smooth and continuous operation.
Despite the system's reliance on stable internet access, the web-based nature of the
platform enabled real-time synchronization and strong data security, which safeguarded
the integrity of school records.

In conclusion, the EMIS system has achieved its goals of improving

administrative efficiency and supporting student performance management at San
Agustin Elementary School. The challenges encountered during development were
addressed through continuous testing and user feedback, resulting in a functional, user-
friendly, and reliable platform. Moving forward, future updates—such as personalized
learning plans—could further expand the system’s capabilities, offering even greater
benefits to the school community.

The result of the admins’ user-testing survey was the following. The admin
strongly agrees that the design layout is intuitive and user-friendly. The admin didn't
encounter any issues when managing the student records. The admin finds the attendance
tracking feature very effective. The admin says that the system's function for generating
reports was reliable. The admin finds the document-sharing feature useful for

31
STI College Naga
administrative purposes. The admin finds adding/editing student data simple and
straightforward. The admin describes her experience in navigating the web-based
platform smoothly. The admin didn't experience any delays or errors while using the
system. The admin says that the system integrates the existing school data very well. The
admin finds the admin panel neutral to navigate. The admin says that the loading speed of
the admin panel was not slow. The admin didn't encounter any crashes or errors. The
admin agrees that the system protects the sensitive data. Lastly, the admin was able to log
in and log out securely without any issues.

Eleven (11) teachers of San Agustin Elementary School were also surveyed about
the user testing of the web app. 10(90.0%) out of 11 teachers find scanning and recording
student attendance easy using the QR code feature, 1(9.1%) answered neutral and 0
difficult. 11(100%) find the system responsive when recording attendance in real time. In
terms of facing difficulties when accessing student information or grades, all teachers
answered no. All the teachers find the communication feature for parents reliable.
9(81.8%) of the teachers find it very easy to schedule meetings with parents through the
app, 2 answered neutral and 0 difficult. In providing the accurate and up-to-date
attendance record of the student the teacher's answer is all yes. 10(90.9%) of the teachers
answered excellent in rating their overall user experience, 1(9.1%) good, 0 neutral, and 0
poor. In encountering any technical difficulties when using the system, 10(90.9%)
answered no and 1 answered yes but did not specify. All the teachers agreed that the
system protects sensitive data. Lastly, all the teachers were able to login and log out
securely without issues.

The researchers conducted a user-testing survey for parents in San Agustin

Elementary School (SAES). They have collected a total of 24 respondents. 19(79.2%) out
of 24 answered that it is easy to navigate the web app, 5(20.8%) answered neutral, and 0
difficult. In attendance and school event notification 20(83.8%) answered that it was
clear, 4(16.7%) neutral, and 0 were unclear. 21 (87.5%) answered that the messaging
feature for communicating with teachers is useful, 3(12.5%) neutral and 0 not useful.
23(95.8%) find it easy to access their child's attendance and other updates, 1 answer
no.21(87.5%) answered that the system is reliable for receiving updates about their

32
STI College Naga
child's performance, 3(12.5%) are neutral, and 0 unreliable. In experiencing any technical
issues when using the app 24(100%) answered no while none answered yes. 23(95.8%)
were satisfied with the overall performance of the web app, 1 was neutral, and 0 was
unsatisfied. 19(79.2%) answered that the web app keeps them informed very well about
school events and important updates, 5(20.8%) answered neutral, and 0 poorly.

Recommendations

To maximize the effectiveness of the EMIS system, it is recommended that the

system be continuously updated and refined based on ongoing user feedback. Future
enhancements could include the integration of advanced features, such as personalized
learning plans or more comprehensive health-tracking tools, to further support student
development. Additionally, the system has the potential for expansion to other schools
with similar needs, which would allow more educational institutions to benefit from a
more efficient management system that improves administrative tasks and student
performance tracking.

33
STI College Naga
APPENDIX A.

Resources Person

Ms. Glydel Peñerada

IT Capstone Coordinator/Adviser

STI College Naga

Mrs. Agnes T. Saberola

Admin

San Agustin Elementary School

Mrs. Cecelia SJ Begata

MTI/Teacher in Charge

San Agustin Elementary School

34
STI College Naga
35
STI College Naga
RELEVANT SOURCE CODE

<?php
error_reporting(0);
session_start();

if (isset($_SESSION['uid'])) {
$uid = $_SESSION['uid'];
include('assets/config.php');

$query = "SELECT `role` FROM ùsers` WHERE ùsers`.ìd`=?";

$stmt = mysqli_prepare($conn, $query);

mysqli_stmt_bind_param($stmt, "s", $uid);

mysqli_stmt_execute($stmt);

$result = mysqli_stmt_get_result($stmt);
$row = mysqli_fetch_array($result);

mysqli_stmt_close($stmt);

if ($row && isset($row['role'])) {

if ($row['role'] == "admin") {
header('Location: admin_panel/dashboard.php');
exit();
} else if ($row['role'] == "teacher") {
header('Location: teacher_panel/dashboard.php');
exit();
} else if ($row['role'] == "student") {
header('Location: student_panel/index.php');
exit();
}
}
}
?>
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
<meta charset="UTF-8">
<title>EMIS: San Agustin Elementary School</title>

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

36
STI College Naga
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
<link rel="stylesheet" href="login-form-style.css">
<link rel="icon" type="image/x-icon" href="images/img.png">
</head>

<body>
<div class="container">
<input type="checkbox" id="flip">
<div class="cover">
<div class="front">
<img src="images/loginimage.jpg" alt="">
<div class="text">
<span class="text-1">San Agustin Elementary School<br></span>
</div>
</div>

</div>
<div class="forms">
<div class="form-content">
<div class="login-form">

<div class="title" id='board-title'>Login</div>

</div>
</div>

<form action="index.php" id="login-form" method="post">

37
STI College Naga
</div>
<div class="text"><a id="forgotpassword">Forgot password?</a></div>
<div class="button input-box">
<button type="submit" class="btn">
Login
</button>
</div>
</div>
</form>

<div class="text" style="margin-bottom: 20px;display:flex">

<a id="backToLogin">back to login?</a>
</div>

<div class="button input-box">

</div>
</form>

<form id="otpVarification-form" method="post" style="display:none;">

<div class="input-box">
<i class="fas fa-lock"></i>
<input type="text" name="otp" placeholder="Enter code" id="otpCode"

38
STI College Naga
required>
</div>

<div class="text" style="margin-bottom: 20px;display:flex">

<a id="backToforgotPasswordForm">back</a>
<a id="resendOTP" style='margin-left: auto;'>resend OTP?</a>
</div>

<div class="button input-box">

<button type="submit" id='verifyCodeBtn'>
Verify Code
</button>
</div>

</div>
</form>

<form id="createNewPassword-form" method="post" style="display:none;">

<div class="invalid-feedback" id='weakPasswordFeedback'></div>

<div class="invalid-feedback" id='passwordNotSame'>

New password and confirm password are not same!
</div>

<div class="form-check mt-3 ">

<input class="form-check-input" type="checkbox" value=""
id="showPasswords">
<label class="form-check-label" for="showPasswords"
id='showPasswordLabel'>
Show password
</label>
</div>

39
STI College Naga
<div class="button input-box">
<button type="submit" id='changePasswordBtn'>
Change password
</button>
</div>

</div>
</form>

</div>

</div>
</div>
</div>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></
script>
<script src="index.js"></script>

</body>

</html>

Forgot Password

<?php
error_reporting(0);
session_start();

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

include('assets/config.php');
$response = array();

$response['status'] = '';
$response['message'] = '';

if(isset($_POST['otp']) && isset($_POST['email'])){

$email = mysqli_real_escape_string($conn, $_POST['email']);

$otp = mysqli_real_escape_string($conn, $_POST['otp']) . '';

40
STI College Naga
$generatedOtp = $_SESSION['otp'];

if($otp == $generatedOtp){
$response['status'] = 'success';
$response['message'] = 'otp matched';
unset($_SESSION['otp']);
}else{
$response['status'] = 'ERROR';
$response['message'] = 'Invalid OTP! ';
}

}else if(isset($_POST['password']) && isset($_POST['email'])){

$email = mysqli_real_escape_string($conn, $_POST['email']);

$password = mysqli_real_escape_string($conn, $_POST['password']);

$passwordHash = password_hash($password, PASSWORD_DEFAULT);

$sql = "UPDATE ùsers` SET `password_hash` = ? WHERE ùsers`.èmail` = ?;";

$stmt2 = mysqli_prepare($conn, $sql);
mysqli_stmt_bind_param($stmt2, "ss",$passwordHash, $email);

$sql2 = "SELECT ìd` FROM ùsers` WHERE ùsers`.èmail`=?;";

$stmt3 = mysqli_prepare($conn, $sql2);
mysqli_stmt_bind_param($stmt3, "s", $email);
mysqli_stmt_execute($stmt3);
$result = mysqli_stmt_get_result($stmt3);

if(mysqli_stmt_execute($stmt2) && mysqli_num_rows($result) > 0){

$row = mysqli_fetch_assoc($result);
$_SESSION['uid'] = $row['id'];
$response['status'] = 'update_success';
$response['message'] = 'Password successfully updated';
}else{
$response['status'] = 'Error';
$response['message'] = 'Unable to update password...!';
}

mysqli_stmt_close($stmt2);
}
else if(isset($_POST['email'])){

$email = mysqli_real_escape_string($conn, $_POST['email']);

41
STI College Naga
function domain_exists($email, $record = 'MX'){
list($user, $domain) = explode('@', $email);
return checkdnsrr($domain, $record);
}

if (filter_var($email, FILTER_VALIDATE_EMAIL) && domain_exists($email)) {

$query = "SELECT * FROM `users` WHERE `email`=?;";

$stmt = mysqli_prepare($conn, $query);
mysqli_stmt_bind_param($stmt, "s", $email);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);

if(mysqli_num_rows($result) > 0){

$response['status'] = 'success';

$OTP = generateOTP();
$mail = getEmailObject($email, $OTP);

try {
$mail->send();
$response['status'] = 'success';
$response['email'] = $email . '';
$_SESSION['otp'] = $OTP . "";
} catch (Exception $e) {
$response['status'] = 'ERROR';
$response['message'] = 'Something went wrong!';
}

}else{
$response['status'] = 'ERROR';
$response['message'] = 'Email not found!';
}
mysqli_stmt_close($stmt);
} else {
$response['status'] = 'ERROR';
$response['message'] = 'Invalid email!';
}
}else{
$response['status'] = 'ERROR';
$response['message'] = 'Somehing went wrong!';
}

echo json_encode($response);

42
STI College Naga
function generateOTP(){
return rand(100000, 999999);
}

function getEmailObject($reciever, $otp){

require 'phpmailer/src/Exception.php';
require 'phpmailer/src/PHPMailer.php';
require 'phpmailer/src/SMTP.php';

$title = 'OTP Verification email';

$message = '<h3>OTP Verification email</h3><p>Your one time password is <b>'.
$otp.'</b>. Stay connected with Us.</p><p>This email is computer generated so please
do not reply this email.</p>';

$mail = new PHPMailer(true);

$mail->isSMTP();
$mail->Host = 'smtp.gmail.com';
$mail->SMTPAuth = true;
$mail->Username = '[email protected]';
$mail->Password = 'whqbysomdhdjthvr';
$mail->SMTPSecure = 'tls';
$mail->Port = 587;

$mail->setFrom('[email protected]');
$mail->addAddress(''.$reciever);

$mail->isHTML(true);

$mail->Subject = $title;
$mail->Body = $message;

return $mail;
}
?>

<?php
error_reporting(0);

43
STI College Naga
session_start();
$response = array();

if ($_SERVER['REQUEST_METHOD'] === 'GET') {

http_response_code(404);
die();
}else{

if (isset($_POST['email']) && isset($_POST['password'])) {

include("assets/config.php");

if ($conn) {
$email = mysqli_real_escape_string($conn, $_POST['email']);
$password = mysqli_real_escape_string($conn, $_POST['password']);

$sql = "SELECT id, role, password_hash FROM users WHERE email=?";

$stmt = mysqli_prepare($conn, $sql);

if ($stmt) {
mysqli_stmt_bind_param($stmt, "s", $email);
mysqli_stmt_execute($stmt);

$result = mysqli_stmt_get_result($stmt);

if ($result) {
$row = mysqli_fetch_assoc($result);

if ($row) {
if (password_verify($password, $row['password_hash'])) {
$_SESSION['uid'] = $row['id'];
$response['status'] = 'success';
$response['role'] = $row['role'];
} else {
$response['status'] = 'error';
$response['message'] = 'Invalid email or password!';
}
} else {
$response['status'] = 'error';
$response['message'] = 'Invalid email or password!';
}

mysqli_stmt_close($stmt);
} else {
$response['status'] = 'error';
$response['message'] = 'Error fetching result';

44
STI College Naga
}
} else {
$response['status'] = 'error';
$response['message'] = 'Error preparing statement';
}
} else {
$response['status'] = 'error';
$response['message'] = 'Database connection error';
}

} else {
$response['status'] = 'error';
$response['message'] = 'Both fields are required';
}

// Return the response

echo json_encode($response);

INDEX.PHP

/* Navigation/Header Styling */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba(22, 41, 56, 0.8);
padding: 15px 30px;
position: relative;
z-index: 2;
flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.navbar .logo {

45
STI College Naga
display: flex;
align-items: center;
margin-bottom: 10px; /* Space between logo and text when wrapped */
}

.navbar .logo img {

width: 50px;
height: auto;
margin-right: 10px;
}

.navbar .logo h1 {
color: #fff;
font-size: 1.5rem;
margin: 0;
}

.navbar .login-btn a {
background-color: #0d6efd;
color: white;
padding: 10px 20px;
font-size: 16px;
font-weight: 500;
text-decoration: none;
border-radius: 5px;
transition: background-color 0.3s ease;
}

.navbar .login-btn a:hover {

background-color: #162938;
}

.img {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

.img img {
width: 100%;
height: auto; /* Maintain aspect ratio */
}

/* Media Queries for responsiveness */

46
STI College Naga
@media screen and (max-width: 768px) {
.navbar .logo h1 {
font-size: 1.2rem; /* Reduce font size */
}

.navbar .logo img {

width: 40px; /* Smaller logo on smaller screens */
}

.navbar {
padding: 10px 20px;
}

.navbar .login-btn a {
font-size: 14px;
padding: 8px 16px;
}

.img img {
height: 60vh; /* Adjust image height for smaller screens */
}
}

@media screen and (max-width: 480px) {

.navbar .logo h1 {
font-size: 1rem; /* Further reduce font size */
}

.navbar .logo img {

width: 35px;
}

.navbar .login-btn a {
font-size: 12px;
padding: 6px 12px;
}

.img img {
height: 50vh; /* Smaller image height for very small screens */
}

</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

47
STI College Naga
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/x-icon" href="../images/img.png">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="style.css">
<title>EMIS: San Agustin Elementary School</title>

</head>
<body>
<header class="navbar">
<div class="logo">
<img src="../images/img.png" alt="School Logo">
<h1>San Agustin Elementary School</h1>

</div>
<div class="login-btn">
<a href="login.php">Login</a>
</div>
</header>

<div class="container mt-3">

<div class="container mt-3 carousel-box">

</div>
</body>
</html>

INDEX.JS

let usersEmail = '';

const togglePassword = document.querySelector("#togglePassword");

const password = document.querySelector("#password");

togglePassword.addEventListener("click", function () {
// toggle the type attribute
const type = password.getAttribute("type") === "password" ? "text" : "password";

48
STI College Naga
password.setAttribute("type", type);

// toggle the icon

this.classList.toggle("bi-eye-slash-fill");
});

document.getElementById('login-form').addEventListener('submit', submitForm);

var errorbox = document.querySelector('.alert-box');

var error_msg = document.getElementById("error-msg");
var weakPswrd = document.getElementById('weakPasswordFeedback');
var notMatch = document.getElementById('passwordNotSame');

function submitForm(event) {
event.preventDefault();

var formData = new FormData(event.target);

49
STI College Naga
fetch('login-backend.php', {
method: 'POST',
body: formData
})
.then(response =>{
if (!response.ok) {
if (response.status === 500) {
window.location.href = './errors/internal_server_error.html';
}
throw new Error('HTTP error');
}
return response.json();
})
.then(data => {
if(data.status === 'NO_CONNECTION'){
window.location.href = '../errors/error.html';
return;
}

error_msg.classList.remove('alert-danger', 'alert-success');
error_msg.classList.add(data.status === "success" ? 'alert-success' : 'alert-danger');
error_msg.innerHTML = data.status === "success" ? 'success' : '' + data.message;

errorbox.style.display = 'block';

if (data.role === "admin") {

})
.catch(error => {
console.error('Error:', error);
error_msg.classList.remove('alert-success');
error_msg.classList.add('alert-danger');
error_msg.innerHTML = '<strong>Error</strong> ' + error.message;
errorbox.style.display = 'block';
});

50
STI College Naga
document.getElementById('forgotpassword').addEventListener('click', function(){
hideLoginForm(true);
hideVerifyOtpForm(true);
hideforgotPasswordForm(false);
});

document.getElementById('backToLogin').addEventListener('click', function(){
hideforgotPasswordForm(true);
hideVerifyOtpForm(true);
hideLoginForm(false);
});

document.getElementById('backToforgotPasswordForm').addEventListener('click', ()=>{
hideLoginForm(true);
hideVerifyOtpForm(true);
hideforgotPasswordForm(false);
});

function hideLoginForm(hide){
document.querySelector('.alert-box').style.display = 'none';

document.getElementById('login-form').reset();
document.getElementById('otpVarification-form').reset();
document.getElementById('createNewPassword-form').reset();

document.querySelector('.alert-box').style.display = 'none';
if(hide){
document.getElementById('forgotPassword-form').style.display = 'none';
}else{
document.getElementById('forgotPassword-form').style.display = 'block';
document.getElementById('board-title').innerHTML = 'Forgot Password';

51
STI College Naga
}
}
function hideVerifyOtpForm(hide){

document.getElementById('login-form').reset();
document.getElementById('otpVarification-form').reset();
document.getElementById('createNewPassword-form').reset();

document.querySelector('.alert-box').style.display = 'none';
if(hide){
document.getElementById('otpVarification-form').style.display = 'none';
}else{
document.getElementById('otpVarification-form').style.display = 'block';
document.getElementById('board-title').innerHTML = 'OTP Verfication';
}
}

function hideCreateNewPasswordForm(hide){
document.getElementById('login-form').reset();
document.getElementById('otpVarification-form').reset();
document.getElementById('forgotPassword-form').reset();

document.querySelector('.alert-box').style.display = 'none';
if(hide){
document.getElementById('createNewPassword-form').style.display = 'none';
}else{
document.getElementById('createNewPassword-form').style.display = 'block';
document.getElementById('board-title').innerHTML = 'Create New Password';
}
}

document.getElementById('forgotPassword-form').addEventListener('submit',
(event)=>{
event.preventDefault();

let email = document.getElementById('forgotEmail').value;

document.querySelector('.alert-box').style.display = 'none';
document.getElementById('forgotEmail').disabled = true;
document.getElementById('backToLogin').style.display = 'none';
document.getElementById('sendCodeBtn').disabled = true;
document.getElementById('sendCodeBtn').innerHTML = '<span class="spinner-border
spinner-border-sm" aria-hidden="true"></span><span
role="status"> Processing...</span>';

let sendData = new FormData();

52
STI College Naga
sendData.append('email', email);

fetch("forgotPassword.php", {
method: 'POST',
body: sendData,
})
.then(response => response.json())
.then(data => {

document.getElementById('backToLogin').style.display = 'block';
document.getElementById('forgotEmail').disabled = false;
document.getElementById('sendCodeBtn').disabled = false;
document.getElementById('sendCodeBtn').innerHTML = 'Send Code';

if(data['status'] === 'success'){

hideLoginForm(true);
hideCreateNewPasswordForm(true);
hideforgotPasswordForm(true);

hideVerifyOtpForm(false);
document.getElementById('otpDisabledEmail').value = data['email'] + '';
document.getElementById('otpDisabledEmail').disabled = true;
usersEmail = data['email'];
}else{
document.getElementById("error-msg").innerHTML = data['message'];
document.querySelector('.alert-box').style.display = 'block';
}

})
.catch(error => {
console.error("Error:", error);
});

});

document.getElementById("otpVarification-form").addEventListener('submit',
(event)=>{
event.preventDefault();

document.querySelector('.alert-box').style.display = 'none';
document.getElementById('verifyCodeBtn').innerHTML = '<span class="spinner-
border spinner-border-sm" aria-hidden="true"></span><span
role="status"> Processing...</span>';

53
STI College Naga
document.getElementById('backToforgotPasswordForm').style.display = 'none';
document.getElementById('resendOTP').style.display = 'none';
document.getElementById('otpCode').disabled = true;
document.getElementById('verifyCodeBtn').disabled = true;

let email = document.getElementById('otpDisabledEmail').value;

let otp = document.getElementById('otpCode').value;

let sendData = new FormData();

sendData.append('email', email);
sendData.append('otp', otp);

fetch("forgotPassword.php", {
method: 'POST',
body: sendData,
})
.then(response => response.json())
.then(data => {
document.getElementById('verifyCodeBtn').innerHTML = "Verify Code";

document.getElementById('backToforgotPasswordForm').style.display = 'block';
document.getElementById('resendOTP').style.display = 'block';
document.getElementById('otpCode').disabled = false;
document.getElementById('verifyCodeBtn').disabled = false;

if(data['status'] === 'success'){

hideLoginForm(true);
hideVerifyOtpForm(true);
hideforgotPasswordForm(true);

hideCreateNewPasswordForm(false);
}else{
document.getElementById("error-msg").innerHTML = data['message'];
document.querySelector('.alert-box').style.display = 'block';
}

})
.catch(error => {
console.error("Error:", error);
});

});

document.getElementById('resendOTP').addEventListener('click', function(){

54
STI College Naga
document.querySelector('.alert-box').style.display = 'none';
document.getElementById('verifyCodeBtn').innerHTML = '<div class="spinner-border
spinner-border-sm" role="status"><span
class="visually-hidden"></span></div> Sending...';

document.getElementById('backToforgotPasswordForm').style.display = 'none';
document.getElementById('resendOTP').style.display = 'none';
document.getElementById('otpCode').disabled = true;
document.getElementById('verifyCodeBtn').disabled = true;

let email = document.getElementById('otpDisabledEmail').value;

let sendData = new FormData();

sendData.append('email', email);

fetch("forgotPassword.php", {
method: 'POST',
body: sendData,
})
.then(response => response.json())
.then(data => {
document.getElementById('verifyCodeBtn').innerHTML = 'Verify Code';

document.getElementById('resendOTP').innerHTML = 'OTP sended';

setTimeout(()=>{
document.getElementById('resendOTP').innerHTML = 'resend OTP?';
}, 2000);

if(data['status'] === 'success'){

hideLoginForm(true);
hideCreateNewPasswordForm(true);
hideforgotPasswordForm(true);

55
STI College Naga
})
.catch(error => {
console.error("Error:", error);
});
});

document.getElementById('createNewPassword-form').addEventListener('submit',
(event)=>{
event.preventDefault();

var errorBox = document.querySelector('.alert-box');

var error_message = document.getElementById("error-msg");

if(isStrongPassword()){
let newPassword = document.getElementById('newpassword').value;
let confirmPassword = document.getElementById('confirmpassword').value;

if(newPassword === confirmPassword){

document.getElementById('weakPasswordFeedback').style.display = 'none';
document.getElementById('passwordNotSame').style.display = 'none';

document.getElementById('newpassword').disabled = true;
document.getElementById('confirmpassword').disabled = true;
document.getElementById('changePasswordBtn').disabled = true;

let sendData = new FormData();

sendData.append('email', usersEmail);
sendData.append('password', newPassword);

fetch("forgotPassword.php", {
method: 'POST',
body: sendData,
})
.then(response => response.json())
.then(data => {

if(data['status'] === 'update_success'){

error_message.classList.remove('alert-danger', 'alert-success');
error_message.classList.add('alert-success');
error_message.innerHTML = data['message'];
errorBox.style.display = 'block';

56
STI College Naga
setTimeout(() => {
error_message.classList.remove('alert-danger', 'alert-success');
error_message.classList.add('alert-danger');
error_message.innerHTML = '';
errorBox.style.display = 'none';

window.location.href = './';
}, 1000);

}else{

document.getElementById('newpassword').disabled = false;
document.getElementById('confirmpassword').disabled = false;
document.getElementById('changePasswordBtn').disabled = false;

error_message.classList.remove('alert-danger', 'alert-success');
error_message.classList.add('alert-danger');
document.getElementById("error-msg").innerHTML = data['message'];
errorBox.style.display = 'block';
}

})
.catch(error => {
console.error("Error:", error);
});

}else{
document.getElementById('weakPasswordFeedback').style.display = 'none';
document.getElementById('passwordNotSame').style.display = 'block';
}
}

let newPassword = document.getElementById('newpassword').value;

let confirmPassword = document.getElementById('confirmpassword').value;

let sendData = new FormData();

sendData.append("newpassword", newPassword);
sendData.append("confirmpassword", confirmPassword);

});

function isStrongPassword() {
document.getElementById('passwordNotSame').style.display = 'none';

57
STI College Naga
var password = document.getElementById('newpassword').value;
var weakBadge = document.getElementById('weakPasswordFeedback');

var minLength = 8;

// Check password length

if (!(password.length >= minLength)) {
weakBadge.innerHTML = "Password must contain minimum 8 characters!";
weakBadge.style.display = 'block';
return false;
}
else if (!(password.match(/([A-Z])/))) {
weakBadge.innerHTML = "Password must contain atleast one uppercase letter.";
weakBadge.style.display = 'block';
return false;
}
else if (!(password.match(/([a-z])/))) {
weakBadge.innerHTML = "Password must contain atleast one lowercase letter.";
weakBadge.style.display = 'block';
return false;
}
else if (!(password.match(/([0-9])/))) {
weakBadge.innerHTML = "Password must contain atleast one number.";
weakBadge.style.display = 'block';
return false;
}
else if (!(password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))) {
weakBadge.innerHTML = "Password must contain atleast one special character.";
weakBadge.style.display = 'block';
return false;
}
else{
weakBadge.innerHTML = "";
weakBadge.style.display = 'none';
return true;
}

document.getElementById('showPasswords').addEventListener('click', function(){

let newPassword = document.getElementById('newpassword');

let confirmPassword = document.getElementById('confirmpassword');
let label = document.getElementById('showPasswordLabel');

58
STI College Naga
if(this.checked){
newPassword.setAttribute('type', 'text');
confirmPassword.setAttribute('type', 'text');
label.innerHTML = 'Hide password';
}else{
newPassword.setAttribute('type', 'password');
confirmPassword.setAttribute('type', 'password');
label.innerHTML = 'Show password';
}
});

ADMIN PANEL

DASHBOARD

<?php include('partials/_header.php') ?>

<?php include('partials/_sidebar.php') ?>
<input type="hidden" value="1" id="checkFileName">

<div class="modal fade" id="reminder-modal" tabindex="-1" aria-

<div class="container mr-3 ml-3">

<div class="alert alert-warning reminder-error" role="alert" style="min-
height: 50px;display: none;">
Message can't be empty!
</div>
<div class="mb-3">

<textarea class="form-control" id="reminder-msg" rows="3"></textarea>

59
STI College Naga
</div>
</div>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary text-center _flex-container"
onclick="addReminder()"> <i
class='bx bx-plus'></i> <strong>ADD</strong></button>
</div>
</div>
</div>
</div>

<main>
<div class="header">
<div class="left">
<h1>Dashboard</h1>
<ul class="breadcrumb">
<li><a>
Analytics
</a></li>

</ul>
</div>

</div>

<ul class="insights">
<li onclick="showTeacherList()">

<i class='bx bxs-user'></i>
<span class="info">
<h3 class="text-center" id="teacherCount">_ _ _</h3>
<p>Teachers</p>
</span>
</li>

60
STI College Naga
<li onclick="showStudentList()">
<i class='bx bxs-group'></i>
<span class="info">
<h3 class="text-center" id="studentCount">_ _ _</h3>
<p>Students</p>
</span>
</li>
<li onclick="showNotesList()">
<i class='bx bx-book'></i>
<span class="info">
<h3 class="text-center" id="classCount">_ _ _</h3>
<p>Home work and Notes</p>
</span>
</li>
<li onclick="showNoticeList()">
<i class='bx bxs-bookmark'></i>
<span class="info">
<h3 class="text-center" id="noticeCount">_ _ _</h3>
<p>Notices</p>
</span>
</li>
</ul>

<div class="bottom-data">
<div class="orders">
<div class="header">
<i class='bx bx-receipt'></i>
<h3 id="text-heading">Latest Notices</h3>
<i class='bx bx-filter'></i>
<a href="noticeboard.php" > <i class='bx bx-plus icon-hover-circle'
id="plusIconNotification" style="font-size: 30px;"></i></a>
</div>

<table>
<thead>
<tr>
<th>Title</th>
<th>Date</th>
<th>Sender</th>
</tr>
</thead>
<tbody id="noticeTableBody">

</tbody>

61
STI College Naga
</table>
</div>

<div class="reminders">
<div class="header">
<i class='bx bx-note'></i>
<h3>Remiders</h3>

<a data-bs-toggle="modal" data-bs-target="#reminder-modal"> <i
style="font-size: 30px;" class='bx bx-plus icon-hover-circle'></i></a>
</div>
<ul class="task-list" id="all-reminders">

</ul>
</div>

</div>
<br>
</main>
</div>

MARKS.PHP

<?php include('partials/_header.php') ?>

<div class="offcanvas offcanvas-end" tabindex="-1" id="markSheerOffcanvas" aria-
labelledby="offcanvasRightLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasRightLabel"> <i class='bx bx-list-ul'></i>
 Students Result List
</h5>
<button type="button" id="closeExamMarkTable" class="close mr-2"><i class='bx
bx-x'></i></button>
</div>
<div class="offcanvas-body scrollable" style="height: 100%;min-height: max-
content;overflow-y: scroll;">

62
STI College Naga
<div>
<div class="students-table">
<table class="table table-bordered table-striped border-success">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Roll No.</th>
<th scope="col">Name</th>
<th scope="col">Obtained</th>

</tr>
</thead>
<tbody id="resultTable">

</tbody>
</table>
</div>

<div class="dataNotAvailable" id="noMarksAvailable">

<div class="_flex-container box-hide">

<div class="no-data-box">
<div class="no-dataicon">
<i class='bx bx-data'></i>
</div>
<p>No Record</p>
</div>
</div>

</div>
<br><br><br>
</div>

</div>
</div>

<div class="modal" style="z-index: 2000;" id="addStudentModel" tabindex="-1" aria-

labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">

63
STI College Naga
<h1 class="modal-title fs-5" id="exampleModalLabel">Upload Result</h1>
<button type="button" class="close mr-2" data-bs-dismiss="modal" aria-
label="Close"><i class='bx bx-x'></i></button>
</div>

<form class="needs-validation" id="create-exam-form" novalidate>

<div class="mb-3">
<label for="title" class="form-label">Title</label>
<input type="text" class="form-control" id="exam-title" name="title"
aria-describedby="emailHelp" required>
<div class="invalid-feedback invalid-exam-title">
Please choose a Title.
</div>
</div>

<div class="row mb-3" style="">

<div class="col-md-6">
<label for="class" class="form-label">Class</label>
<select class="form-select" aria-label="Default select example"
id="exam-class" name="class" style="width: 100% !important" required>
<?php include('partials/select_classes.php') ?>
</select>
<div class="invalid-feedback invalid-exam-class">
Please choose a class.
</div>
</div>

<div class="col-md-6">
<label for="section" class="form-label">Section</label>
<select class="form-select" aria-label="Default select example"
id="exam-section" name="section" style="width: 100% !important" required>
<?php include('partials/selelct_section.php') ?>
</select>
<div id="validationServer04Feedback" class="invalid-feedback
invalid-exam-section">
Please select a Subject.
</div>
</div>
</div>

64
STI College Naga
<div class="row mb-3" style="">
<div class="col-md-6">
<label for="total" class="form-label">Total Marks</label>
<input type="number" class="form-control" id="total-marks"
name="total" aria-describedby="emailHelp" required>
<div class="invalid-feedback invalid-total-marks">
Invalid Total marsks!
</div>
</div>

<div class="col-md-6">
<label for="passing" class="form-label">Passing Marks</label>
<input type="number" class="form-control" id="passing-marks" aria-
describedby="emailHelp" name="passing">
<div class="invalid-feedback invalid-passing-marks">
Invalid Passing marks!
</div>
</div>

<div class="invalid-feedback passingGreaterTotalError">

passing marks must less than total marks!
</div>
</div>

<div class="mb-3">
<label for="subject" class="form-label">Subject</label>
<select class="form-select" name="subject" id="exam-subject-list" aria-
label="Default select example" required>

</select>
<div class="invalid-feedback invalid-exam-subject-list">
Please select subject.
</div>
</div>

</div>
</div>
<div class="modal-footer">

<button type="button" class="btn btn-primary" id="continue-btn">

<div><i class='bx bxs-chevrons-right'></i><span>Continue</span></div>
</button>
</div>

</form>

65
STI College Naga
</div>
</div>
</div>

<?php include('partials/_sidebar.php') ?>
<input type="hidden" value="8" id="checkFileName">

<main>
<div class="header">
<div class="left">
<h1>Marks</h1>

</div>

</div>
<div class="bottom-data">

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active " id="home-tab" data-bs-toggle="tab" data-
bs-target="#home" type="button" role="tab" aria-controls="home" aria-
selected="true">Send Marks</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link view-marks-tab" id="profile-tab" data-bs-
toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile"
aria-selected="false">View
Marks</button>
</li>

66
STI College Naga
</ul>

<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-
labelledby="home-tab" tabindex="0">
<br>

<div class="attendenceTable" style="display: block;">
<div class="header">
<i class='bx bx-receipt'></i>
<h3>Send Marks</h3>
<div class="student-btns">

<a class="add-btns"> <i class='bx bx-filter'></i></a>

</div>
</div>
<hr>

<div class="container add-remove" id="uploadMarksJumboBtn">

<br>
<ul class="insights">
<a class="addlink" data-bs-toggle="modal" data-bs-
target="#addStudentModel" id="showUploadResultDialog">
<li class="additem">

<i class='bx bx-upload'></i>
<span class="info">
<h3>
Send
</h3>
<h3>Marks</h3>
</span>
</li>
</a>

</ul>
</div>

<div class="container upload-marks-hider">

67
STI College Naga
<div class="attendenceTable" style="display: block;">
<div class="header">
<i class='bx bx-list-ul'></i>
<h3 id="class-section"></h3>

<button type="button" class="btn btn-info"

id="backToDialogBtn">Back</button>

</div>
<hr class="text-danger">

<div class="students-table">
<table class="remove-cursor-pointer remove_hover_table">
<thead id="UploadTableHead">
<tr>
<th scope="col" class="thead col-1">#</th>
<th scope="col" class="thead col-2">Roll no</th>
<th scope="col" class="thead col-4">Name</th>
<th scope="col" class="thead col-2">Total
Marks</th>
<th scope="col" class="thead col-2">Obtained
Marks</th>
</tr>
</thead>

</tbody>
</table>
</div>

</div>

<div class="_flex-container box-hide">

</div>

68
STI College Naga
<hr>

</div>
<br>
<hr>
</div>

</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-
tab" tabindex="0">
<div class="showAttendence">
<br>
<div class="header">
<i class='bx bx-receipt'></i>
<h3 id="h11">Information </h3>

</div>
<br>
<div class="container" style="display: flex;">

<div class="row g-3 align-items-center">

</div>
<br>
<div class="container" style="display: flex;">
<div class="row g-3 align-items-center">
<div class="col-auto">

69
STI College Naga
<label for="inputPassword6" class="col-form-label">Section
</label>
</div>
<div class="col-auto">
<select class="form-select" aria-label="Default select example"
name="section" id="examSection_find">
<?php include('partials/selelct_section.php') ?>
</select>
</div>
</div>
</div>
<br>

<div class="container" style="display: flex;">

<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputPassword6" class="col-form-label">Session
</label>
</div>
<div class="col-auto">
<select class="form-select" aria-label="Default select example"
name="section" id="select-session">

</select>
</div>
</div>
</div>
<br>

<div class="container">
<a class="find" id="exam_findBtn">
<i class='bx bx-search-alt'></i>
<span>Search</span>
</a>

</div>
<br>

<hr>

<br>
<div class="header">
<i class='bx bx-receipt'></i>
<h3>Activities/Exam/Assignment</h3>

</div>

70
STI College Naga
<hr>

<div class="accordion accordion-flush" id="Exam-Titles">

</div>

<div class="dataNotAvailable" id="noRecordAvailable">

<div class="_flex-container box-hide">

<div class="no-data-box">
<div class="no-dataicon">
<i class='bx bx-data'></i>
</div>
<p>No Record</p>
</div>
</div>

</div>
<hr>

</div>
</div>

</div>

</main>

</div>
<span id="hiddenBOX" style="display:none;width:0px;height:0px;"></span>

NOTES.PHP
<?php include('partials/_header.php') ?>

<div class="modal modal-md" style="z-index: 2000;" id="upload-notes" tabindex="-1"

71
STI College Naga
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Upload Notes</h1>
<button type="button" class="close mr-2" data-bs-dismiss="modal" aria-
label="Close"><i
class='bx bx-x'></i></button>
</div>
<form class="needs-validation" id="uploadNotesForm" novalidate>

<div class="row" style="">

<div class="col-md-5">
<label for="class" class="form-label">Class</label>
<select class="form-select" aria-label="Default select example"
id="classOptions"
name="class" style="width: 100% !important" required>

<?php include('partials/select_classes.php') ?>

</select>
</div>

<div class="col-md-7">
<label for="subjectList" class="form-label">Subject</label>
<select class="form-select" aria-label="Default select example"
id="subjectList"
name="subject" style="width: 100% !important" required>
</select>
<div id="validationServer04Feedback" class="invalid-feedback">
Please select a valid Subject.
</div>
</div>
</div>

<div class="mb-3 mt-3">

<label for="exampleInputEmail1" class="form-label">Title</label>
<input type="text" class="form-control" id="exampleInputEmail1"
aria-describedby="emailHelp"
name="title" required>
<div id="wrong-title" class="invalid-feedback">
Please select a valid Title.

72
STI College Naga
</div>
</div>

<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-
label">Comment</label>
<textarea class="form-control" id="Comment" rows="2"
name="comment" required></textarea>
<div id="wrong-comment" class="invalid-feedback">
This field is required.
</div>
</div>

<div class="mb-2">
<label for="formFile" class="form-label">Upload file  
<small>(max-size
200MB)</small></label>
<input class="form-control" type="file" id="formFile" name="file"
accept=".pdf, .png, .doc, .jpg, .jpeg, .zip, .tar, .gz" required>
<div id="wrong-comment" class="invalid-feedback file-size-error">
File is too large allowed limit is 200 MB!
</div>
</div>

<div class="progress-box mb-0" style="height: 15px;">

</div>
</div>
<div class="modal-footer">

<button type="button" class="btn btn-primary" id="uploadNotes">

<div><i class='bx bxs-cloud-upload'></i>  <span>
Upload</span></div>
</button>
</div>

73
STI College Naga
</form>
</div>
</div>
</div>

<div class="modal fade" id="edit-confirmation-modal" tabindex="-1" aria-

labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<strong>Do you really want to Edit this Note?</strong>

<br><br>
<div class="progress-box mb-0" style="height: 15px;">
<div class="progress-bar-hider progress-bar-hider1">
<div class="progress" role="progressbar" aria-label="Animated
striped example"
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar progress-pointer progress-bar-striped
progress-bar-animated "
id="progress-pointer">
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
<button type="button" class="btn btn-danger"
id="confirm-edit-btn">Edit</button>
</div>
</div>
</div>
</div>

74
STI College Naga
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<strong>Do you really want to delete this Notes?</strong>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
<button type="button" class="btn btn-danger"
onclick="deleteNote()">Delete</button>
</div>
</div>
</div>
</div>


<div class="modal fade" id="showNotesInformation" data-bs-backdrop="static" data-bs-
keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="showFullTitle"></h1>
<button type="button" class="close mr-2" data-bs-dismiss="modal" aria-
label="Close"><i
class='bx bx-x'></i></button>
</div>
<div class="modal-body">
<div class="container">
<p id="showFullComment"></p>
<br>

</div>
</div>
<div class="modal-footer">
<a class="btn btn-warning view-result-btn" target="_blank"
id="view_file_btn">
<i class='bx bx-show-alt'></i>   <span>View</span>
</a>
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

75
STI College Naga


<div class="modal modal-md" style="z-index: 2000;" id="edit-uploaded-notes"
tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">

<h1 class="modal-title fs-5" id="exampleModalLabel">Edit uploaded

notes</h1>
<button type="button" class="close mr-2" data-bs-dismiss="modal" aria-
label="Close"><i
class='bx bx-x'></i></button>
</div>

<form class="needs-validation" id="editNotesForm" novalidate>

<div class="modal-body pb-0">

<div class="row" style="">

<div class="col-md-5">
<label for="class" class="form-label">Class</label>
<select class="form-select" aria-label="Default select example"
id="editClassOption"
name="class" style="width: 100% !important" required>
<option value="kinder">Kinder</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>

</select>
</div>

<div class="col-md-7">
<label for="subjectList" class="form-label">Subject</label>
<select class="form-select" aria-label="Default select example"
id="editSubjectList"
name="subject" style="width: 100% !important" required>
</select>
<div id="validationServer04Feedback" class="invalid-feedback">

76
STI College Naga
Please select a valid Subject.
</div>
</div>
</div>

<div class="mb-3 mt-3">

<label for="exampleInputEmail1" class="form-label">Title</label>
<input type="text" class="form-control editTitle" id="editTitle"
aria-describedby="emailHelp" name="title" required>
<div id="wrong-title" class="invalid-feedback">
Please select a valid Title.
</div>
</div>

<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-
label">Comment</label>
<textarea class="form-control edited-comment" id="Comment"
rows="2" name="comment"
required></textarea>
<div id="wrong-comment" class="invalid-feedback">
This field is required.
</div>
</div>

<a class="mx-3" id="view-current-file" target="_blank">

<i class='mt-1 bx bx-show-alt' style="color:

black;cursor:pointer;"></i>

</div>

77
STI College Naga
</a>
<p id="edit-file-errorDisplay"></p>
<div class="invalid-feedback" id="edit-invalid-file">
File is too large allowed limit is 200 MB!
</div>

</div>
<div class="mt-3" style="display: flex; flex-direction: row-reverse;">
<small class="last-editor mb-0"></small>
</div>

</div>
</div>
<div class="modal-footer pt-0">

<button type="button" class="btn btn-primary" id="editNote">

</form>
</div>
</div>
</div>


<?php include('partials/_sidebar.php') ?>
<input type="hidden" value="7" id="checkFileName">

<main>
<div class="header">
<div class="left">
<h1>Notes</h1>
</div>
</div>

78
STI College Naga
<div class="bottom-data">

<div class="tab-pane active" id="profile" role="tabpanel" aria-

labelledby="profile-tab"
tabindex="0">
<div class="showAttendence">
<br>
<div class="header">
<i class='bx bx-receipt'></i>
<h3>Notes </h3>

<a class="upload-syllabus" id="showUploadDialog">

<i class='bx bx-cloud-upload'></i>
<span>Upload Notes</span>
</a>
</div>

<div class="row g-3 align-items-center">

<div class="col-auto">
<label for="inputPassword6" class="col-form-label">Class
</label>
</div>
<div class="col-auto">
<select class="form-select" aria-label="Default select example"
id="notes-class"
<?php include('partials/select_classes.php') ?>
</select>
</div>
</div>
</div>
<br>
<div class="container">
<a class="find" id="find-notes-btn">
<i class='bx bx-search-alt'></i>
<span>Search</span>
</a>
</div>

79
STI College Naga

<div class="container">
<br>

<div class="attendenceTable" style="display: block;">

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 row-

cols-xl-4 row-cols-sm-2 g-4"
id="notes">

</div>
</div>

</div>

<hr class="text-danger">

<div class="d-grid gap-2 d-md-flex justify-content-md-end">

</div>

</main>

</div>

80
STI College Naga
<script src="../assets/js/notes.js"></script>
<?php include('partials/_footer.php'); ?>

NOTICEBOARD.PHP

<?php include('partials/_header.php') ?>

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-

keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="showFullTitle"></h1>
<button type="button" class="close mr-2" data-bs-dismiss="modal" aria-
label="Close"><i
class='bx bx-x'></i></button>
</div>
<div class="modal-body">
<div class="container">
<p id="showFullbody"></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<div class="modal" style="z-index: 2000;" id="edit-notice" tabindex="-1" aria-

81
STI College Naga
<button type="button" class="close mr-2" data-bs-dismiss="modal" aria-
label="Close"><i
class='bx bx-x'></i></button>
</div>
<form class="needs-validation" id="edit-notice-form" novalidate>
<div class="modal-body">

<div class="m-3">
<div class="noticeform">
<div class="mb-3">
<label for="title" class="form-label">Notice
Title</label>
<input type="text" class="form-control" id="edit-notice-title"
name="title"
placeholder="title of notice" required>
<div class="invalid-feedback" id="edit-invalid-title">
You must have to add Title!
</div>
</div>

<div class="mb-3">
<label for="body" class="form-label">Notice
Body</label>
<textarea class="form-control" id="edit-notice-body" name="body"
rows="5"></textarea>
<div class="invalid-feedback" id="edit-invalid-body">
Either Notice Body or Any file is required!
</div>
</div>

<a class="mx-3" id="view-current-file" target="_blank">

<i class='mt-1 bx bx-show-alt' style="color:

black;cursor:pointer;"></i>

82
STI College Naga
</div>
</a>
<p id="edit-file-errorDisplay"></p>
<div class="invalid-feedback" id="edit-invalid-file">
File is too large allowed limit is 200 MB!
</div>

</div>

<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-
label">Importance</label>

</div>
</div>

</div>
<div class="modal-footer">

<button type="button" class="btn btn-primary" id="edit-save-notice-btn">

83
STI College Naga
</form>

</div>
</div>
</div>

<div class="modal fade" id="edit-notice-modal" tabindex="-1" aria-

labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Edit notice</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-
label="Close"></button>
</div>
<div class="modal-body">

</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Edit</button>
</div>
</div>
</div>
</div>

<div class="modal fade" id="delete-confirmation-modal" tabindex="-1" aria-
labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<strong>Do you really want to delete this Notice?</strong>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
<button type="button" class="btn btn-danger"
onclick="deleteNotice()">Delete</button>
</div>

84
STI College Naga
</div>
</div>
</div>

<?php include('partials/_sidebar.php') ?>
<input type="hidden" value="6" id="checkFileName">

<main>
<div class="header">
<div class="left">
<h1>Notice Board</h1>
</div>
</div>

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active " id="createNoticeTab" data-bs-
toggle="tab" data-bs-target="#home"
type="button" role="tab" aria-controls="home" aria-
selected="true">Create
Notice</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="show-notice-tab" data-bs-toggle="tab" data-
bs-target="#profile"
type="button" role="tab" aria-controls="profile" aria-
selected="false">Notice
Board</button>
</li>

</ul>

85
STI College Naga

<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-
labelledby="home-tab" tabindex="0">
<div class="container">
<br>

<form class="needs-validation" id="notice-form" novalidate>

<div class="attendenceTable" style="display: block;">
<div class="header">
<i class='bx bx-receipt'></i>
<h3>Create Notice </h3>
<i class='bx bx-filter'></i>

</div>
<hr><br>

<div class="center-element">
<div class="noticeform">
<div class="mb-3">
<label for="title" class="form-label">Notice
Title</label>
<input type="text" class="form-control" id="notice-title"
name="title"
placeholder="title of notice" required>
<div class="invalid-feedback" id="invalid-title">
You must have to add Title!
</div>
</div>
<br>

<div class="mb-3">
<label for="body" class="form-label">Notice
Body</label>
<textarea class="form-control" id="notice-body"
name="body"
rows="4"></textarea>
<div class="invalid-feedback" id="invalid-body">
Either Notice Body or Any file is required!
</div>
</div>

<br>

86
STI College Naga
<div class="mb-3">
<label for="file" class="form-label">Any file</label>
<input type="file" class="form-control" accept="*"
id="notice-file"
name="file">
<p id="errorDisplay"></p>
<div class="invalid-feedback" id="invalid-file">
File is too large allowed limit is 200 MB!
</div>

</div>

<br>
<div class="mb-3">
<label for="exampleFormControlTextarea1"
class="form-label">Importance</label>

</div>

</div>
</div>

87
STI College Naga
<div class="uploadbox" id="uploadbox">
<div class="progress" id="progress-bar-box" role="progressbar"
aria-label="Animated striped example" aria-valuenow="75"
aria-valuemin="0"
aria-valuemax="100">
<div class="progress-bar progress-bar-striped progress-bar-
animated"
id="progress-indicator" style="width: 0%;"></div>
</div>
</div>
<small id="status"></small>

<hr>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button type="button" class="btn btn-outline-warning" id="reset-
notice"

onclick="cleanForm()">  Reset  </button>
<button type="button" class="btn btn-outline-success" id="post-
notice">Post</button>
</div>
</form>

</div>
</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-
tab" tabindex="0">
<div class="container">
<div>
<br>

<div class="attendenceTable" style="display: block;">

<div class="header">
<i class='bx bx-clipboard'></i>
<h3>Notice Board</h3>
<a href="noticeboard.php"><i style="font-size:30px;font-
weight:bold;" class='bx bx-plus'></i></a>
</div>
<hr class="text-danger">

<div class="row row-cols-1 row-cols-md-2 row-cols-lg-2 row-

cols-xl-3 row-cols-sm-1 g-4"
id="notice-box">

88
STI College Naga
</div>

<div class="d-grid gap-2 d-md-flex justify-content-md-end">

</div>

</div>
</div>

</div>

</main>

</div>

SETTINGS.PHP

89
STI College Naga
<?php include("../assets/noSessionRedirect.php"); ?>
<?php include("./verifyRoleRedirect.php"); ?>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<link rel="icon" type="image/x-icon" href="images/1.png">
<title>School Management</title>

<link rel="icon" type="image/x-icon" href="../images/1.png">

<link rel="stylesheet" href="css/bootstrap.css">

<link href="https://unpkg.com/[email protected]/css/gijgo.min.css" rel="stylesheet"

type="text/css" />
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-
awesome.min.css" />
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-
awesome.min.css" rel="stylesheet" />

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="modal fade" id="edit-confirmation-modal" tabindex="-1" aria-

labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">

90
STI College Naga
<div class="modal-header">
</div>
<div class="modal-body">
<strong>Do you want to edit your profile.</strong>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">No</button>
<button type="button" class="btn btn-danger"
id="EditProfileBtn">Yes</button>
</div>
</div>
</div>
</div>

<div class='toast-container position-fixed text-success bottom-0 end-0 p-3' style="z-

index: 9000;">
<div id='liveToast' class='toast' role='alert' aria-live='assertive' aria-atomic='true'
style="color:black;">
<div class='d-flex'>
<div class='toast-body' id="toast-alert-message">

</div>
<button type='button' class='btn-close me-2 m-auto text-danger' data-bs-
dismiss='toast' aria-label='Close'></button>
</div>
</div>
</div>

<div class="modal" style="z-index: 2000;" id="edit-profile-model" tabindex="-1" aria-
labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Edit Profile</h1>
<button type="button" class="close mr-2" data-bs-dismiss="modal" aria-
label="Close"><i
class='bx bx-x'></i></button>
</div>

<form class="needs-validation" id="editProfileForm" novalidate>

91
STI College Naga
<label for="fullname" class="form-label">Full Name</label>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name"
aria-label="First name" id="eidtFname" name="fname"
required>
<div class="invalid-feedback">
required!
</div>
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name"
aria-label="Last name" id="editLname" name="lname"
required>
<div class="invalid-feedback">
required!
</div>
</div>
</div>
</div>

<div class="mb-2">
<label for="editEmail" class="form-label">Email</label>
<input type="email" class="form-control" id="editEmail"
name="email"
aria-describedby="emailHelp" required>

<div class="invalid-feedback">
invalid email!
</div>
</div>

<div class="mb-2">
<div class="row">
<div class="col-6">
<label for="dob" class="form-label">Date of Birth</label>
<input type="date" class="form-control" id="editDOB" acceptaria-
describedby="emailHelp"
name="dob" required>
<div class="invalid-feedback">
required!
</div>
</div>
<div class="col-6 student-image">

92
STI College Naga
<label for="gender" class="form-label">Gender</label>
<select class="form-select" id="editGender" name="gender"
style="width:100%;" required>
<option selected disabled value="">--select--</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
<div class="invalid-feedback">
required!
</div>
</div>
</div>
</div>

<div class="mb-2">
<label for="editPhone" class="form-label">Phone Number</label>
<input type="tel" class="form-control" id="editPhone" name="phone"
placeholder="Enter phone number" required>
<div class="valid-feedback">
</div>
<div class="invalid-feedback" id="phone-mdg">
Please enter a valid 10-digit phone number.
</div>
</div>

<div class="mb-2">
<label for="editAddress" class="form-label">Address</label>
<textarea class="form-control" id="editAddress" name="address"
rows="2" required></textarea>
<div class="invalid-feedback">
this field can't be empty!
</div>
</div>

</div>
</div>
<div class="modal-footer">

<button type="button" class="btn btn-primary"

id="saveChangesBtn"></i><span>
<small>Save Changes</small></span>
</button>
</div>

93
STI College Naga
</form>
</div>
</div>
</div>
</div>

<div class="modal" style="z-index: 2000;" id="change-password" tabindex="-1" aria-
labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Change
Password</h1>
<button type="button" class="close mr-2" data-bs-dismiss="modal" aria-
label="Close"><i
class='bx bx-x'></i></button>
</div>
<form class="needs-validation" id="changePasswordForm" novalidate>
<div class="modal-body">
<div class="container my-3">
<div class="mb-3">
<label for="currentPass" class="form-label">Current
Password</label>
<input type="text" class="form-control" id="currentPass"
name="currentPassword" required>
<div class="invalid-feedback invalidCurrentPassword">
required!
</div>

</div>

<div class="mb-3">
<label for="newPass" class="form-label">New Password</label>
<input type="text" class="form-control" id="newPass"
name="newPassword" required>
<div class="invalid-feedback invalidNewPassword">
required!
</div>
</div>

<div class="mb-3">
<label for="confirmPass" class="form-label">Confirm

94
STI College Naga
Password</label>
<input type="text" class="form-control" id="confirmPass"
name="confirmPassword " required>
<div class="invalid-feedback invalidConfirmPassword">
required!
</div>
</div>

<div class="invalid-feedback notSamePasswords">

new Password and confirm password must be same!
</div>
</div>
</div>
<div class="modal-footer">

<button type="button" class="btn btn-primary" id="savePasswordBtn">

<?php include('partials/_sidebar.php') ?>
<input type="hidden" value="12" id="checkFileName">

<main>
<div class="header">
<div class="left">
<h1>Settings</h1>
<ul class="breadcrumb">
<li><a href="#">

</a></li>

95
STI College Naga
</ul>
</div>

</div>
<div class="bottom-data">

<h3>Profile Settings</h3>
<div class="student-btns">

<div class="dropdown dropdown-center">

<ul class="dropdown-menu">
<li><a class="dropdown-item submit-attendence"
id="remove_pic" onclick="removeProfilePic()">Remove Profile Picture</a></li>
<li><a class="dropdown-item reset-attendence"
id="_change_password" >Change Password</a></li>
<li><a class="dropdown-item reset-attendence"
id="_change_profile" >Edit Profile</a></li>
</ul>
</div>
</div>
</div>
<hr>

<div class="container p-0">

96
STI College Naga
<div class="card">
<div class="card-header" id="settings-card-header">
<h5 class="card-title mb-0">Profile Image</h5>
</div>

<div class="text-center mt-3 mb-3">

</div>
<small class="mb-3">For best results, use an image at
least 128px by 128px in .jpg
format</small>
<br>
</div>
<div class="list-group list-group-flush" role="tablist">

</div>
</div>

<div class="setting-function-btns mt-8 mb-5">

<button class="btn btn-primary mb-3"
id="passwordDialogBtn" ><i
class='bx bxs-key'></i> <div>Change
Password</div>
</button>

<button class="btn btn-primary mb-3"

id="showEditDialogBtn"> <i
class='bx bx-edit-alt'></i> Edit
Profile</button>

97
STI College Naga
</div>
</div>

<div class="col-md-7 col-xl-8 ">

<div class="card" id="profile-data">

<div class="card-header" id="settings-card-header">
<h5 class="card-title mb-0">Profile info</h5>
</div>
<div class="card-body">
<form>
<div class="row">
<div class="col-md-10">

<div class="user-info ">

<div class="user-info ">

<h4 class="_flex-container"> <i class='bx bxs-
user-rectangle'></i>   Name</h4>
<h3>-</h3>
<p id="userName">_ _ _ _</p>
</div>
<div class="user-info">
<h4 class="_flex-container"><i class='bx bxs-
calendar'></i>  BirthDay </h4>
<h3>-</h3>
<p id="userDOB">_ _ _ _</p>
</div>

<div class="user-info">
<h4 class="_flex-container"><i class='bx bx-
envelope' ></i>  Email </h4>
<h3>-</h3>
<p id="userEmail">_ _ _ _</p>
</div>

<div class="user-info">
<h4 class="_flex-container"><i class='bx bx-
phone-call' ></i>  Phone</h4>
<h3>-</h3>

98
STI College Naga
<p id="userPhone">_ _ _ _</p>
</div>

<div class="user-info">
<h4 class="_flex-container"><i class='bx bx-
male-female' ></i>  Gender </h4>
<h3>-</h3>
<p id="userGender">_ _ _ _</p>
</div>

<div class="user-info">
<h4 class="_flex-container"><i class='bx bxs-
home-alt-2' ></i>  Address</h4>
<h3>-</h3>
<p id="userAddress">_ _ _ _</p>
</div>

</div>
<!-- <div class="col-md-4">

</div> -->
</div>
<br>

</form>

</div>
</div>

</div>

</div>

99
STI College Naga
</div>

</div>

</main>

</div>

STUDENT.PHP

<?php include('partials/_header.php') ?>

<div class="modal fade" id="edit-confirmation-modal" tabindex="-1" aria-
labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<strong>Do you really want to Edit Student Details?</strong>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
<button type="button" class="btn btn-danger"
id="confirm-edit-btn">Edit</button>
</div>
</div>
</div>
</div>

100
STI College Naga
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<strong>Do you really want to delete Student?</strong>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
<button type="button" class="btn btn-danger"
onclick="deleteTeacherWithIdSeted()">Delete</button>
</div>
</div>
</div>
</div>

<div class="modal" style="z-index: 2000;" id="addTeacherModal" tabindex="-1" aria-

labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Student Details</h1>
<button type="button" class="close mr-2" data-bs-dismiss="modal" aria-
label="Close"><i
class='bx bx-x'></i></button>
</div>
<form class="needs-validation" id="general-form" novalidate>
<div class="modal-body">
<div class="container my-3">
<div class="mb-3">
<label for="fullname" class="form-label">Full Name</label>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name"
aria-label="First name" id="fname" name="fname" required>
<div class="invalid-feedback">
required!
</div>
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name"
aria-label="Last name" id="lname" name="lname" required>

101
STI College Naga
<div class="invalid-feedback">
required!
</div>
</div>
</div>
</div>

<div class="mb-3">
<label for="father" class="form-label">Father name</label>
<input type="text" class="form-control" id="father" aria-
describedby="emailHelp"
name="father" required>
<div class="invalid-feedback">
required!
</div>
</div>

<div class="mb-3">
<div class="row">
<div class="col-6">
<label for="dob" class="form-label">Date of Birth</label>
<input type="date" class="form-control" id="dob" aria-
describedby="emailHelp"
name="dob" required>
<div class="invalid-feedback">
required!
</div>
</div>
<div class="col-6 student-image">

<label for="gender" class="form-label">Gender</label>

<select class="form-select" id="gender" name="gender"
style="width:100%;" required>
<option selected disabled value="">--select--</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
<div class="invalid-feedback">
required!
</div>
</div>
</div>
</div>

102
STI College Naga
<div class="mb-3">
<div class="row">
<div class="col-6">
<label for="class" class="form-label">Class</label>
<select class="form-select" id="class" name="class"
style="width:100%;" required>

<option selected disabled value="">---select--</option>

<?php include('partials/select_classes.php') ?>
</select>
<div class="invalid-feedback">
required!
</div>
</div>
<div class="col-6">
<label for="section" class="form-label">Section</label>
<select class="form-select" id="section" name="section"
style="width:100%;"
required>
<option selected disabled value="">--select--</option>

<?php include('partials/selelct_section.php') ?>
</select>
<div class="invalid-feedback">
required!
</div>
</div>
</div>
</div>

103
STI College Naga
<div class="mb-3" id="uploadImageField">
<div class="mb-3">
<label for="image" class="form-label">Photo</label>
<input class="form-control" type="file" id="uploadImage"
name="image" placeholder="file"
accept=".png, .jpeg, .jpg">

</div>

</div>
</div>
<div class="modal-footer">

<button type="button" class="btn btn-primary" id="general-info-btn">

</div>
</div>
</div>

<div class="modal" style="z-index: 2000;" id="personalInformationModal" tabindex="-
1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Address Details</h1>
<button type="button" class="close mr-2" data-bs-dismiss="modal" aria-
label="Close"><i
class='bx bx-x'></i></button>
</div>
<form class="needs-validation" id="personal-form" novalidate>
<div class="modal-body">
<div class="container my-3">

<div class="mb-3">
<label for="phone" class="form-label">Phone number</label>
<input type="tel" class="form-control" id="phone" name="phone"
placeholder="Enter phone number" required>

104
STI College Naga
<div class="valid-feedback">
</div>
<div class="invalid-feedback" id="phone-mdg">
Please enter a valid 10-digit phone number.
</div>
</div>

<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" aria-
describedby="emailHelp"
name="email" required>
<div class="invalid-feedback">
required!
</div>
</div>

<div class="mb-3">
<label for="address" class="form-label">Address</label>
<input type="text" class="form-control" id="address" aria-
describedby="emailHelp"
name="address" required>
<div class="invalid-feedback">
required!
</div>
</div>

<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">City</label>
<div class="row">
<div class="col">
<input type="text" class="form-control" id="city" aria-
describedby="emailHelp"
name="city" required>
<div class="invalid-feedback">
required!
</div>
</div>
<div class="col">
<input type="text" class="form-control" id="zip" aria-
describedby="emailHelp"
name="zip" placeholder="ZIP" required>
<div class="invalid-feedback">
required!
</div>
</div>

105
STI College Naga
</div>
</div>

<div class="mb-3">
<label for="state" class="form-label">State</label>
<select class="form-select" aria-label="Default select example"
id="state" name="state"
required>
<option selected disabled value="">--select--</option>
<option value="Hariyana">Hariyana</option>
<option value="UP">UP</option>
<option value="Delhi">Delhi</option>
<option value="Panjab">Panjab</option>
<option value="Gujrat">Gujrat</option>
</select>
<div class="invalid-feedback">
required!
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" onclick="backToStudentDetail()" class="btn btn-
secondary">
<div><i class='bx bxs-chevrons-left'></i><span>Back</span></div>
</button>
<button type="button" class="btn btn-primary" id="personal-info-btn">
<div><i class='bx bxs-chevrons-right'></i><span> next</span></div>
</button>
</div>
</form>
</div>
</div>
</div>

<div class="modal" style="z-index: 2000;" id="guardian_information" tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Emergency Contact
Details</h1>
<button type="button" class="close mr-2" data-bs-dismiss="modal" aria-

106
STI College Naga
label="Close"><i
class='bx bx-x'></i></button>
</div>
<form class="needs-validation" id="guradian-form" novalidate>
<div class="modal-body">

<div class="container my-3">

<div class="mb-3">
<label for="guardian" class="form-label">Guardian name</label>
<input type="text" class="form-control" id="guardian" aria-
describedby="emailHelp"
name="guardian" required>
<div class="invalid-feedback">
required!
</div>
</div>

<div class="mb-3">
<label for="gphone" class="form-label">Phone number</label>
<input type="tel" class="form-control" id="gphone" name="gphone"
placeholder="Enter phone number" required>
<div class="valid-feedback">
</div>
<div class="invalid-feedback" id="phone-g">
Please enter a valid 10-digit phone number.
</div>
</div>

<div class="mb-3">
<label for="gaddress" class="form-label">Address</label>
<input type="text" class="form-control" id="gaddress" aria-
describedby="emailHelp"
name="gaddress" required>
<div class="invalid-feedback">
required!
</div>
</div>

<div class="mb-3">
<label for="city-info" class="form-label">City</label>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="City name"
aria-label="First name" id="gcity" name="gcity" required>
<div class="invalid-feedback">
required!

107
STI College Naga
</div>
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Zip code"
aria-label="Last name" id="gzip" name="gzip" requireds>
<div class="invalid-feedback">
required!
</div>
</div>
</div>
</div>

<div class="mb-3">
<label for="relation" class="form-label">Relationship to
Student</label>
<input type="text" class="form-control" id="relation" aria-
describedby="emailHelp"
name="relation" required>
<div class="invalid-feedback">
required!
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
onclick="backToAddressDetail()">
<div><i class='bx bxs-chevrons-left'></i><span>Back</span></div>
</button>
<button type="button" class="btn btn-primary" id="guardian-form-
btn"><span>Submit </span></button>
</div>
</form>
</div>
</div>
</div>

108
STI College Naga
<div class="modal-header">
<h1 class="modal-title text-danger fs-5" id="exampleModalLabel">Delete
Student</h1>
<button type="button" class="close mr-2" data-bs-dismiss="modal" aria-
label="Close"><i
class='bx bx-x'></i></button>
</div>
<form class="needs-validation" id="remove-student-form" novalidate>
<div class="modal-body">
<div class="container my-3">

<div class="mb-3">
<label for="student-id" class="form-label">Student ID</label>
<input type="text" class="form-control remove_student_id"
id="student-id" aria-describedby="" required>
<div class="invalid-feedback">
Please provide a valid Student ID.
</div>
</div>

</div>
</div>
<div class="modal-footer">

<button type="button" class="btn btn-danger" id="remove-student-btn">

<div><span>Delete Student</span></div>
</button>
</div>
</form>
</div>
</div>
</div>

<?php include('partials/_sidebar.php') ?>
<input type="hidden" value="3" id="checkFileName">

109
STI College Naga
<main>
<div class="header">
<div class="left">
<h1>Students</h1>
<ul class="breadcrumb">
<li><a href="#">

</a></li>

</ul>
</div>

</div>
<div class="bottom-data">

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item me-1" role="presentation">
<button class="nav-link active " id="addStudentTab" data-bs-toggle="tab"
data-bs-target="#home" onclick="AddStudentBtnClick()" type="button" role="tab" aria-
controls="home" aria-selected="true">Add Students</button>
</li>
<li class="nav-item me-1" role="presentation">
<button class="nav-link" id="view-students-tab" data-bs-toggle="tab"
data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-
selected="false" onclick="showStudents()">Show
Students</button>
</li>
<li class="nav-item me-1" role="presentation">
<button class="nav-link" id="feedback-students-tab" data-bs-toggle="tab"
data-bs-target="#feedback" type="button" role="tab" aria-controls="feedback" aria-
selected="false">Feedback</button>
</li>

</ul>

110
STI College Naga
<div class="attendenceTable" style="display: block;">
<div class="header">
<i class='bx bx-receipt'></i>
<h3>Students</h3>
<div class="student-btns">

<div class="dropdown dropdown-center">

<ul class="dropdown-menu">
<li><a class="dropdown-item reset-attendence"
id="add_student_dropdown" data-bs-toggle="modal" data-bs-
target="#addTeacherModal">Add Student</a></li>
<li><a class="dropdown-item submit-attendence"
id="remove_student_dropdown" data-bs-toggle="modal" data-bs-
target="#removeStudentModel">Remove Student</a></li>
</ul>
</div>

</div>
</div>
<hr>
<br>

<div class="container add-remove">

<ul class="insights">
<a class="addlink" data-bs-toggle="modal" data-bs-
target="#addTeacherModal"
id="addTeacherButton">
<li class="additem">

<i class='bx bxs-user-plus'></i>
<span class="info">
<h3>
Add
</h3>
<h3>Student</h3>
</span>
</li>
</a>

111
STI College Naga

<a class="removelink" id="remove-student-jumbo-btn" data-bs-

toggle="modal" data-bs-target="#removeStudentModel">
<li class="removeitem">
<i class='bx bxs-user-minus'></i>
<span class="info">
<h3>
Remove
</h3>
<h3>Student</h3>
</span>
</li>
</a>
</ul>
</div>

</div>
<br>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-
tab" tabindex="0">
<div class="showAttendence">
<br>
<div class="header">
<i class='bx bx-list-ul'></i>
<h3>Students List</h3>

</div>

<div class="row g-3 align-items-center">

<div class="col-auto">
<label for="inputPassword6" class="col-form-
label"> Class  </label>

112
STI College Naga
</div>
<div class="col-auto">
<select class="form-select" aria-label="Default select example"
id="search-class">

<?php include('partials/select_classes.php') ?>
</select>
</div>
</div>

</div>
<br>
<div class="container" style="display: flex;">
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputPassword6" class="col-form-label">Section
</label>
</div>
<div class="col-auto">
<select class="form-select" aria-label="Default select example"
id="search-section">

<?php include('partials/selelct_section.php') ?>
</select>
</div>
</div>
</div>
<br>

113
STI College Naga
<a class="find" onclick="findAndshowStudents()">
<i class='bx bx-search-alt'></i>
<span>Find</span>
</a>

</div>
<br>
<hr>

<div class="container">
<br>

<div class="attendenceTable" style="display: block;">
<div class="header">
<i class='bx bx-list-ul'></i>
<h3>Students List</h3>

<!-- <a href="#" class="excel">

<i class="fa fa-file-excel-o" aria-hidden="true"></i>
<span>EXCEL</span>
</a>

<a href="#" class="report">

</div>
<hr class="text-danger">

<div class="container" style="display: flex;">

</div>

114
STI College Naga

<div class="students-table">
<table class="remove-cursor-pointer">
<thead>
<tr>
<th scope="col" class="thead col-2">#</th>
<th scope="col" class="thead col-2">Student ID</th>
<th scope="col" class="thead col-5">Name</th>
<th scope="col" class="thead col-3">Action</th>
</tr>
</thead>

</table>
</div>
<div id="dataNotAvailable">

<div class="_flex-container box-hide">

</div>

</div>
<hr class="text-danger">

<div class="d-grid gap-2 d-md-flex justify-content-md-end">

115
STI College Naga
</div>

</div>

</div>
</div>
<br>
<div class="tab-pane" id="feedback" role="tabpanel" aria-
labelledby="feedback-tab" tabindex="0">

<?php include('partials/student-shared/feedback-tab.php') ?>

</div>

</main>

</div>

SUBJECTS.PHP

<?php include('partials/_header.php') ?>

116
STI College Naga
dismiss="modal">Close</button>
<button type="button" class="btn btn-danger"
id="confirm-edit-btn">Edit</button>
</div>
</div>
</div>
</div>

<div class="modal fade" id="delete-confirmation-modal" tabindex="-1" aria-
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<strong>Do you really want to delete this Subject?</strong>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
<button type="button" class="btn btn-danger"
onclick="deleteSubject()">Delete</button>
</div>
</div>
</div>
</div>

<div class="modal modal-md" style="z-index: 2000;" id="add-subject" tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Add Subject</h1>
<button type="button" class="close mr-2" data-bs-dismiss="modal" aria-
label="Close"><i
class='bx bx-x'></i></button>
</div>
<form class="needs-validation" id="create-subject-form" novalidate>
<div class="modal-body">
<div class="container my-3">

117
STI College Naga
<div class="mb-3">
<label for="class" class="form-label">Class</label>
<select class="form-select" aria-label="Default select example"
name="class" id="class"
required>

<?php include('partials/select_classes.php') ?>
</select>
<div class="invalid-feedback">
Please select class.
</div>
</div>

<div class="mb-3">
<label for="subject" class="form-label">Subject Name</label>
<input type="text" class="form-control" name="subject"
id="newSubjectName"
aria-describedby="emailHelp" required>
<div class="invalid-feedback">
This field can't be empty!
</div>
</div>

</div>
</div>
<div class="modal-footer">

<button type="button" class="btn btn-primary" id="add-subject-btn">

118
STI College Naga
</div>
</form>
</div>
</div>
</div>

<div class="modal modal-md" style="z-index: 2000;" id="edit-subject" tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Edit Subject</h1>
<button type="button" class="close mr-2" data-bs-dismiss="modal" aria-
label="Close"><i
class='bx bx-x'></i></button>
</div>
<form class="needs-validation" id="editSubjectForm" novalidate>
<div class="modal-body">
<div class="container my-3">

<div class="mb-3">
<label for="subject" class="form-label">Subject Name</label>
<input type="text" class="form-control" id="subject-edited-name"
name="subject" aria-describedby="emailHelp" required>
<div class="invalid-feedback">
Please select class.
</div>
</div>

</div>
</div>
<div class="modal-footer">

<button type="button" class="btn btn-primary" id="save-new-subject-name">

</div>
</form>
</div>
</div>

119
STI College Naga
</div>


<?php include('partials/_sidebar.php') ?>
<input type="hidden" value="4" id="checkFileName">

<main>
<div class="header">
<div class="left">
<h1>Subjects</h1>
</div>
</div>
<div class="bottom-data">

<div class="tab-pane active" id="profile" role="tabpanel" aria-

labelledby="profile-tab"
tabindex="0">
<div class="showAttendence">
<br>
<div class="header">
<i class='bx bx-receipt'></i>
<h3>Subjects </h3>
<a href="#" class="add" data-bs-toggle="modal" data-bs-
target="#add-subject"
onclick="removeValidations()">
<i class='bx bx-plus'></i>
<span>Add</span>
</a>
</div>

120
STI College Naga
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="class" class="col-form-label">Class </label>
</div>
<div class="col-auto">
<select class="form-select" aria-label="Default select example"
name="class"
id="search-class">















<?php include('partials/select_classes.php') ?>
</select>
</div>
</div>
</div>
<br>
<div class="container">
<a class="find" id="find-btn">
<i class='bx bx-search-alt'></i>
<span>Find</span>
</a>
</div>

<div class="container">
<br>

<div class="attendenceTable" style="display: block;">
<div class="header">
<i class='bx bx-list-ul'></i>
<h3 id="subject-table-header">Class 12 Subjects</h3>

121
STI College Naga
</div>

<hr class="text-danger">

<div class="students-table subject-table">
<table>
<thead>
<tr>
<th scope="col" class="thead col-4">#</th>
<th scope="col" class="thead col-5">Subject</th>
<th scope="col" class="thead col-3">Action</th>
</tr>
</thead>
<tbody id="subject-table-body">

</tbody>
</table>
</div>

<div id="dataNotAvailable">

<div class="_flex-container box-hide">

</div>
</div>

</div>

</div>

122
STI College Naga
</div>

</div>

</main>

</div>

SYLLABUS.PHP

<?php include('partials/_header.php') ?>

<div class="modal" style="z-index: 2000;" id="upload-syllabus" tabindex="-1" aria-
labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Upload Syllabus</h1>
<button type="button" class="close mr-2" data-bs-dismiss="modal" aria-
label="Close"><i
class='bx bx-x'></i></button>
</div>
<form class="needs-validation" id="uploadSyllabusForm" novalidate>
<div class="modal-body">
<div class="container">

<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Class</label>
<div class="col-auto">
<select class="form-select" aria-label="Default select example"
id="syllabus-class"
name="class" required>
<!-- <option selected>12</option>
<option>11</option>
<option>10</option>
<option>9</option>
<option>8</option>
<option>7</option>
<option>6</option>
<option>5</option>

123
STI College Naga
<option>4</option>
<option>3</option>
<option>2</option>
<option>1</option>
<option>pg</option>
<option>lkg</option>
<option>ukg</option> -->
<?php include('partials/select_classes.php') ?>
</select>
</div>
</div>

<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Subject</label>
<select class="form-select" aria-label="Default select example"
id="subjectList"
name="subject" required>
</select>
<div id="validationServer04Feedback" class="invalid-feedback">
Please select a valid Subject.
</div>
</div>

<div class="mb-3">
<label for="formFile" class="form-label">Upload pdf
file</label><small class="small"> (max-size 200MB)</small>
<input class="form-control" type="file" id="formFile" name="file"
accept=".pdf, .png, .jpg, .jpeg" required>
<div class="invalid-feedback">Please choose a valid file.</div>
</div>

<div class="progress-box mb-0" style="height: 15px;">

</div>

124
STI College Naga
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="uploadSllybusBtn">
<div><i class='bx bxs-cloud-upload'></i></i><span>
Upload</span></div>
</button>
</div>
</form>
</div>
</div>
</div>


<div class="modal" style="z-index: 2000;" id="upload-syllabus-onlyFile" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Upload Syllabus</h1>
<button type="button" class="close mr-2" data-bs-dismiss="modal" aria-
label="Close"><i
class='bx bx-x'></i></button>
</div>
<form class="needs-validation" id="change-syllabus-form" novalidate>
<div class="modal-body">
<div class="container my-3">

<div class="mb-3">
<label for="formFile" class="form-label">Upload pdf
file</label><small class="small"> (max-size 200MB)</small>
<input class="form-control" type="file" id="changeFormFile"
accept=".pdf, .png, .jpeg, .jpg"
required>
<div class="invalid-feedback">Please choose a valid file!</div>
</div>
</div>

125
STI College Naga
</div>
</div>
</div>
</div>
</div>

</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="upload-new-syllabus">
<div><i class='bx bxs-cloud-upload'></i></i><span>
Upload</span></div>
</button>
</div>
</form>
</div>
</div>
</div>


<?php include('partials/_sidebar.php') ?>
<input type="hidden" value="8" id="checkFileName">

<main>
<div class="header">
<div class="left">
<h1>Syllabus</h1>
</div>
</div>
<div class="bottom-data">

<div class="tab-pane active" id="profile" role="tabpanel" aria-

labelledby="profile-tab"
tabindex="0">

126
STI College Naga
<div class="showAttendence">
<br>
<div class="header">
<i class='bx bx-receipt'></i>
<h3>Syllabus </h3>

<a class="upload-syllabus" id="openUploadDialog">

<i class='bx bx-cloud-upload'></i>
<span>Upload Syllabus</span>
</a>
</div>

<div class="row g-3 align-items-center">

<div class="col-auto">
<label for="inputPassword6" class="col-form-label">Class
</label>
</div>
<div class="col-auto">
<select class="form-select" aria-label="Default select example"
name=""
id="selected-class">















<?php include('partials/select_classes.php') ?>
</select>
</div>
</div>

</div>

127
STI College Naga
<div class="container">
<br>
<a class="find" id="find-btn">
<i class='bx bx-search-alt'></i>
<span>Find</span>
</a>
</div>

<hr class="text-danger">

<div class="syllabus-table">
<table>
<tr>
<th scope="col" class="thead col-3">#</th>
<th scope="col" class="thead col-3">Subject</th>
<th scope="col" class="thead col-6">Syllabus</th>
</tr>

</tbody>

</table>
</div>
<div id="dataNotAvailable">

<div class="_flex-container box-hide">

</div>

</div>
<hr class="text-danger">

128
STI College Naga
</div>

</div>
</div>

</div>

</main>

</div>

TEACHER.PHP

<?php include('partials/_header.php') ?>

<div class="modal fade" id="edit-confirmation-modal" tabindex="-1" aria-
labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<strong>Do you really want to Edit Teacher Details?</strong>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
<button type="button" class="btn btn-danger"
id="confirm-edit-btn">Edit</button>
</div>
</div>
</div>
</div>

129
STI College Naga

<div class="modal fade" id="delete-confirmation-modal" tabindex="-1" aria-
labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<strong>Do you really want to delete Teacher?</strong>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-
dismiss="modal">Close</button>
<button type="button" class="btn btn-danger"
onclick="deleteTeacherWithIdSeted()">Delete</button>
</div>
</div>
</div>
</div>

<div class="modal" style="z-index: 2000;" id="addTeacherModal" tabindex="-1" aria-

labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Teacher Details</h1>
<button type="button" class="close mr-2" data-bs-dismiss="modal" aria-
label="Close"><i
class='bx bx-x'></i></button>
</div>
<form class="needs-validation" id="general-form" novalidate>
<div class="modal-body">
<div class="container my-3">
<div class="mb-3">
<label for="fullname" class="form-label">Full Name</label>
<div class="row">
<div class="col">
<input type="text" class="form-control" placeholder="First name"
aria-label="First name" id="fname" name="fname" required>
<div class="invalid-feedback">

130
STI College Naga
required!
</div>
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Last name"
aria-label="Last name" id="lname" name="lname" required>
<div class="invalid-feedback">
required!
</div>
</div>
</div>
</div>

<div class="mb-3">
<label for="details" class="form-label">Class Teacher Details</label>
<div class="row">
<div class="col">
<select class="form-select" id="class" name="class"
style="width:100%;" required>

<option selected disabled value="">---select--</option>

<option value="null">Not Applicable</option>

<?php include('partials/select_classes.php') ?>
</select>
<div class="invalid-feedback">
required!

131
STI College Naga
</div>
</div>
<div class="col">
<select class="form-select" id="section" name="section"
style="width:100%;"
required>
<option selected disabled value="">--select--</option>

<option value="null">Not Applicable</option>
<?php include('partials/selelct_section.php') ?>
</select>
<div class="invalid-feedback">
required!
</div>
</div>
</div>
<div class="invalid-feedback" id="invaldClassteacher">
Either both are not applicable or both are selected!!
</div>
</div>

<div class="mb-3">
<label for="subject" class="form-label">Related Subject</label>
<input type="text" class="form-control" id="subject" aria-
describedby="emailHelp"
name="subject" required>
<div class="invalid-feedback">
required!
</div>
</div>

<div class="mb-3">
<label for="gender" class="form-label">Gender</label>
<select class="form-select" id="gender" name="gender" required>
<option selected disabled value="">--select--</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
<div class="invalid-feedback">
required!
</div>
</div>

132
STI College Naga
<div class="mb-3">
<label for="dob" class="form-label">Date of Birth</label>
<input type="date" class="form-control" id="dob" aria-
describedby="emailHelp" name="dob"
required>
<div class="invalid-feedback">
required!
</div>
</div>
</div>
</div>
<div class="modal-footer">

<button type="button" class="btn btn-primary" id="general-info-btn">

</div>
</div>
</div>

<div class="mb-3">
<label for="phone" class="form-label">Phone number</label>
<input type="tel" class="form-control" id="phone" name="phone"
placeholder="Enter phone number" required>
<div class="valid-feedback">

133
STI College Naga
</div>
<div class="invalid-feedback" id="phone-mdg">
Please enter a valid 10-digit phone number.
</div>
</div>

<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">City</label>
<div class="row">
<div class="col">
<input type="text" class="form-control" id="city"
placeholder="City name"
aria-label="First name" name="city" required>
<div class="invalid-feedback">
required!
</div>
</div>
<div class="col">
<input type="text" class="form-control" id="zip"
placeholder="Zip code"
aria-label="Last name" name="zip" required>
<div class="invalid-feedback">
required!
</div>
</div>
</div>

134
STI College Naga
</div>

135
STI College Naga
class='bx bx-x'></i></button>
</div>
<form class="needs-validation" id="guradian-form" novalidate>
<div class="modal-body">

<div class="container my-3">

136
STI College Naga
</div>
<div class="col">
<input type="text" class="form-control" placeholder="Zip code"
aria-label="Last name" id="gzip" name="gzip" requireds>
<div class="invalid-feedback">
required!
</div>
</div>
</div>
</div>

<div class="mb-3">
<label for="relation" class="form-label">Relation to teacher</label>
<input type="text" class="form-control" id="relation" aria-
describedby="emailHelp"
name="relation" required>
<div class="invalid-feedback">
required!
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
onclick="backToAddressDetail()">
<div><i class='bx bxs-chevrons-left'></i><span>Back</span></div>
</button>
<button type="button" class="btn btn-primary" id="guardian-form-
btn"><span>Submit </span></button>
</div>
</form>
</div>
</div>
</div>

137
STI College Naga
Teacher</h1>
<button type="button" class="close mr-2" data-bs-dismiss="modal" aria-
label="Close"><i
class='bx bx-x'></i></button>
</div>
<form class="needs-validation" id="remove-teacher-form" novalidate>
<div class="modal-body">
<div class="container my-3">

<div class="mb-3">
<label for="teacher-id" class="form-label">Teacher ID</label>
<input type="text" class="form-control" id="teacher-id" aria-
describedby="" required>
<div class="invalid-feedback">
Please provide a valid Teacher ID.
</div>
</div>

</div>
</div>
<div class="modal-footer">

<button type="button" class="btn btn-danger" id="remove-teacher-btn">

<div><span>Delete Teacher</span></div>
</button>
</div>
</form>
</div>
</div>
</div>

<?php include('partials/_sidebar.php') ?>
<input type="hidden" value="2" id="checkFileName">

<main>

138
STI College Naga
<div class="header">
<div class="left">
<h1>Teacher</h1>

</div>

</div>
<div class="bottom-data">

<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item me-1" role="presentation">
<button class="nav-link active " id="addTeacherTab" data-bs-
toggle="tab" data-bs-target="#home"
type="button" role="tab" aria-controls="home" aria-
selected="true">Add Teacher</button>
</li>
<li class="nav-item me-1" role="presentation">
<button class="nav-link" id="showTeacherTab" data-bs-toggle="tab"
data-bs-target="#profile"
type="button" role="tab" aria-controls="profile" aria-selected="false"
onclick="showTeachers()">Show
Teachers</button>
</li>

<li class="nav-item me-1" role="presentation">

<button class="nav-link" id="show-leave-tab" data-bs-toggle="tab" data-
bs-target="#leave-tab"
type="button" role="tab" aria-controls="leave-tab" aria-selected="false"
>Teachers Leave</button>
</li>

</ul>

139
STI College Naga
<h3>Teachers</h3>
<div class="student-btns">
<div class="student-btns">

<div class="dropdown dropdown-center">

<ul class="dropdown-menu">
<li><a class="dropdown-item reset-attendence"
id="add_student_dropdown"
data-bs-toggle="modal" data-bs-
target="#addTeacherModal">Add
Teacher</a></li>
<li><a class="dropdown-item submit-attendence"
id="remove_student_dropdown" data-bs-
toggle="modal"
data-bs-target="#removeStudentModel">Remove
Teacher</a></li>
</ul>
</div>

</div>
</div>
</div>
<hr>
<br>

<div class="container add-remove">

140
STI College Naga
</a>

<a class="removelink" data-bs-toggle="modal" data-bs-

target="#removeStudentModel">
<li class="removeitem">
<i class='bx bxs-user-minus'></i>
<span class="info">
<h3>
Remove
</h3>
<h3>Teacher</h3>
</span>
</li>
</a>
</ul>
</div>

</div>
<br>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-
tab" tabindex="0">
<div class="showAttendence">

<div class="container">
<br>

<div class="attendenceTable" style="display: block;">
<div class="header">
<i class='bx bx-list-ul'></i>
<h3>Teacher List</h3>

<!-- <a href="#" class="excel">

<i class="fa fa-file-excel-o" aria-hidden="true"></i>
<span>EXCEL</span>

141
STI College Naga
</a>

<a href="#" class="report">

</div>
<hr class="text-danger">

<div class="students-table">
<table class="remove-cursor-pointer">
<thead>
<tr>
<th scope="col" class="thead col-2">#</th>
<th scope="col" class="thead col-2">Teacher ID</th>
<th scope="col" class="thead col-5">Name</th>
<th scope="col" class="thead col-3">Action</th>
</tr>
</thead>

</table>
</div>
<div id="dataNotAvailable">

<div class="_flex-container box-hide">

142
STI College Naga
</div>

</div>
<hr class="text-danger">

<div class="d-grid gap-2 d-md-flex justify-content-md-end">

</div>

</div>
</div>

<div class="tab-pane" id="leave-tab" role="tabpanel" aria-

labelledby="leave-tab" tabindex="0">
<?php include('partials/teacher-shared/teachers-leave-tab.php') ?>
</div>

</div>

</main>

</div>

TIMETABLE.PHP

143
STI College Naga
<?php include("../assets/noSessionRedirect.php"); ?>
<?php include("./verifyRoleRedirect.php"); ?>
<?php include('partials/_header.php') ?>
<!DOCTYPE html>
<html lang="en">

<link rel="icon" type="image/x-icon" href="../images/1.png">

<link rel="stylesheet" href="css/bootstrap.css">

</head>

const sections = {
'Kinder': ['Aquamarine', 'Tanzanite'],
'1': ['Diamond', 'Ruby'],
'2': ['Pearl', 'Amethyst'],
'3': ['Jade'],
'4': ['Sapphire'],
'5': ['Zircon'],
'6': ['Peridot']
};

classFilter.addEventListener('change', function () {
const selectedClass = classFilter.value;
const availableSections = sections[selectedClass] || [];

sectionFilter.innerHTML = '<option selected disabled value="">--select--</option>';

availableSections.forEach(section => {
const option = document.createElement('option');
option.value = section.toLowerCase();
option.textContent = section;
sectionFilter.appendChild(option);
});

144
STI College Naga
});
});

</script>

<body>

<div class='toast-container position-fixed text-success bottom-0 end-0 p-3'>

</div>
<button type='button' class='btn-close me-2 m-auto text-danger' data-bs-
dismiss='toast'
aria-label='Close'></button>
</div>
</div>
</div>

<?php include('partials/_sidebar.php') ?>
<input type="hidden" value="7" id="checkFileName">

<main>
<div class="header">
<div class="left">
<h1>Schedules</h1>
</div>
</div>

<div class="orders">

<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-

145
STI College Naga
labelledby="home-tab" tabindex="0">
<div class="container">
<br>

<div class="attendenceTable" style="display: block;">

<div class="header">
<i class='bx bx-receipt'></i>
<h3>Schedules</h3>

</div>
<hr>

<br>
<div class="container timetable-form">
<div class="container" style="display: flex;">
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputPassword6"
class="col-form-
label">  Class   </label>
</div>
<div class="col-auto">
<select class="form-select" aria-label="Default select
example"
id="search-class">
<?php include('partials/select_classes.php') ?>
</select>
</div>
</div>
</div>

<br>
<div class="container" style="display: flex;">
<div class="row g-3 align-items-center">
<div class="col-auto">
<label for="inputPassword6" class="col-form-
label">Section </label>
</div>
<div class="col-auto">
<select class="form-select" aria-label="Default select
example"
id="search-section">
<option value="A">Aquamarine</option>
<option value="B">Tanzanite</option>
<option value="C">Diamond</option>

146
STI College Naga
<option value="D">Ruby</option>
<option value="E">Amethyst</option>
<option value="F">Pearl</option>
<option value="G">Jade</option>
<option value="H">Sapphire</option>
<option value="I">Zircon</option>
<option value="J">Peridot</option>
</select>
</div>
</div>
</div>

<br>

<button class="find" id="findTimeTableBtn"

style="border:none;">
<i class='bx bx-search-alt'></i>
<span>Search</span>
</button>
</div>
</div>

</div>

<br>
</div>
<br>
<div class="box100 _flex-container" style="width: 100%;">
<div class="btn-group row" style="width: 100%;" role="group"
aria-label="Basic example">
<button type="button" class="btn btn-secondary col-auto"
style="border: none;height: 50px;" id="prev-page-

147
STI College Naga
btn">prev</button>
<a class="btn btn-primary _flex-container disabled col-auto"
role="button"
aria-disabled="true" style="height: 50px;"
id="__day__">MONDAY</a>
<button type="button" class="btn btn-secondary col-auto"
style="border: none;height: 50px;" id="next-page-
btn">next</button>
</div>
</div>

<br>
<table class="table table-striped scrollTable" style="width:
100%;">
<thead>
<tr id="headingRow" style=" border-bottom: 2px solid
#FBC02D;">

<th class="tableData" scope="col">Period start</th>
<th class="tableData" scope="col">Period end</th>
<th class="tableData" scope="col">
   Subject   </th>
</tr>
</thead>
<tbody id="timeTable_table1">

</tbody>
</table>
<div class="alert alert-success text-center"
style="outline-top: 1px solid grey;font-size:larger;font-weight:
bold;"
role="alert" id="lunch-alert">

         L   
      U     &nbsp
;   N        &nbs
p;C         H  &n
bsp;      
</div>

148
STI College Naga
<tr style="border:none !important;">

<th class="invisiable" scope="col">Period start</th>
<th class="invisiable" scope="col">Period end</th>
<th class="invisiable" scope="col">

   Subject   </th>
</tr>
</thead>
<tbody id="timeTable_table2">

</tbody>
</table>

<div class="_flex-container box-hide">

<div class="no-data-box">
<div class="no-dataicon">
<i class='bx bx-party'></i>
</div>
<p>Holiday</p>
</div>
</div>

</div>

149
STI College Naga
</button>
</div>

<div class="container last-edited">

<div>
<p>Last edited by <span id="lastEditor"></span> </p>
<small id="editingTime"></small>
</div>
</div>
</div>
</div>
<hr>
</div>
</div>

</div>

</main>

</div>

TEACHER PANEL

DASHBOARD.PHP

<?PHP INCLUDE('PARTIALS/_HEADER.PHP') ?>

<?PHP INCLUDE('PARTIALS/_SIDEBAR.PHP') ?>

150
STI College Naga
<INPUT TYPE="HIDDEN" VALUE="1" ID="CHECKFILENAME">

<DIV CLASS="MODAL FADE" ID="REMINDER-MODAL" TABINDEX="-1" ARIA-

LABELLEDBY="EXAMPLEMODALLABEL" ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
<H1 CLASS="MODAL-TITLE FS-5" ID="EXAMPLEMODALLABEL">ADD
REMINDER</H1>
<BUTTON TYPE="BUTTON" CLASS="CLOSE MR-2" DATA-BS-DISMISS="MODAL"
ARIA-LABEL="CLOSE"><I
CLASS='BX BX-X'></I></BUTTON>
</DIV>
<DIV CLASS="MODAL-BODY">

<DIV CLASS="CONTAINER MR-3 ML-3">

<DIV CLASS="ALERT ALERT-WARNING REMINDER-ERROR" ROLE="ALERT"
STYLE="MIN-HEIGHT: 50PX;DISPLAY: NONE;">
MESSAGE CAN'T BE EMPTY!
</DIV>
<DIV CLASS="MB-3">

<TEXTAREA CLASS="FORM-CONTROL" ID="REMINDER-MSG"
ROWS="3"></TEXTAREA>
</DIV>
</DIV>

</DIV>
<DIV CLASS="MODAL-FOOTER">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-PRIMARY TEXT-CENTER _FLEX-
CONTAINER" ONCLICK="ADDREMINDER()"> <I
CLASS='BX BX-PLUS'></I>&NBSP;<STRONG>ADD</STRONG></BUTTON>
</DIV>
</DIV>
</DIV>
</DIV>

151
STI College Naga
<MAIN>
<DIV CLASS="HEADER">
<DIV CLASS="LEFT">
<H1>DASHBOARD</H1>
<UL CLASS="BREADCRUMB">
<LI><A HREF="#">
ANALYTICS
</A></LI>

</UL>
</DIV>

</DIV>

<UL CLASS="INSIGHTS">
<LI>

<I CLASS='BX BXS-USER'></I>
<SPAN CLASS="INFO">
<H3 CLASS="TEXT-CENTER" ID="TEACHERCOUNT">_ _ _</H3>
<P>TEACHERS</P>
</SPAN>
</LI>
<LI ONCLICK="SHOWSTUDENTLIST()">
<I CLASS='BX BXS-GROUP'></I>
<SPAN CLASS="INFO">
<H3 CLASS="TEXT-CENTER" ID="STUDENTCOUNT">_ _ _</H3>
<P>STUDENTS</P>
</SPAN>
</LI>
<LI ONCLICK="SHOWNOTESLIST()">
<I CLASS='BX BX-BOOK'></I>
<SPAN CLASS="INFO">
<H3 CLASS="TEXT-CENTER" ID="CLASSCOUNT">_ _ _</H3>
<P>NOTES</P>
</SPAN>
</LI>
<LI ONCLICK="SHOWNOTICELIST()">
<I CLASS='BX BXS-BOOKMARK'></I>
<SPAN CLASS="INFO">
<H3 CLASS="TEXT-CENTER" ID="NOTICECOUNT">_ _ _</H3>
<P>NOTICES</P>

152
STI College Naga
</SPAN>
</LI>
</UL>

<DIV CLASS="BOTTOM-DATA">
<DIV CLASS="ORDERS">
<DIV CLASS="HEADER">
<I CLASS='BX BX-RECEIPT'></I>
<H3 ID="TEXT-HEADING">LATEST NOTICES</H3>
<I CLASS='BX BX-FILTER'></I>
<A HREF="NOTICEBOARD.PHP" > <I CLASS='BX BX-PLUS ICON-HOVER-
CIRCLE' ID="PLUSICONNOTIFICATION" STYLE="FONT-SIZE: 30PX;"></I></A>
</DIV>

<TABLE>
<THEAD>
<TR>
<TH>TITLE</TH>
<TH>DATE</TH>
<TH>SENDER</TH>
</TR>
</THEAD>
<TBODY ID="NOTICETABLEBODY">
<TR>
<TD CLASS="USER">
<IMG SRC="../IMAGES/GREEN.PNG">
<P>HOW DO THEY DO IT</P>
</TD>
<TD>14-08-2023</TD>
<TD><SPAN>ARVIND VERMA</SPAN></TD>
</TR>
<TR>
<TD CLASS="USER">
<IMG SRC="../IMAGES/RED.PNG">
<P>YOGESH YADAV</P>
</TD>
<TD>14-08-2023</TD>
<TD><SPAN CLASS="STATUS COMPLAIN">COMPLAIN</SPAN></TD>
</TR>
<TR>
<TD CLASS="USER">
<IMG SRC="../IMAGES/YELLOW.PNG">
<P>SHUBHAM KUMAR</P>
</TD>

153
STI College Naga
<TD>14-08-2023</TD>
<TD><SPAN CLASS="STATUS NOTICE">EVENT</SPAN></TD>
</TR>
</TBODY>
</TABLE>
</DIV>

<DIV CLASS="REMINDERS">
<DIV CLASS="HEADER">
<I CLASS='BX BX-NOTE'></I>
<H3>REMIDERS</H3>

<A DATA-BS-TOGGLE="MODAL" DATA-BS-TARGET="#REMINDER-MODAL">
<I STYLE="FONT-SIZE: 30PX;" CLASS='BX BX-PLUS ICON-HOVER-CIRCLE'></I></A>
</DIV>
<UL CLASS="TASK-LIST" ID="ALL-REMINDERS">

</UL>
</DIV>

</DIV>
<BR>
</MAIN>
</DIV>

<SCRIPT SRC="../ASSETS/JS/DASHBOARD.JS"></SCRIPT>
<?PHP INCLUDE("PARTIALS/_FOOTER.PHP");

ATTENDANCE.PHP

<?PHP INCLUDE('PARTIALS/_HEADER.PHP') ?>

<?PHP INCLUDE('PARTIALS/_SIDEBAR.PHP') ?>
<INPUT TYPE="HIDDEN" VALUE="3" ID="CHECKFILENAME">

154
STI College Naga

<DIV CLASS="CONTENT">

<?PHP INCLUDE("PARTIALS/_NAVBAR.PHP"); ?>

<MAIN>
<DIV CLASS="HEADER">
<DIV CLASS="LEFT">
<H1>ATTENDENCE</H1>
<UL CLASS="BREADCRUMB">
<LI><A HREF="#">

</A></LI>

</UL>
</DIV>

</DIV>
<DIV CLASS="BOTTOM-DATA">

<UL CLASS="NAV NAV-TABS" ID="MYTAB" ROLE="TABLIST">
<LI CLASS="NAV-ITEM" ROLE="PRESENTATION">
<BUTTON CLASS="NAV-LINK ACTIVE " ID="HOME-TAB" DATA-BS-
TOGGLE="TAB" DATA-BS-TARGET="#HOME"
TYPE="BUTTON" ROLE="TAB" ARIA-CONTROLS="HOME" ARIA-
SELECTED="TRUE">TAKE
ATTENDENCE</BUTTON>
</LI>
<LI CLASS="NAV-ITEM" ROLE="PRESENTATION">
<BUTTON CLASS="NAV-LINK SHOWATTENDENCEBTN" ID="PROFILE-TAB"
DATA-BS-TOGGLE="TAB" DATA-BS-TARGET="#PROFILE"
TYPE="BUTTON" ROLE="TAB" ARIA-CONTROLS="PROFILE" ARIA-
SELECTED="FALSE">SHOW
ATTENDENCE</BUTTON>
</LI>

</UL>

<DIV CLASS="TAB-CONTENT">
<DIV CLASS="TAB-PANE ATTENDENCETABLECONTAINER ACTIVE"

155
STI College Naga
ID="HOME" ROLE="TABPANEL" ARIA-LABELLEDBY="HOME-TAB" TABINDEX="0">
<BR>

<DIV CLASS="ATTENDENCETABLE" STYLE="DISPLAY: BLOCK;">
<DIV CLASS="HEADER">
<I CLASS='BX BX-RECEIPT'></I>
<H3>TAKE ATTENDENCE </H3>
<I CLASS='BX BX-FILTER'></I>

</DIV>

<DIV CLASS="CONTAINER" STYLE="DISPLAY: FLEX;">

<DIV CLASS="ROW G-3 ALIGN-ITEMS-CENTER">

<DIV CLASS="COL-AUTO">
<LABEL FOR="INPUTPASSWORD6" CLASS="COL-FORM-
LABEL">&NBSP;CLASS&NBSP; </LABEL>
</DIV>
<DIV CLASS="COL-AUTO">
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT
SELECT EXAMPLE" NAME="CLASS"
ID="CLASSTAKEATTENDENCE">

<?PHP INCLUDE('PARTIALS/SELECT_CLASSES.PHP') ?>

</SELECT>
</DIV>
</DIV>

</DIV>

156
STI College Naga
<BR>
<DIV CLASS="CONTAINER" STYLE="DISPLAY: FLEX;">
<DIV CLASS="ROW G-3 ALIGN-ITEMS-CENTER">
<DIV CLASS="COL-AUTO">
<LABEL FOR="INPUTPASSWORD6" CLASS="COL-FORM-
LABEL">SECTION </LABEL>
</DIV>
<DIV CLASS="COL-AUTO">
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT
SELECT EXAMPLE" NAME="SECTION"
ID="SECTIONTAKEATTENDENCE">

<?PHP INCLUDE('PARTIALS/SELELCT_SECTION.PHP') ?>
</SELECT>
</DIV>
</DIV>
</DIV>
<BR>

</DIV>
<BR>

<HR><BR>
<DIV CLASS="HEADER">
<I CLASS='BX BX-RECEIPT'></I>
<H3>STUDENT LIST </H3>

<DIV CLASS="DROPDOWN DROPDOWN-CENTER">

<UL CLASS="DROPDOWN-MENU">
<LI><A CLASS="DROPDOWN-ITEM RESET-ATTENDENCE">RESET
ATTENDENCE</A></LI>

157
STI College Naga
<LI><A CLASS="DROPDOWN-ITEM SUBMIT-ATTENDENCE"
ID="SUBMIT_ATTENDENCE_DROPDOWN" >SUBMIT ATTENDENCE</A></LI>
</UL>
</DIV>
</DIV>

<HR>

<TABLE>
<THEAD>
<TR>
<TH>#</TH>
<TH>ROLL NO.</TH>
<TH>&NBSP;&NBSP;NAME</TH>
<TH>TOTAL DAYS</TH>
<TH>PRESENT</TH>
<TH>ATTENDENCE</TH>
</TR>
</THEAD>
<TBODY ID="TAKEATTENDENCETABLE">

</TBODY>
</TABLE>

<DIV CLASS="_FLEX-CONTAINER BOX-HIDE" >

</DIV>
<P ID="NO-DATA-MSG"></P>
</DIV>
</DIV>

</DIV>
</DIV>
<HR>

<DIV ID="BUTTONS">
<DIV CLASS="D-GRID GAP-2 D-MD-FLEX JUSTIFY-CONTENT-MD-END"
ID="BOTTOM-BTNS">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-OUTLINE-WARNING"

158
STI College Naga
ID="RESET-ATTENDENCE-BTN">&NBSP;&NBSP;RESET&NBSP;&NBSP;</BUTTON>
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-OUTLINE-SUCCESS"
ID="SUBMIT-ATTENDENCE-BTN">SUBMIT</BUTTON>
</DIV>
</DIV>

</DIV>
<DIV CLASS="TAB-PANE" ID="PROFILE" ROLE="TABPANEL" ARIA-
LABELLEDBY="PROFILE-TAB" TABINDEX="0">
<DIV CLASS="SHOWATTENDENCE">
<BR>
<DIV CLASS="HEADER">
<I CLASS='BX BX-RECEIPT'></I>
<H3>INFORMATION </H3>

</DIV>
</DIV>

</DIV>
<HR>
<BR>

<DIV CLASS="CONTAINER" STYLE="DISPLAY: FLEX;">

<DIV CLASS="ROW G-3 ALIGN-ITEMS-CENTER">

<DIV CLASS="COL-AUTO">
<LABEL FOR="INPUTPASSWORD6" CLASS="COL-FORM-
LABEL">&NBSP;CLASS&NBSP; </LABEL>
</DIV>
<DIV CLASS="COL-AUTO">
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT
SELECT EXAMPLE" ID="SHOWATTENDENCECLASS">

<!-- <OPTION>11</OPTION>
<OPTION>10</OPTION>
<OPTION>9</OPTION>
<OPTION>8</OPTION>
<OPTION>7</OPTION>
<OPTION>6</OPTION>
<OPTION>5</OPTION>
<OPTION>4</OPTION>

159
STI College Naga
<OPTION>3</OPTION>
<OPTION>2</OPTION>
<OPTION>1</OPTION>
<OPTION>PG</OPTION>
<OPTION>LKG</OPTION>
<OPTION>UKG</OPTION> -->
<?PHP INCLUDE('PARTIALS/SELECT_CLASSES.PHP') ?>

</SELECT>
</DIV>
</DIV>

</DIV>
<BR>
<DIV CLASS="CONTAINER" STYLE="DISPLAY: FLEX;">
<DIV CLASS="ROW G-3 ALIGN-ITEMS-CENTER">
<DIV CLASS="COL-AUTO">
<LABEL FOR="INPUTPASSWORD6" CLASS="COL-FORM-
LABEL">SECTION </LABEL>
</DIV>
<DIV CLASS="COL-AUTO">
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT
SELECT EXAMPLE" ID="SHOWATTENDENCESECTION">

<?PHP INCLUDE('PARTIALS/SELELCT_SECTION.PHP') ?>
</SELECT>
</DIV>
</DIV>
</DIV>
<BR>

<DIV CLASS="CONTAINER" STYLE="DISPLAY: FLEX;">

<DIV CLASS="INVALID-FEEDBACK INVALID-DATE" ID="EDIT-

INVALID-FILE">
PLEASE CHOOSE DATE HERE!

160
STI College Naga
</DIV>

</DIV>
</DIV>
</DIV>

<BR>

</DIV>
<HR>

<DIV CLASS="CONTAINER">
<BR>

<DIV CLASS="ATTENDENCETABLE" STYLE="DISPLAY: BLOCK;">
<DIV CLASS="HEADER">
<I CLASS='BX BX-RECEIPT'></I>
<H3>ATTENDENCE SHEET</H3>

<!-- <A HREF="#" CLASS="EXCEL">

<I CLASS="FA FA-FILE-EXCEL-O" ARIA-
HIDDEN="TRUE"></I>
<SPAN>EXCEL</SPAN>
</A>

<A HREF="#" CLASS="REPORT">

</DIV>
<HR CLASS="TEXT-DANGER">

<TABLE>
<THEAD>
<TR>
<TH>#</TH>
<TH>ROLL NO.</TH>
<TH>&NBSP;&NBSP;NAME</TH>

161
STI College Naga
<TH>ATTENDENCE</TH>
</TR>
</THEAD>
<TBODY ID="SHOWATTENDENCETABLEBODY">

</TBODY>
</TABLE>
<DIV ID="BOXFORNODATA">

</DIV>

</DIV>
<HR CLASS="TEXT-DANGER">

<DIV CLASS="D-GRID GAP-2 D-MD-FLEX JUSTIFY-CONTENT-MD-

END">
<DIV CLASS="BTN-GROUP" ROLE="GROUP" ARIA-LABEL="BASIC
EXAMPLE">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-SECONDARY"
ID="PREVBTN">PREV</BUTTON>
<A CLASS="BTN BTN-SECONDARY DISABLED" ROLE="BUTTON"
ARIA-DISABLED="TRUE" ID="PAGECOUNT">1</A>
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-SECONDARY"
ID="NEXTBTN">NEXT</BUTTON>
</DIV>
</DIV>

</DIV>

</DIV>
</DIV>

</DIV>

</MAIN>

</DIV>

162
STI College Naga
MARKS.PHP

<?PHP INCLUDE('PARTIALS/_HEADER.PHP') ?>

<DIV CLASS="OFFCANVAS OFFCANVAS-END" TABINDEX="-1"
ID="MARKSHEEROFFCANVAS" ARIA-LABELLEDBY="OFFCANVASRIGHTLABEL">
<DIV CLASS="OFFCANVAS-HEADER">
<H5 CLASS="OFFCANVAS-TITLE" ID="OFFCANVASRIGHTLABEL"> <I CLASS='BX BX-
LIST-UL'></I> &NBSP;STUDENTS RESULT LIST
</H5>
<BUTTON TYPE="BUTTON" ID="CLOSEEXAMMARKTABLE" CLASS="CLOSE MR-2"><I
CLASS='BX BX-X'></I></BUTTON>
</DIV>
<DIV CLASS="OFFCANVAS-BODY SCROLLABLE" STYLE="HEIGHT: 100%;MIN-HEIGHT:
MAX-CONTENT;OVERFLOW-Y: SCROLL;">
<DIV>
<DIV CLASS="STUDENTS-TABLE">
<TABLE CLASS="TABLE TABLE-BORDERED TABLE-STRIPED BORDER-SUCCESS">
<THEAD>
<TR>
<TH SCOPE="COL">#</TH>
<TH SCOPE="COL">ROLL NO.</TH>
<TH SCOPE="COL">NAME</TH>
<TH SCOPE="COL">OBTAINED</TH>

</TR>
</THEAD>
<TBODY ID="RESULTTABLE">

</TBODY>
</TABLE>
</DIV>

<DIV CLASS="DATANOTAVAILABLE" ID="NOMARKSAVAILABLE">

<DIV CLASS="_FLEX-CONTAINER BOX-HIDE">

<DIV CLASS="NO-DATA-BOX">
<DIV CLASS="NO-DATAICON">
<I CLASS='BX BX-DATA'></I>
</DIV>
<P>NO RECORD</P>
</DIV>
</DIV>

163
STI College Naga
</DIV>
<BR><BR><BR>
</DIV>

</DIV>
</DIV>

<DIV CLASS="MODAL" STYLE="Z-INDEX: 2000;" ID="ADDSTUDENTMODEL" TABINDEX="-

1" ARIA-LABELLEDBY="EXAMPLEMODALLABEL" ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
<H1 CLASS="MODAL-TITLE FS-5" ID="EXAMPLEMODALLABEL">UPLOAD
RESULT</H1>
<BUTTON TYPE="BUTTON" CLASS="CLOSE MR-2" DATA-BS-DISMISS="MODAL"
ARIA-LABEL="CLOSE"><I CLASS='BX BX-X'></I></BUTTON>
</DIV>

<FORM CLASS="NEEDS-VALIDATION" ID="CREATE-EXAM-FORM" NOVALIDATE>

<DIV CLASS="MB-3">
<LABEL FOR="TITLE" CLASS="FORM-LABEL">TITLE</LABEL>
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL" ID="EXAM-TITLE"
NAME="TITLE" ARIA-DESCRIBEDBY="EMAILHELP" REQUIRED>
<DIV CLASS="INVALID-FEEDBACK INVALID-EXAM-TITLE">
PLEASE CHOOSE A TITLE.
</DIV>
</DIV>

<DIV CLASS="ROW MB-3" STYLE="">

<DIV CLASS="COL-MD-6">
<LABEL FOR="CLASS" CLASS="FORM-LABEL">CLASS</LABEL>
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT SELECT
EXAMPLE" ID="EXAM-CLASS" NAME="CLASS" STYLE="WIDTH: 100% !IMPORTANT"
REQUIRED>
<?PHP INCLUDE('PARTIALS/SELECT_CLASSES.PHP') ?>

164
STI College Naga
</SELECT>
<DIV CLASS="INVALID-FEEDBACK INVALID-EXAM-CLASS">
PLEASE CHOOSE A CLASS.
</DIV>
</DIV>

<DIV CLASS="COL-MD-6">
<LABEL FOR="SECTION" CLASS="FORM-LABEL">SECTION</LABEL>
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT SELECT
EXAMPLE" ID="EXAM-SECTION" NAME="SECTION" STYLE="WIDTH: 100% !IMPORTANT"
REQUIRED>
<?PHP INCLUDE('PARTIALS/SELELCT_SECTION.PHP') ?>
</SELECT>
<DIV ID="VALIDATIONSERVER04FEEDBACK" CLASS="INVALID-
FEEDBACK INVALID-EXAM-SECTION">
PLEASE SELECT A SUBJECT.
</DIV>
</DIV>
</DIV>

<DIV CLASS="ROW MB-3" STYLE="">

<DIV CLASS="COL-MD-6">
<LABEL FOR="TOTAL" CLASS="FORM-LABEL">TOTAL
MARKS</LABEL>
<INPUT TYPE="NUMBER" CLASS="FORM-CONTROL" ID="TOTAL-
MARKS" NAME="TOTAL" ARIA-DESCRIBEDBY="EMAILHELP" REQUIRED>
<DIV CLASS="INVALID-FEEDBACK INVALID-TOTAL-MARKS">
INVALID TOTAL MARSKS!
</DIV>
</DIV>

<DIV CLASS="COL-MD-6">
<LABEL FOR="PASSING" CLASS="FORM-LABEL">PASSING
MARKS</LABEL>
<INPUT TYPE="NUMBER" CLASS="FORM-CONTROL" ID="PASSING-
MARKS" ARIA-DESCRIBEDBY="EMAILHELP" NAME="PASSING">
<DIV CLASS="INVALID-FEEDBACK INVALID-PASSING-MARKS">
INVALID PASSING MARKS!
</DIV>
</DIV>

<DIV CLASS="INVALID-FEEDBACK PASSINGGREATERTOTALERROR">

PASSING MARKS MUST LESS THAN TOTAL MARKS!
</DIV>
</DIV>

165
STI College Naga
<DIV CLASS="MB-3">
<LABEL FOR="SUBJECT" CLASS="FORM-LABEL">SUBJECT</LABEL>
<SELECT CLASS="FORM-SELECT" NAME="SUBJECT" ID="EXAM-SUBJECT-
LIST" ARIA-LABEL="DEFAULT SELECT EXAMPLE" REQUIRED>

</SELECT>
<DIV CLASS="INVALID-FEEDBACK INVALID-EXAM-SUBJECT-LIST">
PLEASE SELECT SUBJECT.
</DIV>
</DIV>

</DIV>
</DIV>
<DIV CLASS="MODAL-FOOTER">

<BUTTON TYPE="BUTTON" CLASS="BTN BTN-PRIMARY" ID="CONTINUE-

BTN">
<DIV><I CLASS='BX
BXS-CHEVRONS-RIGHT'></I><SPAN>CONTINUE</SPAN></DIV>
</BUTTON>
</DIV>

</FORM>
</DIV>
</DIV>
</DIV>

<?PHP INCLUDE('PARTIALS/_SIDEBAR.PHP') ?>
<INPUT TYPE="HIDDEN" VALUE="8" ID="CHECKFILENAME">

<MAIN>
<DIV CLASS="HEADER">
<DIV CLASS="LEFT">
<H1>MARKS</H1>
<!-- <UL CLASS="BREADCRUMB">

166
STI College Naga
<LI><A HREF="#">
</A></LI>
</UL> -->
</DIV>

</DIV>
<DIV CLASS="BOTTOM-DATA">

<UL CLASS="NAV NAV-TABS" ID="MYTAB" ROLE="TABLIST">
<LI CLASS="NAV-ITEM" ROLE="PRESENTATION">
<BUTTON CLASS="NAV-LINK ACTIVE " ID="HOME-TAB" DATA-BS-
TOGGLE="TAB" DATA-BS-TARGET="#HOME" TYPE="BUTTON" ROLE="TAB" ARIA-
CONTROLS="HOME" ARIA-SELECTED="TRUE">SEND MARKS</BUTTON>
</LI>
<LI CLASS="NAV-ITEM" ROLE="PRESENTATION">
<BUTTON CLASS="NAV-LINK VIEW-MARKS-TAB" ID="PROFILE-TAB" DATA-
BS-TOGGLE="TAB" DATA-BS-TARGET="#PROFILE" TYPE="BUTTON" ROLE="TAB" ARIA-
CONTROLS="PROFILE" ARIA-SELECTED="FALSE">VIEW
MARKS</BUTTON>
</LI>

</UL>

<DIV CLASS="TAB-CONTENT">
<DIV CLASS="TAB-PANE ACTIVE" ID="HOME" ROLE="TABPANEL" ARIA-
LABELLEDBY="HOME-TAB" TABINDEX="0">
<BR>

<DIV CLASS="ATTENDENCETABLE" STYLE="DISPLAY: BLOCK;">
<DIV CLASS="HEADER">
<I CLASS='BX BX-RECEIPT'></I>
<H3>SEND MARKS</H3>
<DIV CLASS="STUDENT-BTNS">

<A CLASS="ADD-BTNS"> <I CLASS='BX BX-FILTER'></I></A>

</DIV>
</DIV>
<HR>

<DIV CLASS="CONTAINER ADD-REMOVE"

ID="UPLOADMARKSJUMBOBTN">

167
STI College Naga
<BR>
<UL CLASS="INSIGHTS">
<A CLASS="ADDLINK" DATA-BS-TOGGLE="MODAL" DATA-BS-
TARGET="#ADDSTUDENTMODEL" ID="SHOWUPLOADRESULTDIALOG">
<LI CLASS="ADDITEM">

<I CLASS='BX BX-UPLOAD'></I>
<SPAN CLASS="INFO">
<H3>
SEND
</H3>
<H3>MARKS</H3>
</SPAN>
</LI>
</A>

</UL>
</DIV>

<DIV CLASS="CONTAINER UPLOAD-MARKS-HIDER">

<BUTTON TYPE="BUTTON" CLASS="BTN BTN-INFO"

ID="BACKTODIALOGBTN">BACK</BUTTON>

</DIV>
<HR CLASS="TEXT-DANGER">

<DIV CLASS="STUDENTS-TABLE">
<TABLE CLASS="REMOVE-CURSOR-POINTER
REMOVE_HOVER_TABLE">
<THEAD ID="UPLOADTABLEHEAD">
<TR>
<TH SCOPE="COL" CLASS="THEAD COL-1">#</TH>
<TH SCOPE="COL" CLASS="THEAD COL-2">ROLL
NO</TH>
<TH SCOPE="COL" CLASS="THEAD

168
STI College Naga
COL-4">NAME</TH>
<TH SCOPE="COL" CLASS="THEAD COL-2">TOTAL
MARKS</TH>
<TH SCOPE="COL" CLASS="THEAD COL-2">OBTAINED
MARKS</TH>
</TR>
</THEAD>

</TBODY>
</TABLE>
</DIV>

</DIV>

<DIV CLASS="_FLEX-CONTAINER BOX-HIDE">

</DIV>

<HR>

</DIV>
<BR>
<HR>
</DIV>

</DIV>
<DIV CLASS="TAB-PANE" ID="PROFILE" ROLE="TABPANEL" ARIA-

169
STI College Naga
LABELLEDBY="PROFILE-TAB" TABINDEX="0">
<DIV CLASS="SHOWATTENDENCE">
<BR>
<DIV CLASS="HEADER">
<I CLASS='BX BX-RECEIPT'></I>
<H3 ID="H11">INFORMATION </H3>

</DIV>
<BR>
<DIV CLASS="CONTAINER" STYLE="DISPLAY: FLEX;">

<DIV CLASS="ROW G-3 ALIGN-ITEMS-CENTER">

<DIV CLASS="COL-AUTO">
<LABEL FOR="INPUTPASSWORD6" CLASS="COL-FORM-
LABEL">&NBSP;CLASS&NBSP; </LABEL>
</DIV>
<DIV CLASS="COL-AUTO">
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT
SELECT EXAMPLE" NAME="CLASS" ID="EXAMCLASS_FIND">
<?PHP INCLUDE('PARTIALS/SELECT_CLASSES.PHP') ?>
</SELECT>
</DIV>
</DIV>

</DIV>
<BR>
<DIV CLASS="CONTAINER" STYLE="DISPLAY: FLEX;">
<DIV CLASS="ROW G-3 ALIGN-ITEMS-CENTER">
<DIV CLASS="COL-AUTO">
<LABEL FOR="INPUTPASSWORD6" CLASS="COL-FORM-
LABEL">SECTION </LABEL>
</DIV>
<DIV CLASS="COL-AUTO">
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT
SELECT EXAMPLE" NAME="SECTION" ID="EXAMSECTION_FIND">
<?PHP INCLUDE('PARTIALS/SELELCT_SECTION.PHP') ?>
</SELECT>
</DIV>
</DIV>
</DIV>
<BR>

<DIV CLASS="CONTAINER" STYLE="DISPLAY: FLEX;">

<DIV CLASS="ROW G-3 ALIGN-ITEMS-CENTER">
<DIV CLASS="COL-AUTO">
<LABEL FOR="INPUTPASSWORD6" CLASS="COL-FORM-

170
STI College Naga
LABEL">SESSION</LABEL>
</DIV>
<DIV CLASS="COL-AUTO">
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT
SELECT EXAMPLE" NAME="SECTION" ID="SELECT-SESSION">

</SELECT>
</DIV>
</DIV>
</DIV>
<BR>

<DIV CLASS="CONTAINER">
<A CLASS="FIND" ID="EXAM_FINDBTN">
<I CLASS='BX BX-SEARCH-ALT'></I>
<SPAN>SEARCH</SPAN>
</A>

</DIV>
<BR>

<HR>

<BR>
<DIV CLASS="HEADER">
<I CLASS='BX BX-RECEIPT'></I>
<H3>ACTIVITIES/EXAM/ASSIGNMENT</H3>

</DIV>

</DIV>

<DIV CLASS="DATANOTAVAILABLE" ID="NORECORDAVAILABLE">

<DIV CLASS="_FLEX-CONTAINER BOX-HIDE">

<DIV CLASS="NO-DATA-BOX">
<DIV CLASS="NO-DATAICON">
<I CLASS='BX BX-DATA'></I>
</DIV>
<P>NO RECORD</P>

171
STI College Naga
</DIV>
</DIV>

</DIV>
<HR>

</DIV>
</DIV>

</DIV>

</MAIN>

</DIV>
<SPAN ID="HIDDENBOX" STYLE="DISPLAY:NONE;WIDTH:0PX;HEIGHT:0PX;"></SPAN>

NOTES.PHP

<?PHP INCLUDE('PARTIALS/_HEADER.PHP') ?>

<DIV CLASS="MODAL MODAL-MD" STYLE="Z-INDEX: 2000;" ID="UPLOAD-NOTES"
TABINDEX="-1" ARIA-LABELLEDBY="EXAMPLEMODALLABEL"
ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
<H1 CLASS="MODAL-TITLE FS-5" ID="EXAMPLEMODALLABEL">UPLOAD
NOTES</H1>
<BUTTON TYPE="BUTTON" CLASS="CLOSE MR-2" DATA-BS-DISMISS="MODAL"
ARIA-LABEL="CLOSE"><I
CLASS='BX BX-X'></I></BUTTON>
</DIV>
<FORM CLASS="NEEDS-VALIDATION" ID="UPLOADNOTESFORM" NOVALIDATE>

172
STI College Naga
<DIV CLASS="ROW" STYLE="">
<DIV CLASS="COL-MD-5">
<LABEL FOR="CLASS" CLASS="FORM-LABEL">CLASS</LABEL>
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT SELECT
EXAMPLE" ID="CLASSOPTIONS"
NAME="CLASS" STYLE="WIDTH: 100% !IMPORTANT" REQUIRED>

<?PHP INCLUDE('PARTIALS/SELECT_CLASSES.PHP') ?>

</SELECT>
</DIV>

<DIV CLASS="COL-MD-7">
<LABEL FOR="SUBJECTLIST"
CLASS="FORM-LABEL">SUBJECT</LABEL>
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT SELECT
EXAMPLE" ID="SUBJECTLIST"
NAME="SUBJECT" STYLE="WIDTH: 100% !IMPORTANT" REQUIRED>
</SELECT>
<DIV ID="VALIDATIONSERVER04FEEDBACK" CLASS="INVALID-
FEEDBACK">
PLEASE SELECT A VALID SUBJECT.
</DIV>
</DIV>
</DIV>

<DIV CLASS="MB-3 MT-3">

<LABEL FOR="EXAMPLEINPUTEMAIL1" CLASS="FORM-
LABEL">TITLE</LABEL>
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL"
ID="EXAMPLEINPUTEMAIL1" ARIA-DESCRIBEDBY="EMAILHELP"
NAME="TITLE" REQUIRED>
<DIV ID="WRONG-TITLE" CLASS="INVALID-FEEDBACK">
PLEASE SELECT A VALID TITLE.
</DIV>
</DIV>

<DIV CLASS="MB-3">
<LABEL FOR="EXAMPLEFORMCONTROLTEXTAREA1" CLASS="FORM-
LABEL">COMMENT</LABEL>
<TEXTAREA CLASS="FORM-CONTROL" ID="COMMENT" ROWS="2"
NAME="COMMENT" REQUIRED></TEXTAREA>
<DIV ID="WRONG-COMMENT" CLASS="INVALID-FEEDBACK">
THIS FIELD IS REQUIRED.
</DIV>

173
STI College Naga
</DIV>

<DIV CLASS="MB-2">
<LABEL FOR="FORMFILE" CLASS="FORM-LABEL">UPLOAD FILE &NBSP;
<SMALL>(MAX-SIZE
200MB)</SMALL></LABEL>
<INPUT CLASS="FORM-CONTROL" TYPE="FILE" ID="FORMFILE"
NAME="FILE"
ACCEPT=".PDF, .PNG, .DOC, .JPG, .JPEG, .ZIP, .TAR, .GZ" REQUIRED>
<DIV ID="WRONG-COMMENT" CLASS="INVALID-FEEDBACK FILE-SIZE-
ERROR">
FILE IS TOO LARGE ALLOWED LIMIT IS 200 MB!
</DIV>
</DIV>

<DIV CLASS="PROGRESS-BOX MB-0" STYLE="HEIGHT: 15PX;">

</DIV>
</DIV>
<DIV CLASS="MODAL-FOOTER">

<BUTTON TYPE="BUTTON" CLASS="BTN BTN-PRIMARY"

ID="UPLOADNOTES">
<DIV><I CLASS='BX BXS-CLOUD-UPLOAD'></I>&NBSP;&NBSP;<SPAN>
UPLOAD</SPAN></DIV>
</BUTTON>
</DIV>

</FORM>
</DIV>
</DIV>
</DIV>

174
STI College Naga
<DIV CLASS="MODAL FADE" ID="EDIT-CONFIRMATION-MODAL" TABINDEX="-1" ARIA-
LABELLEDBY="EXAMPLEMODALLABEL"
ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
</DIV>
<DIV CLASS="MODAL-BODY">
<STRONG>DO YOU REALLY WANT TO EDIT THIS NOTE?</STRONG>

<BR><BR>
<DIV CLASS="PROGRESS-BOX MB-0" STYLE="HEIGHT: 15PX;">
<DIV CLASS="PROGRESS-BAR-HIDER PROGRESS-BAR-HIDER1">
<DIV CLASS="PROGRESS" ROLE="PROGRESSBAR" ARIA-
LABEL="ANIMATED STRIPED EXAMPLE"
ARIA-VALUENOW="75" ARIA-VALUEMIN="0" ARIA-
VALUEMAX="100">
<DIV CLASS="PROGRESS-BAR PROGRESS-POINTER PROGRESS-BAR-
STRIPED PROGRESS-BAR-ANIMATED "
ID="PROGRESS-POINTER">
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>
<DIV CLASS="MODAL-FOOTER">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-SECONDARY" DATA-BS-
DISMISS="MODAL">CLOSE</BUTTON>
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-DANGER" ID="CONFIRM-EDIT-
BTN">EDIT</BUTTON>
</DIV>
</DIV>
</DIV>
</DIV>

175
STI College Naga
<DIV CLASS="MODAL-FOOTER">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-SECONDARY" DATA-BS-
DISMISS="MODAL">CLOSE</BUTTON>
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-DANGER"
ONCLICK="DELETENOTE()">DELETE</BUTTON>
</DIV>
</DIV>
</DIV>
</DIV>


<DIV CLASS="MODAL FADE" ID="SHOWNOTESINFORMATION" DATA-BS-
BACKDROP="STATIC" DATA-BS-KEYBOARD="FALSE" TABINDEX="-1"
ARIA-LABELLEDBY="STATICBACKDROPLABEL" ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-SCROLLABLE">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
<H1 CLASS="MODAL-TITLE FS-5" ID="SHOWFULLTITLE"></H1>
<BUTTON TYPE="BUTTON" CLASS="CLOSE MR-2" DATA-BS-DISMISS="MODAL"
ARIA-LABEL="CLOSE"><I
CLASS='BX BX-X'></I></BUTTON>
</DIV>
<DIV CLASS="MODAL-BODY">
<DIV CLASS="CONTAINER">
<P ID="SHOWFULLCOMMENT"></P>
<BR>

</DIV>
</DIV>
<DIV CLASS="MODAL-FOOTER">
<A CLASS="BTN BTN-WARNING VIEW-RESULT-BTN" TARGET="_BLANK"
ID="VIEW_FILE_BTN">
<I CLASS='BX BX-SHOW-ALT'></I> &NBSP;&NBSP;<SPAN>VIEW</SPAN>
</A>
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-SECONDARY" DATA-BS-
DISMISS="MODAL">CLOSE</BUTTON>
</DIV>
</DIV>
</DIV>
</DIV>

<DIV CLASS="MODAL MODAL-MD" STYLE="Z-INDEX: 2000;" ID="EDIT-UPLOADED-NOTES"
TABINDEX="-1"
ARIA-LABELLEDBY="EXAMPLEMODALLABEL" ARIA-HIDDEN="TRUE">

176
STI College Naga
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED MODAL-DIALOG-
SCROLLABLE">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">

<H1 CLASS="MODAL-TITLE FS-5" ID="EXAMPLEMODALLABEL">EDIT

UPLOADED NOTES</H1>
<BUTTON TYPE="BUTTON" CLASS="CLOSE MR-2" DATA-BS-DISMISS="MODAL"
ARIA-LABEL="CLOSE"><I
CLASS='BX BX-X'></I></BUTTON>
</DIV>

<FORM CLASS="NEEDS-VALIDATION" ID="EDITNOTESFORM" NOVALIDATE>

<DIV CLASS="MODAL-BODY PB-0">

<DIV CLASS="ROW" STYLE="">

<DIV CLASS="COL-MD-5">
<LABEL FOR="CLASS" CLASS="FORM-LABEL">CLASS</LABEL>
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT SELECT
EXAMPLE" ID="EDITCLASSOPTION"
NAME="CLASS" STYLE="WIDTH: 100% !IMPORTANT" REQUIRED>
<OPTION VALUE="KINDER">KINDER</OPTION>
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="3">3</OPTION>
<OPTION VALUE="4">4</OPTION>
<OPTION VALUE="5">5</OPTION>
<OPTION VALUE="6">6</OPTION>

</SELECT>
</DIV>

<DIV CLASS="COL-MD-7">
<LABEL FOR="SUBJECTLIST"
CLASS="FORM-LABEL">SUBJECT</LABEL>
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT SELECT
EXAMPLE" ID="EDITSUBJECTLIST"
NAME="SUBJECT" STYLE="WIDTH: 100% !IMPORTANT" REQUIRED>
</SELECT>
<DIV ID="VALIDATIONSERVER04FEEDBACK" CLASS="INVALID-
FEEDBACK">
PLEASE SELECT A VALID SUBJECT.
</DIV>
</DIV>

177
STI College Naga
</DIV>

<DIV CLASS="MB-3 MT-3">

<LABEL FOR="EXAMPLEINPUTEMAIL1" CLASS="FORM-
LABEL">TITLE</LABEL>
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL EDITTITLE"
ID="EDITTITLE"
ARIA-DESCRIBEDBY="EMAILHELP" NAME="TITLE" REQUIRED>
<DIV ID="WRONG-TITLE" CLASS="INVALID-FEEDBACK">
PLEASE SELECT A VALID TITLE.
</DIV>
</DIV>

<DIV CLASS="MB-3">
<LABEL FOR="EXAMPLEFORMCONTROLTEXTAREA1" CLASS="FORM-
LABEL">COMMENT</LABEL>
<TEXTAREA CLASS="FORM-CONTROL EDITED-COMMENT"
ID="COMMENT" ROWS="2" NAME="COMMENT"
REQUIRED></TEXTAREA>
<DIV ID="WRONG-COMMENT" CLASS="INVALID-FEEDBACK">
THIS FIELD IS REQUIRED.
</DIV>
</DIV>

<A CLASS="MX-3" ID="VIEW-CURRENT-FILE" TARGET="_BLANK">

<I CLASS='MT-1 BX BX-SHOW-ALT' STYLE="COLOR:

BLACK;CURSOR:POINTER;"></I>

178
STI College Naga
</DIV>
</A>
<P ID="EDIT-FILE-ERRORDISPLAY"></P>
<DIV CLASS="INVALID-FEEDBACK" ID="EDIT-INVALID-FILE">
FILE IS TOO LARGE ALLOWED LIMIT IS 200 MB!
</DIV>

</DIV>
<DIV CLASS="MT-3" STYLE="DISPLAY: FLEX; FLEX-DIRECTION: ROW-
REVERSE;">
<SMALL CLASS="LAST-EDITOR MB-0"></SMALL>
</DIV>

</DIV>
</DIV>
<DIV CLASS="MODAL-FOOTER PT-0">

<BUTTON TYPE="BUTTON" CLASS="BTN BTN-PRIMARY" ID="EDITNOTE">

</FORM>
</DIV>
</DIV>
</DIV>


<?PHP INCLUDE('PARTIALS/_SIDEBAR.PHP') ?>
<INPUT TYPE="HIDDEN" VALUE="7" ID="CHECKFILENAME">

<MAIN>
<DIV CLASS="HEADER">
<DIV CLASS="LEFT">
<H1>NOTES</H1>

179
STI College Naga
</DIV>
</DIV>
<DIV CLASS="BOTTOM-DATA">

<DIV CLASS="TAB-PANE ACTIVE" ID="PROFILE" ROLE="TABPANEL" ARIA-

LABELLEDBY="PROFILE-TAB"
TABINDEX="0">
<DIV CLASS="SHOWATTENDENCE">
<BR>
<DIV CLASS="HEADER">
<I CLASS='BX BX-RECEIPT'></I>
<H3>NOTES </H3>

<A CLASS="UPLOAD-SYLLABUS" ID="SHOWUPLOADDIALOG">

<I CLASS='BX BX-CLOUD-UPLOAD'></I>
<SPAN>UPLOAD NOTES</SPAN>
</A>
</DIV>

<DIV CLASS="ROW G-3 ALIGN-ITEMS-CENTER">

<DIV CLASS="COL-AUTO">
<LABEL FOR="INPUTPASSWORD6" CLASS="COL-FORM-
LABEL">CLASS </LABEL>
</DIV>
<DIV CLASS="COL-AUTO">
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT
SELECT EXAMPLE"
ID="NOTES-CLASS"
<?PHP INCLUDE('PARTIALS/SELECT_CLASSES.PHP') ?>
</SELECT>
</DIV>
</DIV>
</DIV>
<BR>
<DIV CLASS="CONTAINER">
<A CLASS="FIND" ID="FIND-NOTES-BTN">
<I CLASS='BX BX-SEARCH-ALT'></I>
<SPAN>SEARCH</SPAN>
</A>

180
STI College Naga
</DIV>

<DIV CLASS="ROW ROW-COLS-1 ROW-COLS-MD-2 ROW-COLS-LG-3

ROW-COLS-XL-4 ROW-COLS-SM-2 G-4"
ID="NOTES">

</DIV>
</DIV>

</DIV>

<HR CLASS="TEXT-DANGER">

<DIV CLASS="D-GRID GAP-2 D-MD-FLEX JUSTIFY-CONTENT-MD-END">

</DIV>

181
STI College Naga
</MAIN>

</DIV>

NOTICEBOARD.PHP

<?PHP INCLUDE('PARTIALS/_HEADER.PHP') ?>

<DIV CLASS="MODAL FADE" ID="STATICBACKDROP" DATA-BS-BACKDROP="STATIC"

DATA-BS-KEYBOARD="FALSE" TABINDEX="-1"
ARIA-LABELLEDBY="STATICBACKDROPLABEL" ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-SCROLLABLE">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
<H1 CLASS="MODAL-TITLE FS-5" ID="SHOWFULLTITLE"></H1>
<BUTTON TYPE="BUTTON" CLASS="CLOSE MR-2" DATA-BS-DISMISS="MODAL"
ARIA-LABEL="CLOSE"><I
CLASS='BX BX-X'></I></BUTTON>
</DIV>
<DIV CLASS="MODAL-BODY">
<DIV CLASS="CONTAINER">
<P ID="SHOWFULLBODY"></P>
</DIV>
</DIV>
<DIV CLASS="MODAL-FOOTER">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-SECONDARY" DATA-BS-
DISMISS="MODAL">CLOSE</BUTTON>
</DIV>
</DIV>
</DIV>
</DIV>

<DIV CLASS="MODAL" STYLE="Z-INDEX: 2000;" ID="EDIT-NOTICE" TABINDEX="-1" ARIA-

LABELLEDBY="EXAMPLEMODALLABEL"
ARIA-HIDDEN="TRUE">

182
STI College Naga
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
<H1 CLASS="MODAL-TITLE FS-5" ID="EXAMPLEMODALLABEL">EDIT
NOTICE</H1>
<BUTTON TYPE="BUTTON" CLASS="CLOSE MR-2" DATA-BS-DISMISS="MODAL"
ARIA-LABEL="CLOSE"><I
CLASS='BX BX-X'></I></BUTTON>
</DIV>
<FORM CLASS="NEEDS-VALIDATION" ID="EDIT-NOTICE-FORM" NOVALIDATE>
<DIV CLASS="MODAL-BODY">

<DIV CLASS="M-3">
<DIV CLASS="NOTICEFORM">
<DIV CLASS="MB-3">
<LABEL FOR="TITLE" CLASS="FORM-LABEL">NOTICE
TITLE</LABEL>
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL" ID="EDIT-NOTICE-
TITLE" NAME="TITLE"
PLACEHOLDER="TITLE OF NOTICE" REQUIRED>
<DIV CLASS="INVALID-FEEDBACK" ID="EDIT-INVALID-TITLE">
YOU MUST HAVE TO ADD TITLE!
</DIV>
</DIV>

<DIV CLASS="MB-3">
<LABEL FOR="BODY" CLASS="FORM-LABEL">NOTICE
BODY</LABEL>
<TEXTAREA CLASS="FORM-CONTROL" ID="EDIT-NOTICE-BODY"
NAME="BODY" ROWS="5"></TEXTAREA>
<DIV CLASS="INVALID-FEEDBACK" ID="EDIT-INVALID-BODY">
EITHER NOTICE BODY OR ANY FILE IS REQUIRED!
</DIV>
</DIV>

183
STI College Naga
<A CLASS="MX-3" ID="VIEW-CURRENT-FILE" TARGET="_BLANK">
<DIV CLASS="BTN BTN-PRIMARY UPLOAD-BTN EDIT-VIEW-BTN"
ID="EDIT-VIEW-BTN">

<I CLASS='MT-1 BX BX-SHOW-ALT' STYLE="COLOR:

BLACK;CURSOR:POINTER;"></I>

</DIV>
</A>
<P ID="EDIT-FILE-ERRORDISPLAY"></P>
<DIV CLASS="INVALID-FEEDBACK" ID="EDIT-INVALID-FILE">
FILE IS TOO LARGE ALLOWED LIMIT IS 200 MB!
</DIV>

</DIV>

<DIV CLASS="MB-3">
<LABEL FOR="EXAMPLEFORMCONTROLTEXTAREA1" CLASS="FORM-
LABEL">IMPORTANCE</LABEL>

</DIV>
</DIV>

184
STI College Naga
</DIV>
<DIV CLASS="MODAL-FOOTER">

<BUTTON TYPE="BUTTON" CLASS="BTN BTN-PRIMARY" ID="EDIT-SAVE-

NOTICE-BTN">
<DIV><SPAN> SAVE</SPAN></DIV>
</BUTTON>
</DIV>
</FORM>

</DIV>
</DIV>
</DIV>

<DIV CLASS="MODAL FADE" ID="EDIT-NOTICE-MODAL" TABINDEX="-1" ARIA-

LABELLEDBY="EXAMPLEMODALLABEL" ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
<H1 CLASS="MODAL-TITLE FS-5" ID="EXAMPLEMODALLABEL">EDIT
NOTICE</H1>
<BUTTON TYPE="BUTTON" CLASS="BTN-CLOSE" DATA-BS-DISMISS="MODAL"
ARIA-LABEL="CLOSE"></BUTTON>
</DIV>
<DIV CLASS="MODAL-BODY">

</DIV>
<DIV CLASS="MODAL-FOOTER">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-SECONDARY" DATA-BS-
DISMISS="MODAL">CLOSE</BUTTON>
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-PRIMARY">EDIT</BUTTON>
</DIV>
</DIV>
</DIV>
</DIV>

185
STI College Naga
<DIV CLASS="MODAL-HEADER">
</DIV>
<DIV CLASS="MODAL-BODY">
<STRONG>DO YOU REALLY WANT TO DELETE THIS NOTICE?</STRONG>
</DIV>
<DIV CLASS="MODAL-FOOTER">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-SECONDARY" DATA-BS-
DISMISS="MODAL">CLOSE</BUTTON>
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-DANGER"
ONCLICK="DELETENOTICE()">DELETE</BUTTON>
</DIV>
</DIV>
</DIV>
</DIV>

<?PHP INCLUDE('PARTIALS/_SIDEBAR.PHP') ?>
<INPUT TYPE="HIDDEN" VALUE="4" ID="CHECKFILENAME">

<MAIN>
<DIV CLASS="HEADER">
<DIV CLASS="LEFT">
<H1>NOTICE BOARD</H1>
</DIV>
</DIV>

<UL CLASS="NAV NAV-TABS" ID="MYTAB" ROLE="TABLIST">
<LI CLASS="NAV-ITEM" ROLE="PRESENTATION">
<BUTTON CLASS="NAV-LINK ACTIVE " ID="CREATENOTICETAB" DATA-BS-
TOGGLE="TAB" DATA-BS-TARGET="#HOME"
TYPE="BUTTON" ROLE="TAB" ARIA-CONTROLS="HOME" ARIA-
SELECTED="TRUE">CREATE

186
STI College Naga
NOTICE</BUTTON>
</LI>
<LI CLASS="NAV-ITEM" ROLE="PRESENTATION">
<BUTTON CLASS="NAV-LINK" ID="SHOW-NOTICE-TAB" DATA-BS-
TOGGLE="TAB" DATA-BS-TARGET="#PROFILE"
TYPE="BUTTON" ROLE="TAB" ARIA-CONTROLS="PROFILE" ARIA-
SELECTED="FALSE">NOTICE
BOARD</BUTTON>
</LI>

</UL>

<FORM CLASS="NEEDS-VALIDATION" ID="NOTICE-FORM" NOVALIDATE>

<DIV CLASS="ATTENDENCETABLE" STYLE="DISPLAY: BLOCK;">
<DIV CLASS="HEADER">
<I CLASS='BX BX-RECEIPT'></I>
<H3>CREATE NOTICE </H3>
<I CLASS='BX BX-FILTER'></I>

</DIV>
<HR><BR>

<DIV CLASS="CENTER-ELEMENT">
<DIV CLASS="NOTICEFORM">
<DIV CLASS="MB-3">
<LABEL FOR="TITLE" CLASS="FORM-LABEL">NOTICE
TITLE</LABEL>
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL" ID="NOTICE-
TITLE" NAME="TITLE"
PLACEHOLDER="TITLE OF NOTICE" REQUIRED>
<DIV CLASS="INVALID-FEEDBACK" ID="INVALID-TITLE">
YOU MUST HAVE TO ADD TITLE!
</DIV>
</DIV>
<BR>

187
STI College Naga
<LABEL FOR="BODY" CLASS="FORM-LABEL">NOTICE
BODY</LABEL>
<TEXTAREA CLASS="FORM-CONTROL" ID="NOTICE-BODY"
NAME="BODY"
ROWS="4"></TEXTAREA>
<DIV CLASS="INVALID-FEEDBACK" ID="INVALID-BODY">
EITHER NOTICE BODY OR ANY FILE IS REQUIRED!
</DIV>
</DIV>

<BR>
<DIV CLASS="MB-3">
<LABEL FOR="FILE" CLASS="FORM-LABEL">ANY
FILE</LABEL>
<INPUT TYPE="FILE" CLASS="FORM-CONTROL" ACCEPT="*"
ID="NOTICE-FILE"
NAME="FILE">
<P ID="ERRORDISPLAY"></P>
<DIV CLASS="INVALID-FEEDBACK" ID="INVALID-FILE">
FILE IS TOO LARGE ALLOWED LIMIT IS 200 MB!
</DIV>

</DIV>

<BR>
<DIV CLASS="MB-3">
<LABEL FOR="EXAMPLEFORMCONTROLTEXTAREA1"
CLASS="FORM-LABEL">IMPORTANCE</LABEL>

188
STI College Naga
</DIV>

</DIV>
</DIV>

<DIV CLASS="UPLOADBOX" ID="UPLOADBOX">

<HR>
<DIV CLASS="D-GRID GAP-2 D-MD-FLEX JUSTIFY-CONTENT-MD-
END">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-OUTLINE-WARNING"
ID="RESET-NOTICE"

ONCLICK="CLEANFORM()">&NBSP;&NBSP;RESET&NBSP;&NBSP;</BUTTON>
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-OUTLINE-SUCCESS"
ID="POST-NOTICE">POST</BUTTON>
</DIV>
</FORM>

</DIV>
</DIV>
<DIV CLASS="TAB-PANE" ID="PROFILE" ROLE="TABPANEL" ARIA-
LABELLEDBY="PROFILE-TAB" TABINDEX="0">
<DIV CLASS="CONTAINER">
<DIV>
<BR>

189
STI College Naga
<DIV CLASS="ATTENDENCETABLE" STYLE="DISPLAY: BLOCK;">
<DIV CLASS="HEADER">
<I CLASS='BX BX-CLIPBOARD'></I>
<H3>NOTICE BOARD</H3>
<A HREF="NOTICEBOARD.PHP"><I STYLE="FONT-
SIZE:30PX;FONT-WEIGHT:BOLD;" CLASS='BX BX-PLUS'></I></A>
</DIV>
<HR CLASS="TEXT-DANGER">

<DIV CLASS="ROW ROW-COLS-1 ROW-COLS-MD-2 ROW-COLS-LG-2

ROW-COLS-XL-3 ROW-COLS-SM-1 G-4"
ID="NOTICE-BOX">

</DIV>

<DIV CLASS="D-GRID GAP-2 D-MD-FLEX JUSTIFY-CONTENT-MD-

END">
<DIV CLASS="BTN-GROUP" ROLE="GROUP" ARIA-LABEL="BASIC
EXAMPLE">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-LIGHT"
ID="PREVBTN">PREV</BUTTON>
<A CLASS="BTN BTN-SECONDARY DISABLED"
ROLE="BUTTON" ARIA-DISABLED="TRUE"
ID="PAGENUMBER">1</A>
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-LIGHT"
ID="NEXTBTN">NEXT</BUTTON>
</DIV>
</DIV>

</DIV>

</DIV>
</DIV>

190
STI College Naga
</DIV>

</DIV>

</MAIN>

</DIV>

SETTINGS.PHP

<?PHP INCLUDE("../ASSETS/NOSESSIONREDIRECT.PHP"); ?>

<?PHP INCLUDE("./VERIFYROLEREDIRECT.PHP"); ?>

<!DOCTYPE HTML>
<HTML LANG="EN">

<HEAD>
<META CHARSET="UTF-8">
<META NAME="VIEWPORT" CONTENT="WIDTH=DEVICE-WIDTH, INITIAL-SCALE=1.0">
<LINK HREF='HTTPS://UNPKG.COM/[email protected]/CSS/BOXICONS.MIN.CSS'
REL='STYLESHEET'>
<LINK REL="ICON" TYPE="IMAGE/X-ICON" HREF="IMAGES/1.PNG">
<TITLE>SCHOOL MANAGEMENT</TITLE>

<LINK REL="ICON" TYPE="IMAGE/X-ICON" HREF="../IMAGES/1.PNG">

<LINK REL="STYLESHEET" HREF="CSS/BOOTSTRAP.CSS">

191
STI College Naga
<LINK HREF="HTTPS://MAXCDN.BOOTSTRAPCDN.COM/FONT-AWESOME/4.7.0/CSS/FONT-
AWESOME.MIN.CSS" REL="STYLESHEET" />

<LINK REL="STYLESHEET" HREF="STYLE.CSS">

</HEAD>

<BODY>

<DIV CLASS="MODAL FADE" ID="EDIT-CONFIRMATION-MODAL" TABINDEX="-1" ARIA-

LABELLEDBY="EXAMPLEMODALLABEL"
ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
</DIV>
<DIV CLASS="MODAL-BODY">
<STRONG>DO YOU WANT TO EDIT YOUR PROFILE.</STRONG>
</DIV>
<DIV CLASS="MODAL-FOOTER">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-SECONDARY" DATA-BS-
DISMISS="MODAL">CLOSE</BUTTON>
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-DANGER"
ID="EDITPROFILEBTN">EDIT</BUTTON>
</DIV>
</DIV>
</DIV>
</DIV>

<DIV CLASS='TOAST-CONTAINER POSITION-FIXED TEXT-SUCCESS BOTTOM-0 END-0 P-3'

STYLE="Z-INDEX: 9000;">
<DIV ID='LIVETOAST' CLASS='TOAST' ROLE='ALERT' ARIA-LIVE='ASSERTIVE' ARIA-
ATOMIC='TRUE' STYLE="COLOR:BLACK;">
<DIV CLASS='D-FLEX'>
<DIV CLASS='TOAST-BODY' ID="TOAST-ALERT-MESSAGE">

</DIV>
<BUTTON TYPE='BUTTON' CLASS='BTN-CLOSE ME-2 M-AUTO TEXT-DANGER' DATA-BS-
DISMISS='TOAST' ARIA-LABEL='CLOSE'></BUTTON>
</DIV>
</DIV>

192
STI College Naga
</DIV>

<DIV CLASS="MODAL" STYLE="Z-INDEX: 2000;" ID="EDIT-PROFILE-MODEL"
TABINDEX="-1" ARIA-LABELLEDBY="EXAMPLEMODALLABEL"
ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED MODAL-DIALOG-
SCROLLABLE">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
<H1 CLASS="MODAL-TITLE FS-5" ID="EXAMPLEMODALLABEL">EDIT
PROFILE</H1>
<BUTTON TYPE="BUTTON" CLASS="CLOSE MR-2" DATA-BS-
DISMISS="MODAL" ARIA-LABEL="CLOSE"><I
CLASS='BX BX-X'></I></BUTTON>
</DIV>

<FORM CLASS="NEEDS-VALIDATION" ID="EDITPROFILEFORM" NOVALIDATE>

<DIV CLASS="MODAL-BODY">
<DIV CLASS="CONTAINER">
<DIV CLASS="MB-2">
<LABEL FOR="FULLNAME" CLASS="FORM-LABEL">FULL
NAME</LABEL>
<DIV CLASS="ROW">
<DIV CLASS="COL">
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL"
PLACEHOLDER="FIRST NAME"
ARIA-LABEL="FIRST NAME" ID="EIDTFNAME" NAME="FNAME"
REQUIRED>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!
</DIV>
</DIV>
<DIV CLASS="COL">
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL"
PLACEHOLDER="LAST NAME"
ARIA-LABEL="LAST NAME" ID="EDITLNAME" NAME="LNAME"
REQUIRED>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!
</DIV>
</DIV>
</DIV>
</DIV>

193
STI College Naga
<DIV CLASS="MB-2">
<LABEL FOR="EDITEMAIL" CLASS="FORM-LABEL">EMAIL</LABEL>
<INPUT TYPE="EMAIL" CLASS="FORM-CONTROL" ID="EDITEMAIL"
NAME="EMAIL"
ARIA-DESCRIBEDBY="EMAILHELP" REQUIRED>

<DIV CLASS="INVALID-FEEDBACK">
INVALID EMAIL!
</DIV>
</DIV>

<DIV CLASS="MB-2">
<DIV CLASS="ROW">
<DIV CLASS="COL-6">
<LABEL FOR="DOB" CLASS="FORM-LABEL">DATE OF
BIRTH</LABEL>
<INPUT TYPE="DATE" CLASS="FORM-CONTROL" ID="EDITDOB"
ACCEPTARIA-DESCRIBEDBY="EMAILHELP"
NAME="DOB" REQUIRED>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!
</DIV>
</DIV>
<DIV CLASS="COL-6 STUDENT-IMAGE">

<LABEL FOR="GENDER" CLASS="FORM-LABEL">GENDER</LABEL>

<SELECT CLASS="FORM-SELECT" ID="EDITGENDER"
NAME="GENDER" STYLE="WIDTH:100%;" REQUIRED>
<OPTION SELECTED DISABLED VALUE="">--SELECT--</OPTION>
<OPTION VALUE="MALE">MALE</OPTION>
<OPTION VALUE="FEMALE">FEMALE</OPTION>
<OPTION VALUE="OTHER">OTHER</OPTION>
</SELECT>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!
</DIV>
</DIV>
</DIV>
</DIV>

<DIV CLASS="MB-2">
<LABEL FOR="EDITPHONE" CLASS="FORM-LABEL">PHONE
NUMBER</LABEL>
<INPUT TYPE="TEL" CLASS="FORM-CONTROL" ID="EDITPHONE"
NAME="PHONE"

194
STI College Naga
PLACEHOLDER="ENTER PHONE NUMBER" REQUIRED>
<DIV CLASS="VALID-FEEDBACK">
</DIV>
<DIV CLASS="INVALID-FEEDBACK" ID="PHONE-MDG">
PLEASE ENTER A VALID 10-DIGIT PHONE NUMBER.
</DIV>
</DIV>

<DIV CLASS="MB-2">
<LABEL FOR="EDITADDRESS"
CLASS="FORM-LABEL">ADDRESS</LABEL>
<TEXTAREA CLASS="FORM-CONTROL" ID="EDITADDRESS"
NAME="ADDRESS" ROWS="2" REQUIRED></TEXTAREA>
<DIV CLASS="INVALID-FEEDBACK">
THIS FIELD CAN'T BE EMPTY!
</DIV>
</DIV>

</DIV>
</DIV>
<DIV CLASS="MODAL-FOOTER">

<BUTTON TYPE="BUTTON" CLASS="BTN BTN-PRIMARY"

ID="SAVECHANGESBTN"></I><SPAN>
<SMALL>SAVE CHANGES</SMALL></SPAN>
</BUTTON>
</DIV>

</FORM>
</DIV>
</DIV>
</DIV>
</DIV>

<DIV CLASS="MODAL" STYLE="Z-INDEX: 2000;" ID="CHANGE-PASSWORD"
TABINDEX="-1" ARIA-LABELLEDBY="EXAMPLEMODALLABEL"
ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
<H1 CLASS="MODAL-TITLE FS-5" ID="EXAMPLEMODALLABEL">CHANGE
PASSWORD</H1>
<BUTTON TYPE="BUTTON" CLASS="CLOSE MR-2" DATA-BS-

195
STI College Naga
DISMISS="MODAL" ARIA-LABEL="CLOSE"><I
CLASS='BX BX-X'></I></BUTTON>
</DIV>
<FORM CLASS="NEEDS-VALIDATION" ID="CHANGEPASSWORDFORM"
NOVALIDATE>
<DIV CLASS="MODAL-BODY">
<DIV CLASS="CONTAINER MY-3">
<DIV CLASS="MB-3">
<LABEL FOR="CURRENTPASS" CLASS="FORM-LABEL">CURRENT
PASSWORD</LABEL>
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL" ID="CURRENTPASS"
NAME="CURRENTPASSWORD" REQUIRED>
<DIV CLASS="INVALID-FEEDBACK INVALIDCURRENTPASSWORD">
REQUIRED!
</DIV>

</DIV>

<DIV CLASS="MB-3">
<LABEL FOR="NEWPASS" CLASS="FORM-LABEL">NEW
PASSWORD</LABEL>
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL" ID="NEWPASS"
NAME="NEWPASSWORD" REQUIRED>
<DIV CLASS="INVALID-FEEDBACK INVALIDNEWPASSWORD">
REQUIRED!
</DIV>
</DIV>

<DIV CLASS="MB-3">
<LABEL FOR="CONFIRMPASS" CLASS="FORM-LABEL">CONFIRM
PASSWORD</LABEL>
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL" ID="CONFIRMPASS"
NAME="CONFIRMPASSWORD " REQUIRED>
<DIV CLASS="INVALID-FEEDBACK INVALIDCONFIRMPASSWORD">
REQUIRED!
</DIV>
</DIV>

<DIV CLASS="INVALID-FEEDBACK NOTSAMEPASSWORDS">

NEW PASSWORD AND CONFIRM PASSWORD MUST BE SAME!
</DIV>
</DIV>
</DIV>
<DIV CLASS="MODAL-FOOTER">

<BUTTON TYPE="BUTTON" CLASS="BTN BTN-PRIMARY"

196
STI College Naga
ID="SAVEPASSWORDBTN">
<DIV><I CLASS='BX BXS-CHEVRONS-RIGHT'></I><SPAN>
SAVE</SPAN></DIV>
</BUTTON>
</DIV>
</FORM>
</DIV>
</DIV>
</DIV>

<?PHP INCLUDE('PARTIALS/_SIDEBAR.PHP') ?>
<INPUT TYPE="HIDDEN" VALUE="10" ID="CHECKFILENAME">

<MAIN>
<DIV CLASS="HEADER">
<DIV CLASS="LEFT">
<H1>SETTINGS</H1>
<UL CLASS="BREADCRUMB">
<LI><A HREF="#">

</A></LI>

</UL>
</DIV>

</DIV>
<DIV CLASS="BOTTOM-DATA">

197
STI College Naga
<BR>

<DIV CLASS="ATTENDENCETABLE" STYLE="DISPLAY: BLOCK;">
<DIV CLASS="HEADER">
<I CLASS='BX BX-RECEIPT'></I>

<H3>PROFILE SETTINGS</H3>
<DIV CLASS="STUDENT-BTNS">

<DIV CLASS="DROPDOWN DROPDOWN-CENTER">

<UL CLASS="DROPDOWN-MENU">
<LI><A CLASS="DROPDOWN-ITEM SUBMIT-ATTENDENCE"
ID="REMOVE_PIC" ONCLICK="REMOVEPROFILEPIC()">REMOVE PROFILE
PICTURE</A></LI>
<LI><A CLASS="DROPDOWN-ITEM RESET-ATTENDENCE"
ID="_CHANGE_PASSWORD" >CHANGE PASSWORD</A></LI>
<LI STYLE="DISPLAY:NONE;"><A CLASS="DROPDOWN-ITEM
RESET-ATTENDENCE" ID="_CHANGE_PROFILE" >EDIT PROFILE</A></LI>
</UL>
</DIV>
</DIV>
</DIV>
<HR>

<DIV CLASS="CONTAINER P-0">

<DIV CLASS="CARD">
<DIV CLASS="CARD-HEADER" ID="SETTINGS-CARD-
HEADER">
<H5 CLASS="CARD-TITLE MB-0">PROFILE IMAGE</H5>
</DIV>

<DIV CLASS="TEXT-CENTER MT-3 MB-3">

198
STI College Naga
</DIV>
<DIV CLASS="MT-1 BTN-CONTAINER">
<DIV CLASS="BTN BTN-PRIMARY UPLOAD-BTN"
STYLE="CURSOR: DEFAULT;">
<LABEL FOR="UPLOAD-FILE">
<I CLASS='BX BX-CLOUD-UPLOAD'
STYLE="CURSOR: POINTER;"></I>
</LABEL>
<INPUT TYPE="FILE" ID="UPLOAD-FILE"
STYLE="DISPLAY: NONE;WIDTH: 50PX; HEIGHT: 50PX;CURSOR: POINTER;"
ACCEPT=".PNG, .JPEG, .JPG">
</DIV>

</DIV>
<SMALL CLASS="MB-3">FOR BEST RESULTS, USE AN
IMAGE AT
LEAST 128PX BY 128PX IN .JPG
FORMAT</SMALL>
<BR>
</DIV>
<DIV CLASS="LIST-GROUP LIST-GROUP-FLUSH"
ROLE="TABLIST">

</DIV>
</DIV>

<DIV CLASS="SETTING-FUNCTION-BTNS MT-8 MB-5">

<BUTTON CLASS="BTN BTN-PRIMARY MB-3"
ID="PASSWORDDIALOGBTN" ><I
CLASS='BX BXS-KEY'></I>&NBSP;<DIV>CHANGE
PASSWORD</DIV>
</BUTTON>

<DIV STYLE="DISPLAY:NONE;">
<BUTTON CLASS="BTN BTN-PRIMARY MB-3"
ID="SHOWEDITDIALOGBTN"> <I
CLASS='BX BX-EDIT-ALT'></I>&NBSP;EDIT
PROFILE</BUTTON>
</DIV>
</DIV>
</DIV>

<DIV CLASS="COL-MD-7 COL-XL-8 ">

<DIV CLASS="CARD" ID="PROFILE-DATA">

<DIV CLASS="CARD-HEADER" ID="SETTINGS-CARD-

199
STI College Naga
HEADER">
<H5 CLASS="CARD-TITLE MB-0">PROFILE INFO</H5>
</DIV>
<DIV CLASS="CARD-BODY">
<FORM>
<DIV CLASS="ROW">
<DIV CLASS="COL-MD-10">

<DIV CLASS="USER-INFO ">

<DIV CLASS="USER-INFO ">

<H4 CLASS="_FLEX-CONTAINER"> <I
CLASS='BX BXS-USER-RECTANGLE'></I> &NBSP;&NBSP;NAME</H4>
<H3>-</H3>
<P ID="USERNAME">_ _ _ _</P>
</DIV>
<DIV CLASS="USER-INFO">
<H4 CLASS="_FLEX-CONTAINER"><I
CLASS='BX BXS-CALENDAR'></I>&NBSP;&NBSP;BIRTHDAY </H4>
<H3>-</H3>
<P ID="USERDOB">_ _ _ _</P>
</DIV>

<DIV CLASS="USER-INFO">
<H4 CLASS="_FLEX-CONTAINER"><I
CLASS='BX BX-ENVELOPE' ></I>&NBSP;&NBSP;EMAIL </H4>
<H3>-</H3>
<P ID="USEREMAIL">_ _ _ _</P>
</DIV>
<DIV CLASS="USER-INFO">
<H4 CLASS="_FLEX-CONTAINER"><I
CLASS="BI BI-C-CIRCLE-FILL"></I>&NBSP;&NBSP;CLASS </H4>
<H3>-</H3>
<P ID="USERCLASS">_ _ _ _</P>
</DIV>

<DIV CLASS="USER-INFO">
<H4 CLASS="_FLEX-CONTAINER"><I
CLASS="BI BI-BOOK"></I>&NBSP;&NBSP;SECTION </H4>
<H3>-</H3>
<P ID="USERSECTION">_ _ _ _</P>

200
STI College Naga
</DIV>

<DIV CLASS="USER-INFO">
<H4 CLASS="_FLEX-CONTAINER"><I
CLASS='BX BX-PHONE-CALL' ></I>&NBSP;&NBSP;PHONE</H4>
<H3>-</H3>
<P ID="USERPHONE">_ _ _ _</P>
</DIV>

<DIV CLASS="USER-INFO">
<H4 CLASS="_FLEX-CONTAINER"><I
CLASS='BX BX-MALE-FEMALE' ></I>&NBSP;&NBSP;GENDER </H4>
<H3>-</H3>
<P ID="USERGENDER">_ _ _ _</P>
</DIV>

<DIV CLASS="USER-INFO">
<H4 CLASS="_FLEX-CONTAINER"><I
CLASS='BX BXS-HOME-ALT-2' ></I>&NBSP;&NBSP;ADDRESS</H4>
<H3>-</H3>
<P ID="USERADDRESS">_ _ _ _</P>
</DIV>

</DIV>
<!-- <DIV CLASS="COL-MD-4">

</DIV> -->
</DIV>
<BR>

</FORM>

</DIV>
</DIV>

</DIV>

201
STI College Naga
</DIV>

</DIV>

</MAIN>

</DIV>

STUDENTS.PHP

<?PHP INCLUDE('PARTIALS/_HEADER.PHP') ?>

<DIV CLASS="MODAL FADE" ID="EDIT-CONFIRMATION-MODAL" TABINDEX="-1" ARIA-
LABELLEDBY="EXAMPLEMODALLABEL"
ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
</DIV>
<DIV CLASS="MODAL-BODY">
<STRONG>DO YOU REALLY WANT TO EDIT STUDENT DETAILS?</STRONG>
</DIV>
<DIV CLASS="MODAL-FOOTER">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-SECONDARY" DATA-BS-
DISMISS="MODAL">CLOSE</BUTTON>
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-DANGER" ID="CONFIRM-EDIT-
BTN">EDIT</BUTTON>
</DIV>
</DIV>
</DIV>
</DIV>

202
STI College Naga

<DIV CLASS="MODAL FADE" ID="DELETE-CONFIRMATION-MODAL" TABINDEX="-1" ARIA-
LABELLEDBY="EXAMPLEMODALLABEL"
ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
</DIV>
<DIV CLASS="MODAL-BODY">
<STRONG>DO YOU REALLY WANT TO DELETE STUDENT?</STRONG>
</DIV>
<DIV CLASS="MODAL-FOOTER">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-SECONDARY" DATA-BS-
DISMISS="MODAL">CLOSE</BUTTON>
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-DANGER"
ONCLICK="DELETETEACHERWITHIDSETED()">DELETE</BUTTON>
</DIV>
</DIV>
</DIV>
</DIV>

<DIV CLASS="MODAL" STYLE="Z-INDEX: 2000;" ID="ADDTEACHERMODAL"

TABINDEX="-1" ARIA-LABELLEDBY="EXAMPLEMODALLABEL"
ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
<H1 CLASS="MODAL-TITLE FS-5" ID="EXAMPLEMODALLABEL">STUDENT
DETAILS</H1>
<BUTTON TYPE="BUTTON" CLASS="CLOSE MR-2" DATA-BS-DISMISS="MODAL"
ARIA-LABEL="CLOSE"><I
CLASS='BX BX-X'></I></BUTTON>
</DIV>
<FORM CLASS="NEEDS-VALIDATION" ID="GENERAL-FORM" NOVALIDATE>
<DIV CLASS="MODAL-BODY">
<DIV CLASS="CONTAINER MY-3">
<DIV CLASS="MB-3">
<LABEL FOR="FULLNAME" CLASS="FORM-LABEL">FULL
NAME</LABEL>
<DIV CLASS="ROW">
<DIV CLASS="COL">
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL"

203
STI College Naga
PLACEHOLDER="FIRST NAME"
ARIA-LABEL="FIRST NAME" ID="FNAME" NAME="FNAME"
REQUIRED>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!
</DIV>
</DIV>
<DIV CLASS="COL">
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL"
PLACEHOLDER="LAST NAME"
ARIA-LABEL="LAST NAME" ID="LNAME" NAME="LNAME"
REQUIRED>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!
</DIV>
</DIV>
</DIV>
</DIV>

<DIV CLASS="MB-3">
<LABEL FOR="FATHER" CLASS="FORM-LABEL">FATHER
NAME</LABEL>
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL" ID="FATHER" ARIA-
DESCRIBEDBY="EMAILHELP"
NAME="FATHER" REQUIRED>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!
</DIV>
</DIV>

<DIV CLASS="MB-3">
<DIV CLASS="ROW">
<DIV CLASS="COL-6">
<LABEL FOR="DOB" CLASS="FORM-LABEL">DATE OF
BIRTH</LABEL>
<INPUT TYPE="DATE" CLASS="FORM-CONTROL" ID="DOB" ARIA-
DESCRIBEDBY="EMAILHELP"
NAME="DOB" REQUIRED>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!
</DIV>
</DIV>
<DIV CLASS="COL-6 STUDENT-IMAGE">

<LABEL FOR="GENDER" CLASS="FORM-LABEL">GENDER</LABEL>

204
STI College Naga
<SELECT CLASS="FORM-SELECT" ID="GENDER" NAME="GENDER"
STYLE="WIDTH:100%;" REQUIRED>
<OPTION SELECTED DISABLED VALUE="">--SELECT--</OPTION>
<OPTION VALUE="MALE">MALE</OPTION>
<OPTION VALUE="FEMALE">FEMALE</OPTION>
<OPTION VALUE="OTHER">OTHER</OPTION>
</SELECT>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!
</DIV>
</DIV>
</DIV>
</DIV>

<DIV CLASS="MB-3">
<DIV CLASS="ROW">
<DIV CLASS="COL-6">
<LABEL FOR="CLASS" CLASS="FORM-LABEL">CLASS</LABEL>
<SELECT CLASS="FORM-SELECT" ID="CLASS" NAME="CLASS"
STYLE="WIDTH:100%;" REQUIRED>

<!-- <OPTION SELECTED DISABLED

VALUE="">---SELECT--</OPTION>
<OPTION VALUE="12">12</OPTION>
<OPTION VALUE="11">11</OPTION>
<OPTION VALUE="10">10</OPTION>
<OPTION VALUE="9">9</OPTION>
<OPTION VALUE="8">8</OPTION>
<OPTION VALUE="7">7</OPTION>
<OPTION VALUE="6">6</OPTION>
<OPTION VALUE="5">5</OPTION>
<OPTION VALUE="4">4</OPTION>
<OPTION VALUE="3">3</OPTION>
<OPTION VALUE="2">2</OPTION>
<OPTION VALUE="1">1</OPTION>
<OPTION VALUE="PG">PG</OPTION>
<OPTION VALUE="LKG">LKG</OPTION>
<OPTION VALUE="UKG">UKG</OPTION> -->
<?PHP
$ID = $_SESSION['UID'];
$QUERY = "SELECT * FROM TEACHERS WHERE ID = '$ID'";
$RESULT = MYSQLI_QUERY($CONN,$QUERY);
$ROW = MYSQLI_FETCH_ASSOC($RESULT);
IF($ROW["CLASS"]=="12S"){
ECHO '<OPTION SELECTED VALUE="'.
$ROW["CLASS"].'">CLASS 12 SCIENCE</OPTION>';

205
STI College Naga
}
ELSE IF($ROW["CLASS"]=="12C"){
ECHO '<OPTION SELECTED VALUE="'.
$ROW["CLASS"].'">CLASS 12 COMMERCE</OPTION>';
}

ELSE IF($ROW["CLASS"]=="11S"){
ECHO '<OPTION SELECTED VALUE="'.
$ROW["CLASS"].'">CLASS 11 SCINECE</OPTION>';
}
ELSE IF($ROW["CLASS"]=="11C"){
ECHO '<OPTION SELECTED VALUE="'.
$ROW["CLASS"].'">CLASS 11 COMMERCE</OPTION>';
}

ELSE{
'<OPTION SELECTED VALUE="'.$ROW["CLASS"].'">'.
ECHO
$ROW["CLASS"].'</OPTION>';
}
?>
</SELECT>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!
</DIV>
</DIV>
<DIV CLASS="COL-6">
<LABEL FOR="SECTION"
CLASS="FORM-LABEL">SECTION</LABEL>
<SELECT CLASS="FORM-SELECT" ID="SECTION" NAME="SECTION"
STYLE="WIDTH:100%;"
REQUIRED>
<OPTION SELECTED DISABLED VALUE="">--SELECT--</OPTION>
<OPTION VALUE="A">A</OPTION>
<OPTION VALUE="B">B</OPTION>
<OPTION VALUE="C">C</OPTION>
</SELECT>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!
</DIV>
</DIV>
</DIV>
</DIV>

<DIV CLASS="MB-3" ID="UPLOADIMAGEFIELD">

<DIV CLASS="MB-3">
<LABEL FOR="IMAGE" CLASS="FORM-LABEL">PHOTO</LABEL>

206
STI College Naga
<INPUT CLASS="FORM-CONTROL" TYPE="FILE" ID="UPLOADIMAGE"
NAME="IMAGE" PLACEHOLDER="FILE"
ACCEPT=".PNG, .JPEG, .JPG">

</DIV>

</DIV>
</DIV>
<DIV CLASS="MODAL-FOOTER">

<BUTTON TYPE="BUTTON" CLASS="BTN BTN-PRIMARY" ID="GENERAL-INFO-

BTN">
<DIV><I CLASS='BX BXS-CHEVRONS-RIGHT'></I><SPAN>
NEXT</SPAN></DIV>
</BUTTON>
</DIV>
</FORM>

</DIV>
</DIV>
</DIV>

<DIV CLASS="MODAL" STYLE="Z-INDEX: 2000;" ID="PERSONALINFORMATIONMODAL"
TABINDEX="-1"
ARIA-LABELLEDBY="EXAMPLEMODALLABEL" ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
<H1 CLASS="MODAL-TITLE FS-5" ID="EXAMPLEMODALLABEL">ADDRESS
DETAILS</H1>
<BUTTON TYPE="BUTTON" CLASS="CLOSE MR-2" DATA-BS-DISMISS="MODAL"
ARIA-LABEL="CLOSE"><I
CLASS='BX BX-X'></I></BUTTON>
</DIV>
<FORM CLASS="NEEDS-VALIDATION" ID="PERSONAL-FORM" NOVALIDATE>
<DIV CLASS="MODAL-BODY">
<DIV CLASS="CONTAINER MY-3">

<DIV CLASS="MB-3">
<LABEL FOR="PHONE" CLASS="FORM-LABEL">PHONE
NUMBER</LABEL>
<INPUT TYPE="TEL" CLASS="FORM-CONTROL" ID="PHONE"
NAME="PHONE"

207
STI College Naga
PLACEHOLDER="ENTER PHONE NUMBER" REQUIRED>
<DIV CLASS="VALID-FEEDBACK">
</DIV>
<DIV CLASS="INVALID-FEEDBACK" ID="PHONE-MDG">
PLEASE ENTER A VALID 10-DIGIT PHONE NUMBER.
</DIV>
</DIV>

<DIV CLASS="MB-3">
<LABEL FOR="EMAIL" CLASS="FORM-LABEL">EMAIL</LABEL>
<INPUT TYPE="EMAIL" CLASS="FORM-CONTROL" ID="EMAIL" ARIA-
DESCRIBEDBY="EMAILHELP"
NAME="EMAIL" REQUIRED>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!
</DIV>
</DIV>

<DIV CLASS="MB-3">
<LABEL FOR="ADDRESS" CLASS="FORM-LABEL">ADDRESS</LABEL>
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL" ID="ADDRESS" ARIA-
DESCRIBEDBY="EMAILHELP"
NAME="ADDRESS" REQUIRED>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!
</DIV>
</DIV>

<DIV CLASS="MB-3">
<LABEL FOR="EXAMPLEINPUTEMAIL1"
CLASS="FORM-LABEL">CITY</LABEL>
<DIV CLASS="ROW">
<DIV CLASS="COL">
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL" ID="CITY" ARIA-
DESCRIBEDBY="EMAILHELP"
NAME="CITY" REQUIRED>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!
</DIV>
</DIV>
<DIV CLASS="COL">
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL" ID="ZIP" ARIA-
DESCRIBEDBY="EMAILHELP"
NAME="ZIP" PLACEHOLDER="ZIP" REQUIRED>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!

208
STI College Naga
</DIV>
</DIV>
</DIV>
</DIV>

<DIV CLASS="MB-3">
<LABEL FOR="STATE" CLASS="FORM-LABEL">STATE</LABEL>
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT SELECT
EXAMPLE" ID="STATE" NAME="STATE"
REQUIRED>
<OPTION SELECTED DISABLED VALUE="">--SELECT--</OPTION>
<OPTION VALUE="HARIYANA">HARIYANA</OPTION>
<OPTION VALUE="UP">UP</OPTION>
<OPTION VALUE="DELHI">DELHI</OPTION>
<OPTION VALUE="PANJAB">PANJAB</OPTION>
<OPTION VALUE="GUJRAT">GUJRAT</OPTION>
</SELECT>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!
</DIV>
</DIV>
</DIV>
</DIV>
<DIV CLASS="MODAL-FOOTER">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-SECONDARY"
ONCLICK="BACKTOSTUDENTDETAIL()">
<DIV><I CLASS='BX
BXS-CHEVRONS-LEFT'></I><SPAN>BACK</SPAN></DIV>
</BUTTON>
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-PRIMARY" ID="PERSONAL-INFO-
BTN">
<DIV><I CLASS='BX BXS-CHEVRONS-RIGHT'></I><SPAN>
NEXT</SPAN></DIV>
</BUTTON>
</DIV>
</FORM>
</DIV>
</DIV>
</DIV>

209
STI College Naga
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
<H1 CLASS="MODAL-TITLE FS-5" ID="EXAMPLEMODALLABEL">EMERGENCY
CONTACT DETAILS</H1>
<BUTTON TYPE="BUTTON" CLASS="CLOSE MR-2" DATA-BS-DISMISS="MODAL"
ARIA-LABEL="CLOSE"><I
CLASS='BX BX-X'></I></BUTTON>
</DIV>
<FORM CLASS="NEEDS-VALIDATION" ID="GURADIAN-FORM" NOVALIDATE>
<DIV CLASS="MODAL-BODY">

<DIV CLASS="CONTAINER MY-3">

<DIV CLASS="MB-3">
<LABEL FOR="GUARDIAN" CLASS="FORM-LABEL">GUARDIAN
NAME</LABEL>
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL" ID="GUARDIAN" ARIA-
DESCRIBEDBY="EMAILHELP"
NAME="GUARDIAN" REQUIRED>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!
</DIV>
</DIV>

<DIV CLASS="MB-3">
<LABEL FOR="GPHONE" CLASS="FORM-LABEL">PHONE
NUMBER</LABEL>
<INPUT TYPE="TEL" CLASS="FORM-CONTROL" ID="GPHONE"
NAME="GPHONE"
PLACEHOLDER="ENTER PHONE NUMBER" REQUIRED>
<DIV CLASS="VALID-FEEDBACK">
</DIV>
<DIV CLASS="INVALID-FEEDBACK" ID="PHONE-G">
PLEASE ENTER A VALID 10-DIGIT PHONE NUMBER.
</DIV>
</DIV>

<DIV CLASS="MB-3">
<LABEL FOR="GADDRESS" CLASS="FORM-LABEL">ADDRESS</LABEL>
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL" ID="GADDRESS" ARIA-
DESCRIBEDBY="EMAILHELP"
NAME="GADDRESS" REQUIRED>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!
</DIV>
</DIV>

210
STI College Naga
<DIV CLASS="MB-3">
<LABEL FOR="CITY-INFO" CLASS="FORM-LABEL">CITY</LABEL>
<DIV CLASS="ROW">
<DIV CLASS="COL">
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL"
PLACEHOLDER="CITY NAME"
ARIA-LABEL="FIRST NAME" ID="GCITY" NAME="GCITY"
REQUIRED>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!
</DIV>
</DIV>
<DIV CLASS="COL">
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL"
PLACEHOLDER="ZIP CODE"
ARIA-LABEL="LAST NAME" ID="GZIP" NAME="GZIP"
REQUIREDS>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!
</DIV>
</DIV>
</DIV>
</DIV>

<DIV CLASS="MB-3">
<LABEL FOR="RELATION" CLASS="FORM-LABEL">RELATIONSHIP TO
STUDENT</LABEL>
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL" ID="RELATION" ARIA-
DESCRIBEDBY="EMAILHELP"
NAME="RELATION" REQUIRED>
<DIV CLASS="INVALID-FEEDBACK">
REQUIRED!
</DIV>
</DIV>
</DIV>
</DIV>
<DIV CLASS="MODAL-FOOTER">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-SECONDARY"
ONCLICK="BACKTOADDRESSDETAIL()">
<DIV><I CLASS='BX
BXS-CHEVRONS-LEFT'></I><SPAN>BACK</SPAN></DIV>
</BUTTON>
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-PRIMARY" ID="GUARDIAN-
FORM-BTN"><SPAN>SUBMIT </SPAN></BUTTON>
</DIV>
</FORM>

211
STI College Naga
</DIV>
</DIV>
</DIV>

<DIV CLASS="MODAL REMOVETEACHERMODAL" STYLE="Z-INDEX: 2000;"
ID="REMOVESTUDENTMODEL" TABINDEX="-1"
ARIA-LABELLEDBY="EXAMPLEMODALLABEL" ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
<H1 CLASS="MODAL-TITLE TEXT-DANGER FS-5"
ID="EXAMPLEMODALLABEL">DELETE STUDENT</H1>
<BUTTON TYPE="BUTTON" CLASS="CLOSE MR-2" DATA-BS-DISMISS="MODAL"
ARIA-LABEL="CLOSE"><I
CLASS='BX BX-X'></I></BUTTON>
</DIV>
<FORM CLASS="NEEDS-VALIDATION" ID="REMOVE-STUDENT-FORM"
NOVALIDATE>
<DIV CLASS="MODAL-BODY">
<DIV CLASS="CONTAINER MY-3">

<DIV CLASS="MB-3">
<LABEL FOR="STUDENT-ID" CLASS="FORM-LABEL">STUDENT
ID</LABEL>
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL REMOVE_STUDENT_ID"
ID="STUDENT-ID" ARIA-DESCRIBEDBY="" REQUIRED>
<DIV CLASS="INVALID-FEEDBACK">
PLEASE PROVIDE A VALID STUDENT ID.
</DIV>
</DIV>

</DIV>
</DIV>
<DIV CLASS="MODAL-FOOTER">

<BUTTON TYPE="BUTTON" CLASS="BTN BTN-DANGER" ID="REMOVE-

STUDENT-BTN">
<DIV><SPAN>DELETE STUDENT</SPAN></DIV>
</BUTTON>
</DIV>
</FORM>
</DIV>

212
STI College Naga
</DIV>
</DIV>

<?PHP INCLUDE('PARTIALS/_SIDEBAR.PHP') ?>
<INPUT TYPE="HIDDEN" VALUE="2" ID="CHECKFILENAME">

<MAIN>
<DIV CLASS="HEADER">
<DIV CLASS="LEFT">
<H1>STUDENTS</H1>
<UL CLASS="BREADCRUMB">
<LI><A HREF="#">

</A></LI>

</UL>
</DIV>

</DIV>
<DIV CLASS="BOTTOM-DATA">

<UL CLASS="NAV NAV-TABS" ID="MYTAB" ROLE="TABLIST">
<LI CLASS="NAV-ITEM ME-1" ROLE="PRESENTATION">
<BUTTON CLASS="NAV-LINK ACTIVE " ID="ADDSTUDENTTAB" DATA-BS-
TOGGLE="TAB" DATA-BS-TARGET="#HOME" ONCLICK="ADDSTUDENTBTNCLICK()"
TYPE="BUTTON" ROLE="TAB" ARIA-CONTROLS="HOME" ARIA-SELECTED="TRUE">ADD
STUDENTS</BUTTON>
</LI>
<LI CLASS="NAV-ITEM ME-1" ROLE="PRESENTATION">
<BUTTON CLASS="NAV-LINK" ID="VIEW-STUDENTS-TAB" DATA-BS-
TOGGLE="TAB" DATA-BS-TARGET="#PROFILE" TYPE="BUTTON" ROLE="TAB" ARIA-
CONTROLS="PROFILE" ARIA-SELECTED="FALSE" ONCLICK="SHOWSTUDENTS()">SHOW

213
STI College Naga
STUDENTS</BUTTON>
</LI>
<LI CLASS="NAV-ITEM ME-1" ROLE="PRESENTATION">
<BUTTON CLASS="NAV-LINK" ID="FEEDBACK-STUDENTS-TAB" DATA-BS-
TOGGLE="TAB" DATA-BS-TARGET="#FEEDBACK" TYPE="BUTTON" ROLE="TAB" ARIA-
CONTROLS="FEEDBACK" ARIA-SELECTED="FALSE">FEEDBACK</BUTTON>
</LI>
</UL>

<!-- <A CLASS="ADD-BTNS"> <I CLASS='BX BX-FILTER'></I></A>

-->

<DIV CLASS="DROPDOWN DROPDOWN-CENTER">

<UL CLASS="DROPDOWN-MENU">
<LI><A CLASS="DROPDOWN-ITEM RESET-ATTENDENCE"
ID="ADD_STUDENT_DROPDOWN" DATA-BS-TOGGLE="MODAL" DATA-BS-
TARGET="#ADDTEACHERMODAL">ADD STUDENT</A></LI>
<LI><A CLASS="DROPDOWN-ITEM SUBMIT-ATTENDENCE"
ID="REMOVE_STUDENT_DROPDOWN" DATA-BS-TOGGLE="MODAL" DATA-BS-
TARGET="#REMOVESTUDENTMODEL">REMOVE STUDENT</A></LI>
</UL>
</DIV>

</DIV>
</DIV>
<HR>
<BR>

<DIV CLASS="CONTAINER ADD-REMOVE">

214
STI College Naga
<UL CLASS="INSIGHTS">
<A CLASS="ADDLINK" DATA-BS-TOGGLE="MODAL" DATA-BS-
TARGET="#ADDTEACHERMODAL"
ID="ADDTEACHERBUTTON">
<LI CLASS="ADDITEM">

<I CLASS='BX BXS-USER-PLUS'></I>
<SPAN CLASS="INFO">
<H3>
ADD
</H3>
<H3>STUDENT</H3>
</SPAN>
</LI>
</A>

<A CLASS="REMOVELINK" ID="REMOVE-STUDENT-JUMBO-BTN"

DATA-BS-TOGGLE="MODAL" DATA-BS-TARGET="#REMOVESTUDENTMODEL">
<LI CLASS="REMOVEITEM">
<I CLASS='BX BXS-USER-MINUS'></I>
<SPAN CLASS="INFO">
<H3>
REMOVE
</H3>
<H3>STUDENT</H3>
</SPAN>
</LI>
</A>
</UL>
</DIV>

</DIV>
<BR>
<DIV CLASS="TAB-PANE" ID="PROFILE" ROLE="TABPANEL" ARIA-
LABELLEDBY="PROFILE-TAB" TABINDEX="0">

215
STI College Naga
<DIV CLASS="SHOWATTENDENCE">
<BR>
<DIV CLASS="HEADER">
<I CLASS='BX BX-LIST-UL'></I>
<H3>STUDENTS LIST</H3>

</DIV>

<DIV CLASS="ROW G-3 ALIGN-ITEMS-CENTER">

<DIV CLASS="COL-AUTO">
<LABEL FOR="INPUTPASSWORD6" CLASS="COL-FORM-
LABEL">&NBSP;CLASS&NBSP; </LABEL>
</DIV>
<DIV CLASS="COL-AUTO">
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT
SELECT EXAMPLE"
ID="SEARCH-CLASS">

<?PHP INCLUDE('PARTIALS/SELECT_CLASSES.PHP') ?>
</SELECT>
</DIV>
</DIV>

</DIV>
<BR>
<DIV CLASS="CONTAINER" STYLE="DISPLAY: FLEX;">
<DIV CLASS="ROW G-3 ALIGN-ITEMS-CENTER">
<DIV CLASS="COL-AUTO">

216
STI College Naga
<LABEL FOR="INPUTPASSWORD6" CLASS="COL-FORM-
LABEL">SECTION </LABEL>
</DIV>
<DIV CLASS="COL-AUTO">
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT
SELECT EXAMPLE"
ID="SEARCH-SECTION">
<?PHP INCLUDE('PARTIALS/SELELCT_CLASSES.PHP') ?>
</SELECT>
</DIV>
</DIV>
</DIV>
<BR>

</DIV>
<BR>
<HR>

<DIV CLASS="CONTAINER">
<BR>

<DIV CLASS="ATTENDENCETABLE" STYLE="DISPLAY: BLOCK;">
<DIV CLASS="HEADER">
<I CLASS='BX BX-LIST-UL'></I>
<H3>STUDENTS LIST</H3>

<!-- <A HREF="#" CLASS="EXCEL">

<I CLASS="FA FA-FILE-EXCEL-O" ARIA-
HIDDEN="TRUE"></I>
<SPAN>EXCEL</SPAN>
</A>

<A HREF="#" CLASS="REPORT">

217
STI College Naga
<INPUT CLASS="FORM-CONTROL ME-2" TYPE="SEARCH"
PLACEHOLDER="SEARCH" STYLE="MAX-WIDTH: 225PX;HEIGHT: 40PX;" ID="SEARCH-
TEACHER-NAME"
ARIA-LABEL="SEARCH">
<BUTTON CLASS="BTN BTN-SUCCESS" TYPE="BUTTON"
ID="SEARCHTEACHERBYNAMEBTN" DISABLED><I CLASS='BX
BX-SEARCH-ALT'></I></BUTTON>
</DIV>

</DIV>
<HR CLASS="TEXT-DANGER">

<DIV CLASS="CONTAINER" STYLE="DISPLAY: FLEX;">

</DIV>

<DIV CLASS="STUDENTS-TABLE">
<TABLE CLASS="REMOVE-CURSOR-POINTER">
<THEAD>
<TR>
<TH SCOPE="COL" CLASS="THEAD COL-2">#</TH>
<TH SCOPE="COL" CLASS="THEAD COL-2">STUDENT
ID</TH>
<TH SCOPE="COL" CLASS="THEAD COL-5">NAME</TH>
<TH SCOPE="COL" CLASS="THEAD
COL-3">ACTION</TH>
</TR>
</THEAD>

</TABLE>
</DIV>
<DIV ID="DATANOTAVAILABLE">

<DIV CLASS="_FLEX-CONTAINER BOX-HIDE">

218
STI College Naga
</DIV>
<P>NO DATA</P>
</DIV>
</DIV>

</DIV>

</DIV>
<HR CLASS="TEXT-DANGER">

<DIV CLASS="D-GRID GAP-2 D-MD-FLEX JUSTIFY-CONTENT-MD-

END">
<DIV CLASS="BTN-GROUP" ROLE="GROUP" ARIA-LABEL="BASIC
EXAMPLE">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-SECONDARY"
ID="PREV-PAGE-BTN">PREV</BUTTON>
<A CLASS="BTN BTN-SECONDARY DISABLED" ROLE="BUTTON"
ARIA-DISABLED="TRUE"
ID="PAGE-NUMBER">1</A>
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-SECONDARY"
ID="NEXT-PAGE-BTN">NEXT</BUTTON>
</DIV>
</DIV>

</DIV>

</DIV>
</DIV>

<DIV CLASS="TAB-PANE" ID="FEEDBACK" ROLE="TABPANEL" ARIA-

LABELLEDBY="FEEDBACK-TAB" TABINDEX="0">

<?PHP INCLUDE('PARTIALS/STUDENT-SHARED/FEEDBACK-TAB.PHP') ?>

</DIV>

</DIV>
</DIV>

</DIV>

</MAIN>

</DIV>

219
STI College Naga
<SCRIPT SRC="../ASSETS/JS/STUDENT.JS"></SCRIPT>
<?PHP INCLUDE('PARTIALS/_FOOTER.PHP'); ?>

SUBJECTS.PHP

<?PHP INCLUDE('PARTIALS/_HEADER.PHP') ?>

<DIV CLASS="MODAL FADE" ID="EDIT-CONFIRMATION-MODAL" TABINDEX="-1" ARIA-
LABELLEDBY="EXAMPLEMODALLABEL"
ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
</DIV>
<DIV CLASS="MODAL-BODY">
<STRONG>DO YOU REALLY WANT TO EDIT THIS SUBJECT?</STRONG>
</DIV>
<DIV CLASS="MODAL-FOOTER">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-SECONDARY" DATA-BS-
DISMISS="MODAL">CLOSE</BUTTON>
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-DANGER" ID="CONFIRM-EDIT-
BTN">EDIT</BUTTON>
</DIV>
</DIV>
</DIV>
</DIV>

<DIV CLASS="MODAL FADE" ID="DELETE-CONFIRMATION-MODAL" TABINDEX="-1" ARIA-
LABELLEDBY="EXAMPLEMODALLABEL" ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
</DIV>
<DIV CLASS="MODAL-BODY">
<STRONG>DO YOU REALLY WANT TO DELETE THIS SUBJECT?</STRONG>
</DIV>
<DIV CLASS="MODAL-FOOTER">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-SECONDARY" DATA-BS-
DISMISS="MODAL">CLOSE</BUTTON>
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-DANGER"
ONCLICK="DELETESUBJECT()">DELETE</BUTTON>
</DIV>

220
STI College Naga
</DIV>
</DIV>
</DIV>

<DIV CLASS="MODAL MODAL-MD" STYLE="Z-INDEX: 2000;" ID="ADD-SUBJECT"
TABINDEX="-1" ARIA-LABELLEDBY="EXAMPLEMODALLABEL"
ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED MODAL-DIALOG-
SCROLLABLE">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
<H1 CLASS="MODAL-TITLE FS-5" ID="EXAMPLEMODALLABEL">ADD
SUBJECT</H1>
<BUTTON TYPE="BUTTON" CLASS="CLOSE MR-2" DATA-BS-DISMISS="MODAL"
ARIA-LABEL="CLOSE"><I
CLASS='BX BX-X'></I></BUTTON>
</DIV>
<FORM CLASS="NEEDS-VALIDATION" ID="CREATE-SUBJECT-FORM" NOVALIDATE>
<DIV CLASS="MODAL-BODY">
<DIV CLASS="CONTAINER MY-3">

<DIV CLASS="MB-3">
<LABEL FOR="CLASS" CLASS="FORM-LABEL">CLASS</LABEL>
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT SELECT
EXAMPLE" NAME="CLASS" ID="CLASS"
REQUIRED>

<?PHP INCLUDE('PARTIALS/SELECT_CLASSES.PHP') ?>

221
STI College Naga
<DIV CLASS="INVALID-FEEDBACK">
PLEASE SELECT CLASS.
</DIV>
</DIV>

<DIV CLASS="MB-3">
<LABEL FOR="SUBJECT" CLASS="FORM-LABEL">SUBJECT
NAME</LABEL>
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL" NAME="SUBJECT"
ID="NEWSUBJECTNAME"
ARIA-DESCRIBEDBY="EMAILHELP" REQUIRED>
<DIV CLASS="INVALID-FEEDBACK">
THIS FIELD CAN'T BE EMPTY!
</DIV>
</DIV>

</DIV>
</DIV>
<DIV CLASS="MODAL-FOOTER">

<BUTTON TYPE="BUTTON" CLASS="BTN BTN-PRIMARY" ID="ADD-SUBJECT-

BTN">
<DIV><I CLASS='BX
BX-BOOK-ADD'></I>&NBSP;&NBSP;<SPAN>ADD</SPAN></DIV>
</BUTTON>
</DIV>
</FORM>
</DIV>
</DIV>
</DIV>

<DIV CLASS="MODAL MODAL-MD" STYLE="Z-INDEX: 2000;" ID="EDIT-SUBJECT"
TABINDEX="-1" ARIA-LABELLEDBY="EXAMPLEMODALLABEL"
ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED MODAL-DIALOG-
SCROLLABLE">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
<H1 CLASS="MODAL-TITLE FS-5" ID="EXAMPLEMODALLABEL">EDIT
SUBJECT</H1>
<BUTTON TYPE="BUTTON" CLASS="CLOSE MR-2" DATA-BS-DISMISS="MODAL"
ARIA-LABEL="CLOSE"><I
CLASS='BX BX-X'></I></BUTTON>
</DIV>

222
STI College Naga
<FORM CLASS="NEEDS-VALIDATION" ID="EDITSUBJECTFORM" NOVALIDATE>
<DIV CLASS="MODAL-BODY">
<DIV CLASS="CONTAINER MY-3">

<DIV CLASS="MB-3">
<LABEL FOR="SUBJECT" CLASS="FORM-LABEL">SUBJECT NAME</LABEL>
<INPUT TYPE="TEXT" CLASS="FORM-CONTROL" ID="SUBJECT-EDITED-
NAME" NAME="SUBJECT" ARIA-DESCRIBEDBY="EMAILHELP" REQUIRED>
<DIV CLASS="INVALID-FEEDBACK">
PLEASE SELECT CLASS.
</DIV>
</DIV>

</DIV>
</DIV>
<DIV CLASS="MODAL-FOOTER">

<BUTTON TYPE="BUTTON" CLASS="BTN BTN-PRIMARY" ID="SAVE-NEW-

SUBJECT-NAME">
<DIV><SPAN>SAVE</SPAN></DIV>
</BUTTON>

</DIV>
</FORM>
</DIV>
</DIV>
</DIV>


<?PHP INCLUDE('PARTIALS/_SIDEBAR.PHP') ?>
<INPUT TYPE="HIDDEN" VALUE="4" ID="CHECKFILENAME">

223
STI College Naga
<H1>SUBJECTS</H1>
</DIV>
</DIV>
<DIV CLASS="BOTTOM-DATA">

<DIV CLASS="TAB-PANE ACTIVE" ID="PROFILE" ROLE="TABPANEL" ARIA-

LABELLEDBY="PROFILE-TAB"
TABINDEX="0">
<DIV CLASS="SHOWATTENDENCE">
<BR>
<DIV CLASS="HEADER">
<I CLASS='BX BX-RECEIPT'></I>
<H3>SUBJECTS </H3>
<A HREF="#" CLASS="ADD" DATA-BS-TOGGLE="MODAL" DATA-BS-
TARGET="#ADD-SUBJECT"
ONCLICK="REMOVEVALIDATIONS()">
<I CLASS='BX BX-PLUS'></I>
<SPAN>ADD</SPAN>
</A>
</DIV>

<DIV CLASS="ROW G-3 ALIGN-ITEMS-CENTER">

<DIV CLASS="COL-AUTO">
<LABEL FOR="CLASS" CLASS="COL-FORM-LABEL">CLASS
</LABEL>
</DIV>
<DIV CLASS="COL-AUTO">
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT
SELECT EXAMPLE" NAME="CLASS"
ID="SEARCH-CLASS">
<!-- <OPTION SELECTED>12</OPTION>
<OPTION>11</OPTION>
<OPTION>10</OPTION>
<OPTION>9</OPTION>
<OPTION>8</OPTION>
<OPTION>7</OPTION>
<OPTION>6</OPTION>
<OPTION>5</OPTION>
<OPTION>4</OPTION>

224
STI College Naga
<OPTION>3</OPTION>
<OPTION>2</OPTION>
<OPTION>1</OPTION>
<OPTION>PG</OPTION>
<OPTION>LKG</OPTION>
<OPTION>UKG</OPTION> -->
<?PHP INCLUDE('PARTIALS/SELECT_CLASSES.PHP') ?>
</SELECT>
</DIV>
</DIV>
</DIV>
<BR>
<DIV CLASS="CONTAINER">
<A CLASS="FIND" ID="FIND-BTN">
<I CLASS='BX BX-SEARCH-ALT'></I>
<SPAN>FIND</SPAN>
</A>
</DIV>

<DIV CLASS="CONTAINER">
<BR>

<DIV CLASS="ATTENDENCETABLE" STYLE="DISPLAY: BLOCK;">
<DIV CLASS="HEADER">
<I CLASS='BX BX-LIST-UL'></I>
<H3 ID="SUBJECT-TABLE-HEADER">CLASS 12 SUBJECTS</H3>

</DIV>

<HR CLASS="TEXT-DANGER">

<DIV CLASS="STUDENTS-TABLE SUBJECT-TABLE">
<TABLE>
<THEAD>
<TR>
<TH SCOPE="COL" CLASS="THEAD COL-4">#</TH>
<TH SCOPE="COL" CLASS="THEAD
COL-5">SUBJECT</TH>
<TH SCOPE="COL" CLASS="THEAD
COL-3">ACTION</TH>
</TR>

225
STI College Naga
</THEAD>
<TBODY ID="SUBJECT-TABLE-BODY">

</TBODY>
</TABLE>
</DIV>

<DIV ID="DATANOTAVAILABLE">

<DIV CLASS="_FLEX-CONTAINER BOX-HIDE">

</DIV>
</DIV>

</DIV>

</DIV>

</MAIN>

</DIV>

SYLLABUS.PHP

<?PHP INCLUDE('PARTIALS/_HEADER.PHP') ?>

226
STI College Naga

<DIV CLASS="MODAL" STYLE="Z-INDEX: 2000;" ID="UPLOAD-SYLLABUS" TABINDEX="-
1" ARIA-LABELLEDBY="EXAMPLEMODALLABEL"
ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
<H1 CLASS="MODAL-TITLE FS-5" ID="EXAMPLEMODALLABEL">UPLOAD
SYLLABUS</H1>
<BUTTON TYPE="BUTTON" CLASS="CLOSE MR-2" DATA-BS-DISMISS="MODAL"
ARIA-LABEL="CLOSE"><I
CLASS='BX BX-X'></I></BUTTON>
</DIV>
<FORM CLASS="NEEDS-VALIDATION" ID="UPLOADSYLLABUSFORM"
NOVALIDATE>
<DIV CLASS="MODAL-BODY">
<DIV CLASS="CONTAINER">

<DIV CLASS="MB-3">
<LABEL FOR="EXAMPLEINPUTEMAIL1" CLASS="FORM-
LABEL">CLASS</LABEL>
<DIV CLASS="COL-AUTO">
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT SELECT
EXAMPLE" ID="SYLLABUS-CLASS"
NAME="CLASS" REQUIRED>

<?PHP INCLUDE('PARTIALS/SELECT_CLASSES.PHP') ?>
</SELECT>
</DIV>
</DIV>

227
STI College Naga
<DIV CLASS="MB-3">
<LABEL FOR="EXAMPLEINPUTEMAIL1" CLASS="FORM-
LABEL">SUBJECT</LABEL>
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT SELECT
EXAMPLE" ID="SUBJECTLIST"
NAME="SUBJECT" REQUIRED>
</SELECT>
<DIV ID="VALIDATIONSERVER04FEEDBACK" CLASS="INVALID-
FEEDBACK">
PLEASE SELECT A VALID SUBJECT.
</DIV>
</DIV>

<DIV CLASS="MB-3">
<LABEL FOR="FORMFILE" CLASS="FORM-LABEL">UPLOAD PDF
FILE</LABEL><SMALL CLASS="SMALL">&NBSP;(MAX-SIZE 200MB)</SMALL>
<INPUT CLASS="FORM-CONTROL" TYPE="FILE" ID="FORMFILE"
NAME="FILE"
ACCEPT=".PDF, .PNG, .JPG, .JPEG" REQUIRED>
<DIV CLASS="INVALID-FEEDBACK">PLEASE CHOOSE A VALID
FILE.</DIV>
</DIV>

<DIV CLASS="PROGRESS-BOX MB-0" STYLE="HEIGHT: 15PX;">

</DIV>

</DIV>
<DIV CLASS="MODAL-FOOTER">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-PRIMARY"
ID="UPLOADSLLYBUSBTN">
<DIV><I CLASS='BX BXS-CLOUD-UPLOAD'></I></I><SPAN>
UPLOAD</SPAN></DIV>

228
STI College Naga
</BUTTON>
</DIV>
</FORM>
</DIV>
</DIV>
</DIV>


<DIV CLASS="MODAL" STYLE="Z-INDEX: 2000;" ID="UPLOAD-SYLLABUS-ONLYFILE"
TABINDEX="-1"
ARIA-LABELLEDBY="EXAMPLEMODALLABEL" ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
<H1 CLASS="MODAL-TITLE FS-5" ID="EXAMPLEMODALLABEL">UPLOAD
SYLLABUS</H1>
<BUTTON TYPE="BUTTON" CLASS="CLOSE MR-2" DATA-BS-DISMISS="MODAL"
ARIA-LABEL="CLOSE"><I
CLASS='BX BX-X'></I></BUTTON>
</DIV>
<FORM CLASS="NEEDS-VALIDATION" ID="CHANGE-SYLLABUS-FORM"
NOVALIDATE>
<DIV CLASS="MODAL-BODY">
<DIV CLASS="CONTAINER MY-3">

<DIV CLASS="MB-3">
<LABEL FOR="FORMFILE" CLASS="FORM-LABEL">UPLOAD PDF
FILE</LABEL><SMALL CLASS="SMALL">&NBSP;(MAX-SIZE 200MB)</SMALL>
<INPUT CLASS="FORM-CONTROL" TYPE="FILE" ID="CHANGEFORMFILE"
ACCEPT=".PDF, .PNG, .JPEG, .JPG"
REQUIRED>
<DIV CLASS="INVALID-FEEDBACK">PLEASE CHOOSE A VALID
FILE!</DIV>
</DIV>
</DIV>

<DIV CLASS="CONTAINER">
<DIV CLASS="PROGRESS-BOX MB-0" STYLE="HEIGHT: 15PX;">
<DIV CLASS="PROGRESS-BAR-HIDER" ID="CHANGE-FILE-PROGRESS-
HIDER">
<DIV CLASS="PROGRESS" ROLE="PROGRESSBAR" ARIA-
LABEL="ANIMATED STRIPED EXAMPLE"
ARIA-VALUENOW="75" ARIA-VALUEMIN="0" ARIA-
VALUEMAX="100">
<DIV CLASS="PROGRESS-BAR PROGRESS-BAR-STRIPED PROGRESS-
BAR-ANIMATED"

229
STI College Naga
ID="CHANGE-FILE-PROGRESS-POINTER">
</DIV>
</DIV>
</DIV>
</DIV>
</DIV>

</DIV>
<DIV CLASS="MODAL-FOOTER">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-PRIMARY" ID="UPLOAD-NEW-
SYLLABUS">
<DIV><I CLASS='BX BXS-CLOUD-UPLOAD'></I></I><SPAN>
UPLOAD</SPAN></DIV>
</BUTTON>
</DIV>
</FORM>
</DIV>
</DIV>
</DIV>


<?PHP INCLUDE('PARTIALS/_SIDEBAR.PHP') ?>
<INPUT TYPE="HIDDEN" VALUE="6" ID="CHECKFILENAME">

<MAIN>
<DIV CLASS="HEADER">
<DIV CLASS="LEFT">
<H1>SYLLABUS</H1>
</DIV>
</DIV>
<DIV CLASS="BOTTOM-DATA">

<DIV CLASS="TAB-PANE ACTIVE" ID="PROFILE" ROLE="TABPANEL" ARIA-

230
STI College Naga
LABELLEDBY="PROFILE-TAB"
TABINDEX="0">
<DIV CLASS="SHOWATTENDENCE">
<BR>
<DIV CLASS="HEADER">
<I CLASS='BX BX-RECEIPT'></I>
<H3>SYLLABUS </H3>

<A CLASS="UPLOAD-SYLLABUS" ID="OPENUPLOADDIALOG">

<I CLASS='BX BX-CLOUD-UPLOAD'></I>
<SPAN>UPLOAD SYLLABUS</SPAN>
</A>
</DIV>

<DIV CLASS="ROW G-3 ALIGN-ITEMS-CENTER">

<DIV CLASS="COL-AUTO">
<LABEL FOR="INPUTPASSWORD6" CLASS="COL-FORM-
LABEL">CLASS </LABEL>
</DIV>
<DIV CLASS="COL-AUTO">
<SELECT CLASS="FORM-SELECT" ARIA-LABEL="DEFAULT
SELECT EXAMPLE" NAME=""
ID="SELECTED-CLASS">

<?PHP INCLUDE('PARTIALS/SELECT_CLASSES.PHP') ?>
</SELECT>
</DIV>
</DIV>

231
STI College Naga
</DIV>

<HR CLASS="TEXT-DANGER">

<DIV CLASS="SYLLABUS-TABLE">
<TABLE>
<TR>
<TH SCOPE="COL" CLASS="THEAD COL-3">#</TH>
<TH SCOPE="COL" CLASS="THEAD COL-3">SUBJECT</TH>
<TH SCOPE="COL" CLASS="THEAD
COL-6">SYLLABUS</TH>
</TR>

</TBODY>

</TABLE>
</DIV>
<DIV ID="DATANOTAVAILABLE">

<DIV CLASS="_FLEX-CONTAINER BOX-HIDE">

</DIV>

232
STI College Naga

</DIV>
<HR CLASS="TEXT-DANGER">

</DIV>

</DIV>
</DIV>

</DIV>

</MAIN>

</DIV>

TIMETABLE.PHP

<?PHP INCLUDE("../ASSETS/NOSESSIONREDIRECT.PHP"); ?>

<?PHP INCLUDE("./VERIFYROLEREDIRECT.PHP"); ?>

<!DOCTYPE HTML>
<HTML LANG="EN">

<LINK REL="ICON" TYPE="IMAGE/X-ICON" HREF="../IMAGES/1.PNG">

<LINK REL="STYLESHEET" HREF="CSS/BOOTSTRAP.CSS">

233
STI College Naga
<TITLE>SCHOOL MANAGEMENT</TITLE>
<LINK REL="ICON" TYPE="IMAGE/X-ICON" HREF="IMAGES/1.PNG">

</HEAD>

<BODY>

<DIV CLASS='TOAST-CONTAINER POSITION-FIXED TEXT-SUCCESS BOTTOM-0 END-0 P-

3'>
<DIV ID='LIVETOAST' CLASS='TOAST' ROLE='ALERT' ARIA-LIVE='ASSERTIVE' ARIA-
ATOMIC='TRUE' STYLE="COLOR:BLACK;">
<DIV CLASS='D-FLEX'>
<DIV CLASS='TOAST-BODY' ID="TOAST-ALERT-MESSAGE">

</DIV>
<BUTTON TYPE='BUTTON' CLASS='BTN-CLOSE ME-2 M-AUTO TEXT-DANGER'
DATA-BS-DISMISS='TOAST'
ARIA-LABEL='CLOSE'></BUTTON>
</DIV>
</DIV>
</DIV>

<?PHP INCLUDE('PARTIALS/_SIDEBAR.PHP') ?>
<INPUT TYPE="HIDDEN" VALUE="5" ID="CHECKFILENAME">

<MAIN>
<DIV CLASS="HEADER">
<DIV CLASS="LEFT">
<H1>TIME TABLE</H1>
</DIV>
</DIV>

234
STI College Naga

<DIV CLASS="TAB-CONTENT">
<DIV CLASS="TAB-PANE ACTIVE" ID="HOME" ROLE="TABPANEL" ARIA-
LABELLEDBY="HOME-TAB" TABINDEX="0">
<DIV CLASS="CONTAINER">
<BR>

<DIV CLASS="ATTENDENCETABLE" STYLE="DISPLAY: BLOCK;">

<DIV CLASS="HEADER">
<I CLASS='BX BX-RECEIPT'></I>
<H3>TIME TABLE</H3>

</DIV>
<HR>

<BR>
<DIV CLASS="CONTAINER TIMETABLE-FORM">
<DIV CLASS="CONTAINER" STYLE="DISPLAY: FLEX;">
<DIV CLASS="ROW G-3 ALIGN-ITEMS-CENTER">
<DIV CLASS="COL-AUTO">
<LABEL FOR="INPUTPASSWORD6"
CLASS="COL-FORM-
LABEL">&NBSP;&NBSP;CLASS&NBSP;&NBSP; </LABEL>
</DIV>
<DIV CLASS="COL-AUTO">
<SELECT CLASS="FORM-SELECT" ARIA-
LABEL="DEFAULT SELECT EXAMPLE"
ID="SEARCH-CLASS">

<?PHP INCLUDE('PARTIALS/SELECT_CLASSES.PHP') ?>

235
STI College Naga
</SELECT>
</DIV>
</DIV>
</DIV>

<BR>
<DIV CLASS="CONTAINER" STYLE="DISPLAY: FLEX;">
<DIV CLASS="ROW G-3 ALIGN-ITEMS-CENTER">
<DIV CLASS="COL-AUTO">
<LABEL FOR="INPUTPASSWORD6" CLASS="COL-FORM-
LABEL">SECTION </LABEL>
</DIV>
<DIV CLASS="COL-AUTO">
<SELECT CLASS="FORM-SELECT" ARIA-
LABEL="DEFAULT SELECT EXAMPLE"
ID="SEARCH-SECTION">
<OPTION SELECTED>A</OPTION>
<OPTION>B</OPTION>
<OPTION>C</OPTION>
</SELECT>
</DIV>
</DIV>
</DIV>

<BR>

<BUTTON CLASS="FIND" ID="FINDTIMETABLEBTN"

STYLE="BORDER:NONE;">
<I CLASS='BX BX-SEARCH-ALT'></I>
<SPAN>FIND</SPAN>
</BUTTON>
</DIV>
</DIV>

236
STI College Naga
</DIV>

</DIV>

<BR>
</DIV>
<BR>
<DIV CLASS="BOX100 _FLEX-CONTAINER" STYLE="WIDTH:
100%;">
<DIV CLASS="BTN-GROUP ROW" STYLE="WIDTH: 100%;"
ROLE="GROUP"
ARIA-LABEL="BASIC EXAMPLE">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-SECONDARY
COL-AUTO"
STYLE="BORDER: NONE;HEIGHT: 50PX;" ID="PREV-PAGE-
BTN">PREV</BUTTON>
<A CLASS="BTN BTN-PRIMARY _FLEX-CONTAINER DISABLED
COL-AUTO" ROLE="BUTTON"
ARIA-DISABLED="TRUE" STYLE="HEIGHT: 50PX;"
ID="__DAY__">MONDAY</A>
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-SECONDARY
COL-AUTO"
STYLE="BORDER: NONE;HEIGHT: 50PX;" ID="NEXT-PAGE-
BTN">NEXT</BUTTON>
</DIV>
</DIV>

<BR>
<TABLE CLASS="TABLE TABLE-STRIPED SCROLLTABLE"
STYLE="WIDTH: 100%;">
<THEAD>
<TR ID="HEADINGROW" STYLE=" BORDER-BOTTOM: 2PX
SOLID #FBC02D;">

<TH CLASS="TABLEDATA" SCOPE="COL">PERIOD
START</TH>
<TH CLASS="TABLEDATA" SCOPE="COL">PERIOD
END</TH>
<TH CLASS="TABLEDATA" SCOPE="COL">

&NBSP;&NBSP;&NBSP;SUBJECT&NBSP;&NBSP;&NBSP;</TH>
</TR>
</THEAD>
<TBODY ID="TIMETABLE_TABLE1">

237
STI College Naga
</TBODY>
</TABLE>
<DIV CLASS="ALERT ALERT-SUCCESS TEXT-CENTER"
STYLE="OUTLINE-TOP: 1PX SOLID GREY;FONT-
SIZE:LARGER;FONT-WEIGHT: BOLD;"
ROLE="ALERT" ID="LUNCH-ALERT">

</DIV>

<DIV STYLE="POSITION:RELATIVE;BOTTOM:50PX;">
<TABLE CLASS="TABLE TABLE-STRIPED SCROLLTABLE"
STYLE="WIDTH: 100%;">
<THEAD>
<TR STYLE="BORDER:NONE !IMPORTANT;">

<TH CLASS="INVISIABLE" SCOPE="COL">PERIOD
START</TH>
<TH CLASS="INVISIABLE" SCOPE="COL">PERIOD
END</TH>
<TH CLASS="INVISIABLE" SCOPE="COL">

&NBSP;&NBSP;&NBSP;SUBJECT&NBSP;&NBSP;&NBSP;</TH>
</TR>
</THEAD>
<TBODY ID="TIMETABLE_TABLE2">

</TBODY>
</TABLE>

<DIV CLASS="_FLEX-CONTAINER BOX-HIDE">

<DIV CLASS="NO-DATA-BOX">
<DIV CLASS="NO-DATAICON">
<I CLASS='BX BX-PARTY'></I>
</DIV>
<P>HOLIDAY</P>
</DIV>
</DIV>

</DIV>

238
STI College Naga
<BR>
<DIV CLASS="_FLEX-CONTAINER">

<DIV CLASS="CONTAINER LAST-EDITED">

<DIV>
<P>LAST EDITED BY <SPAN ID="LASTEDITOR"></SPAN>
</P>
<SMALL ID="EDITINGTIME"></SMALL>
</DIV>
</DIV>
</DIV>
</DIV>
<HR>
</DIV>
</DIV>

</DIV>

</MAIN>

</DIV>

239
STI College Naga
<SCRIPT SRC="../ASSETS/JS/TIMETABLE.JS"></SCRIPT>
<?PHP INCLUDE('PARTIALS/_FOOTER.PHP'); ?>

PARENTS_PANEL

PROGRESS_DATA.PHP

<?PHP
ERROR_REPORTING(0);
INCLUDE('../../ASSETS/CONFIG.PHP');

$DATA = FILE_GET_CONTENTS("PHP://INPUT");
$INPUT = JSON_DECODE($DATA,TRUE);
$ID = $INPUT['ID'] . "";
$OUTPUT = ARRAY();

$STMT = $CONN->PREPARE("SELECT * FROM `MARKS` WHERE `STUDENT_ID`=?

ORDER BY `S_NO` DESC LIMIT 10");
$STMT->BIND_PARAM("S", $ID);
$STMT->EXECUTE();
$RESULT2 = $STMT->GET_RESULT();

IF ($RESULT2->NUM_ROWS > 0) {
WHILE ($ROW2 = $RESULT2->FETCH_ASSOC()) {
$EXAMID = $ROW2['EXAM_ID'];
$MARK = $ROW2['MARKS'];

$QUERY3 = "SELECT * FROM `EXAMS` WHERE `EXAM_ID`='$EXAMID'";

$RESULT3 = $CONN->QUERY($QUERY3);
$ROW3 = $RESULT3->FETCH_ASSOC();

// FORMATTING DATE
$DATEDB = $ROW3['TIMESTAMP'];
$FORMATTEDDATE = DATE("D-M-Y", STRTOTIME($DATEDB));

// DETERMINING STATUS
$STATUS = "";
IF ((INT)$MARK >= (INT)$ROW3['PASSING_MARKS']) {
$STATUS = "PASS";
} ELSE {

240
STI College Naga
$STATUS = "FAIL";
}

// BUILDING THE OUTPUT ARRAY

$OUTPUT[] = ARRAY(
'S_ID' => $ID,
'EXAM_ID' => $ROW3['EXAM_ID'],
'EXAM_NAME' => $ROW3['EXAM_TITLE'],
'DATE' => $FORMATTEDDATE,
'MARKS' => $MARK,
'STATUS' => $STATUS
);
}

$OUTPUT[] = ARRAY(
'ERROR'=>'FAILED' . $RESULT3->NUM_ROWS
);
}
ELSE{
$OUTPUT[] = ARRAY(
'ERROR'=>'FAILED'
);
}

ECHO JSON_ENCODE($OUTPUT);
?>

EXAM.PHP

<?PHP INCLUDE("../ASSETS/NOSESSIONREDIRECT.PHP"); ?>

<?PHP INCLUDE("./VERIFYROLEREDIRECT.PHP");
$ID = $_SESSION['UID'];
// ERROR_REPORTING(1);
?>

<!DOCTYPE HTML>
<HTML LANG="EN">

<LINK HREF="HTTPS://FONTS.GOOGLEAPIS.COM/ICON?

241
STI College Naga
FAMILY=MATERIAL+ICONS+SHARP" REL="STYLESHEET">
<LINK REL="SHORTCUT ICON" HREF="../IMAGES/IMG.PNG">
<LINK REL="STYLESHEET" HREF="STYLE.CSS">
<SCRIPT SRC="HTTPS://CODE.JQUERY.COM/JQUERY-3.7.1.JS" INTEGRITY="SHA256-
EKHAYI8LEQWP4NKXN+CFCH+3QOVUTJN3QNZ0TCIWLP4="
CROSSORIGIN="ANONYMOUS"></SCRIPT>
<SCRIPT
SRC="HTTPS://AJAX.GOOGLEAPIS.COM/AJAX/LIBS/JQUERY/3.4.1/JQUERY.MIN.JS">
</SCRIPT>

<STYLE>
BODY {
OVERFLOW: HIDDEN;
}

HEADER {
POSITION: RELATIVE;
}

.CURSOR-POINTER{
CURSOR: POINTER;
}

.EXAM {
DISPLAY: FLEX;
ALIGN-ITEMS: CENTER;
/* JUSTIFY-CONTENT: CENTER; */
FLEX-DIRECTION: COLUMN;
HEIGHT: 80VH;
WIDTH: 80%;
MARGIN: AUTO;
}

#GFG {
BACKGROUND-IMAGE: URL('SEARCH.SVG');
/* ADD A SEARCH ICON TO INPUT */
BACKGROUND-POSITION: 5PX 2PX;
/* POSITION THE SEARCH ICON */
BACKGROUND-REPEAT: NO-REPEAT;
/* DO NOT REPEAT THE ICON IMAGE */
WIDTH: 90%;
/* FULL-WIDTH */
FONT-SIZE: 16PX;
/* INCREASE FONT-SIZE */
PADDING: 12PX 20PX 12PX 40PX;

242
STI College Naga
/* ADD SOME PADDING */
BORDER: 1PX SOLID #DDD;
/* ADD A GREY BORDER */
MARGIN-BOTTOM: 12PX;
/* ADD SOME SPACE BELOW THE INPUT */
BORDER-RADIUS: 40PX;
POSITION: RELATIVE;
}

@MEDIA ONLY SCREEN AND (MAX-WIDTH: 768PX) {

#GFG {
WIDTH: 100%;
MARGIN: 0%;
}
}
.SUBJECTIVE-RESULT-BTN{
PADDING: 5PX 15PX;
BACKGROUND-COLOR: #C9EFF6;
CURSOR: POINTER;
}
.DARK-THEME .SUBJECTIVE-RESULT-BTN{
COLOR: BLACK;
}

.EXAM {
HEIGHT: FIT-CONTENT;
}

.VERTICAL-ELEMENTS {
DISPLAY: FLEX;
FLEX-DIRECTION: COLUMN;
}

TABLE {
MARGIN-BOTTOM: 3REM;
}

.HIDE {
DISPLAY: NONE !IMPORTANT;
}

BODY {
-MS-OVERFLOW-STYLE: NONE;
/* INTERNET EXPLORER 10+ */
SCROLLBAR-WIDTH: NONE;
/* FIREFOX */

243
STI College Naga
}

BODY::-WEBKIT-SCROLLBAR {
DISPLAY: NONE;
/* SAFARI AND CHROME */
}
</STYLE>
</HEAD>

<BODY STYLE="OVERFLOW-Y: SCROLL;">

<HEADER>
<DIV CLASS="LOGO">
<IMG SRC="../IMAGES/IMG.PNG" ALT="">
<H2>EMIS</H2>
</DIV>
<DIV CLASS="NAVBAR">
<A HREF="INDEX.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">HOME</SPAN>
<H3>HOME</H3>
</A>
<A HREF="TIMETABLE.PHP" ONCLICK="TIMETABLEALL()">
<SPAN CLASS="MATERIAL-ICONS-SHARP">TODAY</SPAN>
<H3>TIME TABLE</H3>
</A>
<A HREF="EXAM.PHP" CLASS="ACTIVE">
<SPAN CLASS="MATERIAL-ICONS-SHARP">GRID_VIEW</SPAN>
<H3>MARKS</H3>
</A>
<A HREF="WORKSPACE.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">DESCRIPTION</SPAN>
<H3>NOTES</H3>
</A>
<A HREF="PASSWORD.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">PASSWORD</SPAN>
<H3>CHANGE PASSWORD</H3>
</A>
<A HREF="LOGOUT.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">LOGOUT</SPAN>
<H3>LOGOUT</H3>
</A>
</DIV>
<DIV ID="PROFILE-BTN" STYLE="DISPLAY: NONE;">
<SPAN CLASS="MATERIAL-ICONS-SHARP">PERSON</SPAN>
</DIV>
<DIV CLASS="THEME-TOGGLER">
<SPAN CLASS="MATERIAL-ICONS-SHARP ACTIVE">LIGHT_MODE</SPAN>

244
STI College Naga
<SPAN CLASS="MATERIAL-ICONS-SHARP">DARK_MODE</SPAN>
</DIV>
</HEADER>

<MAIN>
<DIV CLASS="EXAM TIMETABLE">
<H2><?PHP ECHO "<A HREF='PROGRESS.PHP'>MARKS</A>"; ?></H2>

<TABLE CLASS="ALLRESULTTABLE" ID="ALLRESULTLIST">

<THEAD>
<TR>
<TH>DATE</TH>
<TH>SUBJECT</TH>
<TH>TITLE</TH>
<TH>OBTAIN MARKS</TH>
<TH>TOTAL MARKS</TH>
<TH>GRADE</TH>
</TR>
</THEAD>
<INPUT ID="GFG" CLASS="MARKS-TABLE-SEARCH-BOX" TYPE="TEXT"
PLACEHOLDER="SEARCH FOR TITLE ,DATE ,SUBJECTS OR GRADE">
<TBODY ID="GEEKS">
<?PHP

$QUERY2 = "SELECT DISTINCT(`EXAM_ID`) FROM `MARKS` WHERE

`STUDENT_ID` = ? ORDER BY `S_NO` DESC LIMIT 50";
$STMT2 = $CONN->PREPARE($QUERY2);
$STMT2->BIND_PARAM("S", $ID);
$STMT2->EXECUTE();
$RESULT2 = $STMT2->GET_RESULT();

IF ($RESULT2->NUM_ROWS > 0) {
WHILE ($ROW2 = $RESULT2->FETCH_ASSOC()) {
$EXAMID = $ROW2['EXAM_ID'];

$QUERY3 = "SELECT * FROM `EXAMS` WHERE `EXAM_ID` = ?";

$STMT3 = $CONN->PREPARE($QUERY3);
$STMT3->BIND_PARAM("S", $EXAMID);
$STMT3->EXECUTE();
$RESULT3 = $STMT3->GET_RESULT();
$ROW3 = $RESULT3->FETCH_ASSOC();

$DATEDB = $ROW3['TIMESTAMP'];
$FORMATTEDDATE = DATE("D-M-Y", STRTOTIME($DATEDB));

$STATUS = "";

245
STI College Naga
IF ($ROW3['SUBJECT'] == "ALL") {
$SQL = "SELECT * FROM `MARKS` WHERE `EXAM_ID` = ? AND
`STUDENT_ID` = ?";
$STMT4 = $CONN->PREPARE($SQL);
$STMT4->BIND_PARAM("SS", $ROW3['EXAM_ID'], $ID);
$STMT4->EXECUTE();
$MARKSRESULT = $STMT4->GET_RESULT();

$TOTALGAINMARKS = 0;
$SUBJECTCOUNT = 0;
$ISFAIL = FALSE;
WHILE ($TEMPROW = $MARKSRESULT->FETCH_ASSOC()) {
$TOTALGAINMARKS += (INT)$TEMPROW['MARKS'];
$SUBJECTCOUNT++;

IF ((INT)$TEMPROW['MARKS'] < (INT)$ROW3['PASSING_MARKS']) {

$ISFAIL = TRUE;
}
}

$STATUS = $ISFAIL ? "<TD STYLE='COLOR:RED;TEXT-

ALIGN:CENTER;'>FAIL</TD>" : "<TD STYLE='COLOR:GREEN;TEXT-
ALIGN:CENTER;'>PASS</TD>";

" <TD>$FORMATTEDDATE</TD>
ECHO
<TD><A CLASS='NO-SUBMIT SUBJECTIVE-RESULT-BTN CURSOR-
POINTER' ID='HIT' ONCLICK='HANDLESHOWALLSUBJECTMARKS(`" . $ROW3['EXAM_ID'] .
"`)'>" . $ROW3['SUBJECT'] . "</A></TD>
<TD>" . $ROW3['EXAM_TITLE'] . "</TD>
<TD STYLE='TEXT-ALIGN:CENTER;'>$TOTALGAINMARKS</TD>
<TD STYLE='TEXT-ALIGN:CENTER;'>". ($SUBJECTCOUNT *
$ROW3['TOTAL_MARKS']) ."</TD>
$STATUS
</TR>";
} ELSE {
$SQL = "SELECT * FROM `MARKS` WHERE `EXAM_ID` = ? AND
`STUDENT_ID` = ? AND `SUBJECT`=? LIMIT 1";
$STMT4 = $CONN->PREPARE($SQL);
$STMT4->BIND_PARAM("SSS", $ROW3['EXAM_ID'], $ID,
$ROW3['SUBJECT']);
$STMT4->EXECUTE();
$MARKSRESULT = $STMT4->GET_RESULT();
$MARKSRESULTROW = $MARKSRESULT->FETCH_ASSOC();
$MARK = $MARKSRESULTROW['MARKS'];

246
STI College Naga
$STATUS = ((INT)$MARK >= (INT)$ROW3['PASSING_MARKS']) ? "<TD
STYLE='COLOR:GREEN;TEXT-ALIGN:CENTER;'>PASS</TD>" : "<TD
STYLE='COLOR:RED;TEXT-ALIGN:CENTER;'>FAIL</TD>";

ECHO "
<TD>$FORMATTEDDATE</TD>
<TD>" . $ROW3['SUBJECT'] . "</TD>
<TD>" . $ROW3['EXAM_TITLE'] . "</TD>
<TD STYLE='TEXT-ALIGN:CENTER;'>$MARK</TD>
<TD STYLE='TEXT-ALIGN:CENTER;'>" . $ROW3['TOTAL_MARKS'] .
"</TD>
$STATUS
</TR>";
}

$STMT3->CLOSE();
IF (ISSET($STMT4)) {
$STMT4->CLOSE();
}
}
}ELSE{
ECHO '<TD COLSPAN="6" STYLE="TEXT-ALIGN:CENTER;PADDING-TOP:
3REM;">NO DATA</TD>';
}

$STMT2->CLOSE();

?>
</TBODY>
</TABLE>

<DIV CLASS="VERTICAL-ELEMENTS" ID="SUBJECTIVERESULTTABLE">

</DIV>

<SCRIPT>
$(DOCUMENT).READY(FUNCTION() {
$("#GFG").ON("KEYUP", FUNCTION() {
VAR VALUE = $(THIS).VAL().TOLOWERCASE();
$("#GEEKS TR").FILTER(FUNCTION() {
$(THIS).TOGGLE($(THIS).TEXT()
.TOLOWERCASE().INDEXOF(VALUE) > -1)
});
});
});
</SCRIPT>

247
STI College Naga
</DIV>
</MAIN>

</BODY>

</HTML>

FETCHATTENDANCE.PHP

<?PHP
ERROR_REPORTING(0);
INCLUDE('../ASSETS/CONFIG.PHP');
$RESPONSE="";
SESSION_START();
IF($_SERVER['REQUEST_METHOD']=="POST"){

$MONTH = DATE('M');

$ID=$_SESSION['UID'];
$QUERY="SELECT * FROM ATTENDENCE WHERE (STUDENT_ID='$ID') AND
(MONTH(`DATE`)='$MONTH');";

$RESULT=$CONN->QUERY($QUERY);
IF($RESULT->NUM_ROWS>0){

WHILE($ROW = $RESULT->FETCH_ASSOC()){

$STATUS = "";
IF($ROW['ATTENDENCE'] == "1"){
$STATUS = " <TD STYLE='COLOR:GREEN;'>PRESENT</TD>";
}ELSE{
$STATUS = " <TD STYLE='COLOR:RED;'>ABSENT</TD>";
}

$RESPONSE .=' <TR>

<TD>'.DATE("D-M-Y",STRTOTIME($ROW['DATE']."")).'</TD>
'.$STATUS.'
</TR>';
}

248
STI College Naga
}
ELSE{

}
ELSE {
$RESPONSE="SOMETHING WENT WRONG";
}
ECHO $RESPONSE;
?>

ATTENDANCEPERCENTAGE.PHP

<?PHP
INCLUDE('../ASSETS/CONFIG.PHP');
SESSION_START();

$RESPONSE = ARRAY();

IF ($_SERVER['REQUEST_METHOD'] == "POST") {

$JSON_DATA = FILE_GET_CONTENTS("PHP://INPUT");
$DATA = JSON_DECODE($JSON_DATA, TRUE);

$ID=$_SESSION['UID'];
$MONTH = DATE('M');

$PRESENTQUERY = "SELECT COUNT(*) FROM `ATTENDENCE` WHERE

`STUDENT_ID` = ? AND `ATTENDENCE` = ?";
$STMT2 = MYSQLI_PREPARE($CONN, $PRESENTQUERY);
$TEMP = "1";
MYSQLI_STMT_BIND_PARAM($STMT2, "SS", $ID, $TEMP);
MYSQLI_STMT_EXECUTE($STMT2);
MYSQLI_STMT_BIND_RESULT($STMT2, $PRESENTCOUNT);
MYSQLI_STMT_FETCH($STMT2);
MYSQLI_STMT_CLOSE($STMT2);

$WORKINGDAYSQUERY = "SELECT COUNT(DISTINCT

DATE_FORMAT(`DATE`, '%Y-%M-%D')) FROM `ATTENDENCE`;";
$STMT3 = MYSQLI_PREPARE($CONN, $WORKINGDAYSQUERY);
MYSQLI_STMT_EXECUTE($STMT3);
MYSQLI_STMT_BIND_RESULT($STMT3, $WORKINGDAYS);
MYSQLI_STMT_FETCH($STMT3);
MYSQLI_STMT_CLOSE($STMT3);

249
STI College Naga
$PRESENT = (INT) $PRESENTCOUNT;
$PERCENTPRESENT = 0;
IF ($WORKINGDAYS != 0) {
$PERCENTPRESENT = (FLOAT) (($PRESENT / $WORKINGDAYS) * 100);
}

$ABSENTPRESENT = 100 - $PERCENTPRESENT ;

$RESPONSE['STATUS'] = "SUCCESS";
$RESPONSE['PRESENT'] = $PERCENTPRESENT;
$RESPONSE['ABSENT'] = $ABSENTPRESENT;

}ELSE{
$RESPONSE['STATUS'] = "ERROR";
$RESPONSE['MESSAGE'] = "SOMETHING WENT WRONG!";

}
ECHO JSON_ENCODE($RESPONSE);
?>

TIMETABLE.PHP

<?PHP
INCLUDE('../ASSETS/CONFIG.PHP');
$RESPONSE = ARRAY();
SESSION_START();

IF ($_SERVER["REQUEST_METHOD"] == "POST") {
$ID = $_SESSION['UID'];
$SQL = "SELECT `CLASS`,`SECTION` FROM `STUDENTS` WHERE `ID`='$ID'";
$RESULT = MYSQLI_QUERY($CONN, $SQL);
$ROW = $RESULT->FETCH_ASSOC();

$CLASS = $ROW['CLASS'];
$SECTION = $ROW['SECTION'];

$QUERY = "SELECT * FROM `TIME_TABLE` WHERE `CLASS`='$CLASS' AND

`SECTION`='$SECTION'";
$RESULT2 = MYSQLI_QUERY($CONN, $QUERY);

$DAYSOFWEEK = ARRAY('MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT');

$RESPONSE['STATUS'] = "SUCCESS";
$TIMETABLE = ARRAY();

250
STI College Naga
WHILE ($ROW2 = $RESULT2->FETCH_ASSOC()) {
FOREACH ($DAYSOFWEEK AS $DAY) {
$TIMETABLE[$DAY][] = ARRAY(
"START_TIME" => $ROW2['START_TIME'],
"SUBJECT" => $ROW2[$DAY],
"END_TIME"=> $ROW2['END_TIME']

);
}
}

$RESPONSE['DATA'] = $TIMETABLE;
} ELSE {
$RESPONSE['STATUS'] = "ERROR";
}

ECHO JSON_ENCODE($RESPONSE);
?>

INDEX.PHP

<?PHP INCLUDE("../ASSETS/NOSESSIONREDIRECT.PHP"); ?>

<?PHP INCLUDE("./VERIFYROLEREDIRECT.PHP"); ?>

<!DOCTYPE HTML>
<HTML LANG="EN">

<HEAD>
<META CHARSET="UTF-8">
<META HTTP-EQUIV="X-UA-COMPATIBLE" CONTENT="IE=EDGE">
<META NAME="VIEWPORT" CONTENT="WIDTH=DEVICE-WIDTH, INITIAL-SCALE=1.0">
<TITLE>EMIS: SAN AGUSTIN ELEMENTARY SCHOOL</TITLE>
<LINK REL="SHORTCUT ICON" HREF="../IMAGES/IMG.PNG">
<LINK HREF="HTTPS://FONTS.GOOGLEAPIS.COM/ICON?
FAMILY=MATERIAL+ICONS+SHARP" REL="STYLESHEET">
<LINK REL="STYLESHEET" HREF="STYLE.CSS">
<LINK HREF='HTTPS://UNPKG.COM/[email protected]/CSS/BOXICONS.MIN.CSS'
REL='STYLESHEET'>

<STYLE TYPE="TEXT/CSS">
.CONTAINER MAIN .SUBJECTS .EG #PIECHART {
WIDTH: 600PX;
HEIGHT: 350PX;
PADDING-RIGHT: 0%;
POSITION: RELATIVE;

251
STI College Naga
BORDER-RADIUS: 20PX;
}

.CONTAINER MAIN .SUBJECTS .EG {

BORDER-RADIUS: 20PX;
}

@MEDIA SCREEN AND (MAX-WIDTH: 700PX) {

.CONTAINER MAIN .SUBJECTS .EG #PIECHART {
WIDTH: 250PX;
HEIGHT: 200PX;
PADDING-LEFT: 0%;
PADDING-RIGHT: 0%;

}
.CONTAINER MAIN .SUBJECTS{
MARGIN-LEFT: 4%;
}
.LEAVES{
WIDTH: 106%;
/*MARGIN-LEFT: 5%;*/
FONT-SIZE: 10PX;
PADDING-RIGHT: 0;
}

#MYINPUT {
BACKGROUND-IMAGE: URL('SEARCH.SVG');
/* ADD A SEARCH ICON TO INPUT */
BACKGROUND-POSITION: 5PX 2PX;
/* POSITION THE SEARCH ICON */
BACKGROUND-REPEAT: NO-REPEAT;
/* DO NOT REPEAT THE ICON IMAGE */
WIDTH: 80%;
/* FULL-WIDTH */
FONT-SIZE: 16PX;
/* INCREASE FONT-SIZE */
PADDING: 12PX 20PX 12PX 40PX;
/* ADD SOME PADDING */
BORDER: 1PX SOLID #DDD;
/* ADD A GREY BORDER */
MARGIN-BOTTOM: 12PX;
/* ADD SOME SPACE BELOW THE INPUT */
BORDER-RADIUS: 40PX;
POSITION: RELATIVE;

252
STI College Naga
}

#MYTABLE {
WIDTH: 80%;
/* FULL-WIDTH */
BORDER: 1PX SOLID #DDD;
/* ADD A GREY BORDER */
FONT-SIZE: 15PX;
/* INCREASE FONT-SIZE */
BORDER-RADIUS: 40PX;
POSITION: RELATIVE;
}

#MYTABLE TH {
BACKGROUND-COLOR: #A9A9A9;
COLOR: WHITE;
}

#MYTABLE TH,
#MYTABLE TD {
TEXT-ALIGN: CENTER;
/* LEFT-ALIGN TEXT */
PADDING: 12PX;
/* ADD PADDING */
BORDER-RADIUS: 16PX;
}

#MYTABLE TR {
/* ADD A BOTTOM BORDER TO ALL TABLE ROWS */
BORDER-BOTTOM: 1PX SOLID #DDD;
BORDER-RADIUS: 40PX;
TEXT-ALIGN: CENTER;
}

#MYTABLE TR.HEADER,
#MYTABLE TR:HOVER {
/* ADD A GREY BACKGROUND COLOR TO THE TABLE HEADER AND ON HOVER */
BACKGROUND-COLOR: #F1F1F1;
}

@MEDIA ONLY SCREEN AND (MAX-WIDTH: 768PX) {

#MYTABLE {
WIDTH: 95%;
MARGIN: 0%;
FONT-SIZE: 12.5PX;
}

253
STI College Naga
#MYINPUT {
WIDTH: 95%;
MARGIN: 0%;
}
}
</STYLE>
</HEAD>

<BODY>
<HEADER>
<DIV CLASS="LOGO" TITLE="EDUCATION MANAGEMENT SYSTEM">
<IMG SRC="../IMAGES/IMG.PNG" ALT="">
<H2>EMIS</H2>
</DIV>
<DIV CLASS="NAVBAR">
<A HREF="INDEX.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">HOME</SPAN>
<H3>HOME</H3>
</A>
<A HREF="TIMETABLE.PHP" ONCLICK="TIMETABLEALL()">
<SPAN CLASS="MATERIAL-ICONS-SHARP">TODAY</SPAN>
<H3>SCHEDULES</H3>
</A>
<A HREF="EXAM.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">GRID_VIEW</SPAN>
<H3>MARKS</H3>
</A>
<A HREF="WORKSPACE.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">DESCRIPTION</SPAN>
<H3>NOTES</H3>
</A>
<A HREF="PASSWORD.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">PASSWORD</SPAN>
<H3>CHANGE PASSWORD</H3>
</A>
<A HREF="LOGOUT.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP" ONCLICK="">LOGOUT</SPAN>
<H3>LOGOUT</H3>
</A>
</DIV>
<DIV ID="PROFILE-BTN">
<SPAN CLASS="MATERIAL-ICONS-SHARP">PERSON</SPAN>
</DIV>
<DIV CLASS="THEME-TOGGLER">
<SPAN CLASS="MATERIAL-ICONS-SHARP ACTIVE">LIGHT_MODE</SPAN>

254
STI College Naga
<SPAN CLASS="MATERIAL-ICONS-SHARP">DARK_MODE</SPAN>
</DIV>

</HEADER>
<DIV CLASS="CONTAINER">
<ASIDE>
<DIV CLASS="PROFILE">
<DIV CLASS="TOP">
<?PHP

$ID = $_SESSION['UID'];
$QUERY_SQL = "SELECT * FROM STUDENTS WHERE ID='$ID'";
$RESULT = MYSQLI_QUERY($CONN, $QUERY_SQL);
$ROW = $RESULT->FETCH_ASSOC();
ECHO "<DIV CLASS='PROFILE-PHOTO'>
<IMG SRC='../STUDENTUPLOADS/" . $ROW['IMAGE'] . "'>
</DIV>";
?>

<DIV CLASS="INFO">
<?PHP
SESSION_START();
$ID = $_SESSION['UID'];
$QUERY = "SELECT * FROM STUDENTS WHERE ID='$ID'";
$RESULT = $CONN->QUERY($QUERY);
IF ($RESULT->NUM_ROWS > 0) {
WHILE ($ROW = $RESULT->FETCH_ASSOC()) {
ECHO "
<P>HEY, <B>" . $ROW["FNAME"] . "</B> </P>
<SMALL CLASS='TEXT-MUTED'><B>ID&NBSP;:&NBSP;</B>" .
$ROW["ID"] . "</SMALL>";
}
}
?>

</DIV>
</DIV>
<DIV CLASS="ABOUT">
<?PHP
$QUERY = "SELECT * FROM STUDENTS WHERE ID='$ID'";
$RESULT = $CONN->QUERY($QUERY);
IF ($RESULT->NUM_ROWS > 0) {
WHILE ($ROW = $RESULT->FETCH_ASSOC()) {
ECHO "<P><H5>GRADE : " . $ROW["CLASS"] . "</H5></P>
<P>SECTION " . $ROW["SECTION"] . "</P>
<H5>BIRTH-DATE</H5>

255
STI College Naga
<P>" . $ROW["DOB"] . "</P>
<H5>CONTACT NO.</H5>
<P>" . $ROW["PHONE"] . "</P>
<H5>EMAIL ADDRESS</H5>
<P>" . $ROW["EMAIL"] . "</P>
<H5>ADDRESS</H5>
<P>" . $ROW["ADDRESS"] . "</P>";
}
}

?>
</DIV>
</DIV>
</ASIDE>

<MAIN>
<H1>ATTENDANCE</H1>
<DIV CLASS="SUBJECTS">
<DIV CLASS="EG">
<DIV ID="PIECHART"></DIV>

</DIV>
</DIV>

<DIV CLASS="LEAVES " STYLE="MARGIN-TOP: 20PX;">

<H2>MODULES</H2>
<?PHP
$ID = $_SESSION['UID'];
$QUERY_SQL = "SELECT * FROM STUDENTS WHERE ID='$ID'";
$RESULT = MYSQLI_QUERY($CONN, $QUERY_SQL);
$ROW = $RESULT->FETCH_ASSOC();
$CLASS = $ROW['CLASS'];

$SQL2 = "SELECT * FROM SYLLABUS WHERE CLASS='$CLASS'";

$RESULT2 = MYSQLI_QUERY($CONN, $SQL2);
IF ($RESULT2->NUM_ROWS > 0) {
WHILE ($ROW2 = $RESULT2->FETCH_ASSOC()) {
ECHO "<DIV CLASS='TEACHER'>
<DIV CLASS='PROFILE-PHOTO'>
<A HREF='../SYLLABUSUPLOADS/" . $ROW2['FILE'] . "'>
<IMG SRC='./IMAGES/PROFILE-2.PNG' ALT=''></DIV>
<DIV CLASS='INFO'>
<H3>" . $ROW2['SUBJECT'] . "</H3>
<SMALL CLASS='TEXT-MUTED'>DOWNLOAD OR VIEW</SMALL>
</A>
</DIV>

256
STI College Naga
</DIV>";
}
} ELSE {
ECHO '<P STYLE="PADDING-LEFT: 20PX;MARGIN-TOP: 10PX;">SYLLABUS
NOT UPLOADED YET!</P>';
}
?>

</DIV>
<DIV CLASS="TIMETABLE" ID="TIMETABLE">
<H2>MONTHLY ATTENDANCE</H2>
<INPUT TYPE="TEXT" ID="MYINPUT" ONKEYUP="MYFUNCTION()"
PLACEHOLDER="SEARCH FOR DATE...">

<TABLE ID="MYTABLE">
<TR CLASS="HEADER">
<TH STYLE="WIDTH:60%;">DATE</TH>
<TH STYLE="WIDTH:40%;">ATTENDANCE</TH>
</TR>
<TBODY ID="ATTENDENCE_TABLE">

</TBODY>
</TABLE>
<BR><BR>
</DIV>
</MAIN>

<DIV CLASS="RIGHT">
<DIV CLASS="ANNOUNCEMENTS">
<H2>ANNOUNCEMENTS</H2>
<DIV CLASS="UPDATES">
<DIV CLASS="MESSAGE">
<?PHP
$ID = $_SESSION['UID'];
$QUERY_SQL2 = "SELECT * FROM STUDENTS WHERE ID='$ID'";
$RESULT = MYSQLI_QUERY($CONN, $QUERY_SQL2);
$ROW = $RESULT->FETCH_ASSOC();
$CLASS = $ROW['CLASS'];

$SQL_QUERY = "SELECT * FROM NOTICE WHERE (ROLE = 'STUDENT' AND

CLASS='$CLASS') OR (ROLE = 'ALL' OR ROLE='') ORDER BY S_NO DESC LIMIT 3";
$RESULT = MYSQLI_QUERY($CONN, $SQL_QUERY);
IF ($RESULT->NUM_ROWS > 0) {
WHILE ($ROW = $RESULT->FETCH_ASSOC()) {
ECHO "<P> <B>" . $ROW['TITLE'] . "</B> <BR>" . $ROW['BODY'] . "<BR></P>";
IF ($ROW['FILE'] != NULL) {

257
STI College Naga
ECHO "<A HREF='../NOTICEUPLOADS/" . $ROW['FILE'] . "'><IMG SRC='FILE.SVG'
HEIGHT='30PX' WIDTH='30PX'><P STYLE='COLOR:RED;'>VIEW NOTICE</P></A>";
}
ECHO "<SMALL CLASS='TEXT-MUTED'><B>" . $ROW['TIMESTAMP'] .
"</B></SMALL><HR><BR>";
}
}
?>

</DIV>

</DIV>
</DIV>

<DIV CLASS="LEAVES">
<H2>MESSAGES</H2>
<?PHP
$ID = $_SESSION['UID'];

$SQL2 = "SELECT * FROM `FEEDBACK` WHERE `RECEIVER_ID`='$ID' LIMIT

5";
$RESULT2 = MYSQLI_QUERY($CONN, $SQL2);
IF ($RESULT2->NUM_ROWS > 0) {
WHILE ($ROW2 = $RESULT2->FETCH_ASSOC()) {
$TIMESTAMP = $ROW2['TIMESTAMP'];
$FORMATTEDDATE = DATE('D M, Y', STRTOTIME($TIMESTAMP));

$SENDERID = $ROW2['SENDER_ID'];
$TABLENAME = ($SENDERID >= 1000) ? 'ADMINS' : 'TEACHERS';
$SQL = "SELECT `FNAME`, `LNAME` FROM `$TABLENAME` WHERE ID
= '$SENDERID' LIMIT 1";

$RESULT = MYSQLI_QUERY($CONN, $SQL);

IF ($RESULT->NUM_ROWS > 0) {
$ROW = $RESULT->FETCH_ASSOC();
$SENDER = UCFIRST(STRTOLOWER($ROW['FNAME'])) . " " .
STRTOLOWER($ROW['LNAME']);
} ELSE {
$SENDER = "REMOVED";
}

ECHO "<DIV CLASS='TEACHER'>

258
STI College Naga
" . $ROW2['MSG'] . "</P>
<DIV CLASS='FLEXBOX' STYLE='MARGIN-TOP: 8PX;'>
<SMALL>" . $FORMATTEDDATE . "</SMALL>
<SMALL STYLE='MARGIN-LEFT: AUTO;'>" . $SENDER . "</SMALL>
</DIV>
</DIV>
</DIV>";
}
}ELSE{
ECHO "<DIV CLASS='TEACHER'>
<DIV CLASS='INFO' STYLE='WIDTH: 100%;'>
<P CLASS='TEXT-MUTED PARA-TEXT'>
<I CLASS='BX BXS-CHAT' ></I>
NO MESSAGES</P>

</DIV>
</DIV>";
}
?>

</DIV>

</DIV>
</DIV>

<SCRIPT TYPE="TEXT/JAVASCRIPT"
SRC="HTTPS://WWW.GSTATIC.COM/CHARTS/LOADER.JS"></SCRIPT>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
LET PRESENTPER = 30;
LET ABSENTPER = 70;

DOCUMENT.ADDEVENTLISTENER("DOMCONTENTLOADED", FUNCTION() {
FETCH("FETCHATTENDENCEPERCENTAGE.PHP", {
METHOD: "POST",
})
.THEN(RESPONSE => RESPONSE.JSON())
.THEN(DATA => {

IF (DATA['STATUS'] === "SUCCESS") {

PRESENTPER = PARSEFLOAT(DATA['PRESENT']);
ABSENTPER = PARSEFLOAT(DATA['ABSENT']);

GOOGLE.CHARTS.LOAD("CURRENT", {
PACKAGES: ["CORECHART"]
});

259
STI College Naga
GOOGLE.CHARTS.SETONLOADCALLBACK(DRAWCHART);

} ELSE {
ALERT("SOMETHING WENT WRONG!");
}
})
.CATCH(ERROR => {
CONSOLE.ERROR("ERROR" + ERROR)
})
});

FUNCTION DRAWCHART() {
VAR DATA = GOOGLE.VISUALIZATION.ARRAYTODATATABLE([
['ATTANDENCE', 'PERCENTAGE'],
['PRESENT', PRESENTPER],
['ABSENT', ABSENTPER],
]);

VAR OPTIONS = {
LEGEND: 'NONE',
PIESLICETEXT: 'LABEL',
TITLE: 'STUDENT ATTENDENCE ALL TIME',
PIESTARTANGLE: 100,
};

VAR CHART = NEW

GOOGLE.VISUALIZATION.PIECHART(DOCUMENT.GETELEMENTBYID('PIECHART'));
CHART.DRAW(DATA, OPTIONS);
}
</SCRIPT>

<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="APP.JS"></SCRIPT>

<SCRIPT TYPE="TEXT/JAVASCRIPT" SRC="INDEX.JS"></SCRIPT>
</BODY>

</HTML>

PASSWORD.PHP

<?PHP INCLUDE("../ASSETS/NOSESSIONREDIRECT.PHP"); ?>

<?PHP INCLUDE("./VERIFYROLEREDIRECT.PHP"); ?>
<?PHP

260
STI College Naga
$ID = $_SESSION['UID'];
?>
<!DOCTYPE HTML>
<HTML LANG="EN">
<HEAD>
<META CHARSET="UTF-8">
<META HTTP-EQUIV="X-UA-COMPATIBLE" CONTENT="IE=EDGE">
<META NAME="VIEWPORT" CONTENT="WIDTH=DEVICE-WIDTH, INITIAL-SCALE=1.0">
<TITLE>EMIS: SAN AGUSTIN ELEMENTARY SCHOOL</TITLE>
<LINK HREF="HTTPS://FONTS.GOOGLEAPIS.COM/ICON?
FAMILY=MATERIAL+ICONS+SHARP" REL="STYLESHEET">
<LINK REL="SHORTCUT ICON" HREF="../IMAGES/IMG.PNG">
<LINK REL="STYLESHEET" HREF="STYLE.CSS">

<STYLE>
HEADER{POSITION: RELATIVE;}
.CHANGE-PASSWORD-CONTAINER{
DISPLAY: FLEX;
ALIGN-ITEMS: CENTER;
JUSTIFY-CONTENT: CENTER;
WIDTH: 100%;
HEIGHT: 90VH;
}
.CHANGE-PASSWORD-CONTAINER FORM{
DISPLAY: FLEX;
FLEX-DIRECTION: COLUMN;
JUSTIFY-CONTENT: CENTER;
BORDER-RADIUS: VAR(--BORDER-RADIUS-2);
PADDING : 3.5REM;
BACKGROUND-COLOR: VAR(--COLOR-WHITE);
BOX-SHADOW: VAR(--BOX-SHADOW);
WIDTH: 95%;
MAX-WIDTH: 32REM;
}
.CHANGE-PASSWORD-CONTAINER FORM:HOVER{BOX-SHADOW: NONE;}
.CHANGE-PASSWORD-CONTAINER FORM INPUT[TYPE=PASSWORD]{
BORDER: NONE;
OUTLINE: NONE;
BORDER: 1PX SOLID VAR(--COLOR-LIGHT);
BACKGROUND: TRANSPARENT;
HEIGHT: 2REM;
WIDTH: 100%;
PADDING: 0 .5REM;
}
.CHANGE-PASSWORD-CONTAINER FORM .BOX{
PADDING: .5REM 0;

261
STI College Naga
}
.CHANGE-PASSWORD-CONTAINER FORM .BOX P{
LINE-HEIGHT: 2;
}
.CHANGE-PASSWORD-CONTAINER FORM H2+P{MARGIN: .4REM 0 1.2REM 0;}
.BTN{
BACKGROUND: NONE;
BORDER: NONE;
BORDER: 2PX SOLID VAR(--COLOR-PRIMARY) !IMPORTANT;
BORDER-RADIUS: VAR(--BORDER-RADIUS-1);
PADDING: .5REM 1REM;
COLOR: VAR(--COLOR-WHITE);
BACKGROUND-COLOR: VAR(--COLOR-PRIMARY);
CURSOR: POINTER;
MARGIN: 1REM 1.5REM 1REM 0;
MARGIN-TOP: 1.5REM;
}
.BTN:HOVER{
COLOR: VAR(--COLOR-PRIMARY);
BACKGROUND-COLOR: TRANSPARENT;
}
</STYLE>

</HEAD>
<BODY>
<HEADER>
<DIV CLASS="LOGO">
<IMG SRC="../IMAGES/IMG.PNG" ALT="">
<H2>EMIS</H2>
</DIV>
<DIV CLASS="NAVBAR">
<A HREF="INDEX.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">HOME</SPAN>
<H3>HOME</H3>
</A>
<A HREF="TIMETABLE.PHP" ONCLICK="TIMETABLEALL()">
<SPAN CLASS="MATERIAL-ICONS-SHARP">TODAY</SPAN>
<H3>SCHEDULES</H3>
</A>
<A HREF="EXAM.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">GRID_VIEW</SPAN>
<H3>MARKS</H3>
</A>
<A HREF="WORKSPACE.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">DESCRIPTION</SPAN>
<H3>NOTES</H3>

262
STI College Naga
</A>
<A HREF="PASSWORD.PHP" CLASS="ACTIVE">
<SPAN CLASS="MATERIAL-ICONS-SHARP">PASSWORD</SPAN>
<H3>CHANGE PASSWORD</H3>
</A>
<A HREF="LOGOUT.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">LOGOUT</SPAN>
<H3>LOGOUT</H3>
</A>
</DIV>
<DIV ID="PROFILE-BTN" STYLE="DISPLAY: NONE;">
<SPAN CLASS="MATERIAL-ICONS-SHARP">PERSON</SPAN>
</DIV>
<DIV CLASS="THEME-TOGGLER">
<SPAN CLASS="MATERIAL-ICONS-SHARP ACTIVE">LIGHT_MODE</SPAN>
<SPAN CLASS="MATERIAL-ICONS-SHARP">DARK_MODE</SPAN>
</DIV>
</HEADER>

<DIV CLASS="CHANGE-PASSWORD-CONTAINER">
<FORM ACTION="#" METHOD="POST">
<H2>CREATE NEW PASSWORD</H2>
<P CLASS="TEXT-MUTED">YOUR NEW PASSWORD MUST BE DIFFERENT FROM
PREVIOUS USED PASSWORDS.</P>
<DIV CLASS="BOX">
<P CLASS="TEXT-MUTED">CURRENT PASSWORD</P>
<INPUT TYPE="PASSWORD" ID="CURRENTPASS" NAME="CURRENT">
</DIV>
<DIV CLASS="BOX">
<P CLASS="TEXT-MUTED">NEW PASSWORD</P>
<INPUT TYPE="PASSWORD" ID="NEWPASS" NAME="NEW">
</DIV>
<DIV CLASS="BOX">
<P CLASS="TEXT-MUTED">CONFIRM PASSWORD</P>
<INPUT TYPE="PASSWORD" ID="CONFIRMPASS" NAME="REPEAT">
</DIV>
<DIV CLASS="BUTTON">
<INPUT TYPE="SUBMIT" VALUE="SAVE" CLASS="BTN" NAME="SUBMIT">
<A HREF="INDEX.PHP" CLASS="TEXT-MUTED">CANCEL</A>
</DIV>

</FORM>
<?PHP

263
STI College Naga
$PASSWORD=$_POST['CURRENT'];
$NEWPASSWORD=$_POST['NEW'];
$CONFIRMNEWPASSWORD=$_POST['REPEAT'];
$RESULT = MYSQLI_QUERY($CONN,"SELECT PASSWORD_HASH FROM USERS
WHERE ID='$ID'");
IF($RESULT->NUM_ROWS > 0){
$ROW = $RESULT->FETCH_ASSOC();

$PASS = $ROW['PASSWORD_HASH'];
IF(ISSET($_POST['SUBMIT'])){
IF(PASSWORD_VERIFY($PASSWORD, $PASS)){
IF($NEWPASSWORD == $CONFIRMNEWPASSWORD){
$NEWPASSWORDHASH=PASSWORD_HASH($NEWPASSWORD,
PASSWORD_DEFAULT);
IF(MYSQLI_QUERY($CONN,"UPDATE USERS SET
PASSWORD_HASH='$NEWPASSWORDHASH' WHERE ID='$ID'")){
ECHO "<SCRIPT>ALERT('PASSWORD UPDATED')</SCRIPT>";
}ELSE{
ECHO "<SCRIPT>ALERT('UNABLE TO UPDATE')</SCRIPT>";
}
}ELSE{
ECHO "<SCRIPT>ALERT('NEW PASSWORD AND CONFIRM PASSSWORD ARE
NOT SAME')</SCRIPT>";
}
}
ELSE{
ECHO "<SCRIPT>ALERT('WRONG CURRENT PASSWORD...');</SCRIPT>";
}
}
}
// IF(!$RESULT)
// {
// ECHO "<SCRIPT>ALERT('THE USERNAME YOU ENTERED DOES NOT
EXIST')</SCRIPT>";
// }
// ELSE IF($PASSWORD!= $RESULT->NUM_ROW)
// {
// ECHO "<SCRIPT>ALERT('YOU ENTERED AN INCORRECT PASSWORD')</SCRIPT>";
// }

// IF($NEWPASSWORD=$CONFIRMNEWPASSWORD)
// $SQL=MYSQLI_QUERY("UPDATE USERS SET PASSWORD_HASH='$NEWPASSWORD'
WHERE ID='$ID'");
// IF($SQL)
// {
// ECHO "<SCRIPT>ALERT('CONGRATULATIONS YOU HAVE SUCCESSFULLY CHANGED

264
STI College Naga
YOUR PASSWORD')</SCRIPT>";
// }
// ELSE
// {
// ECHO "<SCRIPT>ALERT('PASSWORDS DO NOT MATCH')</SCRIPT>";
// }
?>
</DIV>

</BODY>

</HTML>

PROGRESS.PHP

<?PHP INCLUDE("../ASSETS/NOSESSIONREDIRECT.PHP"); ?>

<?PHP INCLUDE("./VERIFYROLEREDIRECT.PHP");
$ID = $_SESSION['UID'];
?>

<?PHP ECHO "<SCRIPT>VAR ID='{$ID}'</SCRIPT>"; ?>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<META CHARSET="UTF-8">
<META NAME="VIEWPORT" CONTENT="WIDTH=DEVICE-WIDTH, INITIAL-SCALE=1">
<TITLE>EMIS - PROGRESS REPORT</TITLE>
<STYLE TYPE="TEXT/CSS">
.BODY{
WIDTH: 80%;
MARGIN-LEFT: 10%;
MARGIN-TOP: 10%;
BORDER-RADIUS: 8PX;
PADDING: 20PX;
}
#COLUMNCHART_MATERIAL{
HEIGHT: 500PX;
WIDTH: 100%;
}
@MEDIA ONLY SCREEN AND (MAX-WIDTH: 768PX){
#COLUMNCHART_MATERIAL{

265
STI College Naga
HEIGHT: 400PX;
WIDTH: 400%;
}
.BODY{
MARGIN-LEFT: 0%;
}
}
</STYLE>
<SCRIPT SRC="HTTPS://CODE.JQUERY.COM/JQUERY-3.7.1.JS" INTEGRITY="SHA256-
EKHAYI8LEQWP4NKXN+CFCH+3QOVUTJN3QNZ0TCIWLP4="
CROSSORIGIN="ANONYMOUS"></SCRIPT>
</HEAD>
<BODY>
<DIV CLASS="BODY">
<DIV ID="COLUMNCHART_MATERIAL"></DIV>
</DIV>
</BODY>
<SCRIPT TYPE="TEXT/JAVASCRIPT"
SRC="HTTPS://WWW.GSTATIC.COM/CHARTS/LOADER.JS"></SCRIPT>
<SCRIPT TYPE="TEXT/JAVASCRIPT">
GOOGLE.CHARTS.LOAD('CURRENT', {'PACKAGES':['BAR']});
GOOGLE.CHARTS.SETONLOADCALLBACK(FETCHDATAANDDRAWCHART);

FUNCTION FETCHDATAANDDRAWCHART() {
FETCH("FETCH-DATA/PROGRESS-DATA.PHP", {
METHOD: "POST",
HEADERS: {
"CONTENT-TYPE": "APPLICATION/JSON" // SPECIFY CONTENT TYPE AS JSON
},
BODY: JSON.STRINGIFY({ ID: ID }) // CONVERT DATA TO JSON STRING
})
.THEN(RESPONSE => RESPONSE.JSON())
.THEN(DATA => {

CONSOLE.LOG(DATA);

VAR CHARTDATA = [['EXAM', 'MARKS']]; // INITIALIZE CHART DATA

FOR (VAR I = 0; I < DATA.LENGTH; I++) {
CHARTDATA.PUSH([DATA[I]['EXAM_NAME'], DATA[I]['MARKS']]); // PUSH EXAM
AND MARKS DATA
}
DRAWCHART(CHARTDATA); // DRAW CHART WITH FETCHED DATA
})
.CATCH(ERROR => {
CONSOLE.ERROR('ERROR:', ERROR);
});

266
STI College Naga
}

FUNCTION DRAWCHART(CHARTDATA) {
VAR DATA = GOOGLE.VISUALIZATION.ARRAYTODATATABLE(CHARTDATA);

VAR OPTIONS = {
CHART: {
TITLE: 'EXAM PROGRESS IN PERCENTAGE(100%)',
SUBTITLE: 'SALES, EXPENSES, AND PROFIT: 2014-2017',
}
};

VAR CHART = NEW

GOOGLE.CHARTS.BAR(DOCUMENT.GETELEMENTBYID('COLUMNCHART_MATERIAL'));

CHART.DRAW(DATA, GOOGLE.CHARTS.BAR.CONVERTOPTIONS(OPTIONS));
}
</SCRIPT>

</HTML>

TIMETABLE.PHP

<?PHP INCLUDE("../ASSETS/NOSESSIONREDIRECT.PHP"); ?>

<?PHP INCLUDE("./VERIFYROLEREDIRECT.PHP"); ?>

<!DOCTYPE HTML>
<HTML LANG="EN">
<HEAD>
<META CHARSET="UTF-8">
<META HTTP-EQUIV="X-UA-COMPATIBLE" CONTENT="IE=EDGE">
<META NAME="VIEWPORT" CONTENT="WIDTH=DEVICE-WIDTH, INITIAL-SCALE=1.0">
<TITLE>EMIS: SAN AGUSTIN ELEMENTARY SCHOOL</TITLE>
<LINK HREF="HTTPS://FONTS.GOOGLEAPIS.COM/ICON?
FAMILY=MATERIAL+ICONS+SHARP" REL="STYLESHEET">
<LINK REL="SHORTCUT ICON" HREF="../IMAGES/IMG.PNG">
<LINK REL="STYLESHEET" HREF="STYLE.CSS">

</HEAD>
<BODY>
<HEADER>
<DIV CLASS="LOGO">
<IMG SRC="../IMAGES/IMG.PNG" ALT="">
<H2>EMIS</H2>

267
STI College Naga
</DIV>
<DIV CLASS="NAVBAR">
<A HREF="INDEX.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">HOME</SPAN>
<H3>HOME</H3>
</A>
<A HREF="TIMETABLE.PHP" CLASS="ACTIVE" ONCLICK="TIMETABLEALL()">
<SPAN CLASS="MATERIAL-ICONS-SHARP">TODAY</SPAN>
<H3>SCHEDULES</H3>
</A>
<A HREF="EXAM.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">GRID_VIEW</SPAN>
<H3>MARKS</H3>
</A>
<A HREF="WORKSPACE.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">DESCRIPTION</SPAN>
<H3>NOTES</H3>
</A>
<A HREF="PASSWORD.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">PASSWORD</SPAN>
<H3>CHANGE PASSWORD</H3>
</A>
<A HREF="LOGOUT.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">LOGOUT</SPAN>
<H3>LOGOUT</H3>
</A>
</DIV>
<DIV ID="PROFILE-BTN" STYLE="DISPLAY: NONE;">
<SPAN CLASS="MATERIAL-ICONS-SHARP">PERSON</SPAN>
</DIV>
<DIV CLASS="THEME-TOGGLER">
<SPAN CLASS="MATERIAL-ICONS-SHARP ACTIVE">LIGHT_MODE</SPAN>
<SPAN CLASS="MATERIAL-ICONS-SHARP">DARK_MODE</SPAN>
</DIV>

</HEADER>

<MAIN STYLE="MARGIN: 0;">

<DIV CLASS="TIMETABLE ACTIVE" ID="TIMETABLE">
<DIV>
<SPAN ID="PREVDAY">&LT;</SPAN>
<H2>TODAY'S SCHEDULE</H2>
<SPAN ID="NEXTDAY">&GT;</SPAN>
</DIV>
<TABLE>
<THEAD>

268
STI College Naga
<TR>
<TH>START TIME</TH>
<TH>END TIME</TH>
<TH>SUBJECT</TH>
<TH></TH>
</TR>
</THEAD>
<TBODY></TBODY>
</TABLE>
</DIV>
</MAIN>

</BODY>

WORKSPACE.PHP

<?PHP INCLUDE("../ASSETS/NOSESSIONREDIRECT.PHP"); ?>

<?PHP INCLUDE("./VERIFYROLEREDIRECT.PHP"); ?>

<?PHP

// SESSION_START();
INCLUDE('../ASSETS/CONFIG.PHP');
ERROR_REPORTING(0);
?>
<!DOCTYPE HTML>
<HTML LANG="EN">
<HEAD>
<META CHARSET="UTF-8">
<META HTTP-EQUIV="X-UA-COMPATIBLE" CONTENT="IE=EDGE">
<META NAME="VIEWPORT" CONTENT="WIDTH=DEVICE-WIDTH, INITIAL-SCALE=1.0">
<TITLE>EMIS:SAN AGUSTINE ELEMENTARY SCHOOL</TITLE>
<LINK HREF="HTTPS://FONTS.GOOGLEAPIS.COM/ICON?
FAMILY=MATERIAL+ICONS+SHARP" REL="STYLESHEET">
<LINK REL="SHORTCUT ICON" HREF="../IMAGES/IMG.PNG">
<LINK REL="STYLESHEET" HREF="STYLE.CSS">

<STYLE>
BODY{OVERFLOW: HIDDEN;}

269
STI College Naga
HEADER{POSITION: RELATIVE;}
.EXAM{
DISPLAY: FLEX;
ALIGN-ITEMS: CENTER;
JUSTIFY-CONTENT: CENTER;
FLEX-DIRECTION: COLUMN;
HEIGHT: 80VH;
WIDTH: 80%;
MARGIN: AUTO;
}
.BTN {
BACKGROUND-COLOR: DODGERBLUE;
BORDER: NONE;
COLOR: WHITE;
PADDING: 10PX 20PX;
CURSOR: POINTER;
FONT-SIZE: 10PX;
BORDER-RADIUS: 3PX;
TEXT-DECORATION: NONE;
}

BODY {
-MS-OVERFLOW-STYLE: NONE; /* INTERNET EXPLORER 10+ */
SCROLLBAR-WIDTH: NONE; /* FIREFOX */
}
BODY::-WEBKIT-SCROLLBAR {
DISPLAY: NONE; /* SAFARI AND CHROME */
}

/* DARKER BACKGROUND ON MOUSE-OVER */

.BTN:HOVER {
BACKGROUND-COLOR: ROYALBLUE;
}

.BTN A{
COLOR: WHITE;
FONT-SIZE: 20PX;
}
#MYINPUT {
BACKGROUND-IMAGE: URL('SEARCH.SVG'); /* ADD A SEARCH ICON TO INPUT */
BACKGROUND-POSITION: 5PX 2PX; /* POSITION THE SEARCH ICON */
BACKGROUND-REPEAT: NO-REPEAT; /* DO NOT REPEAT THE ICON IMAGE */
WIDTH: 80%; /* FULL-WIDTH */

270
STI College Naga
FONT-SIZE: 16PX; /* INCREASE FONT-SIZE */
PADDING: 12PX 20PX 12PX 40PX; /* ADD SOME PADDING */
BORDER: 1PX SOLID #DDD; /* ADD A GREY BORDER */
MARGIN-BOTTOM: 12PX; /* ADD SOME SPACE BELOW THE INPUT */
MARGIN-TOP: 30PX;
MARGIN-LEFT: 150PX;
}

#MYTABLE {
BORDER-COLLAPSE: COLLAPSE; /* COLLAPSE BORDERS */
WIDTH: 80%; /* FULL-WIDTH */
BORDER: 1PX SOLID #DDD; /* ADD A GREY BORDER */
FONT-SIZE: 18PX; /* INCREASE FONT-SIZE */
BORDER: #BDC3C7 1PX SOLID;
MARGIN-LEFT: 150PX;
}

#MYTABLE TH, #MYTABLE TD {

TEXT-ALIGN: LEFT; /* LEFT-ALIGN TEXT */
PADDING: 10PX; /* ADD PADDING */
}

#MYTABLE TR {
/* ADD A BOTTOM BORDER TO ALL TABLE ROWS */
BORDER-BOTTOM: 1PX SOLID #DDD;
}
#MYTABLE TH, #MYTABLE TD.THEME-TOGGLER {
TEXT-ALIGN: LEFT; /* LEFT-ALIGN TEXT */
PADDING: 10PX; /* ADD PADDING */
BACKGROUND-COLOR: BLACK;
COLOR: WHITE;
}

#MYTABLE TR.THEME-TOGGLER {
/* ADD A BOTTOM BORDER TO ALL TABLE ROWS */
BORDER-BOTTOM: 1PX SOLID #DDD;
BACKGROUND-COLOR: #363949;
}

#MYTABLE TR:HOVER{
BACKGROUND-COLOR: #779CA6;
}
@MEDIA ONLY SCREEN AND (MAX-WIDTH: 768PX){
#MYTABLE {
WIDTH: 100%;
MARGIN: 0%;

271
STI College Naga
FONT-SIZE: 12PX;
FLEX: AUTO;
POSITION: ABSOLUTE;
}
#MYINPUT{
WIDTH: 100%;
MARGIN: 0%;
}
}

</STYLE>
</HEAD>
<BODY STYLE="OVERFLOW-Y: SCROLL;">
<HEADER>
<DIV CLASS="LOGO">
<IMG SRC="../IMAGES/IMG.PNG" ALT="">
<H2>EMIS</H2>
</DIV>
<DIV CLASS="NAVBAR">
<A HREF="INDEX.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">HOME</SPAN>
<H3>HOME</H3>
</A>
<A HREF="TIMETABLE.PHP" ONCLICK="TIMETABLEALL()">
<SPAN CLASS="MATERIAL-ICONS-SHARP">TODAY</SPAN>
<H3>SCHEDULES</H3></H3>
</A>
<A HREF="EXAM.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">GRID_VIEW</SPAN>
<H3>MARKS</H3>
</A>
<A HREF="WORKSPACE.PHP" CLASS="ACTIVE">
<SPAN CLASS="MATERIAL-ICONS-SHARP">DESCRIPTION</SPAN>
<H3>NOTES</H3>
</A>
<A HREF="PASSWORD.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">PASSWORD</SPAN>
<H3>CHANGE PASSWORD</H3>
</A>
<A HREF="LOGOUT.PHP">
<SPAN CLASS="MATERIAL-ICONS-SHARP">LOGOUT</SPAN>
<H3>LOGOUT</H3>
</A>
</DIV>
<DIV ID="PROFILE-BTN" STYLE="DISPLAY: NONE;">

272
STI College Naga
<SPAN CLASS="MATERIAL-ICONS-SHARP">PERSON</SPAN>
</DIV>
<DIV CLASS="THEME-TOGGLER">
<SPAN CLASS="MATERIAL-ICONS-SHARP ACTIVE">LIGHT_MODE</SPAN>
<SPAN CLASS="MATERIAL-ICONS-SHARP">DARK_MODE</SPAN>
</DIV>
</HEADER>
<INPUT TYPE="TEXT" ID="MYINPUT" ONKEYUP="MYFUNCTION()"
PLACEHOLDER="SEARCH FOR SUBJECT.">

<DIV CLASS="SCROLLABLEBOX" >

<TABLE ID="MYTABLE" >
<TR CLASS="HEADER">
<TH>SUBJECT</TH>
<TH>TITLE</TH>
<TH>DOWNLOADS</TH>
<TH>DATE</TH>
</TR>
<TR>
<?PHP
$ID = $_SESSION['UID'];

$SQL = "SELECT * FROM STUDENTS WHERE ID='$ID'";

$RESULT2=MYSQLI_QUERY($CONN,$SQL);
$ROW=$RESULT2->FETCH_ASSOC();
$CLASS = $ROW['CLASS'];

$QUERY="SELECT * FROM NOTES WHERE CLASS='$CLASS' ORDER BY S_NO DESC";

$RESULT=MYSQLI_QUERY($CONN,$QUERY);
IF($RESULT->NUM_ROWS>0){
WHILE($ROWS=$RESULT->FETCH_ASSOC()) {

$DATEDB = $ROWS['TIMESTAMP'];
$FORMATTEDDATE = DATE("D-M-Y", STRTOTIME($DATEDB));

ECHO "<TD>".$ROWS['SUBJECT']."</TD>
<TD>".$ROWS['TITLE']."</TD>
<TD><BUTTON CLASS='BTN'><A HREF='../NOTESUPLOADS/".$ROWS['FILE']."'
DOWNLOAD='".$ROWS['FILE']."'>DOWNLOAD</A></BUTTON></TD>
<TD>".$FORMATTEDDATE."</TD>
</TR>";
}
}

273
STI College Naga
</TABLE>
</DIV>

STUDENT PANEL CSS

STYLE.CSS

@IMPORT URL('HTTPS://FONTS.GOOGLEAPIS.COM/CSS2?
FAMILY=CAIRO:WGHT@200;300;400;500;600;700;800;900&FAMILY=POPPINS:WGHT@3
00;400;500;600;700;800&DISPLAY=SWAP');

:ROOT{
--COLOR-PRIMARY: #7380EC;
--COLOR-DANGER: #0544CA;
--COLOR-SUCCESS: #41F1B6;
--COLOR-WARNING: #FFBB55;
--COLOR-WHITE: #FFF;
--COLOR-INFO: #7D8DA1;
--COLOR-DARK: #363949;
--COLOR-LIGHT: RGBA(132, 139, 200, 0.18);
--COLOR-DARK-VARIENT: #677483;
--COLOR-BACKGROUND: #F6F6F9;

--CARD-BORDER-RADIUS: 2REM;
--BORDER-RADIUS-1: 0.4REM;
--BORDER-RADIUS-2: 1.2REM;

--CARD-PADDING: 1.8REM;
--BOX-SHADOW: 0 2REM 3REM VAR(--COLOR-LIGHT)
}

.DARK-THEME{
--COLOR-BACKGROUND: #181A1E;
--COLOR-WHITE: #202528;
--COLOR-DARK: #EDEFFD;
--COLOR-DARK-VARIENT: #A3BDCC;
--COLOR-LIGHT: RGBA(0,0,0,0.4);
--BOX-SHADOW: 0 2REM 3REM VAR(--COLOR-LIGHT)
}

274
STI College Naga
*{
MARGIN:0;
PADDING: 0;
TEXT-DECORATION: NONE;
LIST-STYLE: NONE;
BOX-SIZING: BORDER-BOX;
}

HTML{
FONT-SIZE: 14PX;
SCROLL-BEHAVIOR: SMOOTH;
}
BODY{
FONT-FAMILY: 'POPPINS', SANS-SERIF;
FONT-SIZE: .88REM;
BACKGROUND: VAR(--COLOR-BACKGROUND);
USER-SELECT: NONE;
OVERFLOW-X: HIDDEN;
COLOR: VAR(--COLOR-DARK);
}
*{
COLOR: VAR(--COLOR-DARK);
}
IMG{
DISPLAY: BLOCK;
WIDTH: 100%;
}
H1{
FONT-WEIGHT: 800;
FONT-SIZE: 1.8REM;
}
H2{FONT-SIZE: 1.4REM;}
H3{FONT-SIZE: .87REM;}
H4{FONT-SIZE: .8REM;}
H5{FONT-SIZE: .77REM;}
SMALL{FONT-SIZE: .75REM;}

.TEXT-MUTED{COLOR: VAR(--COLOR-INFO);}
P{COLOR: VAR(--COLOR-DARK-VARIENT);}
B{COLOR: VAR(--COLOR-DARK);}

.PRIMARY{COLOR: VAR(--COLOR-PRIMARY);}
.DANGER{COLOR: VAR(--COLOR-DANGER);}
.SUCCESS{COLOR: VAR(--COLOR-SUCCESS)}
.WARNING{COLOR: VAR(--COLOR-WARNING);}

275
STI College Naga
.CONTAINER{
POSITION: RELATIVE;
DISPLAY: GRID;
WIDTH: 93%;
MARGIN: 0 3REM;
GAP: 1.8REM;
GRID-TEMPLATE-COLUMNS: 14REM AUTO 23REM;
PADDING-TOP: 4REM;
}
HEADER H3{FONT-WEIGHT: 500;}
HEADER{
POSITION: FIXED;
WIDTH: 100VW;
Z-INDEX: 1000;
BACKGROUND-COLOR: VAR(--COLOR-BACKGROUND);
}
HEADER.ACTIVE{BOX-SHADOW: VAR(--BOX-SHADOW);}
HEADER .LOGO{
DISPLAY: FLEX;
GAP: .8REM;
MARGIN-RIGHT: AUTO;
}
HEADER .LOGO IMG{
WIDTH: 2REM;
HEIGHT: 2REM;
}

HEADER,
HEADER .NAVBAR{
DISPLAY: FLEX;
ALIGN-ITEMS: CENTER;
JUSTIFY-CONTENT: FLEX-END;
PADDING: 0 3REM;
COLOR: VAR(--COLOR-INFO);
}
HEADER .NAVBAR A{
DISPLAY: FLEX;
MARGIN-LEFT: 2REM;
ALIGN-ITEMS: CENTER;
JUSTIFY-CONTENT: SPACE-BETWEEN;
POSITION: RELATIVE;
HEIGHT: 3.7REM;
TRANSITION: ALL 300MS EASE;
PADDING: 0 2REM;
}

276
STI College Naga
HEADER .NAVBAR A:HOVER {
PADDING-TOP: 1.5REM;
}
HEADER .NAVBAR A.ACTIVE{
BACKGROUND: VAR(--COLOR-LIGHT);
COLOR: VAR(--COLOR-PRIMARY);
}
HEADER .NAVBAR A.ACTIVE::BEFORE{
CONTENT: "";
BACKGROUND-COLOR: VAR(--COLOR-PRIMARY);
POSITION: ABSOLUTE;
HEIGHT: 5PX;
WIDTH: 100%;
LEFT: 0;TOP: 0;
}
HEADER #PROFILE-BTN{
DISPLAY: NONE;
FONT-SIZE: 2REM;
MARGIN: .5REM 2REM 0 0;
CURSOR: POINTER;
}
HEADER .THEME-TOGGLER{
BACKGROUND: VAR(--COLOR-LIGHT);
DISPLAY: FLEX;
JUSTIFY-CONTENT: SPACE-BETWEEN;
ALIGN-ITEMS: CENTER;
HEIGHT: 1.6REM;
WIDTH: 4.2REM;
CURSOR: POINTER;
BORDER-RADIUS: VAR(--BORDER-RADIUS-1);
MARGIN-RIGHT: 2REM;
}
HEADER .THEME-TOGGLER SPAN{
FONT-SIZE: 1.2REM;
WIDTH: 50%;
HEIGHT: 100%;
DISPLAY: FLEX;
ALIGN-ITEMS: CENTER;
JUSTIFY-CONTENT: CENTER;
}
HEADER .THEME-TOGGLER SPAN.ACTIVE{
BACKGROUND-COLOR: VAR(--COLOR-PRIMARY);
COLOR: WHITE;
BORDER-RADIUS: VAR(--BORDER-RADIUS-1);
}

277
STI College Naga
/* PROFILE SECTION */
ASIDE .PROFILE{
MARGIN-TOP: 2REM;
WIDTH: 13REM;
POSITION: FIXED;
}
ASIDE .PROFILE .TOP{
DISPLAY: FLEX;
ALIGN-ITEMS: CENTER;
GAP: 1REM;
BORDER-BOTTOM: 1PX SOLID VAR(--COLOR-LIGHT);
PADDING-BOTTOM: 1REM;
}
ASIDE .PROFILE .TOP:HOVER .PROFILE-PHOTO{
SCALE: 1.05;
}
.PROFILE-PHOTO{
WIDTH: 6REM;
HEIGHT: 6REM;
BORDER-RADIUS: 50%;
OVERFLOW: HIDDEN;
BORDER: 5PX SOLID VAR(--COLOR-LIGHT);
TRANSITION: ALL 400MS EASE;
}
ASIDE .PROFILE .ABOUT P{
PADDING-BOTTOM: 1REM;
}
ASIDE .PROFILE .ABOUT{
MARGIN-TOP: 1REM;
}

/* HOME SECTION */
MAIN{
POSITION: RELATIVE;
MARGIN-TOP: 1.4REM;
}
MAIN .SUBJECTS{
DISPLAY: GRID;
GRID-TEMPLATE-COLUMNS: REPEAT(5, 1FR);
GAP: 1.6REM;
}

MAIN .SUBJECTS > DIV{

BACKGROUND-COLOR: VAR(--COLOR-WHITE);
PADDING: VAR(--CARD-PADDING);
BORDER-RADIUS: VAR(--CARD-BORDER-RADIUS);

278
STI College Naga
MARGIN-TOP: 1REM;
BOX-SHADOW: VAR(--BOX-SHADOW);
TRANSITION: ALL 300MS EASE;
}
MAIN .SUBJECTS > DIV:HOVER{
BOX-SHADOW: NONE;
}
MAIN .SUBJECTS > DIV SPAN{
BACKGROUND-COLOR: VAR(--COLOR-PRIMARY);
PADDING: .5REM;
BORDER-RADIUS: 50%;
COLOR: VAR(--COLOR-WHITE);
FONT-SIZE: 1.5REM;
}
MAIN .SUBJECTS > DIV.MTH SPAN,MAIN .SUBJECTS > DIV.CG SPAN{BACKGROUND: VAR(--
COLOR-DANGER);}
MAIN .SUBJECTS > DIV.CS SPAN{BACKGROUND: VAR(--COLOR-SUCCESS);}

MAIN .SUBJECTS H3{

MARGIN: 1REM 0 0.6REM;
FONT-SIZE: 1REM;
}
MAIN .SUBJECTS .PROGRESS{
POSITION: RELATIVE;
WIDTH: 80PX;
HEIGHT: 89PX;
BORDER-RADIUS: 50%;
MARGIN: AUTO;
}
MAIN .SUBJECTS SVG CIRCLE{
FILL: NONE;
STROKE: VAR(--COLOR-PRIMARY);
STROKE-WIDTH: 8;
STROKE-LINECAP: ROUND;
TRANSFORM: TRANSLATE(5PX, 5PX);
STROKE-DASHARRAY: 110;
STROKE-DASHOFFSET: 92;
}
MAIN .SUBJECTS .EG SVG CIRCLE{
STROKE-DASHOFFSET: 25;
STROKE-DASHARRAY: 210;
}
MAIN .SUBJECTS .MTH SVG CIRCLE{
STROKE-DASHOFFSET: 7;
STROKE-DASHARRAY: 210;
}

279
STI College Naga
MAIN .SUBJECTS .CS SVG CIRCLE{
STROKE-DASHOFFSET: 35;
STROKE-DASHARRAY: 210;
}
MAIN .SUBJECTS .CG SVG CIRCLE{
STROKE-DASHOFFSET: 0;
STROKE-DASHARRAY: 210;
}
MAIN .SUBJECTS .NET SVG CIRCLE{
STROKE-DASHOFFSET: 5;
STROKE-DASHARRAY: 210;
}
MAIN .SUBJECTS .PROGRESS .NUMBER{
POSITION: ABSOLUTE;
TOP: 0;LEFT: 0;
HEIGHT: 100%;
WIDTH: 90%;
DISPLAY: FLEX;
JUSTIFY-CONTENT: CENTER;
ALIGN-ITEMS: CENTER;
}
MAIN .SUBJECTS SMALL{
MARGIN-TOP: 1REM;
DISPLAY: BLOCK;
}
MAIN .TIMETABLE{
MARGIN-TOP: 2REM;
}
MAIN .TIMETABLE H2{
MARGIN-BOTTOM: .8REM;
}
MAIN .TIMETABLE TABLE{
BACKGROUND-COLOR: VAR(--COLOR-WHITE);
WIDTH: 100%;
BORDER-RADIUS: VAR(--CARD-BORDER-RADIUS);
PADDING: VAR(--CARD-PADDING);
TEXT-ALIGN: CENTER;
BOX-SHADOW: VAR(--BOX-SHADOW);
TRANSITION: ALL 300MS EASE;
}
MAIN .TIMETABLE SPAN{DISPLAY: NONE;}
MAIN .TIMETABLE TABLE:HOVER{BOX-SHADOW: NONE;}
MAIN TABLE TBODY TD{
HEIGHT: 2.8REM;
BORDER-BOTTOM: 1PX SOLID VAR(--COLOR-LIGHT);
COLOR: VAR(--COLOR-DARK-VARIENT);

280
STI College Naga
TEXT-ALIGN: CENTER;
}
MAIN TABLE TBODY TR:LAST-CHILD TD{BORDER: NONE;}

MAIN .TIMETABLE.ACTIVE{
WIDTH: 100%;
HEIGHT: 100VH;
POSITION: FIXED;
TOP: 0;LEFT: 0;
DISPLAY: FLEX;
FLEX-DIRECTION: COLUMN;
ALIGN-ITEMS: CENTER;
JUSTIFY-CONTENT: CENTER;
}
MAIN .TIMETABLE.ACTIVE H2{
COLOR: VAR(--COLOR-DARK);
}
MAIN .TIMETABLE.ACTIVE TABLE{
WIDTH: 90%;
MAX-WIDTH: 1000PX;
POSITION: RELATIVE;
}
MAIN .TIMETABLE.ACTIVE SPAN{
DISPLAY: BLOCK;
FONT-SIZE: 2REM;
COLOR: VAR(--COLOR-DARK);
CURSOR: POINTER;
}
.PARA-TEXT{
COLOR: VAR(--COLOR-DARK);
}
.FLEXBOX{
DISPLAY: FLEX;
WIDTH: 100%;
}
.TIMETABLE DIV{
POSITION: RELATIVE;
WIDTH: 50%;
DISPLAY: FLEX;
ALIGN-ITEMS: CENTER;
JUSTIFY-CONTENT: SPACE-BETWEEN;

}
MAIN .TIMETABLE.ACTIVE .CLOSEBTN{
POSITION: ABSOLUTE;
TOP: 5%;RIGHT: 5%;

281
STI College Naga
}

/* RIGHT */
.RIGHT{MARGIN-TOP: 2.2REM;PADDING-LEFT: 1.5REM;}

.RIGHT .ANNOUNCEMENTS H2{MARGIN-BOTTOM: .8REM;}

.RIGHT .ANNOUNCEMENTS .UPDATES{
BACKGROUND-COLOR: VAR(--COLOR-WHITE);
PADDING: VAR(--CARD-PADDING);
BORDER-RADIUS: VAR(--CARD-BORDER-RADIUS);
BOX-SHADOW: VAR(--BOX-SHADOW);
TRANSITION: ALL 300MS EASE;
}
.RIGHT .ANNOUNCEMENTS .UPDATES:HOVER{BOX-SHADOW: NONE;}
.RIGHT .ANNOUNCEMENTS .UPDATES .MESSAGE{
GAP: 1REM;
LINE-HEIGHT: 1.5;
PADDING: .5REM 0;
}

/* TEACHERS ON LEAVE */
.RIGHT .LEAVES{MARGIN-TOP: 2REM;}
.RIGHT .LEAVES H2{MARGIN-BOTTOM: .8REM;}
.TEACHER{
MARGIN-TOP: 5PX;
BACKGROUND: VAR(--COLOR-WHITE);
DISPLAY: FLEX;
ALIGN-ITEMS: CENTER;
GAP: 1REM;
MARGIN-BOTTOM: .7REM;
PADDING: 1.4REM VAR(--CARD-PADDING);
BORDER-RADIUS: VAR(--BORDER-RADIUS-2);
TRANSITION: ALL 300MS EASE;
BOX-SHADOW: VAR(--BOX-SHADOW);
WIDTH: 90%;
}
.PROFILE-PHOTO{
WIDTH: 2.5REM;
HEIGHT: 2.5REM;
BORDER-RADIUS: 50%;
OVERFLOW: HIDDEN;
}
.TEACHER:HOVER{BOX-SHADOW: NONE;}

282
STI College Naga
/* MEDIA QUERIES */
@MEDIA SCREEN AND (MAX-WIDTH: 1200PX) {
HTML{FONT-SIZE: 12PX;}
.CONTAINER{
GRID-TEMPLATE-COLUMNS: 13REM AUTO 20REM;
}
HEADER{POSITION: FIXED;}
.CONTAINER{PADDING-TOP: 4REM;}
HEADER .LOGO H2{DISPLAY: NONE;}
HEADER .NAVBAR H3{DISPLAY: NONE;}
HEADER .NAVBAR A{WIDTH: 4.5REM; PADDING: 0 1REM;}

MAIN .SUBJECTS{
GRID-TEMPLATE-COLUMNS: REPEAT(2, 1FR);
GAP: 1;
}
MAIN .TIMETABLE{
WIDTH: 150%;
POSITION: ABSOLUTE;
PADDING: 4REM 0 0 0;
}
}

@MEDIA SCREEN AND (MAX-WIDTH: 768PX){

HTML{FONT-SIZE: 10PX;}
HEADER{PADDING: 0 .8REM;}
.CONTAINER{WIDTH: 100%; GRID-TEMPLATE-COLUMNS: 1FR;MARGIN: 0;}
HEADER #PROFILE-BTN{DISPLAY: INLINE;}
HEADER .NAVBAR{PADDING: 0;}
HEADER .NAVBAR A{MARGIN: 0 .5REM 0 0;}
HEADER .THEME-TOGGLER{MARGIN: 0;}
ASIDE{
POSITION: ABSOLUTE;
TOP: 4REM;LEFT: 0;RIGHT: 0;
BACKGROUND-COLOR: VAR(--COLOR-WHITE);
PADDING-LEFT: 2REM;
TRANSFORM: TRANSLATEX(-100%);
Z-INDEX: 10;
WIDTH:18REM;
HEIGHT: 100%;
BOX-SHADOW: 1REM 3REM 4REM VAR(--COLOR-LIGHT);
TRANSITION: ALL 2S EASE;
}
ASIDE.ACTIVE{
TRANSFORM: TRANSLATEX(0);

283
STI College Naga
}
MAIN{PADDING: 0 2REM;}
MAIN .TIMETABLE{
POSITION: RELATIVE;
MARGIN: 3REM 0 0 0;
WIDTH: 100%;
}
MAIN .TIMETABLE TABLE{
WIDTH: 100%;
MARGIN: 0;
}
.RIGHT{
WIDTH: 100%;
PADDING: 2REM;
}
}
.DOC .BOX{
HEIGHT: 100PX;
WIDTH: 100PX;
BORDER: #000000;
BORDER-RADIUS: 4PX;
}
.TABLE1{
BORDER: #BDC3C7 1PX SOLID;
HEIGHT: 200PX;
WIDTH: 1200PX;
LEFT: 50%;
TOP: 50%;
BORDER-COLLAPSE: COLLAPSE;
BOX-SHADOW: 2PX 2PX 12PX RGBA(0,0,0,0.2),-1PX -1PX -8PX RGBA(0,0,0,.2);
POSITION: ABSOLUTE;
TRANSFORM: TRANSLATE(-50%,-50%);
}
.TABLE1 TR{
TRANSITION: ALL .2S EASE-IN;
CURSOR: POINTER;
}
.TABLE1 TH,TD{
PADDING: 12PX;
TEXT-ALIGN: LEFT;
BORDER-BOTTOM: 1PX SOLID RGB(204, 201, 201);
}
.TABLE1 THEAD{
BACKGROUND-COLOR: RGB(0, 0, 0);
COLOR: WHITE;
}

284
STI College Naga
.TABLE1 THEAD TR TH{
COLOR: WHITE;
}

STYLES.CSS

.CONTAINER{
HEIGHT: AUTO;
WIDTH: 80%;
DISPLAY: FLEX;
JUSTIFY-CONTENT: CENTER;
FLEX-DIRECTION: COLUMN;
BORDER: 1PX SOLID LIGHTGREY;
BORDER-RADIUS: 8PX;
MARGIN-TOP: 3%;
}
.BUS{
POSITION: RELATIVE;
HEIGHT: AUTO;
WIDTH: 80%;
DISPLAY: FLEX;
FLEX-DIRECTION: COLUMN;
PADDING: 10PX;
}
.POSITION{
HEIGHT: AUTO;
WIDTH: 80%;
DISPLAY: FLEX;
FLEX-DIRECTION: COLUMN;
JUSTIFY-CONTENT: CENTER;
ALIGN-ITEMS: CENTER;
BORDER: 1PX SOLID LIGHTGREY;
BORDER-RADIUS: 8PX;
MARGIN-TOP: 3%;
MARGIN-LEFT: 10%;
PADDING: 20PX;
}
.POSITION .L1{
HEIGHT: 50PX;
WIDTH: 50PX;
BORDER: 1PX SOLID GREEN;
BACKGROUND-IMAGE: URL('IMAGES/BUS.PNG');
BACKGROUND-REPEAT: NO-REPEAT;
BACKGROUND-SIZE: COVER;
BACKGROUND-POSITION: CENTER;

285
STI College Naga
BORDER-RADIUS: 50%;
PADDING: 15PX;
MARGIN-TOP: 80PX;
}

.L1 H6{
MARGIN-LEFT: 80PX;

TIMETABLE.JS

CONST SUNDAY =[
{
START_TIME: 'SUNDAY',
END_TIME: 'HOLIDAY',
SUBJECT: 'NO CLASS AVAILABLE',

}
]
LET MONDAY =[
{
START_TIME: '09-10 AM',
END_TIME: '38-718',
SUBJECT: 'DBMS130',

},
{
START_TIME: '10-11 AM',
END_TIME: '38-718',
SUBJECT: 'MTH166',
},
{
START_TIME: '12-01 PM',
END_TIME: '38-718',
SUBJECT: 'NS200',
}
]
LET TUESDAY =[
{
START_TIME: '09-10 AM',
END_TIME: '27-304Y',
SUBJECT: 'MTH166',
},
{
START_TIME: '11-12 AM',

286
STI College Naga
END_TIME: '28-107',
SUBJECT: 'CS849',
},
{
START_TIME: '12-01 PM',
END_TIME: '28-107',
SUBJECT: 'CS849',
},
{
START_TIME: '02-03 PM',
END_TIME: '38-718',
SUBJECT: 'NS200',
}
]

LET WEDNESDAY =[
{
START_TIME: '10-11 AM',
END_TIME: '33-309',
SUBJECT: 'DBMS130',
},
{
START_TIME: '11-12 AM',
END_TIME: '38-719',
SUBJECT: 'CS200',
}
]

LET THURSDAY =[
{
START_TIME: '11-12 AM',
END_TIME: '33-309',
SUBJECT: 'MTH166',
},
{
START_TIME: '01-02 PM',
END_TIME: '38-719',
SUBJECT: 'CS849',
},
{
START_TIME: '02-03 PM',
END_TIME: '38-718',
SUBJECT: 'NS200',
}
]

287
STI College Naga
LET FRIDAY =[
{
START_TIME: '10-11 AM',
END_TIME: '33-309',
SUBJECT: 'MEC103',
},
{
START_TIME: '11-12 AM',
END_TIME: '33-309',
SUBJECT: 'MEC103',
},
{
START_TIME: '02-03 PM',
END_TIME: '33-601',
SUBJECT: 'CS849',
},

LET SATURDAY =[
{
START_TIME: '09-10 AM',
END_TIME: '34-604',
SUBJECT: 'DBMS130',

},
{
START_TIME: '10-11 AM',
END_TIME: '34-604',
SUBJECT: 'DBMS130',
},
{
START_TIME: '01-02 PM',
END_TIME: '33-309',
SUBJECT: 'MTH166',
}
]

VAR MESSAGE = "LSKJF";

FETCH('FETCHTIMETABLE.PHP', {
METHOD: 'POST',
HEADERS: {
'CONTENT-TYPE': 'APPLICATION/X-WWW-FORM-URLENCODED',
},
BODY: 'MESSAGE=' + ENCODEURICOMPONENT(MESSAGE),

288
STI College Naga
})
.THEN(RESPONSE => RESPONSE.JSON())
.THEN(DATA => {

MONDAY = DATA['DATA']['MON'];
TUESDAY = DATA['DATA']['TUE'];
WEDNESDAY = DATA['DATA']['WED'];
THURSDAY = DATA['DATA']['THU'];
FRIDAY = DATA['DATA']['FRI'];
SATURDAY = DATA['DATA']['SAT'];

SETDATA(DAY);

})
.CATCH(ERROR => {
CONSOLE.ERROR('ERROR:', ERROR);
});

BOOTSTRAP

CSS

/*!
* BOOTSTRAP GRID V5.0.2 (HTTPS://GETBOOTSTRAP.COM/)
* COPYRIGHT 2011-2021 THE BOOTSTRAP AUTHORS
* COPYRIGHT 2011-2021 TWITTER, INC.
* LICENSED UNDER MIT
(HTTPS://GITHUB.COM/TWBS/BOOTSTRAP/BLOB/MAIN/LICENSE)
*/
.CONTAINER,
.CONTAINER-FLUID,
.CONTAINER-XXL,
.CONTAINER-XL,
.CONTAINER-LG,
.CONTAINER-MD,
.CONTAINER-SM {
WIDTH: 100%;
PADDING-RIGHT: VAR(--BS-GUTTER-X, 0.75REM);
PADDING-LEFT: VAR(--BS-GUTTER-X, 0.75REM);
MARGIN-RIGHT: AUTO;
MARGIN-LEFT: AUTO;
}

@MEDIA (MIN-WIDTH: 576PX) {

.CONTAINER-SM, .CONTAINER {
MAX-WIDTH: 540PX;

289
STI College Naga
}
}
@MEDIA (MIN-WIDTH: 768PX) {
.CONTAINER-MD, .CONTAINER-SM, .CONTAINER {
MAX-WIDTH: 720PX;
}
}
@MEDIA (MIN-WIDTH: 992PX) {
.CONTAINER-LG, .CONTAINER-MD, .CONTAINER-SM, .CONTAINER {
MAX-WIDTH: 960PX;
}
}
@MEDIA (MIN-WIDTH: 1200PX) {
.CONTAINER-XL, .CONTAINER-LG, .CONTAINER-MD, .CONTAINER-SM, .CONTAINER {
MAX-WIDTH: 1140PX;
}
}
@MEDIA (MIN-WIDTH: 1400PX) {
.CONTAINER-XXL, .CONTAINER-XL, .CONTAINER-LG, .CONTAINER-MD, .CONTAINER-
SM, .CONTAINER {
MAX-WIDTH: 1320PX;
}
}
.ROW {
--BS-GUTTER-X: 1.5REM;
--BS-GUTTER-Y: 0;
DISPLAY: FLEX;
FLEX-WRAP: WRAP;
MARGIN-TOP: CALC(VAR(--BS-GUTTER-Y) * -1);
MARGIN-RIGHT: CALC(VAR(--BS-GUTTER-X) * -.5);
MARGIN-LEFT: CALC(VAR(--BS-GUTTER-X) * -.5);
}
.ROW > * {
BOX-SIZING: BORDER-BOX;
FLEX-SHRINK: 0;
WIDTH: 100%;
MAX-WIDTH: 100%;
PADDING-RIGHT: CALC(VAR(--BS-GUTTER-X) * .5);
PADDING-LEFT: CALC(VAR(--BS-GUTTER-X) * .5);
MARGIN-TOP: VAR(--BS-GUTTER-Y);
}

.COL {
FLEX: 1 0 0%;
}

290
STI College Naga
.ROW-COLS-AUTO > * {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.ROW-COLS-1 > * {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.ROW-COLS-2 > * {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.ROW-COLS-3 > * {
FLEX: 0 0 AUTO;
WIDTH: 33.3333333333%;
}

.ROW-COLS-4 > * {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.ROW-COLS-5 > * {
FLEX: 0 0 AUTO;
WIDTH: 20%;
}

.ROW-COLS-6 > * {
FLEX: 0 0 AUTO;
WIDTH: 16.6666666667%;
}

@MEDIA (MIN-WIDTH: 576PX) {

.COL-SM {
FLEX: 1 0 0%;
}

.ROW-COLS-SM-AUTO > * {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.ROW-COLS-SM-1 > * {

291
STI College Naga
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.ROW-COLS-SM-2 > * {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.ROW-COLS-SM-3 > * {
FLEX: 0 0 AUTO;
WIDTH: 33.3333333333%;
}

.ROW-COLS-SM-4 > * {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.ROW-COLS-SM-5 > * {
FLEX: 0 0 AUTO;
WIDTH: 20%;
}

.ROW-COLS-SM-6 > * {
FLEX: 0 0 AUTO;
WIDTH: 16.6666666667%;
}
}
@MEDIA (MIN-WIDTH: 768PX) {
.COL-MD {
FLEX: 1 0 0%;
}

.ROW-COLS-MD-AUTO > * {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.ROW-COLS-MD-1 > * {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.ROW-COLS-MD-2 > * {
FLEX: 0 0 AUTO;

292
STI College Naga
WIDTH: 50%;
}

.ROW-COLS-MD-3 > * {
FLEX: 0 0 AUTO;
WIDTH: 33.3333333333%;
}

.ROW-COLS-MD-4 > * {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.ROW-COLS-MD-5 > * {
FLEX: 0 0 AUTO;
WIDTH: 20%;
}

.ROW-COLS-MD-6 > * {
FLEX: 0 0 AUTO;
WIDTH: 16.6666666667%;
}
}
@MEDIA (MIN-WIDTH: 992PX) {
.COL-LG {
FLEX: 1 0 0%;
}

.ROW-COLS-LG-AUTO > * {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.ROW-COLS-LG-1 > * {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.ROW-COLS-LG-2 > * {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.ROW-COLS-LG-3 > * {
FLEX: 0 0 AUTO;
WIDTH: 33.3333333333%;

293
STI College Naga
}

.ROW-COLS-LG-4 > * {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.ROW-COLS-LG-5 > * {
FLEX: 0 0 AUTO;
WIDTH: 20%;
}

.ROW-COLS-LG-6 > * {
FLEX: 0 0 AUTO;
WIDTH: 16.6666666667%;
}
}
@MEDIA (MIN-WIDTH: 1200PX) {
.COL-XL {
FLEX: 1 0 0%;
}

.ROW-COLS-XL-AUTO > * {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.ROW-COLS-XL-1 > * {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.ROW-COLS-XL-2 > * {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.ROW-COLS-XL-3 > * {
FLEX: 0 0 AUTO;
WIDTH: 33.3333333333%;
}

.ROW-COLS-XL-4 > * {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

294
STI College Naga
.ROW-COLS-XL-5 > * {
FLEX: 0 0 AUTO;
WIDTH: 20%;
}

.ROW-COLS-XL-6 > * {
FLEX: 0 0 AUTO;
WIDTH: 16.6666666667%;
}
}
@MEDIA (MIN-WIDTH: 1400PX) {
.COL-XXL {
FLEX: 1 0 0%;
}

.ROW-COLS-XXL-AUTO > * {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.ROW-COLS-XXL-1 > * {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.ROW-COLS-XXL-2 > * {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.ROW-COLS-XXL-3 > * {
FLEX: 0 0 AUTO;
WIDTH: 33.3333333333%;
}

.ROW-COLS-XXL-4 > * {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.ROW-COLS-XXL-5 > * {
FLEX: 0 0 AUTO;
WIDTH: 20%;
}

295
STI College Naga
.ROW-COLS-XXL-6 > * {
FLEX: 0 0 AUTO;
WIDTH: 16.6666666667%;
}
}
.COL-AUTO {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.COL-1 {
FLEX: 0 0 AUTO;
WIDTH: 8.33333333%;
}

.COL-2 {
FLEX: 0 0 AUTO;
WIDTH: 16.66666667%;
}

.COL-3 {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.COL-4 {
FLEX: 0 0 AUTO;
WIDTH: 33.33333333%;
}

.COL-5 {
FLEX: 0 0 AUTO;
WIDTH: 41.66666667%;
}

.COL-6 {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.COL-7 {
FLEX: 0 0 AUTO;
WIDTH: 58.33333333%;
}

.COL-8 {

296
STI College Naga
FLEX: 0 0 AUTO;
WIDTH: 66.66666667%;
}

.COL-9 {
FLEX: 0 0 AUTO;
WIDTH: 75%;
}

.COL-10 {
FLEX: 0 0 AUTO;
WIDTH: 83.33333333%;
}

.COL-11 {
FLEX: 0 0 AUTO;
WIDTH: 91.66666667%;
}

.COL-12 {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.OFFSET-1 {
MARGIN-LEFT: 8.33333333%;
}

.OFFSET-2 {
MARGIN-LEFT: 16.66666667%;
}

.OFFSET-3 {
MARGIN-LEFT: 25%;
}

.OFFSET-4 {
MARGIN-LEFT: 33.33333333%;
}

.OFFSET-5 {
MARGIN-LEFT: 41.66666667%;
}

.OFFSET-6 {
MARGIN-LEFT: 50%;

297
STI College Naga
}

.OFFSET-7 {
MARGIN-LEFT: 58.33333333%;
}

.OFFSET-8 {
MARGIN-LEFT: 66.66666667%;
}

.OFFSET-9 {
MARGIN-LEFT: 75%;
}

.OFFSET-10 {
MARGIN-LEFT: 83.33333333%;
}

.OFFSET-11 {
MARGIN-LEFT: 91.66666667%;
}

.G-0,
.GX-0 {
--BS-GUTTER-X: 0;
}

.G-0,
.GY-0 {
--BS-GUTTER-Y: 0;
}

.G-1,
.GX-1 {
--BS-GUTTER-X: 0.25REM;
}

.G-1,
.GY-1 {
--BS-GUTTER-Y: 0.25REM;
}

.G-2,
.GX-2 {
--BS-GUTTER-X: 0.5REM;
}

298
STI College Naga
.G-2,
.GY-2 {
--BS-GUTTER-Y: 0.5REM;
}

.G-3,
.GX-3 {
--BS-GUTTER-X: 1REM;
}

.G-3,
.GY-3 {
--BS-GUTTER-Y: 1REM;
}

.G-4,
.GX-4 {
--BS-GUTTER-X: 1.5REM;
}

.G-4,
.GY-4 {
--BS-GUTTER-Y: 1.5REM;
}

.G-5,
.GX-5 {
--BS-GUTTER-X: 3REM;
}

.G-5,
.GY-5 {
--BS-GUTTER-Y: 3REM;
}

@MEDIA (MIN-WIDTH: 576PX) {

.COL-SM-AUTO {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.COL-SM-1 {
FLEX: 0 0 AUTO;
WIDTH: 8.33333333%;
}

299
STI College Naga
.COL-SM-2 {
FLEX: 0 0 AUTO;
WIDTH: 16.66666667%;
}

.COL-SM-3 {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.COL-SM-4 {
FLEX: 0 0 AUTO;
WIDTH: 33.33333333%;
}

.COL-SM-5 {
FLEX: 0 0 AUTO;
WIDTH: 41.66666667%;
}

.COL-SM-6 {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.COL-SM-7 {
FLEX: 0 0 AUTO;
WIDTH: 58.33333333%;
}

.COL-SM-8 {
FLEX: 0 0 AUTO;
WIDTH: 66.66666667%;
}

.COL-SM-9 {
FLEX: 0 0 AUTO;
WIDTH: 75%;
}

.COL-SM-10 {
FLEX: 0 0 AUTO;
WIDTH: 83.33333333%;
}

300
STI College Naga
.COL-SM-11 {
FLEX: 0 0 AUTO;
WIDTH: 91.66666667%;
}

.COL-SM-12 {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.OFFSET-SM-0 {
MARGIN-LEFT: 0;
}

.OFFSET-SM-1 {
MARGIN-LEFT: 8.33333333%;
}

.OFFSET-SM-2 {
MARGIN-LEFT: 16.66666667%;
}

.OFFSET-SM-3 {
MARGIN-LEFT: 25%;
}

.OFFSET-SM-4 {
MARGIN-LEFT: 33.33333333%;
}

.OFFSET-SM-5 {
MARGIN-LEFT: 41.66666667%;
}

.OFFSET-SM-6 {
MARGIN-LEFT: 50%;
}

.OFFSET-SM-7 {
MARGIN-LEFT: 58.33333333%;
}

.OFFSET-SM-8 {
MARGIN-LEFT: 66.66666667%;
}

301
STI College Naga
.OFFSET-SM-9 {
MARGIN-LEFT: 75%;
}

.OFFSET-SM-10 {
MARGIN-LEFT: 83.33333333%;
}

.OFFSET-SM-11 {
MARGIN-LEFT: 91.66666667%;
}

.G-SM-0,
.GX-SM-0 {
--BS-GUTTER-X: 0;
}

.G-SM-0,
.GY-SM-0 {
--BS-GUTTER-Y: 0;
}

.G-SM-1,
.GX-SM-1 {
--BS-GUTTER-X: 0.25REM;
}

.G-SM-1,
.GY-SM-1 {
--BS-GUTTER-Y: 0.25REM;
}

.G-SM-2,
.GX-SM-2 {
--BS-GUTTER-X: 0.5REM;
}

.G-SM-2,
.GY-SM-2 {
--BS-GUTTER-Y: 0.5REM;
}

.G-SM-3,
.GX-SM-3 {
--BS-GUTTER-X: 1REM;
}

302
STI College Naga
.G-SM-3,
.GY-SM-3 {
--BS-GUTTER-Y: 1REM;
}

.G-SM-4,
.GX-SM-4 {
--BS-GUTTER-X: 1.5REM;
}

.G-SM-4,
.GY-SM-4 {
--BS-GUTTER-Y: 1.5REM;
}

.G-SM-5,
.GX-SM-5 {
--BS-GUTTER-X: 3REM;
}

.G-SM-5,
.GY-SM-5 {
--BS-GUTTER-Y: 3REM;
}
}
@MEDIA (MIN-WIDTH: 768PX) {
.COL-MD-AUTO {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.COL-MD-1 {
FLEX: 0 0 AUTO;
WIDTH: 8.33333333%;
}

.COL-MD-2 {
FLEX: 0 0 AUTO;
WIDTH: 16.66666667%;
}

.COL-MD-3 {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

303
STI College Naga
.COL-MD-4 {
FLEX: 0 0 AUTO;
WIDTH: 33.33333333%;
}

.COL-MD-5 {
FLEX: 0 0 AUTO;
WIDTH: 41.66666667%;
}

.COL-MD-6 {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.COL-MD-7 {
FLEX: 0 0 AUTO;
WIDTH: 58.33333333%;
}

.COL-MD-8 {
FLEX: 0 0 AUTO;
WIDTH: 66.66666667%;
}

.COL-MD-9 {
FLEX: 0 0 AUTO;
WIDTH: 75%;
}

.COL-MD-10 {
FLEX: 0 0 AUTO;
WIDTH: 83.33333333%;
}

.COL-MD-11 {
FLEX: 0 0 AUTO;
WIDTH: 91.66666667%;
}

.COL-MD-12 {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

304
STI College Naga
.OFFSET-MD-0 {
MARGIN-LEFT: 0;
}

.OFFSET-MD-1 {
MARGIN-LEFT: 8.33333333%;
}

.OFFSET-MD-2 {
MARGIN-LEFT: 16.66666667%;
}

.OFFSET-MD-3 {
MARGIN-LEFT: 25%;
}

.OFFSET-MD-4 {
MARGIN-LEFT: 33.33333333%;
}

.OFFSET-MD-5 {
MARGIN-LEFT: 41.66666667%;
}

.OFFSET-MD-6 {
MARGIN-LEFT: 50%;
}

.OFFSET-MD-7 {
MARGIN-LEFT: 58.33333333%;
}

.OFFSET-MD-8 {
MARGIN-LEFT: 66.66666667%;
}

.OFFSET-MD-9 {
MARGIN-LEFT: 75%;
}

.OFFSET-MD-10 {
MARGIN-LEFT: 83.33333333%;
}

.OFFSET-MD-11 {
MARGIN-LEFT: 91.66666667%;

305
STI College Naga
}

.G-MD-0,
.GX-MD-0 {
--BS-GUTTER-X: 0;
}

.G-MD-0,
.GY-MD-0 {
--BS-GUTTER-Y: 0;
}

.G-MD-1,
.GX-MD-1 {
--BS-GUTTER-X: 0.25REM;
}

.G-MD-1,
.GY-MD-1 {
--BS-GUTTER-Y: 0.25REM;
}

.G-MD-2,
.GX-MD-2 {
--BS-GUTTER-X: 0.5REM;
}

.G-MD-2,
.GY-MD-2 {
--BS-GUTTER-Y: 0.5REM;
}

.G-MD-3,
.GX-MD-3 {
--BS-GUTTER-X: 1REM;
}

.G-MD-3,
.GY-MD-3 {
--BS-GUTTER-Y: 1REM;
}

.G-MD-4,
.GX-MD-4 {
--BS-GUTTER-X: 1.5REM;
}

306
STI College Naga
.G-MD-4,
.GY-MD-4 {
--BS-GUTTER-Y: 1.5REM;
}

.G-MD-5,
.GX-MD-5 {
--BS-GUTTER-X: 3REM;
}

.G-MD-5,
.GY-MD-5 {
--BS-GUTTER-Y: 3REM;
}
}
@MEDIA (MIN-WIDTH: 992PX) {
.COL-LG-AUTO {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.COL-LG-1 {
FLEX: 0 0 AUTO;
WIDTH: 8.33333333%;
}

.COL-LG-2 {
FLEX: 0 0 AUTO;
WIDTH: 16.66666667%;
}

.COL-LG-3 {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.COL-LG-4 {
FLEX: 0 0 AUTO;
WIDTH: 33.33333333%;
}

.COL-LG-5 {
FLEX: 0 0 AUTO;
WIDTH: 41.66666667%;
}

307
STI College Naga
.COL-LG-6 {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.COL-LG-7 {
FLEX: 0 0 AUTO;
WIDTH: 58.33333333%;
}

.COL-LG-8 {
FLEX: 0 0 AUTO;
WIDTH: 66.66666667%;
}

.COL-LG-9 {
FLEX: 0 0 AUTO;
WIDTH: 75%;
}

.COL-LG-10 {
FLEX: 0 0 AUTO;
WIDTH: 83.33333333%;
}

.COL-LG-11 {
FLEX: 0 0 AUTO;
WIDTH: 91.66666667%;
}

.COL-LG-12 {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.OFFSET-LG-0 {
MARGIN-LEFT: 0;
}

.OFFSET-LG-1 {
MARGIN-LEFT: 8.33333333%;
}

.OFFSET-LG-2 {
MARGIN-LEFT: 16.66666667%;

308
STI College Naga
}

.OFFSET-LG-3 {
MARGIN-LEFT: 25%;
}

.OFFSET-LG-4 {
MARGIN-LEFT: 33.33333333%;
}

.OFFSET-LG-5 {
MARGIN-LEFT: 41.66666667%;
}

.OFFSET-LG-6 {
MARGIN-LEFT: 50%;
}

.OFFSET-LG-7 {
MARGIN-LEFT: 58.33333333%;
}

.OFFSET-LG-8 {
MARGIN-LEFT: 66.66666667%;
}

.OFFSET-LG-9 {
MARGIN-LEFT: 75%;
}

.OFFSET-LG-10 {
MARGIN-LEFT: 83.33333333%;
}

.OFFSET-LG-11 {
MARGIN-LEFT: 91.66666667%;
}

.G-LG-0,
.GX-LG-0 {
--BS-GUTTER-X: 0;
}

.G-LG-0,
.GY-LG-0 {
--BS-GUTTER-Y: 0;

309
STI College Naga
}

.G-LG-1,
.GX-LG-1 {
--BS-GUTTER-X: 0.25REM;
}

.G-LG-1,
.GY-LG-1 {
--BS-GUTTER-Y: 0.25REM;
}

.G-LG-2,
.GX-LG-2 {
--BS-GUTTER-X: 0.5REM;
}

.G-LG-2,
.GY-LG-2 {
--BS-GUTTER-Y: 0.5REM;
}

.G-LG-3,
.GX-LG-3 {
--BS-GUTTER-X: 1REM;
}

.G-LG-3,
.GY-LG-3 {
--BS-GUTTER-Y: 1REM;
}

.G-LG-4,
.GX-LG-4 {
--BS-GUTTER-X: 1.5REM;
}

.G-LG-4,
.GY-LG-4 {
--BS-GUTTER-Y: 1.5REM;
}

.G-LG-5,
.GX-LG-5 {
--BS-GUTTER-X: 3REM;
}

310
STI College Naga
.G-LG-5,
.GY-LG-5 {
--BS-GUTTER-Y: 3REM;
}
}
@MEDIA (MIN-WIDTH: 1200PX) {
.COL-XL-AUTO {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.COL-XL-1 {
FLEX: 0 0 AUTO;
WIDTH: 8.33333333%;
}

.COL-XL-2 {
FLEX: 0 0 AUTO;
WIDTH: 16.66666667%;
}

.COL-XL-3 {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.COL-XL-4 {
FLEX: 0 0 AUTO;
WIDTH: 33.33333333%;
}

.COL-XL-5 {
FLEX: 0 0 AUTO;
WIDTH: 41.66666667%;
}

.COL-XL-6 {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.COL-XL-7 {
FLEX: 0 0 AUTO;
WIDTH: 58.33333333%;
}

311
STI College Naga
.COL-XL-8 {
FLEX: 0 0 AUTO;
WIDTH: 66.66666667%;
}

.COL-XL-9 {
FLEX: 0 0 AUTO;
WIDTH: 75%;
}

.COL-XL-10 {
FLEX: 0 0 AUTO;
WIDTH: 83.33333333%;
}

.COL-XL-11 {
FLEX: 0 0 AUTO;
WIDTH: 91.66666667%;
}

.COL-XL-12 {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.OFFSET-XL-0 {
MARGIN-LEFT: 0;
}

.OFFSET-XL-1 {
MARGIN-LEFT: 8.33333333%;
}

.OFFSET-XL-2 {
MARGIN-LEFT: 16.66666667%;
}

.OFFSET-XL-3 {
MARGIN-LEFT: 25%;
}

.OFFSET-XL-4 {
MARGIN-LEFT: 33.33333333%;
}

312
STI College Naga
.OFFSET-XL-5 {
MARGIN-LEFT: 41.66666667%;
}

.OFFSET-XL-6 {
MARGIN-LEFT: 50%;
}

.OFFSET-XL-7 {
MARGIN-LEFT: 58.33333333%;
}

.OFFSET-XL-8 {
MARGIN-LEFT: 66.66666667%;
}

.OFFSET-XL-9 {
MARGIN-LEFT: 75%;
}

.OFFSET-XL-10 {
MARGIN-LEFT: 83.33333333%;
}

.OFFSET-XL-11 {
MARGIN-LEFT: 91.66666667%;
}

.G-XL-0,
.GX-XL-0 {
--BS-GUTTER-X: 0;
}

.G-XL-0,
.GY-XL-0 {
--BS-GUTTER-Y: 0;
}

.G-XL-1,
.GX-XL-1 {
--BS-GUTTER-X: 0.25REM;
}

.G-XL-1,
.GY-XL-1 {
--BS-GUTTER-Y: 0.25REM;

313
STI College Naga
}

.G-XL-2,
.GX-XL-2 {
--BS-GUTTER-X: 0.5REM;
}

.G-XL-2,
.GY-XL-2 {
--BS-GUTTER-Y: 0.5REM;
}

.G-XL-3,
.GX-XL-3 {
--BS-GUTTER-X: 1REM;
}

.G-XL-3,
.GY-XL-3 {
--BS-GUTTER-Y: 1REM;
}

.G-XL-4,
.GX-XL-4 {
--BS-GUTTER-X: 1.5REM;
}

.G-XL-4,
.GY-XL-4 {
--BS-GUTTER-Y: 1.5REM;
}

.G-XL-5,
.GX-XL-5 {
--BS-GUTTER-X: 3REM;
}

.G-XL-5,
.GY-XL-5 {
--BS-GUTTER-Y: 3REM;
}
}
@MEDIA (MIN-WIDTH: 1400PX) {
.COL-XXL-AUTO {
FLEX: 0 0 AUTO;
WIDTH: AUTO;

314
STI College Naga
}

.COL-XXL-1 {
FLEX: 0 0 AUTO;
WIDTH: 8.33333333%;
}

.COL-XXL-2 {
FLEX: 0 0 AUTO;
WIDTH: 16.66666667%;
}

.COL-XXL-3 {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.COL-XXL-4 {
FLEX: 0 0 AUTO;
WIDTH: 33.33333333%;
}

.COL-XXL-5 {
FLEX: 0 0 AUTO;
WIDTH: 41.66666667%;
}

.COL-XXL-6 {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.COL-XXL-7 {
FLEX: 0 0 AUTO;
WIDTH: 58.33333333%;
}

.COL-XXL-8 {
FLEX: 0 0 AUTO;
WIDTH: 66.66666667%;
}

.COL-XXL-9 {
FLEX: 0 0 AUTO;
WIDTH: 75%;
}

315
STI College Naga
.COL-XXL-10 {
FLEX: 0 0 AUTO;
WIDTH: 83.33333333%;
}

.COL-XXL-11 {
FLEX: 0 0 AUTO;
WIDTH: 91.66666667%;
}

.COL-XXL-12 {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.OFFSET-XXL-0 {
MARGIN-LEFT: 0;
}

.OFFSET-XXL-1 {
MARGIN-LEFT: 8.33333333%;
}

.OFFSET-XXL-2 {
MARGIN-LEFT: 16.66666667%;
}

.OFFSET-XXL-3 {
MARGIN-LEFT: 25%;
}

.OFFSET-XXL-4 {
MARGIN-LEFT: 33.33333333%;
}

.OFFSET-XXL-5 {
MARGIN-LEFT: 41.66666667%;
}

.OFFSET-XXL-6 {
MARGIN-LEFT: 50%;
}

.OFFSET-XXL-7 {
MARGIN-LEFT: 58.33333333%;

316
STI College Naga
}

.OFFSET-XXL-8 {
MARGIN-LEFT: 66.66666667%;
}

.OFFSET-XXL-9 {
MARGIN-LEFT: 75%;
}

.OFFSET-XXL-10 {
MARGIN-LEFT: 83.33333333%;
}

.OFFSET-XXL-11 {
MARGIN-LEFT: 91.66666667%;
}

.G-XXL-0,
.GX-XXL-0 {
--BS-GUTTER-X: 0;
}

.G-XXL-0,
.GY-XXL-0 {
--BS-GUTTER-Y: 0;
}

.G-XXL-1,
.GX-XXL-1 {
--BS-GUTTER-X: 0.25REM;
}

.G-XXL-1,
.GY-XXL-1 {
--BS-GUTTER-Y: 0.25REM;
}

.G-XXL-2,
.GX-XXL-2 {
--BS-GUTTER-X: 0.5REM;
}

.G-XXL-2,
.GY-XXL-2 {
--BS-GUTTER-Y: 0.5REM;

317
STI College Naga
}

.G-XXL-3,
.GX-XXL-3 {
--BS-GUTTER-X: 1REM;
}

.G-XXL-3,
.GY-XXL-3 {
--BS-GUTTER-Y: 1REM;
}

.G-XXL-4,
.GX-XXL-4 {
--BS-GUTTER-X: 1.5REM;
}

.G-XXL-4,
.GY-XXL-4 {
--BS-GUTTER-Y: 1.5REM;
}

.G-XXL-5,
.GX-XXL-5 {
--BS-GUTTER-X: 3REM;
}

.G-XXL-5,
.GY-XXL-5 {
--BS-GUTTER-Y: 3REM;
}
}
.D-INLINE {
DISPLAY: INLINE !IMPORTANT;
}

.D-INLINE-BLOCK {
DISPLAY: INLINE-BLOCK !IMPORTANT;
}

.D-BLOCK {
DISPLAY: BLOCK !IMPORTANT;
}

.D-GRID {
DISPLAY: GRID !IMPORTANT;

318
STI College Naga
}

.D-TABLE {
DISPLAY: TABLE !IMPORTANT;
}

.D-TABLE-ROW {
DISPLAY: TABLE-ROW !IMPORTANT;
}

.D-TABLE-CELL {
DISPLAY: TABLE-CELL !IMPORTANT;
}

.D-FLEX {
DISPLAY: FLEX !IMPORTANT;
}

.D-INLINE-FLEX {
DISPLAY: INLINE-FLEX !IMPORTANT;
}

.D-NONE {
DISPLAY: NONE !IMPORTANT;
}

.FLEX-FILL {
FLEX: 1 1 AUTO !IMPORTANT;
}

.FLEX-ROW {
FLEX-DIRECTION: ROW !IMPORTANT;
}

.FLEX-COLUMN {
FLEX-DIRECTION: COLUMN !IMPORTANT;
}

.FLEX-ROW-REVERSE {
FLEX-DIRECTION: ROW-REVERSE !IMPORTANT;
}

.FLEX-COLUMN-REVERSE {
FLEX-DIRECTION: COLUMN-REVERSE !IMPORTANT;
}

319
STI College Naga
.FLEX-GROW-0 {
FLEX-GROW: 0 !IMPORTANT;
}

.FLEX-GROW-1 {
FLEX-GROW: 1 !IMPORTANT;
}

.FLEX-SHRINK-0 {
FLEX-SHRINK: 0 !IMPORTANT;
}

.FLEX-SHRINK-1 {
FLEX-SHRINK: 1 !IMPORTANT;
}

.FLEX-WRAP {
FLEX-WRAP: WRAP !IMPORTANT;
}

.FLEX-NOWRAP {
FLEX-WRAP: NOWRAP !IMPORTANT;
}

.FLEX-WRAP-REVERSE {
FLEX-WRAP: WRAP-REVERSE !IMPORTANT;
}

.JUSTIFY-CONTENT-START {
JUSTIFY-CONTENT: FLEX-START !IMPORTANT;
}

.JUSTIFY-CONTENT-END {
JUSTIFY-CONTENT: FLEX-END !IMPORTANT;
}

.JUSTIFY-CONTENT-CENTER {
JUSTIFY-CONTENT: CENTER !IMPORTANT;
}

.JUSTIFY-CONTENT-BETWEEN {
JUSTIFY-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.JUSTIFY-CONTENT-AROUND {
JUSTIFY-CONTENT: SPACE-AROUND !IMPORTANT;

320
STI College Naga
}

.JUSTIFY-CONTENT-EVENLY {
JUSTIFY-CONTENT: SPACE-EVENLY !IMPORTANT;
}

.ALIGN-ITEMS-START {
ALIGN-ITEMS: FLEX-START !IMPORTANT;
}

.ALIGN-ITEMS-END {
ALIGN-ITEMS: FLEX-END !IMPORTANT;
}

.ALIGN-ITEMS-CENTER {
ALIGN-ITEMS: CENTER !IMPORTANT;
}

.ALIGN-ITEMS-BASELINE {
ALIGN-ITEMS: BASELINE !IMPORTANT;
}

.ALIGN-ITEMS-STRETCH {
ALIGN-ITEMS: STRETCH !IMPORTANT;
}

.ALIGN-CONTENT-START {
ALIGN-CONTENT: FLEX-START !IMPORTANT;
}

.ALIGN-CONTENT-END {
ALIGN-CONTENT: FLEX-END !IMPORTANT;
}

.ALIGN-CONTENT-CENTER {
ALIGN-CONTENT: CENTER !IMPORTANT;
}

.ALIGN-CONTENT-BETWEEN {
ALIGN-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.ALIGN-CONTENT-AROUND {
ALIGN-CONTENT: SPACE-AROUND !IMPORTANT;
}

321
STI College Naga
.ALIGN-CONTENT-STRETCH {
ALIGN-CONTENT: STRETCH !IMPORTANT;
}

.ALIGN-SELF-AUTO {
ALIGN-SELF: AUTO !IMPORTANT;
}

.ALIGN-SELF-START {
ALIGN-SELF: FLEX-START !IMPORTANT;
}

.ALIGN-SELF-END {
ALIGN-SELF: FLEX-END !IMPORTANT;
}

.ALIGN-SELF-CENTER {
ALIGN-SELF: CENTER !IMPORTANT;
}

.ALIGN-SELF-BASELINE {
ALIGN-SELF: BASELINE !IMPORTANT;
}

.ALIGN-SELF-STRETCH {
ALIGN-SELF: STRETCH !IMPORTANT;
}

.ORDER-FIRST {
ORDER: -1 !IMPORTANT;
}

.ORDER-0 {
ORDER: 0 !IMPORTANT;
}

.ORDER-1 {
ORDER: 1 !IMPORTANT;
}

.ORDER-2 {
ORDER: 2 !IMPORTANT;
}

.ORDER-3 {
ORDER: 3 !IMPORTANT;

322
STI College Naga
}

.ORDER-4 {
ORDER: 4 !IMPORTANT;
}

.ORDER-5 {
ORDER: 5 !IMPORTANT;
}

.ORDER-LAST {
ORDER: 6 !IMPORTANT;
}

.M-0 {
MARGIN: 0 !IMPORTANT;
}

.M-1 {
MARGIN: 0.25REM !IMPORTANT;
}

.M-2 {
MARGIN: 0.5REM !IMPORTANT;
}

.M-3 {
MARGIN: 1REM !IMPORTANT;
}

.M-4 {
MARGIN: 1.5REM !IMPORTANT;
}

.M-5 {
MARGIN: 3REM !IMPORTANT;
}

.M-AUTO {
MARGIN: AUTO !IMPORTANT;
}

.MX-0 {
MARGIN-RIGHT: 0 !IMPORTANT;
MARGIN-LEFT: 0 !IMPORTANT;
}

323
STI College Naga
.MX-1 {
MARGIN-RIGHT: 0.25REM !IMPORTANT;
MARGIN-LEFT: 0.25REM !IMPORTANT;
}

.MX-2 {
MARGIN-RIGHT: 0.5REM !IMPORTANT;
MARGIN-LEFT: 0.5REM !IMPORTANT;
}

.MX-3 {
MARGIN-RIGHT: 1REM !IMPORTANT;
MARGIN-LEFT: 1REM !IMPORTANT;
}

.MX-4 {
MARGIN-RIGHT: 1.5REM !IMPORTANT;
MARGIN-LEFT: 1.5REM !IMPORTANT;
}

.MX-5 {
MARGIN-RIGHT: 3REM !IMPORTANT;
MARGIN-LEFT: 3REM !IMPORTANT;
}

.MX-AUTO {
MARGIN-RIGHT: AUTO !IMPORTANT;
MARGIN-LEFT: AUTO !IMPORTANT;
}

.MY-0 {
MARGIN-TOP: 0 !IMPORTANT;
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MY-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MY-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

324
STI College Naga
.MY-3 {
MARGIN-TOP: 1REM !IMPORTANT;
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MY-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MY-5 {
MARGIN-TOP: 3REM !IMPORTANT;
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MY-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MT-0 {
MARGIN-TOP: 0 !IMPORTANT;
}

.MT-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
}

.MT-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
}

.MT-3 {
MARGIN-TOP: 1REM !IMPORTANT;
}

.MT-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
}

.MT-5 {
MARGIN-TOP: 3REM !IMPORTANT;
}

.MT-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;

325
STI College Naga
}

.ME-0 {
MARGIN-RIGHT: 0 !IMPORTANT;
}

.ME-1 {
MARGIN-RIGHT: 0.25REM !IMPORTANT;
}

.ME-2 {
MARGIN-RIGHT: 0.5REM !IMPORTANT;
}

.ME-3 {
MARGIN-RIGHT: 1REM !IMPORTANT;
}

.ME-4 {
MARGIN-RIGHT: 1.5REM !IMPORTANT;
}

.ME-5 {
MARGIN-RIGHT: 3REM !IMPORTANT;
}

.ME-AUTO {
MARGIN-RIGHT: AUTO !IMPORTANT;
}

.MB-0 {
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MB-1 {
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MB-2 {
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MB-3 {
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

326
STI College Naga
.MB-4 {
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MB-5 {
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MB-AUTO {
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MS-0 {
MARGIN-LEFT: 0 !IMPORTANT;
}

.MS-1 {
MARGIN-LEFT: 0.25REM !IMPORTANT;
}

.MS-2 {
MARGIN-LEFT: 0.5REM !IMPORTANT;
}

.MS-3 {
MARGIN-LEFT: 1REM !IMPORTANT;
}

.MS-4 {
MARGIN-LEFT: 1.5REM !IMPORTANT;
}

.MS-5 {
MARGIN-LEFT: 3REM !IMPORTANT;
}

.MS-AUTO {
MARGIN-LEFT: AUTO !IMPORTANT;
}

.P-0 {
PADDING: 0 !IMPORTANT;
}

.P-1 {
PADDING: 0.25REM !IMPORTANT;

327
STI College Naga
}

.P-2 {
PADDING: 0.5REM !IMPORTANT;
}

.P-3 {
PADDING: 1REM !IMPORTANT;
}

.P-4 {
PADDING: 1.5REM !IMPORTANT;
}

.P-5 {
PADDING: 3REM !IMPORTANT;
}

.PX-0 {
PADDING-RIGHT: 0 !IMPORTANT;
PADDING-LEFT: 0 !IMPORTANT;
}

.PX-1 {
PADDING-RIGHT: 0.25REM !IMPORTANT;
PADDING-LEFT: 0.25REM !IMPORTANT;
}

.PX-2 {
PADDING-RIGHT: 0.5REM !IMPORTANT;
PADDING-LEFT: 0.5REM !IMPORTANT;
}

.PX-3 {
PADDING-RIGHT: 1REM !IMPORTANT;
PADDING-LEFT: 1REM !IMPORTANT;
}

.PX-4 {
PADDING-RIGHT: 1.5REM !IMPORTANT;
PADDING-LEFT: 1.5REM !IMPORTANT;
}

.PX-5 {
PADDING-RIGHT: 3REM !IMPORTANT;
PADDING-LEFT: 3REM !IMPORTANT;

328
STI College Naga
}

.PY-0 {
PADDING-TOP: 0 !IMPORTANT;
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PY-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PY-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PY-3 {
PADDING-TOP: 1REM !IMPORTANT;
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PY-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PY-5 {
PADDING-TOP: 3REM !IMPORTANT;
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PT-0 {
PADDING-TOP: 0 !IMPORTANT;
}

.PT-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
}

.PT-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
}

.PT-3 {
PADDING-TOP: 1REM !IMPORTANT;

329
STI College Naga
}

.PT-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
}

.PT-5 {
PADDING-TOP: 3REM !IMPORTANT;
}

.PE-0 {
PADDING-RIGHT: 0 !IMPORTANT;
}

.PE-1 {
PADDING-RIGHT: 0.25REM !IMPORTANT;
}

.PE-2 {
PADDING-RIGHT: 0.5REM !IMPORTANT;
}

.PE-3 {
PADDING-RIGHT: 1REM !IMPORTANT;
}

.PE-4 {
PADDING-RIGHT: 1.5REM !IMPORTANT;
}

.PE-5 {
PADDING-RIGHT: 3REM !IMPORTANT;
}

.PB-0 {
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PB-1 {
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PB-2 {
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

330
STI College Naga
.PB-3 {
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PB-4 {
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PB-5 {
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PS-0 {
PADDING-LEFT: 0 !IMPORTANT;
}

.PS-1 {
PADDING-LEFT: 0.25REM !IMPORTANT;
}

.PS-2 {
PADDING-LEFT: 0.5REM !IMPORTANT;
}

.PS-3 {
PADDING-LEFT: 1REM !IMPORTANT;
}

.PS-4 {
PADDING-LEFT: 1.5REM !IMPORTANT;
}

.PS-5 {
PADDING-LEFT: 3REM !IMPORTANT;
}

@MEDIA (MIN-WIDTH: 576PX) {

.D-SM-INLINE {
DISPLAY: INLINE !IMPORTANT;
}

.D-SM-INLINE-BLOCK {
DISPLAY: INLINE-BLOCK !IMPORTANT;
}

.D-SM-BLOCK {

331
STI College Naga
DISPLAY: BLOCK !IMPORTANT;
}

.D-SM-GRID {
DISPLAY: GRID !IMPORTANT;
}

.D-SM-TABLE {
DISPLAY: TABLE !IMPORTANT;
}

.D-SM-TABLE-ROW {
DISPLAY: TABLE-ROW !IMPORTANT;
}

.D-SM-TABLE-CELL {
DISPLAY: TABLE-CELL !IMPORTANT;
}

.D-SM-FLEX {
DISPLAY: FLEX !IMPORTANT;
}

.D-SM-INLINE-FLEX {
DISPLAY: INLINE-FLEX !IMPORTANT;
}

.D-SM-NONE {
DISPLAY: NONE !IMPORTANT;
}

.FLEX-SM-FILL {
FLEX: 1 1 AUTO !IMPORTANT;
}

.FLEX-SM-ROW {
FLEX-DIRECTION: ROW !IMPORTANT;
}

.FLEX-SM-COLUMN {
FLEX-DIRECTION: COLUMN !IMPORTANT;
}

.FLEX-SM-ROW-REVERSE {
FLEX-DIRECTION: ROW-REVERSE !IMPORTANT;
}

332
STI College Naga
.FLEX-SM-COLUMN-REVERSE {
FLEX-DIRECTION: COLUMN-REVERSE !IMPORTANT;
}

.FLEX-SM-GROW-0 {
FLEX-GROW: 0 !IMPORTANT;
}

.FLEX-SM-GROW-1 {
FLEX-GROW: 1 !IMPORTANT;
}

.FLEX-SM-SHRINK-0 {
FLEX-SHRINK: 0 !IMPORTANT;
}

.FLEX-SM-SHRINK-1 {
FLEX-SHRINK: 1 !IMPORTANT;
}

.FLEX-SM-WRAP {
FLEX-WRAP: WRAP !IMPORTANT;
}

.FLEX-SM-NOWRAP {
FLEX-WRAP: NOWRAP !IMPORTANT;
}

.FLEX-SM-WRAP-REVERSE {
FLEX-WRAP: WRAP-REVERSE !IMPORTANT;
}

.JUSTIFY-CONTENT-SM-START {
JUSTIFY-CONTENT: FLEX-START !IMPORTANT;
}

.JUSTIFY-CONTENT-SM-END {
JUSTIFY-CONTENT: FLEX-END !IMPORTANT;
}

.JUSTIFY-CONTENT-SM-CENTER {
JUSTIFY-CONTENT: CENTER !IMPORTANT;
}

.JUSTIFY-CONTENT-SM-BETWEEN {

333
STI College Naga
JUSTIFY-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.JUSTIFY-CONTENT-SM-AROUND {
JUSTIFY-CONTENT: SPACE-AROUND !IMPORTANT;
}

.JUSTIFY-CONTENT-SM-EVENLY {
JUSTIFY-CONTENT: SPACE-EVENLY !IMPORTANT;
}

.ALIGN-ITEMS-SM-START {
ALIGN-ITEMS: FLEX-START !IMPORTANT;
}

.ALIGN-ITEMS-SM-END {
ALIGN-ITEMS: FLEX-END !IMPORTANT;
}

.ALIGN-ITEMS-SM-CENTER {
ALIGN-ITEMS: CENTER !IMPORTANT;
}

.ALIGN-ITEMS-SM-BASELINE {
ALIGN-ITEMS: BASELINE !IMPORTANT;
}

.ALIGN-ITEMS-SM-STRETCH {
ALIGN-ITEMS: STRETCH !IMPORTANT;
}

.ALIGN-CONTENT-SM-START {
ALIGN-CONTENT: FLEX-START !IMPORTANT;
}

.ALIGN-CONTENT-SM-END {
ALIGN-CONTENT: FLEX-END !IMPORTANT;
}

.ALIGN-CONTENT-SM-CENTER {
ALIGN-CONTENT: CENTER !IMPORTANT;
}

.ALIGN-CONTENT-SM-BETWEEN {
ALIGN-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

334
STI College Naga
.ALIGN-CONTENT-SM-AROUND {
ALIGN-CONTENT: SPACE-AROUND !IMPORTANT;
}

.ALIGN-CONTENT-SM-STRETCH {
ALIGN-CONTENT: STRETCH !IMPORTANT;
}

.ALIGN-SELF-SM-AUTO {
ALIGN-SELF: AUTO !IMPORTANT;
}

.ALIGN-SELF-SM-START {
ALIGN-SELF: FLEX-START !IMPORTANT;
}

.ALIGN-SELF-SM-END {
ALIGN-SELF: FLEX-END !IMPORTANT;
}

.ALIGN-SELF-SM-CENTER {
ALIGN-SELF: CENTER !IMPORTANT;
}

.ALIGN-SELF-SM-BASELINE {
ALIGN-SELF: BASELINE !IMPORTANT;
}

.ALIGN-SELF-SM-STRETCH {
ALIGN-SELF: STRETCH !IMPORTANT;
}

.ORDER-SM-FIRST {
ORDER: -1 !IMPORTANT;
}

.ORDER-SM-0 {
ORDER: 0 !IMPORTANT;
}

.ORDER-SM-1 {
ORDER: 1 !IMPORTANT;
}

.ORDER-SM-2 {

335
STI College Naga
ORDER: 2 !IMPORTANT;
}

.ORDER-SM-3 {
ORDER: 3 !IMPORTANT;
}

.ORDER-SM-4 {
ORDER: 4 !IMPORTANT;
}

.ORDER-SM-5 {
ORDER: 5 !IMPORTANT;
}

.ORDER-SM-LAST {
ORDER: 6 !IMPORTANT;
}

.M-SM-0 {
MARGIN: 0 !IMPORTANT;
}

.M-SM-1 {
MARGIN: 0.25REM !IMPORTANT;
}

.M-SM-2 {
MARGIN: 0.5REM !IMPORTANT;
}

.M-SM-3 {
MARGIN: 1REM !IMPORTANT;
}

.M-SM-4 {
MARGIN: 1.5REM !IMPORTANT;
}

.M-SM-5 {
MARGIN: 3REM !IMPORTANT;
}

.M-SM-AUTO {
MARGIN: AUTO !IMPORTANT;
}

336
STI College Naga
.MX-SM-0 {
MARGIN-RIGHT: 0 !IMPORTANT;
MARGIN-LEFT: 0 !IMPORTANT;
}

.MX-SM-1 {
MARGIN-RIGHT: 0.25REM !IMPORTANT;
MARGIN-LEFT: 0.25REM !IMPORTANT;
}

.MX-SM-2 {
MARGIN-RIGHT: 0.5REM !IMPORTANT;
MARGIN-LEFT: 0.5REM !IMPORTANT;
}

.MX-SM-3 {
MARGIN-RIGHT: 1REM !IMPORTANT;
MARGIN-LEFT: 1REM !IMPORTANT;
}

.MX-SM-4 {
MARGIN-RIGHT: 1.5REM !IMPORTANT;
MARGIN-LEFT: 1.5REM !IMPORTANT;
}

.MX-SM-5 {
MARGIN-RIGHT: 3REM !IMPORTANT;
MARGIN-LEFT: 3REM !IMPORTANT;
}

.MX-SM-AUTO {
MARGIN-RIGHT: AUTO !IMPORTANT;
MARGIN-LEFT: AUTO !IMPORTANT;
}

.MY-SM-0 {
MARGIN-TOP: 0 !IMPORTANT;
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MY-SM-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

337
STI College Naga
.MY-SM-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MY-SM-3 {
MARGIN-TOP: 1REM !IMPORTANT;
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MY-SM-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MY-SM-5 {
MARGIN-TOP: 3REM !IMPORTANT;
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MY-SM-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MT-SM-0 {
MARGIN-TOP: 0 !IMPORTANT;
}

.MT-SM-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
}

.MT-SM-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
}

.MT-SM-3 {
MARGIN-TOP: 1REM !IMPORTANT;
}

.MT-SM-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
}

.MT-SM-5 {

338
STI College Naga
MARGIN-TOP: 3REM !IMPORTANT;
}

.MT-SM-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
}

.ME-SM-0 {
MARGIN-RIGHT: 0 !IMPORTANT;
}

.ME-SM-1 {
MARGIN-RIGHT: 0.25REM !IMPORTANT;
}

.ME-SM-2 {
MARGIN-RIGHT: 0.5REM !IMPORTANT;
}

.ME-SM-3 {
MARGIN-RIGHT: 1REM !IMPORTANT;
}

.ME-SM-4 {
MARGIN-RIGHT: 1.5REM !IMPORTANT;
}

.ME-SM-5 {
MARGIN-RIGHT: 3REM !IMPORTANT;
}

.ME-SM-AUTO {
MARGIN-RIGHT: AUTO !IMPORTANT;
}

.MB-SM-0 {
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MB-SM-1 {
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MB-SM-2 {
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

339
STI College Naga
.MB-SM-3 {
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MB-SM-4 {
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MB-SM-5 {
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MB-SM-AUTO {
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MS-SM-0 {
MARGIN-LEFT: 0 !IMPORTANT;
}

.MS-SM-1 {
MARGIN-LEFT: 0.25REM !IMPORTANT;
}

.MS-SM-2 {
MARGIN-LEFT: 0.5REM !IMPORTANT;
}

.MS-SM-3 {
MARGIN-LEFT: 1REM !IMPORTANT;
}

.MS-SM-4 {
MARGIN-LEFT: 1.5REM !IMPORTANT;
}

.MS-SM-5 {
MARGIN-LEFT: 3REM !IMPORTANT;
}

.MS-SM-AUTO {
MARGIN-LEFT: AUTO !IMPORTANT;
}

.P-SM-0 {

340
STI College Naga
PADDING: 0 !IMPORTANT;
}

.P-SM-1 {
PADDING: 0.25REM !IMPORTANT;
}

.P-SM-2 {
PADDING: 0.5REM !IMPORTANT;
}

.P-SM-3 {
PADDING: 1REM !IMPORTANT;
}

.P-SM-4 {
PADDING: 1.5REM !IMPORTANT;
}

.P-SM-5 {
PADDING: 3REM !IMPORTANT;
}

.PX-SM-0 {
PADDING-RIGHT: 0 !IMPORTANT;
PADDING-LEFT: 0 !IMPORTANT;
}

.PX-SM-1 {
PADDING-RIGHT: 0.25REM !IMPORTANT;
PADDING-LEFT: 0.25REM !IMPORTANT;
}

.PX-SM-2 {
PADDING-RIGHT: 0.5REM !IMPORTANT;
PADDING-LEFT: 0.5REM !IMPORTANT;
}

.PX-SM-3 {
PADDING-RIGHT: 1REM !IMPORTANT;
PADDING-LEFT: 1REM !IMPORTANT;
}

.PX-SM-4 {
PADDING-RIGHT: 1.5REM !IMPORTANT;
PADDING-LEFT: 1.5REM !IMPORTANT;

341
STI College Naga
}

.PX-SM-5 {
PADDING-RIGHT: 3REM !IMPORTANT;
PADDING-LEFT: 3REM !IMPORTANT;
}

.PY-SM-0 {
PADDING-TOP: 0 !IMPORTANT;
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PY-SM-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PY-SM-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PY-SM-3 {
PADDING-TOP: 1REM !IMPORTANT;
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PY-SM-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PY-SM-5 {
PADDING-TOP: 3REM !IMPORTANT;
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PT-SM-0 {
PADDING-TOP: 0 !IMPORTANT;
}

.PT-SM-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
}

.PT-SM-2 {

342
STI College Naga
PADDING-TOP: 0.5REM !IMPORTANT;
}

.PT-SM-3 {
PADDING-TOP: 1REM !IMPORTANT;
}

.PT-SM-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
}

.PT-SM-5 {
PADDING-TOP: 3REM !IMPORTANT;
}

.PE-SM-0 {
PADDING-RIGHT: 0 !IMPORTANT;
}

.PE-SM-1 {
PADDING-RIGHT: 0.25REM !IMPORTANT;
}

.PE-SM-2 {
PADDING-RIGHT: 0.5REM !IMPORTANT;
}

.PE-SM-3 {
PADDING-RIGHT: 1REM !IMPORTANT;
}

.PE-SM-4 {
PADDING-RIGHT: 1.5REM !IMPORTANT;
}

.PE-SM-5 {
PADDING-RIGHT: 3REM !IMPORTANT;
}

.PB-SM-0 {
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PB-SM-1 {
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

343
STI College Naga
.PB-SM-2 {
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PB-SM-3 {
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PB-SM-4 {
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PB-SM-5 {
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PS-SM-0 {
PADDING-LEFT: 0 !IMPORTANT;
}

.PS-SM-1 {
PADDING-LEFT: 0.25REM !IMPORTANT;
}

.PS-SM-2 {
PADDING-LEFT: 0.5REM !IMPORTANT;
}

.PS-SM-3 {
PADDING-LEFT: 1REM !IMPORTANT;
}

.PS-SM-4 {
PADDING-LEFT: 1.5REM !IMPORTANT;
}

.PS-SM-5 {
PADDING-LEFT: 3REM !IMPORTANT;
}
}
@MEDIA (MIN-WIDTH: 768PX) {
.D-MD-INLINE {
DISPLAY: INLINE !IMPORTANT;
}

344
STI College Naga
.D-MD-INLINE-BLOCK {
DISPLAY: INLINE-BLOCK !IMPORTANT;
}

.D-MD-BLOCK {
DISPLAY: BLOCK !IMPORTANT;
}

.D-MD-GRID {
DISPLAY: GRID !IMPORTANT;
}

.D-MD-TABLE {
DISPLAY: TABLE !IMPORTANT;
}

.D-MD-TABLE-ROW {
DISPLAY: TABLE-ROW !IMPORTANT;
}

.D-MD-TABLE-CELL {
DISPLAY: TABLE-CELL !IMPORTANT;
}

.D-MD-FLEX {
DISPLAY: FLEX !IMPORTANT;
}

.D-MD-INLINE-FLEX {
DISPLAY: INLINE-FLEX !IMPORTANT;
}

.D-MD-NONE {
DISPLAY: NONE !IMPORTANT;
}

.FLEX-MD-FILL {
FLEX: 1 1 AUTO !IMPORTANT;
}

.FLEX-MD-ROW {
FLEX-DIRECTION: ROW !IMPORTANT;
}

.FLEX-MD-COLUMN {
FLEX-DIRECTION: COLUMN !IMPORTANT;

345
STI College Naga
}

.FLEX-MD-ROW-REVERSE {
FLEX-DIRECTION: ROW-REVERSE !IMPORTANT;
}

.FLEX-MD-COLUMN-REVERSE {
FLEX-DIRECTION: COLUMN-REVERSE !IMPORTANT;
}

.FLEX-MD-GROW-0 {
FLEX-GROW: 0 !IMPORTANT;
}

.FLEX-MD-GROW-1 {
FLEX-GROW: 1 !IMPORTANT;
}

.FLEX-MD-SHRINK-0 {
FLEX-SHRINK: 0 !IMPORTANT;
}

.FLEX-MD-SHRINK-1 {
FLEX-SHRINK: 1 !IMPORTANT;
}

.FLEX-MD-WRAP {
FLEX-WRAP: WRAP !IMPORTANT;
}

.FLEX-MD-NOWRAP {
FLEX-WRAP: NOWRAP !IMPORTANT;
}

.FLEX-MD-WRAP-REVERSE {
FLEX-WRAP: WRAP-REVERSE !IMPORTANT;
}

.JUSTIFY-CONTENT-MD-START {
JUSTIFY-CONTENT: FLEX-START !IMPORTANT;
}

.JUSTIFY-CONTENT-MD-END {
JUSTIFY-CONTENT: FLEX-END !IMPORTANT;
}

346
STI College Naga
.JUSTIFY-CONTENT-MD-CENTER {
JUSTIFY-CONTENT: CENTER !IMPORTANT;
}

.JUSTIFY-CONTENT-MD-BETWEEN {
JUSTIFY-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.JUSTIFY-CONTENT-MD-AROUND {
JUSTIFY-CONTENT: SPACE-AROUND !IMPORTANT;
}

.JUSTIFY-CONTENT-MD-EVENLY {
JUSTIFY-CONTENT: SPACE-EVENLY !IMPORTANT;
}

.ALIGN-ITEMS-MD-START {
ALIGN-ITEMS: FLEX-START !IMPORTANT;
}

.ALIGN-ITEMS-MD-END {
ALIGN-ITEMS: FLEX-END !IMPORTANT;
}

.ALIGN-ITEMS-MD-CENTER {
ALIGN-ITEMS: CENTER !IMPORTANT;
}

.ALIGN-ITEMS-MD-BASELINE {
ALIGN-ITEMS: BASELINE !IMPORTANT;
}

.ALIGN-ITEMS-MD-STRETCH {
ALIGN-ITEMS: STRETCH !IMPORTANT;
}

.ALIGN-CONTENT-MD-START {
ALIGN-CONTENT: FLEX-START !IMPORTANT;
}

.ALIGN-CONTENT-MD-END {
ALIGN-CONTENT: FLEX-END !IMPORTANT;
}

.ALIGN-CONTENT-MD-CENTER {
ALIGN-CONTENT: CENTER !IMPORTANT;

347
STI College Naga
}

.ALIGN-CONTENT-MD-BETWEEN {
ALIGN-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.ALIGN-CONTENT-MD-AROUND {
ALIGN-CONTENT: SPACE-AROUND !IMPORTANT;
}

.ALIGN-CONTENT-MD-STRETCH {
ALIGN-CONTENT: STRETCH !IMPORTANT;
}

.ALIGN-SELF-MD-AUTO {
ALIGN-SELF: AUTO !IMPORTANT;
}

.ALIGN-SELF-MD-START {
ALIGN-SELF: FLEX-START !IMPORTANT;
}

.ALIGN-SELF-MD-END {
ALIGN-SELF: FLEX-END !IMPORTANT;
}

.ALIGN-SELF-MD-CENTER {
ALIGN-SELF: CENTER !IMPORTANT;
}

.ALIGN-SELF-MD-BASELINE {
ALIGN-SELF: BASELINE !IMPORTANT;
}

.ALIGN-SELF-MD-STRETCH {
ALIGN-SELF: STRETCH !IMPORTANT;
}

.ORDER-MD-FIRST {
ORDER: -1 !IMPORTANT;
}

.ORDER-MD-0 {
ORDER: 0 !IMPORTANT;
}

348
STI College Naga
.ORDER-MD-1 {
ORDER: 1 !IMPORTANT;
}

.ORDER-MD-2 {
ORDER: 2 !IMPORTANT;
}

.ORDER-MD-3 {
ORDER: 3 !IMPORTANT;
}

.ORDER-MD-4 {
ORDER: 4 !IMPORTANT;
}

.ORDER-MD-5 {
ORDER: 5 !IMPORTANT;
}

.ORDER-MD-LAST {
ORDER: 6 !IMPORTANT;
}

.M-MD-0 {
MARGIN: 0 !IMPORTANT;
}

.M-MD-1 {
MARGIN: 0.25REM !IMPORTANT;
}

.M-MD-2 {
MARGIN: 0.5REM !IMPORTANT;
}

.M-MD-3 {
MARGIN: 1REM !IMPORTANT;
}

.M-MD-4 {
MARGIN: 1.5REM !IMPORTANT;
}

.M-MD-5 {
MARGIN: 3REM !IMPORTANT;

349
STI College Naga
}

.M-MD-AUTO {
MARGIN: AUTO !IMPORTANT;
}

.MX-MD-0 {
MARGIN-RIGHT: 0 !IMPORTANT;
MARGIN-LEFT: 0 !IMPORTANT;
}

.MX-MD-1 {
MARGIN-RIGHT: 0.25REM !IMPORTANT;
MARGIN-LEFT: 0.25REM !IMPORTANT;
}

.MX-MD-2 {
MARGIN-RIGHT: 0.5REM !IMPORTANT;
MARGIN-LEFT: 0.5REM !IMPORTANT;
}

.MX-MD-3 {
MARGIN-RIGHT: 1REM !IMPORTANT;
MARGIN-LEFT: 1REM !IMPORTANT;
}

.MX-MD-4 {
MARGIN-RIGHT: 1.5REM !IMPORTANT;
MARGIN-LEFT: 1.5REM !IMPORTANT;
}

.MX-MD-5 {
MARGIN-RIGHT: 3REM !IMPORTANT;
MARGIN-LEFT: 3REM !IMPORTANT;
}

.MX-MD-AUTO {
MARGIN-RIGHT: AUTO !IMPORTANT;
MARGIN-LEFT: AUTO !IMPORTANT;
}

.MY-MD-0 {
MARGIN-TOP: 0 !IMPORTANT;
MARGIN-BOTTOM: 0 !IMPORTANT;
}

350
STI College Naga
.MY-MD-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MY-MD-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MY-MD-3 {
MARGIN-TOP: 1REM !IMPORTANT;
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MY-MD-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MY-MD-5 {
MARGIN-TOP: 3REM !IMPORTANT;
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MY-MD-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MT-MD-0 {
MARGIN-TOP: 0 !IMPORTANT;
}

.MT-MD-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
}

.MT-MD-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
}

.MT-MD-3 {
MARGIN-TOP: 1REM !IMPORTANT;
}

351
STI College Naga
.MT-MD-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
}

.MT-MD-5 {
MARGIN-TOP: 3REM !IMPORTANT;
}

.MT-MD-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
}

.ME-MD-0 {
MARGIN-RIGHT: 0 !IMPORTANT;
}

.ME-MD-1 {
MARGIN-RIGHT: 0.25REM !IMPORTANT;
}

.ME-MD-2 {
MARGIN-RIGHT: 0.5REM !IMPORTANT;
}

.ME-MD-3 {
MARGIN-RIGHT: 1REM !IMPORTANT;
}

.ME-MD-4 {
MARGIN-RIGHT: 1.5REM !IMPORTANT;
}

.ME-MD-5 {
MARGIN-RIGHT: 3REM !IMPORTANT;
}

.ME-MD-AUTO {
MARGIN-RIGHT: AUTO !IMPORTANT;
}

.MB-MD-0 {
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MB-MD-1 {
MARGIN-BOTTOM: 0.25REM !IMPORTANT;

352
STI College Naga
}

.MB-MD-2 {
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MB-MD-3 {
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MB-MD-4 {
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MB-MD-5 {
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MB-MD-AUTO {
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MS-MD-0 {
MARGIN-LEFT: 0 !IMPORTANT;
}

.MS-MD-1 {
MARGIN-LEFT: 0.25REM !IMPORTANT;
}

.MS-MD-2 {
MARGIN-LEFT: 0.5REM !IMPORTANT;
}

.MS-MD-3 {
MARGIN-LEFT: 1REM !IMPORTANT;
}

.MS-MD-4 {
MARGIN-LEFT: 1.5REM !IMPORTANT;
}

.MS-MD-5 {
MARGIN-LEFT: 3REM !IMPORTANT;
}

353
STI College Naga
.MS-MD-AUTO {
MARGIN-LEFT: AUTO !IMPORTANT;
}

.P-MD-0 {
PADDING: 0 !IMPORTANT;
}

.P-MD-1 {
PADDING: 0.25REM !IMPORTANT;
}

.P-MD-2 {
PADDING: 0.5REM !IMPORTANT;
}

.P-MD-3 {
PADDING: 1REM !IMPORTANT;
}

.P-MD-4 {
PADDING: 1.5REM !IMPORTANT;
}

.P-MD-5 {
PADDING: 3REM !IMPORTANT;
}

.PX-MD-0 {
PADDING-RIGHT: 0 !IMPORTANT;
PADDING-LEFT: 0 !IMPORTANT;
}

.PX-MD-1 {
PADDING-RIGHT: 0.25REM !IMPORTANT;
PADDING-LEFT: 0.25REM !IMPORTANT;
}

.PX-MD-2 {
PADDING-RIGHT: 0.5REM !IMPORTANT;
PADDING-LEFT: 0.5REM !IMPORTANT;
}

.PX-MD-3 {
PADDING-RIGHT: 1REM !IMPORTANT;
PADDING-LEFT: 1REM !IMPORTANT;

354
STI College Naga
}

.PX-MD-4 {
PADDING-RIGHT: 1.5REM !IMPORTANT;
PADDING-LEFT: 1.5REM !IMPORTANT;
}

.PX-MD-5 {
PADDING-RIGHT: 3REM !IMPORTANT;
PADDING-LEFT: 3REM !IMPORTANT;
}

.PY-MD-0 {
PADDING-TOP: 0 !IMPORTANT;
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PY-MD-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PY-MD-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PY-MD-3 {
PADDING-TOP: 1REM !IMPORTANT;
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PY-MD-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PY-MD-5 {
PADDING-TOP: 3REM !IMPORTANT;
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PT-MD-0 {
PADDING-TOP: 0 !IMPORTANT;
}

355
STI College Naga
.PT-MD-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
}

.PT-MD-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
}

.PT-MD-3 {
PADDING-TOP: 1REM !IMPORTANT;
}

.PT-MD-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
}

.PT-MD-5 {
PADDING-TOP: 3REM !IMPORTANT;
}

.PE-MD-0 {
PADDING-RIGHT: 0 !IMPORTANT;
}

.PE-MD-1 {
PADDING-RIGHT: 0.25REM !IMPORTANT;
}

.PE-MD-2 {
PADDING-RIGHT: 0.5REM !IMPORTANT;
}

.PE-MD-3 {
PADDING-RIGHT: 1REM !IMPORTANT;
}

.PE-MD-4 {
PADDING-RIGHT: 1.5REM !IMPORTANT;
}

.PE-MD-5 {
PADDING-RIGHT: 3REM !IMPORTANT;
}

.PB-MD-0 {
PADDING-BOTTOM: 0 !IMPORTANT;

356
STI College Naga
}

.PB-MD-1 {
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PB-MD-2 {
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PB-MD-3 {
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PB-MD-4 {
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PB-MD-5 {
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PS-MD-0 {
PADDING-LEFT: 0 !IMPORTANT;
}

.PS-MD-1 {
PADDING-LEFT: 0.25REM !IMPORTANT;
}

.PS-MD-2 {
PADDING-LEFT: 0.5REM !IMPORTANT;
}

.PS-MD-3 {
PADDING-LEFT: 1REM !IMPORTANT;
}

.PS-MD-4 {
PADDING-LEFT: 1.5REM !IMPORTANT;
}

.PS-MD-5 {
PADDING-LEFT: 3REM !IMPORTANT;
}
}

357
STI College Naga
@MEDIA (MIN-WIDTH: 992PX) {
.D-LG-INLINE {
DISPLAY: INLINE !IMPORTANT;
}

.D-LG-INLINE-BLOCK {
DISPLAY: INLINE-BLOCK !IMPORTANT;
}

.D-LG-BLOCK {
DISPLAY: BLOCK !IMPORTANT;
}

.D-LG-GRID {
DISPLAY: GRID !IMPORTANT;
}

.D-LG-TABLE {
DISPLAY: TABLE !IMPORTANT;
}

.D-LG-TABLE-ROW {
DISPLAY: TABLE-ROW !IMPORTANT;
}

.D-LG-TABLE-CELL {
DISPLAY: TABLE-CELL !IMPORTANT;
}

.D-LG-FLEX {
DISPLAY: FLEX !IMPORTANT;
}

.D-LG-INLINE-FLEX {
DISPLAY: INLINE-FLEX !IMPORTANT;
}

.D-LG-NONE {
DISPLAY: NONE !IMPORTANT;
}

.FLEX-LG-FILL {
FLEX: 1 1 AUTO !IMPORTANT;
}

.FLEX-LG-ROW {

358
STI College Naga
FLEX-DIRECTION: ROW !IMPORTANT;
}

.FLEX-LG-COLUMN {
FLEX-DIRECTION: COLUMN !IMPORTANT;
}

.FLEX-LG-ROW-REVERSE {
FLEX-DIRECTION: ROW-REVERSE !IMPORTANT;
}

.FLEX-LG-COLUMN-REVERSE {
FLEX-DIRECTION: COLUMN-REVERSE !IMPORTANT;
}

.FLEX-LG-GROW-0 {
FLEX-GROW: 0 !IMPORTANT;
}

.FLEX-LG-GROW-1 {
FLEX-GROW: 1 !IMPORTANT;
}

.FLEX-LG-SHRINK-0 {
FLEX-SHRINK: 0 !IMPORTANT;
}

.FLEX-LG-SHRINK-1 {
FLEX-SHRINK: 1 !IMPORTANT;
}

.FLEX-LG-WRAP {
FLEX-WRAP: WRAP !IMPORTANT;
}

.FLEX-LG-NOWRAP {
FLEX-WRAP: NOWRAP !IMPORTANT;
}

.FLEX-LG-WRAP-REVERSE {
FLEX-WRAP: WRAP-REVERSE !IMPORTANT;
}

.JUSTIFY-CONTENT-LG-START {
JUSTIFY-CONTENT: FLEX-START !IMPORTANT;
}

359
STI College Naga
.JUSTIFY-CONTENT-LG-END {
JUSTIFY-CONTENT: FLEX-END !IMPORTANT;
}

.JUSTIFY-CONTENT-LG-CENTER {
JUSTIFY-CONTENT: CENTER !IMPORTANT;
}

.JUSTIFY-CONTENT-LG-BETWEEN {
JUSTIFY-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.JUSTIFY-CONTENT-LG-AROUND {
JUSTIFY-CONTENT: SPACE-AROUND !IMPORTANT;
}

.JUSTIFY-CONTENT-LG-EVENLY {
JUSTIFY-CONTENT: SPACE-EVENLY !IMPORTANT;
}

.ALIGN-ITEMS-LG-START {
ALIGN-ITEMS: FLEX-START !IMPORTANT;
}

.ALIGN-ITEMS-LG-END {
ALIGN-ITEMS: FLEX-END !IMPORTANT;
}

.ALIGN-ITEMS-LG-CENTER {
ALIGN-ITEMS: CENTER !IMPORTANT;
}

.ALIGN-ITEMS-LG-BASELINE {
ALIGN-ITEMS: BASELINE !IMPORTANT;
}

.ALIGN-ITEMS-LG-STRETCH {
ALIGN-ITEMS: STRETCH !IMPORTANT;
}

.ALIGN-CONTENT-LG-START {
ALIGN-CONTENT: FLEX-START !IMPORTANT;
}

.ALIGN-CONTENT-LG-END {

360
STI College Naga
ALIGN-CONTENT: FLEX-END !IMPORTANT;
}

.ALIGN-CONTENT-LG-CENTER {
ALIGN-CONTENT: CENTER !IMPORTANT;
}

.ALIGN-CONTENT-LG-BETWEEN {
ALIGN-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.ALIGN-CONTENT-LG-AROUND {
ALIGN-CONTENT: SPACE-AROUND !IMPORTANT;
}

.ALIGN-CONTENT-LG-STRETCH {
ALIGN-CONTENT: STRETCH !IMPORTANT;
}

.ALIGN-SELF-LG-AUTO {
ALIGN-SELF: AUTO !IMPORTANT;
}

.ALIGN-SELF-LG-START {
ALIGN-SELF: FLEX-START !IMPORTANT;
}

.ALIGN-SELF-LG-END {
ALIGN-SELF: FLEX-END !IMPORTANT;
}

.ALIGN-SELF-LG-CENTER {
ALIGN-SELF: CENTER !IMPORTANT;
}

.ALIGN-SELF-LG-BASELINE {
ALIGN-SELF: BASELINE !IMPORTANT;
}

.ALIGN-SELF-LG-STRETCH {
ALIGN-SELF: STRETCH !IMPORTANT;
}

.ORDER-LG-FIRST {
ORDER: -1 !IMPORTANT;
}

361
STI College Naga
.ORDER-LG-0 {
ORDER: 0 !IMPORTANT;
}

.ORDER-LG-1 {
ORDER: 1 !IMPORTANT;
}

.ORDER-LG-2 {
ORDER: 2 !IMPORTANT;
}

.ORDER-LG-3 {
ORDER: 3 !IMPORTANT;
}

.ORDER-LG-4 {
ORDER: 4 !IMPORTANT;
}

.ORDER-LG-5 {
ORDER: 5 !IMPORTANT;
}

.ORDER-LG-LAST {
ORDER: 6 !IMPORTANT;
}

.M-LG-0 {
MARGIN: 0 !IMPORTANT;
}

.M-LG-1 {
MARGIN: 0.25REM !IMPORTANT;
}

.M-LG-2 {
MARGIN: 0.5REM !IMPORTANT;
}

.M-LG-3 {
MARGIN: 1REM !IMPORTANT;
}

.M-LG-4 {

362
STI College Naga
MARGIN: 1.5REM !IMPORTANT;
}

.M-LG-5 {
MARGIN: 3REM !IMPORTANT;
}

.M-LG-AUTO {
MARGIN: AUTO !IMPORTANT;
}

.MX-LG-0 {
MARGIN-RIGHT: 0 !IMPORTANT;
MARGIN-LEFT: 0 !IMPORTANT;
}

.MX-LG-1 {
MARGIN-RIGHT: 0.25REM !IMPORTANT;
MARGIN-LEFT: 0.25REM !IMPORTANT;
}

.MX-LG-2 {
MARGIN-RIGHT: 0.5REM !IMPORTANT;
MARGIN-LEFT: 0.5REM !IMPORTANT;
}

.MX-LG-3 {
MARGIN-RIGHT: 1REM !IMPORTANT;
MARGIN-LEFT: 1REM !IMPORTANT;
}

.MX-LG-4 {
MARGIN-RIGHT: 1.5REM !IMPORTANT;
MARGIN-LEFT: 1.5REM !IMPORTANT;
}

.MX-LG-5 {
MARGIN-RIGHT: 3REM !IMPORTANT;
MARGIN-LEFT: 3REM !IMPORTANT;
}

.MX-LG-AUTO {
MARGIN-RIGHT: AUTO !IMPORTANT;
MARGIN-LEFT: AUTO !IMPORTANT;
}

363
STI College Naga
.MY-LG-0 {
MARGIN-TOP: 0 !IMPORTANT;
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MY-LG-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MY-LG-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MY-LG-3 {
MARGIN-TOP: 1REM !IMPORTANT;
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MY-LG-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MY-LG-5 {
MARGIN-TOP: 3REM !IMPORTANT;
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MY-LG-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MT-LG-0 {
MARGIN-TOP: 0 !IMPORTANT;
}

.MT-LG-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
}

.MT-LG-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
}

364
STI College Naga
.MT-LG-3 {
MARGIN-TOP: 1REM !IMPORTANT;
}

.MT-LG-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
}

.MT-LG-5 {
MARGIN-TOP: 3REM !IMPORTANT;
}

.MT-LG-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
}

.ME-LG-0 {
MARGIN-RIGHT: 0 !IMPORTANT;
}

.ME-LG-1 {
MARGIN-RIGHT: 0.25REM !IMPORTANT;
}

.ME-LG-2 {
MARGIN-RIGHT: 0.5REM !IMPORTANT;
}

.ME-LG-3 {
MARGIN-RIGHT: 1REM !IMPORTANT;
}

.ME-LG-4 {
MARGIN-RIGHT: 1.5REM !IMPORTANT;
}

.ME-LG-5 {
MARGIN-RIGHT: 3REM !IMPORTANT;
}

.ME-LG-AUTO {
MARGIN-RIGHT: AUTO !IMPORTANT;
}

.MB-LG-0 {

365
STI College Naga
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MB-LG-1 {
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MB-LG-2 {
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MB-LG-3 {
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MB-LG-4 {
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MB-LG-5 {
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MB-LG-AUTO {
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MS-LG-0 {
MARGIN-LEFT: 0 !IMPORTANT;
}

.MS-LG-1 {
MARGIN-LEFT: 0.25REM !IMPORTANT;
}

.MS-LG-2 {
MARGIN-LEFT: 0.5REM !IMPORTANT;
}

.MS-LG-3 {
MARGIN-LEFT: 1REM !IMPORTANT;
}

.MS-LG-4 {
MARGIN-LEFT: 1.5REM !IMPORTANT;
}

366
STI College Naga
.MS-LG-5 {
MARGIN-LEFT: 3REM !IMPORTANT;
}

.MS-LG-AUTO {
MARGIN-LEFT: AUTO !IMPORTANT;
}

.P-LG-0 {
PADDING: 0 !IMPORTANT;
}

.P-LG-1 {
PADDING: 0.25REM !IMPORTANT;
}

.P-LG-2 {
PADDING: 0.5REM !IMPORTANT;
}

.P-LG-3 {
PADDING: 1REM !IMPORTANT;
}

.P-LG-4 {
PADDING: 1.5REM !IMPORTANT;
}

.P-LG-5 {
PADDING: 3REM !IMPORTANT;
}

.PX-LG-0 {
PADDING-RIGHT: 0 !IMPORTANT;
PADDING-LEFT: 0 !IMPORTANT;
}

.PX-LG-1 {
PADDING-RIGHT: 0.25REM !IMPORTANT;
PADDING-LEFT: 0.25REM !IMPORTANT;
}

.PX-LG-2 {
PADDING-RIGHT: 0.5REM !IMPORTANT;
PADDING-LEFT: 0.5REM !IMPORTANT;

367
STI College Naga
}

.PX-LG-3 {
PADDING-RIGHT: 1REM !IMPORTANT;
PADDING-LEFT: 1REM !IMPORTANT;
}

.PX-LG-4 {
PADDING-RIGHT: 1.5REM !IMPORTANT;
PADDING-LEFT: 1.5REM !IMPORTANT;
}

.PX-LG-5 {
PADDING-RIGHT: 3REM !IMPORTANT;
PADDING-LEFT: 3REM !IMPORTANT;
}

.PY-LG-0 {
PADDING-TOP: 0 !IMPORTANT;
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PY-LG-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PY-LG-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PY-LG-3 {
PADDING-TOP: 1REM !IMPORTANT;
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PY-LG-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PY-LG-5 {
PADDING-TOP: 3REM !IMPORTANT;
PADDING-BOTTOM: 3REM !IMPORTANT;
}

368
STI College Naga
.PT-LG-0 {
PADDING-TOP: 0 !IMPORTANT;
}

.PT-LG-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
}

.PT-LG-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
}

.PT-LG-3 {
PADDING-TOP: 1REM !IMPORTANT;
}

.PT-LG-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
}

.PT-LG-5 {
PADDING-TOP: 3REM !IMPORTANT;
}

.PE-LG-0 {
PADDING-RIGHT: 0 !IMPORTANT;
}

.PE-LG-1 {
PADDING-RIGHT: 0.25REM !IMPORTANT;
}

.PE-LG-2 {
PADDING-RIGHT: 0.5REM !IMPORTANT;
}

.PE-LG-3 {
PADDING-RIGHT: 1REM !IMPORTANT;
}

.PE-LG-4 {
PADDING-RIGHT: 1.5REM !IMPORTANT;
}

.PE-LG-5 {

369
STI College Naga
PADDING-RIGHT: 3REM !IMPORTANT;
}

.PB-LG-0 {
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PB-LG-1 {
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PB-LG-2 {
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PB-LG-3 {
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PB-LG-4 {
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PB-LG-5 {
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PS-LG-0 {
PADDING-LEFT: 0 !IMPORTANT;
}

.PS-LG-1 {
PADDING-LEFT: 0.25REM !IMPORTANT;
}

.PS-LG-2 {
PADDING-LEFT: 0.5REM !IMPORTANT;
}

.PS-LG-3 {
PADDING-LEFT: 1REM !IMPORTANT;
}

.PS-LG-4 {
PADDING-LEFT: 1.5REM !IMPORTANT;
}

370
STI College Naga
.PS-LG-5 {
PADDING-LEFT: 3REM !IMPORTANT;
}
}
@MEDIA (MIN-WIDTH: 1200PX) {
.D-XL-INLINE {
DISPLAY: INLINE !IMPORTANT;
}

.D-XL-INLINE-BLOCK {
DISPLAY: INLINE-BLOCK !IMPORTANT;
}

.D-XL-BLOCK {
DISPLAY: BLOCK !IMPORTANT;
}

.D-XL-GRID {
DISPLAY: GRID !IMPORTANT;
}

.D-XL-TABLE {
DISPLAY: TABLE !IMPORTANT;
}

.D-XL-TABLE-ROW {
DISPLAY: TABLE-ROW !IMPORTANT;
}

.D-XL-TABLE-CELL {
DISPLAY: TABLE-CELL !IMPORTANT;
}

.D-XL-FLEX {
DISPLAY: FLEX !IMPORTANT;
}

.D-XL-INLINE-FLEX {
DISPLAY: INLINE-FLEX !IMPORTANT;
}

.D-XL-NONE {
DISPLAY: NONE !IMPORTANT;
}

371
STI College Naga
.FLEX-XL-FILL {
FLEX: 1 1 AUTO !IMPORTANT;
}

.FLEX-XL-ROW {
FLEX-DIRECTION: ROW !IMPORTANT;
}

.FLEX-XL-COLUMN {
FLEX-DIRECTION: COLUMN !IMPORTANT;
}

.FLEX-XL-ROW-REVERSE {
FLEX-DIRECTION: ROW-REVERSE !IMPORTANT;
}

.FLEX-XL-COLUMN-REVERSE {
FLEX-DIRECTION: COLUMN-REVERSE !IMPORTANT;
}

.FLEX-XL-GROW-0 {
FLEX-GROW: 0 !IMPORTANT;
}

.FLEX-XL-GROW-1 {
FLEX-GROW: 1 !IMPORTANT;
}

.FLEX-XL-SHRINK-0 {
FLEX-SHRINK: 0 !IMPORTANT;
}

.FLEX-XL-SHRINK-1 {
FLEX-SHRINK: 1 !IMPORTANT;
}

.FLEX-XL-WRAP {
FLEX-WRAP: WRAP !IMPORTANT;
}

.FLEX-XL-NOWRAP {
FLEX-WRAP: NOWRAP !IMPORTANT;
}

.FLEX-XL-WRAP-REVERSE {
FLEX-WRAP: WRAP-REVERSE !IMPORTANT;

372
STI College Naga
}

.JUSTIFY-CONTENT-XL-START {
JUSTIFY-CONTENT: FLEX-START !IMPORTANT;
}

.JUSTIFY-CONTENT-XL-END {
JUSTIFY-CONTENT: FLEX-END !IMPORTANT;
}

.JUSTIFY-CONTENT-XL-CENTER {
JUSTIFY-CONTENT: CENTER !IMPORTANT;
}

.JUSTIFY-CONTENT-XL-BETWEEN {
JUSTIFY-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.JUSTIFY-CONTENT-XL-AROUND {
JUSTIFY-CONTENT: SPACE-AROUND !IMPORTANT;
}

.JUSTIFY-CONTENT-XL-EVENLY {
JUSTIFY-CONTENT: SPACE-EVENLY !IMPORTANT;
}

.ALIGN-ITEMS-XL-START {
ALIGN-ITEMS: FLEX-START !IMPORTANT;
}

.ALIGN-ITEMS-XL-END {
ALIGN-ITEMS: FLEX-END !IMPORTANT;
}

.ALIGN-ITEMS-XL-CENTER {
ALIGN-ITEMS: CENTER !IMPORTANT;
}

.ALIGN-ITEMS-XL-BASELINE {
ALIGN-ITEMS: BASELINE !IMPORTANT;
}

.ALIGN-ITEMS-XL-STRETCH {
ALIGN-ITEMS: STRETCH !IMPORTANT;
}

373
STI College Naga
.ALIGN-CONTENT-XL-START {
ALIGN-CONTENT: FLEX-START !IMPORTANT;
}

.ALIGN-CONTENT-XL-END {
ALIGN-CONTENT: FLEX-END !IMPORTANT;
}

.ALIGN-CONTENT-XL-CENTER {
ALIGN-CONTENT: CENTER !IMPORTANT;
}

.ALIGN-CONTENT-XL-BETWEEN {
ALIGN-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.ALIGN-CONTENT-XL-AROUND {
ALIGN-CONTENT: SPACE-AROUND !IMPORTANT;
}

.ALIGN-CONTENT-XL-STRETCH {
ALIGN-CONTENT: STRETCH !IMPORTANT;
}

.ALIGN-SELF-XL-AUTO {
ALIGN-SELF: AUTO !IMPORTANT;
}

.ALIGN-SELF-XL-START {
ALIGN-SELF: FLEX-START !IMPORTANT;
}

.ALIGN-SELF-XL-END {
ALIGN-SELF: FLEX-END !IMPORTANT;
}

.ALIGN-SELF-XL-CENTER {
ALIGN-SELF: CENTER !IMPORTANT;
}

.ALIGN-SELF-XL-BASELINE {
ALIGN-SELF: BASELINE !IMPORTANT;
}

.ALIGN-SELF-XL-STRETCH {
ALIGN-SELF: STRETCH !IMPORTANT;

374
STI College Naga
}

.ORDER-XL-FIRST {
ORDER: -1 !IMPORTANT;
}

.ORDER-XL-0 {
ORDER: 0 !IMPORTANT;
}

.ORDER-XL-1 {
ORDER: 1 !IMPORTANT;
}

.ORDER-XL-2 {
ORDER: 2 !IMPORTANT;
}

.ORDER-XL-3 {
ORDER: 3 !IMPORTANT;
}

.ORDER-XL-4 {
ORDER: 4 !IMPORTANT;
}

.ORDER-XL-5 {
ORDER: 5 !IMPORTANT;
}

.ORDER-XL-LAST {
ORDER: 6 !IMPORTANT;
}

.M-XL-0 {
MARGIN: 0 !IMPORTANT;
}

.M-XL-1 {
MARGIN: 0.25REM !IMPORTANT;
}

.M-XL-2 {
MARGIN: 0.5REM !IMPORTANT;
}

375
STI College Naga
.M-XL-3 {
MARGIN: 1REM !IMPORTANT;
}

.M-XL-4 {
MARGIN: 1.5REM !IMPORTANT;
}

.M-XL-5 {
MARGIN: 3REM !IMPORTANT;
}

.M-XL-AUTO {
MARGIN: AUTO !IMPORTANT;
}

.MX-XL-0 {
MARGIN-RIGHT: 0 !IMPORTANT;
MARGIN-LEFT: 0 !IMPORTANT;
}

.MX-XL-1 {
MARGIN-RIGHT: 0.25REM !IMPORTANT;
MARGIN-LEFT: 0.25REM !IMPORTANT;
}

.MX-XL-2 {
MARGIN-RIGHT: 0.5REM !IMPORTANT;
MARGIN-LEFT: 0.5REM !IMPORTANT;
}

.MX-XL-3 {
MARGIN-RIGHT: 1REM !IMPORTANT;
MARGIN-LEFT: 1REM !IMPORTANT;
}

.MX-XL-4 {
MARGIN-RIGHT: 1.5REM !IMPORTANT;
MARGIN-LEFT: 1.5REM !IMPORTANT;
}

.MX-XL-5 {
MARGIN-RIGHT: 3REM !IMPORTANT;
MARGIN-LEFT: 3REM !IMPORTANT;
}

376
STI College Naga
.MX-XL-AUTO {
MARGIN-RIGHT: AUTO !IMPORTANT;
MARGIN-LEFT: AUTO !IMPORTANT;
}

.MY-XL-0 {
MARGIN-TOP: 0 !IMPORTANT;
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MY-XL-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MY-XL-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MY-XL-3 {
MARGIN-TOP: 1REM !IMPORTANT;
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MY-XL-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MY-XL-5 {
MARGIN-TOP: 3REM !IMPORTANT;
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MY-XL-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MT-XL-0 {
MARGIN-TOP: 0 !IMPORTANT;
}

.MT-XL-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;

377
STI College Naga
}

.MT-XL-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
}

.MT-XL-3 {
MARGIN-TOP: 1REM !IMPORTANT;
}

.MT-XL-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
}

.MT-XL-5 {
MARGIN-TOP: 3REM !IMPORTANT;
}

.MT-XL-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
}

.ME-XL-0 {
MARGIN-RIGHT: 0 !IMPORTANT;
}

.ME-XL-1 {
MARGIN-RIGHT: 0.25REM !IMPORTANT;
}

.ME-XL-2 {
MARGIN-RIGHT: 0.5REM !IMPORTANT;
}

.ME-XL-3 {
MARGIN-RIGHT: 1REM !IMPORTANT;
}

.ME-XL-4 {
MARGIN-RIGHT: 1.5REM !IMPORTANT;
}

.ME-XL-5 {
MARGIN-RIGHT: 3REM !IMPORTANT;
}

378
STI College Naga
.ME-XL-AUTO {
MARGIN-RIGHT: AUTO !IMPORTANT;
}

.MB-XL-0 {
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MB-XL-1 {
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MB-XL-2 {
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MB-XL-3 {
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MB-XL-4 {
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MB-XL-5 {
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MB-XL-AUTO {
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MS-XL-0 {
MARGIN-LEFT: 0 !IMPORTANT;
}

.MS-XL-1 {
MARGIN-LEFT: 0.25REM !IMPORTANT;
}

.MS-XL-2 {
MARGIN-LEFT: 0.5REM !IMPORTANT;
}

.MS-XL-3 {
MARGIN-LEFT: 1REM !IMPORTANT;

379
STI College Naga
}

.MS-XL-4 {
MARGIN-LEFT: 1.5REM !IMPORTANT;
}

.MS-XL-5 {
MARGIN-LEFT: 3REM !IMPORTANT;
}

.MS-XL-AUTO {
MARGIN-LEFT: AUTO !IMPORTANT;
}

.P-XL-0 {
PADDING: 0 !IMPORTANT;
}

.P-XL-1 {
PADDING: 0.25REM !IMPORTANT;
}

.P-XL-2 {
PADDING: 0.5REM !IMPORTANT;
}

.P-XL-3 {
PADDING: 1REM !IMPORTANT;
}

.P-XL-4 {
PADDING: 1.5REM !IMPORTANT;
}

.P-XL-5 {
PADDING: 3REM !IMPORTANT;
}

.PX-XL-0 {
PADDING-RIGHT: 0 !IMPORTANT;
PADDING-LEFT: 0 !IMPORTANT;
}

.PX-XL-1 {
PADDING-RIGHT: 0.25REM !IMPORTANT;
PADDING-LEFT: 0.25REM !IMPORTANT;

380
STI College Naga
}

.PX-XL-2 {
PADDING-RIGHT: 0.5REM !IMPORTANT;
PADDING-LEFT: 0.5REM !IMPORTANT;
}

.PX-XL-3 {
PADDING-RIGHT: 1REM !IMPORTANT;
PADDING-LEFT: 1REM !IMPORTANT;
}

.PX-XL-4 {
PADDING-RIGHT: 1.5REM !IMPORTANT;
PADDING-LEFT: 1.5REM !IMPORTANT;
}

.PX-XL-5 {
PADDING-RIGHT: 3REM !IMPORTANT;
PADDING-LEFT: 3REM !IMPORTANT;
}

.PY-XL-0 {
PADDING-TOP: 0 !IMPORTANT;
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PY-XL-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PY-XL-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PY-XL-3 {
PADDING-TOP: 1REM !IMPORTANT;
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PY-XL-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

381
STI College Naga
.PY-XL-5 {
PADDING-TOP: 3REM !IMPORTANT;
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PT-XL-0 {
PADDING-TOP: 0 !IMPORTANT;
}

.PT-XL-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
}

.PT-XL-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
}

.PT-XL-3 {
PADDING-TOP: 1REM !IMPORTANT;
}

.PT-XL-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
}

.PT-XL-5 {
PADDING-TOP: 3REM !IMPORTANT;
}

.PE-XL-0 {
PADDING-RIGHT: 0 !IMPORTANT;
}

.PE-XL-1 {
PADDING-RIGHT: 0.25REM !IMPORTANT;
}

.PE-XL-2 {
PADDING-RIGHT: 0.5REM !IMPORTANT;
}

.PE-XL-3 {
PADDING-RIGHT: 1REM !IMPORTANT;
}

382
STI College Naga
.PE-XL-4 {
PADDING-RIGHT: 1.5REM !IMPORTANT;
}

.PE-XL-5 {
PADDING-RIGHT: 3REM !IMPORTANT;
}

.PB-XL-0 {
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PB-XL-1 {
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PB-XL-2 {
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PB-XL-3 {
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PB-XL-4 {
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PB-XL-5 {
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PS-XL-0 {
PADDING-LEFT: 0 !IMPORTANT;
}

.PS-XL-1 {
PADDING-LEFT: 0.25REM !IMPORTANT;
}

.PS-XL-2 {
PADDING-LEFT: 0.5REM !IMPORTANT;
}

.PS-XL-3 {
PADDING-LEFT: 1REM !IMPORTANT;

383
STI College Naga
}

.PS-XL-4 {
PADDING-LEFT: 1.5REM !IMPORTANT;
}

.PS-XL-5 {
PADDING-LEFT: 3REM !IMPORTANT;
}
}
@MEDIA (MIN-WIDTH: 1400PX) {
.D-XXL-INLINE {
DISPLAY: INLINE !IMPORTANT;
}

.D-XXL-INLINE-BLOCK {
DISPLAY: INLINE-BLOCK !IMPORTANT;
}

.D-XXL-BLOCK {
DISPLAY: BLOCK !IMPORTANT;
}

.D-XXL-GRID {
DISPLAY: GRID !IMPORTANT;
}

.D-XXL-TABLE {
DISPLAY: TABLE !IMPORTANT;
}

.D-XXL-TABLE-ROW {
DISPLAY: TABLE-ROW !IMPORTANT;
}

.D-XXL-TABLE-CELL {
DISPLAY: TABLE-CELL !IMPORTANT;
}

.D-XXL-FLEX {
DISPLAY: FLEX !IMPORTANT;
}

.D-XXL-INLINE-FLEX {
DISPLAY: INLINE-FLEX !IMPORTANT;
}

384
STI College Naga
.D-XXL-NONE {
DISPLAY: NONE !IMPORTANT;
}

.FLEX-XXL-FILL {
FLEX: 1 1 AUTO !IMPORTANT;
}

.FLEX-XXL-ROW {
FLEX-DIRECTION: ROW !IMPORTANT;
}

.FLEX-XXL-COLUMN {
FLEX-DIRECTION: COLUMN !IMPORTANT;
}

.FLEX-XXL-ROW-REVERSE {
FLEX-DIRECTION: ROW-REVERSE !IMPORTANT;
}

.FLEX-XXL-COLUMN-REVERSE {
FLEX-DIRECTION: COLUMN-REVERSE !IMPORTANT;
}

.FLEX-XXL-GROW-0 {
FLEX-GROW: 0 !IMPORTANT;
}

.FLEX-XXL-GROW-1 {
FLEX-GROW: 1 !IMPORTANT;
}

.FLEX-XXL-SHRINK-0 {
FLEX-SHRINK: 0 !IMPORTANT;
}

.FLEX-XXL-SHRINK-1 {
FLEX-SHRINK: 1 !IMPORTANT;
}

.FLEX-XXL-WRAP {
FLEX-WRAP: WRAP !IMPORTANT;
}

.FLEX-XXL-NOWRAP {

385
STI College Naga
FLEX-WRAP: NOWRAP !IMPORTANT;
}

.FLEX-XXL-WRAP-REVERSE {
FLEX-WRAP: WRAP-REVERSE !IMPORTANT;
}

.JUSTIFY-CONTENT-XXL-START {
JUSTIFY-CONTENT: FLEX-START !IMPORTANT;
}

.JUSTIFY-CONTENT-XXL-END {
JUSTIFY-CONTENT: FLEX-END !IMPORTANT;
}

.JUSTIFY-CONTENT-XXL-CENTER {
JUSTIFY-CONTENT: CENTER !IMPORTANT;
}

.JUSTIFY-CONTENT-XXL-BETWEEN {
JUSTIFY-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.JUSTIFY-CONTENT-XXL-AROUND {
JUSTIFY-CONTENT: SPACE-AROUND !IMPORTANT;
}

.JUSTIFY-CONTENT-XXL-EVENLY {
JUSTIFY-CONTENT: SPACE-EVENLY !IMPORTANT;
}

.ALIGN-ITEMS-XXL-START {
ALIGN-ITEMS: FLEX-START !IMPORTANT;
}

.ALIGN-ITEMS-XXL-END {
ALIGN-ITEMS: FLEX-END !IMPORTANT;
}

.ALIGN-ITEMS-XXL-CENTER {
ALIGN-ITEMS: CENTER !IMPORTANT;
}

.ALIGN-ITEMS-XXL-BASELINE {
ALIGN-ITEMS: BASELINE !IMPORTANT;
}

386
STI College Naga
.ALIGN-ITEMS-XXL-STRETCH {
ALIGN-ITEMS: STRETCH !IMPORTANT;
}

.ALIGN-CONTENT-XXL-START {
ALIGN-CONTENT: FLEX-START !IMPORTANT;
}

.ALIGN-CONTENT-XXL-END {
ALIGN-CONTENT: FLEX-END !IMPORTANT;
}

.ALIGN-CONTENT-XXL-CENTER {
ALIGN-CONTENT: CENTER !IMPORTANT;
}

.ALIGN-CONTENT-XXL-BETWEEN {
ALIGN-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.ALIGN-CONTENT-XXL-AROUND {
ALIGN-CONTENT: SPACE-AROUND !IMPORTANT;
}

.ALIGN-CONTENT-XXL-STRETCH {
ALIGN-CONTENT: STRETCH !IMPORTANT;
}

.ALIGN-SELF-XXL-AUTO {
ALIGN-SELF: AUTO !IMPORTANT;
}

.ALIGN-SELF-XXL-START {
ALIGN-SELF: FLEX-START !IMPORTANT;
}

.ALIGN-SELF-XXL-END {
ALIGN-SELF: FLEX-END !IMPORTANT;
}

.ALIGN-SELF-XXL-CENTER {
ALIGN-SELF: CENTER !IMPORTANT;
}

.ALIGN-SELF-XXL-BASELINE {

387
STI College Naga
ALIGN-SELF: BASELINE !IMPORTANT;
}

.ALIGN-SELF-XXL-STRETCH {
ALIGN-SELF: STRETCH !IMPORTANT;
}

.ORDER-XXL-FIRST {
ORDER: -1 !IMPORTANT;
}

.ORDER-XXL-0 {
ORDER: 0 !IMPORTANT;
}

.ORDER-XXL-1 {
ORDER: 1 !IMPORTANT;
}

.ORDER-XXL-2 {
ORDER: 2 !IMPORTANT;
}

.ORDER-XXL-3 {
ORDER: 3 !IMPORTANT;
}

.ORDER-XXL-4 {
ORDER: 4 !IMPORTANT;
}

.ORDER-XXL-5 {
ORDER: 5 !IMPORTANT;
}

.ORDER-XXL-LAST {
ORDER: 6 !IMPORTANT;
}

.M-XXL-0 {
MARGIN: 0 !IMPORTANT;
}

.M-XXL-1 {
MARGIN: 0.25REM !IMPORTANT;
}

388
STI College Naga
.M-XXL-2 {
MARGIN: 0.5REM !IMPORTANT;
}

.M-XXL-3 {
MARGIN: 1REM !IMPORTANT;
}

.M-XXL-4 {
MARGIN: 1.5REM !IMPORTANT;
}

.M-XXL-5 {
MARGIN: 3REM !IMPORTANT;
}

.M-XXL-AUTO {
MARGIN: AUTO !IMPORTANT;
}

.MX-XXL-0 {
MARGIN-RIGHT: 0 !IMPORTANT;
MARGIN-LEFT: 0 !IMPORTANT;
}

.MX-XXL-1 {
MARGIN-RIGHT: 0.25REM !IMPORTANT;
MARGIN-LEFT: 0.25REM !IMPORTANT;
}

.MX-XXL-2 {
MARGIN-RIGHT: 0.5REM !IMPORTANT;
MARGIN-LEFT: 0.5REM !IMPORTANT;
}

.MX-XXL-3 {
MARGIN-RIGHT: 1REM !IMPORTANT;
MARGIN-LEFT: 1REM !IMPORTANT;
}

.MX-XXL-4 {
MARGIN-RIGHT: 1.5REM !IMPORTANT;
MARGIN-LEFT: 1.5REM !IMPORTANT;
}

389
STI College Naga
.MX-XXL-5 {
MARGIN-RIGHT: 3REM !IMPORTANT;
MARGIN-LEFT: 3REM !IMPORTANT;
}

.MX-XXL-AUTO {
MARGIN-RIGHT: AUTO !IMPORTANT;
MARGIN-LEFT: AUTO !IMPORTANT;
}

.MY-XXL-0 {
MARGIN-TOP: 0 !IMPORTANT;
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MY-XXL-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MY-XXL-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MY-XXL-3 {
MARGIN-TOP: 1REM !IMPORTANT;
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MY-XXL-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MY-XXL-5 {
MARGIN-TOP: 3REM !IMPORTANT;
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MY-XXL-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MT-XXL-0 {

390
STI College Naga
MARGIN-TOP: 0 !IMPORTANT;
}

.MT-XXL-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
}

.MT-XXL-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
}

.MT-XXL-3 {
MARGIN-TOP: 1REM !IMPORTANT;
}

.MT-XXL-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
}

.MT-XXL-5 {
MARGIN-TOP: 3REM !IMPORTANT;
}

.MT-XXL-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
}

.ME-XXL-0 {
MARGIN-RIGHT: 0 !IMPORTANT;
}

.ME-XXL-1 {
MARGIN-RIGHT: 0.25REM !IMPORTANT;
}

.ME-XXL-2 {
MARGIN-RIGHT: 0.5REM !IMPORTANT;
}

.ME-XXL-3 {
MARGIN-RIGHT: 1REM !IMPORTANT;
}

.ME-XXL-4 {
MARGIN-RIGHT: 1.5REM !IMPORTANT;
}

391
STI College Naga
.ME-XXL-5 {
MARGIN-RIGHT: 3REM !IMPORTANT;
}

.ME-XXL-AUTO {
MARGIN-RIGHT: AUTO !IMPORTANT;
}

.MB-XXL-0 {
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MB-XXL-1 {
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MB-XXL-2 {
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MB-XXL-3 {
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MB-XXL-4 {
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MB-XXL-5 {
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MB-XXL-AUTO {
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MS-XXL-0 {
MARGIN-LEFT: 0 !IMPORTANT;
}

.MS-XXL-1 {
MARGIN-LEFT: 0.25REM !IMPORTANT;
}

.MS-XXL-2 {

392
STI College Naga
MARGIN-LEFT: 0.5REM !IMPORTANT;
}

.MS-XXL-3 {
MARGIN-LEFT: 1REM !IMPORTANT;
}

.MS-XXL-4 {
MARGIN-LEFT: 1.5REM !IMPORTANT;
}

.MS-XXL-5 {
MARGIN-LEFT: 3REM !IMPORTANT;
}

.MS-XXL-AUTO {
MARGIN-LEFT: AUTO !IMPORTANT;
}

.P-XXL-0 {
PADDING: 0 !IMPORTANT;
}

.P-XXL-1 {
PADDING: 0.25REM !IMPORTANT;
}

.P-XXL-2 {
PADDING: 0.5REM !IMPORTANT;
}

.P-XXL-3 {
PADDING: 1REM !IMPORTANT;
}

.P-XXL-4 {
PADDING: 1.5REM !IMPORTANT;
}

.P-XXL-5 {
PADDING: 3REM !IMPORTANT;
}

.PX-XXL-0 {
PADDING-RIGHT: 0 !IMPORTANT;
PADDING-LEFT: 0 !IMPORTANT;

393
STI College Naga
}

.PX-XXL-1 {
PADDING-RIGHT: 0.25REM !IMPORTANT;
PADDING-LEFT: 0.25REM !IMPORTANT;
}

.PX-XXL-2 {
PADDING-RIGHT: 0.5REM !IMPORTANT;
PADDING-LEFT: 0.5REM !IMPORTANT;
}

.PX-XXL-3 {
PADDING-RIGHT: 1REM !IMPORTANT;
PADDING-LEFT: 1REM !IMPORTANT;
}

.PX-XXL-4 {
PADDING-RIGHT: 1.5REM !IMPORTANT;
PADDING-LEFT: 1.5REM !IMPORTANT;
}

.PX-XXL-5 {
PADDING-RIGHT: 3REM !IMPORTANT;
PADDING-LEFT: 3REM !IMPORTANT;
}

.PY-XXL-0 {
PADDING-TOP: 0 !IMPORTANT;
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PY-XXL-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PY-XXL-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PY-XXL-3 {
PADDING-TOP: 1REM !IMPORTANT;
PADDING-BOTTOM: 1REM !IMPORTANT;
}

394
STI College Naga
.PY-XXL-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PY-XXL-5 {
PADDING-TOP: 3REM !IMPORTANT;
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PT-XXL-0 {
PADDING-TOP: 0 !IMPORTANT;
}

.PT-XXL-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
}

.PT-XXL-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
}

.PT-XXL-3 {
PADDING-TOP: 1REM !IMPORTANT;
}

.PT-XXL-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
}

.PT-XXL-5 {
PADDING-TOP: 3REM !IMPORTANT;
}

.PE-XXL-0 {
PADDING-RIGHT: 0 !IMPORTANT;
}

.PE-XXL-1 {
PADDING-RIGHT: 0.25REM !IMPORTANT;
}

.PE-XXL-2 {
PADDING-RIGHT: 0.5REM !IMPORTANT;
}

395
STI College Naga
.PE-XXL-3 {
PADDING-RIGHT: 1REM !IMPORTANT;
}

.PE-XXL-4 {
PADDING-RIGHT: 1.5REM !IMPORTANT;
}

.PE-XXL-5 {
PADDING-RIGHT: 3REM !IMPORTANT;
}

.PB-XXL-0 {
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PB-XXL-1 {
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PB-XXL-2 {
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PB-XXL-3 {
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PB-XXL-4 {
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PB-XXL-5 {
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PS-XXL-0 {
PADDING-LEFT: 0 !IMPORTANT;
}

.PS-XXL-1 {
PADDING-LEFT: 0.25REM !IMPORTANT;
}

.PS-XXL-2 {

396
STI College Naga
PADDING-LEFT: 0.5REM !IMPORTANT;
}

.PS-XXL-3 {
PADDING-LEFT: 1REM !IMPORTANT;
}

.PS-XXL-4 {
PADDING-LEFT: 1.5REM !IMPORTANT;
}

.PS-XXL-5 {
PADDING-LEFT: 3REM !IMPORTANT;
}
}
@MEDIA PRINT {
.D-PRINT-INLINE {
DISPLAY: INLINE !IMPORTANT;
}

.D-PRINT-INLINE-BLOCK {
DISPLAY: INLINE-BLOCK !IMPORTANT;
}

.D-PRINT-BLOCK {
DISPLAY: BLOCK !IMPORTANT;
}

.D-PRINT-GRID {
DISPLAY: GRID !IMPORTANT;
}

.D-PRINT-TABLE {
DISPLAY: TABLE !IMPORTANT;
}

.D-PRINT-TABLE-ROW {
DISPLAY: TABLE-ROW !IMPORTANT;
}

.D-PRINT-TABLE-CELL {
DISPLAY: TABLE-CELL !IMPORTANT;
}

.D-PRINT-FLEX {
DISPLAY: FLEX !IMPORTANT;

397
STI College Naga
}

.D-PRINT-INLINE-FLEX {
DISPLAY: INLINE-FLEX !IMPORTANT;
}

.D-PRINT-NONE {
DISPLAY: NONE !IMPORTANT;
}
}

/*# SOURCEMAPPINGURL=BOOTSTRAP-GRID.CSS.MAP */

PARTIALS

FOOTER

FUNCTION SWITCHTOTAB(TABID) {
IF (EVENT) {
EVENT.PREVENTDEFAULT();
}

VAR TAB = NEW BOOTSTRAP.TAB(DOCUMENT.GETELEMENTBYID(TABID));

TAB.SHOW();

398
STI College Naga
FUNCTION ISTABAVAILABLE(TABID) {
RETURN DOCUMENT.GETELEMENTBYID(TABID) !== NULL;
}

DOCUMENT.ADDEVENTLISTENER('DOMCONTENTLOADED', FUNCTION () {
VAR HASH = WINDOW.LOCATION.HASH;
IF (HASH) {
VAR TABID = HASH.SUBSTRING(1);
IF (ISTABAVAILABLE(TABID)) {
SWITCHTOTAB(TABID);
} ELSE {
WINDOW.LOCATION.HREF = WINDOW.LOCATION.HREF.SPLIT('#')[0];
}
}
});

</SCRIPT>

</BODY>

</HTML>

HEADER

<?PHP INCLUDE("../ASSETS/NOSESSIONREDIRECT.PHP"); ?>

<?PHP INCLUDE("./VERIFYROLEREDIRECT.PHP"); ?>

<!DOCTYPE HTML>
<HTML LANG="EN">

<TITLE>SCHOOL MANAGEMENT</TITLE>
<LINK REL="ICON" TYPE="IMAGE/X-ICON" HREF="../IMAGES/1.PNG">

<LINK REL="STYLESHEET" HREF="CSS/BOOTSTRAP.CSS">

399
STI College Naga
<LINK HREF="HTTPS://UNPKG.COM/[email protected]/CSS/GIJGO.MIN.CSS"
REL="STYLESHEET" TYPE="TEXT/CSS" />
<LINK REL="STYLESHEET" HREF="HTTPS://CDNJS.CLOUDFLARE.COM/AJAX/LIBS/FONT-
AWESOME/4.7.0/CSS/FONT-AWESOME.MIN.CSS" />
<LINK REL="STYLESHEET" HREF="HTTPS://CDN.JSDELIVR.NET/NPM/BOOTSTRAP-
[email protected]/FONT/BOOTSTRAP-ICONS.CSS" />
<LINK HREF="HTTPS://MAXCDN.BOOTSTRAPCDN.COM/FONT-AWESOME/4.7.0/CSS/FONT-
AWESOME.MIN.CSS" REL="STYLESHEET" />
<LINK REL="STYLESHEET" HREF="HTTPS://CDNJS.CLOUDFLARE.COM/AJAX/LIBS/FONT-
AWESOME/6.5.1/CSS/ALL.MIN.CSS">

</HEAD>
<?PHP

$THEME = "LIGHT";

$UID = $_SESSION['UID'];
$QUERY = "SELECT THEME FROM USERS WHERE ID='$UID'";
$RESULT = MYSQLI_QUERY($CONN, $QUERY);
IF(MYSQLI_NUM_ROWS($RESULT) > 0){
$ROW = MYSQLI_FETCH_ARRAY($RESULT);

$THEME = $ROW['THEME'];
}
?>
<BODY CLASS='<?PHP ECHO $THEME; ?>'>

400
STI College Naga
<DIV CLASS='TOAST-CONTAINER POSITION-FIXED TEXT-SUCCESS BOTTOM-0 END-0 P-3'
STYLE="Z-INDEX: 9000;">
<DIV ID='LIVETOAST' CLASS='TOAST' ROLE='ALERT' ARIA-LIVE='ASSERTIVE' ARIA-
ATOMIC='TRUE' STYLE="COLOR:BLACK;">
<DIV CLASS='D-FLEX'>
<DIV CLASS='TOAST-BODY' ID="TOAST-ALERT-MESSAGE">

</DIV>
<BUTTON TYPE='BUTTON' CLASS='BTN-CLOSE ME-2 M-AUTO TEXT-DANGER' DATA-BS-
DISMISS='TOAST' ARIA-LABEL='CLOSE'></BUTTON>
</DIV>
</DIV>
</DIV>

NAVBAR

<INPUT TYPE="CHECKBOX" ID="THEME-TOGGLE" HIDDEN>

<!-- <DIV CLASS="DROPDOWN DROPDOWN-CENTER">

401
STI College Naga
<UL CLASS="DROPDOWN-MENU">
<LI><A CLASS="DROPDOWN-ITEM">EXAMPLE MESSAGE</A></LI>
<LI><A CLASS="DROPDOWN-ITEM">EXAMPLE MESSAGE</A></LI>
<LI><A CLASS="DROPDOWN-ITEM">EXAMPLE MESSAGE</A></LI>
</UL>
</DIV> -->

<A HREF="SETTINGS.PHP" CLASS="PROFILE" ID="NAVBAR_PROFILE_PIC">

<IMG SRC="../IMAGES/USER.PNG" >

</A>

<DIV CLASS="DROPDOWN DROPDOWN-CENTER">

<UL CLASS="DROPDOWN-MENU">
<LI><A CLASS="DROPDOWN-ITEM"
HREF="SETTINGS.PHP">SETTINGS</A></LI>

<LI><A CLASS="DROPDOWN-ITEM" DATA-BS-TOGGLE="MODAL" DATA-BS-
TARGET="#LOGOUT-MODAL">LOGOUT</A></LI>
</UL>
</DIV>
</NAV>

<?PHP
// SESSION_START();
$THEME = "";

IF(ISSET($_SESSION['THEME'])){
$THEME = $_SESSION['THEME'];
}ELSE{
$THEME = 'LIGHT';
}

SIDEBAR

402
STI College Naga
<A HREF="DASHBOARD.PHP" CLASS="LOGO">

<IMG SRC="../IMAGES/1.PNG">
<DIV CLASS="LOGO-NAME"><SPAN CLASS="TEXT-WARNING">E</SPAN><SPAN
CLASS="DARKTEXTCOLOR">R</SPAN><SPAN
CLASS="TEXT-WARNING">P</SPAN></DIV>
</A>

<UL CLASS="SIDE-MENU MAIN-SIDE-BOARD">

<LI><A HREF="DASHBOARD.PHP"><I CLASS='BX
BXS-DASHBOARD'></I>DASHBOARD</A></LI>
<LI><A HREF="TEACHER.PHP"><I CLASS='BX
BXS-USER-RECTANGLE'></I>TEACHER</A></LI>
<LI><A HREF="STUDENT.PHP"><I CLASS='BX
BXS-USER-DETAIL'></I>STUDENT</A></LI>
<LI><A HREF="SUBJECTS.PHP"><I CLASS='BX
BX-BOOK-BOOKMARK'></I>SUBJECTS</A></LI>
<LI><A HREF="ATTENDENCE.PHP"><I CLASS='BX
BX-LIST-CHECK'></I>ATTENDENCE</A></LI>
<LI><A HREF="NOTICEBOARD.PHP"><I CLASS='BX BX-BOOKMARK'></I>NOTICE
BOARD</A></LI>
<LI><A HREF="TIMETABLE.PHP"><I CLASS='BX BX-TABLE'></I>TIME
TABLE</A></LI>
<LI><A HREF="SYLLABUS.PHP"><I CLASS='BX
BX-FILE-BLANK'></I>SYLLABUS</A></LI>
<LI><A HREF="NOTES.PHP"><I CLASS='BX BX-NOTE'></I>NOTES</A></LI>
<LI><A HREF="MARKS.PHP"><I CLASS='BX BX-PASTE'></I>MARKS</A></LI>
<LI><A HREF="BUSES.PHP"><I CLASS='BX BXS-BUS'></I>BUS SERVICE</A></LI>
<LI><A HREF="SETTINGS.PHP"><I CLASS='BX BX-COG'></I>SETTINGS</A></LI>
</UL>
<UL CLASS="SIDE-MENU">
<LI>
<A CLASS="LOGOUT" DATA-BS-TOGGLE="MODAL" DATA-BS-TARGET="#LOGOUT-
MODAL">
<I CLASS='BX BX-LOG-OUT-CIRCLE'></I>
LOGOUT
</A>
</LI>
</UL>

403
STI College Naga
</DIV>

<DIV CLASS="MODAL FADE" ID="LOGOUT-MODAL" TABINDEX="-1" ARIA-

LABELLEDBY="EXAMPLEMODALLABEL" ARIA-HIDDEN="TRUE">
<DIV CLASS="MODAL-DIALOG MODAL-DIALOG-CENTERED">
<DIV CLASS="MODAL-CONTENT">
<DIV CLASS="MODAL-HEADER">
</DIV>
<DIV CLASS="MODAL-BODY">
<STRONG>DO YOU REALLY WANT TO LOGOUT?</STRONG>
</DIV>
<DIV CLASS="MODAL-FOOTER">
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-SECONDARY" DATA-BS-
DISMISS="MODAL">CLOSE</BUTTON>
<BUTTON TYPE="BUTTON" CLASS="BTN BTN-DANGER"
ONCLICK="LOGOUT()">LOGOUT</BUTTON>
</DIV>
</DIV>
</DIV>
</DIV>

DASHBOARD

<?PHP INCLUDE('PARTIALS/_HEADER.PHP') ?>

<?PHP INCLUDE('PARTIALS/_SIDEBAR.PHP') ?>
<INPUT TYPE="HIDDEN" VALUE="1" ID="CHECKFILENAME">

<DIV CLASS="MODAL FADE" ID="REMINDER-MODAL" TABINDEX="-1" ARIA-

<DIV CLASS="CONTAINER MR-3 ML-3">

<DIV CLASS="ALERT ALERT-WARNING REMINDER-ERROR" ROLE="ALERT"

404
STI College Naga
STYLE="MIN-HEIGHT: 50PX;DISPLAY: NONE;">
MESSAGE CAN'T BE EMPTY!
</DIV>
<DIV CLASS="MB-3">

<TEXTAREA CLASS="FORM-CONTROL" ID="REMINDER-MSG"
ROWS="3"></TEXTAREA>
</DIV>
</DIV>

<MAIN>
<DIV CLASS="HEADER">
<DIV CLASS="LEFT">
<H1>DASHBOARD</H1>
<UL CLASS="BREADCRUMB">
<LI><A>
ANALYTICS
</A></LI>

</UL>
</DIV>

</DIV>

405
STI College Naga
<LI ONCLICK="SHOWTEACHERLIST()">

<I CLASS='BX BXS-USER'></I>
<SPAN CLASS="INFO">
<H3 CLASS="TEXT-CENTER" ID="TEACHERCOUNT">_ _ _</H3>
<P>TEACHERS</P>
</SPAN>
</LI>
<LI ONCLICK="SHOWSTUDENTLIST()">
<I CLASS='BX BXS-GROUP'></I>
<SPAN CLASS="INFO">
<H3 CLASS="TEXT-CENTER" ID="STUDENTCOUNT">_ _ _</H3>
<P>STUDENTS</P>
</SPAN>
</LI>
<LI ONCLICK="SHOWNOTESLIST()">
<I CLASS='BX BX-BOOK'></I>
<SPAN CLASS="INFO">
<H3 CLASS="TEXT-CENTER" ID="CLASSCOUNT">_ _ _</H3>
<P>HOME WORK AND NOTES</P>
</SPAN>
</LI>
<LI ONCLICK="SHOWNOTICELIST()">
<I CLASS='BX BXS-BOOKMARK'></I>
<SPAN CLASS="INFO">
<H3 CLASS="TEXT-CENTER" ID="NOTICECOUNT">_ _ _</H3>
<P>NOTICES</P>
</SPAN>
</LI>
</UL>

406
STI College Naga
<TH>TITLE</TH>
<TH>DATE</TH>
<TH>SENDER</TH>
</TR>
</THEAD>
<TBODY ID="NOTICETABLEBODY">

</TBODY>
</TABLE>
</DIV>

</UL>
</DIV>

</DIV>
<BR>
</MAIN>
</DIV>

<SCRIPT SRC="../ASSETS/JS/DASHBOARD.JS"></SCRIPT>
<?PHP INCLUDE("PARTIALS/_FOOTER.PHP");

407
STI College Naga
.CONTAINER,
.CONTAINER-FLUID,
.CONTAINER-XXL,
.CONTAINER-XL,
.CONTAINER-LG,
.CONTAINER-MD,
.CONTAINER-SM {
WIDTH: 100%;
PADDING-LEFT: VAR(--BS-GUTTER-X, 0.75REM);
PADDING-RIGHT: VAR(--BS-GUTTER-X, 0.75REM);
MARGIN-LEFT: AUTO;
MARGIN-RIGHT: AUTO;
}

@MEDIA (MIN-WIDTH: 576PX) {

.CONTAINER-SM, .CONTAINER {
MAX-WIDTH: 540PX;
}
}
@MEDIA (MIN-WIDTH: 768PX) {
.CONTAINER-MD, .CONTAINER-SM, .CONTAINER {
MAX-WIDTH: 720PX;
}
}
@MEDIA (MIN-WIDTH: 992PX) {
.CONTAINER-LG, .CONTAINER-MD, .CONTAINER-SM, .CONTAINER {
MAX-WIDTH: 960PX;
}
}
@MEDIA (MIN-WIDTH: 1200PX) {
.CONTAINER-XL, .CONTAINER-LG, .CONTAINER-MD, .CONTAINER-SM, .CONTAINER {
MAX-WIDTH: 1140PX;
}
}
@MEDIA (MIN-WIDTH: 1400PX) {
.CONTAINER-XXL, .CONTAINER-XL, .CONTAINER-LG, .CONTAINER-MD, .CONTAINER-
SM, .CONTAINER {
MAX-WIDTH: 1320PX;
}
}
.ROW {
--BS-GUTTER-X: 1.5REM;
--BS-GUTTER-Y: 0;
DISPLAY: FLEX;
FLEX-WRAP: WRAP;
MARGIN-TOP: CALC(VAR(--BS-GUTTER-Y) * -1);

408
STI College Naga
MARGIN-LEFT: CALC(VAR(--BS-GUTTER-X) * -.5);
MARGIN-RIGHT: CALC(VAR(--BS-GUTTER-X) * -.5);
}
.ROW > * {
BOX-SIZING: BORDER-BOX;
FLEX-SHRINK: 0;
WIDTH: 100%;
MAX-WIDTH: 100%;
PADDING-LEFT: CALC(VAR(--BS-GUTTER-X) * .5);
PADDING-RIGHT: CALC(VAR(--BS-GUTTER-X) * .5);
MARGIN-TOP: VAR(--BS-GUTTER-Y);
}

.COL {
FLEX: 1 0 0%;
}

.ROW-COLS-AUTO > * {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.ROW-COLS-1 > * {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.ROW-COLS-2 > * {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.ROW-COLS-3 > * {
FLEX: 0 0 AUTO;
WIDTH: 33.3333333333%;
}

.ROW-COLS-4 > * {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.ROW-COLS-5 > * {
FLEX: 0 0 AUTO;
WIDTH: 20%;
}

409
STI College Naga
.ROW-COLS-6 > * {
FLEX: 0 0 AUTO;
WIDTH: 16.6666666667%;
}

@MEDIA (MIN-WIDTH: 576PX) {

.COL-SM {
FLEX: 1 0 0%;
}

.ROW-COLS-SM-AUTO > * {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.ROW-COLS-SM-1 > * {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.ROW-COLS-SM-2 > * {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.ROW-COLS-SM-3 > * {
FLEX: 0 0 AUTO;
WIDTH: 33.3333333333%;
}

.ROW-COLS-SM-4 > * {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.ROW-COLS-SM-5 > * {
FLEX: 0 0 AUTO;
WIDTH: 20%;
}

.ROW-COLS-SM-6 > * {
FLEX: 0 0 AUTO;
WIDTH: 16.6666666667%;
}
}

410
STI College Naga
@MEDIA (MIN-WIDTH: 768PX) {
.COL-MD {
FLEX: 1 0 0%;
}

.ROW-COLS-MD-AUTO > * {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.ROW-COLS-MD-1 > * {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.ROW-COLS-MD-2 > * {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.ROW-COLS-MD-3 > * {
FLEX: 0 0 AUTO;
WIDTH: 33.3333333333%;
}

.ROW-COLS-MD-4 > * {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.ROW-COLS-MD-5 > * {
FLEX: 0 0 AUTO;
WIDTH: 20%;
}

.ROW-COLS-MD-6 > * {
FLEX: 0 0 AUTO;
WIDTH: 16.6666666667%;
}
}
@MEDIA (MIN-WIDTH: 992PX) {
.COL-LG {
FLEX: 1 0 0%;
}

.ROW-COLS-LG-AUTO > * {

411
STI College Naga
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.ROW-COLS-LG-1 > * {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.ROW-COLS-LG-2 > * {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.ROW-COLS-LG-3 > * {
FLEX: 0 0 AUTO;
WIDTH: 33.3333333333%;
}

.ROW-COLS-LG-4 > * {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.ROW-COLS-LG-5 > * {
FLEX: 0 0 AUTO;
WIDTH: 20%;
}

.ROW-COLS-LG-6 > * {
FLEX: 0 0 AUTO;
WIDTH: 16.6666666667%;
}
}
@MEDIA (MIN-WIDTH: 1200PX) {
.COL-XL {
FLEX: 1 0 0%;
}

.ROW-COLS-XL-AUTO > * {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.ROW-COLS-XL-1 > * {
FLEX: 0 0 AUTO;

412
STI College Naga
WIDTH: 100%;
}

.ROW-COLS-XL-2 > * {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.ROW-COLS-XL-3 > * {
FLEX: 0 0 AUTO;
WIDTH: 33.3333333333%;
}

.ROW-COLS-XL-4 > * {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.ROW-COLS-XL-5 > * {
FLEX: 0 0 AUTO;
WIDTH: 20%;
}

.ROW-COLS-XL-6 > * {
FLEX: 0 0 AUTO;
WIDTH: 16.6666666667%;
}
}
@MEDIA (MIN-WIDTH: 1400PX) {
.COL-XXL {
FLEX: 1 0 0%;
}

.ROW-COLS-XXL-AUTO > * {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.ROW-COLS-XXL-1 > * {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.ROW-COLS-XXL-2 > * {
FLEX: 0 0 AUTO;
WIDTH: 50%;

413
STI College Naga
}

.ROW-COLS-XXL-3 > * {
FLEX: 0 0 AUTO;
WIDTH: 33.3333333333%;
}

.ROW-COLS-XXL-4 > * {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.ROW-COLS-XXL-5 > * {
FLEX: 0 0 AUTO;
WIDTH: 20%;
}

.ROW-COLS-XXL-6 > * {
FLEX: 0 0 AUTO;
WIDTH: 16.6666666667%;
}
}
.COL-AUTO {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.COL-1 {
FLEX: 0 0 AUTO;
WIDTH: 8.33333333%;
}

.COL-2 {
FLEX: 0 0 AUTO;
WIDTH: 16.66666667%;
}

.COL-3 {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.COL-4 {
FLEX: 0 0 AUTO;
WIDTH: 33.33333333%;
}

414
STI College Naga
.COL-5 {
FLEX: 0 0 AUTO;
WIDTH: 41.66666667%;
}

.COL-6 {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.COL-7 {
FLEX: 0 0 AUTO;
WIDTH: 58.33333333%;
}

.COL-8 {
FLEX: 0 0 AUTO;
WIDTH: 66.66666667%;
}

.COL-9 {
FLEX: 0 0 AUTO;
WIDTH: 75%;
}

.COL-10 {
FLEX: 0 0 AUTO;
WIDTH: 83.33333333%;
}

.COL-11 {
FLEX: 0 0 AUTO;
WIDTH: 91.66666667%;
}

.COL-12 {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.OFFSET-1 {
MARGIN-RIGHT: 8.33333333%;
}

.OFFSET-2 {

415
STI College Naga
MARGIN-RIGHT: 16.66666667%;
}

.OFFSET-3 {
MARGIN-RIGHT: 25%;
}

.OFFSET-4 {
MARGIN-RIGHT: 33.33333333%;
}

.OFFSET-5 {
MARGIN-RIGHT: 41.66666667%;
}

.OFFSET-6 {
MARGIN-RIGHT: 50%;
}

.OFFSET-7 {
MARGIN-RIGHT: 58.33333333%;
}

.OFFSET-8 {
MARGIN-RIGHT: 66.66666667%;
}

.OFFSET-9 {
MARGIN-RIGHT: 75%;
}

.OFFSET-10 {
MARGIN-RIGHT: 83.33333333%;
}

.OFFSET-11 {
MARGIN-RIGHT: 91.66666667%;
}

.G-0,
.GX-0 {
--BS-GUTTER-X: 0;
}

.G-0,
.GY-0 {

416
STI College Naga
--BS-GUTTER-Y: 0;
}

.G-1,
.GX-1 {
--BS-GUTTER-X: 0.25REM;
}

.G-1,
.GY-1 {
--BS-GUTTER-Y: 0.25REM;
}

.G-2,
.GX-2 {
--BS-GUTTER-X: 0.5REM;
}

.G-2,
.GY-2 {
--BS-GUTTER-Y: 0.5REM;
}

.G-3,
.GX-3 {
--BS-GUTTER-X: 1REM;
}

.G-3,
.GY-3 {
--BS-GUTTER-Y: 1REM;
}

.G-4,
.GX-4 {
--BS-GUTTER-X: 1.5REM;
}

.G-4,
.GY-4 {
--BS-GUTTER-Y: 1.5REM;
}

.G-5,
.GX-5 {
--BS-GUTTER-X: 3REM;

417
STI College Naga
}

.G-5,
.GY-5 {
--BS-GUTTER-Y: 3REM;
}

@MEDIA (MIN-WIDTH: 576PX) {

.COL-SM-AUTO {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.COL-SM-1 {
FLEX: 0 0 AUTO;
WIDTH: 8.33333333%;
}

.COL-SM-2 {
FLEX: 0 0 AUTO;
WIDTH: 16.66666667%;
}

.COL-SM-3 {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.COL-SM-4 {
FLEX: 0 0 AUTO;
WIDTH: 33.33333333%;
}

.COL-SM-5 {
FLEX: 0 0 AUTO;
WIDTH: 41.66666667%;
}

.COL-SM-6 {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.COL-SM-7 {
FLEX: 0 0 AUTO;
WIDTH: 58.33333333%;

418
STI College Naga
}

.COL-SM-8 {
FLEX: 0 0 AUTO;
WIDTH: 66.66666667%;
}

.COL-SM-9 {
FLEX: 0 0 AUTO;
WIDTH: 75%;
}

.COL-SM-10 {
FLEX: 0 0 AUTO;
WIDTH: 83.33333333%;
}

.COL-SM-11 {
FLEX: 0 0 AUTO;
WIDTH: 91.66666667%;
}

.COL-SM-12 {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.OFFSET-SM-0 {
MARGIN-RIGHT: 0;
}

.OFFSET-SM-1 {
MARGIN-RIGHT: 8.33333333%;
}

.OFFSET-SM-2 {
MARGIN-RIGHT: 16.66666667%;
}

.OFFSET-SM-3 {
MARGIN-RIGHT: 25%;
}

.OFFSET-SM-4 {
MARGIN-RIGHT: 33.33333333%;
}

419
STI College Naga
.OFFSET-SM-5 {
MARGIN-RIGHT: 41.66666667%;
}

.OFFSET-SM-6 {
MARGIN-RIGHT: 50%;
}

.OFFSET-SM-7 {
MARGIN-RIGHT: 58.33333333%;
}

.OFFSET-SM-8 {
MARGIN-RIGHT: 66.66666667%;
}

.OFFSET-SM-9 {
MARGIN-RIGHT: 75%;
}

.OFFSET-SM-10 {
MARGIN-RIGHT: 83.33333333%;
}

.OFFSET-SM-11 {
MARGIN-RIGHT: 91.66666667%;
}

.G-SM-0,
.GX-SM-0 {
--BS-GUTTER-X: 0;
}

.G-SM-0,
.GY-SM-0 {
--BS-GUTTER-Y: 0;
}

.G-SM-1,
.GX-SM-1 {
--BS-GUTTER-X: 0.25REM;
}

.G-SM-1,
.GY-SM-1 {

420
STI College Naga
--BS-GUTTER-Y: 0.25REM;
}

.G-SM-2,
.GX-SM-2 {
--BS-GUTTER-X: 0.5REM;
}

.G-SM-2,
.GY-SM-2 {
--BS-GUTTER-Y: 0.5REM;
}

.G-SM-3,
.GX-SM-3 {
--BS-GUTTER-X: 1REM;
}

.G-SM-3,
.GY-SM-3 {
--BS-GUTTER-Y: 1REM;
}

.G-SM-4,
.GX-SM-4 {
--BS-GUTTER-X: 1.5REM;
}

.G-SM-4,
.GY-SM-4 {
--BS-GUTTER-Y: 1.5REM;
}

.G-SM-5,
.GX-SM-5 {
--BS-GUTTER-X: 3REM;
}

.G-SM-5,
.GY-SM-5 {
--BS-GUTTER-Y: 3REM;
}
}
@MEDIA (MIN-WIDTH: 768PX) {
.COL-MD-AUTO {
FLEX: 0 0 AUTO;

421
STI College Naga
WIDTH: AUTO;
}

.COL-MD-1 {
FLEX: 0 0 AUTO;
WIDTH: 8.33333333%;
}

.COL-MD-2 {
FLEX: 0 0 AUTO;
WIDTH: 16.66666667%;
}

.COL-MD-3 {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.COL-MD-4 {
FLEX: 0 0 AUTO;
WIDTH: 33.33333333%;
}

.COL-MD-5 {
FLEX: 0 0 AUTO;
WIDTH: 41.66666667%;
}

.COL-MD-6 {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.COL-MD-7 {
FLEX: 0 0 AUTO;
WIDTH: 58.33333333%;
}

.COL-MD-8 {
FLEX: 0 0 AUTO;
WIDTH: 66.66666667%;
}

.COL-MD-9 {
FLEX: 0 0 AUTO;
WIDTH: 75%;

422
STI College Naga
}

.COL-MD-10 {
FLEX: 0 0 AUTO;
WIDTH: 83.33333333%;
}

.COL-MD-11 {
FLEX: 0 0 AUTO;
WIDTH: 91.66666667%;
}

.COL-MD-12 {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.OFFSET-MD-0 {
MARGIN-RIGHT: 0;
}

.OFFSET-MD-1 {
MARGIN-RIGHT: 8.33333333%;
}

.OFFSET-MD-2 {
MARGIN-RIGHT: 16.66666667%;
}

.OFFSET-MD-3 {
MARGIN-RIGHT: 25%;
}

.OFFSET-MD-4 {
MARGIN-RIGHT: 33.33333333%;
}

.OFFSET-MD-5 {
MARGIN-RIGHT: 41.66666667%;
}

.OFFSET-MD-6 {
MARGIN-RIGHT: 50%;
}

.OFFSET-MD-7 {

423
STI College Naga
MARGIN-RIGHT: 58.33333333%;
}

.OFFSET-MD-8 {
MARGIN-RIGHT: 66.66666667%;
}

.OFFSET-MD-9 {
MARGIN-RIGHT: 75%;
}

.OFFSET-MD-10 {
MARGIN-RIGHT: 83.33333333%;
}

.OFFSET-MD-11 {
MARGIN-RIGHT: 91.66666667%;
}

.G-MD-0,
.GX-MD-0 {
--BS-GUTTER-X: 0;
}

.G-MD-0,
.GY-MD-0 {
--BS-GUTTER-Y: 0;
}

.G-MD-1,
.GX-MD-1 {
--BS-GUTTER-X: 0.25REM;
}

.G-MD-1,
.GY-MD-1 {
--BS-GUTTER-Y: 0.25REM;
}

.G-MD-2,
.GX-MD-2 {
--BS-GUTTER-X: 0.5REM;
}

.G-MD-2,
.GY-MD-2 {

424
STI College Naga
--BS-GUTTER-Y: 0.5REM;
}

.G-MD-3,
.GX-MD-3 {
--BS-GUTTER-X: 1REM;
}

.G-MD-3,
.GY-MD-3 {
--BS-GUTTER-Y: 1REM;
}

.G-MD-4,
.GX-MD-4 {
--BS-GUTTER-X: 1.5REM;
}

.G-MD-4,
.GY-MD-4 {
--BS-GUTTER-Y: 1.5REM;
}

.G-MD-5,
.GX-MD-5 {
--BS-GUTTER-X: 3REM;
}

.G-MD-5,
.GY-MD-5 {
--BS-GUTTER-Y: 3REM;
}
}
@MEDIA (MIN-WIDTH: 992PX) {
.COL-LG-AUTO {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.COL-LG-1 {
FLEX: 0 0 AUTO;
WIDTH: 8.33333333%;
}

.COL-LG-2 {
FLEX: 0 0 AUTO;

425
STI College Naga
WIDTH: 16.66666667%;
}

.COL-LG-3 {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.COL-LG-4 {
FLEX: 0 0 AUTO;
WIDTH: 33.33333333%;
}

.COL-LG-5 {
FLEX: 0 0 AUTO;
WIDTH: 41.66666667%;
}

.COL-LG-6 {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.COL-LG-7 {
FLEX: 0 0 AUTO;
WIDTH: 58.33333333%;
}

.COL-LG-8 {
FLEX: 0 0 AUTO;
WIDTH: 66.66666667%;
}

.COL-LG-9 {
FLEX: 0 0 AUTO;
WIDTH: 75%;
}

.COL-LG-10 {
FLEX: 0 0 AUTO;
WIDTH: 83.33333333%;
}

.COL-LG-11 {
FLEX: 0 0 AUTO;
WIDTH: 91.66666667%;

426
STI College Naga
}

.COL-LG-12 {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.OFFSET-LG-0 {
MARGIN-RIGHT: 0;
}

.OFFSET-LG-1 {
MARGIN-RIGHT: 8.33333333%;
}

.OFFSET-LG-2 {
MARGIN-RIGHT: 16.66666667%;
}

.OFFSET-LG-3 {
MARGIN-RIGHT: 25%;
}

.OFFSET-LG-4 {
MARGIN-RIGHT: 33.33333333%;
}

.OFFSET-LG-5 {
MARGIN-RIGHT: 41.66666667%;
}

.OFFSET-LG-6 {
MARGIN-RIGHT: 50%;
}

.OFFSET-LG-7 {
MARGIN-RIGHT: 58.33333333%;
}

.OFFSET-LG-8 {
MARGIN-RIGHT: 66.66666667%;
}

.OFFSET-LG-9 {
MARGIN-RIGHT: 75%;
}

427
STI College Naga
.OFFSET-LG-10 {
MARGIN-RIGHT: 83.33333333%;
}

.OFFSET-LG-11 {
MARGIN-RIGHT: 91.66666667%;
}

.G-LG-0,
.GX-LG-0 {
--BS-GUTTER-X: 0;
}

.G-LG-0,
.GY-LG-0 {
--BS-GUTTER-Y: 0;
}

.G-LG-1,
.GX-LG-1 {
--BS-GUTTER-X: 0.25REM;
}

.G-LG-1,
.GY-LG-1 {
--BS-GUTTER-Y: 0.25REM;
}

.G-LG-2,
.GX-LG-2 {
--BS-GUTTER-X: 0.5REM;
}

.G-LG-2,
.GY-LG-2 {
--BS-GUTTER-Y: 0.5REM;
}

.G-LG-3,
.GX-LG-3 {
--BS-GUTTER-X: 1REM;
}

.G-LG-3,
.GY-LG-3 {

428
STI College Naga
--BS-GUTTER-Y: 1REM;
}

.G-LG-4,
.GX-LG-4 {
--BS-GUTTER-X: 1.5REM;
}

.G-LG-4,
.GY-LG-4 {
--BS-GUTTER-Y: 1.5REM;
}

.G-LG-5,
.GX-LG-5 {
--BS-GUTTER-X: 3REM;
}

.G-LG-5,
.GY-LG-5 {
--BS-GUTTER-Y: 3REM;
}
}
@MEDIA (MIN-WIDTH: 1200PX) {
.COL-XL-AUTO {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.COL-XL-1 {
FLEX: 0 0 AUTO;
WIDTH: 8.33333333%;
}

.COL-XL-2 {
FLEX: 0 0 AUTO;
WIDTH: 16.66666667%;
}

.COL-XL-3 {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.COL-XL-4 {
FLEX: 0 0 AUTO;

429
STI College Naga
WIDTH: 33.33333333%;
}

.COL-XL-5 {
FLEX: 0 0 AUTO;
WIDTH: 41.66666667%;
}

.COL-XL-6 {
FLEX: 0 0 AUTO;
WIDTH: 50%;
}

.COL-XL-7 {
FLEX: 0 0 AUTO;
WIDTH: 58.33333333%;
}

.COL-XL-8 {
FLEX: 0 0 AUTO;
WIDTH: 66.66666667%;
}

.COL-XL-9 {
FLEX: 0 0 AUTO;
WIDTH: 75%;
}

.COL-XL-10 {
FLEX: 0 0 AUTO;
WIDTH: 83.33333333%;
}

.COL-XL-11 {
FLEX: 0 0 AUTO;
WIDTH: 91.66666667%;
}

.COL-XL-12 {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.OFFSET-XL-0 {
MARGIN-RIGHT: 0;
}

430
STI College Naga
.OFFSET-XL-1 {
MARGIN-RIGHT: 8.33333333%;
}

.OFFSET-XL-2 {
MARGIN-RIGHT: 16.66666667%;
}

.OFFSET-XL-3 {
MARGIN-RIGHT: 25%;
}

.OFFSET-XL-4 {
MARGIN-RIGHT: 33.33333333%;
}

.OFFSET-XL-5 {
MARGIN-RIGHT: 41.66666667%;
}

.OFFSET-XL-6 {
MARGIN-RIGHT: 50%;
}

.OFFSET-XL-7 {
MARGIN-RIGHT: 58.33333333%;
}

.OFFSET-XL-8 {
MARGIN-RIGHT: 66.66666667%;
}

.OFFSET-XL-9 {
MARGIN-RIGHT: 75%;
}

.OFFSET-XL-10 {
MARGIN-RIGHT: 83.33333333%;
}

.OFFSET-XL-11 {
MARGIN-RIGHT: 91.66666667%;
}

.G-XL-0,

431
STI College Naga
.GX-XL-0 {
--BS-GUTTER-X: 0;
}

.G-XL-0,
.GY-XL-0 {
--BS-GUTTER-Y: 0;
}

.G-XL-1,
.GX-XL-1 {
--BS-GUTTER-X: 0.25REM;
}

.G-XL-1,
.GY-XL-1 {
--BS-GUTTER-Y: 0.25REM;
}

.G-XL-2,
.GX-XL-2 {
--BS-GUTTER-X: 0.5REM;
}

.G-XL-2,
.GY-XL-2 {
--BS-GUTTER-Y: 0.5REM;
}

.G-XL-3,
.GX-XL-3 {
--BS-GUTTER-X: 1REM;
}

.G-XL-3,
.GY-XL-3 {
--BS-GUTTER-Y: 1REM;
}

.G-XL-4,
.GX-XL-4 {
--BS-GUTTER-X: 1.5REM;
}

.G-XL-4,
.GY-XL-4 {

432
STI College Naga
--BS-GUTTER-Y: 1.5REM;
}

.G-XL-5,
.GX-XL-5 {
--BS-GUTTER-X: 3REM;
}

.G-XL-5,
.GY-XL-5 {
--BS-GUTTER-Y: 3REM;
}
}
@MEDIA (MIN-WIDTH: 1400PX) {
.COL-XXL-AUTO {
FLEX: 0 0 AUTO;
WIDTH: AUTO;
}

.COL-XXL-1 {
FLEX: 0 0 AUTO;
WIDTH: 8.33333333%;
}

.COL-XXL-2 {
FLEX: 0 0 AUTO;
WIDTH: 16.66666667%;
}

.COL-XXL-3 {
FLEX: 0 0 AUTO;
WIDTH: 25%;
}

.COL-XXL-4 {
FLEX: 0 0 AUTO;
WIDTH: 33.33333333%;
}

.COL-XXL-5 {
FLEX: 0 0 AUTO;
WIDTH: 41.66666667%;
}

.COL-XXL-6 {
FLEX: 0 0 AUTO;

433
STI College Naga
WIDTH: 50%;
}

.COL-XXL-7 {
FLEX: 0 0 AUTO;
WIDTH: 58.33333333%;
}

.COL-XXL-8 {
FLEX: 0 0 AUTO;
WIDTH: 66.66666667%;
}

.COL-XXL-9 {
FLEX: 0 0 AUTO;
WIDTH: 75%;
}

.COL-XXL-10 {
FLEX: 0 0 AUTO;
WIDTH: 83.33333333%;
}

.COL-XXL-11 {
FLEX: 0 0 AUTO;
WIDTH: 91.66666667%;
}

.COL-XXL-12 {
FLEX: 0 0 AUTO;
WIDTH: 100%;
}

.OFFSET-XXL-0 {
MARGIN-RIGHT: 0;
}

.OFFSET-XXL-1 {
MARGIN-RIGHT: 8.33333333%;
}

.OFFSET-XXL-2 {
MARGIN-RIGHT: 16.66666667%;
}

.OFFSET-XXL-3 {

434
STI College Naga
MARGIN-RIGHT: 25%;
}

.OFFSET-XXL-4 {
MARGIN-RIGHT: 33.33333333%;
}

.OFFSET-XXL-5 {
MARGIN-RIGHT: 41.66666667%;
}

.OFFSET-XXL-6 {
MARGIN-RIGHT: 50%;
}

.OFFSET-XXL-7 {
MARGIN-RIGHT: 58.33333333%;
}

.OFFSET-XXL-8 {
MARGIN-RIGHT: 66.66666667%;
}

.OFFSET-XXL-9 {
MARGIN-RIGHT: 75%;
}

.OFFSET-XXL-10 {
MARGIN-RIGHT: 83.33333333%;
}

.OFFSET-XXL-11 {
MARGIN-RIGHT: 91.66666667%;
}

.G-XXL-0,
.GX-XXL-0 {
--BS-GUTTER-X: 0;
}

.G-XXL-0,
.GY-XXL-0 {
--BS-GUTTER-Y: 0;
}

.G-XXL-1,

435
STI College Naga
.GX-XXL-1 {
--BS-GUTTER-X: 0.25REM;
}

.G-XXL-1,
.GY-XXL-1 {
--BS-GUTTER-Y: 0.25REM;
}

.G-XXL-2,
.GX-XXL-2 {
--BS-GUTTER-X: 0.5REM;
}

.G-XXL-2,
.GY-XXL-2 {
--BS-GUTTER-Y: 0.5REM;
}

.G-XXL-3,
.GX-XXL-3 {
--BS-GUTTER-X: 1REM;
}

.G-XXL-3,
.GY-XXL-3 {
--BS-GUTTER-Y: 1REM;
}

.G-XXL-4,
.GX-XXL-4 {
--BS-GUTTER-X: 1.5REM;
}

.G-XXL-4,
.GY-XXL-4 {
--BS-GUTTER-Y: 1.5REM;
}

.G-XXL-5,
.GX-XXL-5 {
--BS-GUTTER-X: 3REM;
}

.G-XXL-5,
.GY-XXL-5 {

436
STI College Naga
--BS-GUTTER-Y: 3REM;
}
}
.D-INLINE {
DISPLAY: INLINE !IMPORTANT;
}

.D-INLINE-BLOCK {
DISPLAY: INLINE-BLOCK !IMPORTANT;
}

.D-BLOCK {
DISPLAY: BLOCK !IMPORTANT;
}

.D-GRID {
DISPLAY: GRID !IMPORTANT;
}

.D-TABLE {
DISPLAY: TABLE !IMPORTANT;
}

.D-TABLE-ROW {
DISPLAY: TABLE-ROW !IMPORTANT;
}

.D-TABLE-CELL {
DISPLAY: TABLE-CELL !IMPORTANT;
}

.D-FLEX {
DISPLAY: FLEX !IMPORTANT;
}

.D-INLINE-FLEX {
DISPLAY: INLINE-FLEX !IMPORTANT;
}

.D-NONE {
DISPLAY: NONE !IMPORTANT;
}

.FLEX-FILL {
FLEX: 1 1 AUTO !IMPORTANT;
}

437
STI College Naga
.FLEX-ROW {
FLEX-DIRECTION: ROW !IMPORTANT;
}

.FLEX-COLUMN {
FLEX-DIRECTION: COLUMN !IMPORTANT;
}

.FLEX-ROW-REVERSE {
FLEX-DIRECTION: ROW-REVERSE !IMPORTANT;
}

.FLEX-COLUMN-REVERSE {
FLEX-DIRECTION: COLUMN-REVERSE !IMPORTANT;
}

.FLEX-GROW-0 {
FLEX-GROW: 0 !IMPORTANT;
}

.FLEX-GROW-1 {
FLEX-GROW: 1 !IMPORTANT;
}

.FLEX-SHRINK-0 {
FLEX-SHRINK: 0 !IMPORTANT;
}

.FLEX-SHRINK-1 {
FLEX-SHRINK: 1 !IMPORTANT;
}

.FLEX-WRAP {
FLEX-WRAP: WRAP !IMPORTANT;
}

.FLEX-NOWRAP {
FLEX-WRAP: NOWRAP !IMPORTANT;
}

.FLEX-WRAP-REVERSE {
FLEX-WRAP: WRAP-REVERSE !IMPORTANT;
}

.JUSTIFY-CONTENT-START {

438
STI College Naga
JUSTIFY-CONTENT: FLEX-START !IMPORTANT;
}

.JUSTIFY-CONTENT-END {
JUSTIFY-CONTENT: FLEX-END !IMPORTANT;
}

.JUSTIFY-CONTENT-CENTER {
JUSTIFY-CONTENT: CENTER !IMPORTANT;
}

.JUSTIFY-CONTENT-BETWEEN {
JUSTIFY-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.JUSTIFY-CONTENT-AROUND {
JUSTIFY-CONTENT: SPACE-AROUND !IMPORTANT;
}

.JUSTIFY-CONTENT-EVENLY {
JUSTIFY-CONTENT: SPACE-EVENLY !IMPORTANT;
}

.ALIGN-ITEMS-START {
ALIGN-ITEMS: FLEX-START !IMPORTANT;
}

.ALIGN-ITEMS-END {
ALIGN-ITEMS: FLEX-END !IMPORTANT;
}

.ALIGN-ITEMS-CENTER {
ALIGN-ITEMS: CENTER !IMPORTANT;
}

.ALIGN-ITEMS-BASELINE {
ALIGN-ITEMS: BASELINE !IMPORTANT;
}

.ALIGN-ITEMS-STRETCH {
ALIGN-ITEMS: STRETCH !IMPORTANT;
}

.ALIGN-CONTENT-START {
ALIGN-CONTENT: FLEX-START !IMPORTANT;
}

439
STI College Naga
.ALIGN-CONTENT-END {
ALIGN-CONTENT: FLEX-END !IMPORTANT;
}

.ALIGN-CONTENT-CENTER {
ALIGN-CONTENT: CENTER !IMPORTANT;
}

.ALIGN-CONTENT-BETWEEN {
ALIGN-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.ALIGN-CONTENT-AROUND {
ALIGN-CONTENT: SPACE-AROUND !IMPORTANT;
}

.ALIGN-CONTENT-STRETCH {
ALIGN-CONTENT: STRETCH !IMPORTANT;
}

.ALIGN-SELF-AUTO {
ALIGN-SELF: AUTO !IMPORTANT;
}

.ALIGN-SELF-START {
ALIGN-SELF: FLEX-START !IMPORTANT;
}

.ALIGN-SELF-END {
ALIGN-SELF: FLEX-END !IMPORTANT;
}

.ALIGN-SELF-CENTER {
ALIGN-SELF: CENTER !IMPORTANT;
}

.ALIGN-SELF-BASELINE {
ALIGN-SELF: BASELINE !IMPORTANT;
}

.ALIGN-SELF-STRETCH {
ALIGN-SELF: STRETCH !IMPORTANT;
}

.ORDER-FIRST {

440
STI College Naga
ORDER: -1 !IMPORTANT;
}

.ORDER-0 {
ORDER: 0 !IMPORTANT;
}

.ORDER-1 {
ORDER: 1 !IMPORTANT;
}

.ORDER-2 {
ORDER: 2 !IMPORTANT;
}

.ORDER-3 {
ORDER: 3 !IMPORTANT;
}

.ORDER-4 {
ORDER: 4 !IMPORTANT;
}

.ORDER-5 {
ORDER: 5 !IMPORTANT;
}

.ORDER-LAST {
ORDER: 6 !IMPORTANT;
}

.M-0 {
MARGIN: 0 !IMPORTANT;
}

.M-1 {
MARGIN: 0.25REM !IMPORTANT;
}

.M-2 {
MARGIN: 0.5REM !IMPORTANT;
}

.M-3 {
MARGIN: 1REM !IMPORTANT;
}

441
STI College Naga
.M-4 {
MARGIN: 1.5REM !IMPORTANT;
}

.M-5 {
MARGIN: 3REM !IMPORTANT;
}

.M-AUTO {
MARGIN: AUTO !IMPORTANT;
}

.MX-0 {
MARGIN-LEFT: 0 !IMPORTANT;
MARGIN-RIGHT: 0 !IMPORTANT;
}

.MX-1 {
MARGIN-LEFT: 0.25REM !IMPORTANT;
MARGIN-RIGHT: 0.25REM !IMPORTANT;
}

.MX-2 {
MARGIN-LEFT: 0.5REM !IMPORTANT;
MARGIN-RIGHT: 0.5REM !IMPORTANT;
}

.MX-3 {
MARGIN-LEFT: 1REM !IMPORTANT;
MARGIN-RIGHT: 1REM !IMPORTANT;
}

.MX-4 {
MARGIN-LEFT: 1.5REM !IMPORTANT;
MARGIN-RIGHT: 1.5REM !IMPORTANT;
}

.MX-5 {
MARGIN-LEFT: 3REM !IMPORTANT;
MARGIN-RIGHT: 3REM !IMPORTANT;
}

.MX-AUTO {
MARGIN-LEFT: AUTO !IMPORTANT;
MARGIN-RIGHT: AUTO !IMPORTANT;

442
STI College Naga
}

.MY-0 {
MARGIN-TOP: 0 !IMPORTANT;
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MY-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MY-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MY-3 {
MARGIN-TOP: 1REM !IMPORTANT;
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MY-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MY-5 {
MARGIN-TOP: 3REM !IMPORTANT;
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MY-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MT-0 {
MARGIN-TOP: 0 !IMPORTANT;
}

.MT-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
}

.MT-2 {

443
STI College Naga
MARGIN-TOP: 0.5REM !IMPORTANT;
}

.MT-3 {
MARGIN-TOP: 1REM !IMPORTANT;
}

.MT-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
}

.MT-5 {
MARGIN-TOP: 3REM !IMPORTANT;
}

.MT-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
}

.ME-0 {
MARGIN-LEFT: 0 !IMPORTANT;
}

.ME-1 {
MARGIN-LEFT: 0.25REM !IMPORTANT;
}

.ME-2 {
MARGIN-LEFT: 0.5REM !IMPORTANT;
}

.ME-3 {
MARGIN-LEFT: 1REM !IMPORTANT;
}

.ME-4 {
MARGIN-LEFT: 1.5REM !IMPORTANT;
}

.ME-5 {
MARGIN-LEFT: 3REM !IMPORTANT;
}

.ME-AUTO {
MARGIN-LEFT: AUTO !IMPORTANT;
}

444
STI College Naga
.MB-0 {
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MB-1 {
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MB-2 {
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MB-3 {
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MB-4 {
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MB-5 {
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MB-AUTO {
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MS-0 {
MARGIN-RIGHT: 0 !IMPORTANT;
}

.MS-1 {
MARGIN-RIGHT: 0.25REM !IMPORTANT;
}

.MS-2 {
MARGIN-RIGHT: 0.5REM !IMPORTANT;
}

.MS-3 {
MARGIN-RIGHT: 1REM !IMPORTANT;
}

.MS-4 {

445
STI College Naga
MARGIN-RIGHT: 1.5REM !IMPORTANT;
}

.MS-5 {
MARGIN-RIGHT: 3REM !IMPORTANT;
}

.MS-AUTO {
MARGIN-RIGHT: AUTO !IMPORTANT;
}

.P-0 {
PADDING: 0 !IMPORTANT;
}

.P-1 {
PADDING: 0.25REM !IMPORTANT;
}

.P-2 {
PADDING: 0.5REM !IMPORTANT;
}

.P-3 {
PADDING: 1REM !IMPORTANT;
}

.P-4 {
PADDING: 1.5REM !IMPORTANT;
}

.P-5 {
PADDING: 3REM !IMPORTANT;
}

.PX-0 {
PADDING-LEFT: 0 !IMPORTANT;
PADDING-RIGHT: 0 !IMPORTANT;
}

.PX-1 {
PADDING-LEFT: 0.25REM !IMPORTANT;
PADDING-RIGHT: 0.25REM !IMPORTANT;
}

.PX-2 {

446
STI College Naga
PADDING-LEFT: 0.5REM !IMPORTANT;
PADDING-RIGHT: 0.5REM !IMPORTANT;
}

.PX-3 {
PADDING-LEFT: 1REM !IMPORTANT;
PADDING-RIGHT: 1REM !IMPORTANT;
}

.PX-4 {
PADDING-LEFT: 1.5REM !IMPORTANT;
PADDING-RIGHT: 1.5REM !IMPORTANT;
}

.PX-5 {
PADDING-LEFT: 3REM !IMPORTANT;
PADDING-RIGHT: 3REM !IMPORTANT;
}

.PY-0 {
PADDING-TOP: 0 !IMPORTANT;
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PY-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PY-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PY-3 {
PADDING-TOP: 1REM !IMPORTANT;
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PY-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PY-5 {
PADDING-TOP: 3REM !IMPORTANT;

447
STI College Naga
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PT-0 {
PADDING-TOP: 0 !IMPORTANT;
}

.PT-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
}

.PT-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
}

.PT-3 {
PADDING-TOP: 1REM !IMPORTANT;
}

.PT-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
}

.PT-5 {
PADDING-TOP: 3REM !IMPORTANT;
}

.PE-0 {
PADDING-LEFT: 0 !IMPORTANT;
}

.PE-1 {
PADDING-LEFT: 0.25REM !IMPORTANT;
}

.PE-2 {
PADDING-LEFT: 0.5REM !IMPORTANT;
}

.PE-3 {
PADDING-LEFT: 1REM !IMPORTANT;
}

.PE-4 {
PADDING-LEFT: 1.5REM !IMPORTANT;
}

448
STI College Naga
.PE-5 {
PADDING-LEFT: 3REM !IMPORTANT;
}

.PB-0 {
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PB-1 {
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PB-2 {
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PB-3 {
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PB-4 {
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PB-5 {
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PS-0 {
PADDING-RIGHT: 0 !IMPORTANT;
}

.PS-1 {
PADDING-RIGHT: 0.25REM !IMPORTANT;
}

.PS-2 {
PADDING-RIGHT: 0.5REM !IMPORTANT;
}

.PS-3 {
PADDING-RIGHT: 1REM !IMPORTANT;
}

.PS-4 {

449
STI College Naga
PADDING-RIGHT: 1.5REM !IMPORTANT;
}

.PS-5 {
PADDING-RIGHT: 3REM !IMPORTANT;
}

@MEDIA (MIN-WIDTH: 576PX) {

.D-SM-INLINE {
DISPLAY: INLINE !IMPORTANT;
}

.D-SM-INLINE-BLOCK {
DISPLAY: INLINE-BLOCK !IMPORTANT;
}

.D-SM-BLOCK {
DISPLAY: BLOCK !IMPORTANT;
}

.D-SM-GRID {
DISPLAY: GRID !IMPORTANT;
}

.D-SM-TABLE {
DISPLAY: TABLE !IMPORTANT;
}

.D-SM-TABLE-ROW {
DISPLAY: TABLE-ROW !IMPORTANT;
}

.D-SM-TABLE-CELL {
DISPLAY: TABLE-CELL !IMPORTANT;
}

.D-SM-FLEX {
DISPLAY: FLEX !IMPORTANT;
}

.D-SM-INLINE-FLEX {
DISPLAY: INLINE-FLEX !IMPORTANT;
}

.D-SM-NONE {
DISPLAY: NONE !IMPORTANT;

450
STI College Naga
}

.FLEX-SM-FILL {
FLEX: 1 1 AUTO !IMPORTANT;
}

.FLEX-SM-ROW {
FLEX-DIRECTION: ROW !IMPORTANT;
}

.FLEX-SM-COLUMN {
FLEX-DIRECTION: COLUMN !IMPORTANT;
}

.FLEX-SM-ROW-REVERSE {
FLEX-DIRECTION: ROW-REVERSE !IMPORTANT;
}

.FLEX-SM-COLUMN-REVERSE {
FLEX-DIRECTION: COLUMN-REVERSE !IMPORTANT;
}

.FLEX-SM-GROW-0 {
FLEX-GROW: 0 !IMPORTANT;
}

.FLEX-SM-GROW-1 {
FLEX-GROW: 1 !IMPORTANT;
}

.FLEX-SM-SHRINK-0 {
FLEX-SHRINK: 0 !IMPORTANT;
}

.FLEX-SM-SHRINK-1 {
FLEX-SHRINK: 1 !IMPORTANT;
}

.FLEX-SM-WRAP {
FLEX-WRAP: WRAP !IMPORTANT;
}

.FLEX-SM-NOWRAP {
FLEX-WRAP: NOWRAP !IMPORTANT;
}

451
STI College Naga
.FLEX-SM-WRAP-REVERSE {
FLEX-WRAP: WRAP-REVERSE !IMPORTANT;
}

.JUSTIFY-CONTENT-SM-START {
JUSTIFY-CONTENT: FLEX-START !IMPORTANT;
}

.JUSTIFY-CONTENT-SM-END {
JUSTIFY-CONTENT: FLEX-END !IMPORTANT;
}

.JUSTIFY-CONTENT-SM-CENTER {
JUSTIFY-CONTENT: CENTER !IMPORTANT;
}

.JUSTIFY-CONTENT-SM-BETWEEN {
JUSTIFY-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.JUSTIFY-CONTENT-SM-AROUND {
JUSTIFY-CONTENT: SPACE-AROUND !IMPORTANT;
}

.JUSTIFY-CONTENT-SM-EVENLY {
JUSTIFY-CONTENT: SPACE-EVENLY !IMPORTANT;
}

.ALIGN-ITEMS-SM-START {
ALIGN-ITEMS: FLEX-START !IMPORTANT;
}

.ALIGN-ITEMS-SM-END {
ALIGN-ITEMS: FLEX-END !IMPORTANT;
}

.ALIGN-ITEMS-SM-CENTER {
ALIGN-ITEMS: CENTER !IMPORTANT;
}

.ALIGN-ITEMS-SM-BASELINE {
ALIGN-ITEMS: BASELINE !IMPORTANT;
}

.ALIGN-ITEMS-SM-STRETCH {
ALIGN-ITEMS: STRETCH !IMPORTANT;

452
STI College Naga
}

.ALIGN-CONTENT-SM-START {
ALIGN-CONTENT: FLEX-START !IMPORTANT;
}

.ALIGN-CONTENT-SM-END {
ALIGN-CONTENT: FLEX-END !IMPORTANT;
}

.ALIGN-CONTENT-SM-CENTER {
ALIGN-CONTENT: CENTER !IMPORTANT;
}

.ALIGN-CONTENT-SM-BETWEEN {
ALIGN-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.ALIGN-CONTENT-SM-AROUND {
ALIGN-CONTENT: SPACE-AROUND !IMPORTANT;
}

.ALIGN-CONTENT-SM-STRETCH {
ALIGN-CONTENT: STRETCH !IMPORTANT;
}

.ALIGN-SELF-SM-AUTO {
ALIGN-SELF: AUTO !IMPORTANT;
}

.ALIGN-SELF-SM-START {
ALIGN-SELF: FLEX-START !IMPORTANT;
}

.ALIGN-SELF-SM-END {
ALIGN-SELF: FLEX-END !IMPORTANT;
}

.ALIGN-SELF-SM-CENTER {
ALIGN-SELF: CENTER !IMPORTANT;
}

.ALIGN-SELF-SM-BASELINE {
ALIGN-SELF: BASELINE !IMPORTANT;
}

453
STI College Naga
.ALIGN-SELF-SM-STRETCH {
ALIGN-SELF: STRETCH !IMPORTANT;
}

.ORDER-SM-FIRST {
ORDER: -1 !IMPORTANT;
}

.ORDER-SM-0 {
ORDER: 0 !IMPORTANT;
}

.ORDER-SM-1 {
ORDER: 1 !IMPORTANT;
}

.ORDER-SM-2 {
ORDER: 2 !IMPORTANT;
}

.ORDER-SM-3 {
ORDER: 3 !IMPORTANT;
}

.ORDER-SM-4 {
ORDER: 4 !IMPORTANT;
}

.ORDER-SM-5 {
ORDER: 5 !IMPORTANT;
}

.ORDER-SM-LAST {
ORDER: 6 !IMPORTANT;
}

.M-SM-0 {
MARGIN: 0 !IMPORTANT;
}

.M-SM-1 {
MARGIN: 0.25REM !IMPORTANT;
}

.M-SM-2 {
MARGIN: 0.5REM !IMPORTANT;

454
STI College Naga
}

.M-SM-3 {
MARGIN: 1REM !IMPORTANT;
}

.M-SM-4 {
MARGIN: 1.5REM !IMPORTANT;
}

.M-SM-5 {
MARGIN: 3REM !IMPORTANT;
}

.M-SM-AUTO {
MARGIN: AUTO !IMPORTANT;
}

.MX-SM-0 {
MARGIN-LEFT: 0 !IMPORTANT;
MARGIN-RIGHT: 0 !IMPORTANT;
}

.MX-SM-1 {
MARGIN-LEFT: 0.25REM !IMPORTANT;
MARGIN-RIGHT: 0.25REM !IMPORTANT;
}

.MX-SM-2 {
MARGIN-LEFT: 0.5REM !IMPORTANT;
MARGIN-RIGHT: 0.5REM !IMPORTANT;
}

.MX-SM-3 {
MARGIN-LEFT: 1REM !IMPORTANT;
MARGIN-RIGHT: 1REM !IMPORTANT;
}

.MX-SM-4 {
MARGIN-LEFT: 1.5REM !IMPORTANT;
MARGIN-RIGHT: 1.5REM !IMPORTANT;
}

.MX-SM-5 {
MARGIN-LEFT: 3REM !IMPORTANT;
MARGIN-RIGHT: 3REM !IMPORTANT;

455
STI College Naga
}

.MX-SM-AUTO {
MARGIN-LEFT: AUTO !IMPORTANT;
MARGIN-RIGHT: AUTO !IMPORTANT;
}

.MY-SM-0 {
MARGIN-TOP: 0 !IMPORTANT;
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MY-SM-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MY-SM-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MY-SM-3 {
MARGIN-TOP: 1REM !IMPORTANT;
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MY-SM-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MY-SM-5 {
MARGIN-TOP: 3REM !IMPORTANT;
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MY-SM-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MT-SM-0 {
MARGIN-TOP: 0 !IMPORTANT;
}

456
STI College Naga
.MT-SM-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
}

.MT-SM-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
}

.MT-SM-3 {
MARGIN-TOP: 1REM !IMPORTANT;
}

.MT-SM-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
}

.MT-SM-5 {
MARGIN-TOP: 3REM !IMPORTANT;
}

.MT-SM-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
}

.ME-SM-0 {
MARGIN-LEFT: 0 !IMPORTANT;
}

.ME-SM-1 {
MARGIN-LEFT: 0.25REM !IMPORTANT;
}

.ME-SM-2 {
MARGIN-LEFT: 0.5REM !IMPORTANT;
}

.ME-SM-3 {
MARGIN-LEFT: 1REM !IMPORTANT;
}

.ME-SM-4 {
MARGIN-LEFT: 1.5REM !IMPORTANT;
}

.ME-SM-5 {
MARGIN-LEFT: 3REM !IMPORTANT;

457
STI College Naga
}

.ME-SM-AUTO {
MARGIN-LEFT: AUTO !IMPORTANT;
}

.MB-SM-0 {
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MB-SM-1 {
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MB-SM-2 {
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MB-SM-3 {
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MB-SM-4 {
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MB-SM-5 {
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MB-SM-AUTO {
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MS-SM-0 {
MARGIN-RIGHT: 0 !IMPORTANT;
}

.MS-SM-1 {
MARGIN-RIGHT: 0.25REM !IMPORTANT;
}

.MS-SM-2 {
MARGIN-RIGHT: 0.5REM !IMPORTANT;
}

458
STI College Naga
.MS-SM-3 {
MARGIN-RIGHT: 1REM !IMPORTANT;
}

.MS-SM-4 {
MARGIN-RIGHT: 1.5REM !IMPORTANT;
}

.MS-SM-5 {
MARGIN-RIGHT: 3REM !IMPORTANT;
}

.MS-SM-AUTO {
MARGIN-RIGHT: AUTO !IMPORTANT;
}

.P-SM-0 {
PADDING: 0 !IMPORTANT;
}

.P-SM-1 {
PADDING: 0.25REM !IMPORTANT;
}

.P-SM-2 {
PADDING: 0.5REM !IMPORTANT;
}

.P-SM-3 {
PADDING: 1REM !IMPORTANT;
}

.P-SM-4 {
PADDING: 1.5REM !IMPORTANT;
}

.P-SM-5 {
PADDING: 3REM !IMPORTANT;
}

.PX-SM-0 {
PADDING-LEFT: 0 !IMPORTANT;
PADDING-RIGHT: 0 !IMPORTANT;
}

.PX-SM-1 {

459
STI College Naga
PADDING-LEFT: 0.25REM !IMPORTANT;
PADDING-RIGHT: 0.25REM !IMPORTANT;
}

.PX-SM-2 {
PADDING-LEFT: 0.5REM !IMPORTANT;
PADDING-RIGHT: 0.5REM !IMPORTANT;
}

.PX-SM-3 {
PADDING-LEFT: 1REM !IMPORTANT;
PADDING-RIGHT: 1REM !IMPORTANT;
}

.PX-SM-4 {
PADDING-LEFT: 1.5REM !IMPORTANT;
PADDING-RIGHT: 1.5REM !IMPORTANT;
}

.PX-SM-5 {
PADDING-LEFT: 3REM !IMPORTANT;
PADDING-RIGHT: 3REM !IMPORTANT;
}

.PY-SM-0 {
PADDING-TOP: 0 !IMPORTANT;
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PY-SM-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PY-SM-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PY-SM-3 {
PADDING-TOP: 1REM !IMPORTANT;
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PY-SM-4 {
PADDING-TOP: 1.5REM !IMPORTANT;

460
STI College Naga
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PY-SM-5 {
PADDING-TOP: 3REM !IMPORTANT;
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PT-SM-0 {
PADDING-TOP: 0 !IMPORTANT;
}

.PT-SM-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
}

.PT-SM-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
}

.PT-SM-3 {
PADDING-TOP: 1REM !IMPORTANT;
}

.PT-SM-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
}

.PT-SM-5 {
PADDING-TOP: 3REM !IMPORTANT;
}

.PE-SM-0 {
PADDING-LEFT: 0 !IMPORTANT;
}

.PE-SM-1 {
PADDING-LEFT: 0.25REM !IMPORTANT;
}

.PE-SM-2 {
PADDING-LEFT: 0.5REM !IMPORTANT;
}

.PE-SM-3 {
PADDING-LEFT: 1REM !IMPORTANT;

461
STI College Naga
}

.PE-SM-4 {
PADDING-LEFT: 1.5REM !IMPORTANT;
}

.PE-SM-5 {
PADDING-LEFT: 3REM !IMPORTANT;
}

.PB-SM-0 {
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PB-SM-1 {
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PB-SM-2 {
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PB-SM-3 {
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PB-SM-4 {
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PB-SM-5 {
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PS-SM-0 {
PADDING-RIGHT: 0 !IMPORTANT;
}

.PS-SM-1 {
PADDING-RIGHT: 0.25REM !IMPORTANT;
}

.PS-SM-2 {
PADDING-RIGHT: 0.5REM !IMPORTANT;
}

462
STI College Naga
.PS-SM-3 {
PADDING-RIGHT: 1REM !IMPORTANT;
}

.PS-SM-4 {
PADDING-RIGHT: 1.5REM !IMPORTANT;
}

.PS-SM-5 {
PADDING-RIGHT: 3REM !IMPORTANT;
}
}
@MEDIA (MIN-WIDTH: 768PX) {
.D-MD-INLINE {
DISPLAY: INLINE !IMPORTANT;
}

.D-MD-INLINE-BLOCK {
DISPLAY: INLINE-BLOCK !IMPORTANT;
}

.D-MD-BLOCK {
DISPLAY: BLOCK !IMPORTANT;
}

.D-MD-GRID {
DISPLAY: GRID !IMPORTANT;
}

.D-MD-TABLE {
DISPLAY: TABLE !IMPORTANT;
}

.D-MD-TABLE-ROW {
DISPLAY: TABLE-ROW !IMPORTANT;
}

.D-MD-TABLE-CELL {
DISPLAY: TABLE-CELL !IMPORTANT;
}

.D-MD-FLEX {
DISPLAY: FLEX !IMPORTANT;
}

.D-MD-INLINE-FLEX {

463
STI College Naga
DISPLAY: INLINE-FLEX !IMPORTANT;
}

.D-MD-NONE {
DISPLAY: NONE !IMPORTANT;
}

.FLEX-MD-FILL {
FLEX: 1 1 AUTO !IMPORTANT;
}

.FLEX-MD-ROW {
FLEX-DIRECTION: ROW !IMPORTANT;
}

.FLEX-MD-COLUMN {
FLEX-DIRECTION: COLUMN !IMPORTANT;
}

.FLEX-MD-ROW-REVERSE {
FLEX-DIRECTION: ROW-REVERSE !IMPORTANT;
}

.FLEX-MD-COLUMN-REVERSE {
FLEX-DIRECTION: COLUMN-REVERSE !IMPORTANT;
}

.FLEX-MD-GROW-0 {
FLEX-GROW: 0 !IMPORTANT;
}

.FLEX-MD-GROW-1 {
FLEX-GROW: 1 !IMPORTANT;
}

.FLEX-MD-SHRINK-0 {
FLEX-SHRINK: 0 !IMPORTANT;
}

.FLEX-MD-SHRINK-1 {
FLEX-SHRINK: 1 !IMPORTANT;
}

.FLEX-MD-WRAP {
FLEX-WRAP: WRAP !IMPORTANT;
}

464
STI College Naga
.FLEX-MD-NOWRAP {
FLEX-WRAP: NOWRAP !IMPORTANT;
}

.FLEX-MD-WRAP-REVERSE {
FLEX-WRAP: WRAP-REVERSE !IMPORTANT;
}

.JUSTIFY-CONTENT-MD-START {
JUSTIFY-CONTENT: FLEX-START !IMPORTANT;
}

.JUSTIFY-CONTENT-MD-END {
JUSTIFY-CONTENT: FLEX-END !IMPORTANT;
}

.JUSTIFY-CONTENT-MD-CENTER {
JUSTIFY-CONTENT: CENTER !IMPORTANT;
}

.JUSTIFY-CONTENT-MD-BETWEEN {
JUSTIFY-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.JUSTIFY-CONTENT-MD-AROUND {
JUSTIFY-CONTENT: SPACE-AROUND !IMPORTANT;
}

.JUSTIFY-CONTENT-MD-EVENLY {
JUSTIFY-CONTENT: SPACE-EVENLY !IMPORTANT;
}

.ALIGN-ITEMS-MD-START {
ALIGN-ITEMS: FLEX-START !IMPORTANT;
}

.ALIGN-ITEMS-MD-END {
ALIGN-ITEMS: FLEX-END !IMPORTANT;
}

.ALIGN-ITEMS-MD-CENTER {
ALIGN-ITEMS: CENTER !IMPORTANT;
}

.ALIGN-ITEMS-MD-BASELINE {

465
STI College Naga
ALIGN-ITEMS: BASELINE !IMPORTANT;
}

.ALIGN-ITEMS-MD-STRETCH {
ALIGN-ITEMS: STRETCH !IMPORTANT;
}

.ALIGN-CONTENT-MD-START {
ALIGN-CONTENT: FLEX-START !IMPORTANT;
}

.ALIGN-CONTENT-MD-END {
ALIGN-CONTENT: FLEX-END !IMPORTANT;
}

.ALIGN-CONTENT-MD-CENTER {
ALIGN-CONTENT: CENTER !IMPORTANT;
}

.ALIGN-CONTENT-MD-BETWEEN {
ALIGN-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.ALIGN-CONTENT-MD-AROUND {
ALIGN-CONTENT: SPACE-AROUND !IMPORTANT;
}

.ALIGN-CONTENT-MD-STRETCH {
ALIGN-CONTENT: STRETCH !IMPORTANT;
}

.ALIGN-SELF-MD-AUTO {
ALIGN-SELF: AUTO !IMPORTANT;
}

.ALIGN-SELF-MD-START {
ALIGN-SELF: FLEX-START !IMPORTANT;
}

.ALIGN-SELF-MD-END {
ALIGN-SELF: FLEX-END !IMPORTANT;
}

.ALIGN-SELF-MD-CENTER {
ALIGN-SELF: CENTER !IMPORTANT;
}

466
STI College Naga
.ALIGN-SELF-MD-BASELINE {
ALIGN-SELF: BASELINE !IMPORTANT;
}

.ALIGN-SELF-MD-STRETCH {
ALIGN-SELF: STRETCH !IMPORTANT;
}

.ORDER-MD-FIRST {
ORDER: -1 !IMPORTANT;
}

.ORDER-MD-0 {
ORDER: 0 !IMPORTANT;
}

.ORDER-MD-1 {
ORDER: 1 !IMPORTANT;
}

.ORDER-MD-2 {
ORDER: 2 !IMPORTANT;
}

.ORDER-MD-3 {
ORDER: 3 !IMPORTANT;
}

.ORDER-MD-4 {
ORDER: 4 !IMPORTANT;
}

.ORDER-MD-5 {
ORDER: 5 !IMPORTANT;
}

.ORDER-MD-LAST {
ORDER: 6 !IMPORTANT;
}

.M-MD-0 {
MARGIN: 0 !IMPORTANT;
}

.M-MD-1 {

467
STI College Naga
MARGIN: 0.25REM !IMPORTANT;
}

.M-MD-2 {
MARGIN: 0.5REM !IMPORTANT;
}

.M-MD-3 {
MARGIN: 1REM !IMPORTANT;
}

.M-MD-4 {
MARGIN: 1.5REM !IMPORTANT;
}

.M-MD-5 {
MARGIN: 3REM !IMPORTANT;
}

.M-MD-AUTO {
MARGIN: AUTO !IMPORTANT;
}

.MX-MD-0 {
MARGIN-LEFT: 0 !IMPORTANT;
MARGIN-RIGHT: 0 !IMPORTANT;
}

.MX-MD-1 {
MARGIN-LEFT: 0.25REM !IMPORTANT;
MARGIN-RIGHT: 0.25REM !IMPORTANT;
}

.MX-MD-2 {
MARGIN-LEFT: 0.5REM !IMPORTANT;
MARGIN-RIGHT: 0.5REM !IMPORTANT;
}

.MX-MD-3 {
MARGIN-LEFT: 1REM !IMPORTANT;
MARGIN-RIGHT: 1REM !IMPORTANT;
}

.MX-MD-4 {
MARGIN-LEFT: 1.5REM !IMPORTANT;
MARGIN-RIGHT: 1.5REM !IMPORTANT;

468
STI College Naga
}

.MX-MD-5 {
MARGIN-LEFT: 3REM !IMPORTANT;
MARGIN-RIGHT: 3REM !IMPORTANT;
}

.MX-MD-AUTO {
MARGIN-LEFT: AUTO !IMPORTANT;
MARGIN-RIGHT: AUTO !IMPORTANT;
}

.MY-MD-0 {
MARGIN-TOP: 0 !IMPORTANT;
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MY-MD-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MY-MD-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MY-MD-3 {
MARGIN-TOP: 1REM !IMPORTANT;
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MY-MD-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MY-MD-5 {
MARGIN-TOP: 3REM !IMPORTANT;
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MY-MD-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

469
STI College Naga
.MT-MD-0 {
MARGIN-TOP: 0 !IMPORTANT;
}

.MT-MD-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
}

.MT-MD-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
}

.MT-MD-3 {
MARGIN-TOP: 1REM !IMPORTANT;
}

.MT-MD-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
}

.MT-MD-5 {
MARGIN-TOP: 3REM !IMPORTANT;
}

.MT-MD-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
}

.ME-MD-0 {
MARGIN-LEFT: 0 !IMPORTANT;
}

.ME-MD-1 {
MARGIN-LEFT: 0.25REM !IMPORTANT;
}

.ME-MD-2 {
MARGIN-LEFT: 0.5REM !IMPORTANT;
}

.ME-MD-3 {
MARGIN-LEFT: 1REM !IMPORTANT;
}

.ME-MD-4 {

470
STI College Naga
MARGIN-LEFT: 1.5REM !IMPORTANT;
}

.ME-MD-5 {
MARGIN-LEFT: 3REM !IMPORTANT;
}

.ME-MD-AUTO {
MARGIN-LEFT: AUTO !IMPORTANT;
}

.MB-MD-0 {
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MB-MD-1 {
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MB-MD-2 {
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MB-MD-3 {
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MB-MD-4 {
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MB-MD-5 {
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MB-MD-AUTO {
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MS-MD-0 {
MARGIN-RIGHT: 0 !IMPORTANT;
}

.MS-MD-1 {
MARGIN-RIGHT: 0.25REM !IMPORTANT;
}

471
STI College Naga
.MS-MD-2 {
MARGIN-RIGHT: 0.5REM !IMPORTANT;
}

.MS-MD-3 {
MARGIN-RIGHT: 1REM !IMPORTANT;
}

.MS-MD-4 {
MARGIN-RIGHT: 1.5REM !IMPORTANT;
}

.MS-MD-5 {
MARGIN-RIGHT: 3REM !IMPORTANT;
}

.MS-MD-AUTO {
MARGIN-RIGHT: AUTO !IMPORTANT;
}

.P-MD-0 {
PADDING: 0 !IMPORTANT;
}

.P-MD-1 {
PADDING: 0.25REM !IMPORTANT;
}

.P-MD-2 {
PADDING: 0.5REM !IMPORTANT;
}

.P-MD-3 {
PADDING: 1REM !IMPORTANT;
}

.P-MD-4 {
PADDING: 1.5REM !IMPORTANT;
}

.P-MD-5 {
PADDING: 3REM !IMPORTANT;
}

.PX-MD-0 {

472
STI College Naga
PADDING-LEFT: 0 !IMPORTANT;
PADDING-RIGHT: 0 !IMPORTANT;
}

.PX-MD-1 {
PADDING-LEFT: 0.25REM !IMPORTANT;
PADDING-RIGHT: 0.25REM !IMPORTANT;
}

.PX-MD-2 {
PADDING-LEFT: 0.5REM !IMPORTANT;
PADDING-RIGHT: 0.5REM !IMPORTANT;
}

.PX-MD-3 {
PADDING-LEFT: 1REM !IMPORTANT;
PADDING-RIGHT: 1REM !IMPORTANT;
}

.PX-MD-4 {
PADDING-LEFT: 1.5REM !IMPORTANT;
PADDING-RIGHT: 1.5REM !IMPORTANT;
}

.PX-MD-5 {
PADDING-LEFT: 3REM !IMPORTANT;
PADDING-RIGHT: 3REM !IMPORTANT;
}

.PY-MD-0 {
PADDING-TOP: 0 !IMPORTANT;
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PY-MD-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PY-MD-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PY-MD-3 {
PADDING-TOP: 1REM !IMPORTANT;

473
STI College Naga
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PY-MD-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PY-MD-5 {
PADDING-TOP: 3REM !IMPORTANT;
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PT-MD-0 {
PADDING-TOP: 0 !IMPORTANT;
}

.PT-MD-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
}

.PT-MD-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
}

.PT-MD-3 {
PADDING-TOP: 1REM !IMPORTANT;
}

.PT-MD-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
}

.PT-MD-5 {
PADDING-TOP: 3REM !IMPORTANT;
}

.PE-MD-0 {
PADDING-LEFT: 0 !IMPORTANT;
}

.PE-MD-1 {
PADDING-LEFT: 0.25REM !IMPORTANT;
}

.PE-MD-2 {

474
STI College Naga
PADDING-LEFT: 0.5REM !IMPORTANT;
}

.PE-MD-3 {
PADDING-LEFT: 1REM !IMPORTANT;
}

.PE-MD-4 {
PADDING-LEFT: 1.5REM !IMPORTANT;
}

.PE-MD-5 {
PADDING-LEFT: 3REM !IMPORTANT;
}

.PB-MD-0 {
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PB-MD-1 {
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PB-MD-2 {
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PB-MD-3 {
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PB-MD-4 {
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PB-MD-5 {
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PS-MD-0 {
PADDING-RIGHT: 0 !IMPORTANT;
}

.PS-MD-1 {
PADDING-RIGHT: 0.25REM !IMPORTANT;
}

475
STI College Naga
.PS-MD-2 {
PADDING-RIGHT: 0.5REM !IMPORTANT;
}

.PS-MD-3 {
PADDING-RIGHT: 1REM !IMPORTANT;
}

.PS-MD-4 {
PADDING-RIGHT: 1.5REM !IMPORTANT;
}

.PS-MD-5 {
PADDING-RIGHT: 3REM !IMPORTANT;
}
}
@MEDIA (MIN-WIDTH: 992PX) {
.D-LG-INLINE {
DISPLAY: INLINE !IMPORTANT;
}

.D-LG-INLINE-BLOCK {
DISPLAY: INLINE-BLOCK !IMPORTANT;
}

.D-LG-BLOCK {
DISPLAY: BLOCK !IMPORTANT;
}

.D-LG-GRID {
DISPLAY: GRID !IMPORTANT;
}

.D-LG-TABLE {
DISPLAY: TABLE !IMPORTANT;
}

.D-LG-TABLE-ROW {
DISPLAY: TABLE-ROW !IMPORTANT;
}

.D-LG-TABLE-CELL {
DISPLAY: TABLE-CELL !IMPORTANT;
}

476
STI College Naga
.D-LG-FLEX {
DISPLAY: FLEX !IMPORTANT;
}

.D-LG-INLINE-FLEX {
DISPLAY: INLINE-FLEX !IMPORTANT;
}

.D-LG-NONE {
DISPLAY: NONE !IMPORTANT;
}

.FLEX-LG-FILL {
FLEX: 1 1 AUTO !IMPORTANT;
}

.FLEX-LG-ROW {
FLEX-DIRECTION: ROW !IMPORTANT;
}

.FLEX-LG-COLUMN {
FLEX-DIRECTION: COLUMN !IMPORTANT;
}

.FLEX-LG-ROW-REVERSE {
FLEX-DIRECTION: ROW-REVERSE !IMPORTANT;
}

.FLEX-LG-COLUMN-REVERSE {
FLEX-DIRECTION: COLUMN-REVERSE !IMPORTANT;
}

.FLEX-LG-GROW-0 {
FLEX-GROW: 0 !IMPORTANT;
}

.FLEX-LG-GROW-1 {
FLEX-GROW: 1 !IMPORTANT;
}

.FLEX-LG-SHRINK-0 {
FLEX-SHRINK: 0 !IMPORTANT;
}

.FLEX-LG-SHRINK-1 {
FLEX-SHRINK: 1 !IMPORTANT;

477
STI College Naga
}

.FLEX-LG-WRAP {
FLEX-WRAP: WRAP !IMPORTANT;
}

.FLEX-LG-NOWRAP {
FLEX-WRAP: NOWRAP !IMPORTANT;
}

.FLEX-LG-WRAP-REVERSE {
FLEX-WRAP: WRAP-REVERSE !IMPORTANT;
}

.JUSTIFY-CONTENT-LG-START {
JUSTIFY-CONTENT: FLEX-START !IMPORTANT;
}

.JUSTIFY-CONTENT-LG-END {
JUSTIFY-CONTENT: FLEX-END !IMPORTANT;
}

.JUSTIFY-CONTENT-LG-CENTER {
JUSTIFY-CONTENT: CENTER !IMPORTANT;
}

.JUSTIFY-CONTENT-LG-BETWEEN {
JUSTIFY-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.JUSTIFY-CONTENT-LG-AROUND {
JUSTIFY-CONTENT: SPACE-AROUND !IMPORTANT;
}

.JUSTIFY-CONTENT-LG-EVENLY {
JUSTIFY-CONTENT: SPACE-EVENLY !IMPORTANT;
}

.ALIGN-ITEMS-LG-START {
ALIGN-ITEMS: FLEX-START !IMPORTANT;
}

.ALIGN-ITEMS-LG-END {
ALIGN-ITEMS: FLEX-END !IMPORTANT;
}

478
STI College Naga
.ALIGN-ITEMS-LG-CENTER {
ALIGN-ITEMS: CENTER !IMPORTANT;
}

.ALIGN-ITEMS-LG-BASELINE {
ALIGN-ITEMS: BASELINE !IMPORTANT;
}

.ALIGN-ITEMS-LG-STRETCH {
ALIGN-ITEMS: STRETCH !IMPORTANT;
}

.ALIGN-CONTENT-LG-START {
ALIGN-CONTENT: FLEX-START !IMPORTANT;
}

.ALIGN-CONTENT-LG-END {
ALIGN-CONTENT: FLEX-END !IMPORTANT;
}

.ALIGN-CONTENT-LG-CENTER {
ALIGN-CONTENT: CENTER !IMPORTANT;
}

.ALIGN-CONTENT-LG-BETWEEN {
ALIGN-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.ALIGN-CONTENT-LG-AROUND {
ALIGN-CONTENT: SPACE-AROUND !IMPORTANT;
}

.ALIGN-CONTENT-LG-STRETCH {
ALIGN-CONTENT: STRETCH !IMPORTANT;
}

.ALIGN-SELF-LG-AUTO {
ALIGN-SELF: AUTO !IMPORTANT;
}

.ALIGN-SELF-LG-START {
ALIGN-SELF: FLEX-START !IMPORTANT;
}

.ALIGN-SELF-LG-END {
ALIGN-SELF: FLEX-END !IMPORTANT;

479
STI College Naga
}

.ALIGN-SELF-LG-CENTER {
ALIGN-SELF: CENTER !IMPORTANT;
}

.ALIGN-SELF-LG-BASELINE {
ALIGN-SELF: BASELINE !IMPORTANT;
}

.ALIGN-SELF-LG-STRETCH {
ALIGN-SELF: STRETCH !IMPORTANT;
}

.ORDER-LG-FIRST {
ORDER: -1 !IMPORTANT;
}

.ORDER-LG-0 {
ORDER: 0 !IMPORTANT;
}

.ORDER-LG-1 {
ORDER: 1 !IMPORTANT;
}

.ORDER-LG-2 {
ORDER: 2 !IMPORTANT;
}

.ORDER-LG-3 {
ORDER: 3 !IMPORTANT;
}

.ORDER-LG-4 {
ORDER: 4 !IMPORTANT;
}

.ORDER-LG-5 {
ORDER: 5 !IMPORTANT;
}

.ORDER-LG-LAST {
ORDER: 6 !IMPORTANT;
}

480
STI College Naga
.M-LG-0 {
MARGIN: 0 !IMPORTANT;
}

.M-LG-1 {
MARGIN: 0.25REM !IMPORTANT;
}

.M-LG-2 {
MARGIN: 0.5REM !IMPORTANT;
}

.M-LG-3 {
MARGIN: 1REM !IMPORTANT;
}

.M-LG-4 {
MARGIN: 1.5REM !IMPORTANT;
}

.M-LG-5 {
MARGIN: 3REM !IMPORTANT;
}

.M-LG-AUTO {
MARGIN: AUTO !IMPORTANT;
}

.MX-LG-0 {
MARGIN-LEFT: 0 !IMPORTANT;
MARGIN-RIGHT: 0 !IMPORTANT;
}

.MX-LG-1 {
MARGIN-LEFT: 0.25REM !IMPORTANT;
MARGIN-RIGHT: 0.25REM !IMPORTANT;
}

.MX-LG-2 {
MARGIN-LEFT: 0.5REM !IMPORTANT;
MARGIN-RIGHT: 0.5REM !IMPORTANT;
}

.MX-LG-3 {
MARGIN-LEFT: 1REM !IMPORTANT;
MARGIN-RIGHT: 1REM !IMPORTANT;

481
STI College Naga
}

.MX-LG-4 {
MARGIN-LEFT: 1.5REM !IMPORTANT;
MARGIN-RIGHT: 1.5REM !IMPORTANT;
}

.MX-LG-5 {
MARGIN-LEFT: 3REM !IMPORTANT;
MARGIN-RIGHT: 3REM !IMPORTANT;
}

.MX-LG-AUTO {
MARGIN-LEFT: AUTO !IMPORTANT;
MARGIN-RIGHT: AUTO !IMPORTANT;
}

.MY-LG-0 {
MARGIN-TOP: 0 !IMPORTANT;
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MY-LG-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MY-LG-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MY-LG-3 {
MARGIN-TOP: 1REM !IMPORTANT;
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MY-LG-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MY-LG-5 {
MARGIN-TOP: 3REM !IMPORTANT;
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

482
STI College Naga
.MY-LG-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MT-LG-0 {
MARGIN-TOP: 0 !IMPORTANT;
}

.MT-LG-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
}

.MT-LG-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
}

.MT-LG-3 {
MARGIN-TOP: 1REM !IMPORTANT;
}

.MT-LG-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
}

.MT-LG-5 {
MARGIN-TOP: 3REM !IMPORTANT;
}

.MT-LG-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
}

.ME-LG-0 {
MARGIN-LEFT: 0 !IMPORTANT;
}

.ME-LG-1 {
MARGIN-LEFT: 0.25REM !IMPORTANT;
}

.ME-LG-2 {
MARGIN-LEFT: 0.5REM !IMPORTANT;
}

483
STI College Naga
.ME-LG-3 {
MARGIN-LEFT: 1REM !IMPORTANT;
}

.ME-LG-4 {
MARGIN-LEFT: 1.5REM !IMPORTANT;
}

.ME-LG-5 {
MARGIN-LEFT: 3REM !IMPORTANT;
}

.ME-LG-AUTO {
MARGIN-LEFT: AUTO !IMPORTANT;
}

.MB-LG-0 {
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MB-LG-1 {
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MB-LG-2 {
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MB-LG-3 {
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MB-LG-4 {
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MB-LG-5 {
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MB-LG-AUTO {
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MS-LG-0 {
MARGIN-RIGHT: 0 !IMPORTANT;

484
STI College Naga
}

.MS-LG-1 {
MARGIN-RIGHT: 0.25REM !IMPORTANT;
}

.MS-LG-2 {
MARGIN-RIGHT: 0.5REM !IMPORTANT;
}

.MS-LG-3 {
MARGIN-RIGHT: 1REM !IMPORTANT;
}

.MS-LG-4 {
MARGIN-RIGHT: 1.5REM !IMPORTANT;
}

.MS-LG-5 {
MARGIN-RIGHT: 3REM !IMPORTANT;
}

.MS-LG-AUTO {
MARGIN-RIGHT: AUTO !IMPORTANT;
}

.P-LG-0 {
PADDING: 0 !IMPORTANT;
}

.P-LG-1 {
PADDING: 0.25REM !IMPORTANT;
}

.P-LG-2 {
PADDING: 0.5REM !IMPORTANT;
}

.P-LG-3 {
PADDING: 1REM !IMPORTANT;
}

.P-LG-4 {
PADDING: 1.5REM !IMPORTANT;
}

485
STI College Naga
.P-LG-5 {
PADDING: 3REM !IMPORTANT;
}

.PX-LG-0 {
PADDING-LEFT: 0 !IMPORTANT;
PADDING-RIGHT: 0 !IMPORTANT;
}

.PX-LG-1 {
PADDING-LEFT: 0.25REM !IMPORTANT;
PADDING-RIGHT: 0.25REM !IMPORTANT;
}

.PX-LG-2 {
PADDING-LEFT: 0.5REM !IMPORTANT;
PADDING-RIGHT: 0.5REM !IMPORTANT;
}

.PX-LG-3 {
PADDING-LEFT: 1REM !IMPORTANT;
PADDING-RIGHT: 1REM !IMPORTANT;
}

.PX-LG-4 {
PADDING-LEFT: 1.5REM !IMPORTANT;
PADDING-RIGHT: 1.5REM !IMPORTANT;
}

.PX-LG-5 {
PADDING-LEFT: 3REM !IMPORTANT;
PADDING-RIGHT: 3REM !IMPORTANT;
}

.PY-LG-0 {
PADDING-TOP: 0 !IMPORTANT;
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PY-LG-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PY-LG-2 {
PADDING-TOP: 0.5REM !IMPORTANT;

486
STI College Naga
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PY-LG-3 {
PADDING-TOP: 1REM !IMPORTANT;
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PY-LG-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PY-LG-5 {
PADDING-TOP: 3REM !IMPORTANT;
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PT-LG-0 {
PADDING-TOP: 0 !IMPORTANT;
}

.PT-LG-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
}

.PT-LG-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
}

.PT-LG-3 {
PADDING-TOP: 1REM !IMPORTANT;
}

.PT-LG-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
}

.PT-LG-5 {
PADDING-TOP: 3REM !IMPORTANT;
}

.PE-LG-0 {
PADDING-LEFT: 0 !IMPORTANT;
}

487
STI College Naga
.PE-LG-1 {
PADDING-LEFT: 0.25REM !IMPORTANT;
}

.PE-LG-2 {
PADDING-LEFT: 0.5REM !IMPORTANT;
}

.PE-LG-3 {
PADDING-LEFT: 1REM !IMPORTANT;
}

.PE-LG-4 {
PADDING-LEFT: 1.5REM !IMPORTANT;
}

.PE-LG-5 {
PADDING-LEFT: 3REM !IMPORTANT;
}

.PB-LG-0 {
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PB-LG-1 {
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PB-LG-2 {
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PB-LG-3 {
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PB-LG-4 {
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PB-LG-5 {
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PS-LG-0 {
PADDING-RIGHT: 0 !IMPORTANT;

488
STI College Naga
}

.PS-LG-1 {
PADDING-RIGHT: 0.25REM !IMPORTANT;
}

.PS-LG-2 {
PADDING-RIGHT: 0.5REM !IMPORTANT;
}

.PS-LG-3 {
PADDING-RIGHT: 1REM !IMPORTANT;
}

.PS-LG-4 {
PADDING-RIGHT: 1.5REM !IMPORTANT;
}

.PS-LG-5 {
PADDING-RIGHT: 3REM !IMPORTANT;
}
}
@MEDIA (MIN-WIDTH: 1200PX) {
.D-XL-INLINE {
DISPLAY: INLINE !IMPORTANT;
}

.D-XL-INLINE-BLOCK {
DISPLAY: INLINE-BLOCK !IMPORTANT;
}

.D-XL-BLOCK {
DISPLAY: BLOCK !IMPORTANT;
}

.D-XL-GRID {
DISPLAY: GRID !IMPORTANT;
}

.D-XL-TABLE {
DISPLAY: TABLE !IMPORTANT;
}

.D-XL-TABLE-ROW {
DISPLAY: TABLE-ROW !IMPORTANT;
}

489
STI College Naga
.D-XL-TABLE-CELL {
DISPLAY: TABLE-CELL !IMPORTANT;
}

.D-XL-FLEX {
DISPLAY: FLEX !IMPORTANT;
}

.D-XL-INLINE-FLEX {
DISPLAY: INLINE-FLEX !IMPORTANT;
}

.D-XL-NONE {
DISPLAY: NONE !IMPORTANT;
}

.FLEX-XL-FILL {
FLEX: 1 1 AUTO !IMPORTANT;
}

.FLEX-XL-ROW {
FLEX-DIRECTION: ROW !IMPORTANT;
}

.FLEX-XL-COLUMN {
FLEX-DIRECTION: COLUMN !IMPORTANT;
}

.FLEX-XL-ROW-REVERSE {
FLEX-DIRECTION: ROW-REVERSE !IMPORTANT;
}

.FLEX-XL-COLUMN-REVERSE {
FLEX-DIRECTION: COLUMN-REVERSE !IMPORTANT;
}

.FLEX-XL-GROW-0 {
FLEX-GROW: 0 !IMPORTANT;
}

.FLEX-XL-GROW-1 {
FLEX-GROW: 1 !IMPORTANT;
}

.FLEX-XL-SHRINK-0 {

490
STI College Naga
FLEX-SHRINK: 0 !IMPORTANT;
}

.FLEX-XL-SHRINK-1 {
FLEX-SHRINK: 1 !IMPORTANT;
}

.FLEX-XL-WRAP {
FLEX-WRAP: WRAP !IMPORTANT;
}

.FLEX-XL-NOWRAP {
FLEX-WRAP: NOWRAP !IMPORTANT;
}

.FLEX-XL-WRAP-REVERSE {
FLEX-WRAP: WRAP-REVERSE !IMPORTANT;
}

.JUSTIFY-CONTENT-XL-START {
JUSTIFY-CONTENT: FLEX-START !IMPORTANT;
}

.JUSTIFY-CONTENT-XL-END {
JUSTIFY-CONTENT: FLEX-END !IMPORTANT;
}

.JUSTIFY-CONTENT-XL-CENTER {
JUSTIFY-CONTENT: CENTER !IMPORTANT;
}

.JUSTIFY-CONTENT-XL-BETWEEN {
JUSTIFY-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.JUSTIFY-CONTENT-XL-AROUND {
JUSTIFY-CONTENT: SPACE-AROUND !IMPORTANT;
}

.JUSTIFY-CONTENT-XL-EVENLY {
JUSTIFY-CONTENT: SPACE-EVENLY !IMPORTANT;
}

.ALIGN-ITEMS-XL-START {
ALIGN-ITEMS: FLEX-START !IMPORTANT;
}

491
STI College Naga
.ALIGN-ITEMS-XL-END {
ALIGN-ITEMS: FLEX-END !IMPORTANT;
}

.ALIGN-ITEMS-XL-CENTER {
ALIGN-ITEMS: CENTER !IMPORTANT;
}

.ALIGN-ITEMS-XL-BASELINE {
ALIGN-ITEMS: BASELINE !IMPORTANT;
}

.ALIGN-ITEMS-XL-STRETCH {
ALIGN-ITEMS: STRETCH !IMPORTANT;
}

.ALIGN-CONTENT-XL-START {
ALIGN-CONTENT: FLEX-START !IMPORTANT;
}

.ALIGN-CONTENT-XL-END {
ALIGN-CONTENT: FLEX-END !IMPORTANT;
}

.ALIGN-CONTENT-XL-CENTER {
ALIGN-CONTENT: CENTER !IMPORTANT;
}

.ALIGN-CONTENT-XL-BETWEEN {
ALIGN-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.ALIGN-CONTENT-XL-AROUND {
ALIGN-CONTENT: SPACE-AROUND !IMPORTANT;
}

.ALIGN-CONTENT-XL-STRETCH {
ALIGN-CONTENT: STRETCH !IMPORTANT;
}

.ALIGN-SELF-XL-AUTO {
ALIGN-SELF: AUTO !IMPORTANT;
}

.ALIGN-SELF-XL-START {

492
STI College Naga
ALIGN-SELF: FLEX-START !IMPORTANT;
}

.ALIGN-SELF-XL-END {
ALIGN-SELF: FLEX-END !IMPORTANT;
}

.ALIGN-SELF-XL-CENTER {
ALIGN-SELF: CENTER !IMPORTANT;
}

.ALIGN-SELF-XL-BASELINE {
ALIGN-SELF: BASELINE !IMPORTANT;
}

.ALIGN-SELF-XL-STRETCH {
ALIGN-SELF: STRETCH !IMPORTANT;
}

.ORDER-XL-FIRST {
ORDER: -1 !IMPORTANT;
}

.ORDER-XL-0 {
ORDER: 0 !IMPORTANT;
}

.ORDER-XL-1 {
ORDER: 1 !IMPORTANT;
}

.ORDER-XL-2 {
ORDER: 2 !IMPORTANT;
}

.ORDER-XL-3 {
ORDER: 3 !IMPORTANT;
}

.ORDER-XL-4 {
ORDER: 4 !IMPORTANT;
}

.ORDER-XL-5 {
ORDER: 5 !IMPORTANT;
}

493
STI College Naga
.ORDER-XL-LAST {
ORDER: 6 !IMPORTANT;
}

.M-XL-0 {
MARGIN: 0 !IMPORTANT;
}

.M-XL-1 {
MARGIN: 0.25REM !IMPORTANT;
}

.M-XL-2 {
MARGIN: 0.5REM !IMPORTANT;
}

.M-XL-3 {
MARGIN: 1REM !IMPORTANT;
}

.M-XL-4 {
MARGIN: 1.5REM !IMPORTANT;
}

.M-XL-5 {
MARGIN: 3REM !IMPORTANT;
}

.M-XL-AUTO {
MARGIN: AUTO !IMPORTANT;
}

.MX-XL-0 {
MARGIN-LEFT: 0 !IMPORTANT;
MARGIN-RIGHT: 0 !IMPORTANT;
}

.MX-XL-1 {
MARGIN-LEFT: 0.25REM !IMPORTANT;
MARGIN-RIGHT: 0.25REM !IMPORTANT;
}

.MX-XL-2 {
MARGIN-LEFT: 0.5REM !IMPORTANT;
MARGIN-RIGHT: 0.5REM !IMPORTANT;

494
STI College Naga
}

.MX-XL-3 {
MARGIN-LEFT: 1REM !IMPORTANT;
MARGIN-RIGHT: 1REM !IMPORTANT;
}

.MX-XL-4 {
MARGIN-LEFT: 1.5REM !IMPORTANT;
MARGIN-RIGHT: 1.5REM !IMPORTANT;
}

.MX-XL-5 {
MARGIN-LEFT: 3REM !IMPORTANT;
MARGIN-RIGHT: 3REM !IMPORTANT;
}

.MX-XL-AUTO {
MARGIN-LEFT: AUTO !IMPORTANT;
MARGIN-RIGHT: AUTO !IMPORTANT;
}

.MY-XL-0 {
MARGIN-TOP: 0 !IMPORTANT;
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MY-XL-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MY-XL-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MY-XL-3 {
MARGIN-TOP: 1REM !IMPORTANT;
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MY-XL-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

495
STI College Naga
.MY-XL-5 {
MARGIN-TOP: 3REM !IMPORTANT;
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MY-XL-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MT-XL-0 {
MARGIN-TOP: 0 !IMPORTANT;
}

.MT-XL-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
}

.MT-XL-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
}

.MT-XL-3 {
MARGIN-TOP: 1REM !IMPORTANT;
}

.MT-XL-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
}

.MT-XL-5 {
MARGIN-TOP: 3REM !IMPORTANT;
}

.MT-XL-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
}

.ME-XL-0 {
MARGIN-LEFT: 0 !IMPORTANT;
}

.ME-XL-1 {
MARGIN-LEFT: 0.25REM !IMPORTANT;
}

496
STI College Naga
.ME-XL-2 {
MARGIN-LEFT: 0.5REM !IMPORTANT;
}

.ME-XL-3 {
MARGIN-LEFT: 1REM !IMPORTANT;
}

.ME-XL-4 {
MARGIN-LEFT: 1.5REM !IMPORTANT;
}

.ME-XL-5 {
MARGIN-LEFT: 3REM !IMPORTANT;
}

.ME-XL-AUTO {
MARGIN-LEFT: AUTO !IMPORTANT;
}

.MB-XL-0 {
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MB-XL-1 {
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MB-XL-2 {
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MB-XL-3 {
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MB-XL-4 {
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MB-XL-5 {
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MB-XL-AUTO {

497
STI College Naga
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MS-XL-0 {
MARGIN-RIGHT: 0 !IMPORTANT;
}

.MS-XL-1 {
MARGIN-RIGHT: 0.25REM !IMPORTANT;
}

.MS-XL-2 {
MARGIN-RIGHT: 0.5REM !IMPORTANT;
}

.MS-XL-3 {
MARGIN-RIGHT: 1REM !IMPORTANT;
}

.MS-XL-4 {
MARGIN-RIGHT: 1.5REM !IMPORTANT;
}

.MS-XL-5 {
MARGIN-RIGHT: 3REM !IMPORTANT;
}

.MS-XL-AUTO {
MARGIN-RIGHT: AUTO !IMPORTANT;
}

.P-XL-0 {
PADDING: 0 !IMPORTANT;
}

.P-XL-1 {
PADDING: 0.25REM !IMPORTANT;
}

.P-XL-2 {
PADDING: 0.5REM !IMPORTANT;
}

.P-XL-3 {
PADDING: 1REM !IMPORTANT;
}

498
STI College Naga
.P-XL-4 {
PADDING: 1.5REM !IMPORTANT;
}

.P-XL-5 {
PADDING: 3REM !IMPORTANT;
}

.PX-XL-0 {
PADDING-LEFT: 0 !IMPORTANT;
PADDING-RIGHT: 0 !IMPORTANT;
}

.PX-XL-1 {
PADDING-LEFT: 0.25REM !IMPORTANT;
PADDING-RIGHT: 0.25REM !IMPORTANT;
}

.PX-XL-2 {
PADDING-LEFT: 0.5REM !IMPORTANT;
PADDING-RIGHT: 0.5REM !IMPORTANT;
}

.PX-XL-3 {
PADDING-LEFT: 1REM !IMPORTANT;
PADDING-RIGHT: 1REM !IMPORTANT;
}

.PX-XL-4 {
PADDING-LEFT: 1.5REM !IMPORTANT;
PADDING-RIGHT: 1.5REM !IMPORTANT;
}

.PX-XL-5 {
PADDING-LEFT: 3REM !IMPORTANT;
PADDING-RIGHT: 3REM !IMPORTANT;
}

.PY-XL-0 {
PADDING-TOP: 0 !IMPORTANT;
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PY-XL-1 {
PADDING-TOP: 0.25REM !IMPORTANT;

499
STI College Naga
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PY-XL-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PY-XL-3 {
PADDING-TOP: 1REM !IMPORTANT;
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PY-XL-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PY-XL-5 {
PADDING-TOP: 3REM !IMPORTANT;
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PT-XL-0 {
PADDING-TOP: 0 !IMPORTANT;
}

.PT-XL-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
}

.PT-XL-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
}

.PT-XL-3 {
PADDING-TOP: 1REM !IMPORTANT;
}

.PT-XL-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
}

.PT-XL-5 {
PADDING-TOP: 3REM !IMPORTANT;
}

500
STI College Naga
.PE-XL-0 {
PADDING-LEFT: 0 !IMPORTANT;
}

.PE-XL-1 {
PADDING-LEFT: 0.25REM !IMPORTANT;
}

.PE-XL-2 {
PADDING-LEFT: 0.5REM !IMPORTANT;
}

.PE-XL-3 {
PADDING-LEFT: 1REM !IMPORTANT;
}

.PE-XL-4 {
PADDING-LEFT: 1.5REM !IMPORTANT;
}

.PE-XL-5 {
PADDING-LEFT: 3REM !IMPORTANT;
}

.PB-XL-0 {
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PB-XL-1 {
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PB-XL-2 {
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PB-XL-3 {
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PB-XL-4 {
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PB-XL-5 {

501
STI College Naga
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PS-XL-0 {
PADDING-RIGHT: 0 !IMPORTANT;
}

.PS-XL-1 {
PADDING-RIGHT: 0.25REM !IMPORTANT;
}

.PS-XL-2 {
PADDING-RIGHT: 0.5REM !IMPORTANT;
}

.PS-XL-3 {
PADDING-RIGHT: 1REM !IMPORTANT;
}

.PS-XL-4 {
PADDING-RIGHT: 1.5REM !IMPORTANT;
}

.PS-XL-5 {
PADDING-RIGHT: 3REM !IMPORTANT;
}
}
@MEDIA (MIN-WIDTH: 1400PX) {
.D-XXL-INLINE {
DISPLAY: INLINE !IMPORTANT;
}

.D-XXL-INLINE-BLOCK {
DISPLAY: INLINE-BLOCK !IMPORTANT;
}

.D-XXL-BLOCK {
DISPLAY: BLOCK !IMPORTANT;
}

.D-XXL-GRID {
DISPLAY: GRID !IMPORTANT;
}

.D-XXL-TABLE {
DISPLAY: TABLE !IMPORTANT;

502
STI College Naga
}

.D-XXL-TABLE-ROW {
DISPLAY: TABLE-ROW !IMPORTANT;
}

.D-XXL-TABLE-CELL {
DISPLAY: TABLE-CELL !IMPORTANT;
}

.D-XXL-FLEX {
DISPLAY: FLEX !IMPORTANT;
}

.D-XXL-INLINE-FLEX {
DISPLAY: INLINE-FLEX !IMPORTANT;
}

.D-XXL-NONE {
DISPLAY: NONE !IMPORTANT;
}

.FLEX-XXL-FILL {
FLEX: 1 1 AUTO !IMPORTANT;
}

.FLEX-XXL-ROW {
FLEX-DIRECTION: ROW !IMPORTANT;
}

.FLEX-XXL-COLUMN {
FLEX-DIRECTION: COLUMN !IMPORTANT;
}

.FLEX-XXL-ROW-REVERSE {
FLEX-DIRECTION: ROW-REVERSE !IMPORTANT;
}

.FLEX-XXL-COLUMN-REVERSE {
FLEX-DIRECTION: COLUMN-REVERSE !IMPORTANT;
}

.FLEX-XXL-GROW-0 {
FLEX-GROW: 0 !IMPORTANT;
}

503
STI College Naga
.FLEX-XXL-GROW-1 {
FLEX-GROW: 1 !IMPORTANT;
}

.FLEX-XXL-SHRINK-0 {
FLEX-SHRINK: 0 !IMPORTANT;
}

.FLEX-XXL-SHRINK-1 {
FLEX-SHRINK: 1 !IMPORTANT;
}

.FLEX-XXL-WRAP {
FLEX-WRAP: WRAP !IMPORTANT;
}

.FLEX-XXL-NOWRAP {
FLEX-WRAP: NOWRAP !IMPORTANT;
}

.FLEX-XXL-WRAP-REVERSE {
FLEX-WRAP: WRAP-REVERSE !IMPORTANT;
}

.JUSTIFY-CONTENT-XXL-START {
JUSTIFY-CONTENT: FLEX-START !IMPORTANT;
}

.JUSTIFY-CONTENT-XXL-END {
JUSTIFY-CONTENT: FLEX-END !IMPORTANT;
}

.JUSTIFY-CONTENT-XXL-CENTER {
JUSTIFY-CONTENT: CENTER !IMPORTANT;
}

.JUSTIFY-CONTENT-XXL-BETWEEN {
JUSTIFY-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.JUSTIFY-CONTENT-XXL-AROUND {
JUSTIFY-CONTENT: SPACE-AROUND !IMPORTANT;
}

.JUSTIFY-CONTENT-XXL-EVENLY {
JUSTIFY-CONTENT: SPACE-EVENLY !IMPORTANT;

504
STI College Naga
}

.ALIGN-ITEMS-XXL-START {
ALIGN-ITEMS: FLEX-START !IMPORTANT;
}

.ALIGN-ITEMS-XXL-END {
ALIGN-ITEMS: FLEX-END !IMPORTANT;
}

.ALIGN-ITEMS-XXL-CENTER {
ALIGN-ITEMS: CENTER !IMPORTANT;
}

.ALIGN-ITEMS-XXL-BASELINE {
ALIGN-ITEMS: BASELINE !IMPORTANT;
}

.ALIGN-ITEMS-XXL-STRETCH {
ALIGN-ITEMS: STRETCH !IMPORTANT;
}

.ALIGN-CONTENT-XXL-START {
ALIGN-CONTENT: FLEX-START !IMPORTANT;
}

.ALIGN-CONTENT-XXL-END {
ALIGN-CONTENT: FLEX-END !IMPORTANT;
}

.ALIGN-CONTENT-XXL-CENTER {
ALIGN-CONTENT: CENTER !IMPORTANT;
}

.ALIGN-CONTENT-XXL-BETWEEN {
ALIGN-CONTENT: SPACE-BETWEEN !IMPORTANT;
}

.ALIGN-CONTENT-XXL-AROUND {
ALIGN-CONTENT: SPACE-AROUND !IMPORTANT;
}

.ALIGN-CONTENT-XXL-STRETCH {
ALIGN-CONTENT: STRETCH !IMPORTANT;
}

505
STI College Naga
.ALIGN-SELF-XXL-AUTO {
ALIGN-SELF: AUTO !IMPORTANT;
}

.ALIGN-SELF-XXL-START {
ALIGN-SELF: FLEX-START !IMPORTANT;
}

.ALIGN-SELF-XXL-END {
ALIGN-SELF: FLEX-END !IMPORTANT;
}

.ALIGN-SELF-XXL-CENTER {
ALIGN-SELF: CENTER !IMPORTANT;
}

.ALIGN-SELF-XXL-BASELINE {
ALIGN-SELF: BASELINE !IMPORTANT;
}

.ALIGN-SELF-XXL-STRETCH {
ALIGN-SELF: STRETCH !IMPORTANT;
}

.ORDER-XXL-FIRST {
ORDER: -1 !IMPORTANT;
}

.ORDER-XXL-0 {
ORDER: 0 !IMPORTANT;
}

.ORDER-XXL-1 {
ORDER: 1 !IMPORTANT;
}

.ORDER-XXL-2 {
ORDER: 2 !IMPORTANT;
}

.ORDER-XXL-3 {
ORDER: 3 !IMPORTANT;
}

.ORDER-XXL-4 {
ORDER: 4 !IMPORTANT;

506
STI College Naga
}

.ORDER-XXL-5 {
ORDER: 5 !IMPORTANT;
}

.ORDER-XXL-LAST {
ORDER: 6 !IMPORTANT;
}

.M-XXL-0 {
MARGIN: 0 !IMPORTANT;
}

.M-XXL-1 {
MARGIN: 0.25REM !IMPORTANT;
}

.M-XXL-2 {
MARGIN: 0.5REM !IMPORTANT;
}

.M-XXL-3 {
MARGIN: 1REM !IMPORTANT;
}

.M-XXL-4 {
MARGIN: 1.5REM !IMPORTANT;
}

.M-XXL-5 {
MARGIN: 3REM !IMPORTANT;
}

.M-XXL-AUTO {
MARGIN: AUTO !IMPORTANT;
}

.MX-XXL-0 {
MARGIN-LEFT: 0 !IMPORTANT;
MARGIN-RIGHT: 0 !IMPORTANT;
}

.MX-XXL-1 {
MARGIN-LEFT: 0.25REM !IMPORTANT;
MARGIN-RIGHT: 0.25REM !IMPORTANT;

507
STI College Naga
}

.MX-XXL-2 {
MARGIN-LEFT: 0.5REM !IMPORTANT;
MARGIN-RIGHT: 0.5REM !IMPORTANT;
}

.MX-XXL-3 {
MARGIN-LEFT: 1REM !IMPORTANT;
MARGIN-RIGHT: 1REM !IMPORTANT;
}

.MX-XXL-4 {
MARGIN-LEFT: 1.5REM !IMPORTANT;
MARGIN-RIGHT: 1.5REM !IMPORTANT;
}

.MX-XXL-5 {
MARGIN-LEFT: 3REM !IMPORTANT;
MARGIN-RIGHT: 3REM !IMPORTANT;
}

.MX-XXL-AUTO {
MARGIN-LEFT: AUTO !IMPORTANT;
MARGIN-RIGHT: AUTO !IMPORTANT;
}

.MY-XXL-0 {
MARGIN-TOP: 0 !IMPORTANT;
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MY-XXL-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MY-XXL-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MY-XXL-3 {
MARGIN-TOP: 1REM !IMPORTANT;
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

508
STI College Naga
.MY-XXL-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

.MY-XXL-5 {
MARGIN-TOP: 3REM !IMPORTANT;
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MY-XXL-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MT-XXL-0 {
MARGIN-TOP: 0 !IMPORTANT;
}

.MT-XXL-1 {
MARGIN-TOP: 0.25REM !IMPORTANT;
}

.MT-XXL-2 {
MARGIN-TOP: 0.5REM !IMPORTANT;
}

.MT-XXL-3 {
MARGIN-TOP: 1REM !IMPORTANT;
}

.MT-XXL-4 {
MARGIN-TOP: 1.5REM !IMPORTANT;
}

.MT-XXL-5 {
MARGIN-TOP: 3REM !IMPORTANT;
}

.MT-XXL-AUTO {
MARGIN-TOP: AUTO !IMPORTANT;
}

.ME-XXL-0 {
MARGIN-LEFT: 0 !IMPORTANT;

509
STI College Naga
}

.ME-XXL-1 {
MARGIN-LEFT: 0.25REM !IMPORTANT;
}

.ME-XXL-2 {
MARGIN-LEFT: 0.5REM !IMPORTANT;
}

.ME-XXL-3 {
MARGIN-LEFT: 1REM !IMPORTANT;
}

.ME-XXL-4 {
MARGIN-LEFT: 1.5REM !IMPORTANT;
}

.ME-XXL-5 {
MARGIN-LEFT: 3REM !IMPORTANT;
}

.ME-XXL-AUTO {
MARGIN-LEFT: AUTO !IMPORTANT;
}

.MB-XXL-0 {
MARGIN-BOTTOM: 0 !IMPORTANT;
}

.MB-XXL-1 {
MARGIN-BOTTOM: 0.25REM !IMPORTANT;
}

.MB-XXL-2 {
MARGIN-BOTTOM: 0.5REM !IMPORTANT;
}

.MB-XXL-3 {
MARGIN-BOTTOM: 1REM !IMPORTANT;
}

.MB-XXL-4 {
MARGIN-BOTTOM: 1.5REM !IMPORTANT;
}

510
STI College Naga
.MB-XXL-5 {
MARGIN-BOTTOM: 3REM !IMPORTANT;
}

.MB-XXL-AUTO {
MARGIN-BOTTOM: AUTO !IMPORTANT;
}

.MS-XXL-0 {
MARGIN-RIGHT: 0 !IMPORTANT;
}

.MS-XXL-1 {
MARGIN-RIGHT: 0.25REM !IMPORTANT;
}

.MS-XXL-2 {
MARGIN-RIGHT: 0.5REM !IMPORTANT;
}

.MS-XXL-3 {
MARGIN-RIGHT: 1REM !IMPORTANT;
}

.MS-XXL-4 {
MARGIN-RIGHT: 1.5REM !IMPORTANT;
}

.MS-XXL-5 {
MARGIN-RIGHT: 3REM !IMPORTANT;
}

.MS-XXL-AUTO {
MARGIN-RIGHT: AUTO !IMPORTANT;
}

.P-XXL-0 {
PADDING: 0 !IMPORTANT;
}

.P-XXL-1 {
PADDING: 0.25REM !IMPORTANT;
}

.P-XXL-2 {
PADDING: 0.5REM !IMPORTANT;

511
STI College Naga
}

.P-XXL-3 {
PADDING: 1REM !IMPORTANT;
}

.P-XXL-4 {
PADDING: 1.5REM !IMPORTANT;
}

.P-XXL-5 {
PADDING: 3REM !IMPORTANT;
}

.PX-XXL-0 {
PADDING-LEFT: 0 !IMPORTANT;
PADDING-RIGHT: 0 !IMPORTANT;
}

.PX-XXL-1 {
PADDING-LEFT: 0.25REM !IMPORTANT;
PADDING-RIGHT: 0.25REM !IMPORTANT;
}

.PX-XXL-2 {
PADDING-LEFT: 0.5REM !IMPORTANT;
PADDING-RIGHT: 0.5REM !IMPORTANT;
}

.PX-XXL-3 {
PADDING-LEFT: 1REM !IMPORTANT;
PADDING-RIGHT: 1REM !IMPORTANT;
}

.PX-XXL-4 {
PADDING-LEFT: 1.5REM !IMPORTANT;
PADDING-RIGHT: 1.5REM !IMPORTANT;
}

.PX-XXL-5 {
PADDING-LEFT: 3REM !IMPORTANT;
PADDING-RIGHT: 3REM !IMPORTANT;
}

.PY-XXL-0 {
PADDING-TOP: 0 !IMPORTANT;

512
STI College Naga
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PY-XXL-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PY-XXL-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PY-XXL-3 {
PADDING-TOP: 1REM !IMPORTANT;
PADDING-BOTTOM: 1REM !IMPORTANT;
}

.PY-XXL-4 {
PADDING-TOP: 1.5REM !IMPORTANT;
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PY-XXL-5 {
PADDING-TOP: 3REM !IMPORTANT;
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PT-XXL-0 {
PADDING-TOP: 0 !IMPORTANT;
}

.PT-XXL-1 {
PADDING-TOP: 0.25REM !IMPORTANT;
}

.PT-XXL-2 {
PADDING-TOP: 0.5REM !IMPORTANT;
}

.PT-XXL-3 {
PADDING-TOP: 1REM !IMPORTANT;
}

.PT-XXL-4 {
PADDING-TOP: 1.5REM !IMPORTANT;

513
STI College Naga
}

.PT-XXL-5 {
PADDING-TOP: 3REM !IMPORTANT;
}

.PE-XXL-0 {
PADDING-LEFT: 0 !IMPORTANT;
}

.PE-XXL-1 {
PADDING-LEFT: 0.25REM !IMPORTANT;
}

.PE-XXL-2 {
PADDING-LEFT: 0.5REM !IMPORTANT;
}

.PE-XXL-3 {
PADDING-LEFT: 1REM !IMPORTANT;
}

.PE-XXL-4 {
PADDING-LEFT: 1.5REM !IMPORTANT;
}

.PE-XXL-5 {
PADDING-LEFT: 3REM !IMPORTANT;
}

.PB-XXL-0 {
PADDING-BOTTOM: 0 !IMPORTANT;
}

.PB-XXL-1 {
PADDING-BOTTOM: 0.25REM !IMPORTANT;
}

.PB-XXL-2 {
PADDING-BOTTOM: 0.5REM !IMPORTANT;
}

.PB-XXL-3 {
PADDING-BOTTOM: 1REM !IMPORTANT;
}

514
STI College Naga
.PB-XXL-4 {
PADDING-BOTTOM: 1.5REM !IMPORTANT;
}

.PB-XXL-5 {
PADDING-BOTTOM: 3REM !IMPORTANT;
}

.PS-XXL-0 {
PADDING-RIGHT: 0 !IMPORTANT;
}

.PS-XXL-1 {
PADDING-RIGHT: 0.25REM !IMPORTANT;
}

.PS-XXL-2 {
PADDING-RIGHT: 0.5REM !IMPORTANT;
}

.PS-XXL-3 {
PADDING-RIGHT: 1REM !IMPORTANT;
}

.PS-XXL-4 {
PADDING-RIGHT: 1.5REM !IMPORTANT;
}

.PS-XXL-5 {
PADDING-RIGHT: 3REM !IMPORTANT;
}
}
@MEDIA PRINT {
.D-PRINT-INLINE {
DISPLAY: INLINE !IMPORTANT;
}

.D-PRINT-INLINE-BLOCK {
DISPLAY: INLINE-BLOCK !IMPORTANT;
}

.D-PRINT-BLOCK {
DISPLAY: BLOCK !IMPORTANT;
}

.D-PRINT-GRID {

515
STI College Naga
DISPLAY: GRID !IMPORTANT;
}

.D-PRINT-TABLE {
DISPLAY: TABLE !IMPORTANT;
}

.D-PRINT-TABLE-ROW {
DISPLAY: TABLE-ROW !IMPORTANT;
}

.D-PRINT-TABLE-CELL {
DISPLAY: TABLE-CELL !IMPORTANT;
}

.D-PRINT-FLEX {
DISPLAY: FLEX !IMPORTANT;
}

.D-PRINT-INLINE-FLEX {
DISPLAY: INLINE-FLEX !IMPORTANT;
}

.D-PRINT-NONE {
DISPLAY: NONE !IMPORTANT;
}
}

516
STI College Naga
VALUATION TOOL/TEST DOCUMENTS

Demonstrating the system to San Agustin Elementary School Teacher/s

517
STI College Naga
Gathering data from teachers of San Agustin Elementary School

User Testing for Parents

518
STI College Naga
APPENDIX D.

SAMPLE INPUT/OUTPUT/REPORTS

Survey Results from Teachers of San Agustin Elementary School

519
STI College Naga
-

520
STI College Naga
521
STI College Naga
Survey Results from Parents of San Agustin Elementary School

522
STI College Naga
User Interface Design

Figure 1: ADMIN LOGIN PAGE

Figure 2: ADMIN DASHBOARD

523
STI College Naga
Figure 3: CREATE / MANAGE TEACHERS

Figure 4: CREATE / MANAGE STUDENTS

524
STI College Naga
Figure 5: GENERATE QR CODE

525
STI College Naga
Figure 6: MANAGE SUBJECTS

Figure 7: CREATE ANNOUCEMENTS

526
STI College Naga
Figure 8: MANAGE SCHEDULES

Figure 9: ADMIN INFORMATION

527
STI College Naga
Figure 10: LOG OUT

528
STI College Naga
FIGURE 1 : TEACHER LOG IN PAGE

FIGURE 2: TEACHER DASHBOARD

529
STI College Naga
FIGURE 3: STUDENT LIST

FIGURE 4: SEND MESSAGE TO PARENT ( This one is zoomed to view all the UI)

530
STI College Naga
FIGURE 5: QR CODE SCANNER

FIGURE 6: QR CODE SCANNED ATTENDANCE

531
STI College Naga
FIGURE 7: CREATE / VIEW ANNOUCEMENTS

FIGURE 8: MANAGE SCHEDULES

532
STI College Naga
FIGURE 9: UPLOAD MODULES

FIGURE 10: UPLOAD NOTES/ASSIGNMENT

533
STI College Naga
FIGURE 11: UPLOADED ASSIGNMENT

FIGURE 12: UPLOADING MARKS

534
STI College Naga
FIGURE 13: PASS OR FAILED MARKS (green indicates pass while red indicates failed)

FIGURE 14: TEACHERS’ PROFILE

535
STI College Naga
FIGURE 15: LOG OUT

536
STI College Naga
FIGURE 1: LOG IN (USER ROLE – PARENT)

FIGURE 2: PARENTS DASHBOARD

537
STI College Naga
FIGURE 3: STUDENTS’ CLASS SCHEDULES

FIGURE 4: PASS OR FAILED SCORE (ACTIVITIES, QUIZ,ETC…)

538
STI College Naga
FIGURE 5: MODULES or E-LEARNING MATERIALS (E-LMs)

FIGURE 6: CHANGE PASSWORD

539
STI College Naga
FIGURE 7: TOGGLE BUTTON (DARK MODE)

540
STI College Naga
APPENDIX E.

ADMIN/TEACHER USER’S GUIDE

How to Login an Account in EMIS?

1. Launch the Website:

● Open a web browser on your computer or laptop.
● Enter the URL of the EMIS system in the address bar to reach the login page.

2. Login with Credentials:

● On the login page, enter the email and password provided by the system
administrator or the researcher.
● The credentials are typically created in advance for your account.
● After entering your details, click on the Login button to access the admin
dashboard.

3. Forgot Password:
● If you have trouble logging in or forget your password, click on the Forgot
Password link.
● Follow the instructions to reset your password, which may involve verifying your
email address.

4. Successful Login:
● Upon logging in successfully, you will be directed to the Admin Dashboard,
where you can perform administrative tasks such as managing user accounts,
viewing system reports, and configuring system settings.

5. Logging Out:
● To log out of your account, click the three dots in the upper right corner then,
click logout.

541
STI College Naga
CERTIFICATE
OF PROOFREADING

This document certifies that the capstone project manuscript listed below has been

viewed and proofread for appropriate English language usage, grammar, punctuation, and

spelling by a professional English – speaking editor. Thus, recommended for acceptance

and approval.

MANUSCRIPT TITLE

“EMIS: A Web-based Application with QR Attendance Integration

for San Agustin Elementary School”

AUTHORS

SABEROLA, JAY ANTHONY M.

NIEVA, ANGELA M.
LOTIVIO, KARLA L.
DE LEON, LALAINE A.

DATE ISSUED

January 7, 2025

Signed:

AGNES T. SABEROLA, MAED

Teacher III

542
STI College Naga
PERSONAL TECHNICAL VITAE

Curriculum Vitae of
LALAINE A. DE LEON
31- 1, Phase 1, Villa Grande Homes Subdivision, Concepcion Grande, Naga City

09494865377

EDUCATIONAL BACKGROUND
Level Inclusive Dates Name of school/ Institution
Tertiary Currently 4th yr STI College Naga
Vocational/Technical July, 2021 STI Ortigas Cainta
High School March,2019 King Thomas Learning Academy Inc.
Elementary March,2015 North Villazar Elementary School

TRAININGS, SEMINARS, OR WORKSHOPS ATTENDED

Inclusive Title of Training, Seminar, or Workshop
Dates
May, 2024 DICT Caravan STI Naga
January, 2024 SAP Business One
March, 2023 SAP Business One

543
STI College Naga
Curriculum Vitae of
KARLA LIEZEL L. LOTIVIO
#097, Bagadion St., Libod II, Libmanan, Camarines Sur
[email protected]
09606884076

EDUCATIONAL BACKGROUND
Level Inclusive Dates Name of school/ Institution
Tertiary Currently 4th yr STI College Naga
Senior High School 2019-2021 Bicol Central Academy
High School 2018-2019 Bicol Central Academy
Elementary 2013-2014 San Juan Elementary School

PROFESSIONAL OR VOLUNTEER EXPERIENCE

Nature of Experience/ Name and Address of Company
Inclusive Dates
Job Title or Organization
January 7, Work Immersion Municipal Planning and
2020- Development Coordinator

January 17, (Bookkeeper/encoder) Bagumbayan, Libmanan,

2020 Camarines Sur

TRAININGS, SEMINARS, OR WORKSHOPS ATTENDED

Inclusive Dates Title of Training, Seminar, or Workshop
May, 22, 2024 DICT Caravan STI Naga
Nov 2024 DICT: 5G Mobile Networks and Artificial Intelligence
February 23, 2024 National Youth Convention
January 2023 SAP Basic
March 2023 Sap Basic
June 17, 2022 System Administration

544
STI College Naga
Curriculum Vitae of
ANGELA M. NIEVA
Zone 2, Veneracion Pamplona Camarines Sur
[email protected]
09567206259

EDUCATIONAL BACKGROUND
Level Inclusive Dates Name of school/ Institution
Tertiary currently 4th year STI College Naga
Vocational/Technical 2019-2021 STI College Naga
High School 2014-2019 Don Mariano C. Veneracion NHS
Elementary 2013-2014 Taguilid Elementary School

TRAININGS, SEMINARS, OR WORKSHOPS ATTENDED

Inclusive Dates Title of Training, Seminar, or Workshop

May 2024 DICT Caravan STI Naga
Nov 2024 DICT: 5G Mobile Networks and Artificial Intelligence.
Feb 2024 National Youth Convention
January 2023 SAP Business One
March 2023 SAP Business One
June 2022 System Administration

545
STI College Naga
Curriculum Vitae of
JAY ANTHONY M. SABEROLA
Zone 7, San Jose Pili Camarines Sur
[email protected]

EDUCATIONAL BACKGROUND
Level Inclusive Dates Name of school/ Institution
Tertiary Currently 4th STI College Naga
year
Vocational/Technical 2019-2021 STI College Naga
High School 2014-2019 San Jose Pili National High School
Elementary 2013-2014 San Isidro Elementary School

TRAININGS, SEMINARS, OR WORKSHOPS ATTENDED

Inclusive Title of Training, Seminar, or Workshop

Dates
May 2024 DICT Caravan STI Naga
Nov 2024 DICT: 5G Mobile Networks and Artificial Intelligence.
Feb 2024 National Youth Convention
January 2023 SAP Business One
March 2023 SAP Business One
June 2022 System Administration

546
STI College Naga
REFERENCES

Mansyuri, U., Hamdan, H., Arief, R., Safaatulloh, A., & Anindya, A. (2024). Audit and
Evaluation of the Online Information System Application at Madrasah Ibtidaiyah Negeri
(MIN): Case Study of State Islamic Elementery School . ARRUS Journal of Engineering
and Technology, 4(1), 118-125. https://doi.org/10.35877/jetech2797.

Emily Sing Kiang Siew, Zhi Yan Chong, Sah Nah Sze, & Richki Hardi. (2023).
Streamlining Attendance Management in Education: A Web-Based System Combining
Facial Recognition and QR Code Technology. Journal of Advanced Research in Applied
Sciences and Engineering Technology, 33(2), 198–208.
https://doi.org/10.37934/araset.33.2.198208

S. Neeharika, S. Ravikishan and M. Ankitha, "Development of an Android-Based

Attendance and Academic Progress Tracking System with Parent Interaction," 2023 6th
International Conference on Recent Trends in Advance Computing (ICRTAC), Chennai,
India, 2023, pp. 71-77. https://doi:10.1109/ICRTAC59277.2023.10480810.

Siti Nazleen Abdul Rabu (2019),"The Design and Implementation of Student Attendance
Tracking System Using QR Code Card",Carol I National Defence University Publishing
House,2019, pp.154-161.

https://www.ceeol.com/search/article-detail?id=783262

Rohma, S., Harapan, E., & Wardiah, D. (2020). The Influence of School-Based
Management and Teacher’s Professionalism toward Teacher’s Performance. Journal of
Social Work and Science Education, 1(1), 13-23. https://doi.org/10.52690/jswse.v1i1.6

Prestoza, M. J. (2024). Assessing remote learning’s feasibility: A comprehensive analysis

of Philippine public-school teachers’ use of learning management systems and blended

547
STI College Naga
learning approaches. Journal of Research, Policy & Practice of Teachers and Teacher
Education, 14(1), 21–27. https://doi.org/10.37134/jrpptte.vol14.1.3.2024.

Mbawala, J. J., Lestari, S., & Mwakalindile, A. (2024). The Impact of Educational
Management Information Systems (EMIS) on Effective School Management in Tanzania.
Jurnal Penelitian Pendidikan IPA, 10(4), 1878–1885.
https://doi.org/10.29303/jppipa.v10i4.7033.

Education Management and Information System (EMIS) for Public Elementary Schools.
(2018). International Journal of Scientific Research and Management (IJSRM), 6(06),
EL-2018. https://doi.org/10.18535/ijsrm/v6i6.el012.

QR Attender. (2024.). QR Attender. https://www.qrattender.com.

Rabu, S. N. (2019). The Design and Implementation of Student Attendance Tracking

System Using QR Code Card. Research Gate.
https://www.researchgate.net/publication/335015442_The_Design_and_Implementation_
of_Student_Attendance_Tracking_System_Using_QR_Code_Card

548
STI College Naga

Web Based Scholarship Management System
No ratings yet
Web Based Scholarship Management System
68 pages
Thesis
100% (2)
Thesis
79 pages
Coursera Supply Chain Planning Week 4 Assignment Answers
No ratings yet
Coursera Supply Chain Planning Week 4 Assignment Answers
6 pages
Online Examination System
100% (1)
Online Examination System
61 pages
Student Attendance Monitoring and Grading System
100% (1)
Student Attendance Monitoring and Grading System
8 pages
WBGS Overall Chap
No ratings yet
WBGS Overall Chap
39 pages
Attendance Monitoring System With Fingerprint Scanner and SMS Notification
No ratings yet
Attendance Monitoring System With Fingerprint Scanner and SMS Notification
19 pages
Capstone Project Updated
No ratings yet
Capstone Project Updated
23 pages
Design and Implementation of A Computerized
No ratings yet
Design and Implementation of A Computerized
84 pages
Peekabook Chapter 1 3
No ratings yet
Peekabook Chapter 1 3
99 pages
Capstone - Documents
No ratings yet
Capstone - Documents
10 pages
Equals Eto Na
No ratings yet
Equals Eto Na
17 pages
Unit 1
No ratings yet
Unit 1
9 pages
Neust
No ratings yet
Neust
9 pages
Cs Project
No ratings yet
Cs Project
21 pages
Teacher Information
No ratings yet
Teacher Information
14 pages
E Attendance System
75% (4)
E Attendance System
36 pages
IP MINI PROJECT REPORT FORMAT Revised PDF
No ratings yet
IP MINI PROJECT REPORT FORMAT Revised PDF
30 pages
Bernn 123
No ratings yet
Bernn 123
19 pages
Teacher Classroom Asstistant: Mini Project Report On
No ratings yet
Teacher Classroom Asstistant: Mini Project Report On
19 pages
Minor Project Final
No ratings yet
Minor Project Final
49 pages
APPROVAL SHEET
No ratings yet
APPROVAL SHEET
4 pages
Report
No ratings yet
Report
26 pages
E-Learning: A Project Report On
No ratings yet
E-Learning: A Project Report On
82 pages
Capstone Edited PDF
No ratings yet
Capstone Edited PDF
44 pages
Gas Management System
No ratings yet
Gas Management System
28 pages
Capstone Document JNS-UPDATED1
No ratings yet
Capstone Document JNS-UPDATED1
151 pages
Project For Online Examination System
60% (5)
Project For Online Examination System
47 pages
E Learning Project Report
61% (28)
E Learning Project Report
28 pages
CPP Rreport Final
No ratings yet
CPP Rreport Final
21 pages
Ama SHS Grading Alternative Registry Database
No ratings yet
Ama SHS Grading Alternative Registry Database
12 pages
MAY-TAMA-KAMI
No ratings yet
MAY-TAMA-KAMI
34 pages
Design and Implementation of Online Logbook For Students Esiwes
No ratings yet
Design and Implementation of Online Logbook For Students Esiwes
48 pages
STUDENT MANGEMENT 4 Copy
No ratings yet
STUDENT MANGEMENT 4 Copy
26 pages
Edu-Management System: A Major Project Report ON
No ratings yet
Edu-Management System: A Major Project Report ON
58 pages
Learned final report (1) (1)
No ratings yet
Learned final report (1) (1)
24 pages
STI La Union Thesis Sample
100% (4)
STI La Union Thesis Sample
53 pages
Project - Introduction
No ratings yet
Project - Introduction
18 pages
DIGIAMS
No ratings yet
DIGIAMS
28 pages
Project Document by Shekar 22222
No ratings yet
Project Document by Shekar 22222
56 pages
Final Networking Revised Paper
No ratings yet
Final Networking Revised Paper
38 pages
Engineering Instruction for High-Ability Learners in K-8 Classrooms
From Everand
Engineering Instruction for High-Ability Learners in K-8 Classrooms
Debbie Dailey
4.5/5 (15)
JM Title Defense
No ratings yet
JM Title Defense
3 pages
Vishal Chavare Capstone Project Report (Virtual Classroom)
No ratings yet
Vishal Chavare Capstone Project Report (Virtual Classroom)
18 pages
Online Examination System
100% (1)
Online Examination System
38 pages
PDF Rport File
No ratings yet
PDF Rport File
37 pages
Tes Proposal
No ratings yet
Tes Proposal
21 pages
Mentor Report
No ratings yet
Mentor Report
84 pages
Student Attendance Management System| Bishal_Baba_Maka |Report
No ratings yet
Student Attendance Management System| Bishal_Baba_Maka |Report
96 pages
Feasibility Study: Title Computerized Enrollment System
No ratings yet
Feasibility Study: Title Computerized Enrollment System
11 pages
DOC-20180427-WA0010
No ratings yet
DOC-20180427-WA0010
11 pages
Capstone Project Proposal Template
No ratings yet
Capstone Project Proposal Template
25 pages
FinalCapstoneProjectTemplate 1
No ratings yet
FinalCapstoneProjectTemplate 1
80 pages
Innovation Ko Project e Kwento
No ratings yet
Innovation Ko Project e Kwento
4 pages
The QIAT Companion: A Just-in-Time Resource for Implementing the Quality Indicators for Assistive Technology
From Everand
The QIAT Companion: A Just-in-Time Resource for Implementing the Quality Indicators for Assistive Technology
QIAT Leadership Team
No ratings yet
very-super-final-SAD-DOX
No ratings yet
very-super-final-SAD-DOX
47 pages
A CHMSC PRELIMINARY PAGES
No ratings yet
A CHMSC PRELIMINARY PAGES
11 pages
Capstone Project Document
No ratings yet
Capstone Project Document
204 pages
Intro, Problem, Current Tech Android Mobile and Web Based Student Assistance System
No ratings yet
Intro, Problem, Current Tech Android Mobile and Web Based Student Assistance System
15 pages
Project Proposal 2
No ratings yet
Project Proposal 2
3 pages
"Electricity Consumption Calculator ": G. S. College of Commerce & Economics Nagpur
No ratings yet
"Electricity Consumption Calculator ": G. S. College of Commerce & Economics Nagpur
71 pages
Scilab Book Akhilesh
No ratings yet
Scilab Book Akhilesh
96 pages
SGP.21-v3.0
No ratings yet
SGP.21-v3.0
145 pages
R2 10 10 Release Notes v01
No ratings yet
R2 10 10 Release Notes v01
33 pages
Oa8 MB 1002 E.bak PDF
100% (1)
Oa8 MB 1002 E.bak PDF
34 pages
BlackBerry - Global - Threat - Intelligence - Report 2023
No ratings yet
BlackBerry - Global - Threat - Intelligence - Report 2023
36 pages
Bank statement
No ratings yet
Bank statement
5 pages
Tcp/Ip Application Note: LPWA Module Series
No ratings yet
Tcp/Ip Application Note: LPWA Module Series
53 pages
When and Why Your Code Starts To Smell Bad (And Whether The Smells Go Away)
No ratings yet
When and Why Your Code Starts To Smell Bad (And Whether The Smells Go Away)
26 pages
SLCD .TW: HB140WX1-200 Preliminary Product Specification P0 For Samsung
No ratings yet
SLCD .TW: HB140WX1-200 Preliminary Product Specification P0 For Samsung
36 pages
Ethical Hacking Book
No ratings yet
Ethical Hacking Book
47 pages
MGT1107 Management Science Case 2
No ratings yet
MGT1107 Management Science Case 2
22 pages
NAUTIS Maritime Simulator Overview
No ratings yet
NAUTIS Maritime Simulator Overview
8 pages
T. Y. B. Tech Course - Compiler Design (CST305R1) : Department of Computer Science and Engineering School of Technology
No ratings yet
T. Y. B. Tech Course - Compiler Design (CST305R1) : Department of Computer Science and Engineering School of Technology
16 pages
Senior Data Engineer - Harvey Nash Technology
No ratings yet
Senior Data Engineer - Harvey Nash Technology
1 page
Natural Language Processing: Neural Question Answering
No ratings yet
Natural Language Processing: Neural Question Answering
37 pages
Hack An ELM327 Cable To Make An Arduino OBD2 Scanner - 3 Steps - Instructables
No ratings yet
Hack An ELM327 Cable To Make An Arduino OBD2 Scanner - 3 Steps - Instructables
5 pages
Sage UBS: Product Brochure
No ratings yet
Sage UBS: Product Brochure
12 pages
Log File Parallel Write - ORACLE DBA USEFUL INFORMATION
No ratings yet
Log File Parallel Write - ORACLE DBA USEFUL INFORMATION
3 pages
fhfhMOTOR VEHICLE LICENSING SYSTEM
No ratings yet
fhfhMOTOR VEHICLE LICENSING SYSTEM
75 pages
IMEI Check Iphone - Apple Serial Number Free Online Checker 3
No ratings yet
IMEI Check Iphone - Apple Serial Number Free Online Checker 3
1 page
Final CG Report Prashanth
No ratings yet
Final CG Report Prashanth
43 pages
Ampero Control - Online Manual - EN.1627955300367
No ratings yet
Ampero Control - Online Manual - EN.1627955300367
15 pages
NRB IT Policy
No ratings yet
NRB IT Policy
6 pages
cloud computing assignment
No ratings yet
cloud computing assignment
6 pages
COS3711 2021 OctNov Q
No ratings yet
COS3711 2021 OctNov Q
5 pages
Ethics in Information Technology, Second Edition: Ethics For IT Professionals and IT Users
No ratings yet
Ethics in Information Technology, Second Edition: Ethics For IT Professionals and IT Users
44 pages
Shrimantee Roy - Resume
No ratings yet
Shrimantee Roy - Resume
3 pages
Fault Detection in Solar PV
No ratings yet
Fault Detection in Solar PV
19 pages
Multronic e
No ratings yet
Multronic e
21 pages