50 lines
2.2 KiB
Markdown
50 lines
2.2 KiB
Markdown
# 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
|