<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dino Egg Timer</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
body {
background-color: #1a1a2e; /* Dark Bedtime Blue */
color: #fff;
font-family: 'Fredoka One', cursive;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
overflow: hidden;
text-align: center;
}
/* --- Controls --- */
.controls {
margin-bottom: 20px;
z-index: 10;
}
input[type=range] {
width: 200px;
accent-color: #e94560;
}
button {
background-color: #e94560;
color: white;
border: none;
padding: 10px 20px;
font-family: 'Fredoka One', cursive;
font-size: 1.2rem;
border-radius: 20px;
cursor: pointer;
margin: 5px;
transition: transform 0.1s;
}
button:active {
transform: scale(0.95);
}
button.reset {
background-color: #16213e;
border: 2px solid #e94560;
}
.time-display {
font-size: 3rem;
margin: 10px 0;
color: #ffd700;
}
/* --- The Stage --- */
.stage {
position: relative;
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
/* --- The Egg --- */
.egg {
width: 180px;
height: 240px;
background-color: #fdf6e3;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
position: absolute;
box-shadow: inset -20px -20px 30px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.5);
cursor: pointer;
transition: all 0.5s ease;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
/* Egg Spots */
.egg::after {
content: '';
position: absolute;
width: 20px;
height: 30px;
background-color: #e0d6b6;
border-radius: 50%;
top: 40px;
left: 50px;
box-shadow: 60px 20px 0 #e0d6b6, 20px 80px 0 #e0d6b6, -10px 100px 0 #e0d6b6;
}
/* Animations */
@keyframes gentle-wobble {
0%, 100% { transform: rotate(0deg); }
25% { transform: rotate(3deg); }
75% { transform: rotate(-3deg); }
}
@keyframes intense-shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1px); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
.wobble { animation: gentle-wobble 2s infinite ease-in-out; }
.shake { animation: intense-shake 0.5s infinite; }
.cracked {
transform: scale(1.1);
opacity: 0;
pointer-events: none;
}
/* --- The Dino --- */
.dino-container {
font-size: 8rem;
position: absolute;
z-index: 1;
transform: scale(0);
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.dino-show {
transform: scale(1);
}
.dino-name {
font-size: 1.5rem;
margin-top: 10px;
opacity: 0;
transition: opacity 1s;
}
</style>
</head>
<body>
<div class="controls" id="controlsPanel">
<label for="timeInput">Set Time (Minutes): <span id="timeVal">5</span></label><br>
<input type="range" id="timeInput" min="1" max="15" value="5" oninput="updateTimeVal(this.value)">
<br><br>
<button onclick="startTimer()">Start Timer</button>
</div>
<div class="time-display" id="display">05:00</div>
<div class="stage">
<div class="egg" id="egg"></div>
<div class="dino-container" id="dino">
<div id="dinoEmoji">🦖</div>
<div class="dino-name" id="dinoName">T-Rex</div>
</div>
</div>
<div style="margin-top: 20px;">
<button class="reset" onclick="resetApp()">Reset Egg</button>
</div>
<audio id="ambientSound" loop>
<source src="https://actions.google.com/sounds/v1/nature/crickets_chirping.ogg" type="audio/ogg">
</audio>
<audio id="roarSound">
<source src="https://actions.google.com/sounds/v1/animals/t_rex_roar.ogg" type="audio/ogg">
</audio>
<script>
let timeInput = document.getElementById('timeInput');
let display = document.getElementById('display');
let egg = document.getElementById('egg');
let dinoContainer = document.getElementById('dino');
let dinoEmoji = document.getElementById('dinoEmoji');
let dinoName = document.getElementById('dinoName');
let ambient = document.getElementById('ambientSound');
let roar = document.getElementById('roarSound');
let controlsPanel = document.getElementById('controlsPanel');
let countdown;
let timeLeft;
let isRunning = false;
// Dino Database
const dinos = [
{ emoji: '🦖', name: 'T-Rex' },
{ emoji: '🦕', name: 'Brachiosaurus' },
{ emoji: '🐊', name: 'Spinosaurus' }, // Using Croc for Spino
{ emoji: '🦎', name: 'Velociraptor' },
{ emoji: '🐢', name: 'Ankylosaurus' }, // Using Turtle for Ankylo
{ emoji: '🐓', name: 'Compy' }, // Chicken for Compy (closest ancestor!)
{ emoji: '🐉', name: 'Pterodactyl' }
];
function updateTimeVal(val) {
document.getElementById('timeVal').innerText = val;
let mins = parseInt(val);
display.innerText = (mins < 10 ? "0" : "") + mins + ":00";
}
function startTimer() {
if (isRunning) return;
let minutes = parseInt(timeInput.value);
timeLeft = minutes * 60;
isRunning = true;
controlsPanel.style.display = 'none'; // Hide settings to reduce distraction
// Start Audio (Volume low for bedtime)
ambient.volume = 0.3;
ambient.play().catch(e => console.log("Audio play failed (user interaction needed first)"));
// Add gentle wobble
egg.classList.add('wobble');
countdown = setInterval(() => {
timeLeft--;
displayTime(timeLeft);
// Last 10 seconds: Intense shake!
if (timeLeft <= 10 && timeLeft > 0) {
egg.classList.remove('wobble');
egg.classList.add('shake');
}
if (timeLeft <= 0) {
clearInterval(countdown);
hatchEgg();
}
}, 1000);
}
function displayTime(seconds) {
let m = Math.floor(seconds / 60);
let s = seconds % 60;
display.innerText = `${m < 10 ? '0' : ''}${m}:${s < 10 ? '0' : ''}${s}`;
}
function hatchEgg() {
// Stop ambient noise
ambient.pause();
ambient.currentTime = 0;
// Visual Hatch
egg.classList.remove('shake', 'wobble');
egg.classList.add('cracked');
// Select Random Dino
const randomDino = dinos[Math.floor(Math.random() * dinos.length)];
dinoEmoji.innerText = randomDino.emoji;
dinoName.innerText = randomDino.name;
// Show Dino
setTimeout(() => {
dinoContainer.classList.add('dino-show');
dinoName.style.opacity = '1';
// Play Roar
roar.volume = 0.6;
roar.play();
}, 300);
}
function resetApp() {
clearInterval(countdown);
isRunning = false;
// Reset UI
egg.classList.remove('cracked', 'shake', 'wobble');
dinoContainer.classList.remove('dino-show');
dinoName.style.opacity = '0';
controlsPanel.style.display = 'block';
// Reset Audio
ambient.pause();
ambient.currentTime = 0;
roar.pause();
roar.currentTime = 0;
// Reset Time
updateTimeVal(timeInput.value);
}
</script>
</body>
</html>