EPROJECT: PASCAL IMITATION JEWELLERY
DOCUMENTATION [DEVELOPER GUIDE]
Detail Value
Project Title Pascal Imitation Jewellery - E-commerce Site
Document Type Developer Guide & Technical Specifications
Technology HTML5, CSS3, Vanilla JavaScript
Target Audience Project Developers / Maintainers
Version 1.0 (Initial Release)
SECTION 1: SYNOPSIS AND ARCHITECTURE
The Pascal Imitation Jewellery project is a Static Multi-Page
Application (MPA) developed using foundational web technologies
(HTML, CSS, JavaScript). Its primary goal is to provide a royal and
luxurious e-commerce experience centered around imitation jewelry.
1.1 Project Objectives
1. Immersive UI: Implement a dark-mode, luxury theme using a
gold color palette for visual appeal.
2. Dynamic Product Display: Centralize product data in JavaScript
for easy filtering and rendering on category pages.
3. Core Features: Provide essential e-commerce tools like Product
Filtering, Comparison, and Wishlist functionality.
4. UX Enhancement: Utilize a custom pre-loader for an engaging
initial loading experience on the homepage.
1.2 File Structure Overview
The project is organized with clear separation between structure, styling,
and logic:
Component Files Description
Defines all page layouts
Structure *.html (12 files) (Home, Products, Rings,
Compare, etc.).
Global styling, variables,
Styling CSS/[Link] animations, and responsive
design.
Component Files Description
Contains all product data,
Core Logic JAVASCRIPT/[Link] filtering logic, and feature
implementation.
Dedicated script for the
Utility
JAVASCRIPT/[Link] custom animated loading
Logic
screen.
SECTION 2: TECHNICAL SPECIFICATIONS
2.1 Styling Standardization (CSS/[Link])
The design relies heavily on centralized CSS variables defined in the
:root selector for maintainability.
CSS Variable Default Value Usage
Primary accent for buttons,
--gold #D4AF37 headings, and interactive
elements.
Background color for the dark
--dark #0a0a0a
mode theme.
--text-
#ffffff Standard text color.
primary
Used for subtle, translucent
rgba(255, 255,
--glass backgrounds (e.g., card
255, 0.05)
backgrounds).
SECTION 3: CORE FUNCTIONALITY (JAVASCRIPT)
3.1 Custom Pre-loader ([Link])
The [Link] script provides a simulated, multi-step loading
experience on [Link].
Functionality Implementation Details
Progress Uses setInterval to increment the progress
Simulation variable by a random amount (2-6%) every 200ms.
Updates three status steps (step1, step2, step3)
Step Tracking based on progress milestones (30% for 'Processing',
70% for 'Ready').
Once progress >= 100, the
Completion completeLoading() function executes, which
hides the loader (#loader) with a fade-out effect.
3.2 Product Features ([Link])
Feature
Primary Function(s) Description
Name
Filters the
products
array by category
Category and injects the
displayRings(collection)
Display corresponding
HTML cards into
the product
listing container.
Listens for
changes in the
Price Range,
Filtering & setupRingsFilterListeners( Rating, and
Sorting ) Brand filters, and
re-renders the
filtered product
set.
Manages
Product initComparePage(),
product IDs
Comparison addToComparison()
stored in local
storage and
Feature
Primary Function(s) Description
Name
populates the
comparison table
on
[Link]
l using the
product's
features
array.
Adds/removes
items from the
wishlist (toggling
Wishlist & addWishlistListener(),
the heart icon)
Notification showBraceletsNotification(
and displays a
s )
small notification
banner for user
feedback.
SECTION 4: TASK SHEET / MAINTENANCE LOG
Tas
k Task Description Status Note for Next Developer
Ref.
The Footer HTML is repeated
across all 12 HTML files
Standardize ([Link], [Link],
1.01 Pending
Footer/Header etc.). Consider using a template or
server-side include for easy
updates.
Contact details (+92 333
Contact Info 0101010,
1.02 Complete
Update info@[Link]
m) are present in all page footers.
The [Link] file seems
[Link] Incomplet to be a gateway page. Logic needs
1.03
l Logic e to be added to dynamically show
all products, not just categories.
Placeholder images (e.g.,
Image Placeholder
1.04 Complete [Link]
Review
have been replaced with relative
paths (images/EPROJECTS
Tas
k Task Description Status Note for Next Developer
Ref.
IMAGES/...) in the products
array.
Dedicated pages for
[Link] and
1.05 Legal Pages Complete
[Link] are available and
linked in the footer.