Birthday Template Girl

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);
+  }
+}

index.html

@@ -0,0 +1,52 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Ilaria's Birthday Party - RSVP</title>
+    <link rel="stylesheet" href="ExploreRSVP.css">
+</head>
+<div></div>
+<body>
+    <div class="explore-page">
+      <h2 id="animated-heading">Panamerican Taekwondo Academy Celebrates</h2>
+      <h1 id="bumpy-heading">Ilaria's Birthday Party</h1>
+      <section class="birthday-rsvp-card">
+    <del style="text-decoration: line-through; opacity: 0.6;">
+        <h3>🎉 You're Invited to My 11th Birthday Party! 🎂</h3>
+        <p>Join me for cake, fun, and celebration!</p>
+            <dl class="event-details">
+        <!--<dt>Date</dt>
+            <dd><time datetime="2025-12-07">December 7, 2025</time></dd>
+            <dt>Time</dt>
+            <dd><time datetime="2025-12-07T15:00">3:00 PM</time></dd>
+            <dt>Location</dt>
+            <dd>-->
+            </dd>
+        </dl>
+    </del>
+    <div>
+        <!-----In case more info is needed later------>
+        <p>Looking forward to celebrating with you!</p>
+    </div>
+      </section>
+
+      <div class="bottom-section">
+        <address>
+            <a href="https://maps.google.com/?q=3712+Reynolda+Rd,+Winston+Salem,+NC+27106" target="_blank" rel="noopener">3712 Reynolda Rd, Winston Salem, NC 27106</a>
+        </address>
+
+        <div class="button-container">
+          <button class="animated-btn" id="yes-button">
+            ✅ I'll be there!
+          </button>
+          <button class="animated-btn" id="no-button">
+            ❌ Sorry, can't make it
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>

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");
+  });
+});