Interactive Statistical Data Map
Budget: €30 – €250 EUR
Project: Interactive Football Penalty Box Grid (Web Component)
**Overview:**
I'm looking for a web developer to build a sleek, responsive, and interactive HTML/JavaScript component that mimics a football (soccer) penalty box divided into clickable zones. Users should be able to select up to three zones and confirm their selection via a purchase button. This tool will eventually be integrated into a Wix website.
Key Requirements:
* Build an interactive **grid-based pitch** interface (8 rows × 19 columns)
* Each grid square:
* Has a unique ID (e.g., `A01`, `B07`, etc.)
* Shows its **price on hover**
* Is **selectable (yellow highlight)** — up to 3 squares at once
* Turns **red** once "purchased" and becomes unclickable
* Include:
* **Penalty spot**, accurately positioned
* **Six-yard box** with dotted lines
* A red **goal line** across the goal mouth
* Display:
* A **running total (€)** of selected squares below the grid
* A **“Confirm Purchase”** button below the total
* Visual polish:
* Styled like a **real football pitch**, with mowed grass effect
* Rounded grid cells, smooth hover animations, and subtle shadows
Tech Stack:
* HTML, CSS, JavaScript (no frameworks required)
* Deliver as a **single embeddable HTML file**
* Final output must be **iframe-ready** for integration into Wix
Optional (for future scope):
* Integrate with Wix Payments or Stripe
* Store purchases in a backend database (e.g., via Velo/Content Manager)
* Mobile responsiveness or team-themed skins
**Overview:**
I'm looking for a web developer to build a sleek, responsive, and interactive HTML/JavaScript component that mimics a football (soccer) penalty box divided into clickable zones. Users should be able to select up to three zones and confirm their selection via a purchase button. This tool will eventually be integrated into a Wix website.
Key Requirements:
* Build an interactive **grid-based pitch** interface (8 rows × 19 columns)
* Each grid square:
* Has a unique ID (e.g., `A01`, `B07`, etc.)
* Shows its **price on hover**
* Is **selectable (yellow highlight)** — up to 3 squares at once
* Turns **red** once "purchased" and becomes unclickable
* Include:
* **Penalty spot**, accurately positioned
* **Six-yard box** with dotted lines
* A red **goal line** across the goal mouth
* Display:
* A **running total (€)** of selected squares below the grid
* A **“Confirm Purchase”** button below the total
* Visual polish:
* Styled like a **real football pitch**, with mowed grass effect
* Rounded grid cells, smooth hover animations, and subtle shadows
Tech Stack:
* HTML, CSS, JavaScript (no frameworks required)
* Deliver as a **single embeddable HTML file**
* Final output must be **iframe-ready** for integration into Wix
Optional (for future scope):
* Integrate with Wix Payments or Stripe
* Store purchases in a backend database (e.g., via Velo/Content Manager)
* Mobile responsiveness or team-themed skins