results website for students

Here's a concise brief about this website:

Project Title: STEM G12 Results Portal

Work Type: Student Results Search & Display System (Frontend Web Application)

Description:

A modern, animated web portal for Grade 12 STEM students to search and view their academic results. Features a sleek dark-themed interface with smooth page transitions, real-time search functionality, and PDF download capability.

Key Features:

✅ 3-Page System:

Welcome page with animated logo

Search page with section selection (Math/Science)

Results display page with detailed information

✅ Search Functionality:

Seat number validation

Section-based filtering (Mathematics or Science)

Real-time error handling

Loading animations

✅ Results Display:

Student name (Arabic support)

Seat number

Total score with max score

Pass/Fail status with color coding

Overall rank display

Section badge

✅ Interactive Features:

Animated particles background

Smooth page transitions (fade in/out)

Celebration effect for passed students

Hover effects on all interactive elements

Keyboard navigation (ESC, Enter, 1, 2)

✅ Design Elements:

Modern dark theme (#0d1117 background)

Gradient colors (Cyan #38bdf8, Purple #8b5cf6, Pink #ec4899)

Glassmorphism effects with backdrop blur

Animated borders and glowing effects

Responsive design for mobile/tablet/desktop

✅ Backend Integration:

REST API connection (/api/search-student, /api/download-pdf)

POST requests with JSON payload

Section-based data filtering

PDF generation and download

Technologies:

Frontend: HTML5 • CSS3 (Animations, Gradients, Glassmorphism) • Vanilla JavaScript ES6+

API Integration: Fetch API for async requests

Design: Font Awesome icons • Custom CSS animations • Responsive grid layout

User Flow:

Welcome Screen → Click "Access Results"

Search Page → Select section (Math/Science) → Enter seat number

Results Page → View details → Download PDF or search again