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:

🍭 Why don't sharks eat clowns? — Because they taste funny!
🎩 What do you call a shark that's a magician? — A jaw-dropper!
🌊 Why did the shark cross the ocean? — To get to the other tide!
🎯 What's a shark's favorite game? — Swallow the leader!
👋 How do sharks say goodbye? — See you in a bit — I've got to jaws!
🍽️ 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 ():

  </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

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

2.2 KiB Raw Blame History