internetSimilar presentations:
code2pdf_69d73a9f07d57
1.
<!DOCTYPE html><html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Биология для детей с ЗПР - Строение цветка</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', 'Comic Neue', 'Arial', sans-serif;
background: #2b5e2b;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
/* Слайд-контейнер */
.presentation {
width: 1000px;
max-width: 100%;
background: white;
border-radius: 40px;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
overflow: hidden;
position: relative;
}
.slide {
display: none;
padding: 40px 30px 50px 30px;
min-height: 550px;
flex-direction: column;
justify-content: space-between;
background: #fffff0;
}
.slide.active {
display: flex;
}
/* Крупный заголовок */
h1 {
font-size: 48px;
color: #1e3a1e;
text-align: center;
margin-bottom: 30px;
background: #ffefb9;
display: inline-block;
padding: 10px 25px;
border-radius: 60px;
align-self: center;
}
h2 {
font-size: 38px;
color: #2c5e2c;
border-left: 15px solid #ffaa33;
padding-left: 20px;
margin: 20px 0;
}
/* Крупные изображения частей цветка */
.flower-part {
display: flex;
align-items: center;
gap: 40px;
background: #f9f2e0;
border-radius: 50px;
padding: 20px;
margin: 20px 0;
flex-wrap: wrap;
justify-content: center;
}
.part-icon {
font-size: 100px;
background: white;
width: 150px;
height: 150px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 15px rgba(0,0,0,0.1);
}
.part-text {
font-size: 32px;
font-weight: bold;
background: #fff0cc;
2.
padding: 15px 25px;border-radius: 50px;
}
.part-desc {
font-size: 26px;
color: #333;
}
/* Алгоритм */
.steps {
display: flex;
justify-content: space-around;
margin: 40px 0;
gap: 20px;
flex-wrap: wrap;
}
.step {
background: #c8e6c8;
border-radius: 60px;
padding: 20px;
text-align: center;
flex: 1;
font-size: 28px;
font-weight: bold;
border: 3px solid green;
}
.step span {
font-size: 50px;
display: block;
}
/* Карточки цветные */
.color-cards {
display: flex;
gap: 25px;
justify-content: center;
margin: 30px 0;
flex-wrap: wrap;
}
.card {
width: 180px;
text-align: center;
border-radius: 30px;
padding: 20px;
font-size: 28px;
font-weight: bold;
}
.pink { background: #ffb7c5; border: 5px solid #ff4081; }
.yellow { background: #fff0a5; border: 5px solid #f9a825; }
.green { background: #a5d6a5; border: 5px solid #2e7d32; }
.brown { background: #d7ccc8; border: 5px solid #8d6e63; }
/* Кнопки управления */
.nav {
display: flex;
justify-content: space-between;
padding: 15px 30px 25px;
background: #f5f5dc;
}
button {
font-size: 28px;
padding: 12px 28px;
background: #ffaa33;
border: none;
border-radius: 60px;
font-weight: bold;
cursor: pointer;
transition: 0.2s;
}
button:hover {
background: #ff8c1a;
}
.slide-counter {
font-size: 28px;
font-weight: bold;
background: white;
padding: 8px 20px;
border-radius: 40px;
}
/* Для рефлексии */
.traffic-light {
display: flex;
gap: 30px;
justify-content: center;
margin-top: 40px;
}
.light {
font-size: 70px;
cursor: pointer;
padding: 10px;
border-radius: 80px;
background: #eee;
}
3.
.message {font-size: 28px;
text-align: center;
margin-top: 20px;
background: #d4e0ff;
padding: 15px;
border-radius: 40px;
}
@media (max-width: 700px) {
h1 { font-size: 36px; }
.part-text { font-size: 24px; }
.step { font-size: 20px; }
}
</style>
</head>
<body>
<div class="presentation">
<div class="slides">
<!-- Слайд 1: Тема -->
<div class="slide active" id="slide1">
<h1>
Строение цветка
</h1>
<div style="text-align: center; margin: 40px 0;">
<div style="font-size: 140px;"> </div>
<p style="font-size: 32px; background: #ffe0a3; display: inline-block; padding: 15px 30px; border-radius: 50px;">6 класс (ЗПР)</p>
</div>
<p style="font-size: 28px; text-align: center;">Сегодня узнаем секрет цветка</p>
<p style="font-size: 26px; text-align: center; margin-top: 30px;">Правило: <strong>Слушаем — смотрим — показываем</strong></p>
</div>
<!-- Слайд 2: Цветок целиком -->
<div class="slide" id="slide2">
<h2>
Это цветок</h2>
<div style="text-align: center; font-size: 150px;"> </div>
<p style="font-size: 30px; text-align: center;">Он состоит из частей</p>
<div class="steps">
<div class="step"><span>1 ⃣ </span> Посмотри</div>
<div class="step"><span>2 ⃣ </span> Покажи</div>
<div class="step"><span>3 ⃣ </span> Назови</div>
</div>
</div>
<!-- Слайд 3: Лепестки -->
<div class="slide" id="slide3">
<h2>
Лепестки</h2>
<div class="flower-part">
<div class="part-icon" style="background: #ffb7c5;">
</div>
<div class="part-text">Самые красивые</div>
</div>
<div class="color-cards"><div class="card pink">Розовая карточка</div></div>
<p style="font-size: 28px;">✋ Покажи лепестки на макете</p>
</div>
<!-- Слайд 4: Чашелистики -->
<div class="slide" id="slide4">
<h2>
Чашелистики</h2>
<div class="flower-part">
<div class="part-icon" style="background: #d7ccc8;">
</div>
<div class="part-text">Зелёные листочки внизу</div>
</div>
<div class="color-cards"><div class="card brown">Коричневая карточка</div></div>
<p style="font-size: 28px;">✋ Защищают бутон</p>
</div>
<!-- Слайд 5: Тычинки -->
<div class="slide" id="slide5">
<h2>
Тычинки</h2>
<div class="flower-part">
<div class="part-icon" style="background: #fff0a5;">
</div>
<div class="part-text">Палочки с пыльцой</div>
</div>
<div class="color-cards"><div class="card yellow">Жёлтая карточка</div></div>
</div>
<!-- Слайд 6: Пестик -->
<div class="slide" id="slide6">
<h2>
Пестик</h2>
<div class="flower-part">
<div class="part-icon" style="background: #a5d6a5;"> </div>
<div class="part-text">Один, самый толстый</div>
</div>
<div class="color-cards"><div class="card green">Зелёная карточка</div></div>
<p style="font-size: 28px;">
Внутри будут семена</p>
</div>
<!-- Слайд 7: Закрепление - игра -->
<div class="slide" id="slide7">
<h2>✋ Поиграем!</h2>
<p style="font-size: 32px;">Я показываю — вы поднимаете карточку</p>
<div class="color-cards">
<div class="card pink">Лепестки</div>
<div class="card brown">Чашелистики</div>
<div class="card yellow">Тычинки</div>
<div class="card green">Пестик</div>
</div>
<p style="font-size: 28px; margin-top: 30px;">✅ Найди в своём цветке (тюльпан)</p>
</div>
4.
<!-- Слайд 8: Рефлексия светофор --><div class="slide" id="slide8">
<h2>
Как ты запомнил?</h2>
<div class="traffic-light">
<div class="light" data-choice="green"> </div>
<div class="light" data-choice="yellow"> </div>
<div class="light" data-choice="red"> </div>
</div>
<div id="reflectionMessage" class="message">
Нажми на цвет
</div>
<p style="font-size: 28px; text-align: center; margin-top: 20px;">
Повторим хором:<br>
<strong>«У цветка есть лепестки, тычинки, пестик и чашелистики»</strong></p>
</div>
</div>
<div class="nav">
<button id="prevBtn">◀ Назад</button>
<div class="slide-counter" id="counter">1 / 8</div>
<button id="nextBtn">Вперёд ▶</button>
</div>
</div>
<script>
let currentSlide = 1;
const totalSlides = 8;
function showSlide(n) {
// скрыть все
for (let i = 1; i <= totalSlides; i++) {
const slide = document.getElementById(`slide${i}`);
if (slide) slide.classList.remove('active');
}
const newSlide = document.getElementById(`slide${n}`);
if (newSlide) newSlide.classList.add('active');
document.getElementById('counter').innerText = `${n} / ${totalSlides}`;
currentSlide = n;
}
document.getElementById('nextBtn').addEventListener('click', () => {
if (currentSlide < totalSlides) showSlide(currentSlide + 1);
});
document.getElementById('prevBtn').addEventListener('click', () => {
if (currentSlide > 1) showSlide(currentSlide - 1);
});
// Рефлексия на 8 слайде
const lights = document.querySelectorAll('.light');
const msgDiv = document.getElementById('reflectionMessage');
if (lights.length) {
lights.forEach(light => {
light.addEventListener('click', (e) => {
const choice = light.getAttribute('data-choice');
if (choice === 'green') msgDiv.innerHTML = '✅ Молодец! Ты сам можешь показать любую часть цветка.';
else if (choice === 'yellow') msgDiv.innerHTML = '
Хорошо! Немного помогу — и всё получится.';
else if (choice === 'red') msgDiv.innerHTML = '
Ничего страшного! Давай ещё раз посмотрим на цветок вместе.';
msgDiv.style.background = '#f9eec1';
});
});
}
// Клавиши влево-вправо
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowRight') document.getElementById('nextBtn').click();
if (e.key === 'ArrowLeft') document.getElementById('prevBtn').click();
});
</script>
</body>
</html>