652 lines
16 KiB
HTML
652 lines
16 KiB
HTML
<!doctype html>
|
||
<html lang="ru">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>Буба учит цвета — Эпизод 1</title>
|
||
<style>
|
||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||
body {
|
||
font-family: 'Comic Sans MS', 'Arial', sans-serif;
|
||
overflow: hidden;
|
||
background: #87CEEB;
|
||
}
|
||
|
||
.scene {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* Небо */
|
||
.sky {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 60%;
|
||
background: linear-gradient(to bottom, #87CEEB 0%, #B0E0F6 100%);
|
||
}
|
||
|
||
/* Солнце */
|
||
.sun {
|
||
position: absolute;
|
||
top: 30px;
|
||
right: 80px;
|
||
width: 80px;
|
||
height: 80px;
|
||
background: #FFD700;
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 60px #FFD700, 0 0 100px #FFA500;
|
||
animation: sunPulse 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes sunPulse {
|
||
0%, 100% { transform: scale(1); }
|
||
50% { transform: scale(1.1); }
|
||
}
|
||
|
||
/* Облака */
|
||
.cloud {
|
||
position: absolute;
|
||
background: white;
|
||
border-radius: 50px;
|
||
animation: cloudMove 20s linear infinite;
|
||
}
|
||
|
||
.cloud::before, .cloud::after {
|
||
content: '';
|
||
position: absolute;
|
||
background: white;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.cloud1 { width: 120px; height: 50px; top: 60px; left: -120px; }
|
||
.cloud1::before { width: 60px; height: 60px; top: -30px; left: 20px; }
|
||
.cloud1::after { width: 50px; height: 50px; top: -20px; left: 50px; }
|
||
|
||
.cloud2 { width: 100px; height: 40px; top: 120px; left: -100px; animation-delay: 8s; }
|
||
.cloud2::before { width: 50px; height: 50px; top: -25px; left: 15px; }
|
||
.cloud2::after { width: 40px; height: 40px; top: -15px; left: 40px; }
|
||
|
||
@keyframes cloudMove {
|
||
0% { left: -150px; }
|
||
100% { left: 100vw; }
|
||
}
|
||
|
||
/* Земля */
|
||
.ground {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 40%;
|
||
background: linear-gradient(to bottom, #90EE90 0%, #228B22 100%);
|
||
border-radius: 50% 50% 0 0 / 20% 20% 0 0;
|
||
}
|
||
|
||
/* Дерево */
|
||
.tree {
|
||
position: absolute;
|
||
bottom: 100px;
|
||
left: 100px;
|
||
}
|
||
|
||
.tree-trunk {
|
||
width: 30px;
|
||
height: 80px;
|
||
background: #8B4513;
|
||
margin: 0 auto;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.tree-top {
|
||
width: 100px;
|
||
height: 100px;
|
||
background: #228B22;
|
||
border-radius: 50%;
|
||
position: relative;
|
||
top: 10px;
|
||
animation: treeSway 3s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes treeSway {
|
||
0%, 100% { transform: rotate(-5deg); }
|
||
50% { transform: rotate(5deg); }
|
||
}
|
||
|
||
/* Река */
|
||
.river {
|
||
position: absolute;
|
||
bottom: 50px;
|
||
right: 50px;
|
||
width: 250px;
|
||
height: 80px;
|
||
background: linear-gradient(to right, #4169E1, #87CEEB);
|
||
border-radius: 50%;
|
||
animation: riverFlow 2s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes riverFlow {
|
||
0%, 100% { transform: scaleX(1); }
|
||
50% { transform: scaleX(1.05); }
|
||
}
|
||
|
||
/* Персонаж - Буба (медвежонок) */
|
||
.buba {
|
||
position: absolute;
|
||
bottom: 120px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
transition: all 1s ease;
|
||
}
|
||
|
||
.buba-body {
|
||
width: 100px;
|
||
height: 120px;
|
||
background: #8B4513;
|
||
border-radius: 50% 50% 45% 45%;
|
||
position: relative;
|
||
animation: bubaBounce 1s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes bubaBounce {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-10px); }
|
||
}
|
||
|
||
.buba-head {
|
||
width: 90px;
|
||
height: 85px;
|
||
background: #8B4513;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: -70px;
|
||
left: 5px;
|
||
}
|
||
|
||
.buba-ear {
|
||
width: 30px;
|
||
height: 30px;
|
||
background: #8B4513;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: -15px;
|
||
}
|
||
|
||
.buba-ear.left { left: 5px; }
|
||
.buba-ear.right { right: 5px; }
|
||
|
||
.buba-ear-inner {
|
||
width: 18px;
|
||
height: 18px;
|
||
background: #DEB887;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 6px;
|
||
left: 6px;
|
||
}
|
||
|
||
.buba-eye {
|
||
width: 18px;
|
||
height: 22px;
|
||
background: white;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 20px;
|
||
animation: blink 4s ease-in-out infinite;
|
||
}
|
||
|
||
.buba-eye.left { left: 20px; }
|
||
.buba-eye.right { right: 20px; }
|
||
|
||
@keyframes blink {
|
||
0%, 45%, 55%, 100% { transform: scaleY(1); }
|
||
50% { transform: scaleY(0.1); }
|
||
}
|
||
|
||
.buba-pupil {
|
||
width: 10px;
|
||
height: 14px;
|
||
background: #2D2D44;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
top: 4px;
|
||
left: 4px;
|
||
}
|
||
|
||
.buba-snout {
|
||
width: 40px;
|
||
height: 30px;
|
||
background: #DEB887;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
bottom: 15px;
|
||
left: 25px;
|
||
}
|
||
|
||
.buba-nose {
|
||
width: 20px;
|
||
height: 15px;
|
||
background: #2D2D44;
|
||
border-radius: 50% 50% 40% 40%;
|
||
position: absolute;
|
||
top: 5px;
|
||
left: 10px;
|
||
}
|
||
|
||
.buba-mouth {
|
||
width: 20px;
|
||
height: 10px;
|
||
border: 3px solid #2D2D44;
|
||
border-color: transparent transparent #2D2D44 transparent;
|
||
border-radius: 50%;
|
||
position: absolute;
|
||
bottom: 8px;
|
||
left: 10px;
|
||
}
|
||
|
||
.buba-arm {
|
||
width: 25px;
|
||
height: 50px;
|
||
background: #8B4513;
|
||
border-radius: 15px;
|
||
position: absolute;
|
||
top: 30px;
|
||
}
|
||
|
||
.buba-arm.left { left: -15px; transform: rotate(20deg); }
|
||
.buba-arm.right { right: -15px; transform: rotate(-20deg); }
|
||
|
||
.buba-leg {
|
||
width: 30px;
|
||
height: 40px;
|
||
background: #8B4513;
|
||
border-radius: 15px;
|
||
position: absolute;
|
||
bottom: -30px;
|
||
}
|
||
|
||
.buba-leg.left { left: 15px; }
|
||
.buba-leg.right { right: 15px; }
|
||
|
||
/* Объекты для цветов */
|
||
.object {
|
||
position: absolute;
|
||
opacity: 0;
|
||
transform: scale(0);
|
||
transition: all 0.5s ease;
|
||
}
|
||
|
||
.object.show {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
|
||
/* Яблоко - красное */
|
||
.apple {
|
||
bottom: 150px;
|
||
left: 200px;
|
||
width: 60px;
|
||
height: 60px;
|
||
background: radial-gradient(circle at 30% 30%, #FF6B6B, #C41E3A);
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.apple::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: -10px;
|
||
left: 25px;
|
||
width: 10px;
|
||
height: 15px;
|
||
background: #8B4513;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.apple::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: -8px;
|
||
left: 30px;
|
||
width: 25px;
|
||
height: 15px;
|
||
background: #228B22;
|
||
border-radius: 50% 50% 0 0;
|
||
}
|
||
|
||
/* Солнце жёлтое (дополнительное) */
|
||
.sun-small {
|
||
bottom: 200px;
|
||
right: 350px;
|
||
width: 70px;
|
||
height: 70px;
|
||
background: radial-gradient(circle at 30% 30%, #FFFF99, #FFD700);
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 30px #FFD700;
|
||
}
|
||
|
||
/* Трава - зелёная */
|
||
.grass {
|
||
bottom: 80px;
|
||
left: 30%;
|
||
width: 200px;
|
||
height: 40px;
|
||
background: linear-gradient(to bottom, #32CD32, #228B22);
|
||
border-radius: 50% 50% 0 0;
|
||
}
|
||
|
||
/* Река - синяя */
|
||
.river-blue {
|
||
bottom: 60px;
|
||
right: 100px;
|
||
width: 180px;
|
||
height: 50px;
|
||
background: linear-gradient(to right, #1E90FF, #4169E1, #1E90FF);
|
||
border-radius: 50%;
|
||
animation: wave 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes wave {
|
||
0%, 100% { transform: scaleY(1); }
|
||
50% { transform: scaleY(1.2); }
|
||
}
|
||
|
||
/* Текст песни */
|
||
.song-text {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%) scale(0);
|
||
font-size: 48px;
|
||
font-weight: bold;
|
||
color: white;
|
||
text-shadow: 3px 3px 0 #333, -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333;
|
||
white-space: nowrap;
|
||
opacity: 0;
|
||
transition: all 0.5s ease;
|
||
z-index: 100;
|
||
text-align: center;
|
||
}
|
||
|
||
.song-text.show {
|
||
transform: translate(-50%, -50%) scale(1);
|
||
opacity: 1;
|
||
}
|
||
|
||
/* Контролы */
|
||
.controls {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
gap: 15px;
|
||
z-index: 200;
|
||
}
|
||
|
||
.btn {
|
||
padding: 12px 25px;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
border: none;
|
||
border-radius: 30px;
|
||
cursor: pointer;
|
||
background: white;
|
||
color: #333;
|
||
box-shadow: 0 5px 20px rgba(0,0,0,0.3);
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.btn:hover {
|
||
transform: scale(1.1);
|
||
background: #FFD700;
|
||
}
|
||
|
||
.btn-play {
|
||
background: #FF6B9D;
|
||
color: white;
|
||
}
|
||
|
||
/* Прогресс бар */
|
||
.progress {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 8px;
|
||
background: rgba(0,0,0,0.3);
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 100%;
|
||
background: linear-gradient(to right, #FF6B9D, #FFD700, #32CD32, #4169E1);
|
||
width: 0%;
|
||
transition: width 0.3s ease;
|
||
}
|
||
|
||
/* Финальная сцена */
|
||
.dance-mode .buba {
|
||
animation: dance 0.5s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes dance {
|
||
0%, 100% { transform: translateX(-50%) rotate(-10deg); }
|
||
50% { transform: translateX(-50%) rotate(10deg); }
|
||
}
|
||
|
||
.dance-mode .object {
|
||
animation: bounce 0.5s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes bounce {
|
||
0%, 100% { transform: translateY(0); }
|
||
50% { transform: translateY(-20px); }
|
||
}
|
||
|
||
.final-text {
|
||
position: absolute;
|
||
top: 20%;
|
||
left: 50%;
|
||
transform: translateX(-50%) scale(0);
|
||
font-size: 56px;
|
||
font-weight: bold;
|
||
color: #FFD700;
|
||
text-shadow: 3px 3px 0 #FF6B9D;
|
||
opacity: 0;
|
||
transition: all 0.5s ease;
|
||
z-index: 100;
|
||
text-align: center;
|
||
}
|
||
|
||
.final-text.show {
|
||
transform: translateX(-50%) scale(1);
|
||
opacity: 1;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="scene" id="scene">
|
||
<!-- Небо -->
|
||
<div class="sky"></div>
|
||
|
||
<!-- Солнце -->
|
||
<div class="sun"></div>
|
||
|
||
<!-- Облака -->
|
||
<div class="cloud cloud1"></div>
|
||
<div class="cloud cloud2"></div>
|
||
|
||
<!-- Земля -->
|
||
<div class="ground"></div>
|
||
|
||
<!-- Дерево -->
|
||
<div class="tree">
|
||
<div class="tree-top"></div>
|
||
<div class="tree-trunk"></div>
|
||
</div>
|
||
|
||
<!-- Река -->
|
||
<div class="river"></div>
|
||
|
||
<!-- Буба -->
|
||
<div class="buba" id="buba">
|
||
<div class="buba-body">
|
||
<div class="buba-head">
|
||
<div class="buba-ear left"><div class="buba-ear-inner"></div></div>
|
||
<div class="buba-ear right"><div class="buba-ear-inner"></div></div>
|
||
<div class="buba-eye left"><div class="buba-pupil"></div></div>
|
||
<div class="buba-eye right"><div class="buba-pupil"></div></div>
|
||
<div class="buba-snout">
|
||
<div class="buba-nose"></div>
|
||
<div class="buba-mouth"></div>
|
||
</div>
|
||
</div>
|
||
<div class="buba-arm left"></div>
|
||
<div class="buba-arm right"></div>
|
||
<div class="buba-leg left"></div>
|
||
<div class="buba-leg right"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Объекты -->
|
||
<div class="object apple" id="apple"></div>
|
||
<div class="object sun-small" id="sunSmall"></div>
|
||
<div class="object grass" id="grass"></div>
|
||
<div class="object river-blue" id="riverBlue"></div>
|
||
|
||
<!-- Текст песни -->
|
||
<div class="song-text" id="songText"></div>
|
||
|
||
<!-- Финальный текст -->
|
||
<div class="final-text" id="finalText">🎉 Молодцы! 🎉</div>
|
||
|
||
<!-- Прогресс -->
|
||
<div class="progress">
|
||
<div class="progress-bar" id="progressBar"></div>
|
||
</div>
|
||
|
||
<!-- Контролы -->
|
||
<div class="controls">
|
||
<button class="btn btn-play" onclick="playEpisode()">▶ Играть</button>
|
||
<button class="btn" onclick="resetEpisode()">↺ Заново</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
let currentStep = 0;
|
||
let isPlaying = false;
|
||
|
||
const steps = [
|
||
{
|
||
object: 'apple',
|
||
text: '🔴 Красный, красный — яблочко!',
|
||
color: '#C41E3A'
|
||
},
|
||
{
|
||
object: 'sunSmall',
|
||
text: '🟡 Жёлтый — солнышко!',
|
||
color: '#FFD700'
|
||
},
|
||
{
|
||
object: 'grass',
|
||
text: '🟢 Зелёный — травушка!',
|
||
color: '#32CD32'
|
||
},
|
||
{
|
||
object: 'riverBlue',
|
||
text: '🔵 Синий — речушка!',
|
||
color: '#4169E1'
|
||
}
|
||
];
|
||
|
||
function showStep(stepIndex) {
|
||
const step = steps[stepIndex];
|
||
const obj = document.getElementById(step.object);
|
||
const text = document.getElementById('songText');
|
||
|
||
// Показать объект
|
||
obj.classList.add('show');
|
||
|
||
// Показать текст
|
||
text.textContent = step.text;
|
||
text.style.color = step.color;
|
||
text.style.textShadow = `3px 3px 0 ${step.color}, -1px -1px 0 #333, 1px -1px 0 #333, -1px 1px 0 #333`;
|
||
text.classList.add('show');
|
||
|
||
// Обновить прогресс
|
||
const progress = ((stepIndex + 1) / steps.length) * 100;
|
||
document.getElementById('progressBar').style.width = progress + '%';
|
||
|
||
// Скрыть текст через 2.5 секунды
|
||
setTimeout(() => {
|
||
text.classList.remove('show');
|
||
}, 2500);
|
||
}
|
||
|
||
function playEpisode() {
|
||
if (isPlaying) return;
|
||
isPlaying = true;
|
||
|
||
const playBtn = document.querySelector('.btn-play');
|
||
playBtn.textContent = '⏸ Играет...';
|
||
playBtn.disabled = true;
|
||
|
||
let step = 0;
|
||
|
||
const interval = setInterval(() => {
|
||
if (step < steps.length) {
|
||
showStep(step);
|
||
step++;
|
||
} else {
|
||
clearInterval(interval);
|
||
finishEpisode();
|
||
}
|
||
}, 3000);
|
||
}
|
||
|
||
function finishEpisode() {
|
||
const scene = document.getElementById('scene');
|
||
const finalText = document.getElementById('finalText');
|
||
|
||
scene.classList.add('dance-mode');
|
||
finalText.classList.add('show');
|
||
|
||
const playBtn = document.querySelector('.btn-play');
|
||
playBtn.textContent = '✅ Сыграно';
|
||
playBtn.disabled = false;
|
||
}
|
||
|
||
function resetEpisode() {
|
||
currentStep = 0;
|
||
isPlaying = false;
|
||
|
||
// Скрыть все объекты
|
||
document.querySelectorAll('.object').forEach(obj => {
|
||
obj.classList.remove('show');
|
||
});
|
||
|
||
// Скрыть тексты
|
||
document.getElementById('songText').classList.remove('show');
|
||
document.getElementById('finalText').classList.remove('show');
|
||
|
||
// Убрать танец
|
||
document.getElementById('scene').classList.remove('dance-mode');
|
||
|
||
// Сбросить прогресс
|
||
document.getElementById('progressBar').style.width = '0%';
|
||
|
||
const playBtn = document.querySelector('.btn-play');
|
||
playBtn.textContent = '▶ Играть';
|
||
playBtn.disabled = false;
|
||
}
|
||
|
||
// Автовоспроизведение при загрузке
|
||
window.addEventListener('load', () => {
|
||
setTimeout(playEpisode, 1000);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|