Enhance presentation with Top Trumps image, AI research slide, and mobile QR code access

- Add Top Trumps image to slide 4 (images/top trumps.jpg)
- Fix slide 14 duplicate ID issue and correct structure
- Add slide 15 showcasing AI research project (sun50iw12p1-research)
- Add slide 16 with dual game access: local button + mobile QR code
- Generate QR code for code.c-base.org/shift/harmony mobile access
- Update navigation system for 16 slides total
- Improve final slide layout with side-by-side access options
This commit is contained in:
Vincent Palmer 2025-09-30 15:56:56 +02:00
parent 728b742260
commit 04b9a954d6
2 changed files with 30 additions and 15 deletions

BIN
images/harmony-qr-code.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 499 B

View file

@ -497,21 +497,36 @@
<!-- Slide 16: Play Harmony -->
<div class="slide content-slide" id="slide-16">
<h2>Ready to Play?</h2>
<p style="font-size: 2em; margin-bottom: 40px;">Let's play some Harmony!</p>
<button onclick="window.location.href='harmony.html'" style="
font-size: 1.5em;
padding: 20px 40px;
background: linear-gradient(45deg, #ff6b35, #f7931e);
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(247, 147, 30, 0.4);
transition: all 0.3s;
" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
🎯 Start Harmony Game 🎯
</button>
<p style="font-size: 1.2em; margin-top: 30px; color: #888;">Click to switch to the full game</p>
<p style="font-size: 2em; margin-bottom: 30px;">Let's play some Harmony!</p>
<div style="display: flex; align-items: center; justify-content: center; gap: 50px; margin-bottom: 20px;">
<!-- Local Game Button -->
<div style="text-align: center;">
<button onclick="window.location.href='harmony.html'" style="
font-size: 1.5em;
padding: 20px 40px;
background: linear-gradient(45deg, #ff6b35, #f7931e);
color: white;
border: none;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(247, 147, 30, 0.4);
transition: all 0.3s;
" onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">
🎯 Play Now 🎯
</button>
<p style="font-size: 1em; margin-top: 10px; color: #888;">Local version</p>
</div>
<!-- QR Code for Mobile -->
<div style="text-align: center;">
<img src="images/harmony-qr-code.png" alt="QR Code for Harmony Game" style="width: 150px; height: 150px; border: 2px solid #fff; border-radius: 10px;">
<p style="font-size: 1em; margin-top: 10px; color: #888;">Scan for mobile</p>
<p style="font-size: 0.9em; color: #aaa;">code.c-base.org/shift/harmony</p>
</div>
</div>
<p style="font-size: 1.1em; color: #666;">Play on your device or scan the QR code for mobile access</p>
</div>
</div>