<!DOCTYPE html>
<html lang="cs">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vítej ve škole!</title>
<style>
body {
margin: 0;
font-family: 'Comic Sans MS', cursive;
background: #fefae0;
color: #333;
text-align: center;
}
header {
background-color: #f9844a;
padding: 1rem;
color: white;
}
h1 {
font-size: 2.5rem;
margin: 0.5rem 0;
}
.menu {
display: flex;
flex-direction: column;
gap: 1rem;
margin: 2rem auto;
max-width: 400px;
}
.menu button {
padding: 1rem;
font-size: 1.5rem;
background-color: #90be6d;
color: white;
border: none;
border-radius: 12px;
cursor: pointer;
transition: 0.3s;
}
.menu button:hover {
background-color: #43aa8b;
}
#game {
margin-top: 2rem;
}
.box {
display: inline-block;
width: 80px;
height: 80px;
background: #f9c74f;
margin: 10px;
border-radius: 12px;
cursor: pointer;
font-size: 2rem;
line-height: 80px;
}
</style>
</head>
<body>
<header>
<h1>🎒 Vítej ve škole, prvňáčku!</h1>
<p>Objev, co všechno tě čeká!</p>
</header>
<section class="menu">
<button onclick="alert('Poznáš školu!')">🏫 Poznej školu</button>
<button onclick="alert('Jdeš na bojovku!')">🗺️ Školní bojovka</button>
<button onclick="startGame()">🎯 Najdi správný obrázek</button>
</section>
<section id="game"></section>
<footer>
© 2025 Tvoje škola
</footer>
<script>
function startGame() {
const game = document.getElementById('game');
game.innerHTML = '<p>Najdi obrázek 🏫!</p>';
const items = ['🍎','🏫','🐶','📚','🚲','✏️'];
const shuffled = items.sort(() => Math.random() - 0.5);
shuffled.forEach(item => {
const box = document.createElement('div');
box.className = 'box';
box.textContent = item;
box.onclick = () => {
if (item === '🏫') {
alert('Správně! Našel jsi školu! 🎉');
} else {
alert('To není škola, zkus znovu!');
}
};
game.appendChild(box);
});
}
</script>
</body>
</html>