sage-fully

byHobo Jefe

Create a fully responsive, bug-free single-page birthday party website for Miguel Angel’s 7th Birthday using HTML, Tailwind CSS, and Vanilla JavaScript. Combine all previous improvements, layout fixes, bilingual support, audio controls, and the interactive soccer game into a single, comprehensive, production-ready implementation. ### 1. Fixed Two-Page Gated Viewport & Scrolling - **Landing Page Gating:** The initial landing screen (`#landingPage`) must be locked inside a fixed full-screen viewport (`position: fixed; inset: 0; z-index: 50;`) with a seamless, immersive **soccer pitch green gradient background** covering 100% of the screen with **zero dark blue bars or gaps at the bottom**. - **Clean Transition:** When the user clicks the pack, trigger a clean screen slide-up/fade transition (`hidden-up`) that completely removes the landing page from view, scrolling cleanly to the top (`window.scrollTo(0, 0)`) of the main website. ### 2. Larger Pack & Updated Copy - **Pack Size:** Make the blue and gold foil pack (`image.png`) noticeably larger, bolder, and more prominent on the landing page so it stands out instantly. - **Action Text:** Update all button text and prompts from "piñata" to **"Click to open the pack"** (Spanish: **"Haz clic para abrir el sobre"**). ### 3. Fixed Text Overlap Bug on Headings - Fix all CSS layout structures for section headers (such as "YOU'RE ON THE GUEST LIST" and "SAVE YOUR SPOT") so that small tracker/category sub-labels sit cleanly *above* the main headings with proper spacing and **zero text overlapping**. ### 4. Bilingual Support (English / Spanish Toggle) - Include a fixed top-bar language switcher ("🇺🇸 EN | 🇪🇸 ES") that dynamically translates all headings, dates, buttons, and prompts instantly across the entire interface. ### 5. Embedded Audio Integration & Dual Toggle Controls - **Audio Source:** Point the `<audio>` element directly to the local project file: `src="El Crack de la Fiesta.mp3"` with loop enabled. - **Playback Triggers:** Auto-play the track when the user clicks to open the pack, and ensure dual **"Sound On / Sound Off"** toggle buttons are available both in the top header and within the inside page layout so users can control the music anywhere. ### 6. Interactive Penalty Kick Game (At the End of the Page) - **Goalie AI & Difficulty:** Add an interactive mini soccer penalty shootout game at the bottom of the main website featuring a goalkeeper graphic that dynamically moves or blocks **45% of the user's shots** to provide a fun, balanced challenge. - **Scoring & Feedback:** Include clickable targets or swipe-to-shoot mechanics where scoring displays a celebratory message ("¡Golazo! Miguel Angel scores!") complete with sound/visual effects, alongside a live scoreboard tracking shots and goals. ### 7. Core Event Sections (Post-Reveal) - **Main Flyer Section:** High-resolution display of the event flyer (`image (1).png`). - **Event Utilities:** Clean date cards, a calendar graphic with September 19, 2026 uniquely highlighted in gold, an "Add to Calendar" (.ics generator) button, and an interactive map link to *1500 Fulton Rd, Santa Rosa, CA 95401*. - **RSVP Section:** Prominent RSVP button linked to phone number `+1 (707) 890-2364`.