diff --git a/ExploreRSVP.css b/ExploreRSVP.css new file mode 100644 index 0000000..d9727a6 --- /dev/null +++ b/ExploreRSVP.css @@ -0,0 +1,231 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Arial', sans-serif; + background: linear-gradient(135deg, #ff0080 0%, #52268b 100%); + min-height: 100vh; + padding: 2em; +} + +.explore-page { + display: flex; + flex-direction: column; + align-items: center; + color: white; +} + +.explore-page h1 { + margin: 0.5em 0; + font-size: 2em; + text-shadow: 2px 2px 4px rgba(0,0,0,0.3); +} + +#bumpy-heading { + display: inline-block; + position: relative; +} + +#bumpy-heading span { + display: inline-block; + animation: bump 0.8s ease-in-out infinite; + position: relative; +} + +#bumpy-heading span::before, +#bumpy-heading span::after { + content: ''; + position: absolute; + width: 6px; + height: 6px; + border-radius: 50%; + animation: confetti 1.5s ease-out infinite; +} + +#bumpy-heading span::before { + background: linear-gradient(45deg, #ff0080, #ffeb3b); + left: -10px; + animation-delay: calc(0.1s * var(--i)); +} + +#bumpy-heading span::after { + background: linear-gradient(45deg, #00ffff, #ff00ff); + right: -10px; + animation-delay: calc(0.15s * var(--i)); +} + +@keyframes confetti { + 0% { + transform: translateY(0) rotate(0deg) scale(1); + opacity: 1; + } + 50% { + transform: translateY(-30px) rotate(180deg) scale(1.2); + opacity: 0.8; + } + 100% { + transform: translateY(-60px) rotate(360deg) scale(0.5); + opacity: 0; + } +} + +@keyframes bump { + 0%, 100% { + transform: translateY(0); + } + 10% { + transform: translateY(-8px); + } + 20% { + transform: translateY(0); + } + 30% { + transform: translateY(-12px); + } + 40% { + transform: translateY(0); + } + 50% { + transform: translateY(-5px); + } + 60% { + transform: translateY(0); + } +} + +.explore-page h2 { + margin-bottom: 0.2em; + font-size: 1.5em; + text-shadow: 2px 2px 4px rgba(0,0,0,0.3); +} + +#animated-heading { + display: inline-block; +} + +#animated-heading span { + display: inline-block; + animation: explode 2s ease-in-out infinite; + animation-delay: calc(0.08s * var(--i)); +} + +@keyframes explode { + 0%, 100% { + transform: translateY(0); + color: #ff0080; + } + 17% { + transform: translateY(-8px); + color: #ffeb3b; + } + 33% { + transform: translateY(0); + color: #ff00ff; + } + 50% { + transform: translateY(-8px); + color: #00ffff; + } + 67% { + transform: translateY(0); + color: #00ff00; + } + 83% { + transform: translateY(-8px); + color: #ff6b00; + } +} + +.birthday-rsvp-card { + background-image: url('Ilaria\'s.png'); + background-size: contain; + background-position: center; + background-repeat: no-repeat; + position: relative; + padding: 0; + width: 100%; + max-width: 500px; + aspect-ratio: 3/4; + border-radius: 16px; + box-shadow: 0 2px 16px rgba(0,0,0,0.14); + text-align: center; + margin-top: 2em; + animation: partyGlow 3s infinite alternate; +} + +.bottom-section { + max-width: 500px; + width: 100%; + text-align: center; + margin-top: 1.5em; +} + +.bottom-section address { + margin-bottom: 1.5em; + font-style: normal; +} + +.bottom-section address a { + color: white; + text-decoration: none; + font-size: 1.1em; + text-shadow: 2px 2px 4px rgba(0,0,0,0.3); + transition: color 0.3s; +} + +.bottom-section address a:hover { + color: #ffeb3b; + text-decoration: underline; +} + +.birthday-rsvp-card h3, +.birthday-rsvp-card p { + display: none; +} + +@keyframes partyGlow { + from { + box-shadow: 0 2px 16px rgba(254,144,175,0.3); + } + to { + box-shadow: 0 2px 36px rgba(145,125,254,0.4); + } +} + +.button-container { + display: flex; + flex-direction: column; + gap: 1em; +} + +.animated-btn { + padding: 1em 2em; + background: #fe90af; + color: rgb(119, 18, 74); + font-weight: bold; + border: none; + border-radius: 24px; + font-size: 1.2em; + cursor: pointer; + box-shadow: 0 4px 16px rgba(254,144,175,0.3); + transition: transform 0.2s, background 0.3s; + position: relative; + animation: bounce 1.6s infinite; +} + +.animated-btn:hover { + background: #b575ee; + transform: scale(1.09); +} + +@keyframes bounce { + 0%, 100% { + transform: translateY(0); + } + 50% { + transform: translateY(-7px); + } +} diff --git a/Ilaria's.png b/Ilaria's.png new file mode 100644 index 0000000..c319450 Binary files /dev/null and b/Ilaria's.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..77d29d8 --- /dev/null +++ b/index.html @@ -0,0 +1,52 @@ + + + + + + Ilaria's Birthday Party - RSVP + + +
+ +
+

Panamerican Taekwondo Academy Celebrates

+

Ilaria's Birthday Party

+
+ +

🎉 You're Invited to My 11th Birthday Party! 🎂

+

Join me for cake, fun, and celebration!

+
+ + +
+
+
+ +

Looking forward to celebrating with you!

+
+
+ +
+
+ 3712 Reynolda Rd, Winston Salem, NC 27106 +
+ +
+ + +
+
+
+ + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..af347e1 --- /dev/null +++ b/script.js @@ -0,0 +1,69 @@ +// Obfuscated phone number (encoded) +const ENCODED_PHONE = "KzEzMzY0MTYwODc0"; // Base64 encoded phone number +// const FACEBOOK_PROFILE = "https://facebook.com/exampleprofile"; // Facebook profile (disabled for now) + +// Decode phone number +function getPhoneNumber() { + return atob(ENCODED_PHONE); +} + +function sendConfirmation(message) { + const phoneNumber = getPhoneNumber(); + + // Create pre-filled SMS message + const smsBody = encodeURIComponent(`RSVP: ${message}`); + + // Open SMS app with pre-filled message (works on mobile) + window.open(`sms:${phoneNumber}?body=${smsBody}`, "_self"); + + // Open Facebook profile (disabled for now) + // window.open(FACEBOOK_PROFILE, "_blank"); + + alert(`Thank you! Please send the text message to confirm your RSVP.`); +} + +// Animate the heading text +function animateHeading() { + const heading = document.getElementById('animated-heading'); + const text = heading.textContent; + heading.textContent = ''; + + text.split('').forEach((char, index) => { + const span = document.createElement('span'); + span.textContent = char === ' ' ? '\u00A0' : char; // Use non-breaking space for spaces + span.style.setProperty('--i', index); + heading.appendChild(span); + }); +} + +// Animate the bumpy heading +function animateBumpyHeading() { + const heading = document.getElementById('bumpy-heading'); + const text = heading.textContent; + heading.textContent = ''; + + text.split('').forEach((char, index) => { + const span = document.createElement('span'); + span.textContent = char === ' ' ? '\u00A0' : char; // Use non-breaking space for spaces + span.style.setProperty('--i', index); + heading.appendChild(span); + }); +} + +// Add event listeners when DOM is loaded +document.addEventListener('DOMContentLoaded', function() { + // Animate headings + animateHeading(); + animateBumpyHeading(); + + const yesButton = document.getElementById('yes-button'); + const noButton = document.getElementById('no-button'); + + yesButton.addEventListener('click', function() { + sendConfirmation("I'll be there!"); + }); + + noButton.addEventListener('click', function() { + sendConfirmation("Sorry, can't make it"); + }); +});