Стойкий оловянный солдат
(Адаптированная версия)
1. Семья в коробке
Жили-были двадцать пять солдатиков. Они были братьями. Их сделали из одной оловянной ложки. У них были красные мундиры и синие брюки. Все солдатики лежали в тёмной коробке. Они лежали тихо. Они жвали.
2. Особенный солдат
Коробка открылась. Мальчик закричал: «Солдатики!» Он стал ставить их на стол. Двадцать четыре солдата стояли на двух ногах. А один солдат стоял на одной ноге. На него не хватило олова. Но он стоял крепко. Он не падал.
Он говорил себе: «Я — солдат. Я стою прямо».
3. Прекрасная танцовщица
На столе стоял картонный дворец. В дверях стояла девочка. Она была танцовщицей. Она замерла в красивой позе: одну ногу подняла высоко, а на другой стояла.
Солдат подумал: «Она такая же, как я. У неё тоже одна нога». Он смотрел на неё и не отводил глаз.
Он говорил себе: «Я — солдат. Я стою прямо».
4. Опасность и путь
Наступила ночь. Из табакерки выскочил злой Тролль. Тролль сказал солдату: «Не смотри на танцовщицу!» Но солдат молчал. Он выполнял свою работу.
Утром окно открылось. Солдат упал вниз с третьего этажа. Он упал на голову. Было больно. Но он не плакал.
Он говорил себе: «Я — солдат. Я стою прямо».
5. Лодка и вода
Пошёл сильный дождь. Стало очень мокро. Мальчики сделали лодку из бумаги. Они посадили туда солдата. Лодка поплыла по ручью. Вода была холодной. Лодка качалась: вверх и вниз. Влево и вправо. Солдат дрожал. Но он не бросил ружьё.
Он говорил себе: «Я — солдат. Я стою прямо».
6. Темнота
Лодка заплыла в тёмную трубу. Там было очень темно. Вдруг выскочила большая Крыса. Крыса закричала: «Куда ты плывёшь? Стой!»
Но вода несла лодку быстро. Крыса не догнала солдата. Лодка стала тонуть. Бумага размокла. Солдат ушёл под воду. Его проглотила большая Рыба. Внутри рыбы было тесно и темно.
Он говорил себе: «Я — солдат. Я стою прямо».
7. Возвращение домой
Рыбу поймали. Её принесли на кухню. Повар разрезал рыбу и увидел солдата. Солдату было очень радостно — его снова поставили на тот же стол!
Он увидел свой дворец. Он увидел свою танцовщицу. Она всё так же стояла на одной ноге. Они смотрели друг на друга. Им было хорошо вместе.
Он говорил себе: «Я — солдат. Я стою прямо».
8. Сердце в огне
Вдруг в комнате поднялся сильный ветер. Он подхватил солдата и танцовщицу и бросил их в жаркую печку. Там горел огонь.
Солдату стало очень жарко. Олово стало мягким. Но он не боялся. Он чувствовал, что танцовщица рядом. Они прижались друг к другу и превратились в одно целое.
Утром люди нашли в золе кусочек олова. Этот кусочек был похож на маленькое сердце. Теперь солдат и танцовщица всегда будут вместе.
Солдат выстоял до конца.
[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Карточки: Стойкий оловянный солдат</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.perspective-1000 {
perspective: 1000px;
}
.flip-card-inner {
transition: transform 0.6s;
transform-style: preserve-3d;
cursor: pointer;
}
.flip-card-inner.is-flipped {
transform: rotateY(180deg);
}
.flip-card-front, .flip-card-back {
backface-visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
padding: 2rem;
text-align: center;
border-radius: 1.5rem;
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.flip-card-back {
transform: rotateY(180deg);
background-color: #fef3c7; /* Amber 100 */
color: #92400e; /* Amber 800 */
border: 4px solid #f59e0b; /* Amber 500 */
}
.flip-card-front {
background-color: #e0f2fe; /* Sky 100 */
color: #075985; /* Sky 800 */
border: 4px solid #0ea5e9; /* Sky 500 */
}
.card-container {
height: 400px;
width: 100%;
max-width: 500px;
}
body {
background-color: #f8fafc;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body class="min-h-screen flex flex-col items-center justify-center p-4">
<!-- Header Section -->
<div class="text-center mb-8">
<h1 class="text-3xl font-bold text-slate-800 mb-2">Стойкий оловянный солдат</h1>
<p class="text-slate-600">Нажми на карточку, чтобы узнать ответ</p>
</div>
<!-- Progress Tracker -->
<div class="mb-4 text-sm font-semibold text-slate-500 uppercase tracking-wider">
Карточка <span id="current-index">1</span> из 25
</div>
<!-- Flashcard Area -->
<div class="card-container perspective-1000 mb-8">
<div id="card-inner" class="flip-card-inner w-full h-full relative">
<div class="flip-card-front">
<p id="front-text" class="text-2xl md:text-3xl font-bold"></p>
</div>
<div class="flip-card-back">
<p id="back-text" class="text-xl md:text-2xl font-medium"></p>
</div>
</div>
</div>
<!-- Controls -->
<div class="flex gap-4">
<button id="prev-btn" class="px-6 py-3 bg-white border-2 border-slate-200 rounded-xl hover:bg-slate-50 transition-colors font-bold text-slate-700 disabled:opacity-50 disabled:cursor-not-allowed">
← Назад
</button>
<button id="next-btn" class="px-6 py-3 bg-sky-600 text-white rounded-xl hover:bg-sky-700 shadow-lg shadow-sky-200 transition-all font-bold">
Вперед →
</button>
</div>
<script>
const flashcards = [
{ front: "Главный герой сказки", back: "Оловянный солдат на одной ноге" },
{ front: "Сколько было братьев-солдатиков?", back: "Двадцать пять" },
{ front: "Из чего их сделали?", back: "Из одной оловянной ложки" },
{ front: "Какого цвета был мундир?", back: "Красного" },
{ front: "Какого цвета были брюки?", back: "Синего" },
{ front: "Где лежали солдатики?", back: "В тёмной коробке" },
{ front: "Что особенного в последнем солдате?", back: "Он стоял на одной ноге" },
{ front: "Почему у него была одна нога?", back: "На него не хватило олова" },
{ front: "Что солдат говорил себе?", back: "«Я — солдат. Я стою прямо»" },
{ front: "Что стояло на столе?", back: "Картонный дворец" },
{ front: "Кто стоял во дворце?", back: "Танцовщица" },
{ front: "Как стояла танцовщица?", back: "На одной ноге, вторую подняла высоко" },
{ front: "Кто выскочил из табакерки?", back: "Злой Тролль" },
{ front: "Что случилось утром?", back: "Солдат упал из окна с третьего этажа" },
{ front: "Из чего была лодка?", back: "Из бумаги" },
{ front: "Какая была вода в ручье?", back: "Холодная" },
{ front: "Куда заплыла лодка?", back: "В тёмную трубу" },
{ front: "Кто жил в трубе?", back: "Большая Крыса" },
{ front: "Что просила Крыса?", back: "Паспорт" },
{ front: "Что случилось, когда бумага размокла?", back: "Лодка стала тонуть" },
{ front: "Кто проглотил солдата?", back: "Большая Рыба" },
{ front: "Как солдат попал на кухню?", back: "Рыбу поймали и принесли повару" },
{ front: "Куда мальчик бросил солдата?", back: "В горячую печку" },
{ front: "Как танцовщица попала в огонь?", back: "Её забросил ветер" },
{ front: "Что нашли в золе?", back: "Оловянное сердце" }
];
let currentIndex = 0;
const cardInner = document.getElementById('card-inner');
const frontText = document.getElementById('front-text');
const backText = document.getElementById('back-text');
const currentIndexDisplay = document.getElementById('current-index');
const prevBtn = document.getElementById('prev-btn');
const nextBtn = document.getElementById('next-btn');
function updateCard() {
cardInner.classList.remove('is-flipped');
setTimeout(() => {
frontText.innerText = flashcards[currentIndex].front;
backText.innerText = flashcards[currentIndex].back;
currentIndexDisplay.innerText = currentIndex + 1;
prevBtn.disabled = currentIndex === 0;
if (currentIndex === flashcards.length - 1) {
nextBtn.innerText = "Заново";
} else {
nextBtn.innerText = "Вперед →";
}
}, 150);
}
cardInner.addEventListener('click', () => {
cardInner.classList.toggle('is-flipped');
});
nextBtn.addEventListener('click', () => {
if (currentIndex < flashcards.length - 1) {
currentIndex++;
} else {
currentIndex = 0;
}
updateCard();
});
prevBtn.addEventListener('click', () => {
if (currentIndex > 0) {
currentIndex--;
updateCard();
}
});
// Initialize first card
updateCard();
</script>
</body>
</html>[/html]