DOCTYPE html

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', Roboto, 'Helvetica Neue', sans-serif;
background: #1e2a3a;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 20px;
}
/* Контейнер презентации */
.presentation-container {
max-width: 1200px;
width: 100%;
background: #0f1720;

2.

border-radius: 32px;
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
overflow: hidden;
position: relative;
}
/* Слайдер */
.slider {
position: relative;
background: #ffffff;
min-height: 500px;
transition: all 0.2s;
}
.slides-wrapper {
overflow: hidden;
}
.slides {
display: flex;
transition: transform 0.4s ease-in-out;
}
.slide {
flex: 0 0 100%;
padding: 40px 50px;
background: white;
box-sizing: border-box;
min-height: 500px;

3.

display: flex;
flex-direction: column;
justify-content: center;
}
/* Типографика */
h1 {
font-size: 2.8rem;
font-weight: 700;
background: linear-gradient(135deg, #1e3c72, #2b4c7c);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
margin-bottom: 1rem;
}
h2 {
font-size: 2rem;
font-weight: 600;
color: #1e3c72;
border-left: 6px solid #2b7a4b;
padding-left: 20px;
margin: 20px 0 20px 0;
}
h3 {
font-size: 1.5rem;
font-weight: 600;
color: #2c3e66;

4.

margin-bottom: 15px;
}
.subtitle {
font-size: 1.2rem;
color: #2c3e50;
margin-bottom: 30px;
font-weight: 400;
}
.error-block {
background: #fff3e0;
border-left: 8px solid #e67e22;
padding: 15px 20px;
margin: 20px 0;
border-radius: 12px;
}
.solution-block {
background: #eaf7f0;
border-left: 8px solid #2b7a4b;
padding: 15px 20px;
margin: 20px 0;
border-radius: 12px;
}
.badge {
display: inline-block;
background: #1e3c72;

5.

color: white;
font-weight: bold;
padding: 6px 14px;
border-radius: 40px;
font-size: 0.8rem;
margin-bottom: 15px;
}
.grid-2 {
display: flex;
gap: 30px;
margin-top: 20px;
flex-wrap: wrap;
}
.card {
flex: 1;
background: #f8fafc;
border-radius: 24px;
padding: 20px;
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.requirement-list {
list-style: none;
padding: 0;
}
.requirement-list li {
margin-bottom: 16px;

6.

padding-left: 28px;
position: relative;
font-size: 1.05rem;
}
.requirement-list li:before {
content: "✓";
color: #2b7a4b;
font-weight: bold;
position: absolute;
left: 0;
font-size: 1.2rem;
}
.footer-note {
margin-top: 30px;
font-style: italic;
color: #4a627a;
border-top: 1px solid #e2e8f0;
padding-top: 20px;
}
/* Навигация */
.nav-buttons {
display: flex;
justify-content: space-between;
align-items: center;
background: #f1f5f9;
padding: 12px 30px;
border-top: 1px solid #cbd5e1;

7.

}
button {
background: #1e3c72;
border: none;
color: white;
font-size: 1.1rem;
font-weight: 500;
padding: 10px 24px;
border-radius: 40px;
cursor: pointer;
transition: 0.2s;
box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
button:hover {
background: #2b4c7c;
transform: scale(1.02);
}
.page-indicator {
font-size: 1rem;
font-weight: 500;
background: white;
padding: 6px 18px;
border-radius: 40px;
color: #1e3c72;
}

8.

@media (max-width: 700px) {
.slide { padding: 30px 20px; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
}
</style>
</head>
<body>
<div class="presentation-container">
<div class="slider">
<div class="slides-wrapper">
<div class="slides" id="slides">

<div class="slide">
<div style="text-align: center;">
<div class="badge" style="background:#2b7a4b;">Аппаратная учёба</div>
<h1 style="font-size: 3rem; margin-top: 20px;">Исполнительская
дисциплина</h1>
<p style="font-size: 1.5rem; color:#2d3e50; margin: 20px 0;">Контроль для
реального результата</p>
<div style="margin-top: 60px; color:#6c86a3;">Чёткая задача → системный
контроль → результат</div>
</div>
</div>

<div class="slide">
<span class="badge">Типичная ошибка №1</span>
<h2>
Размытая постановка задачи</h2>
<div class="error-block">

9.

<strong>
Неправильно:</strong> «Проработайте вопрос», «Подготовьте
информацию» — без сроков и критериев.
</div>
<div class="solution-block">
<strong>
Решение — чёткая задача:</strong><br>
• Что именно сделать?<br>
• К какому сроку?<br>
• В каком виде предоставить ответ (таблица, доклад, служебная записка)?
</div>
<div class="footer-note">Если задача неконкретна — контролировать нечего,
результат случаен.</div>
</div>

<div class="slide">
<span class="badge">Типичная ошибка №2</span>
<h2>
Контроль только в день дедлайна</h2>
<div class="error-block">
Ждать отчёта в последний момент → невозможно повлиять на ход
исполнения.
</div>
<div class="solution-block">
<strong>
Системный контроль:</strong><br>
• Промежуточные контрольные точки<br>
• Короткие отчёты на планерках: «Что сделано? Какие препятствия?»<br>
• Управление процессом, а не констатация провала.
</div>
</div>

10.

<div class="slide">
<span class="badge">Типичная ошибка №3</span>
<h2>
Контроль «после факта»</h2>
<div class="error-block">
Разбор ситуации, когда срок уже истёк — это уже не управление, а работа над
ошибками.
</div>
<div class="solution-block">
<strong>
Контроль ДО наступления срока:</strong><br>
Эффективный контроль происходит, когда ещё есть время вмешаться,
скорректировать и помочь.
</div>
<div style="background:#eef2ff; padding: 12px; border-radius: 12px; margin-top:
20px;">
Правило: «Никаких сюрпризов в день дедлайна».
</div>
</div>

<div class="slide">
<span class="badge">Ключевой принцип</span>
<h2>
Группа контроля — это партнёрство</h2>
<div class="grid-2">
<div class="card">
<h3>
Не задача</h3>
<p>Принуждение, наказание, поиск виноватых.</p>
</div>
<div class="card">
<h3>
Реальная задача</h3>

11.

<p>Помощь, координация, проверка проекта ответа на соответствие
правилам и требованиям.</p>
</div>
</div>
<div class="solution-block" style="margin-top: 10px;">
<strong>Обеспечивают:</strong> взаимодействие с соисполнителями, снятие
препятствий, контроль качества до отправки.
</div>
</div>

<div class="slide">
<span class="badge">Система эффективной дисциплины</span>
<h2>4 требования к контролю</h2>
<ul class="requirement-list" style="margin-top: 20px;">
<li><strong>1. Чёткая постановка задачи</strong> — критерии, срок, форма
ответа.</li>
<li><strong>2. Системность контроля</strong> — регулярный мониторинг,
планерки, промежуточные отчёты.</li>
<li><strong>3. Контроль сроков до дедлайна</strong> — управление, а не
констатация.</li>
<li><strong>4. Обратная связь группы контроля</strong> — помощь,
координация, проверка.</li>
</ul>
<div class="footer-note" style="text-align: center;">Внедрите — и дисциплина
станет инструментом достижения целей.</div>
</div>

<div class="slide">
<div style="text-align: center;">

12.

<h2 style="border-left: none; text-align: center;">
Результат внедрения</h2>
<p style="font-size: 1.4rem; margin: 30px 0;">Поручения исполняются
<strong>своевременно и качественно</strong>.</p>
<p style="font-size: 1.2rem;">Исполнительская дисциплина — не
формальность,<br> а реальный рабочий инструмент руководителя и группы контроля.</p>
<div style="margin-top: 60px; font-size: 1rem; color: #2c5a7a;">Спасибо за
внимание! Вопросы?</div>
</div>
</div>
</div>
</div>
</div>
<div class="nav-buttons">
<button id="prevBtn">◀ Назад</button>
<span class="page-indicator" id="pageIndicator">1 / 7</span>
<button id="nextBtn">Вперед ▶</button>
</div>
</div>
<script>
const slides = document.getElementById('slides');
const slidesArray = document.querySelectorAll('.slide');
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const indicator = document.getElementById('pageIndicator');
let currentIndex = 0;
const totalSlides = slidesArray.length;
function updateSlide() {
const offset = -currentIndex * 100;

13.

slides.style.transform = `translateX(${offset}%)`;
indicator.innerText = `${currentIndex + 1} / ${totalSlides}`;
}
prevBtn.addEventListener('click', () => {
if (currentIndex > 0) {
currentIndex--;
updateSlide();
}
});
nextBtn.addEventListener('click', () => {
if (currentIndex < totalSlides - 1) {
currentIndex++;
updateSlide();
}
});
// Клавиши влево/вправо
window.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') {
if (currentIndex > 0) currentIndex--;
updateSlide();
} else if (e.key === 'ArrowRight') {
if (currentIndex < totalSlides - 1) currentIndex++;
updateSlide();
}
});

14.

updateSlide();
</script>
</body>
</html>

English Русский Правила