Update dad birthday page design

Author: jamesarrowood

106982433_3340753655988014_308260932475021008_n.jpg

@@ -12,12 +12,12 @@
     />
     <style>
       :root {
-        --bg-1: #fff8f0;
-        --bg-2: #ffe3d2;
-        --ink: #2f1b14;
-        --accent: #d94832;
-        --accent-2: #f4a259;
-        --card: rgba(255, 255, 255, 0.72);
+        --bg-1: #0f172a;
+        --bg-2: #1e293b;
+        --ink: #e2e8f0;
+        --accent: #b45309;
+        --accent-2: #475569;
+        --card: rgba(15, 23, 42, 0.62);
       }
 
       * {
@@ -30,8 +30,8 @@
         font-family: "Manrope", sans-serif;
         color: var(--ink);
         background:
-          radial-gradient(circle at 15% 20%, rgba(244, 162, 89, 0.3), transparent 40%),
-          radial-gradient(circle at 85% 5%, rgba(217, 72, 50, 0.2), transparent 30%),
+          radial-gradient(circle at 15% 20%, rgba(180, 83, 9, 0.28), transparent 40%),
+          radial-gradient(circle at 85% 5%, rgba(71, 85, 105, 0.38), transparent 30%),
           linear-gradient(160deg, var(--bg-1), var(--bg-2));
       }
 
@@ -52,15 +52,15 @@
       .f1 {
         width: 62px;
         height: 62px;
-        background: rgba(217, 72, 50, 0.25);
+        background: rgba(180, 83, 9, 0.35);
         top: 28px;
         left: -8px;
       }
 
       .f2 {
         width: 38px;
         height: 38px;
-        background: rgba(244, 162, 89, 0.45);
+        background: rgba(148, 163, 184, 0.42);
         top: 170px;
         right: 28px;
         animation-delay: 0.9s;
@@ -69,7 +69,7 @@
       .f3 {
         width: 22px;
         height: 22px;
-        background: rgba(47, 27, 20, 0.18);
+        background: rgba(226, 232, 240, 0.25);
         right: -2px;
         bottom: 140px;
         animation-delay: 0.4s;
@@ -79,9 +79,9 @@
       .panel {
         background: var(--card);
         backdrop-filter: blur(6px);
-        border: 1px solid rgba(255, 255, 255, 0.65);
+        border: 1px solid rgba(148, 163, 184, 0.35);
         border-radius: 22px;
-        box-shadow: 0 22px 40px rgba(74, 33, 20, 0.09);
+        box-shadow: 0 22px 40px rgba(2, 6, 23, 0.35);
       }
 
       .hero {
@@ -91,7 +91,7 @@
 
       .tag {
         display: inline-block;
-        border: 1px solid rgba(217, 72, 50, 0.3);
+        border: 1px solid rgba(180, 83, 9, 0.6);
         color: var(--accent);
         font-weight: 800;
         letter-spacing: 0.08em;
@@ -133,8 +133,8 @@
       }
 
       button.alt {
-        background: #fff;
-        color: var(--ink);
+        background: rgba(148, 163, 184, 0.2);
+        color: #f8fafc;
       }
 
       .grid {
@@ -148,6 +148,39 @@
         padding: 20px;
       }
 
+      .gallery {
+        margin-top: 18px;
+        display: grid;
+        gap: 14px;
+        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+      }
+
+      .photo {
+        overflow: hidden;
+        border-radius: 18px;
+        border: 1px solid rgba(148, 163, 184, 0.35);
+        background: rgba(15, 23, 42, 0.65);
+        box-shadow: 0 16px 30px rgba(2, 6, 23, 0.3);
+      }
+
+      .photo img {
+        display: block;
+        width: 100%;
+        height: 260px;
+        object-fit: cover;
+        transition: transform 0.35s ease;
+      }
+
+      .photo:hover img {
+        transform: scale(1.04);
+      }
+
+      .photo figcaption {
+        padding: 10px 12px 12px;
+        font-size: 0.9rem;
+        color: #cbd5e1;
+      }
+
       h2 {
         margin: 0 0 8px;
         font-size: 1.05rem;
@@ -162,7 +195,7 @@
         margin-top: 18px;
         text-align: center;
         font-size: 0.95rem;
-        opacity: 0.8;
+        opacity: 0.92;
       }
 
       footer {
@@ -239,10 +272,43 @@ <h2>Birthday Wish</h2>
         </article>
       </section>
 
+      <section class="panel" style="margin-top: 18px" aria-label="Photo memories">
+        <h2>Dad Through the Years</h2>
+        <p style="margin-bottom: 14px">
+          A few favorite memories worth celebrating today.
+        </p>
+        <div class="gallery">
+          <figure class="photo">
+            <img
+              src="40136573_2012798265450233_639635619533815808_n.jpg"
+              alt="Dad memory photo 1"
+              loading="lazy"
+            />
+            <figcaption>Always showing up with heart.</figcaption>
+          </figure>
+          <figure class="photo">
+            <img
+              src="106982433_3340753655988014_308260932475021008_n.jpg"
+              alt="Dad memory photo 2"
+              loading="lazy"
+            />
+            <figcaption>Good times, great stories.</figcaption>
+          </figure>
+          <figure class="photo">
+            <img
+              src="511785219_29980892008220757_1753557587719935733_n.jpg"
+              alt="Dad memory photo 3"
+              loading="lazy"
+            />
+            <figcaption>Still the strongest one in the room.</figcaption>
+          </figure>
+        </div>
+      </section>
+
       <footer>Made with love for your special day, Dad.</footer>
     </main>
 
-    <audio id="birthdaySong" preload="auto" autoplay>
+    <audio id="birthdaySong" preload="auto" autoplay playsinline>
       <source src="Trump talks to Joe.mp3" type="audio/mpeg" />
       Your browser does not support audio playback.
     </audio>
@@ -262,16 +328,35 @@ <h2>Birthday Wish</h2>
 
       async function tryAutoplay() {
         try {
+          song.muted = false;
           await song.play();
           musicToggle.textContent = "Pause Birthday Song";
           return true;
         } catch {
-          musicToggle.textContent = "Tap anywhere to start music";
-          return false;
+          try {
+            song.muted = true;
+            await song.play();
+            musicToggle.textContent = "Unmute Birthday Song";
+            cheerText.textContent = "Tap anywhere once to unmute the birthday song.";
+            return true;
+          } catch {
+            musicToggle.textContent = "Tap anywhere to start music";
+            return false;
+          }
         }
       }
 
       musicToggle.addEventListener("click", async () => {
+        if (song.muted) {
+          song.muted = false;
+          musicToggle.textContent = "Pause Birthday Song";
+          cheerText.textContent = "Love you, Dad.";
+          if (song.paused) {
+            await song.play().catch(() => {});
+          }
+          return;
+        }
+
         if (song.paused) {
           try {
             await song.play();
@@ -290,12 +375,19 @@ <h2>Birthday Wish</h2>
       });
 
       document.addEventListener(
-        "click",
+        "pointerdown",
         () => {
+          if (song.muted) {
+            song.muted = false;
+            cheerText.textContent = "Love you, Dad.";
+          }
           if (song.paused) {
-            song.play().then(() => {
-              musicToggle.textContent = "Pause Birthday Song";
-            }).catch(() => {});
+            song
+              .play()
+              .then(() => {
+                musicToggle.textContent = "Pause Birthday Song";
+              })
+              .catch(() => {});
           }
         },
         { once: true }