hermes-skills/skills/software-development/shark-game-development/references/shark-dad-jokes-section.md

Shark Dad Jokes Section — How to Play Page

Added Jul 2026 to /var/www/shark-game/how-to-play.html as Section 7, between the Map View section and the bottom navigation.

Content

Section titled 🦈 Shark Jokes (Dad-Approved) with 6 jokes:

1. 🍭 Why don't sharks eat clowns? — Because they taste funny!
2. 🎩 What do you call a shark that's a magician? — A jaw-dropper!
3. 🌊 Why did the shark cross the ocean? — To get to the other tide!
4. 🎯 What's a shark's favorite game? — Swallow the leader!
5. 👋 How do sharks say goodbye? — See you in a bit — I've got to jaws!
6. 🍽️ What did the shark say when it ate the clownfish? — This tastes a little funny!

Design

• Uses the same section-card class as the rest of the page
• <ul style="list-style:none;padding-left:0;"> — removes bullet markers, each joke has an emoji prefix instead
• margin-bottom: 10px on first 5 items, margin-bottom: 0 on last to avoid excess space before .note
• <h3> uses <span class="highlight">(Dad-Approved)</span> to match the amber accent throughout the page
• .note callout at the bottom: 🤖 New jokes every visit — powered by AI

Placement anchor

Inserted between the Map View section (Section 6, ends </div>) and the bottom nav (<!-- ===== NAVIGATION ===== -->):

  </div>   ← closes Map View section-card

  <!-- Section 7: Shark Jokes -->
  <div class="section-card">...</div>

  <!-- ===== NAVIGATION ===== -->
  <div class="bottom-nav">

No changes to any other sections — this was a pure insertion.

Content strategy

These are placeholders meant to be regenerated fresh each time by AI. Keep the tone: classic dad-joke format (question → pun), ocean/shark themed, family-friendly. The "(Dad-Approved)" label and the "powered by AI" note are intentional brand elements — keep both.

How to add new jokes

1. Copy the <li> pattern: <li style="padding-left:0;margin-bottom:10px;">EMOJI Q? <em>Punchline!</em></li>
2. Give each joke an appropriate emoji prefix related to the topic
3. Set margin-bottom: 0 on the last item
4. Keep jokes within 6-8 items total — don't let the section outgrow the cards above it