<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Презентация: Госуслуги</title>
<style>
body { font-family: sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f2f5; }
.slide { display: none; background: white; padding: 40px; border-radius: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); width: 80%; max-width: 800px; text-align: center; }
.active { display: block; }
h1 { color: #0056b3; }
ul { text-align: left; display: inline-block; }
button { margin-top: 20px; padding: 10px 20px; cursor: pointer; }
</style>
</head>
<body>
<div id="slides">
<div class="slide active">
<h1>Регистрация и работа с Госуслугами</h1>
<p>Руководство пользователя</p>
</div>
<div class="slide">
<h1>Уровни учетной записи</h1>
<p>На портале Госуслуг существует три типа учетных записей:</p>
<ul>
<li>Упрощенная</li>
<li>Стандартная</li>
<li>Подтвержденная</li>
</ul>
</div>
<div class="slide">
<h1>Упрощенная учетная запись</h1>
<p>Что нужно: ФИО, номер телефона или email.</p>
<p>Доступно: просмотр справочной информации, запись к врачу (в некоторых регионах).</p>
</div>
<div class="slide">
<h1>Стандартная учетная запись</h1>
<p>Что нужно: добавить данные паспорта и СНИЛС.</p>
<p>Доступно: запись на прием к врачу, проверка штрафов ГИБДД, запись в ГИБДД.</p>
</div>
<div class="slide">
<h1>Подтвержденная учетная запись</h1>
<p>Как получить: через банк, в МФЦ или через электронную подпись.</p>
<p>Доступно: все услуги, включая получение загранпаспорта, регистрацию по месту жительства и др.</p>
</div>
<div class="slide">
<h1>Безопасность</h1>
<ul>
<li>Никогда не передавайте пароль третьим лицам.</li>
<li>Включите двухфакторную аутентификацию (вход по СМС).</li>
<li>Используйте только официальный сайт gosuslugi.ru.</li>
</ul>
</div>
</div>
<script>
let current = 0;
const slides = document.querySelectorAll('.slide');
document.addEventListener('keydown', (e) => {
if(e.key === 'ArrowRight' && current < slides.length - 1) {
slides[current].classList.remove('active');
slides[++current].classList.add('active');
}
if(e.key === 'ArrowLeft' && current > 0) {
slides[current].classList.remove('active');
slides[--current].classList.add('active');
}
});
</script>
</body>
</html>
