Window Planner Pro: Store Facade Staging & Lighting Simulator (store-window-display-planner)

Live Web Demo: https://reda1472.github.io/store-window-display-planner/

---

1. Project Title

Window Planner Pro: Store Facade Staging & Lighting Simulator (store-window-display-planner)

2. One-Line Description

A production-grade retail architectural tool for planning commercial window displays, simulating directional spotlighting and color temperatures, and generating construction blueprints and BOMs.

3. Project Purpose

Showcases domain expertise in commercial retail storefront dressing (#WindowDisplay) integrated with web software engineering. Demonstrates real-time photometric lighting simulation, elevation podium calculations, architectural staging grids, and dynamic Bill of Materials (BOM) cost estimation.

4. Live Demo

• Live Interactive Staging: https://reda1472.github.io/store-window-display-planner/
• Deployment: Continuous delivery via GitHub Pages.

5. Screenshots

(Real interface captures from the running application)

Window Facade Staging Canvas	Lighting Simulator & Bill of Materials
Simulated storefront window glass with reflections, backdrop banners, and mannequins	Color temperature (Kelvin) slider and live BOM fixture cost table

Storefront Construction Blueprint	Native Arabic RTL & Dark Scheme
Print-ready architectural blueprint specifications for store installers	Full Arabic RTL localization with Cairo typography and smooth theme toggle

6. Features

• Window Facade Staging Canvas: 3D window box with simulated glass reflection and seasonal backdrop banners (Winter 2025 Wonderland, Back to School).
• Lighting & Lux Photometric Simulator: Interactive Kelvin temperature adjustments (2700K Warm Gold to 5500K Crisp Daylight) and spotlight intensity control.
• Bill of Materials (BOM) & Staging Cost Ledger: Live calculation of props, vinyl decal lettering, modular display risers, and lighting fixtures.
• Printable Architectural Staging Blueprint: Generates formatted construction specification sheets for branch visual merchandisers.
• First-Class Arabic RTL & Theming: Full bilingual support (English/Arabic RTL) with dark and light themes.
• 100% Synthetic Data: Bundled with realistic commercial campaign presets and retail fixture catalogs.

7. Tech Stack

• Architecture: Semantic HTML5, Vanilla JavaScript (ES6+).
• Styling: CSS3 Custom Properties, CSS Logical Properties for RTL, Glassmorphism backdrop filters.
• Fonts: Inter, Cairo, JetBrains Mono.

8. Architecture

┌────────────────────────────────────────────────────────┐
│               Storefront Window Canvas                 │
│      (Glass Frame, Reflections, Spotlight Cones)       │
└──────────────────────────┬─────────────────────────────┘
                           │
┌──────────────────────────▼─────────────────────────────┐
│                 Lighting & Stage Engine                │
│       ├── Kelvin Temperature & Lux Math (2700K-5500K)   │
│       ├── Dynamic Decal & Riser Height Calculations    │
│       └── Real-Time Bill of Materials (BOM) Ledger     │
└──────────────────────────┬─────────────────────────────┘
                           │
┌──────────────────────────▼─────────────────────────────┐
│                 Architectural Exporter                 │
│      ├── Live Glass Facade Simulation                  │
│      └── Printable Storefront Construction Blueprint   │
└────────────────────────────────────────────────────────┘

9. Project Structure

store-window-display-planner/
├── css/
│   ├── themes.css              # Dark & light design system tokens
│   ├── main.css                # Base reset and typography
│   ├── window.css              # Facade canvas & lighting simulation
│   └── rtl.css                 # Dedicated Arabic RTL alignments
├── js/
│   ├── data.js                 # Synthetic campaign themes & fixtures
│   ├── i18n.js                 # English / Arabic translation engine
│   ├── theme.js                # Theme switcher & OS listener
│   └── app.js                  # Lighting math & window controller
├── index.html                  # Interactive Facade Staging Hub
├── LICENSE                     # MIT License
├── .gitignore
└── README.md                   # Full 17-point standard documentation

10. Installation

# Clone the repository
git clone https://github.com/reda1472/store-window-display-planner.git

# Navigate into the project directory
cd store-window-display-planner

11. Environment Variables

No build tools or environment variables required. Pure client-side application.

12. Development Commands

# Serve locally using Python HTTP server
python -m http.server 8000

# Open browser at http://localhost:8000

13. Production Build

Zero build steps required. Code is production-ready for static hosting.

14. Usage

• Select a window campaign theme (e.g. Winter 2025 Wonderland Launch).
• Adjust the lighting color temperature (Kelvin) and spotlight intensity sliders.
• Review real-time Bill of Materials (BOM) cost updates.
• Click "Window Blueprint" to export printable construction specifications.

15. Roadmap

• Window facade staging canvas.
• Photometric spotlight simulation.
• Bill of Materials (BOM) cost calculation.
• Printable architectural blueprint export.
• 3D Orbit camera perspective.

16. Known Limitations

• Optimized for modern desktop and tablet viewports supporting CSS backdrop-filter.

17. License

Distributed under the MIT License. See LICENSE for details.