<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Taman Angka Interaktif</title>
<style>
:root {
--pastel-green: #e2f0cb;
--pastel-pink: #ffdae0;
--pastel-blue: #b5ead7;
--dark-text: #555;
}
body {
margin: 0;
font-family: 'Comic Sans MS', cursive, sans-serif;
background-color: var(--pastel-green);
color: var(--dark-text);
overflow: hidden;
}
.screen {
display: none;
height: 100vh;
width: 100vw;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(to bottom, #fff, var(--pastel-green));
position: relative;
}
.active { display: flex; }
/* Halaman 1: Beranda */
#beranda { background: url('https://images.unsplash.com/photo-1502082553048-f009c37129b9?auto=format&fit=crop&q=80&w=1000') center/cover; }
.btn-menu {
background-color: #ff9aa2;
border: none;
padding: 15px 30px;
margin: 10px;
border-radius: 50px;
font-size: 1.2rem;
cursor: pointer;
box-shadow: 0 5px #ffb7b2;
transition: 0.2s;
}
.btn-menu:active { transform: translateY(4px); box-shadow: 0 2px #ffb7b2; }
/* Karakter Guru */
.guru {
width: 150px;
animation: wave 2s infinite;
}
@keyframes wave {
0%, 100% { transform: rotate(0deg); }
50% { transform: rotate(10deg); }
}
/* Halaman Belajar */
.objek-container { font-size: 4rem; margin: 20px; }
.angka-besar { font-size: 8rem; color: #ff6f61; text-shadow: 3px 3px #fff; }
.nav-btn {
position: absolute;
bottom: 30px;
right: 30px;
background: #b5ead7;
padding: 10px 25px;
border-radius: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="beranda" class="screen active">
<h1>🌳 Taman Angka 🌳</h1>
<img src="https://cdn-icons-png.flaticon.com/512/3994/3994840.png" class="guru" alt="Guru Muslimah">
<p>Assalamu'alaikum! Yuk main bersama Ibu Guru!</p>
<button class="btn-menu" onclick="showScreen('belajar')">Mulai Petualangan</button>
<button class="btn-menu">Lagu & Doa</button>
</div>
<div id="belajar" class="screen">
<div class="angka-besar" id="display-angka">1</div>
<div class="objek-container" id="display-objek">☀️</div>
<p id="narasi">Lihat, ada 1 Matahari! Ciptaan Allah.</p>
<button class="nav-btn" onclick="nextAngka()">Lanjut ➔</button>
<button style="position:absolute; top:20px; left:20px;" onclick="showScreen('beranda')">🏠 Beranda</button>
</div>
<script>
let currentAngka = 1;
const dataAngka = [
{ n: 1, obj: "☀️", txt: "Lihat, ada 1 Matahari! MasyaAllah." },
{ n: 2, obj: "🦋🦋", txt: "Ada 2 Kupu-kupu terbang!" },
{ n: 3, obj: "🌴🌴🌴", txt: "Wah, ada 3 Pohon Kurma!" },
{ n: 4, obj: "🐱🐱🐱🐱", txt: "Ada 4 Kucing lucu sekali!" },
{ n: 5, obj: "🖐️", txt: "5 Jari tangan, seperti Rukun Islam." }
];
function showScreen(id) {
document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
document.getElementById(id).classList.add('active');
}
function nextAngka() {
if (currentAngka < 5) {
currentAngka++;
updateBelajar();
} else {
alert("Alhamdulillah! Kamu hebat sudah belajar sampai angka 5!");
showScreen('beranda');
currentAngka = 1;
updateBelajar();
}
}
function updateBelajar() {
const item = dataAngka[currentAngka - 1];
document.getElementById('display-angka').innerText = item.n;
document.getElementById('display-objek').innerText = item.obj;
document.getElementById('narasi').innerText = item.txt;
// Efek Suara Sederhana (Beep)
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const osc = audioCtx.createOscillator();
osc.connect(audioCtx.destination);
osc.start();
osc.stop(audioCtx.currentTime + 0.1);
}
</script>
</body>
</html>