Initial commit - Kinderspiele
This commit is contained in:
OpenClaw
@@ -0,0 +1,268 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
||||
<title>KinderWelt - Lernen & Spielen</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; -webkit-tap-highlight-color: transparent; }
|
||||
body {
|
||||
font-family: 'Comic Sans MS', cursive, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh; overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Lock Screen */
|
||||
#lockScreen {
|
||||
position: fixed; top: 0; left: 0; width: 100%; height: 100%;
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
|
||||
display: flex; flex-direction: column; justify-content: center; align-items: center;
|
||||
z-index: 9999;
|
||||
}
|
||||
#lockScreen h1 { color: white; font-size: 48px; margin-bottom: 20px; }
|
||||
#lockScreen p { color: white; font-size: 20px; margin-bottom: 30px; }
|
||||
|
||||
.pin-display { text-align: center; margin-bottom: 30px; }
|
||||
.pin-dots { display: flex; gap: 15px; justify-content: center; margin-bottom: 15px; }
|
||||
.pin-dot { width: 20px; height: 20px; border: 3px solid white; border-radius: 50%; transition: all 0.3s; }
|
||||
.pin-dot.filled { background: white; }
|
||||
.pin-text { color: white; font-size: 20px; min-height: 30px; }
|
||||
.pin-text.pin-error { color: #ff3333; font-weight: bold; }
|
||||
|
||||
.pin-pad { display: grid; grid-template-columns: repeat(3, 80px); gap: 15px; }
|
||||
.pin-btn {
|
||||
background: rgba(255,255,255,0.9); border: none; border-radius: 50%;
|
||||
width: 80px; height: 80px; font-size: 28px; font-weight: bold;
|
||||
cursor: pointer; transition: all 0.1s; touch-action: manipulation;
|
||||
}
|
||||
.pin-btn:active { transform: scale(0.95); background: white; }
|
||||
.pin-btn.unlock { background: #4ade80; color: white; }
|
||||
.pin-btn.unlock:active { background: #22c55e; }
|
||||
|
||||
@keyframes shake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
25% { transform: translateX(-10px); }
|
||||
75% { transform: translateX(10px); }
|
||||
}
|
||||
|
||||
/* Game Screen */
|
||||
#gameScreen { display: none; padding: 20px; }
|
||||
#gameScreen.active { display: block; }
|
||||
|
||||
.menu {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: 20px; max-width: 900px; margin: 0 auto;
|
||||
}
|
||||
.game-card {
|
||||
background: white; border-radius: 20px; padding: 25px 15px;
|
||||
display: flex; flex-direction: column; justify-content: center; align-items: center;
|
||||
cursor: pointer; transition: transform 0.2s; text-decoration: none; color: inherit;
|
||||
box-shadow: 0 4px 15px rgba(0,0,0,0.2);
|
||||
}
|
||||
.game-card:hover { transform: translateY(-5px); }
|
||||
.game-card:active { transform: scale(0.95); }
|
||||
.game-card span { font-size: 50px; margin-bottom: 10px; }
|
||||
.game-card h3 { font-size: 18px; color: #333; text-align: center; }
|
||||
|
||||
.menu-title { text-align: center; color: white; margin-bottom: 30px; }
|
||||
.menu-title h2 { font-size: 32px; margin-bottom: 10px; }
|
||||
.menu-title p { font-size: 16px; opacity: 0.9; }
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.pin-pad { grid-template-columns: repeat(3, 70px); gap: 12px; }
|
||||
.pin-btn { width: 70px; height: 70px; font-size: 24px; }
|
||||
#lockScreen h1 { font-size: 36px; }
|
||||
.game-card span { font-size: 40px; }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Lock Screen -->
|
||||
<div id="lockScreen">
|
||||
<h1>🔒 KinderWelt</h1>
|
||||
<p>Eltern-PIN eingeben</p>
|
||||
<div class="pin-display">
|
||||
<div class="pin-dots">
|
||||
<div class="pin-dot" id="dot0"></div>
|
||||
<div class="pin-dot" id="dot1"></div>
|
||||
<div class="pin-dot" id="dot2"></div>
|
||||
<div class="pin-dot" id="dot3"></div>
|
||||
</div>
|
||||
<p class="pin-text" id="pinText">Bitte PIN eingeben</p>
|
||||
</div>
|
||||
<div class="pin-pad">
|
||||
<button class="pin-btn" onclick="enterPin(1)">1</button>
|
||||
<button class="pin-btn" onclick="enterPin(2)">2</button>
|
||||
<button class="pin-btn" onclick="enterPin(3)">3</button>
|
||||
<button class="pin-btn" onclick="enterPin(4)">4</button>
|
||||
<button class="pin-btn" onclick="enterPin(5)">5</button>
|
||||
<button class="pin-btn" onclick="enterPin(6)">6</button>
|
||||
<button class="pin-btn" onclick="enterPin(7)">7</button>
|
||||
<button class="pin-btn" onclick="enterPin(8)">8</button>
|
||||
<button class="pin-btn" onclick="enterPin(9)">9</button>
|
||||
<button class="pin-btn" onclick="clearPin()">⌫</button>
|
||||
<button class="pin-btn" onclick="enterPin(0)">0</button>
|
||||
<button class="pin-btn unlock" onclick="checkPin()">✓</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Menu -->
|
||||
<div id="gameScreen">
|
||||
<div class="menu-title">
|
||||
<h2>🎮 Spiele-Menü</h2>
|
||||
<p>Wähle ein Spiel!</p>
|
||||
</div>
|
||||
<div class="menu">
|
||||
<a href="spiele/tennis.html" class="game-card">
|
||||
<span>🎾</span>
|
||||
<h3>Tennis</h3>
|
||||
</a>
|
||||
<a href="spiele/tetris.html" class="game-card">
|
||||
<span>🧱</span>
|
||||
<h3>Tetris</h3>
|
||||
</a>
|
||||
<a href="spiele/memory.html" class="game-card">
|
||||
<span>🃏</span>
|
||||
<h3>Memory</h3>
|
||||
</a>
|
||||
<a href="spiele/simonsays.html" class="game-card">
|
||||
<span>🎵</span>
|
||||
<h3>Simon Says</h3>
|
||||
</a>
|
||||
<a href="spiele/buchstaben.html" class="game-card">
|
||||
<span>🔤</span>
|
||||
<h3>Buchstaben</h3>
|
||||
</a>
|
||||
<a href="spiele/zahlen.html" class="game-card">
|
||||
<span>🔢</span>
|
||||
<h3>Zahlen</h3>
|
||||
</a>
|
||||
<a href="spiele/snake.html" class="game-card">
|
||||
<span>🐍</span>
|
||||
<h3>Snake</h3>
|
||||
</a>
|
||||
<a href="spiele/zahlenraten.html" class="game-card">
|
||||
<span>🤔</span>
|
||||
<h3>Zahlen raten</h3>
|
||||
</a>
|
||||
<a href="spiele/malen.html" class="game-card">
|
||||
<span>🎨</span>
|
||||
<h3>Malen</h3>
|
||||
</a>
|
||||
<a href="spiele/simonsays.html" class="game-card">
|
||||
<span>🎵</span>
|
||||
<h3>Simon Says</h3>
|
||||
</a>
|
||||
<a href="spiele/tierlaute.html" class="game-card">
|
||||
<span>🦁</span>
|
||||
<h3>Tierlaute</h3>
|
||||
</a>
|
||||
<a href="spiele/puzzle.html" class="game-card">
|
||||
<span>🧩</span>
|
||||
<h3>Puzzle</h3>
|
||||
</a>
|
||||
<a href="spiele/reaktion.html" class="game-card">
|
||||
<span>⚡</span>
|
||||
<h3>Reaktion</h3>
|
||||
</a>
|
||||
<a href="spiele/zielscheibe.html" class="game-card">
|
||||
<span>🎯</span>
|
||||
<h3>Zielscheibe</h3>
|
||||
</a>
|
||||
<a href="spiele/wuerfel.html" class="game-card">
|
||||
<span>🎲</span>
|
||||
<h3>Würfel</h3>
|
||||
</a>
|
||||
<a href="spiele/klavier.html" class="game-card">
|
||||
<span>🎹</span>
|
||||
<h3>Klavier</h3>
|
||||
</a>
|
||||
<a href="spiele/autorennen.html" class="game-card">
|
||||
<span>🏎️</span>
|
||||
<h3>Autorennen</h3>
|
||||
</a>
|
||||
<a href="spiele/maedn.html" class="game-card">
|
||||
<span>🎲</span>
|
||||
<h3>Mensch ärgere</h3>
|
||||
</a>
|
||||
<a href="spiele/leiterspiel.html" class="game-card">
|
||||
<span>🐍</span>
|
||||
<h3>Leiterspiel</h3>
|
||||
</a>
|
||||
<a href="spiele/schach.html" class="game-card">
|
||||
<span>♟️</span>
|
||||
<h3>Schach</h3>
|
||||
</a>
|
||||
<a href="spiele/halligalli.html" class="game-card">
|
||||
<span>🔔</span>
|
||||
<h3>Halli Galli</h3>
|
||||
</a>
|
||||
<a href="spiele/minesweeper.html" class="game-card">
|
||||
<span>💣</span>
|
||||
<h3>Minesweeper</h3>
|
||||
</a>
|
||||
<a href="spiele/uno.html" class="game-card">
|
||||
<span>🎴</span>
|
||||
<h3>Uno</h3>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Session Check
|
||||
if (sessionStorage.getItem('kinderWelt unlocked') === 'true') {
|
||||
document.getElementById('lockScreen').style.display = 'none';
|
||||
document.getElementById('gameScreen').classList.add('active');
|
||||
}
|
||||
|
||||
// PIN
|
||||
const CORRECT_PIN = '2603';
|
||||
let currentPin = '';
|
||||
|
||||
function enterPin(num) {
|
||||
if (currentPin.length < 4) {
|
||||
currentPin += num;
|
||||
updatePinDisplay();
|
||||
}
|
||||
}
|
||||
|
||||
function clearPin() {
|
||||
currentPin = currentPin.slice(0, -1);
|
||||
updatePinDisplay();
|
||||
}
|
||||
|
||||
function updatePinDisplay() {
|
||||
for (let i = 0; i < 4; i++) {
|
||||
document.getElementById('dot' + i).classList.toggle('filled', i < currentPin.length);
|
||||
}
|
||||
document.getElementById('pinText').textContent = currentPin.length === 0 ? 'Bitte PIN eingeben' : '';
|
||||
document.getElementById('pinText').classList.remove('pin-error');
|
||||
}
|
||||
|
||||
function checkPin() {
|
||||
if (currentPin === CORRECT_PIN) {
|
||||
sessionStorage.setItem('kinderWelt unlocked', 'true');
|
||||
document.getElementById('lockScreen').style.display = 'none';
|
||||
document.getElementById('gameScreen').classList.add('active');
|
||||
} else {
|
||||
document.getElementById('pinText').textContent = 'Falscher PIN!';
|
||||
document.getElementById('pinText').classList.add('pin-error');
|
||||
document.querySelector('.pin-display').style.animation = 'shake 0.5s';
|
||||
setTimeout(() => {
|
||||
currentPin = '';
|
||||
updatePinDisplay();
|
||||
document.querySelector('.pin-display').style.animation = '';
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
// Keyboard support
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key >= '0' && e.key <= '9') enterPin(parseInt(e.key));
|
||||
if (e.key === 'Backspace') clearPin();
|
||||
if (e.key === 'Enter') checkPin();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user