OpenClaw
204 lines
7.9 KiB
Plaintext
204 lines
7.9 KiB
Plaintext
<!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; }
|
|
body {
|
|
font-family: 'Comic Sans MS', cursive, sans-serif;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh; overflow-x: hidden;
|
|
}
|
|
|
|
#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); }
|
|
}
|
|
|
|
#gameScreen { display: none; padding: 20px; }
|
|
#gameScreen.active { display: block; }
|
|
|
|
.menu { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; max-width: 800px; margin: 0 auto; }
|
|
.game-card {
|
|
background: white; border-radius: 20px; padding: 30px;
|
|
display: flex; flex-direction: column; justify-content: center; align-items: center;
|
|
cursor: pointer; transition: transform 0.2s; text-decoration: none; color: inherit;
|
|
}
|
|
.game-card:active { transform: scale(0.95); }
|
|
.game-card span { font-size: 50px; margin-bottom: 10px; }
|
|
.game-card h3 { font-size: 20px; color: #333; }
|
|
</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">
|
|
<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/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/raten.html" class="game-card">
|
|
<span>❓</span>
|
|
<h3>Zahlen raten</h3>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// PIN System
|
|
let pin = '';
|
|
const CORRECT_PIN = '2603';
|
|
|
|
function enterPin(digit) {
|
|
if (pin.length < 4) {
|
|
pin += digit;
|
|
updatePinDisplay();
|
|
}
|
|
}
|
|
|
|
function clearPin() {
|
|
pin = pin.slice(0, -1);
|
|
updatePinDisplay();
|
|
}
|
|
|
|
function updatePinDisplay() {
|
|
// Update dots
|
|
for (let i = 0; i < 4; i++) {
|
|
const dot = document.getElementById('dot' + i);
|
|
if (i < pin.length) {
|
|
dot.classList.add('filled');
|
|
} else {
|
|
dot.classList.remove('filled');
|
|
}
|
|
}
|
|
|
|
// Update text
|
|
const text = document.getElementById('pinText');
|
|
if (pin.length === 0) {
|
|
text.textContent = 'Bitte PIN eingeben';
|
|
text.className = 'pin-text';
|
|
} else if (pin.length < 4) {
|
|
text.textContent = 'PIN eingeben...';
|
|
text.className = 'pin-text';
|
|
} else {
|
|
text.textContent = '✓ PIN vollständig';
|
|
text.className = 'pin-text';
|
|
}
|
|
}
|
|
|
|
function checkPin() {
|
|
if (pin === CORRECT_PIN) {
|
|
// Unlock!
|
|
document.getElementById('lockScreen').style.display = 'none';
|
|
document.getElementById('gameScreen').classList.add('active');
|
|
} else {
|
|
// Wrong PIN
|
|
const text = document.getElementById('pinText');
|
|
text.textContent = '✗ Falscher PIN!';
|
|
text.className = 'pin-text pin-error';
|
|
|
|
// Shake animation
|
|
const display = document.querySelector('.pin-display');
|
|
display.style.animation = 'shake 0.5s';
|
|
|
|
setTimeout(() => {
|
|
pin = '';
|
|
updatePinDisplay();
|
|
display.style.animation = '';
|
|
}, 1000);
|
|
}
|
|
}
|
|
|
|
// Keyboard support
|
|
document.addEventListener('keydown', (e) => {
|
|
if (document.getElementById('lockScreen').style.display === 'none') return;
|
|
|
|
if (e.key >= '0' && e.key <= '9') {
|
|
enterPin(e.key);
|
|
} else if (e.key === 'Backspace') {
|
|
clearPin();
|
|
} else if (e.key === 'Enter') {
|
|
checkPin();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |