Judiciary Gold - Premier Website Mockup

Prepared for Team Lawtech Screening Task (Submission Deadline: 07 August 2026).

This repository contains a feature-complete, modern, single-page web application mockup for Judiciary Gold (A vertical of Toprankers for Civil Judge & PCS-J Exam Preparation).

---

Table of Contents

• What Was Built
• Challenges & Problems Faced
• How Problems Were Solved
• Key Highlights & Features
• File Structure
• How to Run Locally

---

What Was Built

This project is a high-performance, single-page web application mockup developed for Judiciary Gold as part of the Team Lawtech Screening Task. It provides a comprehensive platform for Civil Judge & PCS-J exam aspirants with an interactive and responsive user experience.

Core Features & Components Developed:

1. Design System & Responsive Architecture:

   • Built with a luxury Deep Imperial Navy (#0B132B) and Imperial Gold (#D4AF37) palette.
   • Glassmorphism card aesthetics, smooth typography pairing (Plus Jakarta Sans & Playfair Display), and custom Light/Dark theme toggling.

2. Interactive State Judiciary Exam Matrix:

   • Tabbed state navigation covering UP PCS-J, MP Civil Judge, Rajasthan RJS, Delhi DJS, and Bihar BJS.
   • Real-time dynamic updates for syllabus details, eligibility criteria, and exam statistics.

3. Interactive AI Law Aptitude Quiz Simulator:

   • 5-question law aptitude mock quiz built with vanilla JavaScript.
   • Real-time scoring, section-by-section legal explanation callouts, score tier evaluation, and quiz retake functionality.

4. Embedded Official Media Integration:

   • Official Demo Class YouTube Video Embed (https://youtu.be/W54_iYVAozQ) with modal playback controls.
   • Direct social media handle links (@judiciarygold Instagram & @JudiciaryGold YouTube).

5. Utility Tools & Interactive Widgets:

   • Global live search modal for courses and state laws.
   • Floating WhatsApp Chat & Callback request widget.
   • Application Voucher ID Generator (JG-2026-XXXXX) triggered on form submission.
   • Dynamic Course Fee & Monthly EMI Calculator.
   • AISAT 2026 Scholarship live countdown timer.
   • Reading progress bar and interactive FAQ accordions.

---

Challenges & Problems Faced

During the development of this web application mockup, several frontend engineering challenges were encountered:

1. Complex Interactive State Management in Vanilla JavaScript

• The Problem: Managing multiple independent UI states (modal open/close, state matrix tabs, 5-question quiz score calculation, theme switching, search filters, and form submissions) without a frontend framework like React or Vue created risks of DOM state conflicts and memory leaks.

2. Glassmorphism Contrast & Dual-Theme Consistency

• The Problem: Maintaining high contrast and readability across blurred glassmorphism containers in both Imperial Navy Dark Mode and Imperial Gold Light Mode caused color bleed and legibility challenges on smaller mobile viewports.

3. Modal Lifecycle & Embedded Video Playback Control

• The Problem: Opening YouTube video embeds within modal popups led to background body scrolling issues, and closing the modal did not automatically pause embedded YouTube iframe audio.

4. Live Search Modal Filtering Performance

• The Problem: Building a real-time instant search modal that filters state judiciary modules, courses, and exam details needed to respond instantly without causing input lag or layout shifts.

---

How Problems Were Solved

Each challenge was resolved using structured vanilla JavaScript and CSS architectural patterns:

1. Modular Event Delegation & Clean DOM State Engine

• The Solution: Structured app.js into focused utility modules using centralized state objects and event delegation. Unified modal controllers handle background scroll-locking (body.style.overflow = 'hidden') and automatically reset modal states upon closure.

2. CSS Custom Variables & Contrast-Verified Theme Palette

• The Solution: Established CSS variable tokens in styles.css (--bg-primary, --text-primary, --accent-gold, --glass-bg, --glass-border). Toggling theme attributes on the <html> root updates all visual components instantly without layout reflows or readability loss.

3. Video Modal Lifecycle Handler & Iframe Source Reset

• The Solution: Implemented a modal lifecycle observer in JavaScript. When the video modal closes, the embedded YouTube iframe src attribute is temporarily cleared and restored upon reopening, completely terminating background audio playback.

4. In-Memory Search Data Indexing & Real-Time DOM Rendering

• The Solution: Created an in-memory search index array in app.js. User input triggers immediate fuzzy string matching, dynamically appending matching results into the modal DOM container with low latency and zero layout flicker.

5. Form Validation & Deterministic Voucher Code Engine

• The Solution: Added client-side regex input validation for email and phone inputs. On successful form submission, a unique voucher ID (e.g. JG-2026-X89B2) is deterministically generated and displayed inside a custom confirmation modal.

---

Key Highlights & Features

• Design System & Aesthetics: Built with a luxury Deep Imperial Navy (#0B132B) base, Imperial Gold (#D4AF37) gradients, glassmorphism, responsive typography (Plus Jakarta Sans & Playfair Display), and custom Dark/Light theme switching.
• Interactive State Judiciary Matrix: Tabbed navigation for UP PCS-J, MP Civil Judge, Rajasthan RJS, Delhi DJS, and Bihar BJS with real-time syllabus and exam statistic updates.
• Embedded Official Media:
  • Official Demo Class YouTube Video Embed (https://youtu.be/W54_iYVAozQ) with modal playback controls.
  • Social media links pointing to official handles (@judiciarygold Instagram & @JudiciaryGold YouTube).
• Interactive AI Mock Quiz Center: 5-question law aptitude simulator featuring instant evaluation, section-by-section explanation callouts, score tier ratings, and quiz retake functionality.
• Developer Polish & Utilities:
  • Top Reading Scroll Progress Bar.
  • Instant Live Search Modal for courses and state laws.
  • Floating WhatsApp Chat & Callback widget.
  • Application Voucher ID Generator (JG-2026-XXXXX) on form submissions.
  • Dynamic Fee & Monthly EMI Calculator.
  • AISAT 2026 Scholarship Countdown Timer.
  • Interactive FAQ Accordions.

---

File Structure

├── index.html       # Semantic HTML5 layout with Open Graph SEO metadata
├── styles.css       # CSS design system with CSS custom variables & keyframes
├── app.js           # Client-side JavaScript engine (Quiz, Search, Modals, Theme)
├── assets/          # Generated high-resolution imagery assets
│   ├── hero_banner.png
│   ├── study_material.png
│   ├── topper_ananya.png
│   ├── topper_vikramaditya.png
│   └── topper_pooja.png
└── README.md        # Technical developer documentation

---

How to Run Locally

1. Open a terminal in this directory.
2. Serve static files via any local HTTP server:

   python -m http.server 8080

   or using Node.js:

   npx http-server -p 8080

3. Open your browser and navigate to http://localhost:8080.