You are an experienced web developer.
Create a standalone webpage using only HTML, CSS, and JavaScript (no external libraries or frameworks).
Requirements
1. Purpose
Build a webpage that generates a random Ballon d’Or winner (male football) when the user clicks a “Generate Winner” button.
2. Data
Include a list of all Ballon d’Or male winners from 1956 to the most recent year.
Each winner entry should include:
Player name
Nationality
Year of the award
Club (at the time of winning)
(You can hardcode this data in a JavaScript array.)
3. Functionality
When the user clicks “Generate Winner”, randomly select a winner from the list and display:
- Name
- Year
- Nationality
- Club
Add a “Next Winner” button to get another random result.
Optionally, include a “Surprise Me” animation effect (like a short shuffle before showing the winner).
4. Design
Use modern, minimalistic CSS.
Display the winner inside a card with:
- Player’s name in large text
- Year in bold or accent color
- Nationality flag (emoji or small icon)
- Club name below in smaller font
Center the card on the page.
5. Bonus Features (Optional)
- Add a “Filter by Decade” dropdown (e.g., 1950s, 1960s, etc.) to show only winners from that era.
- Include a “Show All Winners” section that lists all players chronologically.
- Allow users to copy the winner’s info (e.g., via a small “Copy” button).
6. Technical
Everything must run fully offline — no API calls or dependencies.
Use semantic HTML and clean, commented JavaScript.