OpenClaw
251 lines
9.8 KiB
HTML
251 lines
9.8 KiB
HTML
<!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>Würfel - KinderWelt</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
|
|
body {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
min-height: 100vh; display: flex; flex-direction: column; align-items: center;
|
|
font-family: 'Comic Sans MS', cursive, sans-serif; padding: 20px;
|
|
}
|
|
h1 { color: white; margin-bottom: 15px; font-size: 26px; }
|
|
.dice-container {
|
|
perspective: 1000px; margin: 30px 0;
|
|
}
|
|
.dice {
|
|
width: 100px; height: 100px; position: relative;
|
|
transform-style: preserve-3d; transition: transform 1s ease-out;
|
|
}
|
|
.dice.rolling { animation: roll 1s ease-out; }
|
|
@keyframes roll {
|
|
0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
|
|
100% { transform: rotateX(720deg) rotateY(720deg) rotateZ(360deg); }
|
|
}
|
|
.face {
|
|
position: absolute; width: 100px; height: 100px;
|
|
background: white; border: 3px solid #333; border-radius: 15px;
|
|
box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
|
|
}
|
|
.face-1 { transform: rotateY(0deg) translateZ(50px); }
|
|
.face-2 { transform: rotateY(90deg) translateZ(50px); }
|
|
.face-3 { transform: rotateY(180deg) translateZ(50px); }
|
|
.face-4 { transform: rotateY(-90deg) translateZ(50px); }
|
|
.face-5 { transform: rotateX(90deg) translateZ(50px); }
|
|
.face-6 { transform: rotateX(-90deg) translateZ(50px); }
|
|
|
|
.dot {
|
|
width: 20px; height: 20px; background: #333; border-radius: 50%;
|
|
position: absolute; box-shadow: inset 2px 2px 4px rgba(0,0,0,0.3);
|
|
}
|
|
|
|
/* Seite 1: Eins in der Mitte */
|
|
.face-1 .dot1 { top: 50%; left: 50%; transform: translate(-50%, -50%); }
|
|
|
|
/* Seite 2: Zwei in diagonalen Ecken */
|
|
.face-2 .dot1 { top: 20%; left: 20%; }
|
|
.face-2 .dot2 { bottom: 20%; right: 20%; }
|
|
|
|
/* Seite 3: Drei diagonal */
|
|
.face-3 .dot1 { top: 20%; left: 20%; }
|
|
.face-3 .dot2 { top: 50%; left: 50%; transform: translate(-50%, -50%); }
|
|
.face-3 .dot3 { bottom: 20%; right: 20%; }
|
|
|
|
/* Seite 4: Vier in allen Ecken */
|
|
.face-4 .dot1 { top: 20%; left: 20%; }
|
|
.face-4 .dot2 { top: 20%; right: 20%; }
|
|
.face-4 .dot3 { bottom: 20%; left: 20%; }
|
|
.face-4 .dot4 { bottom: 20%; right: 20%; }
|
|
|
|
/* Seite 5: Fünf (Vier Ecken + Mitte) */
|
|
.face-5 .dot1 { top: 20%; left: 20%; } /* Oben links */
|
|
.face-5 .dot2 { top: 20%; right: 20%; } /* Oben rechts */
|
|
.face-5 .dot3 { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Mitte */
|
|
.face-5 .dot4 { bottom: 20%; left: 20%; } /* Unten links */
|
|
.face-5 .dot5 { bottom: 20%; right: 20%; } /* Unten rechts */
|
|
|
|
/* Seite 6: Sechs (zwei Reihen zu je drei) */
|
|
.face-6 .dot1 { top: 20%; left: 25%; }
|
|
.face-6 .dot2 { top: 20%; right: 25%; }
|
|
.face-6 .dot3 { top: 50%; left: 25%; transform: translateY(-50%); }
|
|
.face-6 .dot4 { top: 50%; right: 25%; transform: translateY(-50%); }
|
|
.face-6 .dot5 { bottom: 20%; left: 25%; }
|
|
.face-6 .dot6 { bottom: 20%; right: 25%; }
|
|
|
|
.result {
|
|
color: white; font-size: 48px; margin: 20px 0; min-height: 60px;
|
|
text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: bold;
|
|
}
|
|
.stats {
|
|
color: white; font-size: 18px; margin: 10px 0;
|
|
}
|
|
.history {
|
|
display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
|
|
max-width: 300px; margin: 15px 0;
|
|
}
|
|
.history-item {
|
|
width: 40px; height: 40px; background: white; border-radius: 8px;
|
|
display: flex; align-items: center; justify-content: center;
|
|
font-size: 20px; font-weight: bold; box-shadow: 0 3px 10px rgba(0,0,0,0.3);
|
|
}
|
|
.controls { display: flex; gap: 15px; margin-top: 20px; }
|
|
.btn {
|
|
background: white; border: none; border-radius: 10px; padding: 15px 40px;
|
|
font-size: 18px; cursor: pointer; font-family: inherit; font-weight: bold;
|
|
}
|
|
.btn-roll { background: #4ade80; color: white; }
|
|
.btn-roll:hover { transform: scale(1.05); }
|
|
.btn-roll:active { transform: scale(0.95); }
|
|
.btn-back { background: #ff6b6b; color: white; text-decoration: none; padding: 15px 25px; }
|
|
|
|
.space-hint { color: #ccc; margin-top: 10px; font-size: 14px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🎲 Würfel</h1>
|
|
|
|
<div class="dice-container">
|
|
<div class="dice" id="dice" onclick="roll()">
|
|
<!-- Seite 1: 1 Punkt -->
|
|
<div class="face face-1">
|
|
<div class="dot dot1"></div>
|
|
</div>
|
|
|
|
<!-- Seite 2: 2 Punkte -->
|
|
<div class="face face-2">
|
|
<div class="dot dot1"></div>
|
|
<div class="dot dot2"></div>
|
|
</div>
|
|
|
|
<!-- Seite 3: 3 Punkte -->
|
|
<div class="face face-3">
|
|
<div class="dot dot1"></div>
|
|
<div class="dot dot2"></div>
|
|
<div class="dot dot3"></div>
|
|
</div>
|
|
|
|
<!-- Seite 4: 4 Punkte -->
|
|
<div class="face face-4">
|
|
<div class="dot dot1"></div>
|
|
<div class="dot dot2"></div>
|
|
<div class="dot dot3"></div>
|
|
<div class="dot dot4"></div>
|
|
</div>
|
|
|
|
<!-- Seite 5: 5 Punkte (Vier Ecken + Mitte) -->
|
|
<div class="face face-5">
|
|
<div class="dot dot1"></div>
|
|
<div class="dot dot2"></div>
|
|
<div class="dot dot3"></div>
|
|
<div class="dot dot4"></div>
|
|
<div class="dot dot5"></div>
|
|
</div>
|
|
|
|
<!-- Seite 6: 6 Punkte -->
|
|
<div class="face face-6">
|
|
<div class="dot dot1"></div>
|
|
<div class="dot dot2"></div>
|
|
<div class="dot dot3"></div>
|
|
<div class="dot dot4"></div>
|
|
<div class="dot dot5"></div>
|
|
<div class="dot dot6"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="result" id="result">Klicke oder drücke Leertaste!</div>
|
|
|
|
<div class="stats">Würfe: <span id="rolls">0</span> | Summe: <span id="total">0</span></div>
|
|
|
|
<div class="history" id="history"></div>
|
|
|
|
<div class="controls">
|
|
<button class="btn btn-roll" id="rollBtn" onclick="roll()">🎲 Würfeln</button>
|
|
<a href="../index.html" class="btn btn-back">⬅️ Zurück</a>
|
|
</div>
|
|
|
|
<p class="space-hint">💡 Tipp: Du kannst auch die LEERTASTE drücken!</p>
|
|
|
|
<script>
|
|
let rolling = false;
|
|
let rollCount = 0;
|
|
let total = 0;
|
|
|
|
const rotations = {
|
|
1: 'rotateX(0deg) rotateY(0deg)',
|
|
2: 'rotateX(0deg) rotateY(-90deg)',
|
|
3: 'rotateX(0deg) rotateY(180deg)',
|
|
4: 'rotateX(0deg) rotateY(90deg)',
|
|
5: 'rotateX(-90deg) rotateY(0deg)',
|
|
6: 'rotateX(90deg) rotateY(0deg)'
|
|
};
|
|
|
|
const dice = document.getElementById('dice');
|
|
const result = document.getElementById('result');
|
|
const rollBtn = document.getElementById('rollBtn');
|
|
|
|
function roll() {
|
|
if (rolling) return;
|
|
rolling = true;
|
|
rollBtn.disabled = true;
|
|
|
|
// Animation
|
|
dice.classList.add('rolling');
|
|
result.textContent = '🎲...';
|
|
|
|
// Zufällige Zahl
|
|
const roll = Math.floor(Math.random() * 6) + 1;
|
|
|
|
setTimeout(() => {
|
|
dice.classList.remove('rolling');
|
|
dice.style.transform = rotations[roll];
|
|
|
|
// Ergebnis anzeigen
|
|
result.innerHTML = `<span style="font-size:60px">${roll}</span>`;
|
|
|
|
// Statistik
|
|
rollCount++;
|
|
total += roll;
|
|
document.getElementById('rolls').textContent = rollCount;
|
|
document.getElementById('total').textContent = total;
|
|
|
|
// Historie
|
|
const history = document.getElementById('history');
|
|
const item = document.createElement('div');
|
|
item.className = 'history-item';
|
|
item.textContent = roll;
|
|
// Farben: Grün für 5-6, Gelb für 3-4, Rot für 1-2
|
|
if (roll >= 5) item.style.background = '#86efac';
|
|
else if (roll >= 3) item.style.background = '#feca57';
|
|
else item.style.background = '#fca5a5';
|
|
|
|
history.insertBefore(item, history.firstChild);
|
|
if (history.children.length > 10) {
|
|
history.removeChild(history.lastChild);
|
|
}
|
|
|
|
// TTS
|
|
if ('speechSynthesis' in window) {
|
|
const utterance = new SpeechSynthesisUtterance(roll.toString());
|
|
utterance.lang = 'de-DE';
|
|
speechSynthesis.speak(utterance);
|
|
}
|
|
|
|
rolling = false;
|
|
rollBtn.disabled = false;
|
|
|
|
}, 1000);
|
|
}
|
|
|
|
// Leertaste
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.code === 'Space') {
|
|
e.preventDefault();
|
|
roll();
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |