Compare commits
2 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| f8bec73dec | |||
| 413b64acdf |
651
episode1.html
Normal file
651
episode1.html
Normal file
@ -0,0 +1,651 @@
|
|||||||
|
<!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>
|
||||||
352
index.html
352
index.html
@ -4,153 +4,309 @@
|
|||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<title>Весёлые друзья — Музыкальный городок</title>
|
<title>Весёлые друзья — Музыкальный городок</title>
|
||||||
<link rel="stylesheet" href="style.css">
|
<style>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
|
||||||
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;900&display=swap" rel="stylesheet">
|
|
||||||
|
.hero {
|
||||||
|
background: linear-gradient(135deg, #ff6b9d, #ffd700, #87ceeb);
|
||||||
|
min-height: 100vh;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 40px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-size: 48px;
|
||||||
|
color: white;
|
||||||
|
text-shadow: 3px 3px 0 #ff6b9d;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .subtitle {
|
||||||
|
font-size: 28px;
|
||||||
|
color: #ffd700;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero p {
|
||||||
|
font-size: 18px;
|
||||||
|
color: white;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 15px 30px;
|
||||||
|
background: #ff6b9d;
|
||||||
|
color: white;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 30px;
|
||||||
|
font-weight: bold;
|
||||||
|
border: 3px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.characters-img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-top: 30px;
|
||||||
|
border: 5px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
section { padding: 60px 20px; max-width: 1000px; margin: 0 auto; }
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 36px;
|
||||||
|
text-align: center;
|
||||||
|
color: #ff6b9d;
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chars-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.char-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 25px;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 5px 20px rgba(0,0,0,0.1);
|
||||||
|
border: 4px solid #ff6b9d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.char-emoji { font-size: 60px; display: block; margin-bottom: 10px; }
|
||||||
|
.char-card h3 { color: #ff6b9d; margin-bottom: 8px; }
|
||||||
|
|
||||||
|
.video-section {
|
||||||
|
background: #e4f5ff;
|
||||||
|
border-radius: 30px;
|
||||||
|
margin: 40px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-card {
|
||||||
|
background: white;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 30px;
|
||||||
|
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.video-card h3 { color: #ff6b9d; margin-bottom: 15px; }
|
||||||
|
|
||||||
|
.song-box {
|
||||||
|
background: #fff5e4;
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 20px;
|
||||||
|
margin: 20px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.song-box p {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ff6b9d;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.episodes-grid {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
|
||||||
|
gap: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode {
|
||||||
|
background: white;
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 20px;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-num {
|
||||||
|
display: inline-block;
|
||||||
|
background: #ff6b9d;
|
||||||
|
color: white;
|
||||||
|
padding: 5px 12px;
|
||||||
|
border-radius: 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.episode-emoji { font-size: 40px; margin-top: 10px; }
|
||||||
|
|
||||||
|
.subscribe {
|
||||||
|
background: linear-gradient(135deg, #ff6b9d, #ff8e53);
|
||||||
|
border-radius: 30px;
|
||||||
|
padding: 50px 30px;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
margin: 40px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscribe h2 { color: white; }
|
||||||
|
|
||||||
|
.subscribe form {
|
||||||
|
display: flex;
|
||||||
|
gap: 10px;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscribe input {
|
||||||
|
padding: 15px 25px;
|
||||||
|
border-radius: 30px;
|
||||||
|
border: none;
|
||||||
|
font-size: 16px;
|
||||||
|
min-width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subscribe button {
|
||||||
|
padding: 15px 30px;
|
||||||
|
border-radius: 30px;
|
||||||
|
border: none;
|
||||||
|
background: white;
|
||||||
|
color: #ff6b9d;
|
||||||
|
font-weight: bold;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background: #2d2d44;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
padding: 30px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header class="hero">
|
<header class="hero">
|
||||||
<div class="hero-bg"></div>
|
<h1>🎵 Весёлые друзья</h1>
|
||||||
<div class="hero-content">
|
<p class="subtitle">Музыкальный городок</p>
|
||||||
<h1>🎵 Весёлые друзья</h1>
|
<p>Детские песни и приключения вместе с Бубой и друзьями!</p>
|
||||||
<p class="subtitle">Музыкальный городок</p>
|
<a href="#video" class="btn">▶ Смотреть видео</a>
|
||||||
<p class="tagline">Детские песни и приключения вместе с Бубой и друзьями!</p>
|
<img src="file_00000000b4c0820ab6e62923776881e1.png" alt="Буба и друзья" class="characters-img">
|
||||||
<a href="#videos" class="cta-button">Смотреть видео</a>
|
|
||||||
</div>
|
|
||||||
<div class="hero-characters">
|
|
||||||
<img src="file_00000000b4c0820ab6e62923776881e1.png" alt="Буба и друзья" class="characters-image">
|
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<section class="characters" id="characters">
|
<section id="characters">
|
||||||
<h2>🌟 Наши герои</h2>
|
<h2>🌟 Наши герои</h2>
|
||||||
<div class="characters-grid">
|
<div class="chars-grid">
|
||||||
<div class="character-card bear">
|
<div class="char-card">
|
||||||
<div class="character-emoji">🐻</div>
|
<span class="char-emoji">🐻</span>
|
||||||
<h3>Буба</h3>
|
<h3>Буба</h3>
|
||||||
<p>Добрый медвежонок, главный герой</p>
|
<p>Добрый медвежонок</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="character-card bunny">
|
<div class="char-card">
|
||||||
<div class="character-emoji">🐰</div>
|
<span class="char-emoji">🐰</span>
|
||||||
<h3>Лулу</h3>
|
<h3>Лулу</h3>
|
||||||
<p>Весёлая зайка</p>
|
<p>Весёлая зайка</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="character-card panda">
|
<div class="char-card">
|
||||||
<div class="character-emoji">🐼</div>
|
<span class="char-emoji">🐼</span>
|
||||||
<h3>Панди</h3>
|
<h3>Панди</h3>
|
||||||
<p>Немного смешной и неуклюжий</p>
|
<p>Смешной и неуклюжий</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="character-card chick">
|
<div class="char-card">
|
||||||
<div class="character-emoji">🐥</div>
|
<span class="char-emoji">🐥</span>
|
||||||
<h3>Пипи</h3>
|
<h3>Пипи</h3>
|
||||||
<p>Маленький жёлтый цыплёнок</p>
|
<p>Маленький цыплёнок</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="character-card fox">
|
<div class="char-card">
|
||||||
<div class="character-emoji">🦊</div>
|
<span class="char-emoji">🦊</span>
|
||||||
<h3>Фокси</h3>
|
<h3>Фокси</h3>
|
||||||
<p>Хитрый, но добрый лисёнок</p>
|
<p>Хитрый лисёнок</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="videos" id="videos">
|
<section id="video" class="video-section">
|
||||||
<h2>🎬 Первый ролик</h2>
|
<h2>🎬 Первый ролик</h2>
|
||||||
<div class="video-featured">
|
<div class="video-card">
|
||||||
<div class="video-card featured">
|
<h3>🌈 Буба и друзья учат цвета</h3>
|
||||||
<div class="video-thumbnail">
|
<p>Буба просыпается и обнаруживает, что в городе исчезли цвета. Вместе с друзьями они ищут красный, жёлтый, зелёный и синий!</p>
|
||||||
<span class="play-icon">▶</span>
|
|
||||||
</div>
|
<div class="song-box">
|
||||||
<div class="video-info">
|
<p>🔴 Красный, красный — яблочко!</p>
|
||||||
<h3>🌈 Буба и друзья учат цвета</h3>
|
<p>🟡 Жёлтый — солнышко!</p>
|
||||||
<p>Буба просыпается и обнаруживает, что в городе исчезли цвета. Вместе с друзьями они отправляются искать красный, жёлтый, зелёный и синий цвета!</p>
|
<p>🟢 Зелёный — травушка!</p>
|
||||||
<div class="song-preview">
|
<p>🔵 Синий — речушка!</p>
|
||||||
<p class="song-text">🔴 Красный, красный — яблочко!</p>
|
|
||||||
<p class="song-text">🟡 Жёлтый — солнышко!</p>
|
|
||||||
<p class="song-text">🟢 Зелёный — травушка!</p>
|
|
||||||
<p class="song-text">🔵 Синий — речушка!</p>
|
|
||||||
</div>
|
|
||||||
<button class="notify-button" onclick="notify()">🔔 Узнать о выходе</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<p style="text-align: center; margin-top: 20px;">🎵 В конце все танцуют вместе!</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="episodes">
|
<section>
|
||||||
<h2>🎵 Скоро в эфире</h2>
|
<h2>🎵 Скоро в эфире</h2>
|
||||||
<div class="episodes-grid">
|
<div class="episodes-grid">
|
||||||
<div class="episode-card">
|
<div class="episode">
|
||||||
<span class="episode-number">02</span>
|
<span class="episode-num">02</span>
|
||||||
<h4>Буба учит цифры 1–10</h4>
|
<h4>Учит цифры 1–10</h4>
|
||||||
<p>🔢</p>
|
<div class="episode-emoji">🔢</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="episode-card">
|
<div class="episode">
|
||||||
<span class="episode-number">03</span>
|
<span class="episode-num">03</span>
|
||||||
<h4>Буба идёт на ферму</h4>
|
<h4>Идёт на ферму</h4>
|
||||||
<p>🐮</p>
|
<div class="episode-emoji">🐮</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="episode-card">
|
<div class="episode">
|
||||||
<span class="episode-number">04</span>
|
<span class="episode-num">04</span>
|
||||||
<h4>Буба и друзья моют руки</h4>
|
<h4>Моют руки</h4>
|
||||||
<p>🧼</p>
|
<div class="episode-emoji">🧼</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="episode-card">
|
<div class="episode">
|
||||||
<span class="episode-number">05</span>
|
<span class="episode-num">05</span>
|
||||||
<h4>Буба учит животных</h4>
|
<h4>Учит животных</h4>
|
||||||
<p>🐶🐱</p>
|
<div class="episode-emoji">🐶🐱</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="episode-card">
|
<div class="episode">
|
||||||
<span class="episode-number">06</span>
|
<span class="episode-num">06</span>
|
||||||
<h4>Буба собирается спать</h4>
|
<h4>Собирается спать</h4>
|
||||||
<p>🌙</p>
|
<div class="episode-emoji">🌙</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="episode-card">
|
<div class="episode">
|
||||||
<span class="episode-number">07</span>
|
<span class="episode-num">07</span>
|
||||||
<h4>Буба едет на автобусе</h4>
|
<h4>Едет на автобусе</h4>
|
||||||
<p>🚌</p>
|
<div class="episode-emoji">🚌</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="episode-card">
|
<div class="episode">
|
||||||
<span class="episode-number">08</span>
|
<span class="episode-num">08</span>
|
||||||
<h4>Буба и друзья убирают игрушки</h4>
|
<h4>Убирают игрушки</h4>
|
||||||
<p>🧸</p>
|
<div class="episode-emoji">🧸</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="episode-card">
|
<div class="episode">
|
||||||
<span class="episode-number">09</span>
|
<span class="episode-num">09</span>
|
||||||
<h4>Буба учится делиться</h4>
|
<h4>Учится делиться</h4>
|
||||||
<p>🎁</p>
|
<div class="episode-emoji">🎁</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="episode-card">
|
<div class="episode">
|
||||||
<span class="episode-number">10</span>
|
<span class="episode-num">10</span>
|
||||||
<h4>Большая музыкальная вечеринка</h4>
|
<h4>Музыкальная вечеринка</h4>
|
||||||
<p>🎉</p>
|
<div class="episode-emoji">🎉</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="about">
|
|
||||||
<h2>🎨 О проекте</h2>
|
|
||||||
<div class="about-content">
|
|
||||||
<p>Все персонажи живут в красочном Музыкальном городке, где каждый день происходит маленькое приключение.</p>
|
|
||||||
<p>Мы создаём качественную 3D-анимацию с мягкими округлыми персонажами, большими выразительными глазами и ярким, но не раздражающим фоном.</p>
|
|
||||||
<p>🎶 Музыка полностью оригинальная — мы создаём свои песни и персонажей!</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="subscribe">
|
<section class="subscribe">
|
||||||
<h2>📢 Подпишитесь на канал!</h2>
|
<h2>📢 Подпишитесь!</h2>
|
||||||
<p>Узнайте первыми о выходе новых роликов</p>
|
<p>Узнайте первыми о выходе новых роликов</p>
|
||||||
<form id="subscribe-form" onsubmit="subscribe(event)">
|
<form onsubmit="event.preventDefault(); alert('🎉 Спасибо! Мы сообщим о выходе!');">
|
||||||
<input type="email" placeholder="Ваш email" required>
|
<input type="email" placeholder="Ваш email" required>
|
||||||
<button type="submit">Подписаться</button>
|
<button type="submit">Подписаться</button>
|
||||||
</form>
|
</form>
|
||||||
<p id="subscribe-message" class="subscribe-message"></p>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<p>© 2026 Весёлые друзья — Музыкальный городок</p>
|
<p>© 2026 Весёлые друзья — Музыкальный городок</p>
|
||||||
<p>🎵 Детские песни и приключения</p>
|
<p>🎵 Детские песни и приключения</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
<script src="script.js"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user